From d92c946254df439a513d10f14863561244ba61a5 Mon Sep 17 00:00:00 2001
From: zhaoxiao <zhaoxiao@syxysoft.com>
Date: Wed, 1 Sep 2021 18:26:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=96=99=E7=9B=AE=E5=BD=95=E7=BB=B4?=
 =?UTF-8?q?=E6=8A=A4=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DataDirectoryMaintenance.vue              | 206 ++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 src/views/dataNetworkDiskManagement/dataDirectory/DataDirectoryMaintenance.vue

diff --git a/src/views/dataNetworkDiskManagement/dataDirectory/DataDirectoryMaintenance.vue b/src/views/dataNetworkDiskManagement/dataDirectory/DataDirectoryMaintenance.vue
new file mode 100644
index 0000000..c6b9190
--- /dev/null
+++ b/src/views/dataNetworkDiskManagement/dataDirectory/DataDirectoryMaintenance.vue
@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+        <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
+      </div>
+
+      <div class="data-directory-container">
+        <div class="data-directory-container-left">
+          <a-tree
+              v-model="checkedKeys"
+              checkable
+              :expanded-keys="expandedKeys"
+              :auto-expand-parent="autoExpandParent"
+              :selected-keys="selectedKeys"
+              :tree-data="treeData"
+              @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>
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_committee.png'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+
+export default {
+  name: 'DataDirectoryMaintenance',
+  components: { PageHeaderTitle },
+  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: ''
+      },
+      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: [],
+    }
+  },
+  methods: {
+    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;
+    },
+    onCheck(checkedKeys) {
+      console.log('onCheck', checkedKeys);
+      this.checkedKeys = checkedKeys;
+    },
+    onSelect(selectedKeys, info) {
+      console.log('onSelect', info);
+      this.selectedKeys = selectedKeys;
+    },
+  }
+}
+</script>
+
+<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%;
+  }
+
+  &-divider {
+    width: 2px;
+    background-color: #999999;
+  }
+
+  &-right {
+    width: calc(55% - 2px);
+    padding-left: 20px;
+  }
+}
+</style>
\ No newline at end of file