| | |
| | | <template> |
| | | <div> |
| | | <el-dialog :title="title" |
| | | v-dialogDrag append-to-body="true" |
| | | <el-dialog v-dialogDrag |
| | | :height="options.height|| 'auto'" :title="title" |
| | | :visible.sync="visible" |
| | | top="0" |
| | | class="avue-dialog avue-dialog--top" |
| | | :width="options.width|| '80%'" |
| | | :height="options.height|| 'auto'" |
| | | @close="dialogClose" > |
| | | <avue-crud :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | :page.sync="page" |
| | | append-to-body="true" |
| | | class="avue-dialog avue-dialog--top" |
| | | top="0" |
| | | @close="dialogClose"> |
| | | <avue-crud ref="referDefalutCrud" |
| | | v-model="value" |
| | | ref="referDefalutCrud" |
| | | :data="data" |
| | | :option="option" |
| | | :page.sync="page" |
| | | :table-loading="loading" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | |
| | | <div class="avue-dialog__footer"> |
| | | <div class="avue-dialog__footer--left valueInfo">{{ valueInfo }}</div> |
| | | <el-button @click="escHandler">取 消</el-button> |
| | | <el-button @click="setValue" type="primary">确 定</el-button> |
| | | <el-button type="primary" @click="setValue">确 定</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <avue-input v-model="text" :disabled="disabled" :readonly="true" :placeholder="title" @click="!disabled && (visible=true)" ></avue-input> |
| | | <avue-input v-model="text" :disabled="disabled" :placeholder="title" :readonly="true" |
| | | @click="!disabled && (visible=true)"></avue-input> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { validatenull } from "@/util/validate"; |
| | | import {getList,getLazyList,getTableDefinedUrl} from "@/api/refer/table"; |
| | | import {validatenull} from "@/util/validate"; |
| | | import {getList, getLazyList, getTableDefinedUrl} from "@/api/refer/table"; |
| | | |
| | | export default { |
| | | name: "vciWebReferDefalut", |
| | | props:["referConfig","value","text","title","disabled","referType"], |
| | | props: ["referConfig", "value", "text", "title", "disabled", "referType"], |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | options: this.referConfig.options||{}, |
| | | 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', |
| | |
| | | }, |
| | | url: this.referConfig.options.url || '/api/ubcs-code/mdmEngineController/defaultReferDataGrid', |
| | | method: this.referConfig.options.method || 'GET', |
| | | tableDefinedUrl:'',//平台表格地址 |
| | | copyParam: ['referBo', 'textField', 'valueField', 'displayTable', 'whereSql', 'queryScheme'], |
| | | tableDefinedUrl: '',//平台表格地址 |
| | | copyParam: ['referBo', 'textField', 'valueField', 'displayTable', 'whereSql', 'queryScheme'], |
| | | query: {}, |
| | | loading: false, |
| | | page: { |
| | | layout: this.referType === "master" ? "total,pager,prev, next,jumper" : "total,pager,prev, next,jumper,sizes", |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: this.referConfig.options.data?this.referConfig.options.data.length :0 |
| | | total: this.referConfig.options.data ? this.referConfig.options.data.length : 0 |
| | | }, |
| | | data:this.referConfig.options.data || [], |
| | | data: this.referConfig.options.data || [], |
| | | selectionList: [], |
| | | option: { |
| | | addBtn: false, |
| | | columnBtn:false, |
| | | columnBtn: false, |
| | | //height: this.referConfig.options.height ? this.referConfig.options.height : 475, |
| | | calcHeight: 30, |
| | | tip: false, |
| | | menu:false, |
| | | menu: false, |
| | | searchShow: true, |
| | | searchMenuSpan: 6, |
| | | searchLabelWidth: 90, |
| | | border: true, |
| | | index: true, |
| | | selection: true, |
| | | reserveSelection:true, |
| | | reserveSelection: true, |
| | | dialogClickModal: false, |
| | | highlightCurrentRow: true, |
| | | column: [] |
| | |
| | | this.page.pageSize = this.referConfig.options.tableConfig.limit; |
| | | } |
| | | }, |
| | | computed:{ |
| | | valueInfo:function (){ |
| | | return this.text ? ("已设置的值为[" + this.text + "]"): '未设置值' |
| | | computed: { |
| | | valueInfo: function () { |
| | | return this.text ? ("已设置的值为[" + this.text + "]") : '未设置值' |
| | | } |
| | | }, |
| | | methods: { |
| | | escHandler(){ |
| | | escHandler() { |
| | | this.visible = false; |
| | | this.$refs.referDefalutCrud.refreshTable() |
| | | }, |
| | | dialogClose(){ |
| | | dialogClose() { |
| | | this.visible = false; |
| | | this.$refs.referDefalutCrud.refreshTable() |
| | | }, |
| | | getParams:function () { |
| | | getParams: function () { |
| | | var queryParams = {}; |
| | | if (this.options.extraParams) { |
| | | queryParams = this.options.extraParams; |
| | |
| | | queryParams['order'] = this.options.initSort.type;//方法 |
| | | queryParams['sort'] = this.options.initSort.field;//字段 |
| | | } |
| | | if(this.options.sortField){ |
| | | if (this.options.sortField) { |
| | | queryParams['sort'] = this.options.sortField;//字段 |
| | | } |
| | | if(this.options.sortType){ |
| | | if (this.options.sortType) { |
| | | queryParams['order'] = this.options.sortType;//方法 |
| | | } |
| | | if (this.options.conditionParams) { |
| | |
| | | sortable: true, |
| | | width: 150, |
| | | search: true, |
| | | formatter:function (d){ |
| | | formatter: function (d) { |
| | | return d.id || d.data.id |
| | | } |
| | | }, { |
| | |
| | | sortable: true, |
| | | width: 150, |
| | | search: true, |
| | | formatter:function (d){ |
| | | formatter: function (d) { |
| | | return d.name || d.data.name |
| | | } |
| | | }, { |
| | | prop: 'description', |
| | | label: '描述', |
| | | width: 250, |
| | | formatter:function (d){ |
| | | formatter: function (d) { |
| | | return d.description || d.data.description |
| | | } |
| | | }, { |
| | |
| | | width: 60, |
| | | hidden: (!this.controllerSecret), |
| | | hide: (!this.controllerSecret), |
| | | formatter:function (d){ |
| | | formatter: function (d) { |
| | | return d.secretGradeText || d.data.secretGradeText |
| | | } |
| | | }]; |
| | | } else { |
| | | this.option.column = this.options.tableConfig.cols.map(item => { |
| | | if (item.field != 'LAY_TABLE_INDEX' && item.field != 'LAY_CHECKED') { |
| | | let formatter=item.template || item.templet; |
| | | if(typeof formatter == "string" && formatter !=''){ |
| | | formatter=eval("(" + formatter + ")") |
| | | }else{ |
| | | formatter=function (d){ |
| | | if(d[item.field]!=undefined){ |
| | | let formatter = item.template || item.templet; |
| | | if (typeof formatter == "string" && formatter != '') { |
| | | formatter = eval("(" + formatter + ")") |
| | | } else { |
| | | formatter = function (d) { |
| | | if (d[item.field] != undefined) { |
| | | return d[item.field] |
| | | }else if(d.data[item.field] !=undefined){ |
| | | } else if (d.data[item.field] != undefined) { |
| | | return d.data[item.field] |
| | | }else { |
| | | } else { |
| | | return '' |
| | | } |
| | | } |
| | |
| | | ...item, |
| | | label: item.title, |
| | | prop: item.field, |
| | | formatter:formatter, |
| | | sortable:item.sort, |
| | | hide:item.hidden, |
| | | search:this.options.tableConfig.queryColumns.some(qItem=>{ |
| | | return qItem.field==item.field |
| | | formatter: formatter, |
| | | sortable: item.sort, |
| | | hide: item.hidden, |
| | | search: this.options.tableConfig.queryColumns.some(qItem => { |
| | | return qItem.field == item.field |
| | | }) |
| | | } |
| | | } |
| | |
| | | } |
| | | this.params = paramsData; |
| | | }, |
| | | setValue(){ |
| | | if(this.selectionList.length==0){ |
| | | this.$message.warning( '没有选择数据'); |
| | | setValue() { |
| | | if (this.selectionList.length == 0) { |
| | | this.$message.warning('没有选择数据'); |
| | | return false; |
| | | }else if(this.selectionList.length>1 && !this.isMuti){ |
| | | this.$message.warning( '每次只能选择一条数据'); |
| | | } else if (this.selectionList.length > 1 && !this.isMuti) { |
| | | this.$message.warning('每次只能选择一条数据'); |
| | | 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 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((_itemField,_indexField)=>{ |
| | | let itemValue=item[_itemField]; |
| | | if(itemValue==undefined || itemValue == null){ |
| | | itemValue=item['data'][_itemField] |
| | | valueFieldArray.forEach((_itemField, _indexField) => { |
| | | let itemValue = item[_itemField]; |
| | | if (itemValue == undefined || itemValue == null) { |
| | | itemValue = item['data'][_itemField] |
| | | } |
| | | value.push( itemValue + (_that.referConfig.valueSep?_that.referConfig.valueSep:' ')); |
| | | value.push(itemValue + (_that.referConfig.valueSep ? _that.referConfig.valueSep : ' ')); |
| | | }) |
| | | }else { |
| | | let itemValue=item[_that.props.value]; |
| | | if(itemValue==undefined || itemValue == null){ |
| | | itemValue=item['data'][_that.props.value] |
| | | } else { |
| | | let itemValue = item[_that.props.value]; |
| | | if (itemValue == undefined || itemValue == null) { |
| | | itemValue = item['data'][_that.props.value] |
| | | } |
| | | value.push(itemValue); |
| | | } |
| | | if(isMutiRaw) { |
| | | if (isMutiRaw) { |
| | | var rawFieldArray = _that.props.label.split(","); |
| | | rawFieldArray.forEach((_itemField,_indexField)=>{ |
| | | let itemText=item[_itemField]; |
| | | if(itemText==undefined || itemText == null){ |
| | | itemText=item['data'][_itemField] |
| | | rawFieldArray.forEach((_itemField, _indexField) => { |
| | | let itemText = item[_itemField]; |
| | | if (itemText == undefined || itemText == null) { |
| | | itemText = item['data'][_itemField] |
| | | } |
| | | text.push(itemText + (_that.referConfig.textSep?_that.referConfig.textSep:' ')) ; |
| | | text.push(itemText + (_that.referConfig.textSep ? _that.referConfig.textSep : ' ')); |
| | | }) |
| | | }else{ |
| | | let itemText=item[_that.props.label]; |
| | | if(itemText==undefined || itemText == null){ |
| | | itemText=item['data'][_that.props.label] |
| | | } else { |
| | | let itemText = item[_that.props.label]; |
| | | if (itemText == undefined || itemText == null) { |
| | | itemText = item['data'][_that.props.label] |
| | | } |
| | | text.push(itemText); |
| | | } |
| | | }) |
| | | |
| | | let mapFields =this.referConfig.fieldMap || {}; |
| | | let mapFields = this.referConfig.fieldMap || {}; |
| | | try { |
| | | if(!validatenull(this.options.mapFields)){ |
| | | mapFields =Object.assign(this.referConfig.fieldMap,JSON.parse(this.options.mapFields)) ; |
| | | if (!validatenull(this.options.mapFields)) { |
| | | mapFields = Object.assign(this.referConfig.fieldMap, JSON.parse(this.options.mapFields)); |
| | | } |
| | | }catch (e) { |
| | | } catch (e) { |
| | | |
| | | } |
| | | 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,fieldMap:mapFields}); |
| | | this.visible=false; |
| | | 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, |
| | | fieldMap: mapFields |
| | | }); |
| | | this.visible = false; |
| | | }, |
| | | searchReset() { |
| | | this.query = {}; |
| | |
| | | this.onLoad(this.page); |
| | | done(); |
| | | }, |
| | | currentChange(currentPage){ |
| | | currentChange(currentPage) { |
| | | this.page.currentPage = currentPage; |
| | | }, |
| | | sizeChange(pageSize){ |
| | | sizeChange(pageSize) { |
| | | this.page.pageSize = pageSize; |
| | | }, |
| | | rowClick (row) { |
| | | rowClick(row) { |
| | | this.$refs.referDefalutCrud.toggleSelection(); |
| | | this.$refs.referDefalutCrud.toggleRowSelection(row); //选中当前行 |
| | | this.selectionList=[row] |
| | | this.selectionList = [row] |
| | | }, |
| | | selectionChange(list) { |
| | | if (!this.isMuti && list.length > 1) { |
| | |
| | | refreshChange() { |
| | | this.onLoad(this.page, this.query); |
| | | }, |
| | | onLoad(page, params={}) { |
| | | if(this.url){ |
| | | onLoad(page, params = {}) { |
| | | if (this.url) { |
| | | this.loading = true; |
| | | var query={} |
| | | var query = {} |
| | | if (this.query) { |
| | | for (var key in this.query) { |
| | | query['conditionMap["' + key + '"]'] = this.query[key]; |
| | | } |
| | | } |
| | | getList(Object.assign(params,this.params,this.query, query),page.currentPage, page.pageSize, this.url, this.method).then(res => { |
| | | let data=[] |
| | | if(res.data.records){ |
| | | getList(Object.assign(params, this.params, this.query, query), page.currentPage, page.pageSize, this.url, this.method).then(res => { |
| | | let data = [] |
| | | if (res.data.records) { |
| | | data = res.data.records |
| | | this.page.total=res.data.total ; |
| | | }else{ |
| | | this.page.total = res.data.total; |
| | | } else { |
| | | data = res.data.data.records; |
| | | this.page.total=res.data.data.total; |
| | | this.page.total = res.data.data.total; |
| | | } |
| | | this.data=data.map(item => { |
| | | item.data=item.data || {} |
| | | this.data = data.map(item => { |
| | | item.data = item.data || {} |
| | | return { |
| | | ...item |
| | | } |
| | | }) |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | }).catch(error=>{ |
| | | }).catch(error => { |
| | | this.$message.error(error); |
| | | this.loading = false; |
| | | }); |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .valueInfo{ |
| | | .valueInfo { |
| | | float: left; |
| | | border: 1px solid #E9E7E7; |
| | | display: inline-block; |