yxk-electronic-archives/src/views/system/archiveScopeManage/module/tableList.vue

<template>
  <!--用户数据-->
  <div class="elect-cont-right">
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission">
        <template v-slot:left>
          <el-button v-permission="permission.add" size="mini" @click="crud.toAdd">
            <i class="iconfont icon-xinzeng" />
            新增
          </el-button>
          <el-button v-permission="permission.edit" size="mini" :disabled="selections.length !== 1" @click="crud.toEdit(selections[0])">
            <i class="iconfont icon-bianji" />
            编辑
          </el-button>
          <el-button slot="reference" v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="selections.length === 0" @click="toDelete(selections)">
            <i class="iconfont icon-shanchu" />
            删除
          </el-button>
        </template>
        <template v-slot:right>
          <el-button :loading="crud.downloadLoading" size="mini" :disabled="selections.length === 0" @click="doExport(selections)">
            <i class="iconfont icon-daochu" />
            导出
          </el-button>
          <span class="tip">注意：门类节点下才可新增归档范围定义</span>
        </template>
      </crudOperation>
    </div>
    <!--表单渲染-->
    <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
      <div class="setting-dialog">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px">
          <el-form-item v-if="crud.status.add === 1" label="所属门类" prop="categoryId">
            <treeselect
              v-model="form.categoryId"
              :options="categoryDatas"
              placeholder="选择所属门类"
              flat
              :multiple="false"
              :normalizer="normalizer"
              @select="selectCategoryTree"
            />
          </el-form-item>
          <el-form-item v-if="crud.status.edit === 1" label="所属门类" prop="categoryId">
            <el-input v-model="form.category.cnName" disabled />
          </el-form-item>
          <el-form-item label="档案分类" prop="archivesClassId">
            <!-- :load-options="loadClassifyTree" -->
            <treeselect
              v-model="form.archivesClassId"
              :options="classifyOptions"
              :normalizer="classifyNormalizer"
              placeholder="选择门类之后再选择档案分类"
            />
          </el-form-item>
          <el-form-item label="名称" prop="scopeName">
            <el-input v-model="form.scopeName" />
          </el-form-item>
          <el-form-item label="编码" prop="scopeCode">
            <el-input v-model="form.scopeCode" />
          </el-form-item>
          <el-form-item label="顶级范围" prop="isTop">
            <el-radio-group v-model="form.isTop" @input="changeIsTop">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="保管期限" prop="retention">
            <el-select v-model="form.retention" placeholder="请选择" style="width:225px;">
              <el-option v-for="item in periodOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.isTop === '0'"
            label="上级分类"
            prop="pid"
          >
            <!-- :load-options="loadScopeTree" -->
            <treeselect
              v-model="form.pid"
              :options="scopes"
              placeholder="选择门类之后再选择上级范围"
              :normalizer="scopeNormalizer"
              style="width: 584px;"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      lazy
      :data="tableData"
      :row-key="getRowKey"
      :load="getSonClass"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      highlight-current-row
      @select-all="selectAll"
      @select="selectTr"
      @selection-change="selectionChangeHandler"
      @row-click="clickRowHandler"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column :show-overflow-tooltip="true" prop="scopeCode" label="编码" />
      <el-table-column :show-overflow-tooltip="true" prop="scopeName" label="名称" />
      <el-table-column :show-overflow-tooltip="true" prop="retention" label="保管期限">
        <template slot-scope="scope">
          <div>{{ scope.row.retention === 0 ? '永久' : scope.row.retention === 1 ? '定期30年' : '定期10年' }}</div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="category" label="所属门类">
        <template slot-scope="scope">
          <div v-if="scope.row.category">{{ scope.row.category.cnName }}</div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="archivesClass" label="所属分类">
        <template slot-scope="scope">
          <div v-if="scope.row.archivesClass">{{ scope.row.archivesClass.name }}</div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination v-if="tableData.length !== 0" />
  </div>
</template>

<script>
import { FetchCategoryMenu } from '@/api/system/category/category'
import { FetchArchivesClassTree } from '@/api/system/archivesClass'
import crudScope from '@/api/system/archivesScope'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { exportFile } from '@/utils/index'
import qs from 'qs'
import { mapGetters } from 'vuex'

const defaultForm = {
  id: null,
  categoryId: null,
  archivesClassId: null,
  scopeName: null,
  scopeCode: null,
  isTop: '1',
  pid: null,
  retention: 0
}

export default {
  name: 'Classify',
  components: { crudOperation, pagination, Treeselect },
  cruds() {
    return CRUD({ title: '范围', url: 'api/archivesScope/initArchivesScope', crudMethod: { ...crudScope }, optShow: {
      add: false,
      edit: false,
      del: false,
      reset: false,
      download: false,
      group: false
    }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      tableData: [],
      classifyOptions: [],
      categoryDatas: [],
      scopes: [],
      selections: [],
      isAllSelect: false,
      rules: {
        categoryId: [{ required: true, message: '请选择所属门类', trigger: 'change' }],
        archivesClassId: [{ required: true, message: '请选择档案分类', trigger: 'change' }],
        scopeCode: [{ required: true, message: '编码不可为空', trigger: 'blur' }],
        scopeName: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
        isTop: [{ required: true, message: '请选择是否为顶级分类', trigger: 'change' }],
        pid: [{ required: true, message: '请选择上级分类', trigger: 'change' }],
        retention: [{ required: true, message: '请选择保管期限', trigger: 'change' }]
      },
      permission: {
        add: ['admin', 'scope:add'],
        edit: ['admin', 'scope:edit'],
        del: ['admin', 'scope:del']
      },
      defaultProps: {
        children: 'children',
        label: 'cnName'
      },
      periodOptions: [
        {
          value: 0,
          label: '永久'
        },
        {
          value: 1,
          label: '定期30年'
        },
        {
          value: 2,
          label: '定期10年'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
      this.crud.refresh()
    }
  },
  created() {
  },
  methods: {
    getRowKey(row) {
      return row.id
    },
    // 获取数据前设置默认参数
    [CRUD.HOOK.beforeRefresh]() {
      this.tableData = []
      this.crud.query.categoryId = this.selectedCategory.id
    },
    [CRUD.HOOK.afterRefresh](crud) {
      crud.data.forEach(function(item, index) {
        if (item.sonNum !== 0) {
          item.hasChildren = true
          item.children = null
        } else {
          item.hasChildren = false
        }
      })
      this.tableData = this.crud.data
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      console.log(crud.form)
      delete crud.form.isTop
      return true
    },
    changeIsTop(val) {
      if (this.crud.status.edit) {
        if (val === '1') {
          this.form.pid = null
        }
      }
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      this.getCategoryDataTree()
      if (this.crud.status.edit) {
        this.form.categoryId = this.form.category.id
        this.form.archivesClassId = this.form.archivesClass.id
        this.getScopeTree(this.form.category.id)
        this.getClassifyTree(this.form.category.id)
      } else {
        this.form.categoryId = null
        this.scopes = []
      }
      if (form.id != null) {
        if (form.pid === null) {
          form.isTop = '1'
        } else {
          form.isTop = '0'
        }
      }
    },
    selectCategoryTree(val) {
      console.log(val)
      // this.form.categoryId = val.id
      this.getScopeTree(val.id)
      this.getClassifyTree(val.id)
    },
    filterData(data) {
      return data.filter(node => {
        if (node.children && node.children.length > 0) {
          node.children = this.filterData(node.children) // 递归处理子节点
        }
        return node.isType !== 3 // 过滤掉isType为3的节点
      })
    },
    getCategoryDataTree() {
      FetchCategoryMenu().then(res => {
        this.categoryDatas = this.filterData(res)
      })
    },
    getClassifyTree(categoryId) {
      FetchArchivesClassTree({ 'categoryId': categoryId }).then(res => {
        this.classifyOptions = res.map(function(obj) {
          if (obj.childArchivesClass !== null) {
            obj.hasChildren = true
          } else {
            obj.hasChildren = false
          }
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },
    // loadClassifyTree({ action, parentNode, callback }) {
    //   if (action === LOAD_CHILDREN_OPTIONS) {
    //     FetchArchivesClassTree().then(res => {
    //       parentNode.children = res.map(function(obj) {
    //         if (obj.childArchivesClass !== 0) {
    //           obj.hasChildren = true
    //         } else {
    //           obj.hasChildren = false
    //         }
    //         if (obj.hasChildren) {
    //           obj.children = null
    //         }
    //         return obj
    //       })
    //       setTimeout(() => {
    //         callback()
    //       }, 100)
    //     })
    //   }
    // },
    getSonClass(tree, treeNode, resolve) {
      setTimeout(() => {
        crudScope.FetchSonArchivesScope({ pid: tree.id }).then(res => {
          const data = res.map(function(obj) {
            if (obj.sonNum !== 0 && obj.sonNum) {
              obj.hasChildren = true
              obj.children = null
            } else {
              obj.hasChildren = false
            }
            return obj
          })
          resolve(data)
        })
      }, 100)
    },
    getScopeTree(categoryId) {
      crudScope.FetchArchivesScopeTree({ 'categoryId': categoryId }).then(res => {
        this.scopes = res.map(function(obj) {
          if (obj.childArchivesClass !== null) {
            obj.hasChildren = true
          } else {
            obj.hasChildren = false
          }
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },
    // 获取弹窗内门类数据
    // loadScopeTree({ action, parentNode, callback }) {
    //   if (action === LOAD_CHILDREN_OPTIONS) {
    //     crudScope.FetchArchivesScopeTree().then(res => {
    //       parentNode.children = res.map(function(obj) {
    //         if (obj.childArchivesClass !== 0) {
    //           obj.hasChildren = true
    //         } else {
    //           obj.hasChildren = false
    //         }
    //         if (obj.hasChildren) {
    //           obj.children = null
    //         }
    //         return obj
    //       })
    //       setTimeout(() => {
    //         callback()
    //       }, 100)
    //     })
    //   }
    // },
    selectAll() {
      this.isAllSelect = !this.isAllSelect
      const data = this.tableData
      this.toggleSelect(data, this.isAllSelect, 'all')
    },
    // 选择某行
    selectTr(selection, row) {
      this.$set(row, 'isChecked', !row.isChecked)
      this.$nextTick(() => {
        this.isAllSelect = row.isChecked
        this.toggleSelect(row, row.isChecked, 'tr')
      })
    },
    // 递归子级
    toggleSelect(data, flag, type) {
      if (type === 'all') {
        if (data.length > 0) {
          data.forEach((item) => {
            this.toggleSelection(item, flag)
            if (item.children && item.children.length > 0) {
              this.toggleSelect(item.children, flag, type)
            }
          })
        }
      } else {
        if (data.children && data.children.length > 0) {
          data.children.forEach((item) => {
            item.isChecked = flag
            this.$refs.table.toggleRowSelection(item, flag)
            this.toggleSelect(item, flag, type)
          })
        }
      }
    },
    // 改变选中
    toggleSelection(row, flag) {
      this.$set(row, 'isChecked', flag)
      this.$nextTick(() => {
        if (flag) {
          this.$refs.table.toggleRowSelection(row, flag)
        } else {
          this.$refs.table.clearSelection()
        }
      })
    },
    // table - 当前选中得row
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    doExport(data) {
      crud.downloadLoading = true
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const ids = []
        data.forEach(val => {
          ids.push(val.id)
        })
        const params = {
          'classIds': ids
        }
        exportFile(this.baseApi + '/api/archivesScope/download?' + qs.stringify(params, { indices: false }))
      }).catch(() => {
      })
    },
    toDelete(datas) {
      this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.crud.delAllLoading = true
        const ids = []
        datas.forEach(val => {
          ids.push(val.id)
        })
        // const params = {
        //   'scopeIds': ids
        // }
        crudScope.del(ids).then(() => {
          this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.delAllLoading = false
          this.crud.refresh()
        }).catch(err => {
          this.crud.delAllLoading = false
          console.log(err)
        })
      }).catch(() => {
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.cnName,
        children: node.children,
        isDisabled: node.isType !== 2
      }
    },
    classifyNormalizer(node) {
      if (node.childArchivesClass && !node.childArchivesClass.length) {
        delete node.childArchivesClass
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childArchivesClass
      }
    },
    scopeNormalizer(node) {
      if (node.archivesScopeDTOs && !node.archivesScopeDTOs.length) {
        delete node.archivesScopeDTOs
      }
      return {
        id: node.id,
        label: node.scopeName,
        children: node.archivesScopeDTOs
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tip{
  line-height: 28px;
}
</style>