operation-Backend/src/views/productConfiguration/drivingInsurance/drivingInsuranceAdd.vue

<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="productform" label-width="120px" :rules="productformRules" label-position="top"
          ref="productFormRef" style="max-width: 1000px;" class="flex a-c f-wrap" :size="fromSize">
          <ElCol :md="24" :lg="12">
            <el-form-item label="产品类型" prop="productType">
              <el-select v-model="productform.productType" :disabled="productType == '2' || type == 'edit'"
                @change="productTypeChange" placeholder="请选择产品类型" clearable filterable>
                <el-option label="主险" value="1" />
                <el-option label="附加险" value="2" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12" v-if="productform.productType != '1'">
            <el-form-item label="上级产品" prop="parentId">
              <el-select v-model="productform.parentId" :disabled="productType == '2' || type == 'edit'"
                placeholder="请选择产品" clearable>
                <el-option v-for="(item, index) in parentList" :key="index" :label="item.productName"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="productform.productName" placeholder="输入产品名称" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="别名">
              <el-input v-model="productform.alias" placeholder="输入产品别名" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="保险公司" prop="company">
              <el-input v-model="productform.companyName" placeholder="保险公司" disabled />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="产品编码" prop="productCode">
              <el-input v-model="productform.productCode" placeholder="点击查询，获取产品编码" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="对接方式" prop="connectionMethod">
              <el-select v-model="productform.connectionMethod" placeholder="请选择产品" clearable filterable>
                <el-option label="API对接" value="1" />
                <el-option label="Python对接" value="2" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="保费设置" prop="premiumSetting">
              <el-select v-model="productform.premiumSetting" placeholder="请选择" clearable filterable>
                <el-option label="产品统一价格" value="1" />
                <el-option label="按座位数设置价格" value="2" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12" v-if="productform.premiumSetting == '1'">
            <el-form-item label="总保额" prop="coverage">
              <el-input v-model="productform.coverage" placeholder="请输入总保额">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12" v-if="productform.premiumSetting == '1'">
            <el-form-item label="总保费" prop="premium">
              <el-input v-model="productform.premium" placeholder="请输入总保费">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </ElCol>
        </el-form>
        <ElCol :md="24" :lg="24" v-if="productform.premiumSetting == '2'">
          <ElDivider style="margin: 10px 0;"></ElDivider>
          <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
            <span class="strong">保费设置</span>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-table :data="productform.settingList" style="width: 100%;">
              <el-table-column prop="seats" label="座位数" width="180">
                <template #default="scope">
                  <el-input-number v-model="scope.row.seats" controls-position="right" style="width: 100%;" :min="5"
                    :max="10">
                    <template #suffix>
                      <span>座</span>
                    </template>
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="coverage" label="保额" width="180">
                <template #default="scope">
                  <el-input-number v-model="scope.row.coverage" :precision="2" controls-position="right"
                    style="width: 100%;" :min="1" :max="9000000">
                    <template #suffix>
                      <span>元</span>
                    </template>
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="premium" label="保费">
                <template #default="scope">
                  <el-input-number v-model="scope.row.premium" :precision="2" controls-position="right"
                    style="width: 100%;" :min="1" :max="9000000">
                    <template #suffix>
                      <span>元</span>
                    </template>
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" link @click="settingDel(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <ElButton type="primary" style="margin-top: 10px;" @click="settingListAdd">
              <template #icon>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
              添加一条
            </ElButton>
          </ElCol>
        </ElCol>
        <ElCol :md="24" :lg="24">
          <ElDivider style="margin: 10px 0;"></ElDivider>
          <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
            <span class="strong">保险责任</span>
          </ElCol>
          <el-table :data="productform.blameList" style="width: 100%;">
            <el-table-column prop="blame" label="保险责任"></el-table-column>
            <el-table-column prop="blameCode" label="保险责任编码" width="180" align="center"></el-table-column>
            <el-table-column prop="blameCoverage" label="保险责任保额" width="180" align="center"></el-table-column>
            <el-table-column prop="blamePremium" label="保险责任保费" width="180" align="center"></el-table-column>
            <el-table-column label="操作" width="280" align="center">
              <template #default="scope">
                <el-button type="primary" link @click="blameDel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <ElButton type="primary" style="margin-top: 10px;" @click="blameListAdd">
            <template #icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
            添加一条
          </ElButton>
        </ElCol>
      </ElRow>
    </PageMain>
    <FixedActionBar>
      <ElButton @click='router.back()'>
        取消
      </ElButton>
      <ElButton type="primary" @click="submitForm(productFormRef)">
        保存
      </ElButton>
      <ElButton type="primary" @click="submitForm1(productFormRef)">
        保存并继续添加
      </ElButton>
    </FixedActionBar>
    <el-dialog v-model="blamedialogVisible" title="添加驾意险责任" width="50%">
      <ElRow :gutter="20">
        <el-form :model="blameFrom" :inline="true" label-width="120px" :rules="blameFromrules" label-position="top"
          ref="blameFormRef" style="width: 100%;" :size="fromSize">
          <ElCol :md="24" :lg="12">
            <el-form-item label="保险责任" prop="blame">
              <el-input v-model="blameFrom.blame" placeholder="请输入保险责任" show-word-limit maxlength="50" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="责任编码" prop="blameCode">
              <el-input v-model="blameFrom.blameCode" placeholder="请输入责任编码" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="总保额" prop="blameCoverage">
              <el-input-number v-model="blameFrom.blameCoverage" :precision="2" controls-position="right"
                style="width: 100%;" :min="1" :max="9000000">
                <template #suffix>
                  <span>元</span>
                </template>
              </el-input-number>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="总保费" prop="blamePremium">
              <el-input-number v-model="blameFrom.blamePremium" :precision="2" controls-position="right"
                style="width: 100%;" :min="1" :max="9000000">
                <template #suffix>
                  <span>元</span>
                </template>
              </el-input-number>
            </el-form-item>
          </ElCol>
        </el-form>
      </ElRow>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="blamedialogVisible = false">取消</el-button>
          <el-button type="primary" @click="blamesbimit(blameFormRef)">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormRules, FormInstance, ComponentSize, ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import api from '@/api';
import router from '@/router';
import * as Types from '@/api/types/productTypes';
const route = useRoute();
const companyId = ref(route.query.companyID as string)//保险公司ID
const companyName = ref(route.query.companyName as string)//保险公司名称
const id = ref(route.query.id as string)//id标识
const type = ref(route.query.type as string)//id标识
const productType = ref(route.query.productType as string)
// const dictLists = ref<{ [key: string]: any[] }>({});
const parentList = ref<parentList>();
const productFormRef = ref<FormInstance>()
const blameFormRef = ref<FormInstance>()
const fromSize = ref<ComponentSize>('default')
const blamedialogVisible = ref(false);
const productform = reactive<Types.jyxConfigRequest>({
  id: "",
  productType: "",//产品类型
  parentId: "",//上级产品
  productName: "",//产品名称
  alias: '',//别名
  company: "",//保险公司
  companyName: "",
  productCode: "",//产品编码
  connectionMethod: "",//对接方式
  premiumSetting: "",//保费设置
  coverage: "",//总保额
  premium: "",//总保费
  settingList: [],
  blameList: [],

})
const blameFrom = reactive({//保险责任表单弹窗
  blame: "",
  blameCode: '',
  blameCoverage: 0,
  blamePremium: 0,
})
interface parentList {
  productName: string,
  id: string,
  [property: string]: any
}
const blameFromrules = ref<FormRules>({
  blame: [
    { required: true, trigger: 'blur', message: '请输入保险责任名称' },
    { max: 50, message: '限制50个字符', trigger: 'blur' },

  ],
  blameCode: [
    { required: true, trigger: 'blur', message: '请输入产品编码' },
  ],
  blameCoverage: [
    { required: true, trigger: 'blur', message: '请输入总保额' },
  ],
  blamePremium: [
    { required: true, trigger: 'blur', message: '请输入总保费' },
  ],

});
const productformRules = ref<FormRules>({
  productType: [
    { required: true, trigger: 'change', message: '请选择产品类型' },
  ],
  parentId: [
    { required: true, trigger: 'change', message: '请选择上级产品' },
  ],
  productName: [
    { required: true, trigger: 'blur', message: '请输入产品名称' },
  ],
  company: [
    { required: true, trigger: 'change', message: '请选择保险公司' },
  ],
  productCode: [
    { required: true, trigger: 'blur', message: '请输入产品编码' },
  ],
  connectionMethod: [
    { required: true, trigger: 'change', message: '请选择对接方式' },
  ],
  premiumSetting: [
    { required: true, trigger: 'change', message: '请选择保费设置' },
  ],
  coverage: [
    { required: true, trigger: 'blur', message: '请输入总保额' },
  ],
  premium: [
    { required: true, trigger: 'blur', message: '请输入总保费' },
  ],
});

onBeforeMount(() => {
  if (companyId.value) {
    productform.company = companyId.value;
    productform.companyName = companyName.value;
  }
  if (productType.value) {
    productform.productType = productType.value;
    productform.parentId = id.value;
    selectMainIns();
  }
  if (id.value && type.value == 'edit') {
    detalis(id.value);
  }

});
const settingListAdd = () => {
  productform.settingList.push({
    seats: 0,
    coverage: 0,
    premium: 0,
  })
}
const settingDel = (index: any) => {
  productform.settingList.splice(index, 1);
}
const blameListAdd = () => {
  blamedialogVisible.value = true;

}
const blameDel = (index: any) => {
  productform.blameList.splice(index, 1);

}
//类型事件
const productTypeChange = (value: any) => {
  if (value == 2) {
    selectMainIns();
  }
}
//查询主险
const selectMainIns = () => {
  api.product.selectMainInsurance(companyId.value).then((res: any) => {
    if (res.code == '200') {
      parentList.value = res.data;
    } else {
    }
  });
}
const detalis = (id: string) => {
  api.product.jygetById(id).then((res: any) => {
    if (res.code == '200') {
      selectMainIns();
      Object.keys(productform).forEach((key) => {
        if (res.data.hasOwnProperty(key)) {
          productform[key as keyof typeof productform] = res.data[key as keyof typeof productform];
        }
      });
      if (Array.isArray(res.data.settingList)) {
        productform.settingList = res.data.settingList.map((item: any) => ({
          seats: item.seats,
          coverage: item.coverage,
          premium: item.premium,
        }));
      }
      if (Array.isArray(res.data.blameList)) {
        productform.blameList = res.data.blameList.map((item: any) => ({
          blame: item.blame,
          blameCode: item.blameCode,
          blameCoverage: item.blameCoverage,
          blamePremium: item.blamePremium,
        }));
      }
    } else {
    }
  });
}
//字典信息处理
// 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 submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (id.value && type.value == 'edit') {
        api.product.jyxupdateById(productform).then((res: any) => {
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            router.back()

          }
        })
      } else {
        api.product.jyxConfigAdd(productform).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) {
      if (id.value && type.value == 'edit') {
        api.product.jyxupdateById(productform).then((res: any) => {
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            router.push({
              name: 'reload',
            })
          }
        })
      } else {
        api.product.jyxConfigAdd(productform).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,
      })
    }
  })
}

const blamesbimit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      productform.blameList.push({ ...blameFrom })
      blamedialogVisible.value = false;
    } else {
      ElMessage({
        type: 'error',
        message: '信息不完整',
        plain: true,
      })
    }
  })
}
</script>