档案分类管理

src/assets/styles/sidebar.scss

@@ -21,7 +21,9 @@
     z-index: 99;
     @include bg_color;
     @include siderBar-set;
+    padding-bottom: 50px;
     overflow: hidden;
+    overflow-y: scroll;
 
     // reset element-ui css
     .horizontal-collapse-transition {

src/views/system/archivesClassify/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="app-container">
+    <div class="container-main" style="justify-content: flex-start;">
+      <!--侧边部门数据-->
+      <div class="elect-cont-left">
+        <div class="container-left">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <!-- <el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" /> -->
+        </div>
+      </div>
+      <!--用户数据-->
+      <div class="elect-cont-right">
+        <!--工具栏-->
+        <div class="head-container">
+          <crudOperation :permission="permission" />
+        </div>
+        <!--表单组件-->
+        <el-dialog
+          append-to-body
+          :close-on-click-modal="false"
+          :before-close="crud.cancelCU"
+          :visible.sync="crud.status.cu > 0"
+          :title="crud.status.title"
+        >
+          <div class="setting-dialog">
+            <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
+              <el-form-item label="所属门类" prop="category">
+                <treeselect
+                  v-model="form.category"
+                  :load-options="loadCategorys"
+                  :options="categorys"
+                  placeholder="选择所属门类"
+                />
+              </el-form-item>
+              <el-form-item label="分类编码" prop="number">
+                <el-input v-model="form.number" />
+              </el-form-item>
+              <el-form-item label="分类名称" prop="name">
+                <el-input v-model="form.name" />
+              </el-form-item>
+              <el-form-item label="排序" prop="sort">
+                <el-input-number
+                  v-model.number="form.sort"
+                  :min="0"
+                  :max="999"
+                  controls-position="right"
+                />
+              </el-form-item>
+              <el-row>
+                <el-form-item label="顶级分类" prop="isTop">
+                  <el-radio-group v-model="form.isTop">
+                    <el-radio label="1">是</el-radio>
+                    <el-radio label="0">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="form.isTop === '0'"
+                  label="上级分类"
+                  prop="pid"
+                >
+                  <treeselect
+                    v-model="form.pid"
+                    :load-options="loadCategory"
+                    :options="depts"
+                    placeholder="选择上级类目"
+                  />
+                </el-form-item>
+              </el-row>
+              <el-form-item label="描述信息" prop="remark">
+                <el-input v-model="form.remark" rows="5" type="textarea" style="width: 586px;" />
+              </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>
+        <!--表格渲染-->
+        <div class="container-right">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <el-table
+            ref="table"
+            v-loading="crud.loading"
+            lazy
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            :data="crud.data"
+            row-key="id"
+            @select="crud.selectChange"
+            @select-all="crud.selectAllChange"
+            @selection-change="crud.selectionChangeHandler"
+          >
+            <el-table-column type="selection" align="center" width="55" />
+            <el-table-column label="分类名称" prop="name" />
+            <el-table-column label="分类编号" prop="number" />
+            <el-table-column label="排序" prop="sort" />
+            <el-table-column label="所属门类" prop="category" />
+            <el-table-column prop="createTime" label="创建日期">
+              <template slot-scope="scope">
+                <div>{{ scope.row.createTime | parseTime }}</div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination v-if="crud.data.length!==0" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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'
+
+const defaultForm = {
+  id: null,
+  category: null,
+  name: null,
+  number: null,
+  isTop: null,
+  sort: 999,
+  enabled: 'true'
+}
+
+export default {
+  name: 'Classify',
+  components: { crudOperation, pagination, Treeselect },
+  cruds() {
+    return CRUD({ title: '档案分类', url: 'api/dept', crudMethod: {}})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      categorys: [],
+      rules: {
+        category: [{ required: true, message: '请选择所属门类', trigger: 'change' }],
+        number: [{ required: true, message: '分类编码不可为空', trigger: 'blur' }],
+        name: [{ required: true, message: '分类名称不可为空', trigger: 'blur' }],
+        sort: [{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }],
+        isTop: [{ required: true, message: '请选择是否为顶级分类', trigger: 'change' }],
+        pid: [{ required: true, message: '请选择上级分类', trigger: 'change' }]
+      },
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
+      permission: {
+        add: ['admin', 'classify:add'],
+        edit: ['admin', 'classify:edit'],
+        del: ['admin', 'classify:del']
+      }
+    }
+  },
+  methods: {
+    // 获取弹窗内门类数据
+    loadCategorys({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        // crudDict.getDicts().then(res => {
+        //   parentNode.children = res.map(function(obj) {
+        //     if (obj.children) {
+        //       obj.childMenus = null
+        //     }
+        //     return obj
+        //   })
+        //   setTimeout(() => {
+        //     callback()
+        //   }, 100)
+        // })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+[data-theme=dark] .elect-cont-left .container-left{
+  min-height: calc(100vh - 160px);
+}
+[data-theme=dark] .elect-cont-right .container-right{
+  min-height: calc(100vh - 212px);
+}
+[data-theme=light] .elect-cont-right .container-right{
+  min-height: calc(100vh - 232px);
+}
+</style>

src/views/system/dept/index.vue

@@ -126,7 +126,7 @@
             </el-table-column> -->
           </el-table>
           <!--分页组件-->
-          <pagination />
+          <pagination v-if="crud.data.length!==0" />
         </div>
       </div>
     </div>

src/views/system/metadata/form.vue

@@ -4,7 +4,7 @@
     <div class="setting-dialog">
       <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" />
+          <el-input v-model="selectedTreeItem.name" />
         </el-form-item>
         <el-form-item label="参照标准类型" prop="frameworkType">
           <el-select v-model="form.frameworkType" style="width: 225px;">
@@ -50,7 +50,7 @@ export default {
     })
   ],
   props: {
-    selectedCategory: {
+    selectedTreeItem: {
       type: Object,
       default: function() {
         return {}
@@ -87,21 +87,10 @@ export default {
     }
   },
   created() {
-    this.getSelectOptions()
+    console.log(this.selectedTreeItem)
   },
   methods: {
     [CRUD.HOOK.beforeSubmit]() {
-    },
-    getSelectOptions() {
-      // getCategoryType().then(res => {
-      //   for (const key in res) {
-      //     this.selectOptions.push({
-      //       value: Number(key),
-      //       label: res[key],
-      //       typeState: false
-      //     })
-      //   }
-      // })
     }
   }
 }

src/views/system/metadata/index.vue

@@ -56,7 +56,7 @@
           <component :is="comName" :selected-tree-item="selectedTreeItem" />
         </div>
       </div>
-      <eform ref="eform" />
+      <eform ref="eform" :selected-tree-item="selectedTreeItem" />
       <el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :before-close="handleClose">
         <div class="setting-dialog">
           <div class="tip-content">
@@ -104,10 +104,9 @@ export default {
   data() {
     return {
       permission: {
-        add: ['admin', 'category:add'],
-        edit: ['admin', 'category:edit'],
-        del: ['admin', 'category:del'],
-        sort: ['admin', 'category:sort']
+        add: ['admin', 'MetaData:add'],
+        edit: ['admin', 'MetaData:edit'],
+        del: ['admin', 'MetaData:del']
       },
       defaultProps: {
         children: 'children',