资料目录管理；工作组成员维护

src/views/dataNetworkDiskManagement/dataDirectory/DataDirectoryMaintenance.vue

@@ -9,52 +9,29 @@
       </div>
 
       <div class="data-directory-container">
+        <!--        左侧区域-->
         <div class="data-directory-container-left">
+          <!--          查询区域-->
+          <div class="table-page-search-wrapper">
+            <a-input-search v-model="queryParam.name" @search="searchQuery" style="width:100%;margin-top: 10px" placeholder="请输入文件夹名称" allowClear/>
+          </div>
+          <!--          /查询区域-->
           <a-tree
-              v-model="checkedKeys"
+              v-model="selectedRowKeys"
               checkable
-              :expanded-keys="expandedKeys"
-              :auto-expand-parent="autoExpandParent"
-              :selected-keys="selectedKeys"
-              :tree-data="treeData"
+              :tree-data="dataSource"
+              :replaceFields="replaceFields"
               @expand="onExpand"
               @select="onSelect"
           />
         </div>
+        <!--        /左侧区域-->
         <div class="data-directory-container-divider"></div>
+        <!--        右侧区域-->
         <div class="data-directory-container-right">
-          <div class="part-title">
-            <div class="part-title-text">基本信息</div>
-          </div>
-          <a-form :form="form">
-            <a-form-item label="文件夹名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input placeholder="请输入文件夹名称"
-                       v-decorator="['directoryName',validatorRules.directoryName]"
-                       :maxLength='50'
-                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
-            </a-form-item>
-            <a-form-item label="上级名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input placeholder="请输入文件夹名称"
-                       v-decorator="['directoryName',validatorRules.directoryName]"
-                       :maxLength='50'
-                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
-            </a-form-item>
-            <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input placeholder="请输入文件夹名称"
-                       v-decorator="['directoryName',validatorRules.directoryName]"
-                       :maxLength='50'
-                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
-            </a-form-item>
-            <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-textarea
-                  placeholder="请输入备注"
-                  v-decorator="['remarks']"
-                  :auto-size="{ minRows: 3, maxRows: 6 }"
-                  :maxLength='200'
-                  @change="e => {e.target.value = (e.target.value + '').trim()}"/>
-            </a-form-item>
-          </a-form>
+          <data-directory-module ref="dataDirectoryForm" @ok="dataDirectoryFormOk"></data-directory-module>
         </div>
+        <!--        /右侧区域-->
       </div>
     </a-card>
   </div>
@@ -64,96 +41,63 @@
 import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
 import IconImg from '@/assets/imgs/icon/icon_committee.png'
 import { JeroListMixin } from '@/mixins/JeroListMixin'
+import DataDirectoryModule from './modules/DataDirectoryModule'
+import { getAction } from '../../../api/manage'
 
 export default {
   name: 'DataDirectoryMaintenance',
-  components: { PageHeaderTitle },
+  components: { PageHeaderTitle, DataDirectoryModule },
   mixins: [JeroListMixin],
   data() {
     return {
       IconImg,
-      form: this.$form.createForm(this),
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 4 }
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 18 }
-      },
-      validatorRules: {
-        directoryName: {
-          rules: [{ required: true, message: '请输入文件夹名称' }]
-        }
-      },
       url: {
-        list: ''
+        list: '/payDataDirectory/payDataDirectory/queryByName',
+        queryById: '/payDataDirectory/payDataDirectory/getOne',
+        deleteBatch: '/payDataDirectory/payDataDirectory/deleteBatch'
       },
-      treeData: [
-        {
-          title: '0-0',
-          key: '0-0',
-          children: [
-            {
-              title: '0-0-0',
-              key: '0-0-0',
-              children: [
-                { title: '0-0-0-0', key: '0-0-0-0' },
-                { title: '0-0-0-1', key: '0-0-0-1' },
-                { title: '0-0-0-2', key: '0-0-0-2' }
-              ]
-            },
-            {
-              title: '0-0-1',
-              key: '0-0-1',
-              children: [
-                { title: '0-0-1-0', key: '0-0-1-0' },
-                { title: '0-0-1-1', key: '0-0-1-1' },
-                { title: '0-0-1-2', key: '0-0-1-2' }
-              ]
-            },
-            {
-              title: '0-0-2',
-              key: '0-0-2'
-            }
-          ]
-        },
-        {
-          title: '0-1',
-          key: '0-1',
-          children: [
-            { title: '0-1-0-0', key: '0-1-0-0' },
-            { title: '0-1-0-1', key: '0-1-0-1' },
-            { title: '0-1-0-2', key: '0-1-0-2' }
-          ]
-        },
-        {
-          title: '0-2',
-          key: '0-2'
-        }
-      ],
-      expandedKeys: ['0-0-0', '0-0-1'],
       autoExpandParent: true,
-      checkedKeys: ['0-0-0'],
-      selectedKeys: [],
+      checkedKeys: [],
+      columns: [], // 防止混入报错
+      replaceFields: {
+        children:'children',
+        title:'name',
+        key:'id'
+      }
     }
   },
   methods: {
     onExpand(expandedKeys) {
-      console.log('onExpand', expandedKeys);
+      console.log('onExpand', expandedKeys)
       // if not set autoExpandParent to false, if children expanded, parent can not collapse.
       // or, you can remove all expanded children keys.
-      this.expandedKeys = expandedKeys;
-      this.autoExpandParent = false;
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
     },
     onCheck(checkedKeys) {
-      console.log('onCheck', checkedKeys);
-      this.checkedKeys = checkedKeys;
+      console.log('onCheck', checkedKeys)
+      this.checkedKeys = checkedKeys
     },
-    onSelect(selectedKeys, info) {
-      console.log('onSelect', info);
-      this.selectedKeys = selectedKeys;
+    /**
+     * 点击名称选中
+     * @param info
+     */
+    onSelect(info) {
+      console.log('onSelect', info[0])
+      let param = {
+        id: info[0]
+      }
+      getAction(this.url.queryById, param).then(res => {
+        console.log(res)
+        this.$refs.dataDirectoryForm.edit(res.result)
+      })
     },
+    handleAdd() {
+      this.$refs.dataDirectoryForm.add()
+    },
+    dataDirectoryFormOk() {
+      this.loadData()
+    }
   }
 }
 </script>
@@ -161,36 +105,12 @@ export default {
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
-.part-title {
-  padding: 10px 0;
-  font-size: 16px;
-  font-family: PingFang SC, PingFang SC-Bold;
-  font-weight: 700;
-  text-align: left;
-  color: #333333;
-  position: relative;
-
-  &-text {
-    padding-left: 20px;
-  }
-
-  &-text::before {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 10px;
-    height: 10px;
-    background: #069f99;
-  }
-}
-
 .data-directory-container {
   display: flex;
 
   &-left {
     width: 45%;
+    padding-right: 20px;
   }
 
   &-divider {

src/views/dataNetworkDiskManagement/dataDirectory/modules/DataDirectoryModule.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div class="part-title">
+      <div class="part-title-text">基本信息</div>
+    </div>
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="文件夹名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入文件夹名称"
+                   v-decorator="['name',validatorRules.name]"
+                   :maxLength='50'
+                   @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+        </a-form-item>
+        <a-form-item label="上级名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-select placeholder="请选择上级名称"
+                    v-decorator="['parentId',validatorRules.parentId]"
+                    :maxLength='50'>
+            <a-select-option v-for="item in directoryList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入排序"
+                   v-decorator="['sort',validatorRules.sort]"
+                   :maxLength='50'
+                   @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+        </a-form-item>
+        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-textarea
+              placeholder="请输入备注"
+              v-decorator="['remarks']"
+              :auto-size="{ minRows: 3, maxRows: 6 }"
+              :maxLength='200'
+              @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+        </a-form-item>
+        <a-form-item class="table-operator">
+          <a-button type="primary" @click=handleOk>保存</a-button>
+          <a-button @click="handleCancle">取消</a-button>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { httpAction } from '../../../../api/manage'
+
+export default {
+  name: 'DataDirectoryModule',
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      model: {},
+      confirmLoading: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      validatorRules: {
+        name: {
+          rules: [{ required: true, message: '请输入文件夹名称' }],
+          validateTrigger: 'blur'
+        },
+        parentId: {
+          rules: [{ required: true, message: '请选择上级文件夹' }],
+          validateTrigger: 'blur'
+        }
+      },
+      url: {
+        add: '/payDataDirectory/payDataDirectory/add',
+        edit: '/payDataDirectory/payDataDirectory/edit'
+      },
+      directoryList: []
+    }
+  },
+  created() {
+    this.initDirectoryList()
+  },
+  methods: {
+    initDirectoryList() {
+      httpAction('/payDataDirectory/payDataDirectory/findall', {}, 'get').then(res => {
+        this.directoryList = res.result
+        let levelOne = {
+          id: 0,
+          name: '无父级'
+        }
+        this.directoryList.unshift(levelOne)
+      })
+    },
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'name', 'parentId', 'sort', 'remarks'))
+      })
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          let httpurl = ''
+          let method = 'post'
+          if (!this.model.id) {
+            httpurl += this.url.add
+          } else {
+            httpurl += this.url.edit
+          }
+          const formData = Object.assign(this.model, values)
+          formData.type = 1
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            this.confirmLoading = true
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+            this.initDirectoryList()
+          })
+        }
+      })
+    },
+    handleCancle() {
+      this.model = {}
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>