feat: ✨新增APP

src/api/workplace/app.ts

@@ -0,0 +1,19 @@
+import request from '@/utils/axios';
+
+// 获取应用
+export function appGet(params?: any) {
+  return request({
+    url: '/manager/workplace/app',
+    method: 'get',
+    params
+  });
+}
+
+// 新增应用
+export function appPost(data: any) {
+  return request({
+    url: '/manager/workplace/app',
+    method: 'post',
+    data
+  });
+}

src/api/workplace/banner.ts

@@ -3,7 +3,7 @@ import request from '@/utils/axios';
 // 获取轮播
 export function bannerGet(params?: any) {
   return request({
-    url: '/workplace/banner',
+    url: '/manager/workplace/banner',
     method: 'get',
     params
   });
@@ -17,3 +17,21 @@ export function bannerPost(data: any) {
     data
   });
 }
+
+// 编辑轮播
+export function bannerPut(data: any) {
+  return request({
+    url: '/manager/workplace/banner',
+    method: 'post',
+    data
+  });
+}
+
+// 删除轮播
+export function bannerDelete(params: any) {
+  return request({
+    url: '/manager/workplace/banner',
+    method: 'delete',
+    params
+  });
+}

src/pages/workplace/configuration/components/Banner.vue

@@ -57,11 +57,12 @@
 </template>
 
 <script lang="tsx" name="Banner" setup>
-import { ElButton, ElSpace } from 'element-plus';
+import { ElButton, ElSpace, ElImage, ElMessageBox, ElMessage } from 'element-plus';
 import BannerDialog from './BannerDialog.vue';
+import { BU_DOU_CONFIG } from '@/config';
 
 // API接口
-import { bannerGet } from '@/api/workplace/banner';
+import { bannerGet, bannerDelete } from '@/api/workplace/banner';
 /**
  * 表格
  */
@@ -70,6 +71,17 @@ const column = reactive<Column.ColumnOptions[]>([
     prop: 'title',
     label: '名称'
   },
+  {
+    prop: 'cover',
+    label: '图片',
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['cover']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}${scope.row.cover}`;
+      }
+      return <ElImage src={img_url} fit={'scale-down'} class={'w-120px h-60px'} />;
+    }
+  },
   {
     prop: 'route',
     label: '地址'
@@ -85,15 +97,20 @@ const column = reactive<Column.ColumnOptions[]>([
     prop: 'description',
     label: '描述'
   },
+  {
+    prop: 'created_at',
+    label: '创建时间',
+    width: 180
+  },
   {
     prop: 'operation',
     label: '操作',
     align: 'center',
-    render: (_scope: any) => {
+    render: (scope: any) => {
       return (
         <ElSpace>
           <ElButton type="primary">编辑</ElButton>
-          <ElButton>删除</ElButton>
+          <ElButton onClick={() => onDelBanner(scope.row)}>删除</ElButton>
         </ElSpace>
       );
     }
@@ -136,6 +153,40 @@ const onBannerDialogValue = () => {
   bannerDialogValue.value = true;
 };
 
+// 删除轮播
+const onDelBanner = (item: any) => {
+  ElMessageBox.confirm(`确定要对该轮播吗?`, `操作提示`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      const fromLiftban = {
+        banner_no: item.banner_no
+      };
+      bannerDelete(fromLiftban)
+        .then((_res: any) => {
+          getTableList();
+          ElMessage({
+            type: 'success',
+            message: `轮播群组成功！`
+          });
+        })
+        .catch(err => {
+          if (err.status == 400) {
+            ElMessage.error(err.msg);
+          }
+        });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消成功！'
+      });
+    });
+};
+
 onMounted(() => {
   getTableList();
 });

src/pages/workplace/configuration/components/BannerDialog.vue

@@ -97,7 +97,7 @@ watch(
     props.value = n;
   }
 );
-
+// 上传图片
 const headers = {
   token: userStore.token
 };

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

@@ -12,48 +12,60 @@
   >
     <el-form :model="formData" label-width="96px">
       <el-form-item label="应用名称">
-        <el-input v-model="formData.app_version" placeholder="请输入应用名称" />
+        <el-input v-model="formData.name" placeholder="请输入应用名称" maxlength="10" show-word-limit />
-      </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"
+          :action="actionURL"
           list-type="picture-card"
-          :limit="1"
+          :show-file-list="false"
-          :auto-upload="false"
+          :headers="headers"
+          :before-upload="beforeAvatarUpload"
+          :on-success="handleAvatarSuccess"
         >
-          <el-icon><Plus /></el-icon>
+          <img v-if="formData.icon" :src="`${BU_DOU_CONFIG.APP_URL}${formData.icon}`" class="avatar" />
+          <el-icon v-else><Plus /></el-icon>
         </el-upload>
       </el-form-item>
-      <el-form-item label="PC端地址">
+      <el-form-item label="打开方式">
-        <el-input v-model="formData.app_version" placeholder="请输入PC端地址" />
+        <el-radio-group v-model="formData.jump_type">
+          <el-radio :label="0">网页</el-radio>
+          <el-radio :label="1">APP</el-radio>
+        </el-radio-group>
       </el-form-item>
-      <el-form-item label="移动端地址">
+      <template v-if="formData.jump_type === 0">
-        <el-input v-model="formData.app_version" placeholder="请输入移动端地址" />
+        <el-form-item label="网页地址">
-      </el-form-item>
+          <el-input v-model="formData.web_route" placeholder="请输入网页地址" />
-      <el-form-item label="应用状态">
+        </el-form-item>
-        <el-checkbox-group v-model="formData.type">
+      </template>
-          <el-checkbox label="pc">PC</el-checkbox>
+      <template v-if="formData.jump_type === 1">
-          <el-checkbox label="app">移动端</el-checkbox>
+        <el-form-item label="APP地址">
-        </el-checkbox-group>
+          <el-input v-model="formData.app_route" placeholder="请输入APP地址" />
+        </el-form-item>
+      </template>
+      <el-form-item label="付款">
+        <el-radio-group v-model="formData.is_paid_app">
+          <el-radio :label="0">免费</el-radio>
+          <el-radio :label="1">付费</el-radio>
+        </el-radio-group>
       </el-form-item>
       <el-form-item label="应用描述">
         <el-input
-          v-model="formData.update_desc"
+          v-model="formData.description"
           type="textarea"
           :autosize="{ minRows: 6, maxRows: 8 }"
           placeholder="请输入应用描述"
+          show-word-limit
+          maxlength="500"
         />
       </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-button type="primary" :loading="loaging" @click="onSend">保存</el-button>
       </el-space>
     </template>
   </el-dialog>
@@ -63,24 +75,31 @@
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
+import { useUserStore } from '@/stores/modules/user';
 // API 接口
-import { commonAppversionPost } from '@/api/tool';
+import { appPost } from '@/api/workplace/app';
+import { feileGet } from '@/api/file';
+
+import { BU_DOU_CONFIG } from '@/config';
+
 interface IProps {
   value: boolean;
 }
 const props = withDefaults(defineProps<IProps>(), {
   value: false
 });
+const userStore = useUserStore();
 
 const content = ref('');
 const loaging = ref<boolean>(false);
 const formData = reactive({
-  app_version: '',
+  icon: '',
-  os: 'android',
+  name: '',
-  is_force: 0,
+  jump_type: 0,
-  update_desc: '',
+  description: '',
-  download_url: '',
+  app_route: '',
-  type: []
+  web_route: '',
+  is_paid_app: 0
 });
 
 const emits = defineEmits<{
@@ -94,6 +113,28 @@ watch(
     props.value = n;
   }
 );
+
+const headers = {
+  token: userStore.token
+};
+const actionURL = ref('');
+const beforeAvatarUpload = async (rawFile: any) => {
+  const fileData = {
+    path: `/${rawFile.uid}/${rawFile.name}`,
+    type: 'report'
+  };
+  const res = (await feileGet(fileData)) as any;
+  if (res.url) {
+    actionURL.value = res.url;
+    return true;
+  } else {
+    return false;
+  }
+};
+const handleAvatarSuccess = (response: any, _uploadFile: any) => {
+  formData.icon = response.path;
+};
+
 // 取消
 const onClose = () => {
   emits('update:value', false);
@@ -101,7 +142,7 @@ const onClose = () => {
 // 发送
 const onSend = () => {
   loaging.value = true;
-  commonAppversionPost(formData)
+  appPost(formData)
     .then((res: any) => {
       loaging.value = false;
       if (res.status == 200) {
@@ -126,5 +167,10 @@ const onSend = () => {
     height: 78px;
     width: 78px;
   }
+
+  .avatar {
+    height: 78px;
+    width: 78px;
+  }
 }
 </style>

src/pages/workplace/manage/index.vue

@@ -65,43 +65,61 @@ meta:
 </route>
 
 <script lang="tsx" setup>
-import { ElButton, ElSpace } from 'element-plus';
+import { ElButton, ElSpace, ElImage } from 'element-plus';
 import Apply from './components/Apply.vue';
+import { BU_DOU_CONFIG } from '@/config';
+
+// API接口
+import { appGet } from '@/api/workplace/app';
 /**
  * 表格
  */
 const column = reactive<Column.ColumnOptions[]>([
   {
     prop: 'icon',
-    label: '应用LOGO'
+    label: '应用LOGO',
+    align: 'center',
+    width: 100,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['icon']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}${scope.row.icon}`;
+      }
+      return <ElImage src={img_url} fit={'scale-down'} class={'w-60px h-60px'} />;
+    }
   },
   {
     prop: 'name',
-    label: '应用名称'
+    label: '应用名称',
+    width: 160
   },
   {
-    prop: 'no',
+    prop: 'app_id',
-    label: '应用APP ID'
+    label: '应用APP ID',
+    width: 290
   },
   {
     prop: 'status',
     label: '应用状态',
+    width: 100,
     formatter(row: any) {
       return row.status === 1 ? '开启' : '关闭';
     }
   },
   {
-    prop: 'des',
+    prop: 'description',
     label: '应用描述'
   },
   {
     prop: 'operation',
     label: '操作',
+    width: 150,
     align: 'center',
     render: (_scope: any) => {
       return (
         <ElSpace>
-          <ElButton type="primary">配置</ElButton>
+          <ElButton type="primary">编辑</ElButton>
+          <ElButton>删除</ElButton>
         </ElSpace>
       );
     }
@@ -120,7 +138,11 @@ const queryFrom = reactive({
 });
 
 // 搜索
-const getTableList = () => {};
+const getTableList = () => {
+  appGet(queryFrom).then((res: any) => {
+    tableData.value = res;
+  });
+};
 
 // 分页page-size
 const onSizeChange = (size: number) => {
@@ -139,6 +161,10 @@ const applyAddValue = ref<boolean>(false);
 const onAppVersionAdd = () => {
   applyAddValue.value = true;
 };
+
+onMounted(() => {
+  getTableList();
+});
 </script>
 
 <style lang="scss" scoped>