From 26cc7b3a37904120a972d9956b11eeaa97d5ec5d Mon Sep 17 00:00:00 2001
From: wanglihui <1769794040@qq.com>
Date: Sun, 13 Aug 2023 23:49:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=96=B0=E5=A2=9E=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workplace/configuration.vue         |  17 --
 .../configuration/components/Banner.vue       | 130 +++++++++++
 .../configuration/components/CustomGroup.vue  | 201 ++++++++++++++++++
 .../configuration/components/Recommend.vue    | 130 +++++++++++
 src/pages/workplace/configuration/index.vue   |  54 +++++
 src/styles/element.scss                       |  62 +++++-
 6 files changed, 575 insertions(+), 19 deletions(-)
 delete mode 100644 src/pages/workplace/configuration.vue
 create mode 100644 src/pages/workplace/configuration/components/Banner.vue
 create mode 100644 src/pages/workplace/configuration/components/CustomGroup.vue
 create mode 100644 src/pages/workplace/configuration/components/Recommend.vue
 create mode 100644 src/pages/workplace/configuration/index.vue

diff --git a/src/pages/workplace/configuration.vue b/src/pages/workplace/configuration.vue
deleted file mode 100644
index cddf4b3..0000000
--- a/src/pages/workplace/configuration.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <bd-page class="flex-col">
-    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
-      <div>工作台设置</div>
-    </div>
-  </bd-page>
-</template>
-
-<route lang="yaml">
-meta:
-  title: 工作台设置
-  isAffix: false
-</route>
-
-<script lang="tsx" setup>
-
-</script>
diff --git a/src/pages/workplace/configuration/components/Banner.vue b/src/pages/workplace/configuration/components/Banner.vue
new file mode 100644
index 0000000..640a2d5
--- /dev/null
+++ b/src/pages/workplace/configuration/components/Banner.vue
@@ -0,0 +1,130 @@
+<template>
+  <bd-page class="flex-col !p-0">
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left"></div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <el-form-item class="mb-0 !mr-16px">
+              <el-input v-model="queryFrom.keyword" placeholder="轮播名称" clearable />
+            </el-form-item>
+            <el-form-item class="mb-0 !mr-0">
+              <el-button type="primary">新增轮播</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
+            <template #default="scope">
+              <template v-if="item.render">
+                <component :is="item.render" :row="scope.row"> </component>
+              </template>
+              <template v-else-if="item.formatter">
+                <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
+              </template>
+              <template v-else>
+                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+  </bd-page>
+</template>
+
+<script lang="tsx" name="Banner" setup>
+import { ElButton, ElSpace } from 'element-plus';
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'name',
+    label: '名称'
+  },
+  {
+    prop: 'no',
+    label: '编码'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    formatter(row: any) {
+      return row.status === 1 ? '开启' : '关闭';
+    }
+  },
+  {
+    prop: 'des',
+    label: '描述'
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    align: 'center',
+    render: (_scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="primary">配置</ElButton>
+        </ElSpace>
+      );
+    }
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  page_size: 15,
+  page_index: 1
+});
+
+// 搜索
+const getTableList = () => {};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getTableList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getTableList();
+};
+
+// 新增版本
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>
diff --git a/src/pages/workplace/configuration/components/CustomGroup.vue b/src/pages/workplace/configuration/components/CustomGroup.vue
new file mode 100644
index 0000000..c903d84
--- /dev/null
+++ b/src/pages/workplace/configuration/components/CustomGroup.vue
@@ -0,0 +1,201 @@
+<template>
+  <bd-page class="flex !p-0">
+    <!-- S 左侧分类 -->
+    <div class="bd-sort min-w-200px max-w-200px h-full box-border flex flex-col">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left font-500 text-14px">分组</div>
+        <div class="flex items-center h-50px">
+          <i-bd-add :size="22" class="cursor-pointer" />
+        </div>
+      </div>
+      <div class="m-12px">
+        <el-input v-model="queryFrom.keyword" placeholder="搜索分类/按回车键搜索" clearable />
+      </div>
+      <div class="flex-1 overflow-hidden">
+        <el-scrollbar>
+          <el-tree :data="dataTree">
+            <template #default="{ node }">
+              <div class="bd-tree-node">
+                <div>{{ node.label }}</div>
+                <div class="pr-12px flex items-center bd-opt">
+                  <i-bd-editor :size="16" class="cursor-pointer pr-4px" />
+                  <i-bd-delete :size="16" class="cursor-pointer" />
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </div>
+    <!-- E 左侧分类 -->
+
+    <!-- S 右侧 表格 -->
+    <div class="flex-1 h-full flex flex-col">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left"></div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <el-form-item class="mb-0 !mr-16px">
+              <el-input v-model="queryFrom.keyword" placeholder="名称" clearable />
+            </el-form-item>
+            <el-form-item class="mb-0 !mr-0">
+              <el-button type="primary">新增应用</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
+            <template #default="scope">
+              <template v-if="item.render">
+                <component :is="item.render" :row="scope.row"> </component>
+              </template>
+              <template v-else-if="item.formatter">
+                <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
+              </template>
+              <template v-else>
+                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+    <!-- E 右侧 表格 -->
+  </bd-page>
+</template>
+
+<script lang="tsx" name="CustomGroup" setup>
+import { ElButton, ElSpace } from 'element-plus';
+
+interface Tree {
+  id: number;
+  label: string;
+}
+/**
+ * 左侧分类
+ */
+const dataTree = ref<Tree[]>([
+  {
+    id: 1,
+    label: '项目管理'
+  },
+  {
+    id: 2,
+    label: '开发管理'
+  }
+]);
+
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'name',
+    label: '名称'
+  },
+  {
+    prop: 'no',
+    label: '编码'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    formatter(row: any) {
+      return row.status === 1 ? '开启' : '关闭';
+    }
+  },
+  {
+    prop: 'des',
+    label: '描述'
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    align: 'center',
+    render: (_scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="primary">配置</ElButton>
+        </ElSpace>
+      );
+    }
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  page_size: 15,
+  page_index: 1
+});
+
+// 搜索
+const getTableList = () => {};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getTableList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getTableList();
+};
+</script>
+
+<style lang="scss" scoped>
+// 分类
+.bd-sort {
+  border-right: 1px solid var(--el-card-border-color);
+}
+
+.bd-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  font-size: 14px;
+
+  .bd-opt {
+    display: none;
+  }
+
+  &:hover {
+    .bd-opt {
+      display: block;
+    }
+  }
+}
+
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>
diff --git a/src/pages/workplace/configuration/components/Recommend.vue b/src/pages/workplace/configuration/components/Recommend.vue
new file mode 100644
index 0000000..1d28bd7
--- /dev/null
+++ b/src/pages/workplace/configuration/components/Recommend.vue
@@ -0,0 +1,130 @@
+<template>
+  <bd-page class="flex-col !p-0">
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left"></div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <el-form-item class="mb-0 !mr-16px">
+              <el-input v-model="queryFrom.keyword" placeholder="名称" clearable />
+            </el-form-item>
+            <el-form-item class="mb-0 !mr-0">
+              <el-button type="primary">新增推荐应用</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
+            <template #default="scope">
+              <template v-if="item.render">
+                <component :is="item.render" :row="scope.row"> </component>
+              </template>
+              <template v-else-if="item.formatter">
+                <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
+              </template>
+              <template v-else>
+                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+  </bd-page>
+</template>
+
+<script lang="tsx" name="Recommend" setup>
+import { ElButton, ElSpace } from 'element-plus';
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'name',
+    label: '名称'
+  },
+  {
+    prop: 'no',
+    label: '编码'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    formatter(row: any) {
+      return row.status === 1 ? '开启' : '关闭';
+    }
+  },
+  {
+    prop: 'des',
+    label: '描述'
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    align: 'center',
+    render: (_scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="primary">配置</ElButton>
+        </ElSpace>
+      );
+    }
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  page_size: 15,
+  page_index: 1
+});
+
+// 搜索
+const getTableList = () => {};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getTableList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getTableList();
+};
+
+// 新增版本
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>
diff --git a/src/pages/workplace/configuration/index.vue b/src/pages/workplace/configuration/index.vue
new file mode 100644
index 0000000..4966209
--- /dev/null
+++ b/src/pages/workplace/configuration/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <bd-page class="flex-col">
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <el-tabs v-model="activeName" class="bd-tabs" @tab-change="onTabChange">
+        <el-tab-pane v-for="item in tabsData" :key="item.name" :label="item.label" :name="item.name">
+          <component :is="item.render" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </bd-page>
+</template>
+
+<route lang="yaml">
+meta:
+  title: 工作台设置
+  isAffix: false
+</route>
+
+<script lang="tsx" setup>
+import type { TabPaneName } from 'element-plus';
+import Banner from './components/Banner.vue';
+import Recommend from './components/Recommend.vue';
+import CustomGroup from './components/CustomGroup.vue';
+
+const activeName = ref('banner');
+
+const tabsData = reactive([
+  {
+    name: 'banner',
+    label: '轮播',
+    render: () => {
+      return <Banner />;
+    }
+  },
+  {
+    name: 'recommend',
+    label: '管理员推荐',
+    render: () => {
+      return <Recommend />;
+    }
+  },
+  {
+    name: 'custom-group',
+    label: '自定义分组',
+    render: () => {
+      return <CustomGroup />;
+    }
+  }
+]);
+
+const onTabChange = (tab: TabPaneName) => {
+  console.log(tab);
+};
+</script>
diff --git a/src/styles/element.scss b/src/styles/element.scss
index f9173e0..ced6fdb 100755
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -11,6 +11,7 @@
 
 /* 当前页面最大化 css */
 .main-maximize {
+
   .aside-split,
   .el-aside,
   .el-header,
@@ -40,6 +41,7 @@
     border-radius: 0;
     box-shadow: none;
   }
+
   .table-search {
     padding: 18px 0 0 !important;
     margin-bottom: 0 !important;
@@ -52,18 +54,22 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
+
   .text {
     margin: 20px 0 30px;
     font-size: 23px;
     font-weight: bold;
     color: var(--el-text-color-regular);
   }
+
   .el-descriptions {
     width: 100%;
     padding: 40px 0 0;
+
     .el-descriptions__title {
       font-size: 18px;
     }
+
     .el-descriptions__label {
       width: 200px;
     }
@@ -75,6 +81,7 @@
   display: flex;
   width: 100%;
   height: 100%;
+
   .table-box {
     // 这里减去的是 treeFilter 组件宽度
     width: calc(100% - 230px);
@@ -94,8 +101,9 @@
   .table-search {
     padding: 18px 18px 0;
     margin-bottom: 10px;
+
     .el-form {
-      .el-form-item__content > * {
+      .el-form-item__content>* {
         width: 100%;
       }
 
@@ -104,6 +112,7 @@
         padding: 0 10px;
       }
     }
+
     .operation {
       display: flex;
       align-items: center;
@@ -117,9 +126,11 @@
     .header-button-lf {
       float: left;
     }
+
     .header-button-ri {
       float: right;
     }
+
     .el-button {
       margin-bottom: 15px;
     }
@@ -133,6 +144,7 @@
     table {
       width: 100%;
     }
+
     .el-table__header th {
       height: 45px;
       font-size: 15px;
@@ -140,16 +152,18 @@
       color: var(--el-text-color-primary);
       background: var(--el-fill-color-light);
     }
+
     .el-table__row {
       height: 45px;
       font-size: 14px;
+
       .el-table__placeholder {
         display: inline;
       }
     }
 
     // 设置 el-table 中 header 文字不换行，并省略
-    .el-table__header .el-table__cell > .cell {
+    .el-table__header .el-table__cell>.cell {
       white-space: nowrap;
     }
 
@@ -159,6 +173,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+
       .table-empty {
         line-height: 30px;
       }
@@ -186,16 +201,19 @@
     height: 40px !important;
     font-size: 14px !important;
   }
+
   .el-table__row {
     height: 40px !important;
     font-size: 13px !important;
   }
 }
+
 .el-table--large {
   .el-table__header th {
     height: 50px !important;
     font-size: 16px !important;
   }
+
   .el-table__row {
     height: 50px !important;
     font-size: 15px !important;
@@ -208,12 +226,14 @@
     padding: 16px 20px;
     margin-bottom: 0;
     border-bottom: 1px solid var(--el-border-color-lighter);
+
     span {
       font-size: 17px;
       line-height: 17px;
       color: var(--el-text-color-primary) !important;
     }
   }
+
   .el-drawer__footer {
     border-top: 1px solid var(--el-border-color-lighter);
   }
@@ -227,8 +247,10 @@
   .drawer-multiColumn-form {
     display: flex;
     flex-wrap: wrap;
+
     .el-form-item {
       width: 47%;
+
       &:nth-child(2n-1) {
         margin-right: 5%;
       }
@@ -242,6 +264,7 @@
     padding: 15px 20px;
     margin: 0;
     border-bottom: 1px solid var(--el-border-color-lighter);
+
     .el-dialog__title {
       font-size: 17px;
     }
@@ -258,12 +281,47 @@
     background: var(--el-fill-color-light);
   }
 }
+
 /* el-menu-item */
 .el-menu-item {
   height: 48px !important;
   line-height: 48px !important;
 }
+
 /* bu-button*/
 .bu-button:focus-visible {
   outline: 0;
 }
+
+/* bd-tabs */
+.bd-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .el-tabs__header {
+    margin: 0;
+  }
+
+  .el-tabs__nav-wrap {
+    padding: 0 24px;
+
+    &::after {
+      height: 1px;
+    }
+  }
+
+  .el-tabs__item {
+    padding: 0 12px;
+  }
+
+  .el-tabs__content {
+    flex: 1;
+    height: 100% !important;
+  }
+
+  .el-tab-pane {
+    flex: 1;
+    height: 100% !important;
+  }
+}