From 3e9897b798dafe956229f6f83ffd18f1e0139a94 Mon Sep 17 00:00:00 2001
From: dinghao <2639919794@qq.com>
Date: Wed, 22 May 2024 17:43:25 +0800
Subject: [PATCH] feat:"tijaio"

---
 .../organizationManage/departmentManage/index.vue  | 274 +++++++++++++++++++--
 1 file changed, 257 insertions(+), 17 deletions(-)

diff --git a/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue b/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
index dd4ac37..07fcae1 100644
--- a/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
+++ b/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
@@ -9,7 +9,7 @@
           <ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button>
           <ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button>
           <ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button>
-          <a-tree :tree-data="treeData" @select="handleSelect">
+          <a-tree :tree-data="apartmentTreeData" @select="SelectApartmentTree">
             <template #title="{ title }">
               {{ title }}
             </template>
@@ -18,11 +18,21 @@
         <a-col :span="12" class="list">
           <a-tabs v-model:activeKey="activeKey">
             <a-tab-pane key="1" tab="部门信息">
-              <ns-form :schemas="formSchema" :model="formData" />
+              <ns-form :schemas="formSchema" :model="formData" formLayout="vertical" class="form" />
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="部门权限">
+              <a-tree
+                :tree-data="apartmentAdminTreeData"
+                v-model:checkedKeys="ApartcheckedKeys"
+                checkable
+                @select="ApartmentSelect">
+                <template #title="{ title }">
+                  {{ title }}
+                </template>
+              </a-tree>
             </a-tab-pane>
-            <a-tab-pane key="2" tab="部门权限">2</a-tab-pane>
           </a-tabs>
-          <ns-button style="margin: 10px" type="primary">取消</ns-button>
+          <ns-button style="margin: 20px" type="primary" @click="CancelApartment">取消</ns-button>
           <ns-button type="primary" @click="ApartmentSure">{{
             disabled ? '编辑' : '确定'
           }}</ns-button>
@@ -36,7 +46,7 @@
           <ns-button style="margin: 10px" type="primary" @click="addUser">新增角色</ns-button>
           <ns-button type="primary" @click="addUserSon">新增子角色</ns-button>
           <ns-button style="margin: 10px" type="primary" @click="deleteUser">删除</ns-button>
-          <a-tree :tree-data="treeData" @select="handleSelect">
+          <a-tree :tree-data="userTreeData" @select="SelectUserTree">
             <template #title="{ title }">
               {{ title }}
             </template>
@@ -45,28 +55,53 @@
         <a-col :span="12" class="list">
           <a-tabs v-model:activeKey="activeKey2">
             <a-tab-pane key="1" tab="角色信息">
-              <ns-form :schemas="formSchema" :model="formData" />
+              <ns-form
+                :schemas="formSchema2"
+                :model="formData2"
+                formLayout="vertical"
+                class="form" />
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="角色权限">
+              <a-tree
+                :tree-data="userAdminTreeData"
+                v-model:checkedKeys="UsercheckedKeys"
+                checkable
+                @select="UserSelect">
+                <template #title="{ title }">
+                  {{ title }}
+                </template>
+              </a-tree>
             </a-tab-pane>
-            <a-tab-pane key="2" tab="角色权限">2</a-tab-pane>
           </a-tabs>
-          <ns-button style="margin: 10px" type="primary">取消</ns-button>
-          <ns-button type="primary">确定</ns-button>
+          <ns-button style="margin: 20px" type="primary" @click="CancelUser">取消</ns-button>
+          <ns-button type="primary" @click="UserSure">{{ disabled2 ? '编辑' : '确定' }}</ns-button>
         </a-col>
       </a-row>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { createVNode, defineComponent, reactive, ref } from 'vue';
+  import { createVNode, defineComponent, reactive, ref, watch } from 'vue';
   import { Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { http } from '/nerv-lib/util/http';
   export default defineComponent({
-    name: 'OrderListIndex',
+    name: 'authorityManageIndex',
     setup() {
+      const ApartcheckedKeys = ref<string[]>([]);
+      const UsercheckedKeys = ref<string[]>([]);
+
+      watch(ApartcheckedKeys, () => {
+        console.log('checkedKeys', ApartcheckedKeys.value);
+      });
+      watch(UsercheckedKeys, () => {
+        console.log('checkedKeys', UsercheckedKeys.value);
+      });
+
       const activeKey = ref('1');
       const activeKey2 = ref('1');
       const disabled = ref(false);
+      const disabled2 = ref(false);
 
       const addApartment = () => {
         disabled.value = false;
@@ -88,7 +123,7 @@
         });
       };
       const addUser = () => {
-        disabled.value = false;
+        disabled2.value = false;
       };
 
       const addUserSon = () => {
@@ -107,15 +142,41 @@
         });
       };
 
-      const handleSelect = (selectedKeys: any, info: any) => {
+      const SelectApartmentTree = (selectedKeys: any, info: any) => {
         console.log(selectedKeys, 'selectedKeys');
         console.log(info, 'info');
       };
+      const SelectUserTree = (selectedKeys: any, info: any) => {
+        console.log(selectedKeys, 'selectedKeys');
+        console.log(info, 'info');
+      };
+
+      const ApartmentSelect = (selectedKeys: any, info: any) => {
+        console.log(selectedKeys, 'selectedKeys');
+        console.log(info, 'info');
+      };
+
+      const UserSelect = (selectedKeys: any, info: any) => {
+        console.log(selectedKeys, 'selectedKeys');
+        console.log(info, 'info');
+      };
+
       const ApartmentSure = () => {
         disabled.value = !disabled.value;
       };
+      const UserSure = () => {
+        disabled2.value = !disabled2.value;
+      };
+
+      const CancelApartment = () => {
+        disabled.value = true;
+      };
+
+      const CancelUser = () => {
+        disabled2.value = true;
+      };
 
-      const treeData = [
+      const apartmentTreeData = [
         {
           title: '铁路总局',
           key: '0-0',
@@ -125,11 +186,69 @@
           ],
         },
       ];
+      const userTreeData = [
+        {
+          title: '产品总监',
+          key: '0-0',
+          children: [
+            { title: '产品经理', key: '0-0-0' },
+            { title: '产品助理', key: '0-0-1' },
+          ],
+        },
+      ];
+
+      const apartmentAdminTreeData = [
+        {
+          title: '首页',
+          key: '0-0',
+          children: [
+            {
+              title: '控制台',
+              key: '0-0-0',
+              children: [
+                { title: 'leaf', key: '0-0-0-0' },
+                { title: 'leaf', key: '0-0-0-1' },
+              ],
+            },
+            {
+              title: '用户管理',
+              key: '0-0-1',
+              children: [{ key: '0-0-1-0', title: 'sss' }],
+            },
+          ],
+        },
+      ];
+
+      const userAdminTreeData = [
+        {
+          title: '首页',
+          key: '0-0',
+          children: [
+            {
+              title: '工作台',
+              key: '0-0-0',
+              children: [
+                { title: 'leaf', key: '0-0-0-0' },
+                { title: 'leaf', key: '0-0-0-1' },
+              ],
+            },
+            {
+              title: '系统管理',
+              key: '0-0-1',
+              children: [{ key: '0-0-1-0', title: 'sss' }],
+            },
+          ],
+        },
+      ];
 
       let formData = reactive({
         department: '',
         remark: '',
       });
+      let formData2 = reactive({
+        department: '',
+        remark: '',
+      });
 
       const formSchema = reactive([
         {
@@ -234,21 +353,142 @@
           },
         },
       ]);
+      const formSchema2 = reactive([
+        {
+          field: 'field111',
+          component: 'NsChildForm',
+          componentProps: {
+            schemas: [
+              {
+                label: '角色名称',
+                field: 'department',
+                component: 'NsSelect',
+                componentProps: {
+                  disabled: disabled2,
+                  placeholder: '请选择角色名称',
+                  options: [
+                    {
+                      label: '正常',
+                      value: 1,
+                    },
+                    {
+                      label: '冻结',
+                      value: 2,
+                    },
+                  ],
+                },
+                rules: [
+                  {
+                    required: false,
+                    message: '请选择角色名称',
+                  },
+                ],
+              },
+              {
+                label: '上级领导',
+                field: 'department',
+                component: 'NsSelect',
+                componentProps: {
+                  disabled: disabled2,
+                  placeholder: '请选择上级领导',
+                  options: [
+                    {
+                      label: '正常',
+                      value: 1,
+                    },
+                    {
+                      label: '冻结',
+                      value: 2,
+                    },
+                  ],
+                },
+              },
+              {
+                label: '节点编码',
+                field: 'department',
+                component: 'NsSelect',
+                componentProps: {
+                  disabled: disabled2,
+                  placeholder: '请选择节点编码',
+                  options: [
+                    {
+                      label: '正常',
+                      value: 1,
+                    },
+                    {
+                      label: '冻结',
+                      value: 2,
+                    },
+                  ],
+                },
+                rules: [
+                  {
+                    required: false,
+                    message: '请选择节点编码',
+                  },
+                ],
+              },
+              {
+                label: '是否部门领导',
+                field: 'sex',
+                component: 'NsRadioGroup',
+                componentProps: {
+                  disabled: disabled2,
+                  radioType: 'radio',
+                  options: [
+                    { label: '是', value: 1 },
+                    { label: '否', value: 2 },
+                  ],
+                  rules: [
+                    {
+                      required: false,
+                      message: '请选择是否部门领导',
+                    },
+                  ],
+                },
+              },
+              {
+                field: 'remark',
+                label: '备注',
+                component: 'NsTextarea',
+                componentProps: {
+                  disabled: disabled2,
+                  placeholder: '请输入',
+                },
+              },
+            ],
+          },
+        },
+      ]);
       return {
         disabled,
+        disabled2,
         formSchema,
+        formSchema2,
         formData,
-        treeData,
-        handleSelect,
+        formData2,
+        apartmentTreeData,
+        userTreeData,
+        SelectApartmentTree,
+        SelectUserTree,
         activeKey,
         activeKey2,
         ApartmentSure,
+        UserSure,
         addApartment,
         addApartmentSon,
         deleteApartment,
         deleteUser,
         addUser,
         addUserSon,
+        CancelApartment,
+        CancelUser,
+        apartmentAdminTreeData,
+        ApartmentSelect,
+        ApartcheckedKeys,
+        userAdminTreeData,
+        UsercheckedKeys,
+        UserSelect,
       };
     },
   });
@@ -301,6 +541,6 @@
     width: calc(100% + 32px);
   }
   .form {
-    margin-left: 10px;
+    margin: 20px;
   }
 </style>