|
|
@@ -1,12 +1,322 @@
|
|
|
-<!-- 模板区域 -->
|
|
|
<template>
|
|
|
<div>
|
|
|
- <PageMain>
|
|
|
- </PageMain>
|
|
|
+ <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" @click="findpage">查询</el-button>
|
|
|
+ </ElCol>
|
|
|
+ </ElRow>
|
|
|
+ </ElForm>
|
|
|
+ <ElDivider border-style="dashed"></ElDivider>
|
|
|
+ <Table :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="false"
|
|
|
+ :pageInfo="pageInfo" @getList="getList">
|
|
|
+ <template v-slot:table-title-btn>
|
|
|
+ <el-button type="primary" @click="companyAdd">
|
|
|
+ 添加保险公司
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:operation="scope">
|
|
|
+ <el-button type="primary" link @click="paymentEdit(scope.operationData.id)"> 编辑
|
|
|
+ </el-button>
|
|
|
+ <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="40%" @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="12">
|
|
|
+ <el-form-item label="保险公司" prop="companyId">
|
|
|
+ <el-select v-model="paymentform.companyId" @change="companyIdChange" placeholder="请选择"
|
|
|
+ style="width: 100%;">
|
|
|
+ <el-option :label="item.name" :value="item.id" v-for="(item, index) in companyList" :key="index" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="简称" prop="companyName">
|
|
|
+ <el-input v-model="paymentform.companyName" placeholder="请输入姓名" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="二维码类型" prop="type">
|
|
|
+ <el-select v-model="paymentform.type" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option v-for="(item, index) in dictLists.qr_barcodeList" :label="item.label" :value="item.value"
|
|
|
+ :key="index" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="请求类型" prop="apiType">
|
|
|
+ <el-select v-model="paymentform.apiType" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option v-for="(item, index) in dictLists.api_typeList" :label="item.label" :value="item.value"
|
|
|
+ :key="index" />
|
|
|
+ </el-select>
|
|
|
+ </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="MemberAdd(paymentFormRef)">
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
- </template>
|
|
|
|
|
|
- <!-- 行为区域 -->
|
|
|
- <script lang='ts' setup>
|
|
|
- </script>
|
|
|
- <!-- 样式区域 -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import api from '@/api';
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { FormRules, FormInstance, ComponentSize } 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,
|
|
|
+ companyCode: string,
|
|
|
+}
|
|
|
+
|
|
|
+const tableData = ref([]);//列表数据
|
|
|
+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: "",
|
|
|
+ companyCode: "",
|
|
|
+})
|
|
|
+const memberformRules = ref<FormRules>({
|
|
|
+ companyId: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择保险公司' },
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择二维码类型' },
|
|
|
+ ],
|
|
|
+ apiType: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择请求类型' },
|
|
|
+ ],
|
|
|
+
|
|
|
+});
|
|
|
+//分页
|
|
|
+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' },
|
|
|
+ { prop: "companyCode", label: "保险公司代码", width: '220' },
|
|
|
+ {
|
|
|
+ prop: "type", label: "二维码类型", width: '280', formatter: (row: any) => {
|
|
|
+ let type = row.type;
|
|
|
+ let name = dictLists.value.qr_barcodeList?.find(val => val.value == type).label;
|
|
|
+ return name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "apiType", label: "请求方式", width: '280', formatter: (row: any) => {
|
|
|
+ let apiType = row.apiType;
|
|
|
+ let name = dictLists.value.api_typeList?.find(val => val.value == apiType).label;
|
|
|
+ return name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+];
|
|
|
+function getList(item: PageInfo) {
|
|
|
+ pageInfo.value.pageNum = item.pageNum;
|
|
|
+ pageInfo.value.pageSize = item.pageSize;
|
|
|
+ findpage();
|
|
|
+};
|
|
|
+const companyIdChange = (value: string) => {
|
|
|
+ let Info = companyList.value.find((val: any) => val.id == value);
|
|
|
+ paymentform.companyName = Info.name;
|
|
|
+ paymentform.companyCode = Info.companyCode;
|
|
|
+}
|
|
|
+//获取保险公司列表
|
|
|
+const companyQuery = () => {
|
|
|
+ api.company.selectLevelList({ name: "" }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ companyList.value = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const companyAdd = () => {
|
|
|
+ dialogTitle.value = '支付码配置';
|
|
|
+ dialogType.value = 'add';
|
|
|
+ paynemtAdddialogVisible.value = true
|
|
|
+}
|
|
|
+const MemberAdd = 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;
|
|
|
+}
|
|
|
+</style>
|
