前端代码
<template>
<view-grid ref="grid"
:columns="columns"
:detail="detail"
:editFormFields="editFormFields"
:editFormOptions="editFormOptions"
:searchFormFields="searchFormFields"
:searchFormOptions="searchFormOptions"
:table="table"
:extend="extend">
</view-grid>
</template>
<script>
import extend from "@/extension/ReportsOrKanban/StockReports.js";
import { ref, defineComponent } from "vue";
export default defineComponent({
setup() {
const table = ref({
key: 'Id',
footer: "Foots",
cnName: '镭雕库存统计报表',
name: 'StockReports/StockReports',
url: "/StockReports/StockReports",
sortName: "Id"
});
const editFormFields = ref({"WorkpieceNo":"","WorkpieceName":"","PlanAmount":"","PlanDate":"","Shift":""});
const editFormOptions = ref([]);
const searchFormFields = ref({"WorkpieceNo":"","WorkpieceName":"","PlanDate":"","Shift":""});
const searchFormOptions = ref([[{"dataKey":"RadiumCarvingInfo","data":[],"title":"产品编码","field":"PTDeviceCode","type":"like"},
{"title":"产品名称","field":"PTName","type":"like"},]]);
const columns = ref([
{field:'createDate',title:'创建时间',type:'string',width:180,require:true,align:'left',sort:true},
{field:'ptName',title:'产品名称',type:'string',width:180,require:true,align:'left',sort:true},
{field:'ptDeviceCode',title:'产品编码',type:'string',width:180,require:true,align:'left',sort:true},
]);
const detail = ref({
cnName: "#detailCnName",
table: "#detailTable",
columns: [],
sortName: "",
key: ""
});
return {
table,
extend,
editFormFields,
editFormOptions,
searchFormFields,
searchFormOptions,
columns,
detail,
};
},
});
</script>
js代码：
/*****************************************************************************************
** Author:jxx 2022
** QQ:283591387
**完整文档见：http://v2.volcore.xyz/document/api 【代码生成页面ViewGrid】
**常用示例见：http://v2.volcore.xyz/document/vueDev
**后台操作见：http://v2.volcore.xyz/document/netCoreDev
*****************************************************************************************/
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
let extension = {
components: {
//查询界面扩展组件
gridHeader: '',
gridBody: '',
gridFooter: '',
//新建、编辑弹出框扩展组件
modelHeader: '',
modelBody: '',
modelFooter: ''
},
data(){
return{
DateFrom:[],//设置日期默认值
}
},
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
methods: {
//下面这些方法可以保留也可以删除
onInit() { //框架初始化配置前，
this.setFiexdSearchForm(true);
},
onInited() {
//框架初始化配置后
},
searchBefore(param) {
//界面查询前,可以给param.wheres添加查询参数
//返回false，则不会执行查询
return true;
},
searchAfter (rows, result) { //查询ViewGird表数据后param查询参数,result回返查询的结果
console.log(result.extra[0]);
if(result.extra.length!=0){
this.columns.length=0;
for(let key in result.extra[0]){
//不想要type
if(key=="type"){
continue;
}
this.columns.push( { field: key, title: key })
}
}
rows.push(...result.extra)
return true;
},
addBefore(formData) {
//新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
return true;
},
updateBefore(formData) {
//编辑保存前formData为对象，包括明细表、删除行的Id
return true;
},
rowClick({ row, column, event }) {
//查询界面点击行事件
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
},
modelOpenAfter(row) {
}
}
};
export default extension;
列名只需写部分固定即可，会根据后端传值变化列名
后端写法：
[HttpPost, Route("tDefectReportgetPageData")]
[ApiActionPermission("QualityStatistics", "tDefectReportgetPageData", false)]
public async Task<PageGridData<tDefectReport>> tDefectReportgetPageData([FromBody] PageDataOptions options)
{
int page = options.Page;
#region 从前端提取条件值
StackReportsTwoFrom from = new StackReportsTwoFrom();
List<SearchParameters> searchParametersList = new List<SearchParameters>();
//日期，线别，班别，状态，产品代码，产品名称，生产数，检验数，一次合格数，
//一次报废数，待定品合格数，待定品报废数，总体合格数，目标合格率，总体合格 率，报废率；
if (!string.IsNullOrEmpty(options.Wheres))
{
try
{
searchParametersList = options.Wheres.DeserializeObject<List<SearchParameters>>();
}
catch { }
}
//判断列的数据类型数字，日期的需要判断值的格式是否正确
for (int i = 0; i < searchParametersList.Count; i++)
{
SearchParameters x = searchParametersList[i];
x.DisplayType = x.DisplayType.GetDBCondition();
if (string.IsNullOrEmpty(x.Value))
{
continue;
}
else if (x.Name == "PTName")
{
from.PTName = x.Value;
}
else if (x.Name == "PTDeviceCode")
{
from.DeviceCode = x.Value;
}
else if (x.Name == "CreateDate" && x.DisplayType == ">=")
{
from.begintime = x.Value;
}
else if (x.Name == "CreateDate" && x.DisplayType == "<=")
{
from.endtime = x.Value;
}
}
#endregion
//这段代码不要被注释了
PageGridData<tDefectReport> gridData = new PageGridData<tDefectReport>();
//查询出原始数据
List<tDefectReport> list = await _service.gettDefectReport(from);
List<tDefectList> DefectList = list.Select(x=>new tDefectList { DefectName = x.DefectName }).Distinct().ToList();
List<string> DefectListTwo=new List<string>();
foreach (var defect in DefectList)
{
DefectListTwo.Add(defect.DefectName);
}
DefectListTwo = DefectListTwo.Distinct().ToList();
//进行重命名
//DataTable dt = Listtool.RowTransfer(list, "tDefectReport", DefectListTwo);
DataTable dt = Listtool.UpDataTable(list, "tDefectReport");
///数据源,分组的列,要作为列显示的列,值列
DataTable dts=Listtool.TableRowTurnToColumn(dt
,new DataColumn[]{dt.Columns["日期"], dt.Columns["班别"], dt.Columns["产品编码"], dt.Columns["产品名称"], dt.Columns["线别"] },
new DataColumn[] {dt.Columns["DefectName"] }, dt.Columns["Num"]);
gridData.extra = dts;
//返回查询到的总行数
gridData.total = dts.Columns.Count;
gridData.rows = new List<tDefectReport>();
return gridData;
}
静态方法：
///列的重命名和新加计算列或是默认值列方法
Listtool.UpDataTable(list, "tDefectReport")；
参数：
| list | 需要重命名的列表 |
|---|---|
| tDefectReport | 字典名称 |
///行转列方法
Listtool.TableRowTurnToColumn(DataTable source, DataColumn[] groupColumns, DataColumn[] captionColumns, DataColumn valueColumn)；
参数：
| source | 数据源 |
|---|---|
| groupColumns | 分组的列 |
| captionColumns | 作为列显示的列 |
| valueColumn | 列值 |
列名配置在下拉设置那新增字典配置
例：
其中备注为：***的是计算列可以写一般计算公式
%%%的是合格率的计算公式
为默认数据列（可用于目标合格率等固定值列）
如果备注为空则只是单独将列名重命名
