licp
2024-04-25 742c4b025868dc346503318fce65d5b1901166c1
src/views/common/ztt-table.vue
@@ -149,11 +149,8 @@
        v-bind="$attrs"
        v-on="$listeners"
        :highlight-current-row="true"
        :row-key="
          (row) => {
            return row.id
          }
        "
        :row-key="rowKey"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @row-dblclick="dbClickRow"
        @row-contextmenu="contextMenu"
        @header-click="headClick"
@@ -168,7 +165,7 @@
        :span-method="objectSpanMethod"
        :header-cell-style="tableHeaderStyle"
        v-adaptive="{ bottomOffset: bottomOffset, fixedHeight: fixedHeight }"
        height="100px"
        height="300px"
        :class="[
          'commonTable',
          isGeneralSearch && !isEdit
@@ -178,6 +175,7 @@
        v-loading="dataListLoading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        @expand-change="expandChange"
      >
        <!--多选择框-->
        <el-table-column
@@ -186,6 +184,7 @@
          v-if="options.multiSelect && !isEdit"
          style="width: 55px;"
          :selectable="selectHandle"
        >
        </el-table-column>
        <!--单选框-->
@@ -249,6 +248,7 @@
            :show-overflow-tooltip="!item.noShowTip"
            :width="inMemoryColWidth[item.prop] || item.width"
            :prop="item.prop"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <template v-if="item.isSearch">
@@ -327,8 +327,13 @@
              <template v-else>
                <template v-if="!item.render">
                  <template v-if="item.formatter">
                    <span v-if="item.isTag" style="text-align: center;">
                      <el-tag style="width:50px;margin: 3px;" :type="scope.row[item.prop] == 0 ? 'success' : 'info'">
                    <span v-if="item.isTag&&scope.row[item.prop]!=null" style="text-align: center;">
                      <el-tag style="width:60px;margin: 3px;" :type="scope.row[item.prop] == 0 ? 'success' : 'info'">
                        <span v-html="item.formatter(scope.row, item, scope.row[item.prop])"></span>
                      </el-tag>
                    </span>
                    <span v-if="item.isTags&&scope.row[item.prop]!=null" style="text-align: center;">
                      <el-tag style="width:60px;margin: 3px;" :type="scope.row[item.prop] == '正常' ? 'success' : (scope.row[item.prop] == '异常'?'warning':(scope.row[item.prop] == '返修'?'danger':'info'))">
                        <span v-html="item.formatter(scope.row, item, scope.row[item.prop])"></span>
                      </el-tag>
                    </span>
@@ -401,6 +406,7 @@
        @size-change="sizeChangeHandle"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        :page-count="pagination.size"
        :layout="
          size
            ? 'total, prev, pager, next'
@@ -507,11 +513,12 @@
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text"><em>点击导入数据</em></div>
              <div class="el-upload__tip" slot="tip">
              <div class="el-upload__tip" slot="tip" >
                只能上传xlsx/xls文件,且不超过10M<el-button
                  type="text"
                  style="font-size:12px;"
                  @click="downDataTemplate"
                  style="font-size:14px;text-decoration: underline;"
                  @click="downDataTemplate(uploadInfo.fileName)"
                  v-if="uploadInfo.download"
                  >下载模板</el-button
                >
              </div>
@@ -548,7 +555,7 @@
    column: {
      type: Object,
      default: null
    }
    },
  },
  render: (h, data) => {
    const params = {
@@ -563,6 +570,23 @@
  name: 'TTable',
  components: { exSlot, advancedSearchDialog, zttdraggable },
  props: {
    rowKey: {
      type: String,
      default: ()=>{
        return 'id'
      }
    },
    //需要合并的字段集合
    mergeSpanArr: {
        type: Array,
        default: ()=>{
            return []
        }
    },
    toolbarMaxLength: {
      type: Number,
      default: 5,
    },
    // 表格型号:mini,medium,small
    tableSize: { type: String, default: 'small' },
    // 数据请求方法
@@ -683,6 +707,7 @@
  },
  data() {
    return {
        currentExpand:null,
      dataListLoading: false,
      tableKey: 0,
      // jipf  导出所用变量
@@ -716,6 +741,7 @@
        currentPage:
          this.table.currentPage == null ? 1 : this.table.currentPage,
        pageSize: this.table.pageSize == null ? 20 : this.table.pageSize,
        size: this.table.size == null ? 7 : this.table.size,
        total: this.table.total == null ? 0 : this.table.total
      }, // 分页信息
      inMemoryColWidth: {}, // 记忆中列宽,默认列宽
@@ -749,11 +775,11 @@
      return colList
    },
    getToolBarBtn() {
      return this.table.toolbar ? this.table.toolbar.slice(0, 5) : []
      return this.table.toolbar ? this.table.toolbar.slice(0, this.toolbarMaxLength) : []
    },
    getToolbarDown() {
      return this.getToolBarBtn.length === 5
        ? this.table.toolbar.slice(5, this.table.toolbar.length)
      return this.getToolBarBtn.length == this.toolbarMaxLength
        ? this.table.toolbar.slice(this.toolbarMaxLength, this.table.toolbar.length)
        : []
    },
    isRefreshBtn() {
@@ -918,26 +944,45 @@
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.options.tableCellMerge) {
        let result = ''
        this.$emit(
          'objectSpanMethod',
          row,
          column,
          rowIndex,
          columnIndex,
          (val) => {
            if (val) {
              result = val
        const propName = column.property
        if (propName) {
            if(this.mergeSpanArr.includes(propName)){
                if (rowIndex > 0 && row[propName] === this.tableData[rowIndex - 1][propName]) {
                    return { rowspan: 0, colspan: 0 };
                } else {
                    let rowspan = 1;
                    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                        if (this.tableData[i][propName] === row[propName]) {
                            rowspan++;
                        } else {
                            break;
                        }
                    }
                    return { rowspan: rowspan, colspan: 1 };
                }
            }
          }
        )
        if (result) {
          return result
        }
        // let result = ''
        // this.$emit(
        //   'objectSpanMethod',
        //   row,
        //   column,
        //   rowIndex,
        //   columnIndex,
        //   (val) => {
        //     console.log(val);
        //     if (val) {
        //       result = val
        //     }
        //   }
        // )
        // if (result) {
        //   return result
        // }
      }
    },
    getDataList(selectedId) {
      // this.dataListLoading = true
      this.dataListLoading = true
      var criteria = {}
      criteria.dateTimeFilters = this.dateTimeFilters
      criteria.multiSearchFilter = this.multiSearchFilter
@@ -963,6 +1008,7 @@
      return this.doCallback(this.ajaxFun, arr, selectedId)
    },
    doCallback(fn, args, selectedId) {
      this.tableData=[]
      return fn
        .apply(this, args)
        .then((response) => {
@@ -1398,7 +1444,6 @@
            }
          }
        }
        console.log(this.multipleSelection)
        this.$emit('handleSelectionChange', this.multipleSelection)
      } else {
        this.multipleSelection = val
@@ -1533,7 +1578,6 @@
          }
        }
      }
      console.log(this.columnList);
      this.tableKey = Math.random()
      // this.$forceUpdate();
      const currPathColumnOrder = this.currPath + '_column'
@@ -1575,10 +1619,19 @@
      if (response.code != '0') {
        this.$message.warning(response.msg)
      } else {
      if(response.data!=""&&response.data!=[]&&response.data!=null){
        this.$message({
          message: response.data,
          type: 'success',
          dangerouslyUseHTMLString: true,
        })
      }else{
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      }
        this.importDialogVisible=false
        this.getDataList()
      }
      this.$refs.uploadScan.clearFiles()
@@ -1602,7 +1655,11 @@
        const blob = new Blob([response.data], {
          type: 'application/force-download'
        })
        const filename = decodeURI('模板文件.xlsx')
        let fileName="模板文件";
        if(this.uploadInfo.fileName!=undefined&&this.uploadInfo.fileName!=''&&this.uploadInfo.fileName!=null){
            fileName=this.uploadInfo.fileName
        }
        const filename = decodeURI(fileName+'.xlsx')
        // 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
        const elink = document.createElement('a')
        elink.download = filename
@@ -1673,6 +1730,15 @@
    // 设置高级搜索查询条件
    setMultiSearchFilter(filters) {
      this.multiSearchFilter = filters
    },
    expandChange(e){
        this.currentExpand = e;
    },
    toggleRowExpansion(){
        this.tableData.forEach((ele) => {
            this.$refs.lmesTable.toggleRowExpansion(ele,false)
      })
        this.$refs.lmesTable.toggleRowExpansion(this.currentExpand,true)
    }
  }
}