feat: ✨新增应用管理

src/menu/modules/setting.ts

@@ -9,7 +9,7 @@ const home: Menu.MenuOptions = {
     isHide: false,
     isKeepAlive: true,
     isLink: '',
-    index: 8,
+    index: 9,
     title: '设置'
   },
   children: [

src/menu/modules/tool.ts

@@ -9,7 +9,7 @@ const home: Menu.MenuOptions = {
     isHide: false,
     isKeepAlive: true,
     isLink: '',
-    index: 7,
+    index: 8,
     title: '工具'
   },
   children: [

src/menu/modules/workplace.ts

@@ -0,0 +1,43 @@
+const home: Menu.MenuOptions = {
+  name: 'tool',
+  path: '/workplace',
+  meta: {
+    icon: 'i-bd-all-application',
+    isAffix: false,
+    isFull: false,
+    isHide: false,
+    isKeepAlive: true,
+    isLink: '',
+    index: 7,
+    title: '工作台'
+  },
+  children: [
+    {
+      name: 'workplaceManage',
+      path: '/workplace/manage',
+      meta: {
+        icon: 'i-bd-application',
+        isAffix: false,
+        isFull: false,
+        isHide: false,
+        isKeepAlive: true,
+        isLink: '',
+        title: '应用管理'
+      }
+    },
+    {
+      name: 'workplaceConfiguration',
+      path: '/workplace/configuration',
+      meta: {
+        icon: 'i-bd-setting-config',
+        isAffix: false,
+        isFull: false,
+        isHide: false,
+        isKeepAlive: true,
+        isLink: '',
+        title: '工作台设置'
+      }
+    }
+  ]
+};
+export default home;

src/pages/workplace/configuration.vue

@@ -0,0 +1,17 @@
+<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>

src/pages/workplace/manage/components/Apply.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-dialog
+    :model-value="value"
+    :width="600"
+    :align-center="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :draggable="true"
+    :z-index="99"
+    title="新增应用"
+    @close="onClose"
+  >
+    <el-form :model="formData" label-width="96px">
+      <el-form-item label="应用名称">
+        <el-input v-model="formData.app_version" placeholder="请输入应用名称" />
+      </el-form-item>
+      <el-form-item label="应用APP ID">
+        <el-input v-model="formData.app_version" placeholder="请输入应用APP ID" />
+      </el-form-item>
+      <el-form-item label="应用图标">
+        <el-upload
+          ref="upload"
+          class="bd-uplod"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          list-type="picture-card"
+          :limit="1"
+          :auto-upload="false"
+        >
+          <el-icon><Plus /></el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="PC端地址">
+        <el-input v-model="formData.app_version" placeholder="请输入PC端地址" />
+      </el-form-item>
+      <el-form-item label="移动端地址">
+        <el-input v-model="formData.app_version" placeholder="请输入移动端地址" />
+      </el-form-item>
+      <el-form-item label="应用状态">
+        <el-checkbox-group v-model="formData.type">
+          <el-checkbox label="pc">PC</el-checkbox>
+          <el-checkbox label="app">移动端</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="应用描述">
+        <el-input
+          v-model="formData.update_desc"
+          type="textarea"
+          :autosize="{ minRows: 6, maxRows: 8 }"
+          placeholder="请输入应用描述"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-space>
+        <el-button @click="onClose">取消</el-button>
+        <el-button type="primary" :loading="loaging" @click="onSend">发送</el-button>
+      </el-space>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" name="Apply" setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Plus } from '@element-plus/icons-vue';
+// API 接口
+import { commonAppversionPost } from '@/api/tool';
+interface IProps {
+  value: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  value: false
+});
+
+const content = ref('');
+const loaging = ref<boolean>(false);
+const formData = reactive({
+  app_version: '',
+  os: 'android',
+  is_force: 0,
+  update_desc: '',
+  download_url: '',
+  type: []
+});
+
+const emits = defineEmits<{
+  (e: 'update:value', item: boolean): void;
+  (e: 'ok', item: any): void;
+}>();
+
+watch(
+  () => props.value,
+  (n, _o) => {
+    props.value = n;
+  }
+);
+// 取消
+const onClose = () => {
+  emits('update:value', false);
+};
+// 发送
+const onSend = () => {
+  loaging.value = true;
+  commonAppversionPost(formData)
+    .then((res: any) => {
+      loaging.value = false;
+      if (res.status == 200) {
+        ElMessage.success('新增成功！');
+        content.value = '';
+        onClose();
+        emits('ok', true);
+      }
+    })
+    .catch(err => {
+      loaging.value = false;
+      if (err.status == 400) {
+        ElMessage.error(err.msg);
+      }
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.bd-uplod {
+  ::v-deep(.el-upload--picture-card) {
+    height: 78px;
+    width: 78px;
+  }
+}
+</style>

src/pages/workplace/manage/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <bd-page class="flex-col">
+    <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">
+          <p class="m-0 font-600">应用管理</p>
+        </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="应用名称/APP ID" clearable />
+            </el-form-item>
+            <el-form-item class="mb-0 !mr-0">
+              <el-button type="primary" @click="onAppVersionAdd">新增应用</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>
+  <!-- 应用 -->
+  <Apply v-model:value="applyAddValue" />
+</template>
+
+<route lang="yaml">
+meta:
+  title: 应用管理
+  isAffix: false
+</route>
+
+<script lang="tsx" setup>
+import { ElButton, ElSpace } from 'element-plus';
+import Apply from './components/Apply.vue';
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'icon',
+    label: '应用LOGO'
+  },
+  {
+    prop: 'name',
+    label: '应用名称'
+  },
+  {
+    prop: 'no',
+    label: '应用APP ID'
+  },
+  {
+    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();
+};
+
+// 新增版本
+const applyAddValue = ref<boolean>(false);
+const onAppVersionAdd = () => {
+  applyAddValue.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>