feat: 账号、部门接口联调

src/api/system.ts

@@ -34,3 +34,105 @@ export const createSubLibrary = (data?: object) => {
     data
   });
 };
+
+/**
+ *
+ * @returns 修改子库
+ */
+export const updateSubLibrary = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    "/know-sub/applicationSubLibrary/update",
+    {
+      data
+    }
+  );
+};
+
+/**
+ *
+ * @returns 查看用户信息列表
+ */
+export const getUserList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/user/list", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 新增用户信息
+ */
+export const saveUserInfo = (data?: object) => {
+  return http.request<Result>("post", "/know-sub/user/saveUserInfo", {
+    data
+  });
+};
+
+/**
+ *
+ * @returns 修改用户信息
+ */
+export const updateUserInfo = (data?: object) => {
+  return http.request<Result>("post", "/know-sub/user/update", {
+    data
+  });
+};
+
+/**
+ *
+ * @returns 下载文件
+ */
+export function downloadFile(id) {
+  return `/know-sub/file/downloadFile?fileId=${id}`;
+}
+
+/**
+ *
+ * @returns 重置用户密码
+ */
+export const resetPW = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/user/resetPW", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 删除用户
+ */
+export const deletePW = (data?: object) => {
+  return http.request<Result>("delete", "/know-sub/user/delete", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 新建部门
+ */
+export const createDeptManage = (data?: object) => {
+  return http.request<Result>("post", "/know-sub/deptManage/save", {
+    data
+  });
+};
+
+/**
+ *
+ * @returns 修改部门
+ */
+export const updateDeptManage = (data?: object) => {
+  return http.request<Result>("post", "/know-sub/deptManage/update", {
+    data
+  });
+};
+
+/**
+ *
+ * @returns 删除用户
+ */
+export const deleteDeptManage = (data?: object) => {
+  return http.request<Result>("delete", "/know-sub/deptManage/delete", {
+    params: data
+  });
+};

src/views/businessManagement/processConfiguration/index.vue

@@ -100,6 +100,12 @@ const handleEdit = (value: any) => {
 // const changeStatus = item => {
 //   seachForm.status = item.id;
 // };
+function onCurrentChange(page: number) {
+  // console.log("onCurrentChange", page);
+  pagination.currentPage = page;
+  pagination.pageSize = 10;
+  getTableData();
+}
 onMounted(() => {
   search();
 });
@@ -135,6 +141,7 @@ onMounted(() => {
           color: 'var(--el-text-color-primary)'
         }"
         :pagination="pagination"
+        @page-current-change="onCurrentChange"
       >
         <template #operation="{ row }">
           <el-button link type="primary" @click="handleEdit(row)">

src/views/systemManagement/accountManagement/compontents/accountDrawer.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import { FormInstance, FormRules, UploadProps } from "element-plus";
+import { getRoleManageList, getUserList } from "@/api/business";
+import {
+  getDeptManageList,
+  saveUserInfo,
+  updateUserInfo,
+  downloadFile
+} from "@/api/system";
+import { message } from "@/utils/message";
+import { Plus } from "@element-plus/icons-vue";
+defineOptions({
+  name: "CreateForm"
+});
+
+const props = defineProps({
+  createFlag: {
+    type: Boolean,
+    default: false
+  },
+  updateFrom: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+  accountFromType: {
+    type: String,
+    default: ""
+  },
+  closeDrawer: {
+    type: Function
+  }
+});
+const modalVisible = ref(false);
+console.log(props.accountFromType);
+// 监听 props.message 的变化，并更新 modalVisible
+watch(
+  () => props.createFlag,
+  newValue => {
+    modalVisible.value = newValue; // 更新 modalVisible
+    if (newValue) {
+      if (props.accountFromType === "edit") {
+        getFlowDetails(props.updateFrom);
+      }
+    }
+  }
+);
+watch(
+  () => props.accountFromType,
+  newValue => {
+    console.log(newValue, "newValue");
+  }
+);
+const ruleFormRef = ref<FormInstance>();
+const accountForm = reactive({
+  id: "",
+  headPicId: "",
+  account: "",
+  username: "",
+  deptId: "",
+  roleIds: [],
+  remark: ""
+});
+const deptList = ref([]);
+const roleNameList = ref([]);
+const userNameList = ref([]);
+const rules = reactive<FormRules>({
+  headPicId: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  account: [{ required: true, message: "请输入", trigger: "blur" }],
+  username: [{ required: true, message: "请输入", trigger: "blur" }],
+  deptId: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  roleIds: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  remark: [{ required: true, message: "请输入", trigger: "blur" }]
+});
+
+const imageUrl = ref("");
+
+const handleAvatarSuccess: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  console.log(response, "response");
+  accountForm.headPicId = response.data;
+  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+};
+
+const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
+  console.log(rawFile);
+  // if (rawFile.type !== "image/jpeg") {
+  //   // ElMessage.error("Avatar picture must be JPG format!");
+  //   return false;
+  // } else if (rawFile.size / 1024 / 1024 > 2) {
+  //   // ElMessage.error("Avatar picture size can not exceed 2MB!");
+  //   return false;
+  // }
+  return true;
+};
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(accountForm);
+      // // console.log("submit!");
+      // const createForm = {
+      //   id: "",
+      //   flowName: accountForm.flowName,
+      //   remark: accountForm.remark,
+      //   flowType: accountForm.flowType,
+      //   roleIds: accountForm.roleIds,
+      // };
+      if (props.accountFromType === "edit") {
+        updateUserInfo(accountForm).then(res => {
+          if (res.code === 200) {
+            message("修改成功", { type: "success" });
+            props.closeDrawer();
+          }
+        });
+      } else {
+        saveUserInfo(accountForm).then(res => {
+          if (res.code === 200) {
+            message("新建成功", { type: "success" });
+            props.closeDrawer();
+          }
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+const handleDrawerClosed = () => {
+  props.closeDrawer();
+};
+
+const getDeptManageLists = async () => {
+  const res: any = await getDeptManageList({
+    baseName: "",
+    deptCode: "",
+    pageNum: 1,
+    pageSize: 20
+  });
+  console.log(res);
+  if (res.code == 200) {
+    deptList.value = res.data.records;
+  }
+};
+const getRoleManageLists = async () => {
+  const res: any = await getRoleManageList({
+    roleName: "",
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    roleNameList.value = res.data.records;
+  }
+};
+const getUserLists = async () => {
+  const res: any = await getUserList({
+    userName: "",
+    deptId: "",
+    roleId: "",
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    userNameList.value = res.data.records;
+  }
+};
+const getFlowDetails = (value: any) => {
+  accountForm.id = props.accountFromType === "edit" ? value.id : "";
+  accountForm.headPicId = value.headPicId;
+  accountForm.account = value.account;
+  accountForm.username = value.username;
+  accountForm.deptId = value.deptId;
+  accountForm.roleIds = value.userRoleList?.map(item => {
+    return item.roleId;
+  });
+  accountForm.remark = value.remark;
+};
+onMounted(() => {
+  getDeptManageLists();
+  getRoleManageLists();
+  getUserLists();
+});
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="modalVisible"
+      modal-class="drawer_content"
+      :with-header="false"
+      @closed="handleDrawerClosed"
+    >
+      <div class="drawer_header">
+        <span>新建账号</span>
+      </div>
+      <div class="drawer_box">
+        <el-form
+          :model="accountForm"
+          :rules="rules"
+          ref="ruleFormRef"
+          label-width="auto"
+        >
+          <el-form-item label="头像" prop="headPicId">
+            <el-upload
+              class="avatar-uploader"
+              action="/know-sub/file/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <!-- <img
+                v-if="accountForm.headPicId"
+                :src="imageUrl"
+                class="avatar"
+              /> -->
+              <img
+                v-if="accountForm.headPicId"
+                :src="
+                  props.accountFromType === 'edit'
+                    ? downloadFile(accountForm.headPicId)
+                    : imageUrl
+                "
+                class="avatar"
+              />
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="用户名" prop="account">
+            <el-input
+              v-model="accountForm.account"
+              autocomplete="off"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="姓名" prop="username">
+            <el-input
+              v-model="accountForm.username"
+              autocomplete="off"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="所属部门" prop="deptId">
+            <el-select
+              v-model="accountForm.deptId"
+              clearable
+              placeholder="请选择"
+              class="w-full"
+            >
+              <el-option
+                v-for="item in deptList"
+                :key="item.id"
+                :label="item.deptName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="角色" prop="roleIds">
+            <el-select
+              v-model="accountForm.roleIds"
+              multiple
+              clearable
+              collapse-tags
+              placeholder="请选择"
+              popper-class="custom-header"
+              :max-collapse-tags="3"
+              class="w-full"
+            >
+              <el-option
+                v-for="item in roleNameList"
+                :key="item.id"
+                :label="item.roleName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="accountForm.remark"
+              type="textarea"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-form>
+        <div class="drawer_footer">
+          <el-button plain @click="resetForm(ruleFormRef)">重置</el-button>
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__body) {
+  padding: 0 !important;
+}
+
+.drawer_content {
+  .drawer_header {
+    box-sizing: border-box;
+    height: 96px;
+    padding: 24px;
+    line-height: 65px;
+    border-bottom: 1px solid #e9e9e9;
+
+    span {
+      padding-left: 8px;
+      font-size: 20px;
+      border-left: 6px solid #0052d9;
+    }
+  }
+
+  .drawer_box {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 96px);
+    padding: 24px;
+
+    .drawer_footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .avatar-uploader {
+    display: block;
+    width: 100px;
+    height: 100px;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+  }
+
+  .avatar-uploader .avatar {
+    width: 100px;
+    height: 100px;
+    // display: block;
+    // border: 1px solid #d9d9d9;
+  }
+
+  .avatar-uploader .el-upload {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: var(--el-transition-duration-fast);
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  .el-icon.avatar-uploader-icon {
+    width: 100px;
+    height: 100px;
+    font-size: 28px;
+    color: #8c939d;
+    text-align: center;
+  }
+}
+</style>

src/views/systemManagement/accountManagement/compontents/deptDrawer.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import { FormInstance, FormRules } from "element-plus";
+import {
+  getDeptManageList,
+  createDeptManage,
+  updateDeptManage
+} from "@/api/system";
+import { message } from "@/utils/message";
+defineOptions({
+  name: "CreateForm"
+});
+
+const props = defineProps({
+  createFlag: {
+    type: Boolean,
+    default: false
+  },
+  updateFrom: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+  accountFromType: {
+    type: String,
+    default: ""
+  },
+  closeDrawer: {
+    type: Function
+  }
+});
+const modalVisible = ref(false);
+
+// 监听 props.message 的变化，并更新 modalVisible
+watch(
+  () => props.createFlag,
+  newValue => {
+    modalVisible.value = newValue; // 更新 modalVisible
+    if (newValue) {
+      if (props.accountFromType === "edit") {
+        getFlowDetails(props.updateFrom);
+      }
+    }
+  }
+);
+const ruleFormRef = ref<FormInstance>();
+const deptForm = reactive({
+  id: "",
+  deptCode: "",
+  parentDeptId: "",
+  deptName: "",
+  remark: ""
+});
+const subLibraryIdList = ref([]);
+const rules = reactive<FormRules>({
+  deptCode: [{ required: true, message: "请输入", trigger: "blur" }],
+  deptName: [{ required: true, message: "请输入", trigger: "blur" }]
+});
+
+// const submitForm = () => {
+//   props.closeDrawer();
+// };
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(deptForm);
+      if (props.accountFromType === "edit") {
+        updateDeptManage(deptForm).then(res => {
+          if (res.code === 200) {
+            message("修改成功", { type: "success" });
+            props.closeDrawer();
+          }
+        });
+      } else {
+        createDeptManage(deptForm).then(res => {
+          if (res.code === 200) {
+            message("新建成功", { type: "success" });
+            props.closeDrawer();
+          }
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+const handleDrawerClosed = () => {
+  props.closeDrawer();
+};
+const getOptionalBaseLists = async () => {
+  const res: any = await getDeptManageList({
+    flowType: ""
+  });
+  console.log(res);
+  if (res.code == 200) {
+    subLibraryIdList.value = res.data.records;
+  }
+};
+const getFlowDetails = (value: any) => {
+  deptForm.id = props.accountFromType === "edit" ? value.id : "";
+  deptForm.deptCode = value.deptCode;
+  deptForm.parentDeptId = value.parentDeptId;
+  deptForm.deptName = value.deptName;
+  deptForm.remark = value.remark;
+};
+onMounted(() => {
+  getOptionalBaseLists();
+});
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="modalVisible"
+      modal-class="drawer_content"
+      :with-header="false"
+      @closed="handleDrawerClosed"
+    >
+      <div class="drawer_header">
+        <span>新建部门</span>
+      </div>
+      <div class="drawer_box">
+        <el-form
+          :model="deptForm"
+          label-width="auto"
+          :rules="rules"
+          ref="ruleFormRef"
+        >
+          <el-form-item label="部门编码" prop="deptCode">
+            <el-input
+              v-model="deptForm.deptCode"
+              autocomplete="off"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="部门名称" prop="deptCode">
+            <el-input
+              v-model="deptForm.deptName"
+              autocomplete="off"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="所属上级">
+            <el-select
+              v-model="deptForm.parentDeptId"
+              clearable
+              popper-class="custom-header"
+              placeholder="请选择"
+              class="w-full"
+            >
+              <el-option
+                v-for="item in subLibraryIdList"
+                :key="item.id"
+                :label="item.deptName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="deptForm.remark" type="textarea" />
+          </el-form-item>
+        </el-form>
+        <div class="drawer_footer">
+          <el-button plain @click="resetForm(ruleFormRef)">重置</el-button>
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__body) {
+  padding: 0 !important;
+}
+
+.drawer_content {
+  .drawer_header {
+    box-sizing: border-box;
+    height: 96px;
+    padding: 24px;
+    line-height: 65px;
+    border-bottom: 1px solid #e9e9e9;
+
+    span {
+      padding-left: 8px;
+      font-size: 20px;
+      border-left: 6px solid #0052d9;
+    }
+  }
+
+  .drawer_box {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 96px);
+    padding: 24px;
+
+    .drawer_footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

src/views/systemManagement/accountManagement/index.vue

@@ -1,19 +1,39 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
-import type { CheckboxValueType } from "element-plus";
+import { reactive, ref, onMounted } from "vue";
+import type { FormInstance } from "element-plus";
+import { Close } from "@element-plus/icons-vue";
+import { useColumns } from "./table/accountColumns";
+import {
+  getUserList,
+  getDeptManageList,
+  resetPW,
+  deletePW,
+  deleteDeptManage
+} from "@/api/system";
+import { message } from "@/utils/message";
+import accountDrawer from "./compontents/accountDrawer.vue";
+import deptDrawer from "./compontents/deptDrawer.vue";
 defineOptions({
   name: "AccountManagement"
 });
+const { accountColumns, deptColumns, roleColumns } = useColumns();
 const seachForm = reactive({
-  title: "",
-  publishDeptName: "",
   status: "1"
 });
 const accountForm = reactive({
   userName: "",
-  role: "",
-  department: ""
+  roleId: "",
+  deptId: ""
 });
+const updateFrom = ref({});
+const updateDeptFrom = ref({});
+const passwordForm = reactive({
+  id: "",
+  account: "",
+  password: "",
+  confirmPassword: ""
+});
+const accountFromType = ref("");
 const tabList = ref([
   {
     title: "账号管理",
@@ -32,161 +52,214 @@ const pagination = reactive({
   total: 0,
   pageSize: 10,
   currentPage: 1,
+  align: "center",
+  layout: "total, prev, pager, next, jumper",
   background: true
 });
-const columns: TableColumnList = [
-  {
-    label: "序号",
-    prop: "diseaseName"
-  },
-  {
-    label: "用户名",
-    prop: "diseaseName"
-  },
-  {
-    label: "姓名",
-    prop: "diseaseName"
-  },
-  {
-    label: "角色",
-    prop: "diseaseName"
-  },
-  {
-    label: "所属部门",
-    prop: "diseaseName"
-  },
-  {
-    label: "状态",
-    prop: "diseaseName"
-  },
-  {
-    label: "备注",
-    prop: "diseaseName"
-  },
-  {
-    label: "最新时间",
-    prop: "diseaseName"
-  },
-  {
-    label: "操作",
-    fixed: "right",
-    width: 350,
-    slot: "operation"
-  }
-];
+
 const dataList = ref([]);
+const accountDataList = ref([]);
+// const deptDataList = ref([]);
+/**
+ * 部门列表查询
+ */
+const getDeptData = async () => {
+  const res: any = await getDeptManageList({
+    baseName: "",
+    deptCode: "",
+    pageNum: 1,
+    pageSize: 20
+  });
+  if (res.code === 200) {
+    deptOptions.value = res.data.records;
+    if (seachForm.status === "2") {
+      pagination.total = res.data.total;
+    }
+  }
+};
+/**
+ * 用户列表查询
+ */
+const getUserTableData = async () => {
+  const res: any = await getUserList({
+    userName: accountForm.userName,
+    deptId: accountForm.deptId,
+    roleId: accountForm.roleId,
+    pageNum: pagination.currentPage,
+    pageSize: pagination.pageSize
+  });
+  if (res.code === 200) {
+    accountDataList.value = res.data.records;
+    pagination.total = res.data.total;
+  }
+  console.log(res);
+  // dataList.value = res.data;
+};
 const search = () => {
   pagination.currentPage = 1;
   pagination.pageSize = 10;
+  if (seachForm.status === "1") {
+    getUserTableData();
+  } else if (seachForm.status === "2") {
+    getDeptData();
+  }
 };
 
 const reset = () => {
-  seachForm.title = "";
-  seachForm.publishDeptName = "";
+  accountForm.userName = "";
+  accountForm.roleId = "";
+  accountForm.deptId = "";
   // search();
 };
 const createFlag = ref(false);
+const createDeptFlag = ref(false);
+const dialogFormVisible = ref(false);
+const deleteFormVisible = ref(false);
 
-// const create = () => {
-//   createFlag.value = true;
-//   // search();
-// };
+const passwordFormRef = ref<FormInstance>();
+
+const create = () => {
+  if (seachForm.status === "1") {
+    createFlag.value = true;
+  } else if (seachForm.status === "2") {
+    createDeptFlag.value = true;
+  }
+
+  // search();
+};
 // const changeStatus = item => {
 //   seachForm.status = item.id;
 // };
-const checkAll = ref(false);
-const indeterminate = ref(false);
-const value = ref<CheckboxValueType[]>([]);
-const cities = ref([
-  {
-    value: "Beijing",
-    label: "Beijing"
-  },
-  {
-    value: "Shanghai",
-    label: "Shanghai"
-  },
-  {
-    value: "Nanjing",
-    label: "Nanjing"
-  },
-  {
-    value: "Chengdu",
-    label: "Chengdu"
-  },
-  {
-    value: "Shenzhen",
-    label: "Shenzhen"
-  },
-  {
-    value: "Guangzhou",
-    label: "Guangzhou"
+const closeDrawer = () => {
+  if (createFlag.value) {
+    createFlag.value = false;
+    accountFromType.value = "";
+    search();
+  } else if (createDeptFlag.value) {
+    createDeptFlag.value = false;
+    accountFromType.value = "";
+    search();
   }
-]);
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
-  }
-];
+  // if (updateFlag.value) {
+  //   updateFlag.value = false;
+  //   search();
+  // }
+};
+const deptOptions = ref([]);
 
-watch(value, val => {
-  if (val.length === 0) {
-    checkAll.value = false;
-    indeterminate.value = false;
-  } else if (val.length === cities.value.length) {
-    checkAll.value = true;
-    indeterminate.value = false;
-  } else {
-    indeterminate.value = true;
+const changeStatus = item => {
+  seachForm.status = item.id;
+  search();
+};
+const handleView = async (value: any, type: string) => {
+  console.log(value);
+  createFlag.value = true;
+  accountFromType.value = type;
+  updateFrom.value = value;
+};
+const handleEdit = async (value: any, type: string) => {
+  if (seachForm.status === "1") {
+    createFlag.value = true;
+    accountFromType.value = type;
+    updateFrom.value = value;
+  } else if (seachForm.status === "2") {
+    createDeptFlag.value = true;
+    accountFromType.value = type;
+    updateDeptFrom.value = value;
   }
-});
+};
 
-const handleCheckAll = (val: CheckboxValueType) => {
-  indeterminate.value = false;
-  if (val) {
-    value.value = cities.value.map(_ => _.value);
+const handleReset = (value: any) => {
+  dialogFormVisible.value = true;
+  passwordForm.id = value.id;
+  passwordForm.account = value.account;
+  // updateId.value = value.id;
+  // updateFlag.value = true;
+};
+const handleDelete = (value: any) => {
+  deleteFormVisible.value = true;
+  passwordForm.id = value.id;
+};
+function onCurrentChange(page: number) {
+  // console.log("onCurrentChange", page);
+  pagination.currentPage = page;
+  pagination.pageSize = 10;
+  getUserTableData();
+}
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate(valid => {
+    if (valid) {
+      // console.log(valid);
+      resetPW({
+        id: passwordForm.id
+      }).then(res => {
+        if (res.code === 200) {
+          message("重置成功", { type: "success" });
+          dialogFormVisible.value = false;
+        }
+      });
+    } else {
+      dialogFormVisible.value = false;
+      console.log("error submit!");
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  dialogFormVisible.value = false;
+};
+const deleteForm = () => {
+  if (seachForm.status === "1") {
+    deletePW({
+      id: passwordForm.id
+    }).then(res => {
+      if (res.code === 200) {
+        message("删除成功", { type: "success" });
+        deleteFormVisible.value = false;
+        search();
+      }
+    });
+  } else if (seachForm.status === "2") {
+    deleteDeptManage({
+      id: passwordForm.id
+    }).then(res => {
+      if (res.code === 200) {
+        message("删除成功", { type: "success" });
+        deleteFormVisible.value = false;
+        search();
+      }
+    });
+  }
+};
+const newName = (type: any) => {
+  if (type === "1") {
+    return "新建账号";
+  } else if (type === "2") {
+    return "新建部门";
   } else {
-    value.value = [];
+    return "新建角色";
   }
 };
-const changeStatus = item => {
-  seachForm.status = item.id;
+const deleteName = (type: any) => {
+  if (type === "1") {
+    return "账号";
+  } else if (type === "2") {
+    return "部门";
+  } else {
+    return "角色";
+  }
 };
+onMounted(() => {
+  getDeptData();
+  getUserTableData();
+});
 </script>
 
 <template>
   <div class="sublibrary_management app-main-content">
-    <!-- <div class="seach">
-      <div class="seach-title"><span>子库管理</span></div>
-      <el-form :model="seachForm">
-        <el-row>
-          <el-form-item label="子库名称">
-            <el-input v-model="seachForm.title" />
-          </el-form-item>
-          <el-button class="ml-8" @click="search" type="primary"
-            >搜索</el-button
-          >
-          <el-button @click="reset">重置</el-button>
-        </el-row>
-      </el-form>
-    </div> -->
     <div class="main-table">
       <div class="main-table-header">
         <div class="tab-list">
@@ -201,106 +274,242 @@ const changeStatus = item => {
           </div>
         </div>
         <div class="header-btn">
-          <el-button @click="search" type="primary">新建账号</el-button>
+          <el-button @click="create" type="primary">{{
+            newName(seachForm.status)
+          }}</el-button>
         </div>
       </div>
       <div class="account_seach" v-if="seachForm.status === '1'">
         <el-form :model="accountForm">
           <el-row>
             <el-form-item label="用户名">
-              <el-input v-model="accountForm.userName" />
+              <el-input v-model="accountForm.userName" placeholder="请输入" />
             </el-form-item>
             <el-form-item class="ml-4" label="角色">
-              <el-input v-model="accountForm.role" />
+              <el-input v-model="accountForm.roleId" placeholder="请输入" />
             </el-form-item>
             <el-form-item class="ml-4" label="所属部门">
               <el-select
-                v-model="accountForm.department"
+                v-model="accountForm.deptId"
                 clearable
                 placeholder="请选择"
                 style="width: 240px"
               >
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  v-for="item in deptOptions"
+                  :key="item.id"
+                  :label="item.deptName"
+                  :value="item.id"
                 />
               </el-select>
             </el-form-item>
-            <el-button class="ml-8" @click="search" type="primary"
-              >搜索</el-button
-            >
-            <el-button @click="reset">重置</el-button>
+
+            <el-button @click="reset" class="ml-8">重置</el-button>
+            <el-button @click="search" type="primary">搜索</el-button>
           </el-row>
         </el-form>
+        <pure-table
+          showOverflowTooltip
+          alignWhole="center"
+          :data="accountDataList"
+          :columns="accountColumns"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          :pagination="pagination"
+          @page-current-change="onCurrentChange"
+        >
+          <template #index="{ index }">
+            <span>{{ index + 1 }}</span>
+          </template>
+          <template #userRoleList="{ row }">
+            <span v-for="(item, index) in row.userRoleList" :key="index"
+              >{{ item.roleName
+              }}<i v-if="index < row.userRoleList.length - 1">, </i></span
+            >
+          </template>
+          <template #status="{ row }">
+            <el-switch v-model="row.status" />
+          </template>
+          <template #operation="{ row }">
+            <el-button link type="primary" @click="handleView(row, 'view')">
+              查看
+            </el-button>
+            <span>|</span>
+            <el-button link type="primary" @click="handleEdit(row, 'edit')">
+              编辑
+            </el-button>
+            <span>|</span>
+            <el-button link type="primary" @click="handleReset(row)">
+              重置密码
+            </el-button>
+            <span>|</span>
+            <el-button link type="danger" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template></pure-table
+        >
       </div>
-      <pure-table
-        showOverflowTooltip
-        alignWhole="center"
-        :data="dataList"
-        :columns="columns"
-        :header-cell-style="{
-          background: 'var(--el-table-row-hover-bg-color)',
-          color: 'var(--el-text-color-primary)'
-        }"
-      >
-        <template #operation="{ row }">
-          <el-button link type="danger" @click="handleDelete(row)">
-            删除
-          </el-button>
-        </template></pure-table
-      >
-    </div>
-    <el-drawer
-      v-model="createFlag"
-      modal-class="drawer_content"
-      :with-header="false"
-    >
-      <div class="drawer_header">
-        <span>新建子库</span>
+      <div class="account_seach" v-if="seachForm.status === '2'">
+        <pure-table
+          showOverflowTooltip
+          alignWhole="center"
+          :data="deptOptions"
+          :columns="deptColumns"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          :pagination="pagination"
+          @page-current-change="onCurrentChange"
+        >
+          <template #index="{ index }">
+            <span>{{ index + 1 }}</span>
+          </template>
+          <template #operation="{ row }">
+            <el-button link type="primary" @click="handleEdit(row, 'edit')">
+              编辑
+            </el-button>
+            <span>|</span>
+            <el-button link type="primary" @click="handleReset(row)">
+              部门权限
+            </el-button>
+            <span>|</span>
+            <el-button link type="danger" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template></pure-table
+        >
       </div>
-      <div class="drawer_box">
-        <el-form :model="accountForm">
-          <el-form-item label="子库名称">
-            <el-input v-model="accountForm.title" autocomplete="off" />
+      <div class="account_seach" v-if="seachForm.status === '3'">
+        <pure-table
+          showOverflowTooltip
+          alignWhole="center"
+          :data="dataList"
+          :columns="roleColumns"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
+        >
+          <template #operation="{ row }">
+            <el-button link type="danger" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template></pure-table
+        >
+      </div>
+      <!-- 账户抽屉 -->
+      <accountDrawer
+        :createFlag="createFlag"
+        :updateFrom="updateFrom"
+        :accountFromType="accountFromType"
+        :closeDrawer="closeDrawer"
+      />
+      <!-- 部门 -->
+      <deptDrawer
+        :createFlag="createDeptFlag"
+        :updateFrom="updateDeptFrom"
+        :accountFromType="accountFromType"
+        :closeDrawer="closeDrawer"
+      />
+      <!-- 账户弹框 -->
+      <el-dialog
+        v-model="dialogFormVisible"
+        title="Shipping address"
+        width="560"
+        :show-close="false"
+      >
+        <template #header="{ close, titleId, titleClass }">
+          <div class="my-header">
+            <h4 :id="titleId" :class="titleClass"><span />重置密码</h4>
+            <el-icon @click="close" class="cursor-pointer"><Close /></el-icon>
+          </div>
+        </template>
+        <el-form
+          :model="passwordForm"
+          label-width="auto"
+          ref="passwordFormRef"
+          class="p-6"
+        >
+          <el-form-item label="用户名">
+            <el-input
+              v-model="passwordForm.account"
+              autocomplete="off"
+              disabled
+            />
           </el-form-item>
-          <el-form-item label="子库编码">
-            <el-input v-model="accountForm.title" autocomplete="off" />
+          <el-form-item
+            label="密码"
+            prop="password"
+            :rules="[
+              {
+                required: true,
+                message: '请输入',
+                trigger: 'blur'
+              }
+            ]"
+          >
+            <el-input
+              v-model="passwordForm.password"
+              autocomplete="off"
+              placeholder="请输入"
+            />
           </el-form-item>
-          <el-form-item label="关联部门">
-            <el-select
-              v-model="value"
-              multiple
-              clearable
-              collapse-tags
-              placeholder="Select"
-              popper-class="custom-header"
-              :max-collapse-tags="3"
-              style="width: 240px"
-            >
-              <el-option
-                v-for="item in cities"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <el-checkbox
-              v-model="checkAll"
-              :indeterminate="indeterminate"
-              @change="handleCheckAll"
-            >
-              All
-            </el-checkbox>
+          <el-form-item
+            label="确认密码"
+            prop="confirmPassword"
+            :rules="[
+              {
+                required: true,
+                message: '请输入',
+                trigger: 'blur'
+              }
+            ]"
+          >
+            <el-input
+              v-model="passwordForm.confirmPassword"
+              autocomplete="off"
+              placeholder="请输入"
+            />
           </el-form-item>
         </el-form>
-        <div class="drawer_footer">
-          <el-button plain>重置</el-button>
-          <el-button type="primary">确定</el-button>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="resetForm(passwordFormRef)">取消</el-button>
+            <el-button type="primary" @click="submitForm(passwordFormRef)">
+              确定
+            </el-button>
+          </div>
+        </template>
+      </el-dialog>
+      <!-- 账户删除弹框 -->
+      <el-dialog
+        v-model="deleteFormVisible"
+        title="Shipping address"
+        width="500"
+        :show-close="false"
+      >
+        <template #header="{ titleId, titleClass }">
+          <div class="my-header_delete">
+            <h4 :id="titleId" :class="titleClass">
+              <div class="my_delete_icon" />
+              确认删除【{{ deleteName(seachForm.status) }}】？
+            </h4>
+          </div>
+        </template>
+        <div class="my_delete_body">
+          删除后无法找回，此操作不可逆，请谨慎处理
         </div>
-      </div>
-    </el-drawer>
+        <template #footer>
+          <div class="dialog-footer_delete">
+            <el-button @click="deleteFormVisible = false">取消</el-button>
+            <el-button type="primary" @click="deleteForm"> 确定 </el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -357,38 +566,69 @@ const changeStatus = item => {
     }
   }
 
-  :deep(.el-drawer__body) {
-    padding: 0 !important;
+  :deep(.el-dialog) {
+    background: linear-gradient(180deg, #e1ecfe 0%, #fff 30%);
   }
 
-  .drawer_content {
-    .drawer_header {
-      box-sizing: border-box;
-      height: 96px;
-      padding: 24px;
-      line-height: 65px;
-      border-bottom: 1px solid #e9e9e9;
+  .my-header,
+  .my-header_delete {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    justify-content: space-between;
+    height: 74px;
+    padding: 24px;
+    border-bottom: 1px solid rgb(91 139 255 / 30%);
+
+    h4 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       span {
-        padding-left: 8px;
-        font-size: 20px;
-        border-left: 6px solid #0052d9;
+        display: inline-block;
+        width: 6px;
+        height: 20px;
+        margin-right: 10px;
+        background: #0052d9;
+        border-radius: 3px;
       }
     }
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 0;
+  }
 
-    .drawer_box {
-      box-sizing: border-box;
+  .my-header_delete {
+    padding: 24px 24px 0;
+    border-bottom: none;
+
+    h4 {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: calc(100vh - 96px);
-      padding: 24px;
+      align-items: center;
+      justify-content: center;
 
-      .drawer_footer {
-        display: flex;
-        justify-content: flex-end;
+      .my_delete_icon {
+        display: block;
+        width: 28px;
+        height: 28px;
+        margin-right: 10px;
+        background-image: url("@/assets/home/tishi@2x.png");
+        background-size: 100% 100%;
       }
     }
   }
+
+  .my_delete_body {
+    text-align: center;
+  }
+
+  .dialog-footer_delete {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
 }
 </style>

src/views/systemManagement/accountManagement/table/accountColumns.ts

@@ -0,0 +1,101 @@
+export function useColumns() {
+  /**
+   * 账户
+   */
+  const accountColumns: TableColumnList = [
+    {
+      label: "序号",
+      slot: "index"
+    },
+    {
+      label: "用户名",
+      prop: "account"
+    },
+    {
+      label: "姓名",
+      prop: "username"
+    },
+    {
+      label: "角色",
+      slot: "userRoleList"
+    },
+    {
+      label: "所属部门",
+      prop: "deptName"
+    },
+    {
+      label: "状态",
+      slot: "status"
+    },
+    {
+      label: "备注",
+      prop: "remark"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 350,
+      slot: "operation"
+    }
+  ];
+  /**
+   * 部门
+   */
+  const deptColumns: TableColumnList = [
+    {
+      label: "序号",
+      slot: "index"
+    },
+    {
+      label: "部门编号",
+      prop: "deptCode"
+    },
+    {
+      label: "部门名称",
+      prop: "deptName"
+    },
+    {
+      label: "所属上级",
+      prop: "parentDeptName"
+    },
+    {
+      label: "备注",
+      prop: "remark"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 350,
+      slot: "operation"
+    }
+  ];
+  /**
+   * 角色
+   */
+  const roleColumns: TableColumnList = [
+    {
+      label: "序号",
+      prop: "diseaseName"
+    },
+    {
+      label: "角色",
+      prop: "diseaseName"
+    },
+    {
+      label: "备注",
+      prop: "diseaseName"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 350,
+      slot: "operation"
+    }
+  ];
+
+  return {
+    accountColumns,
+    deptColumns,
+    roleColumns
+  };
+}

src/views/systemManagement/sublibraryManagement/index.vue

@@ -4,7 +4,8 @@ import type { CheckboxValueType, FormInstance, FormRules } from "element-plus";
 import {
   getSubLibraryList,
   getDeptManageList,
-  createSubLibrary
+  createSubLibrary,
+  updateSubLibrary
 } from "@/api/system";
 import { message } from "@/utils/message";
 defineOptions({
@@ -14,6 +15,7 @@ const seachForm = reactive({
   baseName: ""
 });
 const sublibraryForm = reactive({
+  id: "",
   baseName: "",
   baseCode: "",
   deptIds: []
@@ -128,7 +130,7 @@ const getTableData = async () => {
   // dataList.value = res.data;
 };
 /**
- * 子库列表查询
+ * 部门列表查询
  */
 const getDeptData = async () => {
   const res: any = await getDeptManageList({
@@ -146,28 +148,65 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid, fields) => {
     if (valid) {
       console.log(valid);
-      const createForm = {
-        id: "",
-        baseName: sublibraryForm.baseName,
-        baseCode: sublibraryForm.baseCode,
-        deptIds: sublibraryForm.deptIds
-      };
-      createSubLibrary(createForm).then(res => {
-        if (res.code === 200) {
-          message("新建成功", { type: "success" });
-          createFlag.value = false;
-          search();
-        }
-      });
+      if (sublibraryForm.id) {
+        const updateForm = {
+          id: sublibraryForm.id,
+          baseName: sublibraryForm.baseName,
+          baseCode: sublibraryForm.baseCode,
+          deptIds: sublibraryForm.deptIds
+        };
+        updateSubLibrary(updateForm).then(res => {
+          if (res.code === 200) {
+            message("新建成功", { type: "success" });
+            createFlag.value = false;
+            search();
+          }
+        });
+      } else {
+        const createForm = {
+          id: "",
+          baseName: sublibraryForm.baseName,
+          baseCode: sublibraryForm.baseCode,
+          deptIds: sublibraryForm.deptIds
+        };
+        createSubLibrary(createForm).then(res => {
+          if (res.code === 200) {
+            message("新建成功", { type: "success" });
+            createFlag.value = false;
+            search();
+          }
+        });
+      }
     } else {
       console.log("error submit!", fields);
     }
   });
 };
+const handleEdit = (value: any) => {
+  createFlag.value = true;
+  console.log(value);
+  sublibraryForm.id = value.id;
+  sublibraryForm.baseCode = value.baseCode;
+  sublibraryForm.baseName = value.baseName;
+  sublibraryForm.deptIds = value.deptInfoList.map(item => item.deptId);
+};
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();
 };
+const handleClose = (done: () => void) => {
+  sublibraryForm.id = "";
+  sublibraryForm.baseCode = "";
+  sublibraryForm.baseName = "";
+  sublibraryForm.deptIds = [];
+  done();
+};
+function onCurrentChange(page: number) {
+  // console.log("onCurrentChange", page);
+  pagination.currentPage = page;
+  pagination.pageSize = 10;
+  getTableData();
+}
 onMounted(() => {
   search();
   getDeptData();
@@ -206,6 +245,7 @@ onMounted(() => {
           color: 'var(--el-text-color-primary)'
         }"
         :pagination="pagination"
+        @page-current-change="onCurrentChange"
       >
         <template #index="{ index }">
           <span>{{ index + 1 }}</span>
@@ -227,9 +267,10 @@ onMounted(() => {
       v-model="createFlag"
       modal-class="drawer_content"
       :with-header="false"
+      :before-close="handleClose"
     >
       <div class="drawer_header">
-        <span>新建子库</span>
+        <span>{{ sublibraryForm.id ? "修改子库" : "新建子库" }}</span>
       </div>
       <div class="drawer_box">
         <el-form
@@ -266,9 +307,9 @@ onMounted(() => {
             >
               <el-option
                 v-for="item in deptList"
-                :key="item.deptCode"
+                :key="item.id"
                 :label="item.deptName"
-                :value="item.deptCode"
+                :value="item.id"
               />
             </el-select>
             <el-checkbox

vite.config.ts

@@ -46,7 +46,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
       proxy: {
         // 类型： Record<string, string | ProxyOp 为开发服务器配置自定义代理规则
         "/know-sub/": {
-          target: "http://192.168.10.27:9201/",
+          target: "http://192.168.10.25:9201/",
           changeOrigin: true,
           secure: false
           // eslint-disable-next-line no-shadow