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

<template>
  <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 - 302px)" @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">
        <!-- type="danger" -->
        <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>
        <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" style="min-width: 100%;" height="calc(100vh - 302px)" @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="connector" label="组成符号" align="center" />
      </el-table>
      <!--表单渲染-->
      <eForm ref="cuform" @refresh="initData" />
    </div>
    <!--排序对话框组件-->
    <sortDialog ref="sort" @refresh="initData" />
    <!--删除对话框组件-->
    <el-dialog class="tip-dialog" title="提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="deleteVisible">
      <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>
</template>

<script>
import { FetchInitCategoryField } from '@/api/system/category/category'
import { getNoFormatField, del } from '@/api/system/category/fileNoFormat'
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', 'fileNoFormat:add'],
        edit: ['admin', 'fileNoFormat:edit'],
        del: ['admin', 'fileNoFormat:delete'],
        sort: ['admin', 'fileNoFormat:sort']
      },
      deleteVisible: false,
      sortLoading: false,
      delAllLoading: false,
      table: {
        left: {
          data: [],
          Loading: false,
          selections: []
        },
        right: {
          data: [],
          Loading: false,
          selections: []
        }
      }
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
      this.initData()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      FetchInitCategoryField({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => {
        this.table.left.data.splice(0, this.table.left.data.length)
        res.forEach((item) => {
          if (!item.isDisplayformat && item.isInput && !item.isAutomatic) {
            this.table.left.data.push(item)
          }
        })
      })
      getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => {
        this.table.right.data.splice(0, this.table.right.data.length)
        res.forEach((item) => {
          this.table.right.data.push(item)
        })
      })
    },
    clickRowHandler(row, column, e, tableName) {
      this.$refs[tableName].toggleRowSelection(row)
    },
    selectionChangeHandler(val, tableName) {
      this.table[tableName].selections = val
    },
    toAdd() {
      this.table.left.selections.forEach((item) => {
        Vue.set(item, 'connector', '-')
        Vue.set(item, 'categoryId', this.selectedCategory.id)
      })
      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
      del(deleteData).then((res) => {
        this.delAllLoading = false
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 2500
        })
        this.initData()
      })
    },
    toSort() {
      this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data))
      this.$refs.sort.sortVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// ::v-deep div.el-dialog__footer {
//   text-align: center;
// }
// ::v-deep .el-table tr .el-table__cell {
//   height: 40px;
// }
</style>