SaaS-lib/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue

<!-- @format -->

<template>
  <div class="main">
    <div class="left">
      <div class="ns-table-title">部门管理</div>
      <a-row>
        <a-col :span="12" class="tree">
          <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="apartmentTreeData" defaultExpandAll @select="SelectApartmentTree">
            <template #title="{ title }">
              {{ title }}
            </template>
          </a-tree>
        </a-col>
        <a-col :span="12" class="list">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="部门信息">
              <ns-form
                ref="formRef"
                :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
                defaultExpandAll
                @select="ApartmentSelect">
                <template #title="{ title }">
                  {{ title }}
                </template>
              </a-tree>
            </a-tab-pane>
          </a-tabs>
          <ns-button style="margin: 20px" type="primary" @click="CancelApartment">取消</ns-button>
          <ns-button type="primary" @click="ApartmentSure">{{
            disabled ? '编辑' : '确定'
          }}</ns-button>
        </a-col>
      </a-row>
    </div>
    <div class="right">
      <div class="ns-table-title">角色管理</div>
      <a-row>
        <a-col :span="12" class="tree">
          <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="userTreeData" defaultExpandAll @select="SelectUserTree">
            <template #title="{ title }">
              {{ title }}
            </template>
          </a-tree>
        </a-col>
        <a-col :span="12" class="list">
          <a-tabs v-model:activeKey="activeKey2">
            <a-tab-pane key="1" tab="角色信息">
              <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"
                defaultExpandAll
                checkable
                @select="UserSelect">
                <template #title="{ title }">
                  {{ title }}
                </template>
              </a-tree>
            </a-tab-pane>
          </a-tabs>
          <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, watch } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { http } from '/nerv-lib/util/http';
  import { uuid } from '@antv/x6/lib/util/string/uuid';
  import { cloneDeep } from 'lodash-es';
  import { formConfig, formConfig2 } from './config';
  export default defineComponent({
    name: 'AuthorityManageIndex',
    setup() {
      const formRef = ref();
      let formData = ref({});
      let formData2 = ref({});
      const activeKey = ref('1');
      const activeKey2 = ref('1');
      const disabled = ref(true);
      const disabled2 = ref(true);
      const ApartcheckedKeys = ref<string[]>([]);
      const UsercheckedKeys = ref<string[]>([]);
      const selectKey = ref();
      const selectRef = ref();
      const selectKey2 = ref();
      const selectRef2 = ref();
      const formSchema = formConfig(disabled as any);
      const formSchema2 = formConfig2(disabled2 as any);
      watch(ApartcheckedKeys, () => {
        console.log('checkedKeys', ApartcheckedKeys.value);
      });
      watch(UsercheckedKeys, () => {
        console.log('checkedKeys', UsercheckedKeys.value);
      });

      const opMap: any = {
        type: 'add',
        fuc: () => {},
        record: {},
      };

      const apartmentTreeData = ref([
        {
          title: '铁路总局',
          key: '0-0',
          info: { name: '铁路总局' },
          children: [
            { title: '济阳站', key: '0-0-0', info: { name: '济阳站' } },
            { title: '临沂站', key: '0-0-1', info: { name: '临沂站' } },
          ],
        },
      ]);

      const userTreeData = ref([
        {
          title: '产品总监',
          key: '0-0',
          children: [
            { title: '产品经理', key: '0-0-0', info: { departname: '产品经理' } },
            { title: '产品助理', key: '0-0-1', info: { departname: '产品助理' } },
          ],
        },
      ]);

      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 = ref([
        {
          title: '产品总监',
          key: '0-0',
          children: [
            { title: '产品经理1', key: '0-0-0' },
            { title: '产品经理2', key: '0-0-1' },
          ],
        },
      ]);

      const addApartment = () => {
        disabled.value = false;
        opMap.type = 'add';
      };

      const addApartmentSon = () => {
        disabled.value = false;
        opMap.type = 'addson';
      };

      const addUser = () => {
        disabled2.value = false;
      };

      const addUserSon = () => {
        disabled.value = false;
        opMap.type = 'addson';
      };
      const deleteApartment = () => {
        Modal.confirm({
          title: '是否确认删除',
          icon: createVNode(ExclamationCircleOutlined),
          content: createVNode('div', { style: 'color:red;' }, ''),
          onOk() {
            function deepDel(data = apartmentTreeData.value[0].children) {
              data.map((item, index) => {
                if (item.key === selectKey.value) data.splice(index, 1);
              });
            }
            deepDel();
            console.log(selectKey.value);
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      };

      const deleteUser = () => {
        Modal.confirm({
          title: '是否确认删除',
          icon: createVNode(ExclamationCircleOutlined),
          content: createVNode('div', { style: 'color:red;' }, ''),
          onOk() {
            function deepDel(data = userTreeData.value[0].children) {
              data.map((item, index) => {
                if (item.key === selectKey2.value) data.splice(index, 1);
              });
            }
            deepDel();
            console.log(selectKey2.value);
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      };

      const SelectApartmentTree = (selectedKeys: any, info: any) => {
        disabled.value = false;
        console.log(selectedKeys, 'selectedKeys');
        console.log(info.node.dataRef, 'info');
        selectKey.value = selectedKeys[0];
        selectRef.value = info.node.dataRef;
        formData.value = info.node.dataRef.info;
      };
      const SelectUserTree = (selectedKeys: any, info: any) => {
        disabled2.value = false;
        console.log(selectedKeys, 'selectedKeys');
        console.log(info.node.dataRef.info, 'info');
        selectKey2.value = selectedKeys[0];
        selectRef2.value = info.node.dataRef;
        formData2.value = info.node.dataRef.info;
      };

      const CancelApartment = () => {
        disabled.value = true;
      };

      const CancelUser = () => {
        disabled2.value = true;
      };

      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 = () => {
        // formRef.value?.triggerSubmit().then(() => {});

        disabled.value = !disabled.value;
        opMap.fuc && opMap.fuc(formData.value);
        // console.log(formData.value.name, 'formData');
        console.log(opMap.type, 'opMap.type');
        if (opMap.type === 'add') {
          apartmentTreeData.value[0].children.push({
            title: formData.value.name,
            key: 'a1',
            info: { ...formData.value },
          });
        } else if (selectRef.value && opMap.type === 'addson')
          selectRef.value['children'] = [
            { key: '123', title: formData.value.name, info: { ...cloneDeep(formData.value) } },
          ];
        else {
          console.log('ss');
        }
        formData.value = {};
      };
      const UserSure = () => {
        disabled2.value = !disabled2.value;
        opMap.fuc && opMap.fuc(formData2.value);
        console.log(formData2.value, 'formData2');
        console.log(opMap.type, 'opMap.type');
        if (opMap.type === 'add') {
          userTreeData.value[0].children.push({
            title: formData2.value.departname,
            key: 'a2',
            info: { ...formData2.value },
          });
        } else if (selectRef2.value && opMap.type === 'addson')
          selectRef2.value['children'] = [
            {
              key: '123',
              title: formData2.value.departname,
              info: { ...cloneDeep(formData2.value) },
            },
          ];
        else {
          console.log('ss');
        }
        formData2.value = {};
      };

      return {
        disabled,
        disabled2,
        formSchema,
        formSchema2,
        formData,
        formData2,
        apartmentTreeData,
        userTreeData,
        SelectApartmentTree,
        SelectUserTree,
        activeKey,
        activeKey2,
        ApartmentSure,
        UserSure,
        addApartment,
        addApartmentSon,
        deleteApartment,
        deleteUser,
        addUser,
        addUserSon,
        CancelApartment,
        CancelUser,
        apartmentAdminTreeData,
        ApartmentSelect,
        ApartcheckedKeys,
        userAdminTreeData,
        UsercheckedKeys,
        UserSelect,
        formRef,
      };
    },
  });
</script>
<style scoped>
  .main {
    display: flex;
    flex: 1;
  }
  .left {
    width: 50%;
    height: calc(100vh-50px);
    border-right: 5px solid rgb(229, 235, 240);
  }
  .tree {
    width: 400px;
    height: 89vh;
    border-right: 2px solid rgb(229, 235, 240);
  }
  .right {
    width: 50%;
  }

  .top {
    height: 50vh;
    border-bottom: 5px solid rgb(229, 235, 240);
  }
  .ns-table-title {
    text-align: left;
    height: 46px;
    line-height: 46px;
    font-size: 18px;
    font-weight: bold;
    user-select: text;
    padding-left: 16px;
    width: 100%;
    border-bottom: 2px solid rgb(229, 235, 240);
  }
  .table {
    width: 2000px;
  }
  .admin {
    text-align: left;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    font-weight: bold;
    user-select: text;
    padding-left: 16px;
    width: calc(100% + 32px);
  }
  .form {
    margin: 20px;
  }
</style>