feat: 子库管理页面开发

src/router/modules/systemManagement.ts

@@ -7,6 +7,18 @@ export default {
     rank: 15
   },
   children: [
+    {
+      path: "/systemManagement/sublibraryManagement",
+      name: "sublibraryManagement",
+      component: () =>
+        import("@/views/systemManagement/sublibraryManagement/index.vue"),
+      meta: {
+        title: "子库管理",
+        showLink: true,
+        showParent: true,
+        roles: ["admin", "common"]
+      }
+    },
     {
       path: "/systemManagement/accountManagement",
       name: "systemManagement",

src/views/systemManagement/sublibraryManagement/index.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import type { CheckboxValueType } from "element-plus";
+defineOptions({
+  name: "SublibraryManagement"
+});
+const seachForm = reactive({
+  title: "",
+  publishDeptName: "",
+  status: ""
+});
+const sublibraryForm = 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="sublibraryForm">
+          <el-form-item label="子库名称">
+            <el-input v-model="sublibraryForm.title" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="子库编码">
+            <el-input v-model="sublibraryForm.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>