0810xx

src/api/sys/position.ts

@@ -0,0 +1,76 @@
+import { defHttp } from '/@/utils/http/axios';
+import tool from '/@/utils/Tool';
+
+enum Api {
+  GetChildDepartment = '/user-center/department/getChildDepartment',
+  GetPositionInfoByDepartmentId = '/user-center/position/getPositionInfoByDepartmentId',
+  GetAtpPostTree = '/user-center/post/GetAtpPostTree',
+  SavePost = '/user-center/post/SavePost',
+  DeletePost = '/user-center/post/DeletePost'
+}
+
+/**
+ * @description: 获取机构列表
+ */
+
+export const structureList = () => {
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.GetChildDepartment }).then((res) => {
+      var a = tool.structureTree([res.datas]);
+      console.log(a)
+      resolve(a)
+    })
+  })
+};
+
+/**
+ * @description: 根据机构id获取下属职位列表
+ */
+export const getPostsList = (params) => {
+  const formData = new FormData();
+  Object.keys(params).forEach((key) => formData.append(key, params[key]))
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.GetPositionInfoByDepartmentId, params: formData}).then((res) => {
+      resolve(res)
+    })
+  })
+};
+
+/**
+ * @description: 根据职位id获取下属岗位列表
+ */
+export const getPositionList = (params) => {
+  const formData = new FormData();
+  Object.keys(params).forEach((key) => formData.append(key, params[key]))
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.GetAtpPostTree, params: formData}).then((res) => {
+      resolve(res)
+    })
+  })
+};
+
+/**
+ * @description: 保存岗位
+ */
+export const savePosition = (params) => {
+  const formData = new FormData();
+  Object.keys(params).forEach((key) => formData.append(key, params[key]))
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.SavePost, params: formData}).then((res) => {
+      resolve(res)
+    })
+  })
+};
+
+/**
+ * @description: 删除岗位
+ */
+export const delPosition = (params) => {
+  const formData = new FormData();
+  Object.keys(params).forEach((key) => formData.append(key, params[key]))
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.DeletePost, params: formData}).then((res) => {
+      resolve(res)
+    })
+  })
+};

src/views/systemAdmin/system/position/PositionDrawer.vue

@@ -0,0 +1,152 @@
+<template>
+    <a-drawer :title="title" :width="540" :visible="open" :body-style="{ paddingBottom: '80px' }"
+        :footer-style="{ textAlign: 'right' }" @close="onClose">
+        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <!-- 名称 -->
+            <a-form-item label="岗位名称" name="name">
+                <a-input v-model:value="form.name" style="width: 100%" placeholder="请输入名称" />
+            </a-form-item>
+            <!-- 职责 -->
+            <a-form-item label="岗位职责" name="duty">
+                <a-input v-model:value="form.duty" style="width: 100%" placeholder="请输入职责" />
+            </a-form-item>
+            <!-- 排序 -->
+            <a-form-item label="排序" name="sort">
+                <a-input v-model:value="form.sort" style="width: 100%" placeholder="请输入序号" />
+            </a-form-item>
+        </a-form>
+        <div :style="{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '10px 16px',
+            background: '#fff',
+            textAlign: 'right',
+            zIndex: 1,
+        }">
+            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+            <a-button type="primary" @click="onSubmit">确定</a-button>
+        </div>
+    </a-drawer>
+</template>
+<script>
+import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import { v4 as uuidv4 } from 'uuid';
+import { savePosition } from '/@/api/sys/position';
+
+const props = {
+    formData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    drawerTitle: {
+        type: String,
+        default: "新增岗位"
+    }
+}
+export default defineComponent({
+    name: 'positionDrawer',
+    components: {},
+    props,
+    setup(props, { emit }) {
+        const form = reactive({
+            id: "",
+            orgid: "",
+            oabaseid: "",
+            name: '',
+            duty: '',
+            sort: 0,
+        });
+        const rules = {
+            name: [{
+                required: true,
+                message: '请输入岗位名称',
+                trigger: 'blur'
+            }],
+            duty: [{
+                required: true,
+                message: '请输入岗位职责',
+                trigger: 'blur'
+            }],
+            sort: [{
+                required: true,
+                message: '请输入序号',
+                trigger: 'change'
+            }]
+        };
+        const title = ref(props.drawerTitle)
+        const open = ref(false);
+        const formRef = ref()
+
+        onMounted(() => {
+            if (Object.keys(props.formData).length) {
+                for (let key in form) {
+                    form[key] = props.formData[key]
+                }
+            }
+        })
+        watch(
+            () => [props.formData, props.drawerTitle],
+            ([newF, newD]) => {
+                for (let key in form) {
+                    form[key] = props.formData[key]
+                }
+                title.value = newD
+            },
+            {
+                immediate: true,
+                deep: true
+            }
+        )
+        const showDrawer = () => {
+            open.value = true;
+        };
+        const onClose = () => {
+            open.value = false;
+            resetForm()
+        };
+        const onSubmit = () => {
+            formRef.value.validate().then(() => {
+                //此处调用新增
+                if (title.value === '新增岗位') {
+                    form.id = uuidv4()
+                }
+                form.sort = parseInt(form.sort)
+                savePosition(form).then(res => {
+                    if (res.datas === 1) {
+                        message.success('操作成功')
+                        emit('onSubmit', true)
+                    } else {
+                        message.error('操作失败')
+                        emit('onSubmit', false)
+                    }
+                    onClose()
+                })
+            }).catch((error) => {
+                console.log('error', error);
+            });
+        };
+        const resetForm = () => {
+            formRef.value.resetFields();
+        };
+        return {
+            form,
+            rules,
+            title,
+            open,
+            formRef,
+            labelCol: { span: 6 },
+            wrapperCol: { span: 18 },
+            showDrawer,
+            onClose,
+            onSubmit,
+            resetForm
+        };
+    },
+});
+</script>

src/views/systemAdmin/system/position/RoleDrawer.vue

@@ -1,225 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="500px" @ok="handleSubmit">
-    <BasicForm @register="registerForm">
-      <template #menu>
-        <Spin :spinning="spinning"></Spin>
-      </template>
-    </BasicForm>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-import { defineComponent, ref, computed, unref, nextTick } from 'vue';
-import { BasicForm, useForm } from '/@/components/Form/index';
-import { formSchema, KeysTypeEnum, RoleMenuDictEnum } from './role.data';
-import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-import { BasicTree, TreeItem } from '/@/components/Tree';
-import { useMessage } from '/@/hooks/web/useMessage';
-const { t } = useI18n(); //加载国际化
-// 加载菜单数据
-import { getMenuList } from '/@/api/sys/menu';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { MenuRecord } from '/@/api/sys/model/menuModel';
-import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
-import { findDictItemByCode } from '/@/api/system/dict';
-import { RoleEnum } from '/@/enums/roleEnum';
-import { Spin } from 'ant-design-vue';
-import { useUserStore } from '/@/store/modules/user';
-import { session } from '/@/utils/Memory';
-import { v4 as uuidv4 } from 'uuid';
-
-
-type TreeData = MenuRecord & TreeItem;
-
-export default defineComponent({
-  name: 'RoleDrawer',
-  components: { BasicDrawer, BasicForm, BasicTree, Spin },
-  emits: ['success', 'register'],
-  setup(_, { emit }) {
-    const isUpdate = ref<boolean>(true);
-    const treeData = ref<TreeData[]>([]);
-    const roleMenus = ref<string[]>([]);
-    const roleId = ref<string>('');
-    const checked = ref<string[]>([]); //需要选中的节点
-    const spinning = ref(false);
-    var nowRole = null;
-
-    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
-      labelWidth: 100,
-      schemas: formSchema,
-      showActionButtonGroup: false,
-    });
-
-    const transformName = (data: TreeData[]) => {
-      return data.map((item) => {
-        item.name = t(item.name);
-        if (item.children && item.children.length) {
-          item.children = transformName(item.children as unknown as TreeData[]);
-        }
-        return item;
-      });
-    };
-
-    const userStore = useUserStore();
-    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-      resetFields();
-      roleId.value = '';
-      // 在打开弹窗时清除所有选择的菜单
-      isUpdate.value = data.isUpdate;
-      const roleType = data?.record?.roleType || userStore.getRoleList.at(0);
-
-      try {
-        spinning.value = true;
-        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-
-        if (!unref(treeData).length) {
-          // 获取全部的菜单
-          const menuListModel = await getMenuList();
-          treeData.value = transformName(menuListModel as unknown as TreeData[]);
-        }
-
-        const keys = await getPermissionByRole(roleType);
-        const { keyType } = RoleMenuDictEnum[roleType];
-        treeData.value = getPermissionTreeData(
-          unref(treeData) as unknown as TreeData[],
-          keys,
-          keyType
-        );
-        // 更新
-        if (unref(isUpdate)) {
-          checked.value = [];
-          roleId.value = data.record.id;
-          nowRole = data.record;
-          setFieldsValue(data.record);
-        } else {
-        }
-      } catch (error) {
-        throw error;
-      } finally {
-        spinning.value = false;
-      }
-    });
-
-    const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
-
-    async function handleSubmit() {
-      setDrawerProps({ confirmLoading: true });
-      const { createMessage } = useMessage();
-      try {
-        const values = await validate();
-        const req = {
-          groupName: values.groupName,
-          sort: values.sort
-        };
-        if (unref(isUpdate)) {
-          if (nowRole) {
-            req.updateuser = session.getItem("userInfo").EMPLOYEE.EMPLOYEE_ID;
-            req.groupid = nowRole.groupid;
-          }
-        } else {
-          req.groupid = uuidv4()
-        }
-        saveOrUpdateRoleInfoWithMenu(req).then(() => {
-          closeDrawer();
-          emit('success');
-          nowRole = null;
-          createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);
-        });
-      } finally {
-        setTimeout(() => {
-          setDrawerProps({ confirmLoading: false });
-        }, 300);
-      }
-    }
-
-    const getPermissionByRole = async (roleType: RoleEnum) => {
-      try {
-        const { key } = RoleMenuDictEnum[roleType];
-        const res = await findDictItemByCode({ dictCode: key });
-        return res.map((item) => item.itemValue);
-      } catch (error) { }
-      return [];
-    };
-
-    const getPermissionTreeData = (
-      data: MenuRecord[],
-      permissionKeys: string[],
-      keysType: KeysTypeEnum
-    ) => {
-      const setDisabled = (data: MenuRecord[], flag: boolean) => {
-        return data.map((item) => {
-          item.name = t(item.name);
-          if (item.children && item.children.length) {
-            item.children = setDisabled(item.children, flag);
-          }
-          return {
-            ...item,
-            disabled: flag,
-            icon: item.meta.icon,
-          } as TreeData;
-        });
-      };
-
-      const permissionCompare = (
-        data: MenuRecord[],
-        permissionKeys: string[],
-        keysType: KeysTypeEnum
-      ) => {
-        return data.map((item) => {
-          item.name = t(item.name);
-          const findFlag = permissionKeys.includes(item.permission);
-          if (findFlag) item.isDictCompareDisabled = true;
-          const disabledFlag = keysType === KeysTypeEnum.DISABLED ? findFlag : !findFlag;
-          item.disabled = disabledFlag;
-
-          if (item.isDictCompareDisabled && item.children && item.children.length) {
-            setDisabled(item.children, disabledFlag);
-          } else {
-            if (item.children && item.children.length) {
-              item.children = permissionCompare(item.children, permissionKeys, keysType);
-              item.disabled = item.children.every((temp) => temp.disabled);
-            }
-          }
-          return {
-            ...item,
-            icon: item.meta.icon,
-          } as TreeData;
-        });
-      };
-
-      const result = permissionCompare(data, permissionKeys, keysType).map((item) => {
-        if (item.children && item.children.length) {
-          const rootDisabledFlag = item.children.every((temp) => temp.disabled);
-          item.disabled = rootDisabledFlag;
-        }
-        return item;
-      });
-
-      return result;
-    };
-
-    return {
-      spinning,
-      registerDrawer,
-      registerForm,
-      getTitle,
-      handleSubmit,
-      treeData,
-      roleMenus,
-    };
-  },
-});
-</script>
-
-<style scoped lang="less">
-:deep(.vben-basic-tree) {
-  width: 100% !important;
-}
-
-:deep(.is-unflod) {
-  display: none !important;
-}
-
-:deep(.is-flod) {
-  display: none !important;
-}
-</style>

src/views/systemAdmin/system/position/index.vue

@@ -1,147 +1,303 @@
 <template>
-  <div>
-    <BasicTable :rowSelection="{ type: 'checkbox' }" @register="registerTable" :clickToRowSelect="false">
-      <template #toolbar>
-        <Authority>
-          <a-button type="primary" @click="handleCreate">新增角色</a-button>
-        </Authority>
-        <Authority>
-          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #status="{ record }">
-        <Switch :checked="record.status === 1" :loading="record.pendingStatus" checkedChildren="启用" unCheckedChildren="禁用"
-          @change="(checked: boolean) => statusChange(checked, record)" />
-      </template>
-      <template #action="{ record }">
-        <TableAction :actions="[
-          {
-            label: '编辑',
-            icon: 'clarity:note-edit-line',
-            onClick: handleEdit.bind(null, record),
-          },
-          {
-            label: '删除',
-            icon: 'ant-design:delete-outlined',
-            color: 'error',
-            ifShow: record.roleType != RoleEnum.SYS_ADMIN,
-            popConfirm: {
-              title: '是否确认删除',
-              confirm: handleDeleteOrBatchDelete.bind(null, record),
-            },
-          },
-        ]" />
-      </template>
-    </BasicTable>
-    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
+    <div class="p-4">
+        <div class="position-header">
+            <div class="position-title">岗位管理</div>
+            <div class="handle-btns">
+                <a-button class="btn" type="primary" @click="addHandle">新增</a-button>
+                <a-button class="btn" @click="editHandle">修改</a-button>
+                <a-button class="btn" danger @click="delHandle">删除</a-button>
+            </div>
+        </div>
+        <div class="position-body">
+            <div class="structure-tree list-items">
+                <div class="item-title">部门列表</div>
+                <a-tree :replaceFields="replaceFields" :treeData="treeData" v-if="treeData" @select="nodeSelect"></a-tree>
+            </div>
+            <div class="posts-list list-items">
+                <div class="item-title">职位列表</div>
+                <div class="posts-box item-box">
+                    <div class="posts item" v-for="(item, index) in posts.data" :key="index"
+                        @click="chooseHandle(item, 'posts')">
+                        <span :class="{ 'chosed': item.departid === posts.currentId }">{{ item.departName }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="position-list list-items">
+                <div class="item-title">岗位列表</div>
+                <div class="position-box item-box">
+                    <div class="position item" v-for="(item, index) in position.data" :key="index"
+                        @click="chooseHandle(item, 'position')"><span :class="{ 'chosed': item.id === position.currentId }">
+                            {{ item.name }}</span></div>
+                </div>
+            </div>
+        </div>
+        <PositionDrawer :formData="formData" :drawerTitle="drawerTitle" @onSubmit="onSubmit" ref="drawerRef"></PositionDrawer>
+    </div>
 </template>
-<script lang="ts">
-import { defineComponent, nextTick } from 'vue';
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
-import { useDrawer } from '/@/components/Drawer';
-import RoleDrawer from './RoleDrawer.vue';
-import { columns, searchFormSchema } from './role.data';
-import { RoleEnum } from '/@/enums/roleEnum';
-import { Authority } from '/@/components/Authority';
-import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { Switch, Popconfirm } from 'ant-design-vue';
-import { roleList } from '/@/api/sys/user';
 
-export default defineComponent({
-  name: 'RoleManagement',
-  components: { BasicTable, RoleDrawer, TableAction, Authority, Switch, Popconfirm },
-  setup() {
-    const [registerDrawer, { openDrawer }] = useDrawer();
-    function handleSuccess() {
-      reload();
-    }
-    const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
-      title: '角色列表',
-      api: roleList,
-      columns,
-      formConfig: {
-        labelWidth: 120,
-        schemas: searchFormSchema,
-      },
-      useSearchForm: true,
-      showTableSetting: true,
-      bordered: true,
-      showIndexColumn: false,
-      actionColumn: {
-        width: 200,
-        title: '操作',
-        dataIndex: 'action',
-        slots: { customRender: 'action' },
-        fixed: 'right',
-      },
-    });
-    const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-      useBatchDelete(delRole, handleSuccess, setProps);
-    selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-      // Demo:status为1的选择框禁用
-      if (record.status === 1) {
-        return { disabled: true };
-      } else {
-        return { disabled: false };
-      }
-    };
-    nextTick(() => {
-      setProps(selectionOptions);
-    });
-
-    function handleCreate() {
-      openDrawer(true, {
-        isUpdate: false,
-      });
-    }
+<script>
+import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
+import PositionDrawer from './PositionDrawer.vue';
+import { structureList, getPostsList, getPositionList, delPosition } from '/@/api/sys/position';
+import { message } from 'ant-design-vue';
 
-    function handleEdit(record: Recordable) {
-      openDrawer(true, {
-        record,
-        isUpdate: true,
-      });
-      console.log(record)
-    }
-
-    const statusChange = async (checked, record) => {
-      setProps({
-        loading: true,
-      });
-      setSelectedRowKeys([]);
-      resetSelectedRowKeys();
-      const newStatus = checked ? 1 : 0;
-      const { createMessage } = useMessage();
-      try {
-        await setRoleStatus(record.id, newStatus);
-        if (newStatus) {
-          createMessage.success(`启用成功`);
-        } else {
-          createMessage.success('禁用成功');
+export default defineComponent({
+    name: 'position',
+    components: { PositionDrawer },
+    setup(props, { emit }) {
+        const drawerRef = ref(null)
+        const data = reactive({
+            replaceFields: {
+                children: 'children',
+                title: 'name',
+                key: 'id'
+            },
+            treeData: [],//单位列表树
+            currentNode: "",//当前选中的树节点
+            posts: {
+                currentId: "",
+                data: []
+            },//职位数据
+            position: {
+                currentId: "",
+                data: []
+            },//岗位数据
+            formData: {
+                id: "",
+                orgid: "",
+                oabaseid: "",
+                name: '',
+                duty: '',
+                sort: 0,
+            },
+            drawerTitle:'新增岗位'
+        });
+        /**
+         * 点击树节点触发
+         */
+        const nodeSelect = (selectkey, { selectedNodes, node }) => {
+            if (node.dataRef.departid === data.currentNode) {
+                return;
+            } else {
+                data.currentNode = node.dataRef.departid
+            }
+            resetTwoDatas()
+            let params = {
+                departmentId: node.dataRef.departid
+            }
+            getPostsList(params).then(res => {
+                if (res.datas) {
+                    data.posts.data = res.datas
+                }
+            })
+        };
+        const resetTwoDatas = () => {
+            data.posts.data = []
+            data.posts.currentId = ""
+            data.position.data = []
+            data.position.currentId = ""
+        }
+        const chooseHandle = (item, type) => {
+            if (type === 'posts') {
+                if (data.posts.currentId === item.departid) {
+                    return;
+                }
+                data.posts.currentId = item.departid
+                data.position.data = []
+                data.position.currentId = ""
+                //此处查询岗位数据
+                let params = {
+                    zwId: data.posts.currentId
+                }
+                getPositionList(params).then(res => {
+                    if (res.datas && res.datas.length) {
+                        data.position.data = res.datas
+                    }
+                })
+            } else {
+                data.position.currentId = item.id
+            }
         }
-      } finally {
-        setProps({
-          loading: false,
+        onMounted(() => {
+            structureList().then(res => {
+                res.length && (data.treeData = res)
+            })
         });
-        reload();
-      }
-    };
-
-    return {
-      registerTable,
-      registerDrawer,
-      handleCreate,
-      handleEdit,
-      handleSuccess,
-      RoleEnum,
-      hasBatchDelete,
-      handleDeleteOrBatchDelete,
-      statusChange,
-    };
-  },
+        /**
+         * 对岗位的操作
+         */
+        const addHandle = () => {
+            if (data.currentNode === "") {
+                message.error('请先选择机构！')
+            } else if (data.posts.currentId === "") {
+                message.error('请先选择职位！')
+            } else {
+                data.formData.orgid = data.currentNode
+                data.formData.oabaseid = data.posts.currentId
+                data.formData.sort = data.position.data.length + 1
+                drawerRef.value.showDrawer()
+            }
+        }
+        const editHandle = () => {
+            if (data.currentNode === "") {
+                message.error('请先选择机构！')
+            } else if (data.posts.currentId === "") {
+                message.error('请先选择职位！')
+            } else if (data.position.currentId === "") {
+                message.error('请先选择岗位！')
+            } else {
+                data.position.data.forEach(item => {
+                    if (item.id === data.position.currentId) {
+                        data.formData = {
+                            id: data.position.currentId,
+                            orgid: data.currentNode,
+                            oabaseid: data.posts.currentId,
+                            name: item.name,
+                            duty: item.duty,
+                            sort: parseInt(item.sort),
+                        }
+                        data.drawerTitle = '修改岗位'
+                        drawerRef.value.showDrawer()
+                    }
+                })
+            }
+        }
+        const delHandle = () => {
+            if (data.currentNode === "") {
+                message.error('请先选择机构！')
+            } else if (data.posts.currentId === "") {
+                message.error('请先选择职位！')
+            } else if (data.position.currentId === "") {
+                message.error('请先选择岗位！')
+            } else {
+                let params = {
+                    oabaseid:data.posts.currentId,
+                    id:data.position.currentId
+                }
+                delPosition(params).then(res=>{
+                    if(res.datas===1){
+                        message.success('操作成功')
+                        onSubmit(true)
+                    }else{
+                        message.error('操作失败')
+                    }
+                })
+            }
+        }
+        const onSubmit = (e) => {
+            if (e) {
+                data.position.data = []
+                data.position.currentId = ""
+                let params = {
+                    zwId: data.posts.currentId
+                }
+                getPositionList(params).then(res => {
+                    if (res.datas && res.datas.length) {
+                        data.position.data = res.datas
+                    }
+                })
+            }
+        }
+        return {
+            drawerRef,
+            ...toRefs(data),
+            nodeSelect,
+            chooseHandle,
+            addHandle,
+            editHandle,
+            delHandle,
+            onSubmit
+        };
+    },
 });
 </script>
+
+<style lang="less" scoped>
+.p-4 {
+    height: 100%;
+
+    .position-header {
+        padding: 10px;
+        width: 100%;
+        height: 70px;
+        background-color: #fff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .position-title{
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 20px;
+            user-select: none;
+        }
+
+        .handle-btns {
+            margin-right: 20px;
+            display: flex;
+
+            .btn {
+                margin-right: 10px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    .position-body {
+        margin-top: 20px;
+        width: 100%;
+        // height: 800px;
+        height: calc(100% - 90px);
+        display: flex;
+
+        .list-items {
+            margin-right: 20px;
+            padding: 10px;
+            height: 100%;
+            overflow: auto;
+            flex: 1;
+            background-color: #fff;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            .item-title {
+                padding-left: 10px;
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                background-color: #9eafe7;
+            }
+
+            .item-box {
+                margin-top: 7px;
+
+                .item {
+                    width: fit-content;
+                    height: 32px;
+                    display: flex;
+                    align-items: center;
+
+                    span {
+                        padding: 4px;
+                        cursor: pointer;
+                        user-select: none;
+
+                        &:hover {
+                            background-color: #f5f5f5;
+                        }
+                    }
+
+                    .chosed {
+                        background-color: #dbedff;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/systemAdmin/system/position/role.data.ts

@@ -1,90 +0,0 @@
-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
-import { RoleEnum } from '/@/enums/roleEnum';
-
-export enum KeysTypeEnum {
-  DISABLED = 'disabled',
-  ENABLED = 'enabled',
-}
-
-export const RoleMenuDictEnum: Recordable<{ key: string; keyType: KeysTypeEnum }> = {
-  [RoleEnum.PLATFORM_ADMIN]: { key: 'enabled_platform_admin_auth', keyType: KeysTypeEnum.ENABLED },
-  [RoleEnum.SYS_ADMIN]: { key: 'enabled_sysadmin_auth', keyType: KeysTypeEnum.ENABLED },
-  [RoleEnum.TENANT_ADMIN]: { key: 'disabled_tenant_auth', keyType: KeysTypeEnum.DISABLED },
-  [RoleEnum.CUSTOMER_USER]: { key: 'disabled_tenant_auth', keyType: KeysTypeEnum.DISABLED },
-};
-
-export const columns: BasicColumn[] = [
-  {
-    title: '角色名称',
-    dataIndex: 'groupName',
-    width: 200,
-  },
-  {
-    title: '角色Code',
-    dataIndex: 'groupid',
-    width: 200,
-  },
-  {
-    title: '类型',
-    dataIndex: 'groupType',
-    width: 120,
-  },
-
-  {
-    title: '备注',
-    dataIndex: 'memo',
-    width: 240,
-  },
-  {
-    title: '排序',
-    dataIndex: 'sort',
-    width: 180,
-  },
-];
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'roleName',
-    label: '角色名称',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: {
-      maxLength: 255,
-    },
-  },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '启用', value: 1 },
-        { label: '停用', value: 0 },
-      ],
-    },
-    colProps: { span: 6 },
-  },
-];
-
-export const formSchema: FormSchema[] = [
-  {
-    field: 'groupName',
-    label: '角色名称',
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入角色名称',
-    },
-  },
-  {
-    label: '排序',
-    field: 'sort',
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入排序',
-    },
-  }
-];