| | |
| | | <template> |
| | | <div> |
| | | <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag" class="app"> |
| | | <el-button-group> |
| | | <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag"> |
| | | |
| | | <!--新增--> |
| | | <el-button v-if="attrEditVisible == false && attrFlagChiledren==false" size="small" type="primary" icon="el-icon-plus" @click="busineHandle">添加 {{ msg }}</el-button> |
| | | <el-button v-if="attrEditVisible == false && attrFlagChiledren==false && crudLCStatus=='Editing'" size="small" type="primary" icon="el-icon-plus" @click="busineHandle">添加 {{ msg }}</el-button> |
| | | <!-- 全屏编辑--> |
| | | <el-button v-if=" attrEditVisible == false && attrFlagChiledren==false" size="small" @click="fullscreenHandle" icon="el-icon-full-screen">全屏编辑</el-button> |
| | | <el-button v-if=" attrEditVisible == false && attrFlagChiledren==false && crudLCStatus=='Editing'" size="small" @click="fullscreenHandle" icon="el-icon-full-screen">全屏编辑</el-button> |
| | | <!-- 验证规则--> |
| | | <el-button icon="el-icon-info" size="small" @click="ruleAddHandler">验证规则</el-button> |
| | | <el-button v-if="crudLCStatus=='Editing'" icon="el-icon-info" size="small" @click="ruleAddHandler">验证规则</el-button> |
| | | <!-- 属性分组--> |
| | | <el-button icon="el-icon-menu" size="small" @click="attrVisibleHandle">属性分组</el-button> |
| | | </el-button-group> |
| | | <el-button-group> |
| | | <el-button v-if="crudLCStatus=='Editing'" icon="el-icon-menu" size="small" @click="attrVisibleHandle">属性分组</el-button> |
| | | |
| | | |
| | | <!-- 分类注入--> |
| | | <el-button icon="el-icon-magic-stick" size="small" @click="injectBtn">分类注入</el-button> |
| | | <el-button v-if="crudLCStatus=='Editing'" icon="el-icon-magic-stick" size="small" @click="injectBtn">分类注入</el-button> |
| | | <!-- 组合规则--> |
| | | <el-button size="small" @click="isShowHandler">组合规则</el-button> |
| | | <el-button v-if="crudLCStatus=='Editing'" size="small" @click="isShowHandler">组合规则</el-button> |
| | | <!-- 枚举注入--> |
| | | <el-button size="small" @click="enmuVisHandle">枚举注入</el-button> |
| | | <el-button v-if="crudLCStatus=='Editing'" size="small" @click="enmuVisHandle">枚举注入</el-button> |
| | | <!-- 级联属性--> |
| | | <el-button size="small" @click="CascadeHandle">级联属性</el-button> |
| | | <el-button v-if="crudLCStatus=='Editing'" size="small" @click="CascadeHandle">级联属性</el-button> |
| | | <!-- 预览排序--> |
| | | <el-button size="small" @click="orderHandle" icon="el-icon-arrow-down">预览排序</el-button> |
| | | </el-button-group> |
| | | <el-button-group> |
| | | |
| | | |
| | | <!-- 保存--> |
| | | <el-button size="small" @click="addsHandler" icon="el-icon-check">保存</el-button> |
| | | <el-button v-if="crudLCStatus=='Editing'" size="small" @click="addsHandler" icon="el-icon-check">保存</el-button> |
| | | <!-- 删除--> |
| | | <el-button size="small" @click="CrudRemove" icon="el-icon-delete">删除</el-button> |
| | | <el-button v-if="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 size="small"@click="syncHandle" icon="el-icon-share">同步到其他模板</el-button> |
| | | </el-button-group> |
| | | |
| | | <!-- 编码申请预览--> |
| | | <el-button size="small" @click="applicationHandle" style="">编码申请预览</el-button> |
| | | <!-- 验证规则--> |
| | |
| | | <el-button size="small" type="primary" @click="addVisible=false">取消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!-- 参照配置--> |
| | | <refer-config-form-dialog |
| | | ref="referConfigFormDialog" |
| | | @echoReferConfig="echoReferConfig" |
| | | ></refer-config-form-dialog> |
| | | <refer-config-dialog |
| | | :display="referConfigVisble" |
| | | @setReferConfigValue="setReferConfigValue" |
| | | :referConfigOption="referConfigOption" |
| | | ></refer-config-dialog> |
| | | |
| | | </div> |
| | | <el-table :data="ProData" |
| | | style="width: 100%" |
| | | :height='attrEditVisible == false && attrFlagChiledren==false?400 :750' |
| | | height="750" |
| | | @cell-click="handleCellClicks" |
| | | @select="selectHandle" |
| | | @selection-change="selectionChange" |
| | |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | crudLCStatus: { |
| | | type: String, |
| | | default: 'Editing' |
| | | }, |
| | | crudArray: { |
| | | type: Array, |
| | | }, |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | referConfigText:"", |
| | | referConfigVisble:false, |
| | | referConfigOption:{ |
| | | referConfig:'', |
| | | }, |
| | | screenWidth: document.documentElement.clientWidth, // 屏幕宽度 |
| | | //当前单元格 |
| | | CurrentCell:'', |
| | |
| | | editingRows: null, |
| | | editShows:"", |
| | | attrFlag: false, |
| | | referObject:{}, |
| | | //编码申请预览option |
| | | applicationoption: { |
| | | column: [] |
| | |
| | | column: [ |
| | | { |
| | | label: "属性英文名称", |
| | | prop: "id", |
| | | width:110 |
| | | prop: "id" |
| | | }, |
| | | { |
| | | label: "属性中文名称", |
| | | prop: "name", |
| | | width:110 |
| | | prop: "name" |
| | | }, |
| | | { |
| | | label: "长度", |
| | |
| | | //时间格式下拉框 |
| | | codeDataFlag:false, |
| | | // 组合规单元格编辑回填 |
| | | componentRuleText:"" |
| | | componentRuleText:"", |
| | | |
| | | } |
| | | }, |
| | | computed:{ |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | window.addEventListener( |
| | | 'resize', |
| | | () => { |
| | | if(Math.abs(this.screenWidth - document.body.clientWidth) > 20) { |
| | | this.$nextTick(() => { |
| | | this.$refs.AddOriginPlace.refreshTable(); |
| | | }) |
| | | } |
| | | this.screenWidth = document.body.clientWidth; |
| | | } |
| | | ) |
| | | }, |
| | | created() { |
| | | this.option.column.forEach((item,index) => { |
| | |
| | | //参照配置子组件 |
| | | echoReferConfig(val){ |
| | | console.log('val--',val) |
| | | this.referObject=val |
| | | this.$set(this.CurrentCell,'referConfig',JSON.stringify(val)) |
| | | |
| | | }, |
| | |
| | | //业务类型选择 |
| | | businessSelect(selection, row) { |
| | | this.busineSelectList = selection |
| | | console.log(selection) |
| | | }, |
| | | // 从业务类型中选择数据弹窗 |
| | | busineHandle() { |
| | |
| | | console.log(row) |
| | | }, |
| | | //表格选择 |
| | | selectionChange(list,) { |
| | | selectionChange(list) { |
| | | this.attrSelectList = list; |
| | | console.log(list) |
| | | }, |
| | |
| | | this.rowOid = row.oid; |
| | | this.CurrentCell=row; |
| | | if(column.property == 'referConfig' ){ |
| | | this.$refs.referConfigFormDialog.isShowReferConfigForm = true; |
| | | this.$refs.referConfigFormDialog.onloadAttrData(); |
| | | this.referConfigVisble= true; |
| | | this.referConfigOption = { |
| | | referConfig: this.referConfigText || '', |
| | | } |
| | | if(this.CurrentCell.referConfig == ''){ |
| | | this.referConfigOption = { |
| | | referConfig:'', |
| | | } |
| | | } |
| | | console.log('--',this.referConfigOption) |
| | | // this.$refs.referConfigFormDialog.onloadAttrData(); |
| | | }else if(column.property == 'classifyInvokeLevelName'){ |
| | | this.injectVisible=true; |
| | | }else if(column.property == 'componentRule'){ |
| | | |
| | | if(this.CurrentCell){ |
| | | this.CurrentCell.componentRule=this.componentRuleText; |
| | | } |
| | |
| | | }else if(column.property == 'verifyRule'){ |
| | | this.RulesForm.expressionTextt=this.CurrentCell.verifyRule; |
| | | this.rulesVisible=true; |
| | | console.log(this.CurrentCell.verifyRule) |
| | | console.log(this.RulesForm.expressionText) |
| | | } |
| | | }, |
| | | saveRows() { |
| | | this.editingRows = null; |
| | | console.log('1321') |
| | | }, |
| | | // 枚举注入添加一行空数据 |
| | | addRow() { |
| | |
| | | }, |
| | | //枚举注入保存 |
| | | enumAddHandle() { |
| | | if (this.enumRow.length < 1) { |
| | | this.$message.warning('请至少选择一条数据') |
| | | } else { |
| | | if(this.CurrentCell){ |
| | | this.$set(this.CurrentCell, 'enumString', JSON.stringify(this.enumRow)); |
| | | let hasError = false; // 添加一个变量 |
| | | this.tableData.forEach((item, index) => { |
| | | if (item.key === '') { |
| | | this.$message.warning(`第${index + 1}行的选项值不能为空`); |
| | | hasError = true; |
| | | return; |
| | | } else if (item.value === '') { |
| | | this.$message.warning(`第${index + 1}行的选项中文标签不能为空`); |
| | | hasError = true; |
| | | return; |
| | | } |
| | | }); |
| | | // 保存执行逻辑 |
| | | if (!hasError) { |
| | | if (this.CurrentCell) { |
| | | this.$set(this.CurrentCell, 'enumString', JSON.stringify(this.tableData)); |
| | | this.enumVisible = false; |
| | | }else { |
| | | this.$set(this.attrSelectList[0], 'enumString', JSON.stringify(this.enumRow)); |
| | | this.tableData=[] |
| | | } else { |
| | | this.$set(this.attrSelectList[0], 'enumString', JSON.stringify(this.tableData)); |
| | | this.tableData=[]; |
| | | this.enumVisible = false; |
| | | } |
| | | } |
| | |
| | | }, |
| | | //表格重置 |
| | | reset() { |
| | | this.CrudRend() |
| | | // this.CrudRend( |
| | | this.referConfigVisble=true; |
| | | this.referConfigOption = { |
| | | referConfig: 'confing', |
| | | } |
| | | console.log(this.referConfigOption) |
| | | }, |
| | | //同步到其他模板 |
| | | syncHandle() { |
| | |
| | | } |
| | | |
| | | }, |
| | | setReferConfigValue(content){ |
| | | let submitFormJson = JSON.stringify(content); |
| | | this.referConfigText=submitFormJson |
| | | if(this.CurrentCell){ |
| | | this.$set(this.CurrentCell, 'referConfig', JSON.stringify(content)) |
| | | }else { |
| | | this.$set(this.attrRow, 'referConfig', JSON.stringify(content)) |
| | | } |
| | | }, |
| | | // 排序 |
| | | sortChange(val) { |
| | | console.log(val) |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss" > |
| | | ///deep/ .el-button { |
| | | // margin: 0 10px 10px 0; |
| | | //} |
| | | .app el-button{ |
| | | z-index: 1; |
| | | margin: 0 10px 10px 0 !important; |
| | | /deep/ .el-button { |
| | | margin: 0 10px 10px 0; |
| | | } |
| | | </style> |