<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" @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" 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" 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="price"> 
 | 
                <div style="display: flex; align-items: center;"> 
 | 
                    <el-input v-model="form.price" style="flex: 1;" placeholder="请输入" v-trim/> 
 | 
                    <span style="margin: 0 30px;">元/人</span> 
 | 
                    <el-select v-model="form.timeUnit" style="flex: 1;" placeholder="请选择"> 
 | 
                        <el-option label="天" :value="0"></el-option> 
 | 
<!--                        <el-option label="半月" :value="1"></el-option>--> 
 | 
                        <el-option label="月" :value="2"></el-option> 
 | 
                        <el-option label="年" :value="3"></el-option> 
 | 
                    </el-select> 
 | 
                </div> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="投保周期" prop="insureCycle"> 
 | 
                <div style="display: flex; align-items: center;"> 
 | 
                    <el-input v-model="form.insureCycle" style="flex: 1;" placeholder="请输入" v-trim/> 
 | 
                    <span style="margin: 0 30px;"></span> 
 | 
                    <el-select v-model="form.insureCycleUnit" style="flex: 1;" placeholder="请选择"> 
 | 
                        <el-option label="天" :value="0"></el-option> 
 | 
<!--                        <el-option label="半月" :value="1"></el-option>--> 
 | 
                        <el-option label="月" :value="2"></el-option> 
 | 
                        <el-option label="年" :value="3"></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="form.validTypeNum = ''"> 
 | 
                            <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="type"> 
 | 
                <el-radio-group v-model="form.type"> 
 | 
                    <el-radio :label="0">直保</el-radio> 
 | 
                    <el-radio :label="1">委托投保</el-radio> 
 | 
                </el-radio-group> 
 | 
            </el-form-item> 
 | 
          <el-form-item label="委托商户" prop="shopId" v-if="form.type =='1'"> 
 | 
            <el-select v-model="form.shopId"  placeholder="请选择委托商户"> 
 | 
              <el-option 
 | 
                  v-for="item in shops" 
 | 
                  :key="item.id" 
 | 
                  :label="item.name" 
 | 
                  :value="item.id"> 
 | 
              </el-option> 
 | 
            </el-select> 
 | 
          </el-form-item> 
 | 
            <el-form-item label="接收文件邮箱" prop="email"> 
 | 
                <el-input v-model="form.email" placeholder="请输入" v-trim/> 
 | 
            </el-form-item> 
 | 
<!--            <el-form-item label="投保单签章关键字(如有多个关键字,请使用英文分号 ; 隔开)" prop="signKeyword"> 
 | 
                <el-input v-model="form.signKeyword" placeholder="多个英文分号 ; 隔开" v-trim/> 
 | 
            </el-form-item>--> 
 | 
            <el-button type="primary" @click="add">添加工种</el-button> 
 | 
            <el-table 
 | 
                :data="form.worktypeIdList" 
 | 
                border 
 | 
                style="width: 100%; margin-bottom: 20px;"> 
 | 
                <el-table-column 
 | 
                    label="序号" 
 | 
                    align="center" 
 | 
                    width="80"> 
 | 
                    <template slot-scope="scope"> 
 | 
                        <span>{{scope.$index + 1}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    align="center" 
 | 
                    label="所属工种"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <el-select filterable v-model="row.worktypeId" placeholder="请选择"> 
 | 
                            <el-option 
 | 
                                v-for="item in typeWork" 
 | 
                                :key="item.id" 
 | 
                                :label="item.name" 
 | 
                                :value="item.id"> 
 | 
                            </el-option> 
 | 
                        </el-select> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    label="操作" 
 | 
                    align="center" 
 | 
                    width="100"> 
 | 
                    <template slot-scope="scope"> 
 | 
                        <el-button type="text" size="small" style="color: red;" @click="dele(scope.$index)">删除</el-button> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <el-form-item label="特别约定" prop="specialAgreement"> 
 | 
                <el-input type="textarea" v-model="form.specialAgreement" placeholder="请输入特别约定" v-trim/> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="特别说明" prop="specialInfo"> 
 | 
                <el-input type="textarea" v-model="form.specialInfo" placeholder="请输入特别说明" v-trim/> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="其他说明" prop="ortherInfo"> 
 | 
                <el-input type="textarea" v-model="form.ortherInfo" placeholder="请输入其他说明" v-trim/> 
 | 
            </el-form-item> 
 | 
        </el-form> 
 | 
    </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 } from '@/api/business/worktype' 
 | 
import { solutionsId } from '@/api/business/solutions' 
 | 
import { pageAll as shopList } from '@/api/business/company' 
 | 
export default { 
 | 
  name: 'OperaSolutionsWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow }, 
 | 
  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() 
 | 
    } 
 | 
    return { 
 | 
      // 表单数据 
 | 
      form: { 
 | 
        id: null, 
 | 
        name: '', 
 | 
        companyName: '', 
 | 
        insuranceId: '', 
 | 
        validType: 0, 
 | 
        type: 0, 
 | 
        minAge: '', 
 | 
        maxAge: '', 
 | 
        price: '', 
 | 
        timeUnit: '', 
 | 
        shopId: null, 
 | 
        insureCycle: '', 
 | 
        insureCycleUnit: '', 
 | 
        email: '', 
 | 
        specialAgreement: '', 
 | 
        specialInfo: '', 
 | 
        ortherInfo: '', 
 | 
        signKeyword: '', 
 | 
        validTypeNum: '', 
 | 
        worktypeIdList: [{ worktypeId: '' }] 
 | 
      }, 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
        name: [ 
 | 
          { required: true, message: '请输入方案名称' } 
 | 
        ], 
 | 
        insuranceId: [ 
 | 
          { required: true, message: '请选择保险公司' } 
 | 
        ], 
 | 
        companyName: [ 
 | 
          { required: true, message: '请输入承保公司' } 
 | 
        ], 
 | 
        minAge: [ 
 | 
          { required: true, message: '请选择投保年龄' } 
 | 
        ], 
 | 
        price: [ 
 | 
          { required: true, message: '请输入保险费用' } 
 | 
        ], 
 | 
        insureCycle: [ 
 | 
          { required: true, message: '请输入投保周期' } 
 | 
        ], 
 | 
        validTypeNum: [ 
 | 
          { required: true, validator: validType } 
 | 
        ], 
 | 
        type: [ 
 | 
          { required: true, message: '请选择投保类型' } 
 | 
        ] 
 | 
        // signKeyword: [ 
 | 
        //     { required: false, message: '请输入投保单签章关键字' } 
 | 
        // ] 
 | 
      }, 
 | 
      shops: [], 
 | 
      company: [], 
 | 
      typeWork: [] 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/business/solutions', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods: { 
 | 
    // 切换公司 
 | 
    getAllWorktype1 () { 
 | 
      this.form.worktypeIdList = [{ worktypeId: '' }] 
 | 
      this.getAllWorktype() 
 | 
    }, 
 | 
    // 确认新建/修改 
 | 
    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.form.maxAge = '' 
 | 
      this.form.timeUnit = '' 
 | 
      this.form.insureCycleUnit = '' 
 | 
      this.form.validTypeNum = '' 
 | 
      this.visible = true 
 | 
      this.form.worktypeIdList = [{ worktypeId: '' }] 
 | 
      this.allCompany() 
 | 
      this.allShops() 
 | 
      // 新建 
 | 
      if (target == null) { 
 | 
        this.$nextTick(() => { 
 | 
          this.$refs.form.resetFields() 
 | 
          this.form[this.configData['field.id']] = null 
 | 
        }) 
 | 
        return 
 | 
      } 
 | 
      // 编辑 
 | 
      this.$nextTick(() => { 
 | 
        solutionsId(target.id) 
 | 
          .then(res => { 
 | 
            for (const key in this.form) { 
 | 
              this.form[key] = res[key] 
 | 
            } 
 | 
            this.form.worktypeIdList = res.worktypeList.map(item => { 
 | 
              return { 
 | 
                worktypeId: item.worktypeId 
 | 
              } 
 | 
            }) 
 | 
            this.getAllWorktype() 
 | 
          }) 
 | 
      }) 
 | 
    }, 
 | 
    // 查询保险公司下全部工种 
 | 
    getAllWorktype () { 
 | 
      allWorktype({ 
 | 
        insuranceId: this.form.insuranceId 
 | 
      }).then(res => { 
 | 
        this.typeWork = res 
 | 
      }) 
 | 
    }, 
 | 
    // 查询全部保险公司 
 | 
    allCompany () { 
 | 
      all({ dataType: 2, status: 0 }) 
 | 
        .then(res => { 
 | 
          console.log(res) 
 | 
          this.company = res 
 | 
        }) 
 | 
    }, 
 | 
    allShops () { 
 | 
      shopList({ type: 1, status: 0 }) 
 | 
        .then(res => { 
 | 
          console.log(res) 
 | 
          this.shops = res 
 | 
        }) 
 | 
    }, 
 | 
    add () { 
 | 
      this.form.worktypeIdList.push({ worktypeId: '' }) 
 | 
    }, 
 | 
    dele (index) { 
 | 
      if (this.form.worktypeIdList.length === 1) { 
 | 
        this.$message.warning('至少要保留一项') 
 | 
        return 
 | 
      } 
 | 
      this.form.worktypeIdList.splice(index, 1) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |