mrshi

MrShi

2024-03-08 d2bc6e096f0806b78ea92d4b90a21d3627d406c7

 company/src/components/enterprise/OperaInsuranceApplyWindow.vue

@@ -2,102 +2,144 @@
    <GlobalWindow
        :title="title"
        width="100%"
        :withFooter="false"
        text="投保申请"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <div class="list">
            <el-form :inline="true" :model="form" :rules="rules" class="demo-form-inline">
            <el-form :inline="true" ref="form" :model="form" :rules="rules" class="demo-form-inline">
                <el-form-item label="保险方案" prop="solutionId">
                    <el-select v-model="form.solutionId" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    <el-select v-model="form.solutionId" @change="changeSolution" placeholder="请选择">
                        <el-option
                            v-for="item in company"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="期望保险生效起期" prop="applyStartTime">
                    <div style="display: flex; flex-direction: column;">
                        <el-date-picker
                                v-model="form.applyStartTime"
                                type="date"
                                placeholder="选择日期">
                            @change="getTimeVal"
                            v-model="form.applyStartTime"
                            type="date"
                            class="date_picker"
                            :clearable="false"
                            :disabled="!form.solutionId"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                        <span style="color: #F95601; font-size: 14px;">（次日生效投保请于17:30前提交，超时提交以保险单为准）</span>
                    </div>
                </el-form-item>
                <el-form-item label="保险生效止期" prop="applyEndTime">
                    <el-date-picker
                        disabled
                        v-model="form.applyEndTime"
                        type="date"
                        class="date_picker"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="投保年龄">
                    <span>25至65</span>
                <el-form-item label="投保年龄" v-if="item">
                    <span>{{item.minAge}} 至 {{item.maxAge}}</span>
                </el-form-item>
                <el-form-item label="费用">
                    <span>200元/年/人</span>
                <el-form-item label="费用" v-if="item">
                    <span>{{item.price}}元</span>
                    <span v-if="item.timeUnit === 0">/天</span>
                    <span v-if="item.timeUnit === 1">/半月</span>
                    <span v-if="item.timeUnit === 2">/月</span>
                    <span v-if="item.timeUnit === 3">/年</span>
                    <span>/人</span>
                </el-form-item>
            </el-form>
        </div>
        <div class="btns">
            <div class="btns_item">
                <el-button type="primary" @click="$refs.selectEmployees.open('选取员工')">选取员工</el-button>
                <el-button type="primary">导入员工</el-button>
                <el-button type="primary" @click="$refs.addEmployee.open('添加员工', tableData)">添加员工</el-button>
                <el-button type="primary" @click="seleUser">选取员工</el-button>
                <el-button type="primary" @click="uploadUser">导入员工</el-button>
                <el-button type="primary" @click="addUser">添加员工</el-button>
                <el-button type="danger" @click="deleItem">删除</el-button>
            </div>
            <div class="btns_item">
                <el-button type="primary">选取派遣单位</el-button>
                <el-button type="primary" @click="sele">选取派遣单位</el-button>
            </div>
        </div>
        <el-table
            :data="tableData"
            border
            show-summary
            :summary-method="getSummaries"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            style="width: 100%;margin-bottom: 15px;">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column label="序号" width="80px">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                prop="memberName"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="idcardNo"
                prop="idCard"
                label="身份证号">
            </el-table-column>
            <el-table-column
                prop="address"
                label="年龄">
                <template slot-scope="{row}">
                    <template v-if="item">
                        <span style="color: red;" v-if="row.idCard && (getAgeByIdCard(row.idCard) < item.minAge || getAgeByIdCard(row.idCard) > item.maxAge)">{{ getAgeByIdCard(row.idCard) }}</span>
                        <span v-else>{{ getAgeByIdCard(row.idCard) }}</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                prop="duName"
                label="派遣单位">
            </el-table-column>
            <el-table-column
                prop="address"
                prop="workTypeName"
                label="所属工种">
            </el-table-column>
            <el-table-column
                prop="address"
                prop="fee"
                label="费用">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" style="color: red;" @click="dele(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="submit">
            <el-button type="primary">投保申请</el-button>
        </div>
        <div class="info">
            富文本
        <div class="info" v-if="item">
            <span v-if="item.specialAgreement">{{item.specialAgreement}}</span>
            <span v-if="item.specialInfo">{{item.specialInfo}}</span>
            <span v-if="item.ortherInfo">{{item.ortherInfo}}</span>
        </div>
        <!--    选择员工    -->
        <selectEmployees ref="selectEmployees" />
        <selectEmployees ref="selectEmployees" @result="getValue" />
        <!--    添加员工    -->
        <addEmployee ref="addEmployee" @result="getValue" />
        <!--    导入名单    -->
        <importEmployees ref="importEmployees" @result="getValue" />
        <!--    确认工种    -->
        <confirmJobType ref="confirmJobType" @result="getUser" />
        <!--    查看详单    -->
        <detailsPolicyholder ref="detailsPolicyholder" @success="successEvent" />
    </GlobalWindow>
</template>

@@ -106,18 +148,32 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import selectEmployees from '@/components/enterprise/selectEmployees'
import addEmployee from '@/components/enterprise/addEmployee'
import importEmployees from '@/components/enterprise/importEmployees'
import confirmJobType from '@/components/enterprise/confirmJobType'
import detailsPolicyholder from '@/components/business/detailsPolicyholder'
import { all, getNewVersion } from '@/api/business/solutions'
import { mapState } from 'vuex'
import { create, getCountCyclePriceVO, getDetail, findList, updateData } from '@/api/business/insuranceApply'
export default {
  name: 'OperaInsuranceApplyWindow',
  name: 'OperaInsuranceApplyWindow2',
  extends: BaseOpera,
  components: { GlobalWindow, selectEmployees, addEmployee },
  components: { GlobalWindow, selectEmployees, addEmployee, importEmployees, confirmJobType, detailsPolicyholder },
  data () {
    return {
      form: {
          id: null,
          ID: null,
          solutionId: '',
          applyStartTime: '',
          applyEndTime: ''
      },
      solutionName: '',
      type: '',
      pickerOptions: {}, // 存放picker options的变量
      price: '',
      company: [],
      seleData: [],
      item: null,
      // 验证规则
      rules: {
          solutionId: [
@@ -136,13 +192,346 @@
          'field.id': 'id'
      })
  },
  methods: {
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      successEvent() {
          let arr = JSON.parse(JSON.stringify(this.tableData))
          arr.forEach(item => {
              item.idcardNo = item.idCard
          })
          this.isWorking = true
          // if (!this.form.id) {
              create({
                  applyDetailList: arr,
                  applyStartTime: this.form.applyStartTime,
                  applyEndTime: this.form.applyEndTime,
                  solutionId: this.form.solutionId
              }).then(() => {
                  this.visible = false
                  this.$tip.apiSuccess('操作成功')
                  this.$emit('success')
              })
                  .catch(e => {
                      this.$tip.apiFailed(e)
                  })
                  .finally(() => {
                      this.isWorking = false
                  })
          // } else {
          //     updateData({
          //         id: this.form.id,
          //         applyDetailList: arr,
          //         applyStartTime: this.form.applyStartTime,
          //         applyEndTime: this.form.applyEndTime,
          //         solutionId: this.form.solutionId
          //     }).then(() => {
          //         this.visible = false
          //         this.$tip.apiSuccess('操作成功')
          //         this.$emit('success')
          //     }).catch(e => {
          //         this.$tip.apiFailed(e)
          //     })
          //         .finally(() => {
          //             this.isWorking = false
          //         })
          // }
      },
      open (title, target) {
          this.title = title
          this.tableData = []
          this.form.id = null
          this.item = null
          if (target.type) {
              this.type = target.type
          }
          this.form.solutionId = ''
          this.form.applyStartTime = ''
          this.form.applyEndTime = ''
          if (target && target.id) {
              this.$nextTick(() => {
                  this.$refs.form.resetFields()
                  this.form.id = target.id
                  this.getDetails()
              })
          } else {
              this.$nextTick(() => {
                  this.$refs.form.resetFields()
                  this.form[this.configData['field.id']] = null
              })
          }
          this.getCompany()
          this.visible = true
          this.updatePickerOptions()
      },
        // 获取投保详情
        getDetails() {
            findList({ applyId: this.form.id })
                .then(res => {
                    res.forEach(item => {
                        console.log(item)
                        item.idCard = item.idcardNo
                        item.fee = ''
                        if (this.type === 1) {
                            item.duName = ''
                            item.duId = ''
                            item.worktypeId = ''
                            item.workTypeName = ''
                        }
                    })
                    this.tableData = res
                })
            getDetail(this.form.id)
                .then(res => {
                    // this.form.solutionId = res.solutionId
                    this.changeSolution1(res.solutionId)
                })
        },
        getSummaries(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价'
                    return
                } else if (index === 7) {
                    let total = 0
                    this.tableData.forEach(item => {
                        total += item.fee
                    })
                    sums[index] = total
                    return
                }
            })
            return sums
        },
        deleItem() {
            if (this.seleData.length === 0) {
                this.$message.warning('至少选择一项内容')
                return
            }
            this.seleData.forEach(item => {
                this.tableData.forEach((row, index) => {
                    if (item === row.idCard) {
                        this.tableData.splice(index, 1)
                    }
                })
            })
        },
        confirm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.tableData.length === 0) {
                        this.$message.warning('至少添加一项员工')
                        return
                    }
                    for (let i = 0; i < this.tableData.length; i++) {
                        console.log(this.tableData[i].worktypeId)
                        console.log(this.tableData[i].duId)
                        if (!this.tableData[i].worktypeId || !this.tableData[i].duId) {
                            this.$message.warning('请完善派遣单位和工种信息')
                            return
                        }
                    }

                    let price = 0
                    this.tableData.forEach(item => {
                        price = price + item.fee
                    })
                    this.$refs.detailsPolicyholder.open('投保详情单', {
                        companyName: this.userInfo.company.name,
                        solutionName: this.item.name,
                        applyStartTime: this.form.applyStartTime,
                        applyEndTime: this.form.applyEndTime,
                        insureNum: this.tableData.length,
                        totalPrice: price,
                        detailList: this.tableData
                    })

                }
            })
        },
        // 获取结束时间和价格
        getTimeVal(time) {
            getCountCyclePriceVO({
                solutionsId: this.form.solutionId,
                startDate: time
            }).then(res => {
                this.price = res.cyclePrice
                this.form.applyEndTime = res.endDate
                this.tableData.forEach(item => {
                    item.fee = res.cyclePrice
                })
                this.$forceUpdate()
            })
        },
        getDate(n) { // n为多少天，-代表往前，+代表往后
            let date1 = new Date(),
            time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
            let date2 = new Date(date1);
            date2.setDate(date1.getDate() + n);
            let time2 = date2.getFullYear() + "-" + ("0" + (date2.getMonth() + 1)).slice(-2) + "-" + ("0" + date2.getDate()).slice(-2);
            return time2
        },
        updatePickerOptions() {
          var that = this;
            this.pickerOptions = {
                disabledDate(time) {
                    if (!that.item) return
                    if (that.item.validType === 1) {
                        // 次月
                        const currentDate = new Date();
                        currentDate.setMonth(currentDate.getMonth() + 1);
                        currentDate.setDate(1);
                        return time.getTime() <= new Date(currentDate.toLocaleString()).getTime() - 8.64e7;
                    } else if (that.item.validType === 0) {
                        // 多少日后生效
                        return time.getTime() <= new Date(that.getDate(that.item.validTypeNum - 1)).getTime();
                    }
                }
            };
        },
        seleUser() {
            if (!this.form.solutionId) {
                this.$message.warning('请先选择保险方案')
                return
            }
            this.$refs.selectEmployees.open('选取员工', { arr: this.tableData, price: this.price, type: 1 })
        },
      addUser() {
          if (!this.form.solutionId) {
              this.$message.warning('请先选择保险方案')
              return
          }
          this.$refs.addEmployee.open('添加员工', { arr: this.tableData, price: this.price })
      },
      uploadUser() {
          if (!this.form.solutionId) {
              this.$message.warning('请先选择保险方案')
              return
          }
          this.$refs.importEmployees.open('上传名单', { arr: this.tableData, solutionId: this.form.solutionId, type: 1, price: this.price })
      },
      // 切换方案
      changeSolution(e) {
          if (!this.form.id) {
              this.tableData = []
          } else {
              this.price = ''
              this.form.applyEndTime = ''
              this.form.applyStartTime = ''
              this.tableData.forEach(item => {
                  item.fee = ''
                  item.duName = ''
                  item.duId = ''
                  item.workTypeName = ''
                  item.workTypeId = ''
              })
          }
          this.company.forEach(item => {
              if (item.id === e) {
                  // this.price = item.price
                  this.item = item
                  this.updatePickerOptions()
              }
          })
          this.tableData.forEach(item => {
              item.fee = this.price
          })
      },
        // 切换方案
        changeSolution1(e) {
            getNewVersion(e)
                .then(res => {
                    this.form.solutionId = res.id
                    this.company.forEach(item => {
                        if (item.id === res.id) {
                            // this.price = item.price
                            this.item = item
                            this.updatePickerOptions()
                        }
                    })
                })
            this.tableData.forEach(item => {
                item.fee = this.price
            })
        },
      dele(index) {
          this.tableData.splice(index, 1)
      },
      getUser(obj) {
          this.seleData.forEach(id => {
              this.tableData.forEach(row => {
                   if (id === row.idCard) {
                       row.workTypeName = obj.workTypeName
                       row.worktypeId = obj.worktypeId
                       row.duName = obj.duName
                       row.duId = obj.duId
                   }
              })
          })
          this.seleData = []
          this.$refs.multipleTable.clearSelection();
      },
      // 选择员工
      sele() {
          if (!this.form.solutionId) {
              this.$message.warning('请选择保险方案')
              return
          }
          if (this.seleData.length === 0) {
              this.$message.warning('请选择员工')
              return
          }
          this.$refs.confirmJobType.open('确认工种', { solutionId: this.form.solutionId })
      },
      // 查询全部方案
      getCompany() {
          all({})
            .then(res => {
                this.company = res
            })
      },
      getAgeByIdCard(idCard){
          const sexAndAge = {}
          //获取用户身份证号码
          const userCard = idCard
          //如果用户身份证号码为undefined则返回空
          if (!userCard) {
              return sexAndAge
          }
          // 获取出生日期
          const yearBirth = userCard.substring(6, 10)
          const monthBirth = userCard.substring(10, 12)
          const dayBirth = userCard.substring(12, 14)
          // 获取当前年月日并计算年龄
          const myDate = new Date()
          const monthNow = myDate.getMonth() + 1
          const dayNow = myDate.getDate()
          let age = myDate.getFullYear() - yearBirth
          if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
              age--
          }
          // 得到年龄
          sexAndAge.age = age
          return sexAndAge.age
      },
      handleSelectionChange (e) {
          this.seleData = e.map(item => item.idCard)
      },
      getValue(list) {
          this.tableData.push(...list)
      }
  }
}
</script>

<style>
    .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
        display: none;
    }
</style>

<style lang="scss" scoped>
    .list {
@@ -168,5 +557,7 @@
    }
    .info {
        width: 100%;
        font-size: 14px;
        color: black;
    }
</style>