优化

MrShi

2025-03-26 cfdafcf22dbd868c9876d37efbd92b97ba014bef

 company/src/components/business/OperaUnionChangeUnitCheckWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,508 @@
<template>
  <GlobalWindow
      :title="title"
      width="60%"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
  >
    <!--    é€€å›žæŠ•ä¿    -->
    <el-form v-if="visible1==true" :model="form" ref="form1" :rules="rules1" style="width: 100%;">
      <el-form-item label="填写退回说明：" prop="backCheckInfo">
        <el-input type="textarea" v-model="form.backCheckInfo" placeholder="请输入" v-trim/>
      </el-form-item>
    </el-form>
    <!--    ä¸Šä¼ æ‰¹å•    -->
    <el-form v-if="visible3==true" :model="form" ref="form3" :rules="rules3" style="width: 100%;">
      <el-form-item label="期望保险生效期：">
        <span >{{( form.applyTime|| '-')}} </span>
      </el-form-item>
      <el-form-item label="" >
        <el-radio-group v-model="form.selectRadio" @change="selectChange">
          <el-radio :label="0" >与保单一致</el-radio>
          <el-radio :label="1" >与保单不一致</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="保险生效起期：" prop="applyTime" v-if="form.selectRadio === 1">
        <el-date-picker
            v-model="form.applyTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="批单号：" prop="code">
        <el-input v-model="form.code" placeholder="请输入" v-trim/>
      </el-form-item>
      <el-form-item label="上传批单：" prop="baoxianFile">
        <UploadFile @remove="dele3"  :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileList="form.fileList1" @uploadSuccess="baoxianFileUploaded" />
      </el-form-item>
      <div class="box_table">
        <div class="box_table_head">
          <div class="box_table_head_item">序号</div>
          <div class="box_table_head_item">被保险人</div>
          <div v-if="model.type==0" class="box_table_head_item">加保人数</div>
          <div v-if="model.type==0" class="box_table_head_item">减保人数</div>
          <div v-if="model.type==1" class="box_table_head_item">变更人数</div>
          <div class="box_table_head_item">上传批单</div>
        </div>
        <div class="box_table_content" v-for="(item, index) in model.applyList" :key="index">
          <div class="box_table_content_item">{{index + 1}}</div>
          <div class="box_table_content_item" >{{ item.companyName }}</div>
          <div v-if="model.type==0" class="box_table_content_item">{{ item.addNum }}</div>
          <div v-if="model.type==0" class="box_table_content_item">{{ item.delNum }}</div>
          <div  v-if="model.type==1" class="box_table_content_item">{{ item.changeNum }}</div>
          <div class="box_table_content_item">
            <el-form-item label="" prop="bxdMultifileList[index]">
              <UploadFileLink   @remove="deleIndex(1,index)" :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileIndex="index" :showTips="showTips" :fileList="model.applyList[index].fileList1" @uploadSuccess="baoxianFileUploaded2" />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <template v-slot:footer>
      <el-button type="primary" @click="doSubmit">ç¡® å®š</el-button>
      <el-button @click="visible=false">取消</el-button>
    </template>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import {
  close,
  uploadBXD
} from '@/api/business/unionChange'
import UploadFile from '@/components/common/UploadFile'
import UploadFileLink from '@/components/common/UploadFileLink'

export default {
  name: 'OperaUnionChangeUnitCheckWindow',
  extends: BaseOpera,
  components: { UploadFile, GlobalWindow ,UploadFileLink},
  data () {
    return {
      // è¡¨å•æ•°æ®
      model: {},
      falg: 0,
      showTips:false,
      rules1: {
        backCheckInfo: [
          { required: true, message: '请完善信息' }
        ]
      },
      rules3: {
        code: [
          { required: true, message: '请完善信息' }
        ],
        applyDate: [
          { required: true, message: '请完善信息' }
        ],
        baoxianFile: [
          { required: true, message: '请完善信息' }
        ]
      },
      form: {
        id: null,
        backCheckInfo: '',
        applyTime: null,
        code: null,
        baoxianFile: null,
        bxdMultifileList: [],
        fileList1: [],
        selectRadio: 0
      },
      visible1: false,
      visible2: false,
      visible3: false
    }
  },
  created () {
    this.config({
      api: '/business/insuranceApply',
      'field.id': 'id'
    })
  },
  methods: {
    deleIndex (flag,index) {
      if(flag == 0){
        this.form.tbdMultifileList[index].fileurl = null
        this.form.tbdMultifileList[index].name = null
      }else  if(flag ==1){
        this.form.bxdMultifileList[index].fileurl = null
        this.form.bxdMultifileList[index].name = null
      }
    },
    dele3 () {
      this.form.baoxianFile = null
    },
    open (title, target, flag) {
      this.visible = true
      this.model = {}
      this.form = {
        id: null,
        backCheckInfo: '',
        startTime: null,
        code: null,
        baoxianFile: null,
        bxdMultifileList:[],
        fileList1: [],
        selectRadio: 0,
        applyTime:null
      }

      this.model = target
      this.form.applyTime = target.applyStartTime
      this.title = title
      this.flag = flag
      this.visible1 = false
      this.visible2 = false
      this.visible3 = false
      this.form.bxdMultifileList=[]
      if (flag == 1) {
        this.visible1 = true
      }
      if (flag == 3) {
        this.visible3 = true
        if(this.model.applyList){
          this.model.applyList.forEach(item =>{
            item.fileList1 =[]
            this.form.bxdMultifileList.push({objId:item.id,fileUrl:null,fileName:null})
          })
        }
      }
    },
    doSubmit () {
      if (this.flag == 1) {
        this.$refs.form1.validate((valid) => {
          // debugger
          if (!valid) {
            return
          }
          this.backDo()
        })
      }  else if (this.flag == 3) {
        this.$refs.form3.validate((valid) => {
          // debugger
          if (!valid) {
            return
          }
          this.uploadBaoxiandan()
        })
      }
    },
    selectChange () {
      if (this.form.selectRadio == 0) {
        this.form.applyTime = this.model.applyStartTime
      }
    },
    baoxianFileUploaded (data) {
      this.form.baoxianFile = data
    },
    baoxianFileUploaded2 (data) {
      this.form.bxdMultifileList[data.index].fileurl = data.fileurl
      this.form.bxdMultifileList[data.index].name = data.name
    },
    backDo () {
      this.$dialog.messageConfirm('确认进行该操作吗？')
          .then(() => {
            this.isWorking = true
            close({ id: this.model.id, reason: this.form.backCheckInfo })
                .then(response => {
                  this.visible = false
                  this.$emit('success')
                }).catch(err => {
              this.$tip.apiFailed(err)
            })
          })
    },
    uploadBaoxiandan () {
      this.$dialog.messageConfirm('提交后不可修改，请再次核对后确认提交！')
          .then(() => {
            this.isWorking = true
            var param ={
              id: this.model.id,
              applyDate: this.form.applyTime,
              code: this.form.code,
              fileurl: this.form.baoxianFile.fileurl,
              name: this.form.baoxianFile.name,
              applyChangeBXDList:this.form.bxdMultifileList
            }
            uploadBXD(param)
                .then(response => {
                  this.visible = false
                  this.$emit('success')
                }).catch(err => {
              this.$tip.apiFailed(err)
            })
          })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 ä¸ªæ–‡ä»¶ï¼Œæœ¬æ¬¡é€‰æ‹©äº† ${files.length} ä¸ªæ–‡ä»¶ï¼Œå…±é€‰æ‹©äº† ${files.length + fileList.length} ä¸ªæ–‡ä»¶`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    successEvent () {

    },
    handleSizeChange (val) {
      console.log(`每页 ${val} æ¡`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    onSubmit () {

    }
  }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.form {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .form_span {
    width: 100%;
    display: flex;
    align-items: start;
    flex-direction: column;
    margin-bottom: 20px;
    span {
      font-size: 14px;
      &:nth-child(1) {
        color: black;
        margin-bottom: 5px;
      }
      &:nth-child(2) {
        color: #8c939d;
      }
    }
  }
  .form_item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &:last-child {
      margin: 0 !important;
    }
    .form_item_label {
      flex-shrink: 0;
      /*width: 170px;*/
      color: black;
      font-size: 14px;
      span {
        color: red;
        font-size: 14px;
      }
    }
    .form_item_val {
      flex: 1;
      /*height: 40px;*/
      margin-left: 20px;
      textarea {
        width: 100%;
        height: 70px;
        border: 1px solid #cbcbcb;
        padding: 10px;
        outline: none;
        box-sizing: border-box;
      }
      input {
        width: 100%;
        height: 40px;
        outline: none;
        border-radius: 5px;
        border: 1px solid #cbcbcb;
        padding: 0 20px;
        box-sizing: border-box;
      }
    }
  }
}
.desc {
  width: 100%;
  .desc_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    .desc_item_label {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      span {
        font-size: 14px;
        color: black;
        margin-right: 30px;
      }
    }
    .desc_item_from {
      width: 100%;
      margin-bottom: 10px;
      .desc_item_from_page {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
        margin-top: 10px;
      }
    }
    .desc_item_cate {
      width: 100%;
      margin-bottom: 10px;
    }
    .desc_item_search {
      width: 100%;
      margin-bottom: 20px;
    }
    .desc_item_review {
      width: 100%;
      .desc_item_review_label {
        font-size: 20px;
        color: black;
        font-weight: bold;
        margin-bottom: 15px;
      }
    }
  }
}
.box_table {
  width: 100%;
  border-top: 1px solid #b4bbc5;
  border-left: 1px solid #b4bbc5;
  box-sizing: border-box;
  .box_table_head {
    width: 100%;
    display: flex;
    align-items: center;
    .box_table_head_item1 {
      flex: 1;
      height: 50px;
      background: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: black;
      border-right: 1px solid #b4bbc5;
      border-bottom: 1px solid #b4bbc5;
      box-sizing: border-box;
    }
    .box_table_head_item {
      flex: 1;
      height: 50px;
      background: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: black;
      border-right: 1px solid #b4bbc5;
      border-bottom: 1px solid #b4bbc5;
      box-sizing: border-box;
      &:nth-child(1) {
        flex: 0.5;;
      }
      &:nth-child(2) {
        flex:1.5;
      }
      &:nth-child(4) {
        flex:1.5;
      }
      &:nth-child(5) {
        flex: 1.5;;
      }
    }
    .box_table_head_item5 {
      flex: 1;
      height: 50px;
      background: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: black;
      border-right: 1px solid #b4bbc5;
      border-bottom: 1px solid #b4bbc5;
      box-sizing: border-box;
      &:nth-child(2) {
        flex: 5;
      }
    }
    .box_form_item {
      flex: 1;
      height: 50px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: black;
      border-right: 1px solid #b4bbc5;
      border-bottom: 1px solid #b4bbc5;
      box-sizing: border-box;
      &:nth-child(1) {
        //flex: 0.5;
      }
    }
  }
  .box_table_content {
    width: 100%;
    display: flex;
    align-items: center;
    .box_table_content_header{
      border-bottom: 0px solid #b4bbc5 !important;
    }
    .box_table_content_item {
      flex: 1;
      height: 50px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: black;
      border-right: 1px solid #b4bbc5;
      border-bottom: 1px solid #b4bbc5;
      box-sizing: border-box;
      &:nth-child(1) {
        flex: 0.5;;
      }
      &:nth-child(2) {
        flex:1.5;
      }
      &:nth-child(4) {
        flex: 1.5;
      }
      &:nth-child(5) {
        flex: 1.5;
      }
      span{
        width: 100%;
        white-space: nowrap;
        word-wrap: break-word;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>