在扩展组件、方法可直接使用这些属性,前端扩展业务代码编写参照vue项目中extension->order->SellOrder.js文件,根据实际需要添加扩展方法
data() { return { _inited: false, const: _const, //增删改查导入导出等对应的action boxInit: false, //新建或编辑的弹出框初化状态，默认不做初始化，点击新建或编辑才初始化弹出框 searchBoxShow: false, //高级查询(界面查询后的下拉框点击触发) singleSearch: "", //快速查询字段 exportHref: "", currentAction: _const.ADD, //当新建或编辑时，记录当前的状态:如当前操作是新建 hasKeyField: {}, //当前操作的行数据(新建、编辑、查看) closable: false, boxModel: false, //弹出新建、编辑框 width: 700, viewModel: false, //查看表结构的弹出框 viewColumns: [], //查看表结构的列数据 viewData: [], //查看表结构信息 maxBtnLength: 3, //界面按钮最多显示的个数，超过的数量都显示在更多中 buttons: [], //查询界面按钮 如需要其他操作按钮，可在表对应的.js中添加(如:Sys_User.js中buttons添加其他按钮) boxButtons: [], //弹出框按钮 如需要其他操作按钮，可在表对应的.js中添加 dicKeys: [], //当前界面所有的下拉框字典编号 hasKeyField: [], //有字典数据源的字段 url: "", //界面表查询的数据源的url hasDetail: false, //是否有从表(明细)表格数据 initActivated: false, // detailUrl: "", detailOptions: { //弹出框从表(明细)对象 //从表配置 buttons: [], //弹出框从表表格操作按钮,目前有删除行，添加行，刷新操作，如需要其他操作按钮，可在表对应的.js中添加 cnName: "", //从表名称 key: "", //从表主键名 data: [], //数据源 columns: [], //从表列信息 edit: true, //明细是否可以编辑 delKeys: [], //当编辑时删除当前明细的行主键值 url: "", //从表加载数据的url pagination: { total: 0, size: 100, sortName: "" }, //从表分页配置数据 height: 250 //默认从表高度 }, auditParam: { //审核对象 rows: 0, //当前选中审核的行数 model: false, //审核弹出框 status: -1, //审核结果 reason: "", //审核原因 //审核选项(可自行再添加) data: [{ text: "通过", status: 1 }, { text: "拒绝", status: 2 }] }, upload: { //导入上传excel对象 excel: false, //导入的弹出框是否显示 url: "", //导入的路径,如果没有值，则不渲染导入功能 template: { //下载模板对象 url: "", //下载模板路径 fileName: "" //模板下载的中文名 }, init: false //是否有导入权限，有才渲染导入组件 }, height: 0, //表高度 pagination: { total: 0, size: 30, sortName: "" }, //从分页配置数据 boxOptions: { height: 0, width: 0 }//弹出框的高度、宽度 }; }
table表的原始传入信息,这些信息由代码生成器生成，Demo：SellOrder.vue文件
let props = { columns: {//当前表的配置信息 type: Array, default: () => { return []; } }, detail: {//从表明细配置 type: Object, default: () => { return { columns: [],//从表列 sortName: ""//从表排序字段 }; } }, editFormFields: {//新建、编辑字段(key/value) type: Object, default: () => { return {}; } }, editFormOptions: {//新建、编辑配置信息 type: Array, default: () => { return []; } }, searchFormFields: {//查询字段(key/value) type: Object, default: () => { return {}; } }, searchFormOptions: {//查询配置信息(key/value) type: Array, default: () => { return []; } }, table: {//表的配置信息：主键、排序等 type: Object, default: () => { return {}; } }, extend: {//表的扩展方法与组件都合并到此属性中 type: Object, default: () => { return {}; } } } export default props;
此处列出的是主要基础业务的扩展方法，全部由ViewGridConfig路径下的文件调用，可选择性实现方法，这些方法与components扩展组件中你可以任意操作编写其他方法。Demo参照：vue项目中extension->order->SellOrder.js文件
let extension = { components: {//动态扩充组件或组件路径 //表单header、content、footer对应位置扩充的组件 gridHeader: () => import("./SellOrderComponents/GridHeaderExtend.vue"),//{ template: "<div>扩展组xx件</div>" }, gridBody: () => import("./SellOrderComponents/GridBodyExtend.vue"), gridFooter: () => import("./SellOrderComponents/GridFooterExtend.vue"), //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件 modelHeader: "", modelBody: { template: '<Alert type="error">你可以在此处添加业务相关内容</Alert>' }, modelFooter: () => import("./SellOrderComponents/ModelFooter.vue"), }, text: "示例覆盖全部可扩展方法,前台扩展文件SellOrder.js，后台Partial->SellOrdeService.cs", buttons: { //扩展按钮 view: [//ViewGrid查询界面按钮 { name: "点我", icon: 'md-create', value: 'Edit', class: '', type: 'error', index: 1,//显示的位置 onClick: function () { //扩展按钮执行事件 //this可以获取所有属性，包括this.$refs.gridHeader/gridBody等获取扩展组件对象 // this.$message("测试扩展按钮"); this.$refs.gridHeader.model = true; } }, { name: "调用后台", icon: 'md-create', value: 'Edit', class: '', type: 'error', index: 1,//显示的位置 onClick: function () { //扩展按钮执行事件 this.getServiceDate(); } }], box: //新建、编辑弹出框按钮 [//ViewGrid查询界面按钮 { name: "点我1", icon: 'md-create', value: 'Edit', class: '', type: 'success', index: 1,//显示的位置 onClick: function () { this.$message.error("扩展的明细Box按钮,可设置index值指定显示位置,可使用this.$refs拿到包括自定义扩展的所有组件"); } }], detail: //新建、编辑弹出框明细表table表按钮 [//ViewGrid查询界面按钮 { name: "点我2", icon: 'md-create', value: 'Edit', class: '', type: 'success', index: 1,//显示的位置 onClick: function () { this.$message.error("扩展的明细table按钮,可设置index值指定显示位置"); } }] },//扩展的按钮 methods: {//方法扩展 getServiceDate() { this.http.post("/api/SellOrder/getServiceDate", {}, '正在调用后台数据').then(date => { this.$message.error("从后台获取的服务器时间是：" + date); }) }, mounted() { this.$Notice.success({ title: '执行mounted方法' }); }, onInit() { this.$Notice.success({ title: 'create方法执行时,你可以此处编写业务逻辑' }); }, onInited() { //添加扩展属性gridHeader/body/footer后，可以自定再设置表格高度 this.height = this.height - 140; this.$Notice.success({ title: 'create方法执行后', desc: '你可以SellOrder.js中编写业务逻辑,其他方法同样适用' }); }, searchBefore(param) { //查询ViewGird表数据前,param查询参数 //你可以指定param查询的参数，处如果返回false，则不会执行查询 this.$Notice.success({ title: this.table.cnName + ',查询前' }); // console.log("扩展的"this.detailOptions.cnName + '触发loadDetailTableBefore'); return true; }, searchAfter(result) { //查询ViewGird表数据后param查询参数,result回返查询的结果 this.$Notice.success({ title: this.table.cnName + ',查询结果', desc: '返回的对象：' + JSON.stringify(result) }); return true; }, searchDetailBefore(param) {//查询从表表数据前,param查询参数 this.$Notice.success({ title: this.detailOptions.cnName + '查询前' }); return true; }, searchDetailAfter(data) {//查询从表后param查询参数,result回返查询的结果 this.$Notice.success({ title: this.detailOptions.cnName + ',查询结果', desc: '返回的对象：' + JSON.stringify(data) }); return true; }, delBefore(ids, rows) { //查询界面的表删除前 ids为删除的id数组,rows删除的行 let auditStatus = rows.some(x => { return x.AuditStatus > 0 }); if (auditStatus) { this.$message.error('只能删除未审核的数据') return false; } this.$Notice.success({ title: '删除前，选择的Id:' + ids.join(',') }); return true; }, delAfter(result) {//查询界面的表删除后 return true; }, delDetailRow(rows) { //弹出框删除明细表的行数据(只是对table操作，并没有操作后台) console.log(rows) return true; }, addBefore(formData) { //新建保存前formData为对象，包括明细表 this.$Notice.success({ title: this.detailOptions.cnName + '新建前：', desc: '提前的数据：' + JSON.stringify(formData) }); return true; }, addAfter(result) {//新建保存后result返回的状态及表单对象 this.$Notice.success({ title: this.detailOptions.cnName + '新建完成后：', desc: '返回的数据' + JSON.stringify(result) }); return true; }, updateBefore(formData) { //编辑保存前formData为对象，包括明细表、删除行的Id this.$Notice.success({ title: this.detailOptions.cnName + '编辑前：', desc: '提前的数据：' + JSON.stringify(formData) }); //获取扩展的modelFooter属性text console.log(this.$refs.modelFooter.text) return true; }, updateAfter(result) {//编辑保存后result返回的状态及表单对象 this.$Notice.success({ title: this.detailOptions.cnName + '编辑完成后：', desc: '返回的数据' + JSON.stringify(result) }); return true; }, auditBefore(ids, rows) {//审核前 if (rows.length > 2) {//每次最多只能审核2条数据 this.$message.error('最多只能选择两条数据'); return false; } return true; }, auditAfter(result, rows) {// 审核后 if (result.status) { result.message = "审核成功。。。。。" + result.message; } return true; }, resetAddFormBefore() { //重置新建表单前的内容 return true; }, resetAddFormAfter() { //重置新建表单后的内容 //如果某些字段不需要重置，则可以重新赋值 this.editFormFields.Remark = '新建重置默认值66666'; //给明细表添加默认一行 this.$refs.detail.rowData.push({ Remark: "新建666666" }); return true; }, resetUpdateFormBefore() { //重置编辑表单前的内容 //this.editFormFields当前值 console.log(this.editFormFields) //当前明细表的行 console.log(this.$refs.detail.rowData) return true; }, resetUpdateFormAfter() { //重置编辑表单后的内容 //如果某些字段不需要重置，则可以重新赋值 this.editFormFields.Remark = '编辑重置默认值66666'; //给明细表添加默认一行 this.$refs.detail.rowData.push({ Remark: "编辑666666" }); return true; }, importAfter(data) { //导入excel后刷新table表格数据 this.search(); //刷新table }, modelOpenAfter(row) { //点击编辑/新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据 this.$message.error("此处是打开弹出框后事件,当前操作：" + this.currentAction + "，你可以在此处编写逻辑，如，从后台获取数据"); } } }; export default extension;
其他内部属性、扩展方法、基础组件文档编写中(点击Demo或组件里面有属性介绍)....