功能调整

src/components/AppSelector/index.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup name="AppCatSelector">
+import { getAppCatByList } from '@/api/apps/appCatApi'
+const emit = defineEmits(['update:modelValue'])
+interface AppCat {
+  appCatId: number
+  appCatTitle: number
+}
+const state = reactive({
+  loading: false,
+  appCatId: 0,
+  dataList: [] as AppCat[],
+})
+
+const getData = async () => {
+  state.loading = true
+  const { data } = await getAppCatByList({})
+  state.loading = false
+  state.dataList = data
+}
+const onChange = () => {
+  emit('update:modelValue', state.appCatId)
+}
+onMounted(() => {
+  getData ()
+})
+</script>
+
+<template>
+  <el-select v-model="state.appCatId" v-loading="state.loading" style="width: 100%" filterable placeholder="请选择应用分类" value-key="appCatId" @change="onChange">
+    <el-option
+      v-for="item in state.dataList"
+      :key="item.appCatId"
+      :label="item.appCatTitle"
+      :value="item.appCatId"
+    />
+  </el-select>
+</template>

src/router/modules/app.center.ts

@@ -6,7 +6,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/app-center',
     component: Layout,
-    redirect: '/app-center/index',
+    redirect: '/app-center/store',
     name: 'app_center',
     meta: {
       title: '应用中心',
@@ -14,11 +14,11 @@ const routes: RouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'index',
-        name: 'appCenterAppList',
-        component: () => import('@/views/app_center/apps/index.vue'),
+        path: 'store',
+        name: 'appStore',
+        component: () => import('@/views/app_center/app_store/index.vue'),
         meta: {
-          title: '应用中心',
+          title: '应用商店',
           sidebar: false,
           breadcrumb: false,
           activeMenu: '/app-center',
@@ -31,17 +31,29 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '配置应用权限',
           sidebar: false,
-          activeMenu: '/app-center/index',
+          activeMenu: '/app-center/store',
           cache: true,
           noCache: 'appPermit',
         },
       },
+      {
+        path: 'app/publish/:id',
+        name: 'appPublish',
+        component: () => import('@/views/app_center/publish/index.vue'),
+        meta: {
+          title: '应用发布',
+          sidebar: false,
+          activeMenu: '/app-center/store',
+          cache: true,
+          noCache: 'appPublish',
+        },
+      },
     ],
   },
   {
-    path: '/app-center/release',
+    path: '/app-center/publish',
     component: Layout,
-    redirect: '/app-center/release/index',
+    redirect: '/app-center/publish/index',
     name: 'daas_database',
     meta: {
       title: '应用发布',
@@ -51,12 +63,12 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'index',
         name: 'daas_database_index',
-        component: () => import('@/views/app_center/release/index.vue'),
+        component: () => import('@/views/app_center/publish/index.vue'),
         meta: {
           title: '应用发布',
           sidebar: false,
           breadcrumb: false,
-          activeMenu: '/app-center/release',
+          activeMenu: '/app-center/publish',
         },
       },
     ],

src/views/app_center/apps/components/App.vue → src/views/app_center/app_store/components/App.vue

@@ -28,6 +28,7 @@ const state = reactive({
     appTitle: '',
     appCatTitle: '',
     appCatId: 0,
+    appParam: '',
     appUrl: '',
     appDesc: '',
     appLogo: '',
@@ -77,6 +78,7 @@ function resetFormData() {
     appCatTitle: '',
     appCatId: 0,
     appUrl: '',
+    appParam: '',
     appDesc: '',
     appLogo: '',
   }

src/views/app_center/apps/index.vue → src/views/app_center/app_store/index.vue

@@ -46,10 +46,10 @@ const onAppPermit = (data: any) => {
 
 <template>
   <div>
-    <page-header title="应用中心">
+    <page-header title="应用商店">
       <template #content>
         <div>
-          便捷管理应用软件或应用服务
+          便捷管理发布的应用软件或应用服务
         </div>
       </template>
     </page-header>

src/views/app_center/publish/index.vue

@@ -0,0 +1,125 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { createApp } from '@/api/apps/appApi'
+
+const formRef = ref<FormInstance>()
+const formRules = ref<FormRules>({
+  appTitle: [{ required: true, message: '请输入appTitle', trigger: 'blur' }],
+  appCatTitle: [{ required: true, message: '请输入appCatTitle', trigger: 'blur' }],
+  appUrl: [{ required: true, message: '请输入appUrl', trigger: 'blur' }],
+  appCode: [{ required: true, message: '请输入app编码', trigger: 'blur' }],
+  appDesc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
+})
+
+const state = reactive({
+  title: '',
+  dialogVisible: false,
+  loading: false,
+  formData: {
+    appId: 0,
+    appCode: '',
+    appTitle: '',
+    appCatTitle: '',
+    appCatId: 0,
+    appParam: '',
+    appUrl: '',
+    appDesc: '',
+    appLogo: '',
+  },
+  actionType: 1,
+})
+
+onMounted(() => {})
+
+function onCancel() {
+  resetFormData()
+}
+
+function resetFormData() {
+  state.formData = {
+    appId: 0,
+    appCode: '',
+    appTitle: '',
+    appCatTitle: '',
+    appCatId: 0,
+    appUrl: '',
+    appParam: '',
+    appDesc: '',
+    appLogo: '',
+  }
+}
+
+function onSubmit() {
+  formRef.value && formRef.value.validate(async (valid) => {
+    if (valid) {
+      if (state.actionType === 1) {
+        await createApp(state.formData)
+      }
+
+      ElMessage.success({
+        message: '保存成功',
+        center: true,
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <div>
+    <page-header title="应用发布" content="上线发布应用软件或应用服务" />
+    <page-main>
+      <el-row type="flex" justify="center">
+        <el-col :md="12" :sm="18">
+          <el-form ref="formRef" :model="state.formData" :rules="formRules" label-width="120px" label-suffix="：">
+            <el-form-item label="标题" prop="appTitle">
+              <el-input v-model="state.formData.appTitle" />
+            </el-form-item>
+
+            <el-form-item label="分类" prop="appCatTitle">
+              <app-cat-selector v-model="state.formData.appCatId" />
+            </el-form-item>
+
+            <el-form-item label="编码" prop="appCode">
+              <el-input v-model="state.formData.appCode" />
+            </el-form-item>
+
+            <el-form-item label="地址" prop="appUrl">
+              <el-input v-model="state.formData.appUrl" />
+            </el-form-item>
+
+            <el-form-item label="LOGO">
+              <el-image
+                style="width: 50px; height: 50px;border-radius:50%;"
+                :src="state.formData.appLogo"
+                :preview-src-list="[state.formData.appLogo]"
+              />
+            </el-form-item>
+            <el-form-item label="参数" prop="appParam">
+              <el-input v-model="state.formData.appParam" />
+            </el-form-item>
+
+            <el-form-item label="描述">
+              <el-input v-model="state.formData.appDesc" type="textarea" />
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">
+                立即发布
+              </el-button>
+              <el-button size="large" @click="onCancel">
+                重新填写
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </page-main>
+  </div>
+</template>

src/views/app_center/release/index.vue

@@ -1,77 +0,0 @@
-<route lang="yaml">
-meta:
-  enabled: false
-</route>
-
-<script lang="ts" setup>
-const form = ref({
-  name: '',
-  region: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  desc: '',
-})
-</script>
-
-<template>
-  <div>
-    <page-header title="应用发布" content="上线发布应用软件或应用服务" />
-    <page-main>
-      <el-row type="flex" justify="center">
-        <el-col :md="12" :sm="18">
-          <el-form :model="form" label-width="80px">
-            <el-form-item label="活动名称">
-              <el-input v-model="form.name" />
-            </el-form-item>
-            <el-form-item label="活动区域">
-              <el-select v-model="form.region" placeholder="请选择活动区域">
-                <el-option label="区域一" value="shanghai" />
-                <el-option label="区域二" value="beijing" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="活动时间">
-              <el-col :span="11">
-                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
-              </el-col>
-              <el-col class="line" :span="2">
-                -
-              </el-col>
-              <el-col :span="11">
-                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
-              </el-col>
-            </el-form-item>
-            <el-form-item label="即时配送">
-              <el-switch v-model="form.delivery" />
-            </el-form-item>
-            <el-form-item label="活动性质">
-              <el-checkbox-group v-model="form.type">
-                <el-checkbox label="美食/餐厅线上活动" name="type" />
-                <el-checkbox label="地推活动" name="type" />
-                <el-checkbox label="线下主题活动" name="type" />
-                <el-checkbox label="单纯品牌曝光" name="type" />
-              </el-checkbox-group>
-            </el-form-item>
-            <el-form-item label="特殊资源">
-              <el-radio-group v-model="form.resource">
-                <el-radio label="线上品牌商赞助" />
-                <el-radio label="线下场地免费" />
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="活动形式">
-              <el-input v-model="form.desc" type="textarea" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary">
-                立即创建
-              </el-button>
-              <el-button>取消</el-button>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
-    </page-main>
-  </div>
-</template>