| | |
| | | <template> |
| | | <div> |
| | | <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag"class="app"> |
| | | |
| | | <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag" class="app"> |
| | | <el-button-group> |
| | | <!--新增--> |
| | | <el-button v-if="attrEditVisible == false && attrFlagChiledren==false && (!checkStatus || crudLCStatus=='Editing')" size="small" type="primary" icon="el-icon-plus" @click="busineHandle">添加 {{ msg }}</el-button> |
| | | <!-- 全屏编辑--> |
| | |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" icon="el-icon-info" size="small" @click="ruleAddHandler">验证规则</el-button> |
| | | <!-- 属性分组--> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" icon="el-icon-menu" size="small" @click="attrVisibleHandle">属性分组</el-button> |
| | | |
| | | |
| | | </el-button-group> |
| | | <el-button-group> |
| | | <!--新增--> |
| | | <!-- 分类注入--> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" icon="el-icon-magic-stick" size="small" @click="injectBtn">分类注入</el-button> |
| | | <!-- 组合规则--> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" size="small" @click="isShowHandler">组合规则</el-button> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" icon="el-icon-film" size="small" @click="isShowHandler">组合规则</el-button> |
| | | <!-- 枚举注入--> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" size="small" @click="enmuVisHandle">枚举注入</el-button> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" icon="el-icon-c-scale-to-original" size="small" @click="enmuVisHandle">枚举注入</el-button> |
| | | <!-- 级联属性--> |
| | | <el-button v-if="!checkStatus|| crudLCStatus=='Editing'" size="small" @click="CascadeHandle">级联属性</el-button> |
| | | <el-button v-if="!checkStatus|| crudLCStatus=='Editing'" icon="el-icon-coin" size="small" @click="CascadeHandle">级联属性</el-button> |
| | | </el-button-group> |
| | | <el-button-group> |
| | | <!-- 预览排序--> |
| | | <el-button size="small" @click="orderHandle" icon="el-icon-arrow-down">预览排序</el-button> |
| | | |
| | | |
| | | <!--新增--> |
| | | <!-- 保存--> |
| | | <el-button v-if="!checkStatus|| crudLCStatus=='Editing'" size="small" @click="addsHandler" icon="el-icon-check">保存</el-button> |
| | | <!-- 删除--> |
| | | <el-button v-if="!checkStatus || crudLCStatus=='Editing'" size="small" @click="CrudRemove" icon="el-icon-delete">删除</el-button> |
| | | <!-- 重置--> |
| | | <el-button size="small" @click="reset" icon="el-icon-refresh-right">重置</el-button> |
| | | </el-button-group> |
| | | <el-button-group> |
| | | <!-- 同步到其他模板--> |
| | | <el-button size="small"@click="syncHandle" icon="el-icon-share">同步到其他模板</el-button> |
| | | </el-button-group> |
| | | |
| | | <el-button-group> |
| | | <!-- 编码申请预览--> |
| | | <el-button size="small" @click="applicationHandle" style="">编码申请预览</el-button> |
| | | <el-button size="small" icon="el-icon-view" @click="applicationHandle" style="">编码申请预览</el-button> |
| | | </el-button-group> |
| | | <!-- 验证规则--> |
| | | </div> |
| | | <!-- 弹窗--> |
| | |
| | | <div style="padding-top: 15px;padding-left: 35px"> |
| | | <el-form ref="injectForm" label-width="80px"> |
| | | <el-form-item label="注入类型"> |
| | | <el-radio-group v-model="injectOption.type"> |
| | | <el-radio label="分类名称"></el-radio> |
| | | <el-radio label="分类代号"></el-radio> |
| | | <el-radio-group v-model="injectOption.classifyInvokeAttr"> |
| | | <el-radio label="name">分类名称</el-radio> |
| | | <el-radio label="id">分类代号</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="层级设置"> |
| | | <el-radio-group v-model="injectOption.set"> |
| | | <el-radio label="最小层"></el-radio> |
| | | <el-radio label="指定层"></el-radio> |
| | | <el-input-number v-if="this.injectOption.set == '指定层'" v-model="injectOption.injectNum" :max="10" :min="0" |
| | | <el-radio-group v-model="injectOption.classifyInvokeLevel"> |
| | | <el-radio label="min">最小层</el-radio> |
| | | <el-radio label="max">指定层</el-radio> |
| | | <el-input-number v-if="this.injectOption.classifyInvokeLevel == 'max'" v-model="injectOption.classifyNumber" :max="10" :min="0" |
| | | controls-position="right"></el-input-number> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="可修改"> |
| | | <el-radio-group v-model="injectOption.change"> |
| | | <el-radio label="是"></el-radio> |
| | | <el-radio label="否"></el-radio> |
| | | <el-radio-group v-model="injectOption.classifyInvokeEditFlag"> |
| | | <el-radio label="true">是</el-radio> |
| | | <el-radio label="false">否</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | @selection-change="selectionChange" |
| | | v-if="this.crudArrayFlag" |
| | | ref="referAttrCrud" |
| | | v-loading="loading" |
| | | > |
| | | <el-table-column |
| | | type="selection" |
| | |
| | | }, |
| | | deep:true, |
| | | immediate:true |
| | | } |
| | | }, |
| | | 'injectOption.classifyInvokeAttr': function(newVal) { |
| | | console.log('newVal',newVal) |
| | | if (newVal === "name") { |
| | | this.injectOption.classifyInvokeAttrName='分类名称' |
| | | } else if (newVal === "id") { |
| | | this.injectOption.classifyInvokeAttrName='分类代号' |
| | | } |
| | | return ''; |
| | | }, |
| | | // ProData: { |
| | | // handler(newVal, oldVal) { |
| | | // if(this.initializing){ |
| | | // this.ProData = newVal.map((item) => { |
| | | // if (item.classifyInvokeAttr !=='') { // 检查classifyInvokeText属性是否存在 |
| | | // item = { |
| | | // ...item, |
| | | // classifyInvokeText: { |
| | | // classifyInvokeText: { |
| | | // "注入类型": item.classifyInvokeAttr, |
| | | // "注入类型名称": item.classifyInvokeAttrName, |
| | | // "层级设置": item.classifyInvokeLevel, |
| | | // "是否可修改": item.classifyInvokeEditFlag |
| | | // } |
| | | // } |
| | | // } |
| | | // } |
| | | // return item; |
| | | // }); |
| | | // } |
| | | // this.initializing = false; |
| | | // console.log('ProData',this.ProData) |
| | | // console.log('newVal',newVal) |
| | | // }, |
| | | // deep: true, |
| | | // immediate:true |
| | | // }, |
| | | }, |
| | | data() { |
| | | return { |
| | | initializing:false, |
| | | loading:false, |
| | | referConfigText:"", |
| | | referConfigVisble:false, |
| | | referConfigOption:{ |
| | |
| | | addvisible: false, |
| | | //分类注入option |
| | | injectOption: { |
| | | type: "分类名称", |
| | | set: "最小层", |
| | | change: "是", |
| | | classifyInvokeAttrName:'分类名称', |
| | | classifyInvokeAttr: "name", |
| | | classifyInvokeEditFlag: "true", |
| | | classifyInvokeLevel:'min', |
| | | //分类注入计数器 |
| | | injectNum: 0, |
| | | classifyNumber:0, |
| | | }, |
| | | // 属性验证输入框 |
| | | RulesForm: { |
| | |
| | | }, |
| | | { |
| | | label: "分类注入", |
| | | prop: "classifyInvokeLevelName", |
| | | prop: "classifyInvokeText", |
| | | cell: false, |
| | | edit: 'refer' |
| | | }, |
| | | { |
| | | label: "分类注入", |
| | | prop: "classifyInvokeLevel", |
| | | cell: false, |
| | | edit: 'referName', |
| | | }, |
| | | { |
| | | label: "枚举注入", |
| | |
| | | oids.push(ele.oid); |
| | | }); |
| | | return oids.join(","); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | }, |
| | |
| | | CrudRend() { |
| | | if (this.crudOid != '') { |
| | | gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.crudOid}).then(res => { |
| | | this.ProData = res.data.data; |
| | | this.loading=true |
| | | setTimeout(() => { |
| | | this.ProData = res.data.data; |
| | | this.loading=false |
| | | }, 1000); |
| | | |
| | | }).catch(res => { |
| | | this.$message.error(res) |
| | | }) |
| | |
| | | } |
| | | console.log('--',this.referConfigOption) |
| | | // this.$refs.referConfigFormDialog.onloadAttrData(); |
| | | }else if(column.property == 'classifyInvokeLevelName'){ |
| | | }else if(column.property == 'classifyInvokeText'){ |
| | | this.injectVisible=true; |
| | | }else if(column.property == 'componentRule'){ |
| | | if(this.CurrentCell){ |
| | |
| | | } else if (this.attrSelectList.length < 1) { |
| | | this.$message.warning('请选择一条模板数据') |
| | | } else if (this.attrSelectList.length === 1) { |
| | | console.log(this.injectOption) |
| | | this.injectVisible = true; |
| | | |
| | | } |
| | | }, |
| | | //分类注入保存 |
| | | injectAddHandle() { |
| | | // 定义展示类型 |
| | | let data = { |
| | | "注入类型": this.injectOption.type, |
| | | "注入类型名称": this.injectOption.set, |
| | | "层级设置": this.injectOption.injectNum, |
| | | "是否可修改": this.injectOption.change |
| | | "注入类型": this.injectOption.classifyInvokeAttr, |
| | | "注入类型名称": this.injectOption.classifyInvokeAttrName, |
| | | "层级设置": this.injectOption.classifyInvokeLevel=='max'?this.injectOption.classifyNumber :'min', |
| | | "是否可修改": this.injectOption.classifyInvokeEditFlag |
| | | } |
| | | //单元格编辑赋值一遍 |
| | | if(this.CurrentCell){ |
| | | this.$set(this.CurrentCell, "classifyInvokeLevelName", data); |
| | | this.$set(this.CurrentCell, "classifyInvokeLevel", JSON.stringify(this.injectOption)); |
| | | //如果是指定层赋值为数字 |
| | | if(this.CurrentCell.classifyInvokeLevel!== 'min'){ |
| | | this.CurrentCell.classifyInvokeLevel=this.injectOption.classifyNumber |
| | | } |
| | | //其余正常赋值 |
| | | this.CurrentCell.classifyInvokeAttr=this.injectOption.classifyInvokeAttr, |
| | | this.CurrentCell.classifyInvokeAttrName=this.injectOption.classifyInvokeAttrName, |
| | | this.CurrentCell.classifyInvokeEditFlag=this.injectOption.classifyInvokeEditFlag, |
| | | this.$set(this.CurrentCell, "classifyInvokeText", data); |
| | | this.injectHandleReset() |
| | | }else { |
| | | this.$set(this.attrSelectList[0], 'classifyInvokeLevelName', data); |
| | | this.$set(this.attrSelectList[0], 'classifyInvokeLevel', JSON.stringify(this.injectOption)); |
| | | //勾选操作 |
| | | for (const key in this.injectOption) { |
| | | this.attrSelectList[0][key] = this.injectOption[key]; |
| | | //如果是指定层赋值为数字 |
| | | if(this.injectOption.classifyInvokeLevel !== 'min'){ |
| | | this.attrSelectList[0].classifyInvokeLevel=this.injectOption.classifyNumber |
| | | } |
| | | this.$set(this.attrSelectList[0],'classifyInvokeText',data) |
| | | } |
| | | this.injectHandleReset() |
| | | } |
| | | this.injectVisible = false |
| | | if(this.injectOption.classifyInvokeLevel !== 'min'){ |
| | | this.injectOption.classifyInvokeLevel=this.injectOption.classifyNumber; |
| | | }else { |
| | | this.injectOption.classifyNumber=0; |
| | | } |
| | | this.injectVisible = false; |
| | | |
| | | }, |
| | | //分类注入清空 |
| | | injectHandleReset() { |
| | | this.injectOption.type = "分类名称"; |
| | | this.injectOption.set = "最小层"; |
| | | this.injectOption.change = "是"; |
| | | this.injectOption.injectNum = "0"; |
| | | this.injectOption.classifyInvokeAttrName = "分类名称"; |
| | | this.injectOption.classifyInvokeAttr = "name"; |
| | | this.injectOption.classifyInvokeLevel = "min"; |
| | | this.injectOption.classifyInvokeEditFlag = "true"; |
| | | this.injectOption.classifyNumber = "0"; |
| | | }, |
| | | // 分类注入取消 |
| | | injectRemove() { |
| | |
| | | }, |
| | | //表格重置 |
| | | reset() { |
| | | // this.CrudRend( |
| | | this.referConfigVisble=true; |
| | | this.referConfigOption = { |
| | | referConfig: 'confing', |
| | | } |
| | | console.log(this.referConfigOption) |
| | | this.CrudRend() |
| | | }, |
| | | //同步到其他模板 |
| | | syncHandle() { |
| | |
| | | <style scoped lang="scss" > |
| | | .app { |
| | | /deep/ .el-button { |
| | | margin: 0 10px 10px 0; |
| | | //margin: 0 10px 10px 0; |
| | | } |
| | | } |
| | | .el-button-group { |
| | | margin-right: 10px; |
| | | margin-bottom: 10px; |
| | | } |
| | | </style> |