From 2a65ae47f77eb2704c632a34864f659b84bc8a52 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Fri, 27 May 2022 09:21:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E7=B1=BB=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E,=E4=BF=AE=E6=94=B9,=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/archivesConfig/dictDetail.js |  13 +++
 src/views/category/form.vue          | 125 ++++++++++++++++++++++
 src/views/category/index.vue         | 148 ++++-----------------------
 src/views/category/sortDialog.vue    |  55 ++++++++++
 4 files changed, 213 insertions(+), 128 deletions(-)
 create mode 100644 src/views/category/form.vue
 create mode 100644 src/views/category/sortDialog.vue

diff --git a/src/api/archivesConfig/dictDetail.js b/src/api/archivesConfig/dictDetail.js
index a21f5a7..140b523 100644
--- a/src/api/archivesConfig/dictDetail.js
+++ b/src/api/archivesConfig/dictDetail.js
@@ -13,6 +13,19 @@ export function get(dictName) {
   })
 }
 
+export function findSubsetById(id) {
+  const params = {
+    id,
+    page: 0,
+    size: 9999
+  }
+  return request({
+    url: 'api/dictrionary/findSubsetById',
+    method: 'get',
+    params
+  })
+}
+
 export function getDictMap(dictName) {
   const params = {
     dictName,
diff --git a/src/views/category/form.vue b/src/views/category/form.vue
new file mode 100644
index 0000000..5ea67a7
--- /dev/null
+++ b/src/views/category/form.vue
@@ -0,0 +1,125 @@
+<template>
+  <!--表单组件-->
+  <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;" @change="changeType">
+            <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">
+          <treeselect v-model="form.dicExplain" :options="templateTree" placeholder="" style="width: 370px;" :disabled="form.dicCode !== '6'" :normalizer="normalizer" />
+        </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>
+</template>
+
+<script>
+import crudDict from '@/api/archivesConfig/dict'
+import { form } from '@crud/crud'
+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 {
+  components: { Treeselect },
+  mixins: [form(defaultForm)],
+  data() {
+    return {
+      rules: {
+        dicName: [
+          { required: true, message: '请输入字典名称', trigger: 'blur' }
+        ]
+      },
+      selectOptions: [
+        {
+          value: '1',
+          label: '文件夹'
+        },
+        {
+          value: '2',
+          label: '项目'
+        },
+        {
+          value: '3',
+          label: '案卷'
+        },
+        {
+          value: '4',
+          label: '卷内'
+        },
+        {
+          value: '5',
+          label: '文件'
+        },
+        {
+          value: '6',
+          label: '选择模板'
+        }
+      ],
+      templateTree: [
+        {
+          id: 'a',
+          label: 'a',
+          children: [
+            {
+              id: 'aa',
+              label: 'aa'
+            },
+            {
+              id: 'ab',
+              label: 'ab'
+            }
+          ]
+        },
+        {
+          id: 'b',
+          label: 'b'
+        },
+        {
+          id: 'c',
+          label: 'c'
+        }
+      ]
+    }
+  },
+  methods: {
+    changeType() {
+      if (this.form.dicCode === '6') {
+        // this.crudDict.getDicts()
+        this.getTemplateTree()
+      }
+    },
+    getTemplateTree() {
+      crudDict.getDicts().then(res => {
+        this.templateTree = res
+      })
+    },
+    normalizer(node) {
+      return {
+        id: node.id,
+        label: node.dicName,
+        children: node.childMenus
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/category/index.vue b/src/views/category/index.vue
index f10cf0f..dbed9d9 100644
--- a/src/views/category/index.vue
+++ b/src/views/category/index.vue
@@ -1,35 +1,7 @@
 <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;" @change="changeType">
-              <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="templateTree" placeholder="" style="width: 370px;" :disabled="form.dicCode !== '6'" :normalizer="normalizer" />
-          </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>
+    <!--修改新增表单组件-->
+    <eForm />
     <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
@@ -51,19 +23,8 @@
         </div>
       </div>
     </el-dialog>
-    <el-dialog title="排序" :visible.sync="sortVisible">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column type="index + 1" label="序号" width="100" />
-          <el-table-column prop="dicName" label="门类名称" />
-        </el-table>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleSort">保存</el-button>
-        </div>
-      </div>
-    </el-dialog>
+    <!--排序对话框组件-->
+    <sortDialog ref="sort" />
     <!-- 字典列表 -->
     <el-row class="container-main" :gutter="20">
       <el-col class="container-left curd-in-out" :xs="10" :sm="8" :md="5" :lg="6" :xl="5">
@@ -99,15 +60,15 @@
 
 <script>
 import crudDict from '@/api/archivesConfig/dict'
-import CRUD, { presenter, header, form } from '@crud/crud'
+import CRUD, { presenter, header } from '@crud/crud'
+import eForm from './form'
+import sortDialog from './sortDialog'
 import crudOperation from '@crud/CRUD.operation'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { findSubsetById } from '@/api/archivesConfig/dictDetail'
 
-const defaultForm = { id: null, dicName: null, dicCode: '1', dicExplain: null, dicType: true }
 export default {
   name: 'Category',
-  components: { crudOperation, Treeselect },
+  components: { crudOperation, eForm, sortDialog },
   cruds() {
     return [
       CRUD({
@@ -125,7 +86,7 @@ export default {
       })
     ]
   },
-  mixins: [presenter(), header(), form(defaultForm)],
+  mixins: [presenter(), header()],
   data() {
     return {
       rules: {
@@ -143,63 +104,14 @@ export default {
         children: 'childMenus',
         label: 'dicName'
       },
-      selectOptions: [
-        {
-          value: '1',
-          label: '文件夹'
-        },
-        {
-          value: '2',
-          label: '项目'
-        },
-        {
-          value: '3',
-          label: '案卷'
-        },
-        {
-          value: '4',
-          label: '卷内'
-        },
-        {
-          value: '5',
-          label: '文件'
-        },
-        {
-          value: '6',
-          label: '选择模板'
-        }
-      ],
-      templateTree: [
-        {
-          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,
-      sortVisible: false,
+      // sortVisible: false,
       deleteData: {},
       activeIndex: 0,
       sortLoading: false
+      // sortTableData: []
     }
   },
   methods: {
@@ -251,29 +163,11 @@ export default {
       done()
     },
     toSort(data) {
-      this.sortVisible = true
-      console.log(data)
-    },
-    handleSort() {
-
-    },
-    changeType() {
-      if (this.form.dicCode === '6') {
-        // this.crudDict.getDicts()
-        this.getTemplateTree()
-      }
-    },
-    getTemplateTree() {
-      crudDict.getDicts().then(res => {
-        this.templateTree = res
+      findSubsetById(data[0].id).then(res => {
+        this.$refs.sort.sortTableData = res.content
+        this.$refs.sort.sortVisible = true
+        // this.rowDrop()
       })
-    },
-    normalizer(node) {
-      return {
-        id: node.id,
-        label: node.dicName,
-        children: node.childMenus
-      }
     }
   }
 }
@@ -281,7 +175,7 @@ export default {
 
 <style lang="scss" scoped>
 .container-left,
-.container-right{
+.container-right {
   min-height: calc(100vh - 240px);
 }
 .curd-in-out {
@@ -295,16 +189,14 @@ export default {
 }
 .tab-nav {
   margin-bottom: 0;
-  li{
+  li {
     padding: 0 10px;
-    &:first-child{
+    &:first-child {
       padding: 0 24px;
-
     }
   }
 }
-.container-left .el-tree{
+.container-left .el-tree {
   margin: 40px 0 20px 0;
 }
-
 </style>
diff --git a/src/views/category/sortDialog.vue b/src/views/category/sortDialog.vue
new file mode 100644
index 0000000..bf32e9f
--- /dev/null
+++ b/src/views/category/sortDialog.vue
@@ -0,0 +1,55 @@
+<template>
+  <!--表单组件-->
+  <el-dialog title="排序" :visible.sync="sortVisible" @open="open">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <el-table :data="sortTableData" class="sort" style="width: 100%;max-height: 70vh;" row-key="id">
+        <el-table-column type="index" label="序号" width="100" />
+        <el-table-column prop="dicName" label="门类名称" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+export default {
+  data() {
+    return {
+      sortVisible: false,
+      sortTableData: []
+    }
+  },
+  methods: {
+    // 行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      console.log(1)
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    open() {
+      this.rowDrop('sort', 'sortTableData')
+    },
+    handleSort() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>