Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue

@@ -13,17 +13,50 @@
               @size-change="sizeChange"
               @row-click="rowClickChange"
               @search-change='searchChange'
               @filter="filterChange"
               @selection-change="selectChange">
      <!--top区域按钮-->
      <template slot="menuLeft" slot-scope="scope">
        <dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="selectList" LocationType="top" :sourceData="sourceData"
        <dynamic-button :componentVO="componentVO"
                        :key="areasName+'buttons-'+componentVO.oid"
                        :butttonList="componentVO.buttons" :dataStore="selectList" LocationType="top" :sourceData="sourceData"
                        @afterMethod="handleRefresh"
                        type="table"></dynamic-button>
      </template>

      <!--menu区域按钮-->
      <template slot="menu" slot-scope="scope">
        <dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :scope="scope" :dataStore="selectList" :sourceData="sourceData" LocationType="menu"
        <dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :scope="scope" :dataStore="selectList" :sourceData="sourceData"
                        LocationType="menu"
                        @afterMethod="handleRefresh"
                        @rowView="rowView"
                        type="table"></dynamic-button>
      </template>
      <template  slot="menuRight" slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="打印" placement="top">
          <el-button icon="el-icon-printer" circle @click="$refs.dataTable.rowPrint()"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出" placement="top">
          <el-button icon="el-icon-download" circle @click="rowExcel"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="筛选" placement="top">
          <el-button icon="el-icon-tickets" circle  @click="$refs.dataTable.$refs.dialogFilter.box=!0"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="列显隐" placement="top">
          <el-button icon="el-icon-s-operation" circle @click="$refs.dataTable.$refs.dialogColumn.columnBox=!0"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="查询" placement="top">
          <el-button icon="el-icon-search" circle @click="$refs.dataTable.$refs.headerSearch.handleSearchShow()"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button icon="el-icon-refresh" circle @click="$refs.dataTable.refreshChange()"
                     :size="scope.size"></el-button>
        </el-tooltip>
      </template>
    </avue-crud>
  </div>
@@ -51,6 +84,11 @@
    inDialog: {
      type: Boolean,
      default: false
    },
    canEdit:{
      //内容是否可编辑
      type:Boolean,
      default:false
    },
    areasName: {
      type: String,
@@ -85,6 +123,7 @@
  },
  data() {
    return {
      currentDefineVO:this.componentVO.uiComponentType=='table'?this.componentVO.tableDefineVO:this.componentVO.treeTableDefineVO,
      parentHeight: '100%',//当前组件根节点元素高度
      form: {},
      query:{},
@@ -108,12 +147,19 @@
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn:false,
        columnBtn:false,
        searchShowBtn:false,
        printBtn:false,
        excelBtn:false,
        filterBtn:false,
        selection: true,
        tip: false,
        menuWidth:260,
        height: '100%',
        calcHeight: 15,
        indexFixed: false,
        menuFixed: false,
        menuFixed: this.areasName === 'westArea' ? false : 'right',
        searchMenuSpan:12,
        searchShow:false,
        column: [],
@@ -154,6 +200,7 @@
    },
    isShow: {
      handler(newval) {
        debugger;
        if (newval && this.$el.clientHeight > 50) {
          this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5;
        }
@@ -162,6 +209,20 @@
        }
      }
    },
    tableList:{
      handler(newval) {
        if(newval) {
          this.$emit("setData", {
            area: this.areasName,
            type:this.componentVO.uiComponentType,
            currentDefineVO:this.currentDefineVO,
            data:newval
          });
        }
      },
      deep: true,
      immediate: true
    },
    'sourceData':{
      handler(newval) {
        if(newval) {
@@ -169,31 +230,38 @@
          this.getParams();
          this.handleRefresh();
        }
      }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getParams();
    this.option.column = this.updatedColumns();
    if (this.componentVO.uiComponentType == 'TreeTable') {
      //树表
      this.option.rowKey = this.currentDefineVO.treeCurrentField || 'oid';
      this.option.rowParentKey = this.currentDefineVO.treeParentField || 'parentOid'
    }
    this.page = {
      pageSize: this.componentVO.tableDefineVO.pageVO ? this.componentVO.tableDefineVO.pageVO.limit : 10,
      currentPage: this.componentVO.tableDefineVO.pageVO? this.componentVO.tableDefineVO.pageVO.page :1,
      pageSize: this.currentDefineVO.pageVO ? this.currentDefineVO.pageVO.limit : 10,
      currentPage: this.currentDefineVO.pageVO ? this.currentDefineVO.pageVO.page : 1,
      total: 0,
      pageSizes:this.componentVO.tableDefineVO.limits || [10, 20, 30, 40, 50, 100]
      pageSizes: this.currentDefineVO.limits || [10, 20, 30, 40, 50, 100]
    };
  },
  mounted() {
    if (this.$el.clientHeight > 50) {
      //父元素高度-按钮高度-分页高度
      this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5;
      this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - 57 -5;
    }
  },
  methods: {
    updatedColumns: function () {
      const queryFields = !validatenull(this.componentVO.tableDefineVO.queryColumns) ? this.componentVO.tableDefineVO.queryColumns.map(item => item.field) : [];
      return this.componentVO.tableDefineVO.cols[0].map(item => {
      const queryFields = !validatenull(this.currentDefineVO.queryColumns) ? this.currentDefineVO.queryColumns.map(item => item.field) : [];
      return this.currentDefineVO.cols[0].map(item => {
        const search = queryFields.includes(item.field); // 判断 field 是否在 queryColumns 里
        if (this.componentVO.tableDefineVO.btmType == 'fileobject' && item.field == 'name') {
        if (this.currentDefineVO.btmType == 'fileobject' && item.field == 'name') {
          //是文件
          item.formatter = function (d) {
            return '<a class="layui-btn layui-btn-intable"  lay-event="PREVIEW">' + d.name + '</a>'
@@ -224,41 +292,41 @@
          sourceDataMap.sourceOid = this.sourceData.oid;
        }
        for (let i in this.sourceData) {
          let item = this.sourceData[i]
          if (item && item.constructor === Object) return;
          if (i == 'type' || i == 'context' || i == 'content') return;
          const item = this.sourceData[i]
          if (item && item.constructor === Object) continue;
          if (i == 'type' || i == 'context' || i == 'content') continue;
          sourceDataMap['sourceData["' + i + '"]'] = item
        }
      }

      if (Object.keys(this.paramVOS).length>0) {
        for (let j in this.paramVOS) {
          if (this.paramVOS[j] && this.paramVOS[j].constructor === Object) continue;
          if (j == 'type' || j == 'context' || j == 'content' || j == "getdataurl" || j == "getdatamethod" || j == "url" || j == "method" || j == "uploadfileurl" || j == "title") continue;
          sourceDataMap['sourceData["' + j + '"]'] = this.paramVOS[j]
        }
      }
      return sourceDataMap;
    },
    getParams: function () {
      const tableParams = {
        btmname: this.componentVO.tableDefineVO.btmType,
        btmType:this.componentVO.tableDefineVO.btmType,
        tableDefineId: this.componentVO.tableDefineVO.id,
        btmname: this.currentDefineVO.btmType,
        btmType:this.currentDefineVO.btmType,
        tableDefineId: this.currentDefineVO.id,
        componentOid: this.componentVO.oid,
        uiDefineId: this.uiContext,
        linkTypeFlag: this.componentVO.tableDefineVO.linkTypeFlag
        linkTypeFlag: this.currentDefineVO.linkTypeFlag,
        treeTableFlag:this.componentVO.uiComponentType == 'TreeTable'
      };

      const sourceDataMapList = this.sourceDataMapParams;

      if (this.paramVOS) {
        for (let i in this.paramVOS) {
          let item = this.paramVOS[i]
          if (item && item.constructor === Object) return;
          if (i == 'type' || i == 'context' || i == 'content') return;
          sourceDataMapList['sourceData["' + i + '"]'] = item
        }
      }
      this.params = Object.assign({},tableParams, sourceDataMapList);
    },
    onLoad(page, params = {}) {
      if (Object.keys(this.sourceData).length>0 && this.isShow) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params,this.params,this.query)).then(res => {
        getList(page.currentPage, page.pageSize, Object.assign({},this.params,this.query,params)).then(res => {
          let data = [];
          if (res.data && res.data.data) {
            data = res.data.data;
@@ -279,6 +347,9 @@
        });
      }
    },
    rowView(row,index){
      this.$refs.dataTable.rowView(row,index)
    },
    rowClickChange(row){
      this.$refs.dataTable.toggleRowSelection(row);
    },
@@ -287,7 +358,7 @@
      this.$emit("setDataStore", {
        area: this.areasName,
        type:this.componentVO.uiComponentType,
        btmType:this.componentVO.tableDefineVO.btmType,
        btmType:this.currentDefineVO.btmType,
        dataStore:row
      });
    },
@@ -298,10 +369,33 @@
      this.page.pageSize = pageSize;
    },
    searchChange(params,done){
      this.query = params;
      this.query = {};
      for (let i in params) {
        this.query['conditionMap["' + i + '"]'] = "*" + params[i] + "*";
      }
      this.page.currentPage = 1;
      this.onLoad(this.page);
      done();
    },
    filterChange(result){
      let parms={}
      for (let i in result) {
        if(!validatenull(result[i][2])) {
          const fieldVal = result[i][2]
          if (result[i][1] == "=") {
            parms['conditionMap["' + result[i][0] + '"]'] = fieldVal;
          } else if (result[i][1] == "≠") {
            parms['conditionMap["' + result[i][0] + '"]'] = '!=' + fieldVal;
          } else if (result[i][1] == "like") {
            parms['conditionMap["' + result[i][0] + '"]'] = "*" + fieldVal + "*";
          } else if (result[i][1] == "∈") {
            parms['conditionMap["' + result[i][0] + '"]'] = "*" + fieldVal + "*";
          } else {
            parms['conditionMap["' + result[i][0] + '"]'] = result[i][1] + fieldVal;
          }
        }
      }
      this.onLoad(this.page,parms);
    },
    searchReset() {
      this.query = {};
@@ -309,10 +403,24 @@
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.dataTable.toggleSelection();
      try {
        this.$refs.dataTable.toggleSelection();
      }catch (e) {

      }
    },
    handleRefresh() {
      this.onLoad(this.page, this.query);
    handleRefresh(type) {
      this.onLoad(this.page);
    },
    rowExcel() {
      //导出
      this.$refs.dataTable.$refs.dialogExcel.handleShow();
      //导出弹窗中的确定按钮
      this.$refs.dataTable.$refs.dialogExcel.handleSubmit = function () {
        this.$Export.excel({title: this.$refs.dataTable.$refs.dialogExcel.form.name, columns: this.$refs.dataTable.$refs.dialogExcel.columns, data: this.$refs.dataTable.$refs.dialogExcel.handleSum()});
        this.$refs.dataTable.$refs.dialogExcel.box = !1
      }
      //this.$refs.dataTable.rowExcel()
    }
  }
}