From 2c78f0852bce48ef865a7af220924417e382ffd2 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Thu, 27 Jun 2024 18:01:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E5=AD=97=E5=85=B8=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/systemManagement.ts        |  12 +
 .../accountManagement/index.vue               | 393 +++++++++++++++++-
 .../dictionaryManagement/index.vue            | 260 ++++++++++++
 .../sublibraryManagement/index.vue            |   6 +-
 4 files changed, 667 insertions(+), 4 deletions(-)
 create mode 100644 src/views/systemManagement/dictionaryManagement/index.vue

diff --git a/src/router/modules/systemManagement.ts b/src/router/modules/systemManagement.ts
index ac47038..5178c34 100644
--- a/src/router/modules/systemManagement.ts
+++ b/src/router/modules/systemManagement.ts
@@ -30,6 +30,18 @@ export default {
         showParent: true,
         roles: ["admin", "common"]
       }
+    },
+    {
+      path: "/systemManagement/dictionaryManagement",
+      name: "dictionaryManagement",
+      component: () =>
+        import("@/views/systemManagement/dictionaryManagement/index.vue"),
+      meta: {
+        title: "字典管理",
+        showLink: true,
+        showParent: true,
+        roles: ["admin", "common"]
+      }
     }
   ]
 } as RouteConfigsTable;
diff --git a/src/views/systemManagement/accountManagement/index.vue b/src/views/systemManagement/accountManagement/index.vue
index b6a64e1..ad98328 100644
--- a/src/views/systemManagement/accountManagement/index.vue
+++ b/src/views/systemManagement/accountManagement/index.vue
@@ -1,5 +1,394 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import type { CheckboxValueType } from "element-plus";
+defineOptions({
+  name: "AccountManagement"
+});
+const seachForm = reactive({
+  title: "",
+  publishDeptName: "",
+  status: "1"
+});
+const accountForm = reactive({
+  userName: "",
+  role: "",
+  department: ""
+});
+const tabList = ref([
+  {
+    title: "账号管理",
+    id: "1"
+  },
+  {
+    title: "部门管理",
+    id: "2"
+  },
+  {
+    title: "角色权限",
+    id: "3"
+  }
+]);
+const pagination = reactive({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  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 search = () => {
+  pagination.currentPage = 1;
+  pagination.pageSize = 10;
+};
+
+const reset = () => {
+  seachForm.title = "";
+  seachForm.publishDeptName = "";
+  // search();
+};
+const createFlag = ref(false);
+
+// const create = () => {
+//   createFlag.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 options = [
+  {
+    value: "Option1",
+    label: "Option1"
+  },
+  {
+    value: "Option2",
+    label: "Option2"
+  },
+  {
+    value: "Option3",
+    label: "Option3"
+  },
+  {
+    value: "Option4",
+    label: "Option4"
+  },
+  {
+    value: "Option5",
+    label: "Option5"
+  }
+];
+
+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 handleCheckAll = (val: CheckboxValueType) => {
+  indeterminate.value = false;
+  if (val) {
+    value.value = cities.value.map(_ => _.value);
+  } else {
+    value.value = [];
+  }
+};
+const changeStatus = item => {
+  seachForm.status = item.id;
+};
+</script>
 
 <template>
-  <div>11111</div>
+  <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">
+          <div
+            class="tab-list-item"
+            :class="[seachForm.status === item.id ? 'actived' : '']"
+            v-for="(item, index) in tabList"
+            :key="index"
+            @click="changeStatus(item)"
+          >
+            <span>{{ item.title }}</span>
+          </div>
+        </div>
+        <div class="header-btn">
+          <el-button @click="search" type="primary">新建账号</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-form-item>
+            <el-form-item class="ml-4" label="角色">
+              <el-input v-model="accountForm.role" />
+            </el-form-item>
+            <el-form-item class="ml-4" label="所属部门">
+              <el-select
+                v-model="accountForm.department"
+                clearable
+                placeholder="请选择"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </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>
+      <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>
+      <div class="drawer_box">
+        <el-form :model="accountForm">
+          <el-form-item label="子库名称">
+            <el-input v-model="accountForm.title" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="子库编码">
+            <el-input v-model="accountForm.title" autocomplete="off" />
+          </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>
+        </el-form>
+        <div class="drawer_footer">
+          <el-button plain>重置</el-button>
+          <el-button type="primary">确定</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
 </template>
+<style lang="scss" scoped>
+.sublibrary_management {
+  .main-table {
+    border-radius: 6px;
+
+    .main-table-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 24px;
+      border-bottom: 1px solid #dfe1e2;
+
+      .tab-list {
+        position: relative;
+        top: 1px;
+        display: flex;
+        align-items: center;
+
+        .tab-list-item {
+          padding: 16px 34px;
+          font-size: 18px;
+          color: #333;
+          cursor: pointer;
+          background: #f5f7f9;
+          border: 1px solid #dfe1e2;
+          border-bottom: 0;
+        }
+
+        .actived {
+          color: #0052d9;
+          background: #fff;
+          border: 0;
+          border-top: 3px solid #0052d9;
+        }
+      }
+
+      .header-btn {
+        display: flex;
+        align-items: center;
+      }
+
+      .main-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 142px;
+        height: 32px;
+        font-size: 14px;
+        color: #fff;
+        background: #0052d9;
+        border-radius: 6px;
+      }
+    }
+  }
+
+  :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>
diff --git a/src/views/systemManagement/dictionaryManagement/index.vue b/src/views/systemManagement/dictionaryManagement/index.vue
new file mode 100644
index 0000000..b5ed1ae
--- /dev/null
+++ b/src/views/systemManagement/dictionaryManagement/index.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import type { CheckboxValueType } from "element-plus";
+defineOptions({
+  name: "DictionaryManagement"
+});
+const seachForm = reactive({
+  title: "",
+  publishDeptName: "",
+  status: ""
+});
+const dictionaryForm = reactive({
+  title: "",
+  publishDeptName: "",
+  status: ""
+});
+const pagination = reactive({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true
+});
+const columns: TableColumnList = [
+  {
+    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 search = () => {
+  pagination.currentPage = 1;
+  pagination.pageSize = 10;
+};
+
+const reset = () => {
+  seachForm.title = "";
+  seachForm.publishDeptName = "";
+  // search();
+};
+const createFlag = ref(false);
+
+const create = () => {
+  createFlag.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"
+  }
+]);
+
+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 handleCheckAll = (val: CheckboxValueType) => {
+  indeterminate.value = false;
+  if (val) {
+    value.value = cities.value.map(_ => _.value);
+  } else {
+    value.value = [];
+  }
+};
+</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="header-btn">
+          <el-button @click="create" type="primary">新建子库</el-button>
+        </div>
+      </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>
+      <div class="drawer_box">
+        <el-form :model="dictionaryForm">
+          <el-form-item label="字典名称">
+            <el-input v-model="dictionaryForm.title" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="字典编码">
+            <el-input v-model="dictionaryForm.title" autocomplete="off" />
+          </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>
+        </el-form>
+        <div class="drawer_footer">
+          <el-button plain>重置</el-button>
+          <el-button type="primary">确定</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<style lang="scss" scoped>
+.sublibrary_management {
+  .main-table {
+    border-radius: 6px;
+
+    .main-table-header {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 24px;
+    }
+  }
+
+  :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>
diff --git a/src/views/systemManagement/sublibraryManagement/index.vue b/src/views/systemManagement/sublibraryManagement/index.vue
index e5df0ae..b294ef7 100644
--- a/src/views/systemManagement/sublibraryManagement/index.vue
+++ b/src/views/systemManagement/sublibraryManagement/index.vue
@@ -178,10 +178,11 @@ const handleCheckAll = (val: CheckboxValueType) => {
           <el-form-item label="关联部门">
             <el-select
               v-model="value"
+              class="w-[80%!important]"
               multiple
               clearable
               collapse-tags
-              placeholder="Select"
+              placeholder="请选择"
               popper-class="custom-header"
               :max-collapse-tags="3"
               style="width: 240px"
@@ -194,11 +195,12 @@ const handleCheckAll = (val: CheckboxValueType) => {
               />
             </el-select>
             <el-checkbox
+              class="ml-6"
               v-model="checkAll"
               :indeterminate="indeterminate"
               @change="handleCheckAll"
             >
-              All
+              全部
             </el-checkbox>
           </el-form-item>
         </el-form>