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="treeData" @select="handleSelect">
            <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 :schemas="formSchema" :model="formData" />
            </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" @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="treeData" @select="handleSelect">
            <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="formSchema" :model="formData" />
            </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>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts">
  import { createVNode, defineComponent, reactive, ref } 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',
    setup() {
      const activeKey = ref('1');
      const activeKey2 = ref('1');
      const disabled = ref(false);

      const addApartment = () => {
        disabled.value = false;
      };

      const addApartmentSon = () => {
        disabled.value = false;
      };
      const deleteApartment = () => {
        Modal.confirm({
          title: '是否确认删除',
          icon: createVNode(ExclamationCircleOutlined),
          content: createVNode('div', { style: 'color:red;' }, ''),
          onOk() {},
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      };
      const addUser = () => {
        disabled.value = false;
      };

      const addUserSon = () => {
        disabled.value = false;
      };
      const deleteUser = () => {
        Modal.confirm({
          title: '是否确认删除',
          icon: createVNode(ExclamationCircleOutlined),
          content: createVNode('div', { style: 'color:red;' }, ''),
          onOk() {},
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      };

      const handleSelect = (selectedKeys: any, info: any) => {
        console.log(selectedKeys, 'selectedKeys');
        console.log(info, 'info');
      };
      const ApartmentSure = () => {
        disabled.value = !disabled.value;
      };

      const treeData = [
        {
          title: '铁路总局',
          key: '0-0',
          children: [
            { title: '济阳站', key: '0-0-0' },
            { title: '临沂站', key: '0-0-1' },
          ],
        },
      ];

      let formData = reactive({
        department: '',
        remark: '',
      });

      const formSchema = reactive([
        {
          field: 'field111',
          component: 'NsChildForm',
          componentProps: {
            schemas: [
              {
                label: '部门名称',
                field: 'department',
                component: 'NsSelect',
                componentProps: {
                  disabled: disabled,
                  placeholder: '请选择部门',
                  options: [
                    {
                      label: '正常',
                      value: 1,
                    },
                    {
                      label: '冻结',
                      value: 2,
                    },
                  ],
                },
                rules: [
                  {
                    required: false,
                    message: '请选择部门',
                  },
                ],
              },
              {
                label: '上级部门',
                field: 'department',
                component: 'NsSelect',
                componentProps: {
                  disabled: disabled,
                  placeholder: '请选择上级部门',
                  options: [
                    {
                      label: '正常',
                      value: 1,
                    },
                    {
                      label: '冻结',
                      value: 2,
                    },
                  ],
                },
              },
              {
                label: '部门编码',
                field: 'department',
                component: 'NsSelect',
                componentProps: {
                  disabled: disabled,
                  placeholder: '请选择部门编码',
                  options: [
                    {
                      label: '正常',
                      value: 1,
                    },
                    {
                      label: '冻结',
                      value: 2,
                    },
                  ],
                },
                rules: [
                  {
                    required: false,
                    message: '请选择部门编码',
                  },
                ],
              },
              {
                label: '排序',
                field: 'order',
                component: 'NsInput',
                componentProps: {
                  disabled: disabled,
                  placeholder: '请输入排序',
                },
                rules: [
                  {
                    required: false,
                    message: '请输入排序',
                  },
                ],
              },
              {
                field: 'remark',
                label: '备注',
                component: 'NsTextarea',
                componentProps: {
                  disabled: disabled,
                  placeholder: '请输入',
                },
              },
            ],
          },
        },
      ]);
      return {
        disabled,
        formSchema,
        formData,
        treeData,
        handleSelect,
        activeKey,
        activeKey2,
        ApartmentSure,
        addApartment,
        addApartmentSon,
        deleteApartment,
        deleteUser,
        addUser,
        addUserSon,
      };
    },
  });
</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-left: 10px;
  }
</style>