<!--分类参照，左树右列表-->
|
<template>
|
<div>
|
<el-dialog
|
v-dialogDrag
|
:title="title"
|
:visible.sync="visible"
|
:width="onlyTable?'60%': '80%'"
|
:append-to-body="true"
|
class="avue-dialog avue-dialog--top"
|
@close="dialogClose"
|
>
|
<el-container :style="{ 'height': height || '60vh' }">
|
<el-aside width="300px" v-if="!onlyTable && classifys.length>0">
|
<el-tabs type="border-card" style="height: 100%" @tab-click="tabClick"
|
v-model="tabName">
|
<el-tab-pane
|
v-for="(treeItem, index) in classifys"
|
:key="index"
|
:label="treeItem.title"
|
:name="'tab'+index"
|
>
|
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
</el-input>
|
|
<el-tree
|
class="filter-tree"
|
:data="treeItem.treeData"
|
:lazy="lazy"
|
:load="treeLoad"
|
:props="treeProps"
|
:filter-node-method="filterNode"
|
@node-click="nodeClick"
|
:ref="'tree'+index"
|
>
|
</el-tree>
|
</el-tab-pane>
|
</el-tabs>
|
</el-aside>
|
<el-main style="padding: 0 0 0 20px">
|
<avue-crud
|
ref="referCrud"
|
v-model="formValue"
|
: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"
|
>
|
<template slot="icon" slot-scope="scope">
|
<i :class="scope.row.icon" style="font-size: 24px"></i>
|
</template>
|
</avue-crud>
|
</el-main>
|
</el-container>
|
<div class="avue-dialog__footer">
|
<div class="avue-dialog__footer--left valueInfo">{{ valueInfo }}</div>
|
<el-button @click="escHandler">取 消</el-button>
|
<el-button @click="clearValue">清 空</el-button>
|
<el-button type="primary" @click="setValue">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<el-input v-if="options.edit" class="w100" :clearable="true" v-model="textD" :disabled="disabled" :placeholder="placeholder" type="text" @change="changeValue" @clear="clearValue">
|
<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="handleFocus"></i>
|
</el-input>
|
<el-input v-else class="w100" :clearable="true" v-model="textD" :disabled="disabled" :placeholder="placeholder" :readonly="true" type="text"
|
@focus="handleFocus" @clear="clearValue"></el-input>
|
</div>
|
</template>
|
|
<script>
|
import { verifyNull } from "@/util/validate";
|
import { getTree, getLazyTree } from "@/api/refer/tree";
|
import { getList } from "@/api/refer/table";
|
|
export default {
|
name: "vciWebReferClassify",
|
props: {
|
referConfig: {
|
type: Object,
|
},
|
value: {
|
type: String,
|
default: "",
|
},
|
text: {
|
type: String,
|
default: "",
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
title: {
|
type: String,
|
default: "",
|
},
|
referType: {
|
type: String,
|
default: "",
|
},
|
width: {
|
type: String,
|
default:'80%'
|
},
|
height: {
|
type: String,
|
default:'500px'
|
},
|
reloadFormKey: {
|
type: String,
|
default: '',
|
}
|
},
|
data() {
|
return {
|
reloadData:this.referConfig.options.reloadData || false,
|
visible: false,
|
options: this.referConfig.options || {},
|
onlyTable: this.referConfig.options.onlyTable || false,
|
textD: this.text || '',
|
valueD: this.value || '',
|
formValue:{},
|
classifys:[],
|
isMuti:
|
"true" == this.referConfig.options.isMuti ||
|
this.referConfig.options.isMuti == true ||
|
this.referConfig.options.muti == true
|
? true
|
: false,
|
treeProps: {
|
label: "label",
|
value: "value",
|
children: "children",
|
},
|
props: {
|
value: this.referConfig.valueField || this.referConfig.options.valueField || 'id',
|
label: this.referConfig.textField || this.referConfig.options.textField || "name"
|
},
|
tabName:'tab0',
|
currentTreeIndex: 0,
|
filterText:'',
|
currentNode: {},
|
params: {},
|
lazy: this.referConfig.options.loadType == 'node',
|
loadType: { all: "all", node: "node" },
|
url: this.referConfig.options.url || "referGrid",
|
query: {},
|
loading: false,
|
page: {
|
layout: "sizes,prev,pager,next,jumper,total",
|
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,
|
calcHeight: 30,
|
tip: false,
|
menu: false,
|
searchShow: true,
|
searchMenuSpan: 6,
|
searchLabelWidth: 90,
|
border: true,
|
index: true,
|
selection: true,
|
reserveSelection: true,
|
dialogClickModal: false,
|
highlightCurrentRow: true,
|
rowKey: "id",
|
rowParentKey: "parentId",
|
column: [],
|
},
|
};
|
},
|
created() {
|
this.options.classifys.forEach(item => {
|
return {
|
...item,
|
filterText: "1",
|
treeData:item.treeData || []
|
};
|
});
|
this.classifys =this.options.classifys;
|
|
this.formValue[this.props.value]=this.valueD;
|
this.formValue[this.props.label]=this.textD;
|
this.getParams();
|
},
|
mounted() {
|
this.classifys.forEach((item,index) => {
|
this.getTree(index);
|
});
|
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 (!verifyNull(this.referConfig.options.limit)) {
|
this.page.pageSize = this.referConfig.options.limit;
|
} else if (
|
this.referConfig.options.tableConfig &&
|
!verifyNull(this.referConfig.options.tableConfig.limit)
|
) {
|
this.page.pageSize = this.referConfig.options.tableConfig.limit;
|
}
|
this.$nextTick(() => {
|
if (this.visible) {
|
this.$refs.referCrud.doLayout();
|
}
|
});
|
},
|
watch: {
|
text:{
|
handler(val) {
|
this.textD=val;
|
}
|
},
|
value:{
|
handler(val) {
|
this.valueD=val;
|
}
|
},
|
filterText(val) {
|
this.classifys[this.currentTreeIndex].filterText=val;
|
this.$refs['tree'+this.currentTreeIndex][0].filter(val);
|
},
|
reloadFormKey:{
|
handler(val) {
|
if(val != this.params[(this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey)]){
|
this.params[(this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey)] = val;
|
this.clearValue();
|
this.onLoad(this.page);
|
}
|
},
|
}
|
},
|
computed: {
|
valueInfo: function () {
|
return this.text ? "已设置的值为[" + this.text + "]" : "未设置值";
|
},
|
placeholder: function () {
|
return this.options.placeholder ? this.options.placeholder : this.title;
|
}
|
},
|
methods: {
|
escHandler() {
|
this.visible = false;
|
this.$refs.referCrud.refreshTable();
|
},
|
dialogClose() {
|
this.visible = false;
|
this.$refs.referCrud.refreshTable();
|
},
|
tabClick:function (tab){
|
this.currentTreeIndex= tab.index;
|
this.filterText=this.classifys[tab.index].filterText;
|
},
|
handleFocus() {
|
if (!this.disabled) {
|
this.visible = true;
|
}
|
},
|
getTreeParams: function (treeIndex) {
|
var queryParams = {};
|
if (this.classifys[treeIndex].treeParams) {
|
queryParams = this.classifys[treeIndex].treeParams;
|
}
|
queryParams["referBusCode"] = this.classifys[treeIndex]["referBusCode"];
|
/*if (this.classifys[treeIndex].useFormKey && this.options.formValues) {
|
//使用表单上的字段来过滤
|
queryParams[this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey] = this.options.formValues[this.options.useFormKey];
|
}*/
|
if (this.classifys[treeIndex].rootParams) {
|
for (let key in this.classifys[treeIndex].rootParams) {
|
queryParams[key] = this.classifys[treeIndex].rootParams[key];
|
}
|
}
|
this.classifys[treeIndex].treeParams = queryParams;
|
},
|
getParams: function () {
|
var queryParams = {};
|
if (this.options.extraParams) {
|
queryParams = this.options.extraParams;
|
}
|
if (this.options.useFormKey && this.options.formValues) {
|
//使用表单上的字段来过滤
|
queryParams[ (this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey)] = this.options.formValues[this.options.useFormKey];
|
}
|
queryParams['referBusCode'] = this.options['referBusCode'];
|
var tableConfig = this.options.tableConfig;
|
if (!tableConfig) {
|
this.$message.error('没有定义参照的表格配置');
|
}
|
if (this.options.tableConfig && this.options.tableConfig.cols && this.options.tableConfig.cols.length > 0) {
|
//说明传递了的
|
this.option.column = this.options.tableConfig.cols.map(item => {
|
let formatter = item.formatter;
|
if (typeof formatter == "string" && formatter != '') {
|
formatter = eval("(" + formatter + ")");
|
}
|
return {
|
...item,
|
formatter: formatter
|
};
|
});
|
}
|
this.params = queryParams;
|
},
|
changeValue(val){
|
if(this.options.edit){
|
let mapFields = this.referConfig.propMap || {};
|
try {
|
if (this.options.propMap) {
|
mapFields = Object.assign(mapFields,this.options.propMap);
|
}
|
if (this.options.mapProps) {
|
mapFields = Object.assign(mapFields,this.options.mapProps);
|
}
|
} catch (e) {
|
;
|
}
|
this.$emit("setReferValue", {
|
prop: this.referConfig.prop,
|
showProp: this.referConfig.showProp,
|
value: '',
|
text: val,
|
rawData: [],
|
propMap: mapFields
|
});
|
}
|
},
|
clearValue(){
|
this.valueD = '';
|
this.textD = '';
|
let mapFields = this.referConfig.propMap || {};
|
try {
|
if (this.options.propMap) {
|
mapFields = Object.assign(mapFields,this.options.propMap);
|
}
|
if (this.options.mapProps) {
|
mapFields = Object.assign(mapFields,this.options.mapProps);
|
}
|
} catch (e) {
|
;
|
}
|
this.$emit("setReferValue", {
|
prop: this.referConfig.prop,
|
showProp: this.referConfig.showProp,
|
value: this.valueD,
|
text: this.textD,
|
rawData: [],
|
propMap: mapFields
|
});
|
this.visible = false;
|
},
|
setValue() {
|
if (this.selectionList.length == 0) {
|
this.$message.warning('没有选择数据');
|
return false;
|
} else if (this.selectionList.length > 1 && !this.isMuti) {
|
this.$message.warning('每次只能选择一条数据');
|
return false;
|
}
|
|
let value = [];
|
let text = [];
|
let isMutiValue = (this.props.value.indexOf(",") > -1);
|
let isMutiRaw = (this.props.label.indexOf(",") > -1);
|
var _that = this;
|
this.selectionList.forEach((item) => {
|
if (isMutiValue) {
|
var valueFieldArray = _that.props.value.split(",");
|
valueFieldArray.forEach((_itemField) => {
|
let itemValue = item[_itemField];
|
if (verifyNull(itemValue) && item['extendData']) {
|
itemValue = item['extendData'][_itemField];
|
}
|
value.push(itemValue + (_that.referConfig.valueSep ? _that.referConfig.valueSep : ' '));
|
});
|
} else {
|
let itemValue = item[_that.props.value];
|
if (verifyNull(itemValue) && item['extendData']) {
|
itemValue = item['extendData'][_that.props.value];
|
}
|
value.push(itemValue);
|
}
|
if (isMutiRaw) {
|
var rawFieldArray = _that.props.label.split(",");
|
rawFieldArray.forEach((_itemField) => {
|
let itemText = item[_itemField];
|
if (verifyNull(itemText) && item['extendData']) {
|
itemText = item['extendData'][_itemField];
|
}
|
text.push(itemText + (_that.referConfig.textSep ? _that.referConfig.textSep : ' '));
|
});
|
} else {
|
let itemText = item[_that.props.label];
|
if (verifyNull(itemText) && item['extendData']) {
|
itemText = item['extendData'][_that.props.label];
|
}
|
text.push(itemText);
|
}
|
});
|
let mapFields = this.referConfig.propMap || {};
|
try {
|
if (this.options.propMap) {
|
mapFields = Object.assign(mapFields,this.options.propMap);
|
}
|
if (this.options.mapProps) {
|
mapFields = Object.assign(mapFields,this.options.mapProps);
|
}
|
} catch (e) {
|
;
|
}
|
this.valueD = value.join(',');
|
this.textD = text.join(',');
|
this.$emit("setReferValue", {
|
prop: this.referConfig.prop,
|
showProp: this.referConfig.showProp,
|
value: this.valueD,
|
text: this.textD,
|
rawData: this.selectionList,
|
propMap: 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.referCrud.toggleSelection();
|
this.$refs.referCrud.toggleRowSelection(row); //选中当前行
|
this.selectionList = [row];
|
},
|
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 = {}) {
|
if (this.url) {
|
this.loading = true;
|
getList(
|
Object.assign(params, this.params, this.query),
|
page.currentPage,
|
page.pageSize,
|
this.url
|
)
|
.then((res) => {
|
let data = [];
|
if (res.data && res.data.data) {
|
data = res.data.data;
|
this.page.total = res.data.total;
|
} else {
|
data = res.data;
|
this.page.total = res.total;
|
}
|
if(!data || data == null){
|
data = [];
|
}
|
this.data = data;
|
this.loading = false;
|
this.selectionClear();
|
})
|
.catch((error) => {
|
this.$message.error(error);
|
this.loading = false;
|
});
|
}
|
},
|
getTree(treeIndex) {
|
this.getTreeParams(treeIndex);
|
//加载全部
|
getTree(this.classifys[treeIndex].treeParams, this.classifys[treeIndex].treeUrl).then((res) => {
|
this.classifys[treeIndex].treeData = this.initTreeData(res.data);
|
});
|
},
|
treeLoad: function (treeNode, resolve) {
|
//逐级加载
|
const parentId = treeNode.level === 0 ? 0 : treeNode.data.attributes.id;
|
this.classifys[this.currentTreeIndex].treeParams.parentId = parentId;
|
this.classifys[this.currentTreeIndex].treeParams.parentValue = parentId;
|
|
if (this.options.rootParams && treeNode.level !== 0) {
|
for (var key in this.options.rootParams) {
|
delete this.classifys[this.currentTreeIndex].treeParams[key];
|
}
|
}
|
getLazyTree(this.classifys[this.currentTreeIndex].treeParams, this.classifys[this.currentTreeIndex].treeUrl).then((res) => {
|
resolve(this.initTreeData(res.data));
|
});
|
},
|
initTreeData: function (nodes) {
|
let treeData = [];
|
nodes.forEach((item) => {
|
let children = item.children;
|
if (children) {
|
children = this.initTreeData(children);
|
}
|
treeData.push({
|
label: item[this.props.label],
|
value: item[this.props.value],
|
leaf: !item.children,
|
children: children,
|
attributes: item,
|
});
|
});
|
return treeData;
|
},
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.label.indexOf(value) !== -1;
|
},
|
nodeClick(data) {
|
let where = {};
|
let classifyValueField = this.classifys[this.currentTreeIndex].classifyValueField?this.classifys[this.currentTreeIndex].classifyValueField:'id';
|
where[this.classifys[this.currentTreeIndex].queryField] = data.attributes[classifyValueField];
|
this.url = this.classifys[this.currentTreeIndex].queryByClassifyUrl || this.options.url;
|
this.page.currentPage=1;
|
this.onLoad(this.page, where);
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.valueInfo {
|
float: left;
|
border: 1px solid #e9e7e7;
|
display: inline-block;
|
vertical-align: middle;
|
padding: 6px 15px;
|
line-height: 1;
|
}
|
</style>
|
