From 93e608ccd875cb823800a1262cafe283ec9d31ba Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Thu, 26 May 2022 14:11:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E7=B1=BB=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/category/index.vue | 227 +++++++++++++++++++++++++++++++++++
 1 file changed, 227 insertions(+)
 create mode 100644 src/views/category/index.vue

diff --git a/src/views/category/index.vue b/src/views/category/index.vue
new file mode 100644
index 0000000..7e4a040
--- /dev/null
+++ b/src/views/category/index.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container">
+    <!--表单组件-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="门类名称" prop="dicName">
+            <el-input v-model="form.dicName" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="门类类型" prop="dicCode">
+            <el-select v-model="form.dicCode" style="width: 370px;">
+              <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="选择模板" prop="dicExplain">
+            <!-- <el-select v-model="form.dicCode" placeholder="请选择" style="width: 370px;">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>-->
+            <treeselect v-model="form.dicExplain" :options="treeOptions" placeholder="" style="width: 370px;" :disabled="form.dicCode !== '6'" />
+          </el-form-item>
+          <el-form-item label="内容说明">
+            <el-input v-model="form.dicExplain" style="width: 370px;" type="textarea" :rows="4" />
+          </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-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">确认删除当前门类？</span></p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog title="确认删除" :visible.sync="reconfirmDeleteVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">删除后，会永久清除此门类的相关设置及报表，请谨慎操作！</span></p>
+        <p><span style="color:red;">提示：为确保档案安全，必须先手工删除此门类的所有档案数据。</span></p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 字典列表 -->
+    <el-row class="container-main" :gutter="20">
+      <el-col class="container-left" :xs="10" :sm="8" :md="5" :lg="6" :xl="6">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+        <crudOperation :permission="permission">
+          <template v-slot:right>
+            <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
+            <el-button v-permission="permission.sort" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">排序</el-button>
+          </template>
+        </crudOperation>
+        <!--门类树状结构-->
+        <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
+      </el-col>
+      <!-- 门类管理tab -->
+      <el-col class="container-right" :xs="14" :sm="16" :md="19" :lg="18" :xl="18">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import crudDict from '@/api/archivesConfig/dict'
+import CRUD, { presenter, header, form } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+const defaultForm = { id: null, dicName: null, dicCode: '1', dicExplain: null, dicType: true }
+export default {
+  name: 'Category',
+  components: { crudOperation, Treeselect },
+  cruds() {
+    return [
+      CRUD({
+        title: '门类', url: 'api/dictrionary/menu',
+        crudMethod: { ...crudDict },
+        optShow: {
+          add: true,
+          edit: true,
+          del: false,
+          download: false,
+          group: false
+        },
+        confirmDeleteMsg: '确定要删除当前字典吗',
+        sort: ['dicSequence,asc']
+      })
+    ]
+  },
+  mixins: [presenter(), header(), form(defaultForm)],
+  data() {
+    return {
+      rules: {
+        dicName: [
+          { required: true, message: '请输入字典名称', trigger: 'blur' }
+        ]
+      },
+      permission: {
+        add: ['admin', 'category:add'],
+        edit: ['admin', 'category:edit'],
+        del: ['admin', 'category:del'],
+        sort: ['admin', 'category:sort']
+      },
+      defaultProps: {
+        children: 'childMenus',
+        label: 'dicName'
+      },
+      selectOptions: [
+        {
+          value: '1',
+          label: '文件夹'
+        },
+        {
+          value: '2',
+          label: '项目'
+        },
+        {
+          value: '3',
+          label: '案卷'
+        },
+        {
+          value: '4',
+          label: '卷内'
+        },
+        {
+          value: '5',
+          label: '文件'
+        },
+        {
+          value: '6',
+          label: '选择模板'
+        }
+      ],
+      treeOptions: [
+        {
+          id: 'a',
+          label: 'a',
+          children: [
+            {
+              id: 'aa',
+              label: 'aa'
+            },
+            {
+              id: 'ab',
+              label: 'ab'
+            }
+          ]
+        },
+        {
+          id: 'b',
+          label: 'b'
+        },
+        {
+          id: 'c',
+          label: 'c'
+        }
+      ],
+      // activeAddBtn: false,
+      deleteVisible: false,
+      reconfirmDeleteVisible: false,
+      deleteData: {}
+    }
+  },
+  methods: {
+    // 获取数据前设置好接口地址
+    [CRUD.HOOK.beforeRefresh]() {
+      if (this.$refs.dictDetail) {
+        this.$refs.dictDetail.query.id = ''
+      }
+      return true
+    },
+    // 选中字典后，设置字典详情数据
+    handleNodeClick(val) {
+      if (val) {
+        this.crud.selectionChangeHandler([val])
+        this.$refs.dictDetail.query.id = val.id
+        this.$refs.dictDetail.dicPid = val.id
+        this.$refs.dictDetail.crud.toQuery()
+        // this.activeAddBtn = true
+      }
+    },
+    updateKeyChildren(data) {
+      const oldDatas = this.$refs.tree.getCurrentNode().childMenus
+      if (oldDatas) {
+        for (let i = 0; i < data.length; i++) {
+          const oldData = oldDatas.find((d) => { return d.id === data[i].id })
+          if (oldData) {
+            data[i].childMenus = oldData.childMenus
+          }
+        }
+      }
+      this.$refs.tree.updateKeyChildren(this.$refs.tree.getCurrentKey(), data)
+    },
+    toDelete(data) {
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
+      this.crud.delAllLoading = true
+      this.crud.doDelete(this.deleteData)
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>