¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <el-container> |
| | | <el-dialog title="å
æ°æ®" :visible.sync="showSubmitDialog" append-to-body @close="closeSubmitDialog" width="700px" |
| | | style="height: 115vh;"> |
| | | <!-- å
æ°æ®ç墿¹å¼¹çª --> |
| | | <el-form ref="form" :model="attribute" show-message="true" inline size="medium" label-suffix=":" |
| | | class="attributeForm" :rules="rules" @resetFields="resetAttributeForm" status-icon="true"> |
| | | <el-form-item label="屿§ç¼å·" label-width="100px" prop="id"> |
| | | <el-input v-model="attribute.id" maxlength="15" show-word-limit type="text"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="屿§åç§°" label-width="100px" prop="name"> |
| | | <el-input v-model="attribute.name"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="屿§ç±»å" label-width="100px" prop="typeValue"> |
| | | <el-select v-model="attribute.typeValue" placeholder="è¯·éæ©å±æ§ç±»å" @change="typeSelectChange"> |
| | | <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="æ ç¾" label-width="100px"> |
| | | <el-input v-model="attribute.hashtag"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="é»è®¤å¼" label-width="100px"> |
| | | <el-input v-model="attribute.defaultValue"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="å
许为空" label-width="100px"> |
| | | <el-switch v-model="attribute.nullable" active-text="å
许" inactive-text="ä¸å
许"></el-switch> |
| | | </el-form-item> |
| | | <el-form-item label="é¿åº¦" label-width="100px" prop="maxLength"> |
| | | <el-input-number v-model="attribute.maxLength" :min="1" :max="4000" :step="1" controls-position="right"></el-input-number> |
| | | </el-form-item> |
| | | <el-form-item label="精度" label-width="100px" v-if="attribute.typeValue == 'VTDouble'"> |
| | | <el-input-number v-model="attribute.precision" :min="1" :max="20" :step="1" controls-position="right" @change="changeNumber"></el-input-number> |
| | | </el-form-item> |
| | | <el-form-item label="æè¿°" label-width="100px"> |
| | | <el-input v-model="attribute.description" type="text"></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true"> |
| | | <el-tab-pane label="åç
§" name="referTab"> |
| | | <el-form-item label="åç
§ç±»å" label-width="100px"> |
| | | <el-select v-model="attribute.referTypeKey" @change="referTypeSelectChange"> |
| | | <el-option v-for="item in btmRefer.referTypeList" :key="item.value" :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="åç
§åç§°" label-width="100px"> |
| | | <el-input v-model="attribute.referToName" @focus="openReferConfig" clearable="true" |
| | | :disabled="referToFlag" @clear="clearReferTo"> |
| | | <i slot="suffix" class="el-input__icon el-icon-search"></i> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="æä¸¾" name="enumTab"> |
| | | <el-form-item label="æä¸¾" label-width="100px"> |
| | | <el-input v-model="attribute.dictValue" @focus="openEnumConfig" clearable="true"> |
| | | <i slot="suffix" class="el-input__icon el-icon-search"></i> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="æä¸¾é¡¹" label-width="100px"> |
| | | |
| | | </el-form-item> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="submitAttribute">ç¡®å®</el-button> |
| | | <el-button @click="cancleSubmit">åæ¶</el-button> |
| | | </div> |
| | | <!-- éæ©åç
§æ¶çå¼¹çª --> |
| | | <el-dialog title="åç
§å表" :visible.sync="btmRefer.show" append-to-body @close="closeReferDialog" width="80%" |
| | | style="height: 115vh;"> |
| | | <el-container> |
| | | <el-aside> |
| | | <basic-container> |
| | | <span class="el-dialog__title"> {{ domain.treeOption.title }} </span> |
| | | <div style="height:20px;"></div> |
| | | <avue-tree id="domain" :data="domain.data" :option="domain.treeOption" @node-click="nodeClick" |
| | | class="businessTree" style="height: 418px"> |
| | | <span class="el-tree-node__label" slot-scope="{ node, data }"> |
| | | <span> |
| | | <i class="el-icon-star-on"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | | </basic-container> |
| | | </el-aside> |
| | | <el-main> |
| | | <basic-container> |
| | | <avue-crud ref="btmTable" :option="btmRefer.option" :data="btmRefer.data" class="btmTable" @row-click="btmReferClick"> |
| | | <template slot="radio" slot-scope="{row}"> |
| | | <el-radio v-model="btmRefer.selectRow" :label="row.$index"> |
| | | </el-radio> |
| | | </template> |
| | | </avue-crud> |
| | | </basic-container> |
| | | </el-main> |
| | | |
| | | </el-container> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="confirmBtm" size="small">ç¡®å®</el-button> |
| | | <el-button @click="cancleBtm" size="small">åæ¶</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | <!-- éæ©æä¸¾æ¶çå¼¹çª --> |
| | | <el-dialog title="æä¸¾å表" :visible.sync="enumRefer.show" append-to-body @close="closeEnumDialog" width="70%" |
| | | style="height: 115vh;"> |
| | | <avue-crud ref="eunmTable" :option="enumRefer.option" :data="enumRefer.data" class="enumTable" @row-click="enumReferClick" :page.sync="enumRefer.enumPage"> |
| | | <template slot="radio" slot-scope="{row}"> |
| | | <el-radio v-model="enumRefer.selectRow" :label="row.$index"> |
| | | </el-radio> |
| | | </template> |
| | | </avue-crud> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="confirmEnum" size="small">ç¡®å®</el-button> |
| | | <el-button @click="cancleEnum" size="small">åæ¶</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </el-dialog> |
| | | |
| | | </el-container> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getDictionary,getParentList } from '@/api/omd/enum' |
| | | import { initTree,btmPage } from '@/api/omd/btmType' |
| | | import { add} from '@/api/omd/OmdAttribute' |
| | | export default { |
| | | name: 'originalAdd', |
| | | props: { |
| | | attribute: { |
| | | type: Object |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | showSubmitDialog: false, |
| | | // é»è®¤çé¡µç¾ |
| | | activeName: 'referTab', |
| | | // 屿§ç±»åä¸ææ¡æ°æ® |
| | | typeList: [], |
| | | // åç
§ä¸ææ¡æ¯å¦å¯ç¨ |
| | | referToFlag: true, |
| | | // è¡¨åæ ¡éªè§å |
| | | rules: { |
| | | id: [ |
| | | { required: true, message: '请è¾å
¥å±æ§ç¼å·', trigger: 'blur' }, |
| | | { pattern: /^[A-Za-z]+$/, message: '屿§ç¼å·åªè½ä¸ºè±æ', trigger: 'blur' }, |
| | | { min: 2, max: 15, message: 'é¿åº¦å¨2å°15个å符', trigger: 'blur' } |
| | | ], |
| | | name: [ |
| | | { required: true, message: '请è¾å
¥å±æ§åç§°', trigger: 'blur' } |
| | | ], |
| | | typeValue: [ |
| | | { required: true, message: 'è¯·éæ©å±æ§ç±»å', trigger: 'change' } |
| | | ], |
| | | maxLength: [ |
| | | { required: true, message: 'éè¦æå®é¿åº¦', trigger: 'blur' } |
| | | ] |
| | | }, |
| | | // åç
§é¡µé¢è¡¨æ ¼é
ç½® |
| | | btmRefer: { |
| | | show: false, |
| | | btmPage: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 100 |
| | | }, |
| | | option: { |
| | | height: 405, |
| | | addBtn: false, |
| | | refreshBtn: false, |
| | | columnBtn: false, |
| | | menu: false, |
| | | border: true, |
| | | reserveSelection: true, |
| | | searchMenuSpan: 32, |
| | | searchShowBtn: false, |
| | | highlightCurrentRow: true, |
| | | column: [ |
| | | { |
| | | label: '', |
| | | prop: 'radio', |
| | | width: 60, |
| | | hide: false |
| | | }, |
| | | { |
| | | label: 'è±æåç§°', |
| | | prop: 'id', |
| | | align: 'center', |
| | | searchSpan:8, |
| | | search: true, |
| | | }, { |
| | | label: '䏿åç§°', |
| | | prop: 'name', |
| | | align: 'center', |
| | | searchSpan:8, |
| | | search: true, |
| | | }] |
| | | }, |
| | | // åç
§é¡µé¢è¡¨æ ¼æ°æ® |
| | | data: [], |
| | | selectRow: '', |
| | | selectItem: {}, |
| | | referTypeList: [] |
| | | }, |
| | | // æä¸¾åç
§è¡¨æ ¼é
ç½® |
| | | enumRefer: { |
| | | show: false, |
| | | enumPage: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 100 |
| | | }, |
| | | option: { |
| | | height: 360, |
| | | addBtn: false, |
| | | refreshBtn: false, |
| | | columnBtn: false, |
| | | selection: true, |
| | | menu: false, |
| | | border: true, |
| | | reserveSelection: true, |
| | | searchMenuSpan: 32, |
| | | searchShowBtn: false, |
| | | highlightCurrentRow: true, |
| | | column: [{ |
| | | label: '', |
| | | prop: 'radio', |
| | | width: 60, |
| | | hide: false |
| | | },{ |
| | | label: 'æä¸¾ä»£å·', |
| | | prop: 'name', |
| | | align: 'center', |
| | | searchSpan:8, |
| | | search: true, |
| | | }, { |
| | | label: 'æä¸¾åç§°', |
| | | prop: 'label', |
| | | align: 'center', |
| | | searchSpan:8, |
| | | search: true, |
| | | }] |
| | | }, |
| | | // æä¸¾åç
§è¡¨æ ¼æ°æ® |
| | | data: [], |
| | | enumDictionary: [], |
| | | // éå®è¡ |
| | | selectRow: '', |
| | | selectItem: {} |
| | | }, |
| | | domain: { |
| | | data: [], |
| | | treeOption: { |
| | | defaultExpandAll: true, |
| | | title: 'é¢åæå¡æ ', |
| | | props: { |
| | | labelText: '', |
| | | label: 'name', |
| | | value: 'oid', |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | this.initAttributeTypeList(); |
| | | this.initAttributeReferTypeList(); |
| | | }, |
| | | methods: { |
| | | closeSubmitDialog() { |
| | | this.resetAttributeForm(); |
| | | this.showSubmitDialog = false; |
| | | }, |
| | | resetAttributeForm() { |
| | | this.attribute = { |
| | | nullable: true, |
| | | referTypeKey: '', |
| | | }; |
| | | this.referToFlag = true; |
| | | this.$refs.form.resetFields(); |
| | | }, |
| | | submitAttribute() { |
| | | add(this.attribute).then(res => { |
| | | this.$message.success("ä¿åæå"); |
| | | this.showSubmitDialog = false; |
| | | this.attribute = {}; |
| | | this.$emit('refreshTable'); |
| | | }); |
| | | |
| | | }, |
| | | cancleSubmit() { |
| | | this.closeSubmitDialog(); |
| | | }, |
| | | closeEnumDialog() { |
| | | this.cancleEnum(); |
| | | }, |
| | | closeReferDialog() { |
| | | this.cancleBtm(); |
| | | }, |
| | | confirmBtm() { |
| | | this.attribute.referToId = this.btmRefer.selectItem.oid; |
| | | this.attribute.referToName = this.btmRefer.selectItem.name; |
| | | this.btmRefer.show = false; |
| | | }, |
| | | cancleBtm() { |
| | | this.btmRefer.selectItem = {}; |
| | | this.btmRefer.show = false; |
| | | this.btmRefer.selectRow = ''; |
| | | }, |
| | | confirmEnum() { |
| | | this.attribute.usingDict = true; |
| | | this.attribute.dictCode = this.enumRefer.selectItem.name; |
| | | this.attribute.dictValue = this.enumRefer.selectItem.label; |
| | | this.enumRefer.show = false; |
| | | }, |
| | | cancleEnum() { |
| | | this.enumRefer.selectItem = {}; |
| | | this.enumRefer.show = false; |
| | | this.enumRefer.selectRow = ''; |
| | | }, |
| | | // åç
§åç§°è¾å
¥æ¡è·åç¦ç¹æ¶çäºä»¶ |
| | | openReferConfig() { |
| | | if (!this.attribute.referTypeKey) { |
| | | this.$message.warning('请å
éæ©åç
§çç±»å'); |
| | | this.referToFlag = true; |
| | | return; |
| | | } |
| | | this.domain.data = []; |
| | | this.btmRefer.data = []; |
| | | initTree().then(res => { |
| | | this.domain.data = res.data.data; |
| | | }) |
| | | this.btmRefer.show = true; |
| | | |
| | | }, |
| | | // åç
§ç±»åæ çç¹å»äºä»¶ |
| | | nodeClick(data) { |
| | | // åºåä¸å¡ç±»åçæ¥è¯¢å龿¥ç±»åçæ¥è¯¢ |
| | | if(this.attribute.referTypeKey == 'btmType'){ |
| | | btmPage(this.btmRefer.btmPage.currentPage,this.btmRefer.btmPage.pageSize,{domain:data.id}).then(res => { |
| | | this.btmRefer.data = res.data.data.records; |
| | | this.btmRefer.btmPage.total = res.data.data.total; |
| | | }) |
| | | } |
| | | if(this.attribute.referTypeKey == 'linkType'){ |
| | | |
| | | } |
| | | }, |
| | | // æä¸¾ç±»åè¾å
¥æ¡è·å¾ç¦ç¹æ¶çäºä»¶ |
| | | openEnumConfig() { |
| | | getParentList(this.enumRefer.enumPage.currentPage,this.enumRefer.enumPage.pageSize).then(res => { |
| | | this.enumRefer.enumPage.total = res.data.data.total; |
| | | this.enumRefer.data = res.data.data.records; |
| | | }) |
| | | this.enumRefer.show = true; |
| | | }, |
| | | // 屿§ç±»å䏿æ¡éæ©äºä»¶ |
| | | typeSelectChange(value) { |
| | | if (value == 'VTString') { |
| | | this.$set(this.attribute,"maxLength",150) |
| | | } else if (value == 'VTInteger') { |
| | | this.$set(this.attribute,"maxLength",50) |
| | | } else if (value == 'VTBoolean') { |
| | | this.$set(this.attribute,"maxLength",5) |
| | | } else if (value == 'VTDouble') { |
| | | this.$set(this.attribute,"maxLength",26) |
| | | this.$set(this.attribute,"precision",8) |
| | | } else if (value == 'VTLong') { |
| | | this.$set(this.attribute,"maxLength",150) |
| | | } else if (value == 'VTDate' || value == 'VTTime' || value == 'VTDateTime') { |
| | | this.$set(this.attribute,"maxLength",6) |
| | | } else { |
| | | this.$set(this.attribute,"maxLength",50) |
| | | } |
| | | this.attribute.typeCode = 'attributeType'; |
| | | this.attribute.typeKey = value; |
| | | }, |
| | | referTypeSelectChange(value) { |
| | | this.attribute.referTypeCode = 'attributeReferType'; |
| | | this.attribute.referTypeKey = value; |
| | | this.referToFlag = false; |
| | | }, |
| | | initAttributeTypeList() { |
| | | getDictionary({ code: 'attributeType' }).then(res => { |
| | | res.data.data.forEach(element => { |
| | | this.typeList.push( |
| | | { value: element.itemValue, label: element.itemName } |
| | | ) |
| | | }); |
| | | }).catch(() => { |
| | | this.$message.error('屿§ç±»å没æ¾å°æè
æªå®ä¹') |
| | | }) |
| | | }, |
| | | initAttributeReferTypeList(){ |
| | | getDictionary({ code: 'attributeReferType' }).then(res => { |
| | | res.data.data.forEach(element => { |
| | | this.btmRefer.referTypeList.push( |
| | | { value: element.itemValue, label: element.itemName } |
| | | ) |
| | | }); |
| | | }).catch(() => { |
| | | this.$message.error('åç
§ç±»å没æ¾å°æè
æªå®ä¹') |
| | | }) |
| | | }, |
| | | btmReferClick(row){ |
| | | this.btmRefer.selectItem = row; |
| | | this.btmRefer.selectRow = row.$index; |
| | | }, |
| | | enumReferClick(row){ |
| | | this.enumRefer.selectItem = row; |
| | | this.enumRefer.selectRow = row.$index; |
| | | }, |
| | | // åç
§åç§°ç¹å»æ¸
餿°æ® |
| | | clearReferTo(){ |
| | | this.$delete(this.attribute,'referToId'); |
| | | this.$delete(this.attribute,'referToName'); |
| | | this.btmRefer.selectItem = {}; |
| | | this.btmRefer.selectRow = ''; |
| | | }, |
| | | handleClick(tab){ |
| | | // å 为åªè½åç
§åæä¸¾äºéä¸ãæä»¥å¨åæ¢çæ¶åæå±æ§ç»æ¸
空ã |
| | | this.$delete(this.attribute,'referTypeCode'); |
| | | this.$delete(this.attribute,'referTypeKey'); |
| | | this.$delete(this.attribute,'referTypeValue'); |
| | | this.$delete(this.attribute,'referToId'); |
| | | this.$delete(this.attribute,'referToName'); |
| | | this.$delete(this.attribute,'dictCode'); |
| | | this.$delete(this.attribute,'dictKey'); |
| | | this.$delete(this.attribute,'dictValue'); |
| | | this.$delete(this.attribute,'usingDict'); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .btmTable>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu { |
| | | display: none !important; |
| | | } |
| | | |
| | | .enumTable>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu { |
| | | display: none !important; |
| | | } |
| | | |
| | | .attributeForm>.el-form-item>.el-form-item__content>.el-input>.el-input__inner { |
| | | width: 200px; |
| | | } |
| | | |
| | | .attributeForm>.el-form-item>.el-form-item__content> .el-select>.el-input>.el-input__inner { |
| | | width: 200px; |
| | | } |
| | | </style> |