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

@@ -13,17 +13,39 @@
               @size-change="sizeChange"
               @row-click="rowClickChange"
               @search-change='searchChange'
               @filter-change="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"
                        type="table"></dynamic-button>
      </template>
      <template  slot="menuRight" slot-scope="scope">
        <el-button icon="el-icon-printer" title="打印"
                   circle @click="$refs.dataTable.rowPrint()"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-download" title="导出"
                   circle @click="rowExcel"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-tickets" circle title="筛选"  @click="$refs.dataTable.$refs.dialogFilter.box=!0"
                  :size="scope.size"></el-button>
        <el-button icon="el-icon-s-operation" circle title="列显隐"  @click="$refs.dataTable.$refs.dialogColumn.columnBox=!0"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-search" circle title="查询" @click="$refs.dataTable.$refs.headerSearch.handleSearchShow()"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-refresh" circle title="刷新" @click="$refs.dataTable.refreshChange()"
                   :size="scope.size"></el-button>
      </template>
    </avue-crud>
  </div>
@@ -51,6 +73,11 @@
    inDialog: {
      type: Boolean,
      default: false
    },
    canEdit:{
      //内容是否可编辑
      type:Boolean,
      default:false
    },
    areasName: {
      type: String,
@@ -85,6 +112,7 @@
  },
  data() {
    return {
      currentDefineVO:this.componentVO.uiComponentType=='table'?this.componentVO.tableDefineVO:this.componentVO.treeTableDefineVO,
      parentHeight: '100%',//当前组件根节点元素高度
      form: {},
      query:{},
@@ -108,12 +136,18 @@
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn:false,
        columnBtn:false,
        searchShowBtn:false,
        printBtn:false,
        excelBtn:false,
        filterBtn:false,
        selection: true,
        tip: false,
        height: '100%',
        calcHeight: 15,
        indexFixed: false,
        menuFixed: false,
        menuFixed: this.areasName === 'westArea' ? false : 'right',
        searchMenuSpan:12,
        searchShow:false,
        column: [],
@@ -162,6 +196,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,17 +217,24 @@
          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() {
@@ -190,10 +245,10 @@
  },
  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,35 +279,35 @@
          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 = {}) {
@@ -287,7 +342,7 @@
      this.$emit("setDataStore", {
        area: this.areasName,
        type:this.componentVO.uiComponentType,
        btmType:this.componentVO.tableDefineVO.btmType,
        btmType:this.currentDefineVO.btmType,
        dataStore:row
      });
    },
@@ -303,16 +358,34 @@
      this.onLoad(this.page);
      done();
    },
    filterChange(result){
      debugger;

    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.dataTable.toggleSelection();
      try {
        this.$refs.dataTable.toggleSelection();
      }catch (e) {

      }
    },
    handleRefresh() {
    handleRefresh(type) {
      this.onLoad(this.page, this.query);
    },
    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()
    }
  }
}