app版本管理页面

src/components/Table/index.vue

@@ -72,6 +72,9 @@
                 @click="customEventClick(scope.row)">{{ customEvent(scope.row, column).content }}</span>
               <span v-else>{{ customEvent(scope.row, column) }}</span>
             </div>
+            <div v-else-if="column.component === 'html'">
+              <span   v-html="htmlEvent(scope.row, column).html"></span>
+            </div>
             <div v-else>
               <div v-if="getDisplayText(scope.row, 0).includes('\n')" class="flex f-c ">
                 <span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
@@ -235,8 +238,16 @@ function getDisplayText(row: Row, column: any): string {
 function customEvent(row: Row, column: any) {
   return column.formatter ? column.formatter(row, column, row[column.prop]) : row[column.prop]
 }
+function htmlEvent(row: Row, column: any) {
+  return column.formatter ? column.formatter(row, column, row[column.prop]) : row[column.prop]
+}
 </script>
 <style lang="scss" scoped>
+.customclass {
+  font-weight: bold;
+  color: darkblue !important;
+}
+
 .el-table .el-table__cell .routerlick > a {
   color: red;
 }

src/router/modules/appConfig.ts

@@ -0,0 +1,79 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const Layout = () => import('@/layouts/index.vue')
+const routes: RouteRecordRaw = {
+  path: '/productConfiguration/appConfig',
+  component: Layout,
+  redirect: '/productConfiguration/appConfig/appManagement',
+  name: 'ProductConfigurationAppconfig',
+  meta: {
+    title: '应用配置',
+    icon:'zh',
+  },
+  children: [
+    {
+      path: 'appManagement',
+      name: 'appManagementIndex',
+      redirect: '/productConfiguration/appConfig/appManagement',
+      meta: {
+        title: '应用管理',
+        auth: []
+      },
+      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',
+      meta: {
+        title: '版本管理',
+        auth: []
+      },
+      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',
+          },
+        },
+      ]
+    },
+  ],
+}
+
+export default routes

src/router/routes.ts

@@ -7,6 +7,7 @@ import organizationManagement from './modules/organization'//租户管理
 import personnel from './modules/personnel'//成员管理
 import insuranceCompany from './modules/insuranceCompany'//保险公司配置
 import product from './modules/product'//产品配置
+import appConfig from './modules/appConfig'//应用配置
 
 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -88,7 +89,8 @@ const asyncRoutes: Route.recordMainRaw[] = [
     },
     children: [
       insuranceCompany,
-      product
+      product,
+      appConfig
     ],
   },
 

src/views/productConfiguration/appConfig/appAdd.vue

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

@@ -0,0 +1,356 @@
+<template>
+  <div>
+    <PageMain class="vh100">
+      <ElForm :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
+        <ElRow :gutter="20">
+          <ElCol :md="6">
+            <ElFormItem label="应用名称">
+              <el-input v-model="formInline.companyName" placeholder="输入应用名称查找" clearable class="el-inputs" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="4">
+            <el-button type="primary" v-auth="'paymentCodeConfig.view'" @click="findpage">
+              <template #icon>
+                <SvgIcon name="i-ep:search" />
+              </template>
+              查询</el-button>
+          </ElCol>
+        </ElRow>
+      </ElForm>
+      <ElDivider border-style="dashed"></ElDivider>
+      <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="companyAdd" v-auth="'paymentCodeConfig.add'">
+            添加应用
+            <template #icon>
+              <el-icon>
+                <Plus />
+              </el-icon>
+            </template>
+          </el-button>
+        </template>
+        <template v-slot:operation="scope">
+          <Auth :value="'paymentCodeConfig.edit'">
+            <el-button type="primary" link @click="paymentEdit(scope.operationData.id)"> 编辑
+            </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>
+        </template>
+        <template v-slot:search="scope">
+          {{ scope.slotData.label }}
+        </template>
+      </Table>
+    </PageMain>
+    <el-dialog v-model="paynemtAdddialogVisible" :title="dialogTitle" width="30%" @close="close">
+      <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="24">
+            <el-form-item label="应用名称" prop="companyName">
+              <el-input v-model="paymentform.companyName" placeholder="请输入应用名称" />
+            </el-form-item>
+          </ElCol>
+          <ElCol :md="24" :lg="24" style="margin-bottom: 10px;">
+            <el-form-item label="应用图标" prop="companyName" >
+              <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%;" />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+            <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>
+          </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>
+          </ElCol>
+        </el-form>
+      </ElRow>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="paynemtAdddialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="addApplication(paymentFormRef)">
+            保存
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="dialogVisible" title="图片预览">
+      <img w-full :src="appIconUrl" alt="Preview Image" />
+    </el-dialog>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import api from '@/api';
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { FormRules, FormInstance, ComponentSize,UploadFile } from 'element-plus';
+interface PageInfo {
+  pageNum: number;
+  pageSize: number;
+  sizes: number[];
+  total: number;
+}
+interface paymentform {
+  id?: string,
+  companyId: string,
+  companyName: string,
+  type: string,
+  apiType: string,
+}
+const appIconUrl=ref()//icon图片
+const tableData = ref([]);//列表数据
+const uploadDisabled = ref(false)//上传组件
+const dialogVisible=ref(false)//图片预览窗口
+const paymentFormRef = ref<FormInstance>()
+const fromSize = ref<ComponentSize>('large')//表单大小
+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: "",
+})
+const memberformRules = ref<FormRules>({
+  companyId: [
+    { required: true, trigger: 'blur', message: '请输入应用名称' },
+  ],
+  type: [
+    { required: true, trigger: 'blur', message: '请输入应用ID' },
+  ],
+
+});
+//分页
+const pageInfo = ref({
+  pageNum: 1,
+  pageSize: 20,
+  sizes: [10, 20, 30, 40, 50],
+  total: 0,
+});
+//检索条件
+const formInline = reactive({
+  companyName: '',//保险公司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) => {
+    if (res.code == 200) {
+      tableData.value = res.data.records;
+      pageInfo.value.pageNum = res.data.current;
+      pageInfo.value.pageSize = res.data.size;
+      pageInfo.value.total = res.data.total;
+    }
+
+  })
+}
+const columns = [
+  {
+    prop: "companyName", label: "应用信息", align: 'left', component: "html", formatter: (row: any) => {
+
+      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;">
+      <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>
+      </div>
+    </div>`,
+      };
+    }
+  },
+  { prop: "companyCode", label: "应用ID", width: '280' },
+  {
+    prop: "type", label: "创建时间", width: '280',
+  },
+];
+//分页事件
+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;
+  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;
+      uploadDisabled.value = true;
+    }
+  })
+}
+//预览图片
+const handlePictureCardPreview = (file: UploadFile) => {
+  appIconUrl.value=file.url;
+  dialogVisible.value=true;
+}
+//删除图片
+const handleRemove = (file: UploadFile) => {
+
+}
+//添加按钮
+const companyAdd = () => {
+  dialogTitle.value = '添加应用';
+  dialogType.value = 'add';
+  paynemtAdddialogVisible.value = true
+}
+//保存
+const addApplication = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (dialogType.value == 'add') {
+        api.company.QRBarcodeAdd({ ...paymentform }).then((res: any) => {
+          if (res.code == '200') {
+            ElMessage({
+              type: 'success',
+              message: res.msg,
+              plain: true,
+            })
+            paynemtAdddialogVisible.value = false;
+            findpage();
+          } else {
+          }
+        });
+      } else {
+        api.company.QRBarcodeUpdate({ ...paymentform }).then((res: any) => {
+          if (res.code == '200') {
+            ElMessage({
+              type: 'success',
+              message: res.msg,
+              plain: true,
+            })
+            paynemtAdddialogVisible.value = false;
+            findpage();
+          } else {
+          }
+        });
+      }
+    } else {
+      ElMessage({
+        type: 'error',
+        message: '信息不完整',
+        plain: true,
+      })
+    }
+  })
+}
+// 编辑
+const paymentEdit = (id: string) => {
+  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 {
+    }
+  });
+}
+// 删除
+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>
+:deep(.el-divider--horizontal) {
+  margin: 8px 0 24px;
+  color: #f2f2f2;
+}
+
+.el-inputs {
+  width: 100% !important;
+}
+
+.disabled :deep(.el-upload--picture-card) {
+  display: none;
+}
+</style>

src/views/productConfiguration/appConfig/versionAdd.vue

@@ -0,0 +1,14 @@
+<!-- 模板区域 -->
+<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

@@ -0,0 +1,389 @@
+<template>
+  <div>
+    <PageMain class="vh100">
+      <ElForm :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
+        <ElRow :gutter="20">
+          <ElCol :md="6">
+            <ElFormItem label="应用名称">
+              <el-input v-model="formInline.companyName" placeholder="输入应用名称查找" clearable class="el-inputs" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="4">
+            <el-button type="primary" v-auth="'paymentCodeConfig.view'" @click="findpage">
+              <template #icon>
+                <SvgIcon name="i-ep:search" />
+              </template>
+              查询</el-button>
+          </ElCol>
+        </ElRow>
+      </ElForm>
+      <ElDivider border-style="dashed"></ElDivider>
+      <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="companyAdd" v-auth="'paymentCodeConfig.add'">
+            发布新版本
+            <template #icon>
+              <el-icon>
+                <Plus />
+              </el-icon>
+            </template>
+          </el-button>
+        </template>
+        <template v-slot:operation="scope">
+          <Auth :value="'paymentCodeConfig.edit'">
+            <el-button type="primary" link @click="versionEdit(scope.operationData.id)"> 编辑
+            </el-button>
+          </Auth>
+        </template>
+        <template v-slot:search="scope">
+          {{ scope.slotData.label }}
+        </template>
+      </Table>
+    </PageMain>
+    <el-dialog v-model="paynemtAdddialogVisible" :title="dialogTitle" width="50%" @close="close" top="5vh">
+      <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-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-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>
+          </ElCol>
+          <ElCol :md="24" :lg="12">
+            <el-form-item label="安装包类型" prop="apiType">
+              <el-select v-model="paymentform.companyName" placeholder="请选择安装包类型" clearable>
+                <el-option label="wgt" value="wgt"></el-option>
+                <el-option label="apk" value="wgt"></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-select>
+            </el-form-item>
+          </ElCol>
+          <ElCol :md="24" :lg="24">
+            <el-form-item label="安装包" prop="apiType">
+              <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格式
+                </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>
+          </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>
+          </ElCol>
+        </el-form>
+      </ElRow>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="paynemtAdddialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="addApplication(paymentFormRef)">
+            保存
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="dialogVisible" title="图片预览">
+      <img w-full :src="appIconUrl" alt="Preview Image" />
+    </el-dialog>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import api from '@/api';
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { FormRules, FormInstance, ComponentSize, UploadFile } from 'element-plus';
+interface PageInfo {
+  pageNum: number;
+  pageSize: number;
+  sizes: number[];
+  total: number;
+}
+interface paymentform {
+  id?: string,
+  companyId: string,
+  companyName: string,
+  type: string,
+  apiType: string,
+  url: string,
+}
+const appIconUrl = ref()//icon图片
+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: "",
+})
+const memberformRules = ref<FormRules>({
+  companyId: [
+    { required: true, trigger: 'blur', message: '请输入应用名称' },
+  ],
+  type: [
+    { required: true, trigger: 'blur', message: '请输入应用ID' },
+  ],
+
+});
+//分页
+const pageInfo = ref({
+  pageNum: 1,
+  pageSize: 20,
+  sizes: [10, 20, 30, 40, 50],
+  total: 0,
+});
+//检索条件
+const formInline = reactive({
+  companyName: '',//保险公司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) => {
+    if (res.code == 200) {
+      tableData.value = res.data.records;
+      pageInfo.value.pageNum = res.data.current;
+      pageInfo.value.pageSize = res.data.size;
+      pageInfo.value.total = res.data.total;
+    }
+
+  })
+}
+const columns = [
+  {
+    prop: "companyName", label: "应用名称", width: '380'
+  },
+  {
+    prop: "type", label: "更新类型", width: '280'
+  },
+  {
+    prop: "type", label: "更新后的版本号", width: '280',
+  },
+  {
+    prop: "type", label: "安装包类型", width: '280',
+  },
+  {
+    prop: "type", label: "平台", width: '280',
+  },
+  {
+    prop: "type", label: "安装包", width: '280',
+  },
+  {
+    prop: "type", label: "安装包地址", width: '280',
+  },
+];
+//分页事件
+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;
+  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;
+      uploadDisabled.value = true;
+    }
+  })
+}
+//预览图片
+const handlePictureCardPreview = (file: UploadFile) => {
+  appIconUrl.value = file.url;
+  dialogVisible.value = true;
+}
+//删除图片
+const handleRemove = (file: UploadFile) => {
+
+}
+//添加按钮
+const companyAdd = () => {
+  dialogTitle.value = '发布新版本';
+  dialogType.value = 'add';
+  paynemtAdddialogVisible.value = true
+}
+//保存
+const addApplication = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (dialogType.value == 'add') {
+        api.company.QRBarcodeAdd({ ...paymentform }).then((res: any) => {
+          if (res.code == '200') {
+            ElMessage({
+              type: 'success',
+              message: res.msg,
+              plain: true,
+            })
+            paynemtAdddialogVisible.value = false;
+            findpage();
+          } else {
+          }
+        });
+      } else {
+        api.company.QRBarcodeUpdate({ ...paymentform }).then((res: any) => {
+          if (res.code == '200') {
+            ElMessage({
+              type: 'success',
+              message: res.msg,
+              plain: true,
+            })
+            paynemtAdddialogVisible.value = false;
+            findpage();
+          } else {
+          }
+        });
+      }
+    } else {
+      ElMessage({
+        type: 'error',
+        message: '信息不完整',
+        plain: true,
+      })
+    }
+  })
+}
+// 编辑
+const versionEdit = (id: string) => {
+  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 {
+    }
+  });
+}
+// 删除
+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>
+:deep(.el-divider--horizontal) {
+  margin: 8px 0 24px;
+  color: #f2f2f2;
+}
+
+.el-inputs {
+  width: 100% !important;
+}
+
+.disabled :deep(.el-upload--picture-card) {
+  display: none;
+}
+</style>