门类管理新增,修改,排序对话框

3 years ago · 2a65ae47f7
4 changed files with 213 additions and 128 deletions
--- 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,
--- a/src/views/category/form.vue
+++ 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>
--- 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>
--- a/src/views/category/sortDialog.vue
+++ 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>