From e55cf23dc536ce06b9a8b14edd889215956c1eda Mon Sep 17 00:00:00 2001 From: ludc Date: 星期五, 21 四月 2023 19:30:16 +0800 Subject: [PATCH] 增加弹窗界面,以及代码整合 --- Source/UBCS-WEB/src/views/modeling/original.vue | 799 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 403 insertions(+), 396 deletions(-) diff --git a/Source/UBCS-WEB/src/views/modeling/original.vue b/Source/UBCS-WEB/src/views/modeling/original.vue index 8a35740..8597d3e 100644 --- a/Source/UBCS-WEB/src/views/modeling/original.vue +++ b/Source/UBCS-WEB/src/views/modeling/original.vue @@ -1,402 +1,356 @@ <template> - <basic-container> - <avue-crud v-model="form" :option="option" :data="data" ref="crud" :before-open="beforeOpen" @on-load="onLoad" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" :page.sync="page"> - <template slot-scope="{row,index,type}" slot="hideboxForm"> - <avue-form :option="option.codomainoption"></avue-form> - <div v-if="tablefalge"> - <el-input style="width: 140px;margin-left: 300px"></el-input> - <el-button style="margin-left: 15px" type="primary">鎼滅储</el-button> - <el-table - ref="multipleTable" - :data="tableData" - tooltip-effect="dark" - style="width: 100%" - max-height="510" - @selection-change="handleSelectionChange"> - <el-table-column - type="selection" - width="55"> - </el-table-column> - - <el-table-column - prop="name" - label="涓氬姟绫诲瀷鍚�" - > - </el-table-column> - <el-table-column - prop="label" - label="鏍囩" - show-overflow-tooltip> - </el-table-column> - <el-table-column - prop="father" - label="鐖剁被" - show-overflow-tooltip> - </el-table-column> - <el-table-column - prop="rules" - label="鐗堟湰瑙勫垯" - show-overflow-tooltip> - </el-table-column> - <el-table-column - prop="cycle" - label="鐢熷懡鍛ㄦ湡" - show-overflow-tooltip> - </el-table-column> - </el-table> - <el-button style="margin-left: 320px;margin-top: 13px" type="primary">纭畾</el-button> - <el-button>鍙栨秷</el-button> - </div> - <div v-if="!tablefalge"> - <el-input style="width: 140px;margin-left: 300px"></el-input> - <el-button style="margin-left: 15px" type="primary">鎼滅储</el-button> - <el-table - :data="tableDatas" - stripe - style="width: 100%"> - <el-table-column - type="selection" - width="55"> - </el-table-column> - <el-table-column - prop="name" - label="閾炬帴绫诲瀷"> - </el-table-column> - </el-table> - <el-button style="margin-left: 320px;margin-top: 13px" type="primary">纭畾</el-button> - <el-button>鍙栨秷</el-button> - </div> - -<!-- <div v-if="tablefalge">--> -<!-- <el-button style="margin-left: 320px;margin-top: 13px" type="primary">纭畾</el-button>--> -<!-- <el-button>鍙栨秷</el-button>--> -<!-- </div>--> - </template> - - </avue-crud> - - - </basic-container> + <el-container> + <el-main> + <basic-container> + <avue-crud v-model="form" :option="option" :data="data" ref="crud" @on-load="onLoad" @row-save="rowSave" + @row-update="rowUpdate" :before-open="beforeOpen" @row-del="rowDel" :page.sync="page" + @refresh-change="refreshChange" @row-click="rowClick"> + <template slot-scope="{row,index,type}" slot="selInputForm"> + <div style="margin-left: 75px"> + <el-input v-model="form.text" :size="size" style="width: 210px" :readonly="true" @focus="selectBtmType" :disabled="referType.disable"></el-input> + <!-- <el-button type="primary" style="margin-left: 10px" @click="addHandle">閫夋嫨</el-button> --> + <!-- <el-button type="info">鍙栨秷</el-button> --> + </div> + </template> + </avue-crud> + <el-dialog :visible.sync="referType.display" append-to-body :title="referType.title" width="1000px"> + <original-range @rowchange="rowchange"></original-range> + <span slot="footer" class="dialog-footer"> + <el-button @click="dialoghandelfalse">鍙� 娑�</el-button> + <el-button type="primary" @click="dialoghandeltrue">纭� 瀹�</el-button> + </span> + </el-dialog> + <!-- <el-dialog :visible.sync="packageLinkBox" append-to-body title="鏌ョ湅閾炬帴绫诲瀷" width="1000px"> + <original-link @rowLinkchange="rowLinkchange"></original-link> + <span slot="footer" class="dialog-footer"> + <el-button @click="Linkdialoghandelfalse">鍙� 娑�</el-button> + <el-button type="primary" @click="Linkdialoghandeltrue">纭� 瀹�</el-button> + </span> + </el-dialog> --> + </basic-container> + </el-main> + <el-aside> + <basic-container class="itemForm"> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="灞炴�ч」" name="attrTab"> + <el-form ref="form" :model="itemData" label-width="80px" style="height: 656px;"> + <el-form-item label="灞炴�х紪鐮�"> + <el-input v-model="itemData.key" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="灞炴�у悕绉�"> + <el-input v-model="itemData.label" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="灞炴�х被鍨�"> + <el-input v-model="itemData.typeValue" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="鏍囩"> + <el-input v-model="itemData.hashtag" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="榛樿鍊�"> + <el-input v-model="itemData.defaultValue" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="鍏佽涓虹┖"> + <el-switch v-model="itemData.nullable" :disabled="true"></el-switch> + </el-form-item> + <el-form-item label="闀垮害"> + <el-input v-model="itemData.maxLength" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="鎻忚堪"> + <el-input v-model="itemData.description" :disabled="true"></el-input> + </el-form-item> + </el-form> + </el-tab-pane> + <el-tab-pane label="鍙傜収" name="valueTab"> + <el-form ref="form" :model="itemData" label-width="80px" style="height: 656px;"> + <el-form-item label="鍙傜収绫诲瀷"> + <el-input v-model="itemData.referTypeValue" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="鍙傜収鍚嶇О"> + <el-input v-model="itemData.referToName" :disabled="true"></el-input> + </el-form-item> + </el-form> + </el-tab-pane> + <el-tab-pane label="鏋氫妇" name="enumTab"> + <el-form ref="form" :model="itemData" label-width="80px" style="height: 656px;"> + <el-form-item label="浣跨敤鏋氫妇"> + <el-switch v-model="itemData.usingDict" :disabled="true"></el-switch> + </el-form-item> + <el-form-item label="鏋氫妇绫诲瀷"> + <el-input v-model="form.dictCode" :disabled="true"></el-input> + </el-form-item> + </el-form> + </el-tab-pane> + </el-tabs> + </basic-container> + </el-aside> + </el-container> </template> <script> +import { + getList, + remove, + add, + update, getPage +} from "@/api/omd/OmdAttribute"; + +import { getDictionary } from "@/api/omd/dict"; + export default { - name: "passwords.vue", + name: "original", data() { return { - tablefalge:false, - tableDatas: [ { - name: 'input', - }, { - name: 'checkbox', - }, { - name: 'switch', - }], - tableData: [{ - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' + datas: [], + itemData: {}, + activeName: 'attrTab', + formAtrr: {}, + rouname: "", + referType: { + code: 'referType', + key: '', + value: '', + display: false, + title: '', + disable: true }, + //鍊煎煙涓嬫媺妗嗘暟鎹� + Typelist: [], + //鐗堟湰鏁版嵁 + banList: [], + // 灞炴�х被鍨嬩笅鎷夋鏁版嵁 + typeSelectList: [ { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' - }, - - { - name: 'abc', - label: '瀹㈡埛', - father:'瀹㈡埛', - rules:'瑙勫垯', - cycle:'cba' + label: "鍝堝搱鍝�", + value: 0 },], - form:{}, + // 鏄惁涓虹┖ + nullable: [], + form: { + text: "" + }, + detailForm: { + text: "" + }, page: { pageSize: 10, currentPage: 1, total: 100 }, - appflage:true, data: [ - { - name:"a", - prop:"VTstring", - admin:"榛樿", - desc:"娴嬭瘯A" - }, - { - name:"b", - prop:"VTstring", - admin:"榛樿", - desc:"娴嬭瘯B" - }, - { - name:"c", - prop:"VTstring", - admin:"榛樿", - desc:"娴嬭瘯C" - }, - { - name:"d", - prop:"VTstring", - admin:"榛樿", - desc:"娴嬭瘯D" - } + ], - option:{ + option: { + height: "550px", selection: true, - dialogType:'drawer', headerAlign: 'center', border: true, index: true, - rowKey:'id', + rowKey: 'id', tabs: true, - codomainoption:{ - submitBtn: false, - emptyBtn: false, - column: [ - { - placeholder:"璇烽�夋嫨鍊煎煙", - span:24, - label: '鍊煎煙', - prop: 'select', - type:"select", - value:0, - change:this.selectChange, - dicData:[ - { - label:"涓氬姟绫诲瀷", - value:0 - }, - { - label:"閾炬帴绫诲瀷", - value:1 - }, - ]}, - { - label: "閫夋嫨鐗堟湰", - prop:"banben", - type:'select', - display:false, - dicData: [ - { - label: '褰撳墠鐗堟湰娆�', - value:0 - }, - { - label: '鏈�鏂扮増鏈', - value:1 - } - ] - } - ] - }, - column:[ + column: [ { - label: '灞炴�у悕', - prop: 'name', + label: '灞炴�х紪鍙�', + prop: 'key', align: 'left', - display:false + display: false + }, { + label: '灞炴�у悕绉�', + prop: 'label', + align: 'left', + display: false }, { label: '鏍囩', - prop: 'tag', - hide:true, + prop: 'hashtag', + // hide: true, display: false }, { label: '鏄惁浣跨敤鏋氫妇', - prop: 'isnot', + prop: 'usingDict', type: 'switch', - hide:true, + hide: true, labelWidth: 132, display: false, - dicData:[{ - label:'鏄�', - value:0 - },{ - label:'鍚�', - value:1 + dicData: [{ + label: '鏄�', + value: 0 + }, { + label: '鍚�', + value: 1 }] }, { label: '灞炴�х被鍨�', - prop: 'prop', - type:"select", + prop: 'typeValue', display: false, - dicData:[ - { - label:"娴嬭瘯1", - value:0 - }, - { - label:"娴嬭瘯2", - value:1 - }, - { - label:"娴嬭瘯3", - value:2 - } - ] + // hide: true }, { label: '榛樿鍊�', - prop: 'admin', + prop: 'defaultValue', display: false }, { label: '鍏佽涓虹┖', - prop: 'isDefault', + prop: 'nullable', type: 'switch', display: false, - hide:true, + hide: true, labelWidth: 132, - dicData:[{ - label:'涓嶅厑璁�', - value:0 - },{ - label:'鍏佽', - value:1 + dicData: [{ + label: '鍚�', + value: 1 + }, { + label: '鏄�', + value: 0 }] }, { label: "闀垮害", - prop: "length", + prop: "maxLength", hide: true, display: false }, { label: '鎻忚堪', - prop: 'desc', - type:"textarea", + prop: 'description', + type: "textarea", display: false }, ], - group:[ + group: [ { label: '灞炴�ч」', - prop:"index", + prop: "index", column: [ { - label: '灞炴�у悕', - prop: 'name', + label: '灞炴�х紪鐮�', + prop: 'key', + align: 'left', + }, + { + label: '灞炴�у悕绉�', + prop: 'label', align: 'left', }, { label: '鏍囩', - prop: 'tag', - hide:true + prop: 'hashtag', + hide: true + }, { + label: '灞炴�х被鍨嬪瓧鍏哥爜', + prop: 'typeCode', + display: false, + value: 'attributeType' }, { label: '灞炴�х被鍨�', - prop: 'prop', - type:"select", - dicData:[ + prop: 'typeKey', + type: "select", + dicUrl: '/api/ubcs-omd/dict-biz/dictionary?code=attributeType', + dicType: 'String', + props: { + label: 'dictValue', + value: 'dictKey' + }, + rules: [ { - label:"娴嬭瘯1", - value:0 - }, - { - label:"娴嬭瘯2", - value:1 - }, - { - label:"娴嬭瘯3", - value:2 + required: true, + message: "璇烽�夋嫨灞炴�х被鍨�", + trigger: "click" } ] }, { label: '榛樿鍊�', - prop: 'admin', + prop: 'defaultValue', }, { label: '鍏佽涓虹┖', - prop: 'isDefault', + prop: 'nullable', type: 'switch', - hide:true, + hide: true, labelWidth: 132, - dicData:[{ - label:'涓嶅厑璁�', - value:0 - },{ - label:'鍏佽', - value:1 + dicData: [{ + label: '鍚�', + value: 1 + }, { + label: '鏄�', + value: 0 }] }, { label: "闀垮害", - prop: "length", + prop: "maxLength", hide: true }, { label: '鎻忚堪', - prop: 'desc', - type:"textarea" + prop: 'description', + type: "textarea" }, ] }, { - label: '鍊煎煙', - column:[ + label: '鍙傜収', + column: [ { - prop: 'hidebox', - formsolt:true, - hide: true, - span:24, + label: '鍙傜収绫诲埆', + prop: 'referTypeCode', + display: false, + hide: true + },{ + span: 12, + label: '鍙傜収绫诲埆', + prop: 'referTypeKey', + type: "select", + change: this.selectChange, + dicUrl: '/api/ubcs-omd/dict-biz/dictionary?code=referType', + dicType: 'String', + props: { + label: 'dictValue', + value: 'dictKey' + }, + rules: [ + { + required: true, + message: "璇烽�夋嫨鍙傜収绫诲埆", + trigger: "click" + } + ] }, + { + prop: "selInput", + placeholder: false, + readonly: true, + display: true, + formslot: true, + }, + // { + // label: "閫夋嫨鐗堟湰", + // prop: "banben", + // type: 'select', + // value: 0, + // change: this.selchange, + // display: true, + // dicData: [ + // { + // label: '褰撳墠鐗堟湰娆�', + // value: 0 + // }, + // { + // label: '鏈�鏂扮増鏈', + // value: 1 + // } + // ] + // }, + { + //榛樿琛ㄦ牸鎻掓Ы + prop: "default", + span: 24, + display: false + } ] }, { @@ -406,30 +360,30 @@ label: '鏄惁浣跨敤鏋氫妇', prop: 'isnot', type: 'switch', - hide:true, + hide: true, labelWidth: 132, - span:8, - dicData:[{ - label:'鏄�', - value:0 - },{ - label:'鍚�', - value:1 + span: 8, + dicData: [{ + label: '鍚�', + value: 1 + }, { + label: '鏄�', + value: 0 }] }, { - prop:'text', - type:'input', - placeholder:'璇疯緭鍏ュ唴瀹�', - hide:true, - display:false + prop: 'text', + type: 'input', + placeholder: '璇疯緭鍏ュ唴瀹�', + hide: true, + display: false }, { prop: 'enumerationSelect', type: 'select', placeholder: '璇烽�夋嫨', hide: true, - span:12, + span: 12, dicData: [ { label: 'a', @@ -448,102 +402,155 @@ { label: '鎻忚堪', prop: 'endesc', - type:"textarea", + type: "textarea", labelWidth: 132, }, ] } ] }, - } }, created() { + const column =this.findObject(this.option.group,"referTypeKey") + console.log(column); }, - methods:{ - selectChange(val){ - console.log(val) - this.tablefalge=!this.tablefalge - if(val.value == 0){ - this.tablefalge=true - this.option.codomainoption.column[1].display=false - }else if(val.value == null || val.value == 1){ - this.tablefalge=false; - this.option.codomainoption.column[1].display=true + methods: { + rowLinkchange(row) { + this.form.text = row.name + }, + rowchange(row) { + this.form.text = row.name + }, + //鍊煎煙绫诲瀷閫夋嫨 + addHandle() { + this.packageBox = true + if (this.Typelist.value == 0) { + this.packageBox = true + this.packageLinkBox = false + } else if (this.Typelist.value == 1) { + this.packageBox = false + this.packageLinkBox = true } }, - beforeOpen (done, type) { - if (['view', 'edit'].includes(type)) { - // 鏌ョ湅鍜岀紪杈戦�昏緫 - console.log("缂栬緫") - } else { - //鏂板閫昏緫 - this.tablefalge=false - console.log(this.tablefalge) - console.log("鏂板") - } - done(); - + // 鍊煎煙涓氬姟绫诲瀷瀵硅瘽妗嗗彇娑� + dialoghandelfalse() { + this.packageBox = false; + this.form.text = "" + }, + //鍊煎煙涓氬姟绫诲瀷瀵硅瘽妗嗙‘瀹� + dialoghandeltrue() { + this.packageBox = false + }, + // 鍊煎煙閾炬帴绫诲瀷瀵硅瘽妗嗗彇娑� + Linkdialoghandelfalse() { + this.packageLinkBox = false; + this.form.text = "" + }, + //鍊煎煙閾炬帴绫诲瀷瀵硅瘽妗嗙‘瀹� + Linkdialoghandeltrue() { + this.packageLinkBox = false + }, + selectChange(val) { + console.log(val); + this.referType.key = val.value + if (val.value == 'businessType'){ + this.referType.value = '涓氬姟绫诲瀷' } - // rowDel(row){ - // this.$confirm("纭畾灏嗛�夋嫨鏁版嵁鍒犻櫎?", { - // confirmButtonText: "纭畾", - // cancelButtonText: "鍙栨秷", - // type: "warning" - // }) - // .then(() => { - // return getremove(row.id); - // }) - // .then(() => { - // this.$message({ - // type: "success", - // message: "鎿嶄綔鎴愬姛!" - // }); - // this.onLoad(); - // }); - // }, - // rowSave(row,done){ - // getadd(row).then(()=>{ - // this.$message({ - // type: "success", - // message: "鎿嶄綔鎴愬姛!" - // }); - // done(row) - // this.onLoad() - // }).catch((res)=>{ - // this.$message({ - // type: "success", - // message:res - // }); - // }) - // }, - // rowUpdate(row,index,done){ - // getupdata(row).then(()=>{ - // this.onLoad() - // this.$message({ - // type: "success", - // message: "淇敼鎴愬姛!" - // }); - // done(row) - // }) - // }, - // onLoad(page, params = {}) { - // // this.loading = true; - // // getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => { - // // // const data = res.data.data; - // // // this.page.total = data.total; - // // // this.data = data.records; - // // // this.loading = false; - // // // this.selectionClear(); - // // this.data=res.data.data.records - // // }) - // } - } + if (val.value == 'linkType'){ + this.referType.value = '閾炬帴绫诲瀷' + } + if(val.value){ + this.referType.disable = false + } + console.log(this.referType.disable) + }, + selchange(val) { + this.banList = val + console.log(val); + }, + refreshChange() { + this.onLoad(this.pageParent, this.query); + }, + beforeOpen(done, type) { + if (['view', 'edit'].includes(type)) { + // 鏌ョ湅鍜岀紪杈戦�昏緫 + console.log("缂栬緫") + } else { + //鏂板閫昏緫 + console.log(this.Typelist) + console.log(this.banList) + console.log("鏂板") + console.log(this.typeSelectList) + } + done(); + + }, + rowDel(row) { + this.$confirm("纭畾灏嗛�夋嫨鏁版嵁鍒犻櫎?", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning" + }) + .then(() => { + return remove(row.id); + }) + .then(() => { + this.$message({ + type: "success", + message: "鎿嶄綔鎴愬姛!" + }); + this.onLoad(); + }); + }, + rowSave(row, done) { + add(row).then(() => { + this.$message({ + type: "success", + message: "鎿嶄綔鎴愬姛!" + }); + done(row) + this.onLoad() + }).catch((res) => { + this.$message({ + type: "success", + message: res + }); + }) + }, + rowUpdate(row, index, done) { + update(row).then(() => { + this.onLoad() + this.$message({ + type: "success", + message: "淇敼鎴愬姛!" + }); + done(row) + }) + }, + onLoad(page, params = {}) { + this.loading = true; + getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => { + const data = res.data.data; + this.page.total = data.total; + this.data = data.records; + this.loading = false; + this.data = res.data.data.records + this.itemData = this.data[0]; + }) + }, + rowClick(row) { + this.itemData = row + } + ,selectBtmType(){ + this.referType.display = true; + this.referType.title = "璇烽�夋嫨" + this.referType.value + } + }, } </script> -<style lang="scss"> -</style> +<style lang="scss"></style> -- Gitblit v1.9.3