0922xx

src/api/sys/user.ts

@@ -14,6 +14,7 @@ import permissions from "/@/mock/role_me_permissions.json";
 import tool from "/@/utils/Tool.js";
 import { getJwtToken } from '/@/utils/auth';
 import moment from 'moment';
+import { resolve } from 'path';
 
 enum Api {
   // Login = '/auth/login',
@@ -157,15 +158,18 @@ export function getMyInfo() {
  * @description: 根据用户id获取详细信息
  */
 export const getUserIdInfo = (id) => {
-  return defHttp.post<Array<string>>({
-    url: Api.GetUserDetailInfo, params: {
-      userId: id,
-      getRoleIds: true
-    }
-  }).then(r => {
-    if (r.resp_code == 0 && r.datas && r.datas.length) {
-      session.setItem("roles", r.datas.join(","));
-    }
+  return new Promise((resolve)=>{
+    defHttp.post<Array<string>>({
+      url: Api.GetUserDetailInfo, params: {
+        userId: id,
+        getRoleIds: true
+      }
+    }).then(r => {
+      if (r.resp_code == 0 && r.datas && r.datas.length) {
+        session.setItem("roles", r.datas.join(","));
+        resolve(r.datas)
+      }
+    })
   })
 };
 

src/views/systemAdmin/system/account/AccountModal1.vue

@@ -0,0 +1,403 @@
+<template>
+    <a-modal :visible="true" :maskClosable="false" centered :destroyOnClose="true" :title="title"
+        :wrapClassName="wrapClassName" :width="width" @cancel="onClose" @ok="onSubmit">
+        <div class="content">
+            <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+                <div class="basic-info">
+                    <div class="small-title">基础信息</div>
+                    <a-form-item label="登录名" name="loginName">
+                        <a-input v-model:value="form.loginName" style="width: 100%" placeholder="请输入登录名" />
+                    </a-form-item>
+                    <a-form-item label="用户姓名" name="userName">
+                        <a-input v-model:value="form.userName" style="width: 100%" placeholder="请输入姓名" />
+                    </a-form-item>
+                    <a-form-item label="手机号" name="mobile">
+                        <a-input v-model:value="form.mobile" style="width: 100%" placeholder="请输入手机号" />
+                    </a-form-item>
+                    <a-form-item label="密码" name="pwd">
+                        <a-input-password v-model:value="form.pwd" style="width: 100%" placeholder="请输入密码" />
+                    </a-form-item>
+                    <a-form-item label="性别" name="sex">
+                        <a-select v-model:value="form.sex" style="width: 100%">
+                            <a-select-option value="0">女</a-select-option>
+                            <a-select-option value="1">男</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </div>
+                <div class="basic-info">
+                    <div class="small-title">岗位信息</div>
+                    <a-form-item label="所属机构" name="ssjg">
+                        <a-tree-select v-model:value="form.ssjg" style="width: 100%"
+                            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" :tree-data="treeData"
+                            placeholder="请选择机构"
+                            :replaceFields="{ children: 'children', title: 'name', key: 'departid', value: 'departid' }">
+                        </a-tree-select>
+                    </a-form-item>
+                    <a-form-item label="所属职位" name="sszw">
+                        <a-select v-model:value="form.sszw" style="width: 100%" placeholder="请选择职位" :options="zwOption"
+                            :dropdown-style="{ maxHeight: '150px', overflow: 'auto' }">
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="所属岗位" name="ssgw">
+                        <a-select v-model:value="form.ssgw" style="width: 100%" placeholder="请选择岗位" :options="gwOption"
+                            :dropdown-style="{ maxHeight: '150px', overflow: 'auto' }">
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="角色" name="userjsArr">
+                        <a-select v-model:value="form.userjsArr" mode="multiple" style="width: 100%" placeholder="请选择角色"
+                            :dropdown-style="{ maxHeight: '150px', overflow: 'auto' }" :options="jsOption" :maxTagCount="4">
+                        </a-select>
+                    </a-form-item>
+                </div>
+            </a-form>
+        </div>
+        <template #footer>
+            <div class="btns" style="display: flex;justify-content: center;">
+                <a-button class="btn" @click="onClose"
+                    style="width: 64px;height: 34px;margin-right: 25px;color: #333333;">取消</a-button>
+                <a-button class="btn" @click="onSubmit"
+                    style="width: 64px;height: 34px;background: #0671DD;color: #ffffff;">确定</a-button>
+            </div>
+        </template>
+    </a-modal>
+</template>
+<script>
+import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
+import { message } from 'ant-design-vue';
+import moment from 'moment';
+import { v4 as uuidv4 } from 'uuid';
+import md5 from 'js-md5';
+import { savePosts } from '/@/api/sys/zhiwei';
+// 正则表达式验证
+import { ChineseRegexp, EmailRegexp, phoneRegexp } from '/@/utils/rules';
+// 验证手机号与登录名重复性
+import { isAccountExist, IsPhoneExist, SaveOrUpdateUserInfo } from '/@/api/system/system';
+// 导入接口
+import { structureList, getPostsList, getPositionList } from '/@/api/sys/position';
+//角色列表api
+import { roleList } from '/@/api/sys/user';
+
+const props = {
+    formData: {
+        type: Object,
+        default: {}
+    },
+    title: {
+        type: String,
+        default: "新增职位"
+    }
+}
+export default defineComponent({
+    name: 'modal',
+    components: {},
+    props,
+    setup(props, { emit }) {
+        const data = reactive({
+            width: '440px',
+            wrapClassName: 'modal-wrap',
+            treeData: [],//机构树，初始化时就获取
+            zwOption: [],//职位选择
+            gwOption: [],//岗位选择
+            jsOption: []//角色选择
+        })
+        const form = reactive({
+            loginName: "",
+            userName: "",
+            pwd: '',
+            mobile: "",
+            sex: '0',
+            ssjg: "",
+            sszw: "",
+            ssgw: "",
+            userjsArr: [],
+            userjs: "",
+            userid: ""
+        });
+        const checkLoginName = (rule, value, callback) => {
+            if (!value) {
+                // callback(new Error("请输入用户名"));
+                return Promise.reject("请输入用户名")
+            } else {
+                //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
+                if (ChineseRegexp.test(value)) {
+                    // callback(new Error("不能输入中文"));
+                    return Promise.reject("不能输入中文")
+                } else if (EmailRegexp.test(value)) {
+                    // callback(new Error("不能使用邮箱格式"));
+                    return Promise.reject("不能使用邮箱格式")
+                } else {
+                    return Promise.resolve()
+                    // isAccountExist(value).then(({ data }) => {
+                    //     if (data != null) {
+                    //         callback(new Error('用户名已存在'));
+                    //     } else {
+                    //         callback()
+                    //     }
+                    // });
+                }
+            }
+        };
+        const checkMobile = (rule, value, callback) => {
+            if (!value) {
+                // callback(new Error("请输入手机号"));
+                return Promise.reject("请输入手机号")
+            } else {
+                //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
+                if (!phoneRegexp.test(value)) {
+                    // callback(new Error("手机号格式不正确"));
+                    return Promise.reject("手机号格式不正确")
+                } else {
+                    // callback();
+                    return Promise.resolve()
+                    // IsPhoneExist(value).then(({ data }) => {
+                    //     if (data != null) {
+                    //         callback(new Error("手机号已存在"));
+                    //     } else {
+                    //         callback();
+                    //     }
+                    // });
+                }
+            }
+        };
+        const checkRole = (rule, value, callback) => {
+            if (!value.length) {
+                // callback(new Error("请选择角色"));
+                return Promise.reject("请选择角色")
+            } else {
+                // callback()
+                return Promise.resolve()
+            }
+        };
+        const rules = {
+            loginName: [
+                { validator: checkLoginName, trigger: "change" },
+            ],
+            userName: [{
+                required: true,
+                message: '请输入姓名',
+                trigger: 'blur'
+            }],
+            pwd: [
+                { required: true, message: '密码不能为空' },
+                { pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W)[\S]{8,30}$/, message: '密码中必须包含大小写字母、数字、特殊字符，至少8个字符，最多30个字符' }
+            ],
+            mobile: [
+                { validator: checkMobile, trigger: "change" },
+            ],
+            sex: [{
+                required: true,
+                message: '请选择性别',
+                trigger: 'blur'
+            }],
+            sszw: [{
+                required: true,
+                message: '请选择职位',
+                trigger: 'blur'
+            }],
+            ssgw: [{
+                required: true,
+                message: '请选择岗位',
+                trigger: 'blur'
+            }],
+            userjsArr: [
+                { validator: checkRole, trigger: "change" },
+            ],
+        };
+        const title = ref(props.title)
+        const formRef = ref()
+
+        onMounted(() => {
+            if (Object.keys(props.formData).length) {
+                for (let key in form) {
+                    form[key] = props.formData[key]
+                }
+            }
+            structureList().then(res => {
+                data.treeData = res
+            })
+            roleList().then(res => {
+                if (res.length) {
+                    res.forEach(item => {
+                        data.jsOption.push({
+                            label: item.groupName,
+                            value: item.groupid
+                        })
+                    })
+                } else {
+                    message.error('角色数据查询失败')
+                }
+            })
+            if (props.title === '修改用户') {
+                let params1 = {
+                    departmentId: form.ssjg
+                }
+                getPostsList(params1).then(res => {
+                    if (res.datas && res.datas?.length) {
+                        res.datas.forEach(item => {
+                            data.zwOption.push({
+                                label: item.departName,
+                                value: item.departid
+                            })
+                        })
+                    } else {
+                        message.info('该部门下无职位数据')
+                        data.zwOption = []
+                    }
+                })
+                let params = {
+                    zwId: form.sszw
+                }
+                getPositionList(params).then(res => {
+                    if (res.datas && res.datas.length) {
+                        res.datas.forEach(item => {
+                            data.gwOption.push({
+                                label: item.name,
+                                value: item.id
+                            })
+                        })
+                    } else {
+                        message.info('该职位下无岗位数据')
+                        data.gwOption = []
+                    }
+                })
+            }
+        })
+        watch(
+            () => [props.formData, props.title],
+            ([newF, newD]) => {
+                for (let key in form) {
+                    form[key] = newF[key]
+                }
+                title.value = newD
+            },
+            {
+                immediate: true,
+                deep: true
+            }
+        )
+        // 查职位
+        watch(
+            () => form.ssjg,
+            (val) => {
+                data.gwOption = []
+                if (val !== '') {
+                    //查询职位
+                    let params = {
+                        departmentId: val
+                    }
+                    getPostsList(params).then(res => {
+                        if (res.datas && res.datas?.length) {
+                            res.datas.forEach(item => {
+                                data.zwOption.push({
+                                    label: item.departName,
+                                    value: item.departid
+                                })
+                            })
+                        } else {
+                            message.info('该部门下无职位数据')
+                            data.zwOption = []
+                        }
+                    })
+                } else {
+                    data.zwOption = []
+                }
+            }
+        )
+        // 查岗位
+        watch(
+            () => form.sszw,
+            (val) => {
+                if (val !== '') {
+                    //查询岗位
+                    let params = {
+                        zwId: val
+                    }
+                    getPositionList(params).then(res => {
+                        if (res.datas && res.datas.length) {
+                            res.datas.forEach(item => {
+                                data.gwOption.push({
+                                    label: item.name,
+                                    value: item.id
+                                })
+                            })
+                        } else {
+                            message.info('该职位下无岗位数据')
+                            data.gwOption = []
+                        }
+                    })
+                } else {
+                    data.gwOption = []
+                }
+            }
+        )
+        // 关闭请求弹窗
+        const onClose = () => {
+            emit('closeModal')
+            resetForm()
+        };
+        const onSubmit = () => {
+            formRef.value.validate().then(() => {
+                //此处调用新增
+                if (title.value === '新增用户') {
+                    form.userid = uuidv4();
+                }
+                form.loginName = form.loginName.toUpperCase();
+                form.userjs = form.userjsArr.join(';');
+                form.pwd = md5(form.pwd)
+                SaveOrUpdateUserInfo(form).then(res => {
+                    if (res) {
+                        message.success('操作成功')
+                        emit('onSubmit', true)
+                    } else {
+                        message.success('操作失败')
+                        emit('onSubmit', false)
+                    }
+                })
+            }).catch((error) => {
+                console.log('error', error);
+            });
+        };
+        const resetForm = () => {
+            formRef.value.resetFields();
+        };
+        return {
+            form,
+            rules,
+            title,
+            formRef,
+            ...toRefs(data),
+            labelCol: { span: 6 },
+            wrapperCol: { span: 16 },
+            //func
+            onClose,
+            onSubmit
+        };
+    },
+});
+</script>
+<style lang="less" scoped>
+.modal-wrap {
+    .content {
+        padding: 20px 10px 10px 20px;
+        margin-top: 10px;
+
+        .basic-info {
+            .small-title {
+                margin-bottom: 10px;
+                font-family: Source Han Sans CN;
+                font-size: 14px;
+                font-weight: bold;
+                color: #333333;
+            }
+        }
+    }
+
+    ::v-deep .ant-modal-footer {
+        .btn {
+            width: 64px;
+            height: 34px;
+            background-color: red;
+        }
+    }
+}
+</style>

src/views/systemAdmin/system/account/index copy.vue

@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <BasicTable style="flex: auto" :clickToRowSelect="false" @register="registerTable" class="w-3/4 xl:w-4/5">
+        <template #toolbar>
+          <Authority>
+            <a-button type="primary" @click="handleCreate">新增账号</a-button>
+          </Authority>
+          <Authority value="api:yt:user:delete">
+            <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
+              <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+            </Popconfirm>
+          </Authority>
+        </template>
+        <template #status="{ record }">
+          <Tag :color="record.userStatusEnum === 'NORMAL'
+            ? 'green'
+            : record.userStatusEnum === 'DISABLED'
+              ? 'red'
+              : 'orange'
+            ">
+            {{
+              record.userStatusEnum === 'NORMAL'
+              ? '正常'
+              : record.userStatusEnum === 'DISABLED'
+                ? '已禁用'
+                : '已过期'
+            }}
+          </Tag>
+        </template>
+        <template #SEX="{ record }">
+          <span>{{ record.SEX ? '男' : '女' }}</span>
+        </template>
+        <template #statusT="{ record }">
+          <Tag :color="record.locked == true ? 'red' : 'green'">
+            {{ record.locked == true ? '已锁定' : '正常' }}
+          </Tag>
+        </template>
+        <template #action="{ record }">
+          <TableAction :actions="[
+            // {
+            //   label: '进入',
+            //   icon: 'ant-design:login-outlined',
+            //   tooltip: '以客户用户身份登录',
+            //   onClick: handleLoginCustomAdmin.bind(null, record),
+            //   ifShow: !isAdmin(role),
+            // },
+            // {
+            //   label: '用户详情',
+            //   // auth: 'api:yt:user:get',
+            //   icon: 'clarity:info-standard-line',
+            //   tooltip: '用户详情',
+            //   onClick: handleView.bind(null, record),
+            //   ifShow: record.level != 0,
+            // },
+            // {
+            //   label: '编辑',
+            //   // auth: 'api:yt:user:update',
+            //   icon: 'clarity:note-edit-line',
+            //   tooltip: '编辑',
+            //   onClick: handleEdit.bind(null, record),
+            //   ifShow: record.level != 0,
+            // },
+            {
+              label: '权限设置',
+              icon: 'ant-design:key-outlined',
+              onClick: power.bind(null, record),
+            },
+            {
+              label: '删除',
+              // auth: 'api:yt:user:delete',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              tooltip: '删除',
+              ifShow: record.level != 0,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]" :drop-down-actions="[
+  // {
+  //   label: '删除',
+  //   // auth: 'api:yt:user:delete',
+  //   icon: 'ant-design:delete-outlined',
+  //   color: 'error',
+  //   tooltip: '删除',
+  //   ifShow: record.level != 0,
+  //   popConfirm: {
+  //     title: '是否确认删除',
+  //     confirm: handleDeleteOrBatchDelete.bind(null, record),
+  //   },
+  // },
+  // {
+  //   label: '解锁',
+  //   auth: 'api:yt:user:delete',
+  //   icon: 'ant-design:key-outlined',
+  //   color: 'error',
+  //   tooltip: '解锁',
+  //   ifShow: record.level != 0,
+  //   popConfirm: {
+  //     title: '是否确认解锁',
+  //     confirm: unlock.bind(null, record),
+  //   },
+  // },
+]" />
+        </template>
+      </BasicTable>
+      <AccountModal @register="registerModal" @success="handleSuccess" />
+    </PageWrapper>
+    <PowerDrawer @register="registerDrawer" @success="handleSuccess"></PowerDrawer>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, nextTick, toRaw } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { deleteUser, getAccountList, alterUnlock } from '/@/api/system/system';
+import { PageWrapper } from '/@/components/Page';
+import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+import { Tag, Popconfirm } from 'ant-design-vue';
+import { useModal } from '/@/components/Modal';
+import AccountModal from './AccountModal.vue';
+import { columns, searchFormSchema } from './account.data';
+import { useGo } from '/@/hooks/web/usePage';
+import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+import { Authority } from '/@/components/Authority';
+import { getMyInfo, getPermCode, getUserToken } from '/@/api/sys/user';
+import { useUserStore } from '/@/store/modules/user';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { router } from '/@/router';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { RouteRecordRaw } from 'vue-router';
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
+import { PageEnum } from '/@/enums/pageEnum';
+import { getAuthCache } from '/@/utils/auth';
+import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+import { isAdmin } from '/@/enums/roleEnum';
+import { useDrawer } from '/@/components/Drawer';
+import PowerDrawer from './PowerDrawer.vue';
+
+
+export default defineComponent({
+  name: 'AccountManagement',
+  components: {
+    BasicTable,
+    PageWrapper,
+    OrganizationIdTree,
+    AccountModal,
+    TableAction,
+    Tag,
+    Authority,
+    Popconfirm,
+    PowerDrawer,
+  },
+  setup() {
+    const userInfo: any = getAuthCache(USER_INFO_KEY);
+    const role: string = userInfo?.roles[0];
+    const [registerDrawer, { openDrawer }] = useDrawer();
+    const go = useGo();
+    const [registerModal, { openModal }] = useModal();
+    let searchInfo = reactive<Recordable>({});
+    const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+    const [registerTable, { reload, setProps }] = useTable({
+      title: '账号列表',
+      api: getAccountList,
+      rowKey: 'id',
+      columns,
+      searchInfo,
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+        // autoSubmitOnEnter: true,
+        resetFunc: resetFn,
+      },
+      useSearchForm: true,
+      showTableSetting: true,
+      bordered: true,
+      actionColumn: {
+        width: 240,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+        fixed: 'right',
+      },
+      tableSetting: {
+        redo: true,
+        size: true,
+        setting: false,
+        fullScreen: false
+      },
+    });
+    const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+      deleteUser,
+      handleSuccess,
+      setProps
+    );
+    nextTick(() => {
+      setProps(selectionOptions);
+    });
+
+    function handleCreate() {
+      openModal(true, {
+        isUpdate: false,
+      });
+    }
+
+    function unlock(data) {
+      alterUnlock(data.tbUser).then(() => {
+        reload();
+      });
+    }
+    function handleEdit(record: Recordable) {
+      openModal(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+    function handleSuccess() {
+      reload();
+    }
+
+    function handleSelect(organization) {
+      searchInfo.organizationId = organization;
+      reload();
+    }
+
+    function handleView(record: Recordable) {
+      go('/system/account_detail/' + record.id);
+    }
+    const userStore = useUserStore();
+
+    const permissionStore = usePermissionStore();
+    async function handleLoginCustomAdmin(record: { tbUser: string; id: string }) {
+      try {
+        const { token, refreshToken } = await getUserToken(record.id);
+        userStore.storeToken(token, refreshToken);
+        const userInfo = await getMyInfo();
+        const permissionList = await getPermCode();
+        permissionStore.setPermCodeList(permissionList);
+        userStore.setUserInfo(userInfo);
+        userStore.setRoleList(userInfo.roles as RoleEnum[]);
+        const routes = await permissionStore.buildRoutesAction();
+        routes.forEach((route) => {
+          router.addRoute(route as unknown as RouteRecordRaw);
+        });
+        router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+        permissionStore.setDynamicAddedRoute(true);
+        go(PageEnum.BASE_HOME);
+      } catch (error) {
+      } finally {
+      }
+    }
+
+    function power(record: Recordable) {
+      openDrawer(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+
+    return {
+      registerDrawer,
+      power,
+      handleLoginCustomAdmin,
+      registerTable,
+      registerModal,
+      handleCreate,
+      handleEdit,
+      handleSuccess,
+      handleSelect,
+      handleView,
+      unlock,
+      organizationIdTreeRef,
+      hasBatchDelete,
+      handleDeleteOrBatchDelete,
+      isAdmin,
+      role,
+    };
+  },
+});
+</script>

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

@@ -1,282 +1,230 @@
 <template>
-  <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable style="flex: auto" :clickToRowSelect="false" @register="registerTable" class="w-3/4 xl:w-4/5">
+  <div class="p-4">
+    <div class="account-body">
+      <BasicTable @register="registerTable" class="basic-table">
         <template #toolbar>
-          <Authority>
-            <a-button type="primary" @click="handleCreate">新增账号</a-button>
-          </Authority>
-          <Authority value="api:yt:user:delete">
-            <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
-              <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #status="{ record }">
-          <Tag :color="record.userStatusEnum === 'NORMAL'
-            ? 'green'
-            : record.userStatusEnum === 'DISABLED'
-              ? 'red'
-              : 'orange'
-            ">
-            {{
-              record.userStatusEnum === 'NORMAL'
-              ? '正常'
-              : record.userStatusEnum === 'DISABLED'
-                ? '已禁用'
-                : '已过期'
-            }}
-          </Tag>
+          <Button type="primary" @click="handleAdd">
+            新增用户
+          </Button>
+          <Button type="primary" @click="handlePermissionEdit">
+            权限绑定
+          </Button>
         </template>
         <template #SEX="{ record }">
           <span>{{ record.SEX ? '男' : '女' }}</span>
         </template>
-        <template #statusT="{ record }">
-          <Tag :color="record.locked == true ? 'red' : 'green'">
-            {{ record.locked == true ? '已锁定' : '正常' }}
-          </Tag>
-        </template>
         <template #action="{ record }">
           <TableAction :actions="[
-            // {
-            //   label: '进入',
-            //   icon: 'ant-design:login-outlined',
-            //   tooltip: '以客户用户身份登录',
-            //   onClick: handleLoginCustomAdmin.bind(null, record),
-            //   ifShow: !isAdmin(role),
-            // },
-            // {
-            //   label: '用户详情',
-            //   // auth: 'api:yt:user:get',
-            //   icon: 'clarity:info-standard-line',
-            //   tooltip: '用户详情',
-            //   onClick: handleView.bind(null, record),
-            //   ifShow: record.level != 0,
-            // },
-            // {
-            //   label: '编辑',
-            //   // auth: 'api:yt:user:update',
-            //   icon: 'clarity:note-edit-line',
-            //   tooltip: '编辑',
-            //   onClick: handleEdit.bind(null, record),
-            //   ifShow: record.level != 0,
-            // },
             {
-              label: '权限设置',
-              icon: 'ant-design:key-outlined',
-              onClick: power.bind(null, record),
+              label: '编辑',
+              tooltip: '编辑',
+              onClick: handleEdit.bind(null, record),
             },
             {
               label: '删除',
-              // auth: 'api:yt:user:delete',
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
               tooltip: '删除',
-              ifShow: record.level != 0,
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
+              color: 'error',
+              onClick: handleDelete.bind(null, record.departid),
             },
-          ]" :drop-down-actions="[
-  // {
-  //   label: '删除',
-  //   // auth: 'api:yt:user:delete',
-  //   icon: 'ant-design:delete-outlined',
-  //   color: 'error',
-  //   tooltip: '删除',
-  //   ifShow: record.level != 0,
-  //   popConfirm: {
-  //     title: '是否确认删除',
-  //     confirm: handleDeleteOrBatchDelete.bind(null, record),
-  //   },
-  // },
-  // {
-  //   label: '解锁',
-  //   auth: 'api:yt:user:delete',
-  //   icon: 'ant-design:key-outlined',
-  //   color: 'error',
-  //   tooltip: '解锁',
-  //   ifShow: record.level != 0,
-  //   popConfirm: {
-  //     title: '是否确认解锁',
-  //     confirm: unlock.bind(null, record),
-  //   },
-  // },
-]" />
+          ]" />
         </template>
       </BasicTable>
-      <AccountModal @register="registerModal" @success="handleSuccess" />
-    </PageWrapper>
-    <PowerDrawer @register="registerDrawer" @success="handleSuccess"></PowerDrawer>
+    </div>
+    <AccountModal1 v-if="ifShowModal" :title="modalTitle" :formData="formData" @closeModal="ifShowModal = false"
+      @onSubmit="onSubmit" />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, nextTick, toRaw } from 'vue';
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { deleteUser, getAccountList, alterUnlock } from '/@/api/system/system';
-import { PageWrapper } from '/@/components/Page';
-import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-import { Tag, Popconfirm } from 'ant-design-vue';
-import { useModal } from '/@/components/Modal';
-import AccountModal from './AccountModal.vue';
-import { columns, searchFormSchema } from './account.data';
-import { useGo } from '/@/hooks/web/usePage';
-import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-import { Authority } from '/@/components/Authority';
-import { getMyInfo, getPermCode, getUserToken } from '/@/api/sys/user';
-import { useUserStore } from '/@/store/modules/user';
-import { usePermissionStore } from '/@/store/modules/permission';
-import { router } from '/@/router';
-import { RoleEnum } from '/@/enums/roleEnum';
-import { RouteRecordRaw } from 'vue-router';
-import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
-import { PageEnum } from '/@/enums/pageEnum';
-import { getAuthCache } from '/@/utils/auth';
-import { USER_INFO_KEY } from '/@/enums/cacheEnum';
-import { isAdmin } from '/@/enums/roleEnum';
-import { useDrawer } from '/@/components/Drawer';
-import PowerDrawer from './PowerDrawer.vue';
 
+<script>
+import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
+
+// 导入表格组件，表格事件
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import AccountModal1 from './AccountModal1.vue';
+// 操作用户数据api
+import { deleteUser, getAccountList } from '/@/api/system/system';
+import { FormOutlined } from '@ant-design/icons-vue';
+import moment from 'moment';
+import { Button, Modal, message } from 'ant-design-vue';
+import { getUserInfoByLoginCode } from '/@/api/system/system';
+import { getUserIdInfo } from '/@/api/sys/user';
 
 export default defineComponent({
-  name: 'AccountManagement',
-  components: {
-    BasicTable,
-    PageWrapper,
-    OrganizationIdTree,
-    AccountModal,
-    TableAction,
-    Tag,
-    Authority,
-    Popconfirm,
-    PowerDrawer,
-  },
+  name: 'account',
+  components: { BasicTable, TableAction, Button, AccountModal1 },
   setup() {
-    const userInfo: any = getAuthCache(USER_INFO_KEY);
-    const role: string = userInfo?.roles[0];
-    const [registerDrawer, { openDrawer }] = useDrawer();
-    const go = useGo();
-    const [registerModal, { openModal }] = useModal();
-    let searchInfo = reactive<Recordable>({});
-    const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-    const [registerTable, { reload, setProps }] = useTable({
-      title: '账号列表',
-      api: getAccountList,
-      rowKey: 'id',
-      columns,
-      searchInfo,
-      formConfig: {
-        labelWidth: 120,
-        schemas: searchFormSchema,
-        // autoSubmitOnEnter: true,
-        resetFunc: resetFn,
+    const getAllData = () => {
+      return new Promise((resolve) => {
+        let params = {
+          keyStr: '',
+          page: 1,
+          pageSize: 100000000,
+        }
+        getAccountList(params).then(res => {
+          if (res.items?.length) {
+            resolve(res.items)
+          } else {
+            message.info('未查询到用户数据')
+            resolve([])
+          }
+        })
+      })
+    }
+    const columns = [
+      {
+        title: '用户名',
+        dataIndex: 'NAME',
+        align: 'center'
       },
-      useSearchForm: true,
-      showTableSetting: true,
-      bordered: true,
-      actionColumn: {
-        width: 240,
-        title: '操作',
-        dataIndex: 'action',
-        slots: { customRender: 'action' },
-        fixed: 'right',
+      {
+        title: '登录姓名',
+        dataIndex: 'LOGIN_NAME',
+        align: 'center'
+      },
+      {
+        title: '用户ID',
+        dataIndex: 'EMPLOYEE_ID',
+        align: 'center'
+      },
+      {
+        title: '性别',
+        dataIndex: 'SEX',
+        align: 'center',
+        slots: { customRender: 'SEX' },
       },
+    ]
+    //注册表格
+    const [
+      registerTable,
+      { reload },
+    ] = useTable({
+      title: '用户列表', //'菜单列表'
+      api: getAllData, //加载数据
+      // dataSource: [],
+      columns: columns,
+      useSearchForm: false,     //开启搜索区域
+      bordered: false,
+      striped: false,
+      showTableSetting: true,  // 显示表格设置
       tableSetting: {
         redo: true,
         size: true,
         setting: false,
         fullScreen: false
       },
+      canResize: true,
+      showIndexColumn: true,
+      pagination: {
+        // pageSize: 10,
+        hideOnSinglePage: false
+      },
+      actionColumn: {
+        width: 100,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+      }
     });
-    const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-      deleteUser,
-      handleSuccess,
-      setProps
-    );
-    nextTick(() => {
-      setProps(selectionOptions);
-    });
-
-    function handleCreate() {
-      openModal(true, {
-        isUpdate: false,
-      });
-    }
+    const formData = ref(null)
+    const ifShowModal = ref(false)
+    const modalTitle = ref('新增用户')
+    //绑定权限
+    const handlePermissionEdit = () => {
 
-    function unlock(data) {
-      alterUnlock(data.tbUser).then(() => {
-        reload();
-      });
     }
-    function handleEdit(record: Recordable) {
-      openModal(true, {
-        record,
-        isUpdate: true,
-      });
-    }
-    function handleSuccess() {
-      reload();
-    }
-
-    function handleSelect(organization) {
-      searchInfo.organizationId = organization;
-      reload();
+    // 新增
+    const handleAdd = () => {
+      formData.value = {
+        loginName: "",
+        userName: "",
+        pwd: '',
+        mobile: "",
+        sex: '0',
+        sszw: "",
+        ssgw: "",
+        userjs: [],
+        userid: ""
+      }
+      modalTitle.value = '新增用户'
+      ifShowModal.value = true
     }
-
-    function handleView(record: Recordable) {
-      go('/system/account_detail/' + record.id);
+    // 编辑
+    const handleEdit = (record) => {
+      getUserInfoByLoginCode(record.LOGIN_NAME).then(res => {
+        if (res.user?.userid) {
+          getUserIdInfo(res.user.userid).then(roleRes => {
+            //组合信息传给修改弹窗
+            formData.value = {
+              loginName: res.user.loginName,
+              userName: res.user.userName,
+              pwd: "",
+              mobile: res.user.mobile,
+              sex: res.user.sex,
+              ssjg: res.department[0].departid,
+              sszw: res.zw[0].departid,
+              ssgw: res.gw[0].id,
+              userjsArr: roleRes,
+              userjs:roleRes.join(';'),
+              userid: res.user.userid
+            }
+            modalTitle.value = '修改用户'
+            ifShowModal.value = true
+          })
+        } else {
+          message.error('用户信息查询失败')
+        }
+      })
     }
-    const userStore = useUserStore();
+    // 删除
+    const handleDelete = () => {
 
-    const permissionStore = usePermissionStore();
-    async function handleLoginCustomAdmin(record: { tbUser: string; id: string }) {
-      try {
-        const { token, refreshToken } = await getUserToken(record.id);
-        userStore.storeToken(token, refreshToken);
-        const userInfo = await getMyInfo();
-        const permissionList = await getPermCode();
-        permissionStore.setPermCodeList(permissionList);
-        userStore.setUserInfo(userInfo);
-        userStore.setRoleList(userInfo.roles as RoleEnum[]);
-        const routes = await permissionStore.buildRoutesAction();
-        routes.forEach((route) => {
-          router.addRoute(route as unknown as RouteRecordRaw);
-        });
-        router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
-        permissionStore.setDynamicAddedRoute(true);
-        go(PageEnum.BASE_HOME);
-      } catch (error) {
-      } finally {
-      }
     }
-
-    function power(record: Recordable) {
-      openDrawer(true, {
-        record,
-        isUpdate: true,
-      });
+    //新增或修改的提交
+    const onSubmit = (e) => {
+      ifShowModal.value = false
+      e && reload();
     }
 
     return {
-      registerDrawer,
-      power,
-      handleLoginCustomAdmin,
+      formData,
+      ifShowModal,
+      modalTitle,
       registerTable,
-      registerModal,
-      handleCreate,
+      handlePermissionEdit,
+      handleAdd,
       handleEdit,
-      handleSuccess,
-      handleSelect,
-      handleView,
-      unlock,
-      organizationIdTreeRef,
-      hasBatchDelete,
-      handleDeleteOrBatchDelete,
-      isAdmin,
-      role,
+      handleDelete,
+      onSubmit
     };
   },
 });
 </script>
+
+<style lang="less" scoped>
+.p-4 {
+  height: 100%;
+
+  .account-body {
+    padding: 0 20px;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .basic-table {
+      height: 100%;
+
+      ::v-deep .ant-table-title {
+        padding: 0 !important;
+
+        .vben-basic-title {
+          font-family: '阿里巴巴普惠体 2.0';
+          font-size: 16px;
+          font-weight: bold;
+          color: #333333;
+        }
+
+      }
+    }
+  }
+}
+</style>

src/views/systemAdmin/system/role/RoleModal.vue

@@ -0,0 +1,169 @@
+<template>
+    <a-modal :visible="true" :maskClosable="false" centered :destroyOnClose="true" :title="title"
+        :wrapClassName="wrapClassName" :width="width" @cancel="onClose" @ok="onSubmit">
+        <div class="content">
+            <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+                <a-form-item label="角色名称" name="groupName">
+                    <a-input v-model:value="form.groupName" style="width: 100%" placeholder="请输入名称" />
+                </a-form-item>
+                <a-form-item label="系统功能" name="checkedKeys">
+                    <div class="tree-box">
+                        <a-tree checkable :tree-data="menuTreeData" v-model:checkedKeys="form.checkedKeys"
+                            class="tree-list" :replaceFields="{ children: 'children', key: 'id', title: 'name' }">
+                        </a-tree>
+                    </div>
+                </a-form-item>
+            </a-form>
+        </div>
+        <template #footer>
+            <div class="btns" style="display: flex;justify-content: center;">
+                <a-button class="btn" @click="onClose"
+                    style="width: 64px;height: 34px;margin-right: 25px;color: #333333;">取消</a-button>
+                <a-button class="btn" @click="onSubmit"
+                    style="width: 64px;height: 34px;background: #0671DD;color: #ffffff;">确定</a-button>
+            </div>
+        </template>
+    </a-modal>
+</template>
+<script>
+import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
+import { message } from 'ant-design-vue';
+import moment from 'moment';
+import { v4 as uuidv4 } from 'uuid';
+//菜单树api
+import { getMenuList } from '/@/api/sys/menu';
+//获取与保存角色绑定的菜单数据
+import { saveRoleMenu } from '/@/api/sys/user';
+//保存角色信息
+import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+
+const props = {
+}
+export default defineComponent({
+    name: 'modal',
+    components: {},
+    props,
+    setup(props, { emit }) {
+        const data = reactive({
+            width: '546px',
+            wrapClassName: 'modal-wrap',
+        })
+        const form = reactive({
+            groupName: '',
+            sort: '1',
+            groupid: '',
+            checkedKeys: []
+        });
+        const rules = {
+            groupName: [{
+                required: true,
+                message: '请输入角色名称',
+                trigger: 'blur'
+            }]
+        };
+        const title = ref('新增角色')
+        const formRef = ref()
+        const menuTreeData = ref([])
+
+        onMounted(() => {
+            //此处请求菜单树
+            getMenuList().then(res => {
+                menuTreeData.value = res
+            })
+        })
+        // 关闭请求弹窗
+        const onClose = () => {
+            emit('closeModal')
+            resetForm()
+        };
+        const onSubmit = () => {
+            formRef.value.validate().then(() => {
+                let newId = uuidv4()
+                let params = {
+                    groupName: form.groupName,
+                    sort: '1',
+                    groupid: newId
+                }
+                saveOrUpdateRoleInfoWithMenu(params).then((res) => {
+                    if (res === 1) {
+                        let menusIds = [...new Set([].concat(form.checkedKeys))]
+                        saveRoleMenu({
+                            menusId: menusIds.join(","),
+                            systemId: "1",
+                            roleId: newId
+                        }).then(r => {
+                            if (r) {
+                                message.success('角色新增成功')
+                            } else {
+                                message.error('权限绑定失败')
+                            }
+                            emit('onSubmit',true)
+                            formRef.value.resetFields();
+                        })
+                    } else {
+                        message.error('角色新增失败')
+                        formRef.value.resetFields();
+                        emit('onSubmit',false)
+                    }
+                });
+            }).catch((error) => {
+                console.log('error', error);
+            });
+        };
+        const resetForm = () => {
+            formRef.value.resetFields();
+        };
+        return {
+            form,
+            rules,
+            title,
+            formRef,
+            menuTreeData,
+            labelCol: { span: 6 },
+            wrapperCol: { span: 12 },
+            ...toRefs(data),
+            //func
+            onClose,
+            onSubmit
+        };
+    },
+});
+</script>
+<style lang="less" scoped>
+.modal-wrap {
+    .content {
+        padding: 20px 20px 10px 20px;
+        margin-top: 10px;
+
+        ::v-deep .tree-box {
+            width: 100%;
+            height: 450px;
+            overflow: auto;
+            border-radius: 2px;
+            box-sizing: border-box;
+            border: 1px solid #D9D9D9;
+
+            &::-webkit-scrollbar {
+                width: 3px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 2px;
+                background: #ccd5df;
+            }
+
+            &::-webkit-scrollbar-track {
+                display: none;
+            }
+        }
+    }
+
+    ::v-deep .ant-modal-footer {
+        .btn {
+            width: 64px;
+            height: 34px;
+            background-color: red;
+        }
+    }
+}
+</style>

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

@@ -4,7 +4,7 @@
       <div class="handle-btns">
         <span class="label-item">角色名称：</span>
         <div class="select-item">
-          <a-input v-model:value="value" style="width: 100%;" placeholder="请输入名称"></a-input>
+          <a-input v-model:value="searchValue" style="width: 100%;" placeholder="请输入名称"></a-input>
         </div>
         <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
       </div>
@@ -22,7 +22,7 @@
               {
                 label: '修改',
                 tooltip: '修改',
-                onClick: handleDelete.bind(null, record),
+                onClick: handleEdit.bind(null, record),
               },
               {
                 label: '删除',
@@ -36,55 +36,151 @@
       </div>
       <!-- 右侧操作区域 -->
       <div class="right-opt">
-        <a-form ref="formRef" :model="editForm" :rules="rules" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
-          <a-form-item label="角色名称" name="groupName">
-            <a-input v-model:value="editForm.groupName" style="width: 100%" placeholder="请输入名称" />
-          </a-form-item>
-          <a-form-item label="系统功能" name="checkedKeys">
-            <a-tree checkable :tree-data="menuTreeData" v-model:checkedKeys="editForm.checkedKeys"></a-tree>
-          </a-form-item>
-        </a-form>
+        <div class="form-box">
+          <a-form ref="formRef" :model="editForm" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
+            <a-form-item label="角色名称" name="groupName">
+              <a-input v-model:value="editForm.groupName" style="width: 100%" placeholder="请输入名称" />
+            </a-form-item>
+            <a-form-item label="系统功能" name="checkedKeys">
+              <div class="tree-box">
+                <a-tree checkable :tree-data="menuTreeData" v-model:checkedKeys="editForm.checkedKeys" class="tree-list"
+                  :replaceFields="{ children: 'children', key: 'id', title: 'name' }">
+                </a-tree>
+              </div>
+            </a-form-item>
+          </a-form>
+        </div>
       </div>
     </div>
+    <RoleModal v-if="ifShowModal" @closeModal="ifShowModal = false" @onSubmit="onSubmit" />
   </div>
 </template>
 <script>
-import { defineComponent, nextTick } from 'vue';
+import { defineComponent, nextTick, reactive, ref, toRefs, watch, onMounted, createVNode, computed } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
+import RoleModal from './RoleModal.vue';
+import { message, Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 //角色列表api
 import { roleList } from '/@/api/sys/user';
 //菜单树api
 import { getMenuList } from '/@/api/sys/menu';
+//获取与保存角色绑定的菜单数据
+import { saveRoleMenu, getRoleMenus } from '/@/api/sys/user';
+//保存角色信息
+import { delRole, getRoleListByPage, setRoleStatus, saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
 
 export default defineComponent({
   name: 'RoleManagement',
-  components: { BasicTable, TableAction },
+  components: { BasicTable, TableAction, ExclamationCircleOutlined, RoleModal },
   setup() {
+    const formRef = ref(null)
+    const ifShowModal = ref(false)
+    const searchValue = ref('')
+    //表格筛选
+    const filteredInfo = ref({
+      groupName: null,
+    });
     //按名称查询
     const searchTable = () => {
+      formRef.value.resetFields();
+      filteredInfo.value['groupName'] = [searchValue.value]
     }
     //新增
     const handleAdd = () => {
+      ifShowModal.value = true
     }
     //修改
-    const handleEdit = () => {
+    const handleEdit = (record) => {
+      editForm.groupName = record.groupName
+      editForm.sort = record.sort
+      editForm.groupid = record.groupid
+      getRoleMenus({
+        menusId: true,
+        systemId: '1',
+        roleIds: record.groupid || 'FB264E2A-BBEN-FB9T-9CEU-FF94AF30DB87',//values.groupid,
+      }).then(res => {
+        res.forEach(item => {
+          editForm.checkedKeys.push(item.id)
+        })
+      })
     }
     //保存
     const handleSave = () => {
+      if (!editForm.groupid) {
+        message.error('没有选择角色')
+        return;
+      }
+      // 首先保存用户信息，再保存菜单绑定数据
+      formRef.value.validate().then(() => {
+        let params = {
+          groupName: editForm.groupName,
+          sort: '1',
+          groupid: editForm.groupid
+        }
+        saveOrUpdateRoleInfoWithMenu(params).then((res) => {
+          if (res === 1) {
+            let menusIds = [...new Set([].concat(editForm.checkedKeys))]
+            saveRoleMenu({
+              menusId: menusIds.join(","),
+              systemId: "1",
+              roleId: editForm.groupid
+            }).then(r => {
+              if (r) {
+                message.success('修改成功')
+              } else {
+                message.error('权限修改失败')
+              }
+              reload();
+              formRef.value.resetFields();
+            })
+          } else {
+            message.error('角色修改失败')
+            formRef.value.resetFields();
+          }
+        });
+      }).catch((error) => {
+        console.log('error', error);
+      });
     }
     //删除
-    const handleDelete = () => {
+    const handleDelete = (record) => {
+      Modal.confirm({
+        title: '删除提示',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '确定删除该角色？',
+        centered: true,
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: (() => {
+          delRole(record.groupid).then(res => {
+            if (res.datas === 1) {
+              message.success('删除成功')
+              reload();
+            } else {
+              message.error('删除失败')
+            }
+          })
+          formRef.value.resetFields();
+        })
+      });
     }
+    
     //表格列
-    const columns = [
-      {
-        title: '用户名称',
-        align: 'center',
-        dataIndex: 'groupName',
-        key: 'groupName'
-      },
-    ]
+    const columns = computed(() => {
+      const filtered = filteredInfo.value || {};
+      return [
+        {
+          title: '角色名称',
+          align: 'center',
+          dataIndex: 'groupName',
+          key: 'groupName',
+          filteredValue: filtered.groupName || null,
+          onFilter: (value, record) => record.groupName.includes(value)
+        },
+      ];
+    });
     const [registerTable, { reload }] = useTable({
       title: '',
       api: roleList,		 //数据
@@ -108,10 +204,9 @@ export default defineComponent({
     });
     const editForm = reactive({
       groupName: '',
-      sort: '',
-      updateuser: '',
+      sort: '1',
       groupid: '',
-      checkedKeys:[]
+      checkedKeys: []
     })
     const rules = {
       groupName: [{
@@ -121,13 +216,22 @@ export default defineComponent({
       }]
     };
     const menuTreeData = ref([])
-    onMounted(()=>{
+    onMounted(() => {
       //此处请求菜单树
-      getMenuList().then(res=>{
+      getMenuList().then(res => {
         menuTreeData.value = res
+        console.log(menuTreeData.value);
       })
     })
+    const onSubmit = (e) => {
+      ifShowModal.value = false
+      e && reload()
+    }
     return {
+      ifShowModal,
+      formRef,
+      searchValue,
+      filteredInfo,
       editForm,
       rules,
       menuTreeData,
@@ -136,7 +240,8 @@ export default defineComponent({
       handleEdit,
       handleSave,
       handleDelete,
-      registerTable
+      registerTable,
+      onSubmit
     };
   },
 });
@@ -187,7 +292,7 @@ export default defineComponent({
     justify-content: space-between;
 
     .left-table {
-      padding: 20px 20px;
+      padding: 20px 20px 0;
       height: 100%;
       width: 860px;
       margin-right: 10px;
@@ -195,7 +300,7 @@ export default defineComponent({
       border-radius: 6px;
 
       .basic-table {
-        height: 100%;
+        height: calc(100% - 20px);
 
         ::v-deep .ant-table-title {
           padding: 0 !important;
@@ -205,11 +310,38 @@ export default defineComponent({
     }
 
     .right-opt {
-      padding: 20px 20px;
+      padding: 20px 20px 0;
       width: calc(100% - 870px);
       height: 100%;
       background-color: #fff;
       border-radius: 6px;
+
+      .form-box {
+        // max-height: 855px;
+        // overflow: auto;
+
+        ::v-deep .tree-box {
+          width: 100%;
+          height: 680px;
+          overflow: auto;
+          border-radius: 2px;
+          box-sizing: border-box;
+          border: 1px solid #D9D9D9;
+
+          &::-webkit-scrollbar {
+            width: 3px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            border-radius: 2px;
+            background: #ccd5df;
+          }
+
+          &::-webkit-scrollbar-track {
+            display: none;
+          }
+        }
+      }
     }
   }
 }

src/views/systemAdmin/system/structure/structure.data.ts

@@ -13,23 +13,23 @@ export const columns: BasicColumn[] = [
   {
     title: '机构名称',
     dataIndex: 'departName',
-    width: 180,
+    // width: 180,
     align: 'left',
   },
-  {
-    title: '机构ID',
-    dataIndex: 'id',
-    width: 250,
-  },
-  {
-    title: '父级ID',
-    dataIndex: 'parentId',
-    width: 250,
-  },
+  // {
+  //   title: '机构ID',
+  //   dataIndex: 'id',
+  //   width: 250,
+  // },
+  // {
+  //   title: '父级ID',
+  //   dataIndex: 'parentId',
+  //   width: 250,
+  // },
   {
     title: '排序',
     dataIndex: 'orderId',
-    width: 50,
+    // width: 50,
   }
 ];