¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div> |
| | | <el-dialog :title="title" |
| | | v-dialogDrag append-to-body="true" |
| | | :visible.sync="visible" |
| | | top="0" |
| | | class="avue-dialog avue-dialog--top" |
| | | :width="referConfig.options.width|| '80%'"> |
| | | <avue-crud :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | :page.sync="page" |
| | | v-model="value" |
| | | ref="referDefalutCrud" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad"> |
| | | </avue-crud> |
| | | <div class="avue-dialog__footer"> |
| | | <div class="avue-dialog__footer--left valueInfo">{{ valueInfo }}</div> |
| | | <el-button @click="visible=false">å æ¶</el-button> |
| | | <el-button @click="setValue" type="primary">ç¡® å®</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <avue-input v-model="text" :placeholder="title" @click="visible=true"></avue-input> |
| | | <!--<avue-input-table ref="referTable" :props="props" :column="column" :on-load="onLoad" v-model="value" :placeholder="title" ></avue-input-table> |
| | | --> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { validatenull } from "@/util/validate"; |
| | | import {getList,getLazyList,getTableDefinedUrl} from "@/api/refer/table"; |
| | | export default { |
| | | name: "vciWebReferDefalut", |
| | | props:["referConfig","value","text","title"], |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | options: this.referConfig.options, |
| | | isMuti: ("true" == this.referConfig.options.isMuti || this.referConfig.options.isMuti == true || this.referConfig.options.muti == true) ? true : false, |
| | | props: { |
| | | value: this.referConfig.valueField || this.referConfig.options.valueField || 'oid', |
| | | label: this.referConfig.textField || this.referConfig.options.textField || "name" |
| | | }, |
| | | url: this.referConfig.options.url || '/api/ubcs-code/mdmEngineController/defaultReferDataGrid', |
| | | tableDefinedUrl:'',//å¹³å°è¡¨æ ¼å°å |
| | | copyParam: ['referBo', 'textField', 'valueField', 'displayTable', 'whereSql', 'queryScheme'], |
| | | query: {}, |
| | | loading: false, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 0 |
| | | }, |
| | | data:this.referConfig.options.data || [], |
| | | selectionList: [], |
| | | option: { |
| | | addBtn: false, |
| | | height: this.referConfig.options.height ? this.referConfig.options.height : 475, |
| | | calcHeight: 30, |
| | | tip: false, |
| | | menu:false, |
| | | searchShow: true, |
| | | searchMenuSpan: 6, |
| | | searchLabelWidth: 90, |
| | | border: true, |
| | | index: true, |
| | | selection: true, |
| | | dialogClickModal: false, |
| | | highlightCurrentRow: true, |
| | | column: [] |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | this.getParams(); |
| | | console.log('referConfig:') |
| | | console.log(this.referConfig) |
| | | }, |
| | | mounted() { |
| | | }, |
| | | computed:{ |
| | | valueInfo:function (){ |
| | | return this.text ? ("已设置çå¼ä¸º[" + this.text + "]"): 'æªè®¾ç½®å¼' |
| | | } |
| | | }, |
| | | methods: { |
| | | getParams:function () { |
| | | var queryParams = {}; |
| | | if (this.options.extraParams) { |
| | | queryParams = this.options.extraParams; |
| | | } |
| | | if (this.options.useFormKey && this.options.formValues) { |
| | | //使ç¨è¡¨åä¸çåæ®µæ¥è¿æ»¤ |
| | | queryParams['conditionMap["' + (this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey) + '"]'] = this.options.formValues[this.options.useFormKey]; |
| | | } |
| | | if (this.options.where) { |
| | | for (var key in this.options.where) { |
| | | queryParams['conditionMap["' + key + '"]'] = this.options.where[key];//æ° |
| | | } |
| | | } |
| | | for (var i = 0; i < this.copyParam.length; i++) { |
| | | queryParams[this.copyParam[i]] = this.options[this.copyParam[i]]; |
| | | } |
| | | queryParams["isMuti"] = this.isMuti; |
| | | queryParams.muti = this.isMuti; |
| | | if (!queryParams['referBo']) { |
| | | queryParams['referBo'] = this.options['referBo'] || this.options['referType']; |
| | | } |
| | | queryParams['referType'] = queryParams['referBo'] |
| | | if (this.options.remoteSort && this.options.initSort) { |
| | | queryParams['order'] = this.options.initSort.type;//æ¹æ³ |
| | | queryParams['sort'] = this.options.initSort.field;//åæ®µ |
| | | } |
| | | if (this.options.conditionParams) { |
| | | //è¯´ææ¯æ©å±å±æ§ |
| | | for (var key in this.options.conditionParams) { |
| | | queryParams['conditionMap["' + key + '"]'] = this.options.conditionParams[key];//æ°çæ¹å¼ |
| | | } |
| | | } |
| | | if (this.options.sourceDataParams) { |
| | | //è¯´ææ¯æ©å±å±æ§ |
| | | for (var key in this.options.sourceDataParams) { |
| | | if (key && key.constructor === Object) return; |
| | | queryParams['sourceData["' + key + '"]'] = this.options.sourceDataParams[key];//æ°çæ¹å¼ |
| | | } |
| | | } |
| | | if (this.options.replaceParams) { |
| | | //è¯´ææ¯æ©å±å±æ§ |
| | | for (var key in this.options.replaceParams) { |
| | | if (key && key.constructor === Object) return; |
| | | queryParams['replaceMap["' + key + '"]'] = this.options.replaceParams[key];//æ°çæ¹å¼ |
| | | } |
| | | } |
| | | var paramsData = {}; |
| | | //为äºå¤çåå¼å·ååå¼å·ç |
| | | if (queryParams) { |
| | | for (var key in queryParams) { |
| | | paramsData[key.replace(/"/g, "'")] = queryParams[key]; |
| | | } |
| | | } |
| | | |
| | | if (!this.options.tableConfig || !this.options.tableConfig.cols || this.options.tableConfig.cols.length == 0) { |
| | | this.option.column = [{ |
| | | prop: 'id', |
| | | label: 'è±æåç§°', |
| | | sort: true, |
| | | width: 150, |
| | | search: true |
| | | }, { |
| | | prop: 'name', |
| | | label: '䏿åç§°', |
| | | sort: true, |
| | | width: 150, |
| | | search: true |
| | | }, { |
| | | prop: 'description', |
| | | label: 'æè¿°', |
| | | width: 250 |
| | | }, { |
| | | prop: 'secretGradeText', |
| | | label: 'å¯çº§', |
| | | width: 60, |
| | | hidden: (!this.controllerSecret) |
| | | }]; |
| | | } else { |
| | | this.option.column = this.options.tableConfig.cols.map(item => { |
| | | if (item.field != 'LAY_TABLE_INDEX' && item.field != 'LAY_CHECKED') { |
| | | return { |
| | | ...item, |
| | | label: item.title, |
| | | prop: item.field, |
| | | search: true |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | if (!paramsData) { |
| | | paramsData = { |
| | | currentUserReferModelKey: this.options.currentUserReferModelKey, |
| | | currentUserReferMethodKey: this.options.currentUserReferMethodKey |
| | | }; |
| | | } else { |
| | | paramsData['currentUserReferModelKey'] = this.options.currentUserReferModelKey; |
| | | paramsData['currentUserReferMethodKey'] = this.options.currentUserReferMethodKey; |
| | | } |
| | | this.params = paramsData; |
| | | }, |
| | | setValue(){ |
| | | if(this.selectionList.length==0){ |
| | | this.$message.error( '没æéæ©æ°æ®'); |
| | | return false; |
| | | }else if(this.selectionList.length>1 && !this.isMuti){ |
| | | this.$message.error( 'æ¯æ¬¡åªè½éæ©ä¸æ¡æ°æ®'); |
| | | return false; |
| | | } |
| | | |
| | | var value = []; |
| | | var text = []; |
| | | var isMutiValue = (this.props.value.indexOf(",")>-1); |
| | | var isMutiRaw = (this.props.label.indexOf(",")>-1); |
| | | var _that=this |
| | | this.selectionList.forEach((item,_index) =>{ |
| | | if(isMutiValue){ |
| | | var valueFieldArray = _that.props.value.split(","); |
| | | valueFieldArray.forEach((_indexField,_itemField)=>{ |
| | | value.push( item[_itemField] + (_that.referConfig.valueSep?_that.referConfig.valueSep:' ')); |
| | | }) |
| | | }else { |
| | | value.push(item[_that.props.value]); |
| | | } |
| | | if(isMutiRaw) { |
| | | var rawFieldArray = _that.props.label.split(","); |
| | | rawFieldArray.forEach((_indexField,_itemField)=>{ |
| | | text.push(item[_itemField] + (_that.referConfig.textSep?_that.referConfig.textSep:' ')) ; |
| | | }) |
| | | }else{ |
| | | text.push(item[_that.props.label]); |
| | | } |
| | | }) |
| | | |
| | | this.value=value.join(','); |
| | | this.text=text.join(',') |
| | | this.$emit("setValue", {field:this.referConfig.field,showField:this.referConfig.showField,value:this.value,text:this.text,rawData:this.selectionList}); |
| | | this.visible=false; |
| | | }, |
| | | searchReset() { |
| | | this.query = {}; |
| | | this.onLoad(this.page); |
| | | }, |
| | | searchChange(params, done) { |
| | | this.query = params; |
| | | this.page.currentPage = 1; |
| | | this.onLoad(this.page, params); |
| | | done(); |
| | | }, |
| | | currentChange(currentPage){ |
| | | this.page.currentPage = currentPage; |
| | | }, |
| | | sizeChange(pageSize){ |
| | | this.page.pageSize = pageSize; |
| | | }, |
| | | selectionChange(list) { |
| | | if (!this.isMuti && list.length > 1) { |
| | | const nowVal = list.shift(); |
| | | this.$refs.referCrud.toggleRowSelection(nowVal, false); |
| | | } |
| | | this.selectionList = list |
| | | }, |
| | | selectionClear() { |
| | | this.selectionList = []; |
| | | this.$refs.referCrud.toggleSelection(); |
| | | }, |
| | | refreshChange() { |
| | | this.onLoad(this.page, this.query); |
| | | }, |
| | | onLoad(page, params = this.params) { |
| | | if(this.url){ |
| | | this.loading = true; |
| | | getList(Object.assign(params, this.query),page.currentPage, page.pageSize, this.url).then(res => { |
| | | const data = res.data.data; |
| | | this.page.total = data.total; |
| | | this.data = data.records; |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | }); |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .valueInfo{ |
| | | float: left; |
| | | border: 1px solid #E9E7E7; |
| | | display: inline-block; |
| | | vertical-align: middle; |
| | | padding: 9px 15px; |
| | | line-height: 1; |
| | | } |
| | | </style> |