| | |
| | | <template> |
| | | <div> |
| | | <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag"> |
| | | <el-button-group> |
| | | |
| | | <!--新增--> |
| | | <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="rulesVisible=true">验证规则</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> |
| | | <!-- 验证规则--> |
| | |
| | | </div> |
| | | </el-dialog> |
| | | <!-- 枚举注入--> |
| | | <el-dialog :visible.sync="enumVisible" append-to-body title="枚举注入"> |
| | | <el-dialog :visible.sync="enumVisible" append-to-body title="枚举注入" :before-close="this.enumBeforeClose"> |
| | | <!-- 渲染表格及按钮 --> |
| | | <!-- 渲染表格及按钮 --> |
| | | <div> |
| | |
| | | <template> |
| | | <div style="display: flex;justify-content: right;margin-top: 15px"> |
| | | <el-button size="small" type="primary" @click="enumAddHandle">保存</el-button> |
| | | <el-button size="small" @click="enumVisible=false">取消</el-button> |
| | | <el-button size="small" @click="enumCancell">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </div> |
| | |
| | | :thisSceneTableData="thisSceneTableData" |
| | | :visible.sync="isShowformulaEdit" |
| | | @updateFormulaContent="updataFormlaContent" |
| | | :componentRuleText="componentRuleText" |
| | | ></formula-editor> |
| | | <!-- 新增 --> |
| | | <el-dialog :visible.sync="addVisible" append-to-body title="从业务类型中选择属性"> |
| | |
| | | </div> |
| | | <el-table :data="ProData" |
| | | style="width: 100%" |
| | | height="280" |
| | | height="750" |
| | | @cell-click="handleCellClicks" |
| | | @select="selectHandle" |
| | | @selection-change="selectionChange" |
| | |
| | | @blur="saveRows"></el-input> |
| | | <el-input-number size="small" controls-position="right" v-if="editingRows === row && editShows== item.prop && item.edit == 'number'" v-model="row[item.prop]" |
| | | @blur="saveRows" :style="{width:(item.width-10)+'px'}"></el-input-number> |
| | | <el-select v-model="row[item.prop]" filterable allow-create default-first-option slot="prepend" v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " @focus="DataChangeHandler(item.editConfig,index)"> |
| | | <el-select v-model="row[item.prop]" filterable allow-create default-first-option slot="prepend" v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " @blur="selectChangeHandler(item.editConfig,index)"> |
| | | <el-option |
| | | v-for="optionItem in item.data" |
| | | :key="optionItem.key" |
| | | :label="optionItem.value" |
| | | :value="optionItem.key"> |
| | | :key="optionItem.dictValue" |
| | | :label="optionItem.dictValue" |
| | | :value="optionItem.dictValue"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-switch |
| | |
| | | <el-button |
| | | size="small" |
| | | type="text" |
| | | @click.native.prevent="CrudRowDel(scope.row)"> |
| | | @click.native.prevent="CrudRowDel(scope.$index)"> |
| | | 移除 |
| | | </el-button> |
| | | </template> |
| | |
| | | |
| | | <script> |
| | | import {AttrByBtm, gridCodeClassifyTemplateAttr, batchAddSave, copyto,listByFlag} from '@/api/template/templateAttr' |
| | | import {getList} from "@/api/refer/table"; |
| | | |
| | | export default { |
| | | name: "attrCrud .vue", |
| | |
| | | crudOid: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | crudLCStatus: { |
| | | type: String, |
| | | default: 'Editing' |
| | | }, |
| | | crudArray: { |
| | | type: Array, |
| | |
| | | editingRows: null, |
| | | editShows:"", |
| | | attrFlag: false, |
| | | referObject:{}, |
| | | //编码申请预览option |
| | | applicationoption: { |
| | | column: [] |
| | |
| | | // 属性验证输入框 |
| | | RulesForm: { |
| | | expressionText: "", |
| | | TestContent: "" |
| | | TestContent: "", |
| | | ruleRowBds:"" |
| | | }, |
| | | //属性验证规则配置 |
| | | rulesOption: { |
| | |
| | | }, |
| | | //时间格式下拉框 |
| | | codeDataFlag:false, |
| | | // 组合规单元格编辑回填 |
| | | componentRuleText:"" |
| | | } |
| | | }, |
| | | computed:{ |
| | |
| | | ) |
| | | }, |
| | | created() { |
| | | |
| | | this.option.column.forEach((item,index) => { |
| | | if (item.edit == 'select') { |
| | | this.selectChangeHandler(item.editConfig,index) |
| | | } |
| | | }) |
| | | }, |
| | | methods: { |
| | | formAttr(row, column) { |
| | |
| | | //参照配置子组件 |
| | | echoReferConfig(val){ |
| | | console.log('val--',val) |
| | | this.referObject=val |
| | | this.$set(this.CurrentCell,'referConfig',JSON.stringify(val)) |
| | | |
| | | }, |
| | | //时间下拉格式 |
| | | DataChangeHandler(editConfig,index){ |
| | | //可输可选下拉 |
| | | selectChangeHandler(editConfig,index){ |
| | | let that=this; |
| | | /*if(that.option.column[index].data && that.option.column[index].data.length>=0){ |
| | | return; |
| | | }*/ |
| | | listByFlag(editConfig.extraParams).then(res=>{ |
| | | console.log(res); |
| | | this.option.column[index].data=res; |
| | | that.option.column[index].data=res.data.data; |
| | | }) |
| | | }, |
| | | //属性分组按钮 |
| | | attrVisibleHandle() { |
| | | if (this.attrSelectList < 1) { |
| | | this.$message.warning('请选择一条模板属性') |
| | | this.$message.warning('请选择模板属性') |
| | | } else { |
| | | this.attrVisible = true; |
| | | console.log(this.attrSelectList) |
| | |
| | | }, |
| | | //属性分组提交 |
| | | attrHandle() { |
| | | this.$set(this.attrRow, 'attributeGroup', this.attrModel) |
| | | console.log(this.attrSelectList) |
| | | // this.$set(this.attrRow, 'attributeGroup', this.attrModel) |
| | | // this.attrSelectList.attributeGroup=this.attrModel |
| | | this.attrSelectList.forEach(item=>{ |
| | | item.attributeGroup=this.attrModel |
| | | }) |
| | | this.attrModel = ""; |
| | | this.attrVisible = false; |
| | | }, |
| | |
| | | CascadeAddHandle() { |
| | | let CascadeString = ""; |
| | | CascadeString = this.selectRowArr.id + (this.selectRowArr.name); |
| | | this.$set(this.attrRow, 'parentCode', CascadeString) |
| | | if(this.CurrentCell){ |
| | | this.$set(this.CurrentCell, 'parentCode', CascadeString) |
| | | }else { |
| | | this.$set(this.attrSelectList[0], 'parentCode', CascadeString) |
| | | } |
| | | this.CascadeVisible = false; |
| | | }, |
| | | //级联属性清除 |
| | |
| | | console.log(row) |
| | | }, |
| | | //表格选择 |
| | | selectionChange(list,) { |
| | | selectionChange(list) { |
| | | this.attrSelectList = list; |
| | | console.log(list) |
| | | }, |
| | |
| | | this.editingRows = row; |
| | | this.editShows = column.property; |
| | | this.rowOid = row.oid; |
| | | console.log(row,column) |
| | | this.CurrentCell=row; |
| | | if(column.property == 'referConfig' ){ |
| | | this.$refs.referConfigFormDialog.isShowReferConfigForm = true; |
| | |
| | | }else if(column.property == 'classifyInvokeLevelName'){ |
| | | this.injectVisible=true; |
| | | }else if(column.property == 'componentRule'){ |
| | | |
| | | if(this.CurrentCell){ |
| | | this.CurrentCell.componentRule=this.componentRuleText; |
| | | } |
| | | this.isShowformulaEdit = true; |
| | | }else if(column.property == 'enumString'){ |
| | | this.enumVisible=true; |
| | | }else if(column.property == 'parentCode'){ |
| | | gridCodeClassifyTemplateAttr({ |
| | | 'conditionMap[classifyTemplateOid]': this.Formlist[0].oid, |
| | | 'conditionMap[oid_notequal]': this.CurrentCell.oid |
| | | }).then(res => { |
| | | console.log(res) |
| | | this.CascadeData = res.data.data; |
| | | }) |
| | | this.CascadeVisible=true; |
| | | }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.enumVisible = true; |
| | | } |
| | | }, |
| | | enumBeforeClose(done){ |
| | | this.tableData=[] |
| | | done() |
| | | }, |
| | | enumCancell(){ |
| | | this.tableData=[] |
| | | this.enumVisible=false; |
| | | }, |
| | | //枚举注入多选框 |
| | | handleSelectionChange(row) { |
| | | this.enumRow = JSON.parse(JSON.stringify(row)); |
| | | }, |
| | | //枚举注入保存 |
| | | 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.attrRow, 'enumString', JSON.stringify(this.enumRow)); |
| | | } else { |
| | | this.$set(this.attrSelectList[0], 'enumString', JSON.stringify(this.tableData)); |
| | | this.tableData=[]; |
| | | this.enumVisible = false; |
| | | } |
| | | } |
| | |
| | | saveRow() { |
| | | this.editingRow = null; |
| | | }, |
| | | //验证规则按钮 |
| | | ruleAddHandler(){ |
| | | if (this.attrSelectList < 1) { |
| | | this.$message.warning('请选择模板属性') |
| | | } else{ |
| | | this.rulesVisible=true |
| | | } |
| | | |
| | | }, |
| | | //规则校验,双击表单事件 |
| | | handleRulesRowDBLClick(row) { |
| | | this.ruleRowBds=row.bds |
| | | this.RulesForm.expressionText = row.bds |
| | | }, |
| | | // 验证规则清除内容 |
| | |
| | | }, |
| | | // 验证规则确定 |
| | | rulesHandle() { |
| | | if(this.CurrentCell){ |
| | | this.$set(this.CurrentCell,'verifyRule',this.RulesForm.expressionText) |
| | | }else { |
| | | this.attrSelectList.forEach((item)=>{ |
| | | this.$set(item,'verifyRule',this.RulesForm.expressionText) |
| | | }) |
| | | this.rulesremove() |
| | | } |
| | | this.rulesVisible = false |
| | | }, |
| | | //验证规则检查 |
| | | rulesExamine() { |
| | | if (this.RulesForm.expressionText.test(this.RulesForm.TestContent)) { |
| | | console.log(this.RulesForm.expressionText) |
| | | const regex = new RegExp(this.rulesData.ruleRowBds); |
| | | if(regex.test(this.RulesForm.TestContent)){ |
| | | this.$message.success('校验成功') |
| | | } |
| | | }, |
| | |
| | | } else if (this.attrSelectList.length < 1) { |
| | | this.$message.warning('请选择一条模板数据') |
| | | } else if (this.attrSelectList.length === 1) { |
| | | this.injectVisible = true |
| | | this.injectVisible = true; |
| | | |
| | | } |
| | | }, |
| | | //分类注入保存 |
| | |
| | | this.$set(this.CurrentCell, "classifyInvokeLevelName", data); |
| | | this.$set(this.CurrentCell, "classifyInvokeLevel", JSON.stringify(this.injectOption)); |
| | | }else { |
| | | this.$set(this.attrRow, 'classifyInvokeLevelName', data); |
| | | this.$set(this.attrRow, 'classifyInvokeLevel', JSON.stringify(this.injectOption)); |
| | | this.$set(this.attrSelectList[0], 'classifyInvokeLevelName', data); |
| | | this.$set(this.attrSelectList[0], 'classifyInvokeLevel', JSON.stringify(this.injectOption)); |
| | | } |
| | | this.injectVisible = false |
| | | }, |
| | |
| | | }, |
| | | //属性模板表格单元格点击事件 |
| | | //表格操作栏删除 |
| | | CrudRowDel(row) { |
| | | this.ProData.splice(row.$index, 1) |
| | | CrudRowDel(index) { |
| | | this.ProData.splice(index, 1) |
| | | }, |
| | | //表格删除 |
| | | CrudRemove() { |
| | | this.attrSelectList.forEach((item)=>{ |
| | | this.ProData.splice(item.$index, 1) |
| | | const index = this.ProData.indexOf(item); |
| | | this.ProData.splice(index, 1) |
| | | }) |
| | | }, |
| | | //表格重置 |