<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="100%" 
 | 
        :visible.sync="visible" 
 | 
        :confirm-working="isWorking" 
 | 
        @confirm="confirm" 
 | 
    > 
 | 
        <el-form :model="form" ref="form" :rules="rules"> 
 | 
            <el-form-item label="方案名称" prop="name"> 
 | 
                <el-input v-model="form.name" placeholder="请输入" v-trim/> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="保险公司" prop="insuranceId"> 
 | 
                <el-select v-model="form.insuranceId" filterable @change="getAllWorktype1" 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="companyName"> 
 | 
                <el-input v-model="form.companyName" placeholder="请输入" v-trim/> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="投保年龄" prop="minAge"> 
 | 
                <div style="display: flex; align-items: center;"> 
 | 
                    <el-select v-model="form.minAge" @change="changeMinAge" style="flex: 1;" placeholder="请选择"> 
 | 
                        <el-option 
 | 
                            v-for="item in 80" 
 | 
                            :key="item" 
 | 
                            :label="item" 
 | 
                            :value="item"> 
 | 
                        </el-option> 
 | 
                    </el-select> 
 | 
                    <span style="margin: 0 30px;">至</span> 
 | 
                    <el-select v-model="form.maxAge" @change="changeMaxAge" style="flex: 1;" placeholder="请选择"> 
 | 
                        <el-option 
 | 
                            v-for="item in 80" 
 | 
                            :key="item" 
 | 
                            :label="item" 
 | 
                            :value="item"> 
 | 
                        </el-option> 
 | 
                    </el-select> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="生效时间" prop="validTypeNum"> 
 | 
                <div style="width: 100%; display: flex; align-items: center;"> 
 | 
                    <div style="flex-shrink: 0;"> 
 | 
                        <el-radio-group v-model="form.validType" @change="changeValidType"> 
 | 
                            <el-radio :label="0">日后生效</el-radio> 
 | 
                            <el-radio :label="1">次月生效</el-radio> 
 | 
                        </el-radio-group> 
 | 
                    </div> 
 | 
                    <el-input style="margin-left: 20px;" type="number" v-model="form.validTypeNum"   placeholder="请输入延迟天数" v-if="form.validType === 0"></el-input> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="批改支持" prop="canAdd"> 
 | 
                <div style="width: 100%; display: flex; align-items: center;"> 
 | 
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.canAdd">加保</el-checkbox> 
 | 
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.canReduce">减保</el-checkbox> 
 | 
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.canChangeUnit">更换派遣单位</el-checkbox> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="批减仅支持替换(减保批改仅支持替换人员即减保人员少于加保人员)" prop="delOnlyReplace"> 
 | 
                <div style="width: 100%; display: flex; align-items: center;"> 
 | 
                    <el-radio-group v-model="form.delOnlyReplace"> 
 | 
                        <el-radio :label="1">是</el-radio> 
 | 
                        <el-radio :label="0">否</el-radio> 
 | 
                    </el-radio-group> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="批增生效(天数)" prop="addValidDays" v-if="form.delOnlyReplace != 1"> 
 | 
                <div style="width: 100%; display: flex; align-items: center;"> 
 | 
                    <el-input style="margin-left: 0px;" type="number" v-model="form.addValidDays"   placeholder="请输入批增生效时间(天数)" ></el-input> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="批减生效(天数)" prop="delValidDays"> 
 | 
                <div style="width: 100%; display: flex; align-items: center;"> 
 | 
                    <el-input style="margin-left: 0px;" type="number" v-model="form.delValidDays"   placeholder="请输入批减生效时间(天数)" ></el-input> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="批改提醒时间" prop="correctWarnTime"> 
 | 
                <el-time-picker 
 | 
                    value-format="HH:mm" 
 | 
                    v-model="form.correctWarnTime" 
 | 
                    placeholder="请选择批改提醒时间"> 
 | 
                </el-time-picker> 
 | 
            </el-form-item> 
 | 
            <div style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ececec;"> 
 | 
                <div style="display: flex; align-items: center; margin-bottom: 10px;"> 
 | 
                    <el-select filterable multiple style="width: 800px;" v-model="worktypeId" placeholder="请选择"> 
 | 
                        <el-option 
 | 
                            v-for="item in typeWorkCopy" 
 | 
                            :key="item.id" 
 | 
                            :label="item.name" 
 | 
                            :value="item.id"> 
 | 
                        </el-option> 
 | 
                    </el-select> 
 | 
                    <el-button type="primary" @click="add" :disabled="worktypeId.length === 0" style="margin-left: 10px;">添加工种</el-button> 
 | 
                    <el-button type="primary" @click="impor">导入工种</el-button> 
 | 
                    <el-button type="text" @click="exprot">导入模版xls</el-button> 
 | 
                </div> 
 | 
                <u-table 
 | 
                    :data="form.worktypeIdList" 
 | 
                    border 
 | 
                    use-virtual 
 | 
                    style="width: 100%; margin-bottom: 20px;"> 
 | 
                    <u-table-column 
 | 
                        label="序号" 
 | 
                        width="80"> 
 | 
                        <template slot-scope="scope"> 
 | 
                            <span>{{scope.$index + 1}}</span> 
 | 
                        </template> 
 | 
                    </u-table-column> 
 | 
                    <u-table-column 
 | 
                        prop="worktypeName" 
 | 
                        label="所属工种"> 
 | 
                    </u-table-column> 
 | 
                    <u-table-column 
 | 
                        label="操作" 
 | 
                        width="100"> 
 | 
                        <template slot-scope="scope"> 
 | 
                            <el-button type="text" size="small" style="color: red;" @click="dele(scope.$index)">删除</el-button> 
 | 
                        </template> 
 | 
                    </u-table-column> 
 | 
                </u-table> 
 | 
            </div> 
 | 
            <el-form-item label="特别约定" prop="specialAgreement"> 
 | 
                <RichEditor :richData="form.specialAgreement" :styleEditor="'border: 1px solid #ccc;display: inline-block;'" @getWangedditor="getWangedditor" :readonly="false"/> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="特别说明" prop="specialInfo"> 
 | 
                <RichEditor :richData="form.specialInfo" :styleEditor="'border: 1px solid #ccc;display: inline-block;'" @getWangedditor="getWangedditor1" :readonly="false"/> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="其他说明" prop="ortherInfo"> 
 | 
                <RichEditor :richData="form.ortherInfo" :styleEditor="'border: 1px solid #ccc;display: inline-block;'" @getWangedditor="getWangedditor2" :readonly="false"/> 
 | 
            </el-form-item> 
 | 
        </el-form> 
 | 
        <!--    上传工种    --> 
 | 
        <input type="file" @change="getFile" style="opacity: 0;" ref="upload" accept=".xlsx" /> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
  import BaseOpera from '@/components/base/BaseOpera' 
 | 
  import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
  import { all } from '@/api/business/insurance' 
 | 
  import { all as allWorktype, importExcelForSolution } from '@/api/business/worktype' 
 | 
  import { solutionsBaseId } from '@/api/business/solutionsBase' 
 | 
  import { pageAll as shopList } from '@/api/business/company' 
 | 
  import UploadFile from '@/components/common/UploadFile' 
 | 
  import { numRule } from '@/utils/form' 
 | 
  import RichEditor from '@/components/common/RichEditor' 
 | 
  import { UTable, UTableColumn } from 'umy-ui' 
 | 
  export default { 
 | 
    name: 'OperaSolutionsBaseWindow', 
 | 
    extends: BaseOpera, 
 | 
    components: { GlobalWindow, UploadFile, RichEditor, UTable, UTableColumn }, 
 | 
    data () { 
 | 
      var validType = (rule, value, callback) => { 
 | 
        if (this.form.validType === 0 && !value) { 
 | 
          return callback(new Error('延迟天数不能为空')) 
 | 
        } else if (this.form.validType === 0 && !/^[0-9]*[1-9][0-9]*$/.test(value)) { 
 | 
          return callback(new Error('延迟天数只能为正整数')) 
 | 
        } 
 | 
        callback() 
 | 
      } 
 | 
      var canAddFun = (rule, value, callback) => { 
 | 
        if (!this.form.canAdd && !form.canReduce && !form.canChangeUnit) { 
 | 
          return callback(new Error('批改支持不能为空')) 
 | 
        } 
 | 
        callback() 
 | 
      } 
 | 
      return { 
 | 
        // 表单数据 
 | 
        form: { 
 | 
          id: null, 
 | 
          name: '', 
 | 
          companyName: '', 
 | 
          insuranceId: '', 
 | 
          validType: 0, 
 | 
          minAge: '', 
 | 
          maxAge: '', 
 | 
          specialAgreement: '', 
 | 
          specialInfo: '', 
 | 
          ortherInfo: '', 
 | 
          validTypeNum: '', 
 | 
          canReduce: 0, 
 | 
          canChangeUnit: 0, 
 | 
          addValidDays: 0, 
 | 
          delValidDays: 0, 
 | 
          delOnlyReplace: 0, 
 | 
          canAdd: 0, 
 | 
          correctWarnTime: '', 
 | 
          worktypeIdList: [] 
 | 
        }, 
 | 
        worktypeId: [], 
 | 
        // 验证规则 
 | 
        rules: { 
 | 
          name: [ 
 | 
            { required: true, message: '请输入方案名称' } 
 | 
          ], 
 | 
          delOnlyReplace: [ 
 | 
            { required: true, message: '请选择' } 
 | 
          ], 
 | 
          addValidDays: [ 
 | 
            { required: true, validator: numRule } 
 | 
          ], 
 | 
          delValidDays: [ 
 | 
            { required: true, validator: numRule } 
 | 
          ], 
 | 
          insuranceId: [ 
 | 
            { required: true, message: '请选择保险公司' } 
 | 
          ], 
 | 
          companyName: [ 
 | 
            { required: true, message: '请输入承保公司' } 
 | 
          ], 
 | 
          minAge: [ 
 | 
            { required: true, message: '请选择投保年龄' } 
 | 
          ], 
 | 
          validTypeNum: [ 
 | 
            { required: true, validator: validType } 
 | 
          ], 
 | 
          correctWarnTime: [ 
 | 
            { required: true, message: '请输入批改提醒时间' } 
 | 
          ], 
 | 
          canAdd: [ 
 | 
            { required: true, validator: canAddFun } 
 | 
          ] 
 | 
        }, 
 | 
        shops: [], 
 | 
        company: [], 
 | 
        typeWork: [], 
 | 
        typeWorkCopy: [] 
 | 
      } 
 | 
    }, 
 | 
    created () { 
 | 
      this.config({ 
 | 
        api: '/business/solutionsBase', 
 | 
        'field.id': 'id' 
 | 
      }) 
 | 
    }, 
 | 
    methods: { 
 | 
      // 导入工种模板 
 | 
      getFile(e) { 
 | 
        const formdate = new FormData() 
 | 
        formdate.append('file', e.target.files[0]) 
 | 
        formdate.append('insuranceId', this.form.insuranceId) 
 | 
        importExcelForSolution(formdate) 
 | 
          .then(res => { 
 | 
            let arr = [] 
 | 
            res.forEach(item => { 
 | 
              arr.push({ worktypeId: item.id, worktypeName: item.name }) 
 | 
            }) 
 | 
            this.form.worktypeIdList = [...arr, ...this.form.worktypeIdList] 
 | 
            let valData = this.form.worktypeIdList.map(item => item.worktypeName) 
 | 
            this.typeWorkCopy = this.typeWorkCopy.filter(item => !valData.includes(item.name)) 
 | 
          }) 
 | 
          .catch(err => { 
 | 
            this.$message.error(err.message) 
 | 
          }) 
 | 
          .finally(() => { 
 | 
            this.$refs.upload.value = null 
 | 
          }) 
 | 
      }, 
 | 
      impor() { 
 | 
        if (!this.form.insuranceId) return this.$message.warning('请先选择保险公司') 
 | 
        this.$refs.upload.click() 
 | 
      }, 
 | 
      // 导出模板 
 | 
      exprot() { 
 | 
        window.open(process.env.VUE_APP_TYPEWORK_URL) 
 | 
      }, 
 | 
      getWangedditor(val){ 
 | 
        this.form.specialAgreement = val; 
 | 
      }, 
 | 
      getWangedditor1(val){ 
 | 
        this.form.specialInfo = val; 
 | 
      }, 
 | 
      getWangedditor2(val){ 
 | 
        this.form.ortherInfo = val; 
 | 
      }, 
 | 
      changeMinAge(e) { 
 | 
        if (this.form.maxAge && this.form.maxAge >= 0 && e > this.form.maxAge) { 
 | 
          this.form.minAge = '' 
 | 
          this.$message.warning('起始年龄不能大于截止年龄!') 
 | 
        } 
 | 
      }, 
 | 
      changeMaxAge(e) { 
 | 
        if (this.form.minAge && this.form.minAge >= 0 && e < this.form.minAge) { 
 | 
          this.form.maxAge = '' 
 | 
          this.$message.warning('截止年龄不能大于起始年龄!') 
 | 
        } 
 | 
      }, 
 | 
      handNumberInput (value) { 
 | 
        const regex = /^[-+]?\d*$/ 
 | 
        if (!regex.test(value)) { 
 | 
          // 如果输入的不是整数,则设置为上一个有效的整数值 
 | 
          this.form.addValidDays = value.replace(/[^0-9]/g, '') 
 | 
          this.form.addValidDays = value.replace(/[^0-9]/g, '') 
 | 
          this.form.delValidDays = value.replace(/[^0-9]/g, '') 
 | 
        } 
 | 
      }, 
 | 
      // 切换公司 
 | 
      getAllWorktype1 () { 
 | 
        this.form.worktypeIdList = [] 
 | 
        this.getAllWorktype() 
 | 
      }, 
 | 
      changeValidType(e) { 
 | 
        if (e === 1) { 
 | 
          this.form.validTypeNum = 0 
 | 
        } else { 
 | 
          this.form.validTypeNum = '' 
 | 
        } 
 | 
      }, 
 | 
      // 确认新建/修改 
 | 
      confirm () { 
 | 
        const data = JSON.parse(JSON.stringify(this.form)) 
 | 
        data.worktypeIdList = data.worktypeIdList.map(item => item.worktypeId) 
 | 
        this.$refs.form.validate((valid) => { 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          // 调用新建接口 
 | 
          this.isWorking = true 
 | 
          if (data.id == null || data.id === '') { 
 | 
            this.api.create(data) 
 | 
              .then(() => { 
 | 
                this.visible = false 
 | 
                this.$tip.apiSuccess('新建成功') 
 | 
                this.$emit('success') 
 | 
              }) 
 | 
              .catch(e => { 
 | 
                this.$tip.apiFailed(e) 
 | 
              }) 
 | 
              .finally(() => { 
 | 
                this.isWorking = false 
 | 
              }) 
 | 
          } else { 
 | 
            this.api.updateById(data) 
 | 
              .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.visible = true 
 | 
        this.form.maxAge = '' 
 | 
        this.form.validTypeNum = '' 
 | 
        this.form.canReduce = 0 
 | 
        this.form.canChangeUnit = 0 
 | 
        this.form.addValidDays = 0 
 | 
        this.form.delOnlyReplace = 0 
 | 
        this.form.delValidDays = 0 
 | 
        this.form.canAdd = 0 
 | 
        this.form.worktypeIdList = [] 
 | 
        this.typeWork = [] 
 | 
        this.typeWorkCopy = [] 
 | 
        // this.$refs['$upload'].clearFiles()//初始化导入组件 
 | 
        this.allCompany() 
 | 
        this.allShops() 
 | 
        // 新建 
 | 
        if (target == null) { 
 | 
          this.$nextTick(() => { 
 | 
            this.$refs.form.resetFields() 
 | 
            this.form.maxAge = '' 
 | 
            this.form.validTypeNum = '' 
 | 
            this.form.fanganFile = null 
 | 
            this.form.worktypeIdList = [] 
 | 
            this.form[this.configData['field.id']] = null 
 | 
          }) 
 | 
          return 
 | 
        } 
 | 
        // 编辑 
 | 
        this.$nextTick(() => { 
 | 
          solutionsBaseId(target.id) 
 | 
            .then(res => { 
 | 
              for (const key in this.form) { 
 | 
                this.form[key] = res[key] 
 | 
              } 
 | 
              this.form.correctWarnTime = `${this.form.correctWarnTime}:00` 
 | 
              if (res.worktypeList) { 
 | 
                this.form.worktypeIdList = res.worktypeList.map(item => { 
 | 
                  return { 
 | 
                    worktypeId: item.worktypeId, 
 | 
                    worktypeName: item.worktypeName 
 | 
                  } 
 | 
                }) 
 | 
              } 
 | 
              this.getAllWorktype() 
 | 
            }) 
 | 
        }) 
 | 
      }, 
 | 
      // 查询保险公司下全部工种 
 | 
      getAllWorktype () { 
 | 
        allWorktype({ 
 | 
          insuranceId: this.form.insuranceId, 
 | 
          dataType: 2 
 | 
        }).then(res => { 
 | 
            this.typeWork = res 
 | 
            if (!this.form.id) { 
 | 
                this.typeWorkCopy = res 
 | 
            } else { 
 | 
                let valData = this.form.worktypeIdList.map(item => item.worktypeName) 
 | 
                this.typeWorkCopy = res.filter(item => !valData.includes(item.name)) 
 | 
            } 
 | 
        }) 
 | 
      }, 
 | 
  
 | 
      // 查询全部保险公司 
 | 
      allCompany () { 
 | 
        all({ dataType: 2, status: 0 }) 
 | 
          .then(res => { 
 | 
            this.company = res 
 | 
          }) 
 | 
      }, 
 | 
      allShops () { 
 | 
        shopList({ type: 1, status: 0 }) 
 | 
          .then(res => { 
 | 
            this.shops = res 
 | 
          }) 
 | 
      }, 
 | 
      add () { 
 | 
          let arr = this.typeWorkCopy.filter(item => this.worktypeId.includes(item.id)) 
 | 
          let dataVal = arr.map(item => { 
 | 
              return { 
 | 
                  worktypeId: item.id, 
 | 
                  worktypeName: item.name 
 | 
              } 
 | 
          }) 
 | 
          this.form.worktypeIdList = [ ...dataVal, ...this.form.worktypeIdList ] 
 | 
          let valData = this.form.worktypeIdList.map(item => item.worktypeName) 
 | 
          this.typeWorkCopy = this.typeWorkCopy.filter(item => !valData.includes(item.name)) 
 | 
          this.worktypeId = [] 
 | 
      }, 
 | 
      dele (index) { 
 | 
        if (this.form.worktypeIdList.length === 1) { 
 | 
          this.$message.warning('至少要保留一项') 
 | 
          return 
 | 
        } 
 | 
        let row = this.typeWork.filter(item => item.name === this.form.worktypeIdList[index].worktypeName) 
 | 
        this.typeWorkCopy.unshift(row[0]) 
 | 
        this.form.worktypeIdList.splice(index, 1) 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
</script> 
 |