jsm-mall-front/src/views/setting/insuranceAdministration/InsuranceAgreement/InsuranceAgreementForm.vue

<template>
  <div>
    <zj-form-container ref="formRef" :formData="formData" :formRules="formRules">
      <zj-form-module title="保险基础信息" label-width="120px" :formData="formData" :formItems="formItems" :column="3">
      </zj-form-module>
      <zj-form-module title="关联保险方案" label-width="0px" :formData="formData" :formItems="items2"> </zj-form-module>
    </zj-form-container>
    <div v-if="type === 0 || type === 1" style="text-align: right">
      <el-button size="mini" @click="submit">提交</el-button>
      <el-button size="mini" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { insureAgreeDetail, insureAgreeAdd, insureAgreeUpdate } from '@/api/InsuranceManagement.js'
import pagingTransfer from '@/components/paging-transfer.vue'
import { EventBus } from '@/utils/eventBus'
import { required } from '@/components/template/rules_verify.js'
import { insureList } from '@/api/InsuranceManagement.js'
export default {
  props: {
    type: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      disabled: this.type === 2,
      // 表单数据
      formData: {
        context: '',
        agreementType: '',
        agreementName: '',
        status: 'ON',
        policy: []
      },
      formRules: {
        context: [{ required: true, message: '请输入', trigger: 'blur' }],
        agreementType: [{ required: true, message: '请输入', trigger: 'blur' }],
        agreementName: [{ required: true, message: '请输入', trigger: 'blur' }],
        status: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      formInline: {
        policyName: '',
        policyNumber: '',
        startTime: '',
        endTime: ''
      },
      itemsList: []
    }
  },
  computed: {
    formItems() {
      return [
        {
          name: 'el-radio',
          options: [
            { label: '投保须知', value: '投保须知' },
            { label: '保险合同说明', value: '保险合同说明' }
          ],
          events: {
            change: val => {
              this.formData.context = ''
            }
          },
          md: 12,
          attributes: { disabled: this.type !== 0 },
          formItemAttributes: { label: '协议类型', prop: 'agreementType' }
        },
        {
          name: 'el-radio',
          options: [
            { label: '启用', value: 'ON' },
            { label: '禁用', value: 'OFF' }
          ],
          md: 12,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '状态', prop: 'status' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '协议名称', prop: 'agreementName' }
        },
        {
          name: 'slot-component',
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '协议内容', prop: 'context' },
          render: (h, { props }) => {
            var { formData } = props
            return (
              <v-quill-editor
                disabled={this.disabled}
                value={formData.context}
                onInput={val => {
                  formData.context = val
                }}
              ></v-quill-editor>
            )
          }
        }
      ]
    },
    items2() {
      return [
        {
          name: 'slot-component',
          md: 24,
          attributes: {},
          formItemAttributes: { label: '', 'label-width': '0px', prop: 'policy', rules: [...required] },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <div>
                <div>
                  <el-form
                    size="mini"
                    inline={true}
                    value={this.formInline}
                    onInput={v => {
                      this.formInline = v
                    }}
                    label-width="0px"
                  >
                    <el-form-item label="">
                      <el-input
                        value={this.formInline.policyName}
                        onInput={v => {
                          this.formInline.policyName = v
                        }}
                        placeholder="保单名称"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-input
                        value={this.formInline.policyNumber}
                        onInput={v => {
                          this.formInline.policyNumber = v
                        }}
                        placeholder="保单编号"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-date-picker
                        value={this.formInline.startTime}
                        onInput={v => {
                          this.formInline.startTime = v
                        }}
                        type="datetime"
                        placeholder="生效日期"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                      <el-date-picker
                        value={this.formInline.endTime}
                        onInput={v => {
                          this.formInline.endTime = v
                        }}
                        type="datetime"
                        placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        onClick={() => {
                          EventBus.$emit('handlePaginationCallBack33')
                        }}
                      >
                        查询
                      </el-button>
                      <el-button
                        onClick={() => {
                          this.formInline.policyName = ''
                          this.formInline.policyNumber = ''
                          this.formInline.startTime = ''
                          this.formInline.endTime = ''
                          this.$nextTick(() => {
                            EventBus.$emit('handlePaginationCallBack33')
                          })
                        }}
                      >
                        重置
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <pagingTransfer
                  handlePaginationCallBackKey="handlePaginationCallBack33"
                  value={this.formData.policy}
                  onInput={v => {
                    this.formData.policy = v
                  }}
                  left-columns={[
                    { id: 'policyName', label: '保单名称', width: '' },
                    { id: 'policyNumber', label: '保单编号', width: '' },
                    { id: 'policyPrice', label: '保单金额', width: '' },
                    { id: 'typeName_', label: '保单类型', width: '' },
                    { id: 'startTime', label: '生效时间', width: '' },
                    { id: 'endTime', label: '结束时间', width: '' }
                  ]}
                  right-columns={[
                    { id: 'policyName', label: '保单名称', width: '' },
                    { id: 'policyNumber', label: '保单编号', width: '' },
                    { id: 'policyPrice', label: '保单金额', width: '' },
                    { id: 'typeName_', label: '保单类型', width: '' },
                    { id: 'startTime', label: '生效时间', width: '' },
                    { id: 'endTime', label: '结束时间', width: '' }
                  ]}
                  show-pagination={false}
                  pagination-call-back={this.paginationCallback}
                  title-texts={['待选项', '已选项']}
                  min-height="300px"
                  table-row-key={row => row.id}
                />
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    // 获取详情
    if (this.type !== 0) {
      insureAgreeDetail({
        id: this.item.id
      }).then(res => {
        for (var key in res.data) {
          this.formData[key] = res.data[key]
        }
        this.formData.policy = res.data.policy.map(item => ({
          ...item,
          typeName_: { AC: '意外险', DS: '第三者责任险' }[item.type]
        }))
      })
    }
  },
  methods: {
    paginationCallback({ pageIndex, pageSize }) {
      return new Promise(resolve => {
        var params = [{ param: 'is_buy', compare: '=', value: 'YES' }]
        if (this.formInline.policyName) {
          params.push({
            param: 'policy_name',
            compare: 'like',
            value: this.formInline.policyName
          })
        }
        if (this.formInline.policyNumber) {
          params.push({
            param: 'policy_number',
            compare: 'like',
            value: this.formInline.policyNumber
          })
        }
        if (this.formInline.startTime) {
          params.push({
            param: 'start_time',
            compare: 'like',
            value: this.formInline.startTime
          })
        }
        if (this.formInline.endTime) {
          params.push({
            param: 'end_time',
            compare: 'like',
            value: this.formInline.endTime
          })
        }
        insureList({ pageNum: 1, pageSize: -1, params: params }).then(res => {
          resolve({
            total: res.data.total,
            data: res.data.records.map(item => ({
              ...item,
              typeName_: { AC: '意外险', DS: '第三者责任险' }[item.type]
            }))
          })
        })
      })
    },
    submit() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          ;(this.formData.id ? insureAgreeUpdate : insureAgreeAdd)({
            ...this.formData
          }).then(res => {
            this.$message({
              type: 'success',
              message: `保存成功!`
            })
            this.$emit('success')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>

<style lang="scss" scoped></style>