<template>
|
<div>
|
<el-dialog :title="title"
|
v-dialogDrag append-to-body="true"
|
:visible.sync="visible"
|
top="0"
|
class="avue-dialog avue-dialog--top"
|
:width="options.width|| '80%'">
|
<avue-crud :option="option"
|
:table-loading="loading"
|
:data="data"
|
:page.sync="page"
|
v-model="value"
|
ref="referCrud"
|
@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>
|
<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" :disabled="disabled" :placeholder="title" @click="!disabled && (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: "vciWebReferTable",
|
props:["referConfig","value","text","title","disabled"],
|
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: this.referConfig.options.data?this.referConfig.options.data.length :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,
|
reserveSelection:true,
|
dialogClickModal: false,
|
highlightCurrentRow: true,
|
rowKey:'oid',
|
rowParentKey:'parentSaleProduct',
|
column: []
|
}
|
};
|
},
|
created() {
|
this.getParams();
|
|
// console.log('referConfig:')
|
// console.log(this.referConfig)
|
},
|
mounted() {
|
console.log('referrTable')
|
if(this.referConfig.options.page){
|
this.page.pageSize=this.referConfig.options.page.limit || this.referConfig.options.page.pageSize;
|
this.page.currentPage=this.referConfig.options.page.page || this.referConfig.options.page.currentPage;
|
}
|
this.$nextTick(() => {
|
this.$refs.referCrud.doLayout()
|
})
|
},
|
|
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.displayTable){
|
//说明是使用平台的表格
|
getTableDefinedUrl({btmType:(this.options.referBo||this.options.referType),code:this.options.displayTable,isMuti:this.isMuti},this.tableDefinedUrl).then(result => {
|
console.log('result',result)
|
if(result.success){
|
var queryScheme = result.querySchema;
|
if(!validatenull(queryScheme) && validatenull(this.options.queryScheme)){
|
this.options.queryScheme = queryScheme;
|
}
|
paramsData['queryScheme'] = this.options.queryScheme;
|
if(result.showIndex){
|
this.option.index = true;
|
}
|
if(result.showCheckbox){
|
this.option.selection = true
|
}
|
var referColumn = "";
|
if(result.columns){
|
this.option.column= result.columns.map(item => {
|
if(item.field.indexOf(".")>-1){
|
referColumn += item.field + ",";
|
item.field = item.field.replace(".","_");
|
}
|
if(!validatenull(item.enumCode)) {
|
//是枚举的内容
|
item.type = 'select';
|
item.dicUrl = "/api/ubcs-omd/enum/dictionary?code=" + item.enumCode;
|
item.dicData = item.enumMap;
|
item.dataType = "String";
|
item.search = true;
|
item.props = {
|
label: "itemName",
|
value: "itemValue"
|
};
|
item.rules = [{
|
required: true,
|
message: "请输入" + item.field,
|
trigger: "blur"
|
}];
|
item.formatter=function(d){
|
return d.field || d.data.field
|
};
|
}
|
return {
|
...item,
|
label: item.title,
|
prop: item.field,
|
search: true
|
}
|
})
|
}
|
paramsData['referColumn'] = referColumn;
|
if(result.limit>0){
|
this.page.pageSize = result.limit;
|
this.page.currentPage=1
|
}
|
if(this.options.isTreeGrid){
|
//表格树加上配置
|
}
|
this.params=paramsData;
|
}else{
|
this.$message.error(result.msg);
|
}
|
|
});
|
}else{
|
//说明是自定义的表格
|
var tableConfig = this.options.tableConfig;
|
if(!tableConfig){
|
this.$message.error( '没有定义参照的表格配置');
|
}
|
this.page.pageSize=tableConfig.page.limit || 10;
|
if(!paramsData){
|
paramsData = {
|
currentUserReferModelKey:this.options.currentUserReferModelKey,
|
currentUserReferMethodKey:this.options.currentUserReferMethodKey
|
};
|
}else{
|
paramsData['currentUserReferModelKey'] = this.options.currentUserReferModelKey;
|
paramsData['currentUserReferMethodKey'] = this.options.currentUserReferMethodKey;
|
}
|
if(this.options.tableConfig && this.options.tableConfig.cols && this.options.tableConfig.cols.length>0) {
|
//说明传递了的
|
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,
|
search: this.options.tableConfig.queryColumns.some(qItem=>{
|
return qItem.field==item.field
|
})
|
}
|
}
|
})
|
}
|
if(this.options.isTreeGrid){
|
//表格树加上配置
|
}
|
}
|
this.params=paramsData;
|
},
|
setValue(){
|
console.log('确定')
|
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,_indexFiel)=>{
|
value.push( (item[_itemField] || item['data'][_itemField]) + (_that.referConfig.valueSep?_that.referConfig.valueSep:' '));
|
})
|
}else {
|
value.push(item[_that.props.value] || item['data'][_that.props.value]);
|
}
|
if(isMutiRaw) {
|
var rawFieldArray = _that.props.label.split(",");
|
rawFieldArray.forEach((_itemField,_indexField)=>{
|
text.push((item[_itemField] || item['data'][_itemField]) + (_that.referConfig.textSep?_that.referConfig.textSep:' ')) ;
|
})
|
}else{
|
text.push(item[_that.props.label] || item['data'][_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,fieldMap:this.referConfig.fieldMap});
|
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;
|
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).then(res => {
|
if(res.data.records){
|
this.data = res.data.records
|
this.page.total=res.data.total ;
|
}else{
|
this.data = res.data.data.records;
|
this.page.total=res.data.data.total;
|
}
|
this.data=this.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>
|
