tenant-Platform/src/views/quoteConfig/project/modules/projectAdd.vue

<template>
  <div class="projectAdd">
    <el-form :model="projectAddFrom" :rules="projectAddRules" ref="ProjectAddRef">
      <el-descriptions title="基本信息">
        <el-descriptions-item>
          <el-form-item label="保险公司" prop="companyId">
            <el-select :disabled="isEdit" v-model="projectAddFrom.companyId" placeholder="请选择" style="width: 40%" @change="initProduct">
              <el-option v-for="item in companyOption" :key="item.id" :value="item.id" :label="item.nameSimple"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方案类型" prop="schemeType">
            <el-radio-group :disabled="isEdit" v-model="projectAddFrom.schemeType" @change="schemeTypeChange">
              <el-radio :value="1">基础方案</el-radio>
              <el-radio :value="2">自选方案</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="险种类型" prop="productId">
            <el-radio-group :disabled="isEdit" v-model="projectAddFrom.productId" @change="initProduct">
              <el-radio-button v-for="item in insuranceType" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <div style="display: flex;">
            <span style="width: 10%"><a style="color: red">*</a>规则条件</span>
<!--            <div class="ruleList">
              <div class="ruleItem">
                <el-input placeholder="请填写" style="width: 300px"></el-input>&nbsp;
                <el-select style="width: 100px">
                  <el-option key="1" value="1" label="="></el-option>
                  <el-option key="2" value="2" label=">"></el-option>
                  <el-option key="3" value="3" label="<"></el-option>
                </el-select>&nbsp;
                <el-input placeholder="请填写" style="width: 300px"></el-input>&nbsp;
                <el-icon><CircleCloseFilled /></el-icon>&nbsp;
              </div>
            </div>-->
            <div style="width: 60%">
              <rule-condition-container :rulesAttrList="rulesAttrList"></rule-condition-container>
            </div>
            <rule-condition :ruleConditionVisible="rulesShow" :attrIdList="rulesAttrList" @save="saveRule"></rule-condition>
          </div>
          <el-button style="margin: 10px 10%" plain type="primary" icon="plus" @click="addRules">添加条件</el-button>
          <el-descriptions>
            <template #title>
              <div style="display: flex; align-items: center">
                <span>方案配置</span>
                <el-button v-show="!isEdit" type="primary" icon="plus" style="margin-left: 20px;" @click="addProject">添加新方案</el-button>
              </div>
            </template>
            <el-descriptions-item>
              <div class="configuration" v-for="(item, index) in projectAddFrom.schemeList">
                <el-form-item label="方案名称" prop="schemeName">
                  <el-input v-model="item.schemeName"></el-input>
                </el-form-item>
                <el-form-item label="方案描述" prop="description">
                  <el-input type="textarea" v-model="item.description" maxlength="500"></el-input>
                </el-form-item>
                <div>
                  <div style="display: flex; align-items: center; margin-bottom: 10px">
                    <span style="margin-right: 20px">驾意险</span>
                    <el-button link icon="plus" type="primary" @click="handleDriving(item, index)">选择驾意险</el-button>
                  </div>
                  <el-table
                    :data="item.drivingList"
                  >
                    <el-table-column label="名称" prop="productName">
                      <template #default="scope">
                        <a>{{ scope.row.productName }}</a>
                      </template>
                    </el-table-column>
                    <el-table-column label="客户端状态" prop="selectedStatus">
                      <template #default="scope">
                        <el-select v-model="scope.row.selectedStatus">
                          <el-option label="默认不选中" key="1" value="1"></el-option>
                          <el-option label="默认选中" key="2" value="2"></el-option>
                          <el-option label="强制选中" key="3" value="3"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="份数" prop="quantity">
                      <template #default="scope">
                        <el-input v-model="scope.row.quantity" style="width: 100px;"></el-input>份
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <el-button link type="primary" @click="drivingTypeDel(item, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div>
                  <div style="display: flex; align-items: center; margin: 10px 0">
                    <span style="margin-right: 20px">险种</span>
                    <el-button link icon="plus" type="primary" @click="handlePopover(item, index)">选择险种</el-button>
<!--                    <el-popover placement="bottom-end" trigger="click" width="500" v-model:visible="insuranceShow" @show="handlePopover(item)">
                      <template #reference>
                        <el-button link icon="plus" type="primary">选择险种</el-button>
                      </template>

                    </el-popover>-->
                  </div>
                  <el-table
                    :data="item.tableData"
                  >
                    <el-table-column label="险种" prop="kindName">
                      <template #default="scope">
                        <a>{{ scope.row.kindName }}</a>
                      </template>
                    </el-table-column>
                    <el-table-column label="保额" prop="optionId">
                      <template #default="scope">
                        <el-select v-if="projectAddFrom.schemeType === 2" v-model="scope.row.moneyId" style="width: 150px" multiple>
                          <el-option v-for="m in scope.row.options" :label="m.label" :key="m.id" :value="m.id"></el-option>
                        </el-select>
                        <el-select v-else v-model="scope.row.moneyId" style="width: 150px" @change="">
                          <el-option v-for="m in scope.row.options" :label="m.label" :key="m.id" :value="m.id"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <el-button link type="primary" @click="insuranceTypeDel(item, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="btns">
      <el-button plain @click="quit">取消</el-button>
      <el-button type="primary" @click="save(ProjectAddRef)">保存</el-button>
    </div>
    <el-dialog
      v-model="drivingShow"
      title="选择驾意险"
      width="700"
    >
      <driving ref="DrivingTypeRef" @close="handleDrivingClose"></driving>
    </el-dialog>
    <el-dialog
      v-model="insuranceShow"
      title="选择险种"
      width="500"
    >
      <insurance ref="InsuranceTypeRef" @close="handleClose" ></insurance>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import api from "@/api";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from 'vue-router'
import insurance from '../../../../layouts/components/InsuranceType/index.vue'
import driving from '../../../../layouts/components/DrivingType/index.vue'
import rule from '../../../../components/ruleConditionContainer/index.vue'

const myRouter = useRouter()
const myRoute = useRoute()
const ProjectAddRef = ref<FormInstance>()
const InsuranceTypeRef = ref(null)
const DrivingTypeRef = ref(null)

// 是否编辑
let isEdit = ref(false)
let projectAddFrom = ref({
  ruleAttrs: [],
  schemeList: [{
    schemeName: '',
    description: '',
    tableData: [],
    drivingList: [],
    schemeInsuranceList: [],
    drivingIntentionList: []
  }]
})
let projectAddRules = ref<FormRules>({
  companyId: [
    { required: true, trigger: "change", message: "请选择保险公司" }
  ],
  schemeType: [
    { required: true, trigger: "change", message: "请选择方案类型" }
  ],
  productId: [
    { required: true, trigger: "change", message: "请选择险种类型" }
  ]
})

// 新增的时候初始化已有的方案
const initProduct = () => {
  api.projectApi.getSchemeByCompany({
    companyId: projectAddFrom.value.companyId,
    productId: projectAddFrom.value.productId,
    schemeType: projectAddFrom.value.schemeType
  }).then(res => {
    if(res.code == 200) {
      if(res.data && res.data.schemeList.length > 0) {
        res.data.schemeList.forEach(item => {
          item.drivingList = item.drivingIntentionList
          item.tableData = item.schemeInsuranceList.map(sub => {
            let obj = insuranceTypeList.value.find(a => a.id === sub.insuranceId)
            return {
              ...sub,
              optionId: res.data.schemeType===1?`${sub.optionId[0]}`:sub.optionId,
              moneyId: res.data.schemeType===1?`${sub.optionId[0]}`:sub.optionId,
              options: obj.options
            }
          })
        })
        projectAddFrom.value = res.data
        rulesAttrList.value = res.data.ruleAttrs
      }
    } else {
      projectAddFrom.value.ruleAttrs = []
      projectAddFrom.value.schemeList  = [{
        schemeName: '',
        description: '',
        tableData: [],
        drivingList: [],
        schemeInsuranceList: [],
        drivingIntentionList: []
      }]
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 险种
let insuranceTypeList = ref([])
const initInsurance = () => {
  api.projectApi.getBusinessInsurance().then(res => {
    if(res.code == 200) {
      // res.data.forEach(item => {
      //   item.options.forEach(sub => {
      //     sub.id = sub.value
      //   })
      // })
      insuranceTypeList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 方案类型切换
const schemeTypeChange = (e) => {
  projectAddFrom.value.ruleAttrs = []
  projectAddFrom.value.schemeList  = [{
    schemeName: '',
    description: '',
    tableData: [],
    drivingList: [],
    schemeInsuranceList: [],
    drivingIntentionList: []
  }]
  initProduct()
  // rulesAttrList.value = defaultAttrList.value
}

// 保险公司
let companyOption = ref([])
const initCompany = () => {
  api.projectApi.getCompanyList().then(res => {
    if(res.code == 200) {
      companyOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 新增方案
const addProject = () => {
  projectAddFrom.value.schemeList.push({
    schemeName: '',
    description: '',
    tableData: [],
    drivingList: [],
    schemeInsuranceList: [],
    drivingIntentionList: []
  })
}

// 规则
let rulesShow = ref(false)
const addRules = () => {
  rulesShow.value = true
}
let rulesAttrList = ref([])
let defaultAttrList = ref([])
const saveRule = (data) => {
  if(data && data.length > 0) {
    rulesAttrList.value = data
  }
  rulesShow.value = false
}

// 险种类型
let insuranceType = ref([])
const initType = () => {
  api.commonApi.personInfo('insurance_type').then(res => {
    if(res.code == 200) {
      insuranceType.value = res.data
      projectAddFrom.value.productId = insuranceType.value[0].value
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 险种
let insuranceShow = ref(false)
// let insuranceList = ref([])
// let checkInsuranceList = ref([])
// let checkSubInsuranceList = ref([])
const handleClose = ( obj ) => {
  if(obj.list && obj.list.length > 0) {
    if(projectAddFrom.value.schemeType === 2) {
      obj.list.forEach(a => {
        a.optionId = []
        a.options.forEach(b => {
          if(b.checked) {
            a.optionId.push(b.id)
          }
        })
        a.moneyId = a.optionId
      })
    } else {
      obj.list.forEach(a => {
        a.optionId = a.options.find(b => b.checked)?.id
        a.moneyId = a.optionId
      })
    }
    projectAddFrom.value.schemeList[obj.index].tableData = obj.list
  }
  insuranceShow.value = false
}

// 险种删除
const insuranceTypeDel = (item, row) => {
  let data = item.tableData.filter(a => a.id != row.id)
  item.tableData = [...data]
}

// 驾意险
let drivingShow = ref(false)
const handleDriving = (item, index) => {
  drivingShow.value = true
  nextTick(() => {
    DrivingTypeRef.value.initEditData(item.drivingList, index)
  })
}
const handleDrivingClose = ( obj ) => {
  if(obj.list && obj.list.length > 0) {
    let selectList = obj.list.filter(a => a.checked)
    selectList.forEach(sub => {
      sub.drivingIntentionId = sub.drivingIntentionId
      sub.selectedStatus = sub.selectedStatus?sub.selectedStatus:'1'
      sub.quantity = sub.quantity?sub.quantity:'1'
    })
    projectAddFrom.value.schemeList[obj.index].drivingList = selectList
  }
  drivingShow.value = false
}
const drivingTypeDel = (item, row) => {
  let data = item.drivingList.filter(a => a.id != row.id)
  item.drivingList = [...data]
}

const handlePopover = (item, index) => {
  insuranceShow.value = true
  nextTick(() => {
    InsuranceTypeRef.value.initEditData(item.tableData, index, projectAddFrom.value.schemeType)
  })
}

// 规则
const initAttr = () => {
  api.agreementApi.ruleAttrGroup({ attrName: '' }).then(res => {
    if(res.code == 200) {
      let list = res.data?.VehicleInformation?.filter(e => e.attrName === '能源类型' || e.attrName === '使用性质' || e.attrName === '车辆类型')
      rulesAttrList.value = [...list]
      defaultAttrList.value = [...list]
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 编辑
const initEdit = () => {
  api.projectApi.getScheme(myRoute.query.id).then(res => {
    if(res.code == 200) {
      if(res.data && res.data.schemeList.length > 0) {
        res.data.schemeList.forEach(item => {
          item.drivingList = item.drivingIntentionList
          item.tableData = item.schemeInsuranceList.map(sub => {
            let obj = insuranceTypeList.value.find(a => a.id === sub.insuranceId)
            return {
              ...sub,
              optionId: res.data.schemeType===1?`${sub.optionId[0]}`:sub.optionId,
              moneyId: res.data.schemeType===1?`${sub.optionId[0]}`:sub.optionId,
              options: obj.options
            }
          })
        })
        projectAddFrom.value = res.data
        rulesAttrList.value = res.data.ruleAttrs
      }
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 取消
const quit = () => {
  myRouter.push({
    path: '/quoteConfig/agreement/project'
  })
}
// 保存
const save = async (ProjectAddRef: FormInstance | undefined) => {
  if(!ProjectAddRef) {
    ProjectAddRef.resetFields()
    return
  }
  await ProjectAddRef.validate((valid) => {
    if(valid) {
      let formData = {...projectAddFrom.value}
      formData.ruleAttrs = [...rulesAttrList.value]
      formData.schemeList.forEach(item => {
        item.drivingIntentionList = []
        item.schemeInsuranceList = []
        item.drivingList.forEach(sub => {
          let obj = {
            id: sub.id,
            drivingIntentionId: sub.drivingIntentionId,
            selectedStatus: sub.selectedStatus,
            quantity: sub.quantity
          }
          item.drivingIntentionList.push(obj)
        })
        item.tableData.forEach(ins => {
          let obj = {
            id: ins.id,
            insuranceId: ins.insuranceId,
            optionId: projectAddFrom.value.schemeType === 1?[ins.moneyId]:projectAddFrom.value.schemeType === 2?ins.moneyId:[]
          }
          // ins.options.forEach(sub => {
          //   if(sub.checked) {
          //     obj.optionId.push(sub.id)
          //   }
          // })
          item.schemeInsuranceList.push(obj)
        })
      })
      api.projectApi.saveScheme({...formData}).then(res => {
        if(res.code == 200) {
          ElMessage({
            message: res.msg,
            type: 'success'
          })
          myRouter.push({
            path: '/quoteConfig/agreement/project'
          })
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    } else {
      ElMessage({
        message: '请正确填写相关信息！',
        type: 'warning'
      })
    }
  })
}

onMounted(() => {
  initInsurance()
  initType()
  initCompany()
  // initAttr()
  if(myRoute.query.id) {
    isEdit.value = true
    initEdit()
  } else {
    isEdit.value = false
    initAttr()
  }
  // initInsurance()
})

</script>

<style scoped lang="scss">
.projectAdd{
  width: 100%;
  height: 100%;
  background: white;
  padding: 20px;
  .ruleList{
    width: 90%;
    .ruleItem{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 10px 0;
    }
  }
  .configuration{
    width: 100%;
    background: #f0f0f0;
    padding: 20px 100px;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .btns{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>