operation-Backend/src/views/productConfiguration/specialClause/index.vue

<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>