特约配置

.env.development

@@ -11,7 +11,6 @@ VITE_APP_API_BASEURL = http://192.168.0.253:8001  #田智
 VITE_APP_DEBUG_TOOL =
 # 是否禁用开发者工具，可防止被调试
 VITE_APP_DISABLE_DEVTOOL = false
-
 # 是否开启代理
 VITE_OPEN_PROXY = false
 # 是否开启开发者工具

src/api/modules/product.ts

@@ -2,17 +2,29 @@ import { ApiInstance } from '../type'
 import * as Types from '../types/productTypes';
 const product = (axiosInstance: ApiInstance) => ({
   //保存驾意险配置
-  jyxConfigAdd: (data: Types.jyxConfigRequest) => axiosInstance.post('/jyxConfig/saveAll', data),
+  jyxConfigAdd: (data: Types.jyxConfigRequest) => axiosInstance.post('jyxConfig/saveAll', data),
   //查询主险
-  selectMainInsurance: (company:string ) => axiosInstance.get(`/jyxConfig/selectMainInsurance?company=${company}`),
+  selectMainInsurance: (company:string ) => axiosInstance.get(`jyxConfig/selectMainInsurance?company=${company}`),
   //查询驾意险列表
-  jyxList: (data: Types.jyxListRequest) => axiosInstance.post('/jyxConfig/jyxList', data),
+  jyxList: (data: Types.jyxListRequest) => axiosInstance.post('jyxConfig/jyxList', data),
   //详情
-  jygetById: (id:string ) => axiosInstance.get(`/jyxConfig/getById?id=${id}`),
+  jygetById: (id:string ) => axiosInstance.get(`jyxConfig/getById?id=${id}`),
   //驾意险修改
   jyxupdateById: (data: Types.jyxConfigRequest) => axiosInstance.post('/jyxConfig/updateById', data),
   //删除
-  deleteById: (id:string ) => axiosInstance.get(`/jyxConfig/deleteById?id=${id}`),
+  deleteById: (id:string ) => axiosInstance.get(`jyxConfig/deleteById?id=${id}`),
+  //添加特别约定
+  addClause: (data: Types.addClauseRequest) => axiosInstance.post('manager/clause/addClause', data),
+  //修改特别约定
+  updateClause: (data: Types.addClauseRequest) => axiosInstance.post('manager/clause/updateClause', data),
+  //特别约定列表查询
+  getClausePage: (data: Types.pageRequest) => axiosInstance.post('manager/clause/getClausePage', data),
+  //特别约定查询
+  getClause: (data: Types.pageRequest) => axiosInstance.post('manager/clause/getClause', data),
+
+  //特约删除
+  deleteClause: (data:string[]) => axiosInstance.post('manager/clause/deleteClause', data),
+
 })
 
 export default product

src/api/types/productTypes.ts

@@ -168,3 +168,131 @@ export type jyxListRequest = {
   size?: number;
   [property: string]: any;
 }
+
+/**
+ * InsCompanyClause，特约条款
+ */
+export type addClauseRequest = {
+  /**
+   * 条款code
+   */
+  clauseCode?: string;
+  /**
+   * 条款内容
+   */
+  clauseContent?: string;
+  /**
+   * 条款名称
+   */
+  clauseName?: string;
+  /**
+   * 客户端状态
+   */
+  clientStatus?: string;
+  /**
+   * 保险公司id
+   */
+  companyId?: string;
+  /**
+   * 创建人
+   */
+  createBy?: string;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 主键
+   */
+  id?: string;
+  /**
+   * 是否删除
+   */
+  isDelete?: number;
+  /**
+   * 是否编辑
+   */
+  isEdit?: string;
+  /**
+   * 险种code
+   */
+  riskCode?: string;
+  /**
+   * 修改人
+   */
+  updateBy?: string;
+  /**
+   * 修改时间
+   */
+  updateTime?: Date;
+  [property: string]: any;
+}
+
+/**
+ * CompanyClauseVo
+ */
+export type pageRequest = {
+  /**
+   * 条款内容
+   */
+  clauseContent?: string;
+  /**
+   * 条款名称
+   */
+  clauseName?: string;
+  /**
+   * 保险公司id
+   */
+  companyId?: string;
+  page?: Page;
+  pages?: number;
+  /**
+   * 险种信息
+   */
+  riskCode?: string;
+  size?: number;
+  [property: string]: any;
+}
+/**
+ * Page
+ */
+export type Page = {
+  countId?: string;
+  current?: number;
+  maxLimit?: number;
+  optimizeCountSql?: PageObject;
+  optimizeJoinOfCountSql?: boolean;
+  orders?: OrderItem[];
+  pages?: number;
+  records?: { [key: string]: any }[];
+  searchCount?: PageObject;
+  size?: number;
+  total?: number;
+  [property: string]: any;
+}
+/**
+ * PageObject
+ */
+export type PageObject = {
+  countId?: string;
+  current?: number;
+  maxLimit?: number;
+  optimizeCountSql?: PageObject;
+  optimizeJoinOfCountSql?: boolean;
+  orders?: OrderItem[];
+  pages?: number;
+  records?: { [key: string]: any }[];
+  searchCount?: PageObject;
+  size?: number;
+  total?: number;
+  [property: string]: any;
+}
+
+/**
+* OrderItem
+*/
+export type OrderItem = {
+  asc?: boolean;
+  column?: string;
+  [property: string]: any;
+}

src/router/modules/product.ts

@@ -12,7 +12,7 @@ const routes: RouteRecordRaw = {
   },
   children: [
     {
-      path: 'index',
+      path: 'drivingInsuranceindex',
       name: 'DrivingInsuranceIndex',
       redirect: '/productConfiguration/drivingInsurance/index',
       meta: {
@@ -22,7 +22,7 @@ const routes: RouteRecordRaw = {
       children: [
         {
           path: '',
-          component: () => import('@/views/productConfiguration/drivingInsurance/index.vue'),
+          component: () => import('@/views/productConfiguration/drivingInsurance/drivingInsuranceindex.vue'),
           meta: {
             title: '驾意险配置',
             menu: false,
@@ -42,13 +42,36 @@ const routes: RouteRecordRaw = {
       ],
     },
 
+
     {
-      path: '/productConfiguration/specialClause/index',
+      path: 'specialClauseindex',
       name: 'SpecialClauseIndex',
-      component: () => import('@/views/productConfiguration/specialClause/index.vue'),
+      redirect: '/productConfiguration/specialClause/specialClauseindex',
       meta: {
         title: '特约管理',
+        auth: ['drivingInsurance.add', 'drivingInsurance.view', 'drivingInsurance.delete', 'drivingInsurance.edit']
       },
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/productConfiguration/specialClause/specialClauseindex.vue'),
+          meta: {
+            title: '特约管理',
+            menu: false,
+            breadcrumb: false,
+          },
+        },
+        {
+          path: 'specialClauseAdd',
+          name: 'SpecialClauseAdd',
+          component: () => import('@/views/productConfiguration/specialClause/specialClauseAdd.vue'),
+          meta: {
+            title: '特约添加',
+            menu: false,
+            activeMenu: '/productConfiguration/specialClause/specialClauseindex',
+          },
+        },
+      ]
     },
   ],
 }

src/views/productConfiguration/specialClause/index.vue

@@ -1,304 +0,0 @@
-<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="6">
-            <ElFormItem label="特约内容">
-              <el-input v-model="formInline.companyName" placeholder="输入保险公司查找" clearable class="el-inputs" />
-            </ElFormItem>
-          </ElCol>
-          <ElCol :md="1">
-            <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 getDict('qr_barcode')" :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 getDict('api_type')" :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>
-import { ref, reactive } from 'vue'
-import api from '@/api';
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { FormRules, FormInstance, ComponentSize } from 'element-plus';
-import { loadDicts, getDict } from '@/utils/composables/dictService';
-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 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();//获取保险公司
-  loadDicts(['qr_barcode', 'api_type']);//获取多个字典
-});
-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 = getDict('qr_barcode').find(val => val.value == type).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 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>

src/views/productConfiguration/specialClause/specialClauseAdd.vue

@@ -0,0 +1,212 @@
+<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>
+                <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" placeholder="请输入机构地址" 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: "",//保险公司code
+  clauseName: "",//特约名称
+  riskCode: "",//特约类型
+  clauseCode: "",//特约编码
+  clauseContent: "",//特约内容
+  isEdit: "",//是否编辑
+  clientStatus: "",//客户端状态
+})
+
+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: '请输入特约内容' },
+  ],
+
+});
+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];
+        }
+      });
+    } 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/specialClause/specialClauseindex.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <PageMain class="vh100">
+      <ElForm :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
+        <ElRow :gutter="20">
+          <ElCol :md="8">
+            <ElFormItem label="保险公司">
+              <el-select v-model="formInline.companyId" placeholder="请选择保险公司" style="width: 100%;">
+                <el-option :label="item.name" :value="item.id" v-for="(item, index) in companyList" :key="index" />
+              </el-select>
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="8">
+            <ElFormItem label="特约名称">
+              <el-input v-model="formInline.clauseName" placeholder="输入特约名称查找" clearable class="el-inputs" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="8">
+            <ElFormItem label="特约内容">
+              <el-input v-model="formInline.clauseContent" placeholder="输入特约内容查找" clearable class="el-inputs" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="8">
+            <ElFormItem label="编码">
+              <el-input v-model="formInline.clauseCode" placeholder="输入特约编码查找" clearable class="el-inputs" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="8">
+            <ElFormItem label="特约类型">
+              <el-select v-model="formInline.riskCode" placeholder="请选择特约类型" style="width: 100%;">
+                <el-option :label="item.label" :value="item.value" v-for="(item, index) in getDict('risk_code')"
+                  :key="index" />
+                <el-option label="商业险" value="商业险" />
+              </el-select>
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="8">
+            <div class="flex a-c j-end" style="width: 100%;">
+              <el-button type="primary" @click="findpage">查询</el-button>
+              <el-button type="default" @click="reset">重置</el-button>
+            </div>
+          </ElCol>
+        </ElRow>
+      </ElForm>
+      <ElDivider border-style="dashed"></ElDivider>
+      <Table :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
+        :pageInfo="pageInfo" @getList="getList" @selectionChange="selectionChange">
+        <template v-slot:table-title-btn>
+          <RouterLink :to="{ name: 'SpecialClauseAdd' }">
+            <el-button type="primary">
+              添加特约
+              <template #icon>
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </template>
+            </el-button>
+          </RouterLink>
+
+          <el-button type="default" @click="batchDel" :disabled="!sysUpAndDownList.length">
+            批量删除
+          </el-button>
+        </template>
+        <template v-slot:operation="scope">
+          <el-button type="primary" link @click="Edit(scope.operationData.id)"> 编辑
+          </el-button>
+          <el-button type="primary" link @click="Del(scope.operationData.id)"> 删除
+          </el-button>
+        </template>
+        <template v-slot:search="scope">
+          {{ scope.slotData.label }}
+        </template>
+      </Table>
+    </PageMain>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import api from '@/api';
+import { RouterLink, useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { loadDicts, getDict } from '@/utils/composables/dictService';
+interface PageInfo {
+  pageNum: number;
+  pageSize: number;
+  sizes: number[];
+  total: number;
+}
+const router = useRouter();
+const tableData = ref([]);//列表数据
+const sysUpAndDownList = ref<string[]>([])//选中id
+const companyList = ref();
+//分页
+const pageInfo = ref({
+  pageNum: 1,
+  pageSize: 20,
+  sizes: [10, 20, 30, 40, 50],
+  total: 0,
+});
+//检索条件
+const formInline = reactive({
+  companyId: "",//保险公司code
+  clauseName: "",//特约名称
+  riskCode: "",//特约类型
+  clauseCode: "",//特约编码
+  clauseContent: "",//特约内容
+})
+onMounted(() => {
+  findpage();
+  companyQuery();//获取保险公司
+  loadDicts(['qr_barcode', 'api_type', 'risk_code']);//获取多个字典
+});
+function findpage() {
+  api.product.getClausePage({ 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', width: '180' },
+  {
+    prop: "riskCode", label: "特约类型", width: '150', formatter: (row: any) => {
+      let riskCode = row.riskCode;
+      let riskCodeName = getDict('risk_code').find(val => val.value == riskCode).label;
+      return riskCodeName
+    }
+  },
+  { prop: "clauseName", label: "特约名称", align: 'left' },
+  { prop: "clauseCode", label: "编码", width: '220' },
+  { prop: "clauseContent", label: "特别约定内容", width: '480', },
+];
+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 selectionChange = (val: any) => {
+  sysUpAndDownList.value = val;
+}
+const Edit = (id: string) => {
+  router.push({
+    name: 'SpecialClauseAdd',
+    query: {
+      id: id
+    }
+  })
+}
+const batchDel = () => {
+  ElMessageBox.confirm(
+    '是否删除特约？',
+    '特约删除',
+    {
+      confirmButtonText: '确定删除',
+      type: 'error',
+      center: true,
+      confirmButtonClass: 'el-button--danger',
+    }
+  )
+    .then(() => {
+      api.product.deleteClause([...sysUpAndDownList.value]).then((res: any) => {
+        if (res.code == '200') {
+          ElMessage({
+            type: 'success',
+            message: res.msg,
+            plain: true,
+          })
+          findpage();
+        } else {
+        }
+      });
+    })
+    .catch(() => {
+    })
+}
+// 删除
+const Del = (id: string) => {
+  ElMessageBox.confirm(
+    '是否删除特约？',
+    '特约删除',
+    {
+      confirmButtonText: '确定删除',
+      type: 'error',
+      center: true,
+      confirmButtonClass: 'el-button--danger',
+    }
+  )
+    .then(() => {
+      api.product.deleteClause([id]).then((res: any) => {
+        if (res.code == '200') {
+          ElMessage({
+            type: 'success',
+            message: res.msg,
+            plain: true,
+          })
+          findpage();
+        } else {
+        }
+      });
+    })
+    .catch(() => {
+    })
+
+}
+const reset = () => {
+
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 8px 0 24px;
+  color: #f2f2f2;
+}
+
+.el-inputs {
+  width: 100% !important;
+}
+</style>