ludc
2023-06-13 729db9dd93f8884a8f1f0b32a4462708f858ea9b
Source/UBCS-WEB/src/components/refer/vciWebReferDefalut.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,289 @@
<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>