app版本管理联调

src/api/index.ts

@@ -15,6 +15,7 @@ import company from './modules/insuranceCompany'
 import product from "./modules/product"
 import configurate from './modules/configurate.ts'
 import urlApi from './modules/url.ts'
+import appConfigApi from './modules/appConfig.ts'//app应用配置
 const axiosInstance:ApiInstance = axios.create({
   baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
   timeout: 1000 * 60,
@@ -104,6 +105,7 @@ const api = {
   company:company(axiosInstance),
   product:product(axiosInstance),
   configurate: configurate(axiosInstance),
-  urlApi: urlApi(axiosInstance)
+  urlApi: urlApi(axiosInstance),
+  appConfigApi: appConfigApi(axiosInstance)
 }
 export default api

src/api/modules/app.ts

@@ -6,7 +6,6 @@ const toolApi = (axiosInstance: ApiInstance) => ({
   fileupload: (data: any) => axiosInstance.post('file/upload', data, {}),
   //字典接口
   dictType: (params: any) => axiosInstance.get('dict/get', {params}),
-
 })
 
 export default toolApi

src/api/modules/appConfig.ts

@@ -0,0 +1,23 @@
+import { ApiInstance } from '../type'
+
+const toolApi = (axiosInstance: ApiInstance) => ({
+
+  //应用列表
+  queryAppList: (data: any) => axiosInstance.post('appManage/queryAppList ', data),
+  //添加应用
+  appSave: (data: any) => axiosInstance.post('appManage/save ', data),
+  //应用编辑
+  appManageUpdate: (data: any) => axiosInstance.post('appManage/update', data),
+  //应用删除
+  appManageDel: (data: any) => axiosInstance.get('appManage/deleteById?id=' + data),
+  //添加版本
+  versionSave: (data: any) => axiosInstance.post('version/save', data),
+  //应用版本列表
+  versionList: (data: any) => axiosInstance.post('version/pageList', data),
+  //版本编辑
+  versionUpdate: (data: any) => axiosInstance.post('version/update', data),
+  //获取指定类型的最新版本
+  getMaxVersion: (appid: string,packageType:string) => axiosInstance.get(`version/getMaxVersion?appid=${appid}&packageType=${packageType}`),
+})
+
+export default toolApi

src/router/modules/appConfig.ts

@@ -8,70 +8,28 @@ const routes: RouteRecordRaw = {
   name: 'ProductConfigurationAppconfig',
   meta: {
     title: '应用配置',
-    icon:'zh',
+    icon: 'zh',
   },
   children: [
     {
       path: 'appManagement',
       name: 'appManagementIndex',
-      redirect: '/productConfiguration/appConfig/appManagement',
+      component: () => import('@/views/productConfiguration/appConfig/appManagement.vue'),
       meta: {
         title: '应用管理',
-        auth: []
+        auth: ['paymentCodeConfig.view','paymentCodeConfig.add','paymentCodeConfig.edit','paymentCodeConfig.delete']
       },
-      children: [
-        {
-          path: '',
-          component: () => import('@/views/productConfiguration/appConfig/appManagement.vue'),
-          meta: {
-            title: '应用管理',
-            menu: false,
-            breadcrumb: false,
-          },
-        },
-        {
-          path: 'appAdd',
-          name: 'appManagementAdd',
-          component: () => import('@/views/productConfiguration/appConfig/appAdd.vue'),
-          meta: {
-            title: '添加应用',
-            menu: false,
-            activeMenu: '/productConfiguration/appConfig/appManagement',
-          },
-        },
-      ],
     },
-
-
     {
       path: 'versionManagement',
       name: 'versionManagementIndex',
-      redirect: '/productConfiguration/appConfig/versionManagement',
+      component: () => import('@/views/productConfiguration/appConfig/versionManagement.vue'),
       meta: {
         title: '版本管理',
-        auth: []
+        auth: ['paymentCodeConfig.view','paymentCodeConfig.add','paymentCodeConfig.edit','paymentCodeConfig.delete'],
+        menu: false,
+        activeMenu: '/productConfiguration/appConfig/appManagement',
       },
-      children: [
-        {
-          path: '',
-          component: () => import('@/views/productConfiguration/appConfig/versionManagement.vue'),
-          meta: {
-            title: '版本管理',
-            menu: false,
-            breadcrumb: false,
-          },
-        },
-        {
-          path: 'versionAdd',
-          name: 'versionManagementAdd',
-          component: () => import('@/views/productConfiguration/appConfig/versionAdd.vue'),
-          meta: {
-            title: '添加版本',
-            menu: false,
-            activeMenu: '/productConfiguration/appConfig/versionManagement',
-          },
-        },
-      ]
     },
   ],
 }

src/views/productConfiguration/appConfig/appAdd.vue

@@ -1,214 +0,0 @@
-<template>
-  <div>
-    <PageMain style="padding: 20px;margin-bottom: 100px;">
-      <ElRow :gutter="60">
-        <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
-          <span class="strong">基本信息</span>
-        </ElCol>
-        <el-form :model="specialform" label-width="120px" :rules="specialformRules" label-position="top"
-          ref="specialformRef" style="max-width: 1000px;" class="flex a-c f-wrap" :size="fromSize">
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="保险公司" prop="companyId">
-              <el-select v-model="specialform.companyId" placeholder="请选择" clearable filterable>
-                <el-option v-for="(item, index) in companyList" :key="index" :label="item.name" :value="item.id" />
-              </el-select>
-            </el-form-item>
-          </ElCol>
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="特约类型" prop="riskCode">
-              <el-select v-model="specialform.riskCode" placeholder="请选择" clearable>
-                <el-option :label="item.label" v-for="(item, index) in getDict('risk_code')" :key="index"
-                  :value="item.value" />
-              </el-select>
-            </el-form-item>
-          </ElCol>
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="特约名称" prop="clauseName">
-              <el-input v-model="specialform.clauseName" placeholder="请输入特约名称" maxlength="50" show-word-limit />
-            </el-form-item>
-          </ElCol>
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="特约编码" prop="clauseCode">
-              <el-input v-model="specialform.clauseCode" placeholder="请输入特约编码" maxlength="50" show-word-limit />
-            </el-form-item>
-          </ElCol>
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="是否可编辑" prop="isEdit">
-              <el-radio-group v-model="specialform.isEdit">
-                <el-radio :value="item.value" size="large" v-for="(item, index) in getDict('is_edit')" :key="index">{{
-                  item.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </ElCol>
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="客户端状态" prop="clientStatus">
-              <el-select v-model="specialform.clientStatus" placeholder="请选择" clearable>
-                <el-option :label="item.label" v-for="(item, index) in getDict('special_client_type')" :key="index"
-                  :value="item.value" />
-              </el-select>
-            </el-form-item>
-          </ElCol>
-          <ElCol :md="24" :lg="12">
-            <el-form-item label="特约内容" prop="clauseContent">
-              <el-input v-model="specialform.clauseContent" :disabled="clauseContentShow" placeholder="请输入机构地址"
-                :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" maxlength="500" show-word-limit />
-            </el-form-item>
-          </ElCol>
-        </el-form>
-      </ElRow>
-    </PageMain>
-    <FixedActionBar>
-      <ElButton @click='router.back()'>
-        取消
-      </ElButton>
-      <ElButton type="primary" @click="submitForm(specialformRef)">
-        保存
-      </ElButton>
-      <ElButton type="primary" v-if="!id" @click='submitForm1(specialformRef)'>
-        保存并继续添加
-      </ElButton>
-    </FixedActionBar>
-  </div>
-
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { FormRules, FormInstance, ComponentSize, ElMessage } from 'element-plus';
-import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
-import { useRoute, useRouter } from 'vue-router';
-import api from '@/api';
-const route = useRoute();
-const router = useRouter();
-const id = ref(route.query.id);//id参数
-const specialformRef = ref<FormInstance>()
-const fromSize = ref<ComponentSize>('large')
-const companyList = ref()
-const specialform = reactive({
-  id: "",
-  companyId: "",//应用名称
-  clauseName: "",//应用图标
-  riskCode: "",//应用ID
-  clauseContent: "",//应用描述
-})
-
-const specialformRules = ref<FormRules>({
-  companyId: [
-    { required: true, trigger: 'change', message: '请选择保险公司' },
-  ],
-  riskCode: [
-    { required: true, trigger: 'change', message: '请选择特约类型' },
-  ],
-  clauseName: [
-    { required: true, trigger: 'blur', message: '请输入特约名称' },
-  ],
-  clauseCode: [
-    { required: true, trigger: 'blur', message: '请输入特约编码' },
-  ],
-  isEdit: [
-    { required: true, trigger: 'change', message: '请选择是否可编辑' },
-  ],
-  clientStatus: [
-    { required: true, trigger: 'change', message: '请选择客户端状态' },
-  ],
-  clauseContent: [
-    { required: true, trigger: 'blur', message: '请输入特约内容' },
-  ],
-
-});
-const clauseContentShow = ref(false);
-onBeforeMount(() => {
-  companyQuery();
-  loadDicts(['special_client_type', 'risk_code', 'is_edit']);//获取多个字典
-  if (id.value) {
-    details();
-
-  }
-});
-
-const details = () => {
-  api.product.getClause({ id: id.value }).then((res: any) => {
-    if (res.code == '200') {
-      Object.keys(specialform).forEach((key) => {
-        if (res.data.hasOwnProperty(key)) {
-          specialform[key as keyof typeof specialform] = res.data[key as keyof typeof specialform];
-        }
-      });
-      if (specialform.isEdit == '0') {
-        clauseContentShow.value = true;
-      }
-    } else {
-    }
-  });
-}
-//获取保险公司列表
-const companyQuery = () => {
-  api.company.selectLevelList({ name: "" }).then((res: any) => {
-    if (res.code == '200') {
-      companyList.value = res.data;
-    }
-  });
-}
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      if (id.value) {
-        api.product.updateClause({ ...specialform }).then((res: any) => {
-          if (res.code == '200') {
-            ElMessage({
-              type: 'success',
-              message: res.msg,
-              plain: true,
-            })
-            router.back()
-          }
-        });
-      } else {
-        api.product.addClause({ ...specialform }).then((res: any) => {
-          if (res.code == '200') {
-            ElMessage({
-              type: 'success',
-              message: res.msg,
-              plain: true,
-            })
-            router.back()
-          }
-        });
-      }
-    } else {
-      ElMessage({
-        type: 'error',
-        message: '信息不完整',
-        plain: true,
-      })
-    }
-  })
-}
-const submitForm1 = async (formEl: FormInstance | undefined) => {
-
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      api.product.addClause({ ...specialform }).then((res: any) => {
-        if (res.code == '200') {
-          ElMessage({
-            type: 'success',
-            message: res.msg,
-            plain: true,
-          })
-          router.push({
-            name: 'reload',
-          })
-        }
-      });
-    } else {
-      ElMessage({
-        type: 'error',
-        message: '信息不完整',
-        plain: true,
-      })
-    }
-  })
-}
-</script>

src/views/productConfiguration/appConfig/appManagement.vue

@@ -5,7 +5,7 @@
         <ElRow :gutter="20">
           <ElCol :md="6">
             <ElFormItem label="应用名称">
-              <el-input v-model="formInline.companyName" placeholder="输入应用名称查找" clearable class="el-inputs" />
+              <el-input v-model="formInline.appName" placeholder="输入应用名称查找" clearable class="el-inputs" />
             </ElFormItem>
           </ElCol>
           <ElCol :md="4">
@@ -32,14 +32,14 @@
         </template>
         <template v-slot:operation="scope">
           <Auth :value="'paymentCodeConfig.edit'">
-            <el-button type="primary" link @click="paymentEdit(scope.operationData.id)"> 编辑
+            <el-button type="primary" link @click="paymentEdit(scope.operationData)"> 编辑
             </el-button>
           </Auth>
           <Auth :value="'paymentCodeConfig.delete'">
             <el-button type="primary" link @click="paymentDel(scope.operationData.id)"> 删除
             </el-button>
           </Auth>
-          <el-button type="primary" link @click="paymentDel(scope.operationData.id)"> 发布新版本
+          <el-button type="primary" link @click="versionControl(scope.operationData)"> 版本管理
           </el-button>
         </template>
         <template v-slot:search="scope">
@@ -52,16 +52,16 @@
         <el-form :model="paymentform" :inline="true" label-width="120px" :rules="memberformRules" label-position="top"
           ref="paymentFormRef" style="width: 100%;" :size="fromSize">
           <ElCol :md="24" :lg="24">
-            <el-form-item label="应用名称" prop="companyName">
-              <el-input v-model="paymentform.companyName" placeholder="请输入应用名称" />
+            <el-form-item label="应用名称" prop="appName">
+              <el-input v-model="paymentform.appName" placeholder="请输入应用名称" />
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="24" style="margin-bottom: 10px;">
-            <el-form-item label="应用图标" prop="companyName" >
+            <el-form-item label="应用图标">
               <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change.top="sysIconupload"
                 ref="upload1" :limit="1" :class="{ disabled: uploadDisabled }" :on-preview="handlePictureCardPreview"
                 :on-remove="handleRemove">
-                <img v-if="appIconUrl"  :src="appIconUrl" class="avatar" style="width: 100%;height: 100%;" />
+                <img v-if="appIconUrl" :src="appIconUrl" class="avatar" style="width: 100%;height: 100%;" />
                 <el-icon v-else class="avatar-uploader-icon">
                   <Plus />
                 </el-icon>
@@ -70,13 +70,13 @@
             <span style="font-size: 0.7rem;color: #999;">建议上传 120*120的照片，大小不超过5MB</span>
           </ElCol>
           <ElCol :md="24" :lg="24">
-            <el-form-item label="应用ID" prop="type">
-              <el-input v-model="paymentform.companyName" placeholder="请输入应用ID" />
+            <el-form-item label="应用ID" prop="appId">
+              <el-input v-model="paymentform.appId" placeholder="请输入应用ID" />
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="24">
-            <el-form-item label="应用描述" prop="apiType">
-              <el-input v-model="paymentform.apiType" type="textarea" style="width: 100%;" />
+            <el-form-item label="应用描述">
+              <el-input v-model="paymentform.description" type="textarea" style="width: 100%;" />
             </el-form-item>
           </ElCol>
         </el-form>
@@ -101,7 +101,9 @@
 import { ref, reactive } from 'vue'
 import api from '@/api';
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { FormRules, FormInstance, ComponentSize,UploadFile } from 'element-plus';
+import { FormRules, FormInstance, ComponentSize, UploadFile } from 'element-plus';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 interface PageInfo {
   pageNum: number;
   pageSize: number;
@@ -110,15 +112,15 @@ interface PageInfo {
 }
 interface paymentform {
   id?: string,
-  companyId: string,
-  companyName: string,
-  type: string,
-  apiType: string,
+  appName: string,
+  appIcon: string,
+  appId: string,
+  description: string,
 }
-const appIconUrl=ref()//icon图片
+const appIconUrl = ref()//icon图片
 const tableData = ref([]);//列表数据
 const uploadDisabled = ref(false)//上传组件
-const dialogVisible=ref(false)//图片预览窗口
+const dialogVisible = ref(false)//图片预览窗口
 const paymentFormRef = ref<FormInstance>()
 const fromSize = ref<ComponentSize>('large')//表单大小
 const paynemtAdddialogVisible = ref(false)//弹窗
@@ -129,16 +131,16 @@ const companyList = ref();
 
 const paymentform = reactive<paymentform>({
   id: "",
-  companyId: "",
-  companyName: "",
-  type: "",
-  apiType: "",
+  appName: "",//应用名称
+  appIcon: "",//图标
+  appId: "",//appid
+  description: "",//应用描述
 })
 const memberformRules = ref<FormRules>({
-  companyId: [
+  appName: [
     { required: true, trigger: 'blur', message: '请输入应用名称' },
   ],
-  type: [
+  appId: [
     { required: true, trigger: 'blur', message: '请输入应用ID' },
   ],
 
@@ -152,17 +154,14 @@ const pageInfo = ref({
 });
 //检索条件
 const formInline = reactive({
-  companyName: '',//保险公司name
+  appName: '',//保险公司name
 })
 onMounted(() => {
   findpage();
-  companyQuery();//获取保险公司
-  dictType('api_type');//qpi类型
-  dictType('qr_barcode');//请求类型
 
 });
 function findpage() {
-  api.company.QRcodePage({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
+  api.appConfigApi.queryAppList({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
     if (res.code == 200) {
       tableData.value = res.data.records;
       pageInfo.value.pageNum = res.data.current;
@@ -178,18 +177,18 @@ const columns = [
 
       return {
         html: ` <div style="display: flex;align-items: center;">
-      <img src="/src/assets/images/logo.png" alt="" style="width: 50px;height: 50px;margin-right: 20px;">
+      <img src="${row.downloadUrl}" alt="" style="width: 50px;height: 50px;margin-right: 20px;">
       <div style="display: flex;flex-direction: column;">
-        <span style="margin-bottom: 5px;font-weight: bold;">应用名称</span>
-        <span style="font-size: 14px;color: #999;">这是一段应用描述，限制一行高度与宽度，超出使用省略号代替321321321</span>
+        <span style="margin-bottom: 5px;font-weight: bold;">${row.appName}</span>
+        <span style="font-size: 14px;color: #999;">${row.description}</span>
       </div>
     </div>`,
       };
     }
   },
-  { prop: "companyCode", label: "应用ID", width: '280' },
+  { prop: "appId", label: "应用ID", width: '480' },
   {
-    prop: "type", label: "创建时间", width: '280',
+    prop: "createTime", label: "创建时间", width: '280',
   },
 ];
 //分页事件
@@ -198,15 +197,7 @@ function getList(item: PageInfo) {
   pageInfo.value.pageSize = item.pageSize;
   findpage();
 };
-//保险公司选择
-//获取保险公司列表
-const companyQuery = () => {
-  api.company.selectLevelList({ name: "" }).then((res: any) => {
-    if (res.code == '200') {
-      companyList.value = res.data;
-    }
-  });
-}
+
 //上传事件
 const sysIconupload = (file: any) => {
   let files = file.raw;
@@ -214,15 +205,15 @@ const sysIconupload = (file: any) => {
   params.append("file", files);
   api.toolApi.fileupload(params).then((res: any) => {
     if (res.code == 200) {
-      paymentform.id = res.data.id;
+      paymentform.appIcon = res.data.id;
       uploadDisabled.value = true;
     }
   })
 }
 //预览图片
 const handlePictureCardPreview = (file: UploadFile) => {
-  appIconUrl.value=file.url;
-  dialogVisible.value=true;
+  appIconUrl.value = file.url;
+  dialogVisible.value = true;
 }
 //删除图片
 const handleRemove = (file: UploadFile) => {
@@ -240,7 +231,7 @@ const addApplication = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid) => {
     if (valid) {
       if (dialogType.value == 'add') {
-        api.company.QRBarcodeAdd({ ...paymentform }).then((res: any) => {
+        api.appConfigApi.appSave({ ...paymentform }).then((res: any) => {
           if (res.code == '200') {
             ElMessage({
               type: 'success',
@@ -253,7 +244,7 @@ const addApplication = async (formEl: FormInstance | undefined) => {
           }
         });
       } else {
-        api.company.QRBarcodeUpdate({ ...paymentform }).then((res: any) => {
+        api.appConfigApi.appManageUpdate({ ...paymentform }).then((res: any) => {
           if (res.code == '200') {
             ElMessage({
               type: 'success',
@@ -276,26 +267,22 @@ const addApplication = async (formEl: FormInstance | undefined) => {
   })
 }
 // 编辑
-const paymentEdit = (id: string) => {
+const paymentEdit = (item: any) => {
   dialogTitle.value = '编辑应用';
   dialogType.value = 'edit';
-  api.company.QRcodeById(id).then((res: any) => {
-    if (res.code == '200') {
-      Object.keys(paymentform).forEach((key) => {
-        if (res.data.hasOwnProperty(key)) {
-          paymentform[key as keyof typeof paymentform] = res.data[key as keyof typeof paymentform];
-        }
-      });
-      paynemtAdddialogVisible.value = true;
-    } else {
+  Object.keys(paymentform).forEach((key) => {
+    if (item.hasOwnProperty(key)) {
+      paymentform[key as keyof typeof paymentform] = item[key as keyof typeof paymentform];
     }
   });
+  appIconUrl.value = item.downloadUrl;
+  paynemtAdddialogVisible.value = true;
 }
 // 删除
 const paymentDel = (id: string) => {
   ElMessageBox.confirm(
-    '确定删除吗？',
-    '删除二维码配置',
+    '',
+    '是否确认删除该应用？',
     {
       confirmButtonText: '确定删除',
       type: 'error',
@@ -320,24 +307,22 @@ const paymentDel = (id: string) => {
     })
 
 }
-//字典信息处理
-const dictType = (type: string) => {
-  api.toolApi.dictType({ dictCode: type }).then((res: any) => {
-    if (res.code == '200') {
-      dictLists.value[type + 'List'] = res.data.map((item: any) => {
-        return {
-          value: item.value,
-          label: item.label
-        };
-      });
+//版本管理跳转
+const versionControl = (item: any) => {
+  router.push({
+    name: 'versionManagementIndex',
+    query: {
+      id: item.appId,
+      appName: item.appName,
+      iconImg: item.downloadUrl
     }
-  });
+  })
 }
 const close = () => {
-  paymentform.companyId = "";
-  paymentform.companyName = "";
-  paymentform.type = "";
-  paymentform.apiType = "";
+  paymentform.appName = "";
+  paymentform.appIcon = "";
+  paymentform.appId = "";
+  paymentform.description = "";
 }
 </script>
 <style lang="scss" scoped>

src/views/productConfiguration/appConfig/versionAdd.vue

@@ -1,14 +0,0 @@
-<!-- 模板区域 -->
-<template>
-<div>
-<PageMain>
-</PageMain>
-</div>
-</template>
-
-<!-- 行为区域 -->
-<script lang='ts' setup>
-import { ref,reactive } from 'vue'
-import api from '@/api'
-</script>
-<!-- 样式区域 -->

src/views/productConfiguration/appConfig/versionManagement.vue

@@ -21,6 +21,14 @@
       <Table :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="250" :showSelect="false"
         :pageInfo="pageInfo" @getList="getList">
         <template v-slot:table-title-btn>
+          <el-button type="primary" @click="router.back()">
+            返回
+            <template #icon>
+              <el-icon>
+                <DArrowLeft />
+              </el-icon>
+            </template>
+          </el-button>
           <el-button type="primary" @click="companyAdd" v-auth="'paymentCodeConfig.add'">
             发布新版本
             <template #icon>
@@ -32,7 +40,7 @@
         </template>
         <template v-slot:operation="scope">
           <Auth :value="'paymentCodeConfig.edit'">
-            <el-button type="primary" link @click="versionEdit(scope.operationData.id)"> 编辑
+            <el-button type="primary" link @click="versionEdit(scope.operationData)"> 编辑
             </el-button>
           </Auth>
         </template>
@@ -41,69 +49,70 @@
         </template>
       </Table>
     </PageMain>
-    <el-dialog v-model="paynemtAdddialogVisible" :title="dialogTitle" width="50%" @close="close" top="5vh">
+    <el-dialog v-model="paynemtAdddialogVisible" :title="dialogTitle" width="50%" @close="close" top="2vh">
       <ElRow :gutter="20">
         <el-form :model="paymentform" :inline="true" label-width="120px" :rules="memberformRules" label-position="top"
           ref="paymentFormRef" style="width: 100%;" :size="fromSize">
           <ElCol :md="24" :lg="12">
-            <el-form-item label="应用名称" prop="companyName">
-              <el-select v-model="paymentform.companyName" placeholder="请选择应用" clearable>
-                <el-option label="dwd" value="wdw" />
+            <el-form-item label="应用名称" prop="appId">
+              <el-select v-model="paymentform.appId" :disabled="dialogType=='edit'" placeholder="请选择应用" clearable @change="appListChange">
+                <el-option v-for="item in appList" :label="item.appName" :value="item.appId" :key="item.appId" />
               </el-select>
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="12">
-            <el-form-item label="更新类型" prop="type">
-              <el-select v-model="paymentform.companyName" placeholder="请选择更新方式" clearable>
-                <el-option label="强制更新" value="强制更新"></el-option>
-                <el-option label="强提示" value="强提示"></el-option>
-                <el-option label="不提示升级" value="不提示升级"></el-option>
+            <el-form-item label="更新类型" prop="appType">
+              <el-select v-model="paymentform.appType" placeholder="请选择更新方式" clearable>
+                <el-option label="强制更新" value="1"></el-option>
+                <el-option label="强提示" value="2"></el-option>
+                <el-option label="不提示升级" value="0"></el-option>
               </el-select>
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="12">
-            <el-form-item label="更新后的版本号" prop="apiType">
-              <el-input v-model="paymentform.apiType" style="width: 100%;" placeholder="请输入版本号（x.x.x）" />
+            <el-form-item label="更新后的版本号" prop="version">
+              <el-input v-model="paymentform.version" style="width: 100%;" placeholder="请输入版本号（x.x.x）" />
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="12">
-            <el-form-item label="安装包类型" prop="apiType">
-              <el-select v-model="paymentform.companyName" placeholder="请选择安装包类型" clearable>
+            <el-form-item label="安装包类型" prop="packageType">
+              <el-select v-model="paymentform.packageType" placeholder="请选择安装包类型" clearable>
                 <el-option label="wgt" value="wgt"></el-option>
-                <el-option label="apk" value="wgt"></el-option>
+                <el-option label="apk" value="apk"></el-option>
               </el-select>
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="24">
-            <el-form-item label="平台" prop="apiType">
-              <el-select v-model="paymentform.apiType" placeholder="请选择平台" clearable>
-                <el-option label="安卓" value="wgt"></el-option>
-                <el-option label="苹果" value="wgt"></el-option>
+            <el-form-item label="平台" prop="platform">
+              <el-select v-model="paymentform.platform" placeholder="请选择平台" clearable>
+                <el-option label="安卓" value="Android"></el-option>
+                <el-option label="苹果" value="iOS"></el-option>
               </el-select>
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="24">
-            <el-form-item label="安装包" prop="apiType">
+            <el-form-item label="安装包" prop="path">
               <el-upload class="upload-demo" drag action="#" style="width: 100%;" :auto-upload="false"
-                :on-change="sysIconupload" multiple>
-                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-                <div class="el-upload__text flex f-c ">
-                  点击或将安装包拖拽到这里上传,上传wgt/apk格式
+                v-loading="uploadLoading" :on-change="sysIconupload" multiple accept=".wgt, .apk">
+                <el-icon v-if="!paymentform.path" class="el-icon--upload"><upload-filled color="#409eff"/></el-icon>
+                <img v-else :src="iconImg" alt="" style="width: 50px;height: 50px;">
+                <div class="el-upload__text flex f-c a-c">
+                  <span v-if="!paymentform.path">点击或将安装包拖拽到这里上传,上传wgt/apk格式</span>
+                  <span v-if="paymentform.path">{{ paymentform.path }}</span>
+                  <el-button v-if="paymentform.path">重新上传</el-button>
                 </div>
-                <!-- <span>{{paymentform.url}}</span> -->
-
               </el-upload>
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="24">
-            <el-form-item label="安装包地址" prop="url">
-              <el-input v-model="paymentform.url" style="width: 100%;" disabled />
+            <el-form-item label="安装包地址">
+              <el-input v-model="paymentform.path" style="width: 100%;" disabled />
             </el-form-item>
           </ElCol>
           <ElCol :md="24" :lg="24">
-            <el-form-item label="更新说明" prop="apiType">
-              <el-input v-model="paymentform.apiType" type="textarea" style="width: 100%;" show-word-limit
-                maxlength="500" />
+            <el-form-item label="更新说明" prop="content">
+              <el-input v-model="paymentform.content" type="textarea" placeholder="更新内容说明" style="width: 100%;"
+                :rows="3" show-word-limit maxlength="500"/>
             </el-form-item>
           </ElCol>
         </el-form>
@@ -117,9 +126,6 @@
         </div>
       </template>
     </el-dialog>
-    <el-dialog v-model="dialogVisible" title="图片预览">
-      <img w-full :src="appIconUrl" alt="Preview Image" />
-    </el-dialog>
   </div>
 
 </template>
@@ -129,6 +135,9 @@ import { ref, reactive } from 'vue'
 import api from '@/api';
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { FormRules, FormInstance, ComponentSize, UploadFile } from 'element-plus';
+import { useRoute } from 'vue-router';
+import router from '@/router';
+const route = useRoute();
 interface PageInfo {
   pageNum: number;
   pageSize: number;
@@ -137,41 +146,66 @@ interface PageInfo {
 }
 interface paymentform {
   id?: string,
-  companyId: string,
-  companyName: string,
-  type: string,
-  apiType: string,
-  url: string,
+  appId: string,
+  appName: string,
+  title: string,
+  content: string,
+  path: string,
+  pathId: string,
+  appType: string,
+  platform: string,
+  version: string,
+  packageType: string,
 }
-const appIconUrl = ref()//icon图片
+const uploadLoading = ref(false)//上传加载
+const appList = ref()//应用列表
 const tableData = ref([]);//列表数据
 const uploadDisabled = ref(false)//上传组件
-const dialogVisible = ref(false)//图片预览窗口
 const paymentFormRef = ref<FormInstance>()
 const fromSize = ref<ComponentSize>('default')//表单大小
 const paynemtAdddialogVisible = ref(false)//弹窗
-const dictLists = ref<{ [key: string]: any[] }>({});//字典集合
 const dialogTitle = ref('发布新版本')//弹窗title
 const dialogType = ref('add')//弹窗title
-const companyList = ref();
-
 const paymentform = reactive<paymentform>({
   id: "",
-  companyId: "",
-  companyName: "",
-  type: "",
-  apiType: "",
-  url: "",
+  appId: "",//appid
+  appName: "",//应用名称
+  title: "",//更新标题
+  content: "",//更新内容
+  appType: "",//更新类型
+  platform: "",//平台
+  version: "",//版本号
+  pathId: "",//包id
+  path: "",//包地址
+  packageType: "",//安装包类型
 })
 const memberformRules = ref<FormRules>({
-  companyId: [
-    { required: true, trigger: 'blur', message: '请输入应用名称' },
+  appId: [
+    { required: true, trigger: 'change', message: '请选择应用名称' },
+  ],
+  appType: [
+    { required: true, trigger: 'change', message: '请选择更新类型' },
+  ],
+  platform: [
+    { required: true, trigger: 'change', message: '请选择平台' },
+  ],
+  version: [
+    { required: true, trigger: 'blur', message: '请输入版本号' },
+  ],
+  packageType: [
+    { required: true, trigger: 'change', message: '请选择安装包类型' },
   ],
-  type: [
-    { required: true, trigger: 'blur', message: '请输入应用ID' },
+  path: [
+    { required: true, trigger: 'blur', message: '请上传安装包' },
+  ],
+  content: [
+    { required: true, trigger: 'blur', message: '请输入更新内容' },
   ],
 
 });
+const appId = ref(route.query.id as string);//id参数
+const appName = ref(route.query.appName as string);//应用name
+const iconImg = ref(route.query.iconImg as string);//应用图标
 //分页
 const pageInfo = ref({
   pageNum: 1,
@@ -184,14 +218,24 @@ const formInline = reactive({
   companyName: '',//保险公司name
 })
 onMounted(() => {
+  paymentform.appId = appId.value;
+  paymentform.appName = appName.value;
   findpage();
-  companyQuery();//获取保险公司
-  dictType('api_type');//qpi类型
-  dictType('qr_barcode');//请求类型
+  getAppList();
 
 });
+//应用列表
+const getAppList = () => {
+  api.appConfigApi.queryAppList({ pages: 1, size: 20 }).then((res: any) => {
+    if (res.code == 200) {
+      appList.value = res.data.records;
+    }
+
+  })
+}
+//版本列表接口
 function findpage() {
-  api.company.QRcodePage({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
+  api.appConfigApi.versionList({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
     if (res.code == 200) {
       tableData.value = res.data.records;
       pageInfo.value.pageNum = res.data.current;
@@ -203,64 +247,73 @@ function findpage() {
 }
 const columns = [
   {
-    prop: "companyName", label: "应用名称", width: '380'
+    prop: "appName", label: "应用名称", width: '180'
   },
   {
-    prop: "type", label: "更新类型", width: '280'
+    prop: "version", label: "更新后的版本号", width: '180',
   },
   {
-    prop: "type", label: "更新后的版本号", width: '280',
-  },
-  {
-    prop: "type", label: "安装包类型", width: '280',
+    prop: "appType", label: "更新类型", width: '180', formatter: (row: any) => {
+      switch (row.appType) {
+        case '0':
+          return '不提示升级'
+        case '1':
+          return '强制更新'
+        case '2':
+          return '强提示'
+        default:
+          return '-'
+      }
+    }
   },
   {
-    prop: "type", label: "平台", width: '280',
+    prop: "packageType", label: "安装包类型", width: '180', component: "Tag",
+    formatter: (row: any) => {
+      if (row.packageType == "wgt") {
+        return { type: 'primary', text: 'wgt资源包' };
+      } else {
+        return { type: 'success', text: 'apk安装包' };
+      }
+    }
   },
   {
-    prop: "type", label: "安装包", width: '280',
+    prop: "content", label: "更新内容",
   },
   {
-    prop: "type", label: "安装包地址", width: '280',
+    prop: "createTime", label: "发布时间", width: '180',
   },
+
 ];
+//切换应用
+const appListChange = (value: any) => {
+  if (value) {
+    let name = appList.value.find((val: any) => val.appId === value).appName;
+    paymentform.appName = name;
+  }
+}
 //分页事件
 function getList(item: PageInfo) {
   pageInfo.value.pageNum = item.pageNum;
   pageInfo.value.pageSize = item.pageSize;
   findpage();
 };
-//保险公司选择
-//获取保险公司列表
-const companyQuery = () => {
-  api.company.selectLevelList({ name: "" }).then((res: any) => {
-    if (res.code == '200') {
-      companyList.value = res.data;
-    }
-  });
-}
 //上传事件
 const sysIconupload = (file: any) => {
   let files = file.raw;
+  uploadLoading.value = true;
   const params = new FormData(); // 声明formData数据类型
   params.append("file", files);
   api.toolApi.fileupload(params).then((res: any) => {
     if (res.code == 200) {
-      paymentform.id = res.data.id;
-      paymentform.url = res.data.downloadUrl;
+      paymentform.pathId = res.data.id;
+      paymentform.path = res.data.downloadUrl;
       uploadDisabled.value = true;
+      uploadLoading.value = false;
+
     }
   })
 }
-//预览图片
-const handlePictureCardPreview = (file: UploadFile) => {
-  appIconUrl.value = file.url;
-  dialogVisible.value = true;
-}
-//删除图片
-const handleRemove = (file: UploadFile) => {
 
-}
 //添加按钮
 const companyAdd = () => {
   dialogTitle.value = '发布新版本';
@@ -272,8 +325,9 @@ const addApplication = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
+      console.log(paymentform)
       if (dialogType.value == 'add') {
-        api.company.QRBarcodeAdd({ ...paymentform }).then((res: any) => {
+        api.appConfigApi.versionSave({ ...paymentform }).then((res: any) => {
           if (res.code == '200') {
             ElMessage({
               type: 'success',
@@ -286,11 +340,11 @@ const addApplication = async (formEl: FormInstance | undefined) => {
           }
         });
       } else {
-        api.company.QRBarcodeUpdate({ ...paymentform }).then((res: any) => {
+        api.appConfigApi.versionUpdate({ ...paymentform }).then((res: any) => {
           if (res.code == '200') {
             ElMessage({
               type: 'success',
-              message: res.msg,
+              message: '修改成功',
               plain: true,
             })
             paynemtAdddialogVisible.value = false;
@@ -309,68 +363,19 @@ const addApplication = async (formEl: FormInstance | undefined) => {
   })
 }
 // 编辑
-const versionEdit = (id: string) => {
+const versionEdit = (item: any) => {
   dialogTitle.value = '编辑应用';
   dialogType.value = 'edit';
-  api.company.QRcodeById(id).then((res: any) => {
-    if (res.code == '200') {
-      Object.keys(paymentform).forEach((key) => {
-        if (res.data.hasOwnProperty(key)) {
-          paymentform[key as keyof typeof paymentform] = res.data[key as keyof typeof paymentform];
-        }
-      });
-      paynemtAdddialogVisible.value = true;
-    } else {
+  Object.keys(paymentform).forEach((key) => {
+    if (item.hasOwnProperty(key)) {
+      paymentform[key as keyof typeof paymentform] = item[key as keyof typeof paymentform];
     }
   });
+  console.log(paymentform)
+  paynemtAdddialogVisible.value = true;
 }
-// 删除
-const paymentDel = (id: string) => {
-  ElMessageBox.confirm(
-    '确定删除吗？',
-    '删除二维码配置',
-    {
-      confirmButtonText: '确定删除',
-      type: 'error',
-      center: true,
-      confirmButtonClass: 'el-button--danger',
-    }
-  )
-    .then(() => {
-      api.company.QRcodeDel(id).then((res: any) => {
-        if (res.code == '200') {
-          ElMessage({
-            type: 'success',
-            message: res.msg,
-            plain: true,
-          })
-          findpage();
-        } else {
-        }
-      });
-    })
-    .catch(() => {
-    })
 
-}
-//字典信息处理
-const dictType = (type: string) => {
-  api.toolApi.dictType({ dictCode: type }).then((res: any) => {
-    if (res.code == '200') {
-      dictLists.value[type + 'List'] = res.data.map((item: any) => {
-        return {
-          value: item.value,
-          label: item.label
-        };
-      });
-    }
-  });
-}
 const close = () => {
-  paymentform.companyId = "";
-  paymentform.companyName = "";
-  paymentform.type = "";
-  paymentform.apiType = "";
 }
 </script>
 <style lang="scss" scoped>
@@ -386,4 +391,12 @@ const close = () => {
 .disabled :deep(.el-upload--picture-card) {
   display: none;
 }
+
+:deep(.el-upload-list) {
+  display: none;
+}
+
+:deep(.el-upload-dragger) {
+  padding: 20px 0;
+}
 </style>