jsm-mall-front/src/views/setting/difficultyFee/difficultyFeeAuditorSet/InsuranceContractForm.vue

<template>
  <div>
    <zj-form-container ref="formRef" :formData="formData" :formRules="formRules">
      <zj-form-module title="基础信息" label-width="110px" :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 { principalDetail, principalAdd, principalUpdate } from '@/api/difficultyFeeAuditorSet.js'
import { dateFormat } from '@/utils/util'
import pagingTransfer from '@/components/paging-transfer.vue'
import { EventBus } from '@/utils/eventBus'
import { required } from '@/components/template/rules_verify.js'
import { getWebsit } from '@/api/customerManagement.js'
export default {
  props: {
    type: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      disabled: this.type === 2,
      // 表单数据
      formData: {
        createBy: '',
        createTime: '',
        principal: '',
        updateBy: '',
        updateTime: '',
        workerInvolvePrincipalItems: [
          // {
          //   belongCompany: '',
          //   belongCompanyId: '',
          //   id: '',
          //   principalId: '',
          //   websitName: '',
          //   websitNumber: ''
          // }
        ]
      },
      formRules: {},
      formInline: {
        websitId: '',
        websitName: ''
      }
    }
  },
  computed: {
    formItems() {
      return [
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '审批负责人', prop: 'principal', rules: [...required] }
        },
        {
          name: 'slot-component',
          md: 24,
          attributes: {},
          formItemAttributes: { label: '', prop: '', rules: [] },
          render: (h, { props, onInput }) => {
            return null
          }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '创建人', prop: 'createBy' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '创建时间', prop: 'createTime' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '修改人', prop: 'updateBy' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '修改时间', prop: 'updateTime' }
        }
      ]
    },
    items2() {
      return [
        {
          name: 'slot-component',
          md: 24,
          attributes: {},
          formItemAttributes: { label: '', 'label-width': '0px', prop: 'workerInvolvePrincipalItems', rules: [] },
          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.websitId}
                        onInput={v => {
                          this.formInline.websitId = v
                        }}
                        placeholder="网点编号"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-input
                        value={this.formInline.websitName}
                        onInput={v => {
                          this.formInline.websitName = v
                        }}
                        placeholder="网点名称"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        onClick={() => {
                          EventBus.$emit('handlePaginaXXPPPBack22')
                        }}
                      >
                        查询
                      </el-button>
                      <el-button
                        onClick={() => {
                          this.formInline.websitId = ''
                          this.formInline.websitName = ''
                          this.$nextTick(() => {
                            EventBus.$emit('handlePaginaXXPPPBack22')
                          })
                        }}
                      >
                        重置
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <pagingTransfer
                  handlePaginationCallBackKey="handlePaginaXXPPPBack22"
                  value={this.formData.workerInvolvePrincipalItems}
                  onInput={v => {
                    this.formData.workerInvolvePrincipalItems = v
                  }}
                  left-columns={[
                    { id: 'belongCompanyCode', label: '所属公司编号', width: '160' },
                    { id: 'websitId', label: '网点编号', width: '120' },
                    { id: 'websitName', label: '网点名称', width: '' }
                  ]}
                  right-columns={[
                    { id: 'belongCompanyCode', label: '所属公司编号', width: '160' },
                    { id: 'websitId', label: '网点编号', width: '120' },
                    { id: 'websitName', label: '网点名称', width: '' }
                  ]}
                  show-pagination={false}
                  pagination-call-back={this.paginationCallback}
                  title-texts={['待选项', '已选项']}
                  min-height="300px"
                  table-row-key={row => row.websitId}
                />
              </div>
            )
          }
        }
      ]
    }
  },

  created() {
    // 获取详情
    if (this.type !== 0) {
      principalDetail({
        id: this.item.id
      }).then(res => {
        this.formData = { ...res.data }
      })
    }
  },
  methods: {
    paginationCallback({ pageIndex, pageSize }) {
      return new Promise(resolve => {
        getWebsit({ ...this.formInline, attr: 'SELF' }).then(res => {
          resolve({
            total: res.data.filter(item => item.type !== 'B').length,
            data: res.data
              .filter(item => item.type !== 'B')
              .map(item => {
                return {
                  ...item,
                  websitName: item.name
                }
              })
          })
        })
      })
    },
    submit() {
      this.$refs['formRef'].validate(valid => {
        console.log(this.formData)
        if (valid) {
          ;(this.formData.id ? principalUpdate : principalAdd)({
            ...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>