优化

MrShi

2025-03-26 cfdafcf22dbd868c9876d37efbd92b97ba014bef

 company/src/components/enterprise/OperaInsuranceApplyAddWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,647 @@
<template>
  <GlobalWindow
      :title="title"
      width="100%"
      text="投保申请"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
  >
    <div class="list">
      <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" @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
                @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="投保年龄" v-if="item && item.id !=null">
          <span>{{item.minAge}} è‡³ {{item.maxAge}}</span>
        </el-form-item>
        <el-form-item label="费用" v-if="item && item.id !=null">
          <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="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">
        <div style="display: inline-block;margin-right: 30px;font-size: 14px" v-if="item && item.id !=null">
          <span>投保年龄：</span>
          <span>{{item.minAge}} è‡³ {{item.maxAge}}周岁</span>
          <span style="margin-left: 20px">费用：</span>
          <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>
        </div>
        <div style="display: inline-block;margin-right: 30px;font-size: 14px"><span>合计费用：</span>
        <span style="font-weight: bold;color: red">{{sumFee}}</span>元
        </div>
        <el-button type="primary" @click="sele">选取派遣单位</el-button>
      </div>
    </div>
<!--    show-summary
    :summary-method="getSummaries"-->
    <u-table
        :data="tableData"
        border
        use-virtual
        :row-height="30"
        :height="680"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%;margin-bottom: 15px;">
      <u-table-column
          type="selection"
          width="55">
      </u-table-column>
      <u-table-column label="序号" width="80px">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </u-table-column>
      <u-table-column
          prop="memberName"
          label="姓名">
      </u-table-column>
      <u-table-column
          prop="idCard"
          label="身份证号">
      </u-table-column>
      <u-table-column
          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>
      </u-table-column>
      <u-table-column
          prop="duName"
          label="派遣单位">
      </u-table-column>
      <u-table-column
          prop="workTypeName"
          label="所属工种">
      </u-table-column>
      <u-table-column
          prop="fee"
          label="费用">
        <template slot-scope="{row}">
          {{row.fee}}
        </template>
      </u-table-column>
      <u-table-column
          prop="remark"
          align="center"
          label="备注">
        <template slot-scope="{row}">
          <el-input v-model="row.remark" placeholder="请输入"></el-input>
        </template>
      </u-table-column>
      <u-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" style="color: red;" @click="dele(scope.$index)">删除</el-button>
        </template>
      </u-table-column>
    </u-table>
    <div class="info" v-if="item">
      <span v-if="item.specialAgreement"  v-html="item.specialAgreement"></span>
      <span v-if="item.specialInfo" v-html="item.specialInfo"> </span>
      <span v-if="item.ortherInfo" v-html="item.ortherInfo"></span>
    </div>
    <!--    é€‰æ‹©å‘˜å·¥    -->
    <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" />
<!--    &lt;!&ndash;    ç›´ä¿æŠ•ä¿è¯¦æƒ…    &ndash;&gt;
    <OperaInsuranceApplyDetails ref="OperaInsuranceApplyDetails" />
    &lt;!&ndash;    å§”托投保详情    &ndash;&gt;
    <OperaWtbApplyShopWindow ref="OperaWtbApplyShopWindow" />-->
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import selectEmployees from '@/components/enterprise/selectEmployees'
import addEmployee from '@/components/enterprise/addEmployeeWithDu'
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 } from '@/api/business/insuranceApply'
import { UTable, UTableColumn } from 'umy-ui'
export default {
  name: 'OperaInsuranceApplyAddWindowNew',
  extends: BaseOpera,
  components: {
    GlobalWindow,
    selectEmployees,
    addEmployee,
    importEmployees,
    confirmJobType,
    detailsPolicyholder,
    UTable,
    UTableColumn
  },
  data () {
    return {
      sumFee: 0,
      form: {
        id: null,
        ID: null,
        solutionId: '',
        applyStartTime: '',
        applyEndTime: ''
      },
      solutionName: '',
      type: '',
      pickerOptions: {}, // å­˜æ”¾picker options的变量
      price: '',
      company: [],
      seleData: [],
      item: null,
      // éªŒè¯è§„则
      rules: {
        solutionId: [
          { required: true, message: '请选择保险方案' }
        ],
        applyStartTime: [
          { required: true, message: '请选择期望保险生效起期' }
        ]
      },
      tableData: []
    }
  },
  created () {
    this.config({
      api: '/business/insuranceApply',
      'field.id': 'id'
    })
  },
  computed: {
    ...mapState(['userInfo'])
  },
  watch: {
    // ç›‘听tableData的变化
    tableData: {
      deep: true,
      handler (newVal, oldVal) {
        // æ•°æ®å˜åŒ–时的处理逻辑
        this.getSummaries2()
        console.log(this.tableData.length)
      }
    }
  },
  methods: {
    successEvent () {
      const 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(res => {
        console.log(res)
        this.$emit('success', 1, { id: res,godetail:true,type:this.item.type})
        this.$tip.apiSuccess('操作成功')
        this.visible = false
        // this.$emit('success','委托投保详情', { id: res })
      })
        .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 = {}
      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 ({ columns, data }) {
      const sums = []
      // this.currentData = data; //记录当前页数据;
      columns.forEach((column, index) => {
        if (index == 0) {
          sums[index] = '总价'
        } else if (index == 7) {
          // if (this.item || this.item.type == 1) {
          //   sums[index] = '-'
          // } else {
          let total = 0
          this.tableData.forEach(item => {
            total += item.fee
          })
          sums[index] = total.toFixed(2)
          // }
        } else {
          sums[index] = ''
        }
      })
      console.log(sums)
      return sums
    },
    getSummaries2 () {
      this.sumFee = 0
      if (this.tableData && this.tableData.length) {
        this.tableData.forEach((column, index) => {
          this.sumFee = parseFloat(this.sumFee) + parseFloat(column.fee)
        })
        this.sumFee = (this.sumFee || 0).toFixed(2)
      }
    },
    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)
          }
        })
      })
      // this.getSummaries2()
    },
    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
          // if (this.item && this.item.type != 1) {
          this.tableData.forEach(item => {
            price = price + item.fee
          })
          // }
          this.$refs.detailsPolicyholder.open('投保详情单', {
            companyName: this.userInfo.company.name,
            solutionName: this.item.name,
            solutionType: this.item.type,
            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为多少天，-代表往前，+代表往后
      const date1 = new Date()
      const time1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate()// time1表示当前时间
      const date2 = new Date(date1)
      date2.setDate(date1.getDate() + n)
      const 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, solutionId: this.form.solutionId })
    },
    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) {
      this.sumFee = 0
      this.form.applyEndTime = ''
      this.form.applyStartTime = ''
      if (!this.form.id) {
        this.tableData = []
      } else {
        this.price = 0
        this.tableData.forEach(item => {
          item.fee = 0
          item.duName = ''
          item.duId = ''
          item.workTypeName = ''
          item.workTypeId = ''
        })
      }
      this.company.forEach(item => {
        if (item.id === e) {
          this.price = item.price
          this.item = item
          // if (this.item && this.item.type == 1) {
          //   this.item.fee = 0
          // }
          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 => {
        // if (this.item.type != 0) {
        item.fee = this.price
        // }
      })
    },
    dele (index) {
      this.tableData.splice(index, 1)
      // this.getSummaries2()
    },
    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)
      this.getSummaries2()
    }
  }
}
</script>

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

<style lang="scss" scoped>
.list {
  width: 100%;
}
.btns {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .btns_item {
    display: flex;
    align-items: center;
  }
}
.submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.info {
  width: 100%;
  font-size: 14px;
  color: black;
  span{
    display: block;
  }
}
</style>