yxk-electronic-archives/src/views/system/fileLibraryManage/listBrowsing/index.vue

<template>
  <div>
    <div class="format-main">
      <div class="format-main-left">
        <div class="head-container">
          <el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)">
            插入
          </el-button>
        </div>
        <!--表格渲染-->
        <el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="fieldCnName" label="字段名称" align="center" />
        </el-table>
        <!--表单渲染-->
        <eForm />
      </div>
      <div class="format-main-right">
        <div class="head-container">
          <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)">
            移除
          </el-button>
          <el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)">
            编辑
          </el-button>
          <!-- type="danger" -->
          <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button>
        </div>
        <!--表格渲染-->
        <el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="fieldCnName" label="字段名称" align="center" />
          <el-table-column prop="displayLength" label="显示长度" align="center" />
          <el-table-column label="显示格式">
            <template slot-scope="scope">
              <span v-if="scope.row.displayformatType === 'center'">居中</span>
              <span v-if="scope.row.displayformatType === 'left'">靠左</span>
              <span v-if="scope.row.displayformatType === 'right'">靠右</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--表单渲染-->
      <eForm ref="cuform" @refresh="initData" />
      <!--排序对话框组件-->
      <sortDialog ref="sort" @refresh="initData" />
      <!--删除对话框组件-->
      <el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body>
        <div class="setting-dialog">
          <div class="tip-content">
            <p class="tipMsg">此操作将移除当前所选字段</p>
            <span>你是否还要继续?</span>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="deleteVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- @selection-change="selectionChangeHandler" -->
    <el-table ref="table" :key="tableKey" v-loading="table.bottom.loading" :data="table.bottom.data" style="min-width: 100%;" height="300" class="nowrap-tab">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column v-for="field in table.right.data" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row[field.fieldName] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { FetchDocumentFieldManage } from '@/api/system/fileLibrary/fileLibrary'
import { FetchInitArchivesView } from '@/api/archivesManage/archivesList'
import { add } from '@/api/system/fileLibrary/listBrowsing'
import eForm from './module/form'
import sortDialog from './module/sortDialog'
import Vue from 'vue'

export default {
  components: { eForm, sortDialog },
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      permission: {
        add: ['admin', 'listBrowsing:add'],
        edit: ['admin', 'listBrowsing:edit'],
        del: ['admin', 'listBrowsing:delete'],
        sort: ['admin', 'listBrowsing:sort']
      },
      deleteVisible: false,
      sortLoading: false,
      delAllLoading: false,
      tableKey: false, // 刷新下面预览表格用的:key
      table: {
        left: {
          data: [],
          Loading: false,
          selections: []
        },
        right: {
          data: [],
          Loading: false,
          selections: []
        },
        bottom: {
          data: [],
          Loading: false,
          selections: []
        }
      }
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.getDisplayFieldData()
      this.getBottomTableData()
    },
    getDisplayFieldData() {
      FetchDocumentFieldManage({ documentId: this.selectedCategory.id, isType: 2 }).then((res) => {
        this.table.right.data.splice(0, this.table.right.data.length)
        this.table.left.data.splice(0, this.table.left.data.length)
        res.sort((item1, item2) => { return item1.displayOrder - item2.displayOrder }).forEach((item) => {
          if (item.isInput) {
            if (item.isDisplay) {
              this.table.right.data.push(item)
            } else {
              this.table.left.data.push(item)
            }
          }
        })
        this.tableKey = !this.tableKey
      })
    },
    getBottomTableData() {
      FetchInitArchivesView({ documentId: this.selectedCategory.id, isdel: false, page: 0, size: 10 }).then((res) => {
        this.table.bottom.data.splice(0, this.table.bottom.data.length)
        if (res && res.list) {
          res.list.content.forEach((item) => {
            this.table.bottom.data.push(item)
          })
        }
      })
    },
    clickRowHandler(row, column, e, tableName) {
      this.$refs[tableName].toggleRowSelection(row)
    },
    selectionChangeHandler(val, tableName) {
      this.table[tableName].selections = val
    },
    toAdd() {
      const maxDisplayOrder = this.table.right.data.reduce((prev, cur) => { return { displayOrder: Math.max(prev.displayOrder, cur.displayOrder) } }, { displayOrder: 0 }).displayOrder + 1
      this.table.left.selections.forEach((item, index) => {
        Vue.set(item, 'displayLength', 100)
        Vue.set(item, 'displayformatType', 'center')
        Vue.set(item, 'displayOrder', maxDisplayOrder + index)
        item.isDisplay = true
      })
      this.$refs.cuform.title = '新增列表显示列'
      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections)))
      this.$refs.cuform.cuDialogVisible = true
    },
    toEdit() {
      this.$refs.cuform.title = '编辑列表显示列'
      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections)))
      this.$refs.cuform.cuDialogVisible = true
    },
    toDelete() {
      this.deleteVisible = true
    },
    handleDelConfirm() {
      this.deleteVisible = false
      this.delAllLoading = true
      const deleteData = this.table.right.selections.map((item) => {
        item.isDisplay = false
        item.displayformatType = null
        item.displayLength = null
        item.displayOrder = null
        return item
      })
      add(deleteData).then((res) => {
        this.delAllLoading = false
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 2500
        })
        this.getDisplayFieldData()
      })
    },
    toSort() {
      this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data))
      this.$refs.sort.sortVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep div.el-dialog__footer {
//   text-align: center;
// }
// ::v-deep .el-table tr .el-table__cell {
//   height: 40px;
// }
// ::v-deep .nowrap-tab .el-table__header .cell {
//   text-overflow: unset !important;
//   white-space: nowrap !important;
// }
</style>