<template>
|
<div>
|
<el-dialog v-dialogDrag
|
:height="options.height|| 'auto'" :title="title"
|
:visible.sync="visible"
|
:width="options.width|| '80%'"
|
append-to-body="true"
|
class="avue-dialog avue-dialog--top"
|
top="0"
|
@close="dialogClose">
|
<avue-crud ref="referDefalutCrud"
|
v-model="value"
|
:data="data"
|
:option="option"
|
:page.sync="page"
|
:table-loading="loading"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@row-click="rowClick"
|
@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="escHandler">取 消</el-button>
|
<el-button type="primary" @click="setValue">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<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";
|
|
export default {
|
name: "vciWebReferDefalut",
|
props: ["referConfig", "value", "text", "title", "disabled", "referType"],
|
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',
|
method: this.referConfig.options.method || 'GET',
|
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
|
},
|
data: this.referConfig.options.data || [],
|
selectionList: [],
|
option: {
|
addBtn: false,
|
columnBtn: 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,
|
reserveSelection: true,
|
dialogClickModal: false,
|
highlightCurrentRow: true,
|
column: []
|
}
|
};
|
},
|
created() {
|
this.getParams();
|
},
|
mounted() {
|
if (this.referConfig.options.tableConfig && this.referConfig.options.tableConfig.page) {
|
this.page.pageSize = this.referConfig.options.tableConfig.page.limit || this.referConfig.options.tableConfig.page.pageSize;
|
this.page.currentPage = this.referConfig.options.tableConfig.page.page || this.referConfig.options.tableConfig.page.currentPage;
|
} else if (!validatenull(this.referConfig.options.limit)) {
|
this.page.pageSize = this.referConfig.options.limit;
|
} else if (this.referConfig.options.tableConfig && !validatenull(this.referConfig.options.tableConfig.limit)) {
|
this.page.pageSize = this.referConfig.options.tableConfig.limit;
|
}
|
},
|
computed: {
|
valueInfo: function () {
|
return this.text ? ("已设置的值为[" + this.text + "]") : '未设置值'
|
}
|
},
|
methods: {
|
escHandler() {
|
this.visible = false;
|
this.$refs.referDefalutCrud.refreshTable()
|
},
|
dialogClose() {
|
this.visible = false;
|
this.$refs.referDefalutCrud.refreshTable()
|
},
|
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.initSort) {
|
queryParams['order'] = this.options.initSort.type;//方法
|
queryParams['sort'] = this.options.initSort.field;//字段
|
}
|
if (this.options.sortField) {
|
queryParams['sort'] = this.options.sortField;//字段
|
}
|
if (this.options.sortType) {
|
queryParams['order'] = this.options.sortType;//方法
|
}
|
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: '英文名称',
|
sortable: true,
|
width: 150,
|
search: true,
|
formatter: function (d) {
|
return d.id || d.data.id
|
}
|
}, {
|
prop: 'name',
|
label: '中文名称',
|
sortable: true,
|
width: 150,
|
search: true,
|
formatter: function (d) {
|
return d.name || d.data.name
|
}
|
}, {
|
prop: 'description',
|
label: '描述',
|
width: 250,
|
formatter: function (d) {
|
return d.description || d.data.description
|
}
|
}, {
|
prop: 'secretGradeText',
|
label: '密级',
|
width: 60,
|
hidden: (!this.controllerSecret),
|
hide: (!this.controllerSecret),
|
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) {
|
return d[item.field]
|
} else if (d.data[item.field] != undefined) {
|
return d.data[item.field]
|
} else {
|
return ''
|
}
|
}
|
}
|
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
|
})
|
}
|
}
|
})
|
}
|
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.warning('没有选择数据');
|
return false;
|
} 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 valueFieldArray = _that.props.value.split(",");
|
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 : ' '));
|
})
|
} else {
|
let itemValue = item[_that.props.value];
|
if (itemValue == undefined || itemValue == null) {
|
itemValue = item['data'][_that.props.value]
|
}
|
value.push(itemValue);
|
}
|
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]
|
}
|
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]
|
}
|
text.push(itemText);
|
}
|
})
|
|
let mapFields = this.referConfig.fieldMap || {};
|
try {
|
if (!validatenull(this.options.mapFields)) {
|
mapFields = Object.assign(this.referConfig.fieldMap, JSON.parse(this.options.mapFields));
|
}
|
} 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;
|
},
|
searchReset() {
|
this.query = {};
|
this.onLoad(this.page);
|
},
|
searchChange(params, done) {
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page);
|
done();
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
rowClick(row) {
|
this.$refs.referDefalutCrud.toggleSelection();
|
this.$refs.referDefalutCrud.toggleRowSelection(row); //选中当前行
|
this.selectionList = [row]
|
},
|
selectionChange(list) {
|
if (!this.isMuti && list.length > 1) {
|
const nowVal = list.shift();
|
this.$refs.referDefalutCrud.toggleRowSelection(nowVal, false);
|
}
|
this.selectionList = list
|
},
|
selectionClear() {
|
this.selectionList = [];
|
this.$refs.referDefalutCrud.toggleSelection();
|
},
|
refreshChange() {
|
this.onLoad(this.page, this.query);
|
},
|
onLoad(page, params = {}) {
|
if (this.url) {
|
this.loading = true;
|
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) {
|
data = res.data.records
|
this.page.total = res.data.total;
|
} else {
|
data = res.data.data.records;
|
this.page.total = res.data.data.total;
|
}
|
this.data = data.map(item => {
|
item.data = item.data || {}
|
return {
|
...item
|
}
|
})
|
this.loading = false;
|
this.selectionClear();
|
}).catch(error => {
|
this.$message.error(error);
|
this.loading = false;
|
});
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.valueInfo {
|
float: left;
|
border: 1px solid #E9E7E7;
|
display: inline-block;
|
vertical-align: middle;
|
padding: 9px 15px;
|
line-height: 1;
|
}
|
</style>
|
