juvenile-prosecution-vue/src/views/business/modules/MinorModal.vue

<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="户号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="householdNum">
                <a-input v-model="model.householdNum" placeholder="请输入户号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="人员编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number">
                <a-input v-model="model.number" placeholder="请输入人员编号"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="请输入姓名"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gender">
                <j-dict-select-tag v-model="model.gender" dictCode="sex" placeholder="请选择性别" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identity">
                <a-input v-model="model.identity" placeholder="请输入身份证号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="学校名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="schoolName">
                <a-input v-model="model.schoolName" placeholder="请输入学校名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="入学年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startYear">
                <a-input v-model="model.startYear" placeholder="请输入入学年份"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="是否失学" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="school">
                <j-dict-select-tag v-model="model.school" dictCode="school_status" placeholder="请选择是否失学" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="监护人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="guardian">
                <a-input v-model="model.guardian" placeholder="请输入监护人"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="监护人关系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relation">
                <a-input v-model="model.relation" placeholder="请输入监护人关系"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="家庭住址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                <a-textarea v-model="model.address" placeholder="请输入家庭住址" :rows="1"></a-textarea>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="特殊原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specialReason">
                <a-textarea v-model="model.specialReason" placeholder="请输入特殊原因" :rows="1"></a-textarea>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="重点关注原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reason">
                <a-textarea v-model="model.reason" placeholder="请输入重点关注原因" :rows="1"></a-textarea>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <a-textarea v-model="model.remark" placeholder="请输入备注" :rows="1"></a-textarea>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <!-- 子表单区域 -->
      <a-tabs activeKey="1" type="card">
        <a-tab-pane tab="家庭成员" key="1" :forceRender="true">
          <j-editable-table
            class="main_table"
            ref="editableTable"
            :loading="familyLoading"
            sticky :columns="columns"
            :dataSource="dataSource"
            :maxHeight="192"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true" />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </j-modal>
</template>
<script>
import { getAction, httpAction } from '@/api/manage'
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
import JEditableTable from '@/components/jeecg/JEditableTable'
import JDate from '@/components/jeecg/JDate'
import { GetAge } from '@/utils/util'
export default {
  name: 'MinorModal',
  components: {
    JEditableTable, JDate
  },
  data() {
    return {
      confirmLoading: false,
      title: '',
      visible: false,
      disableSubmit: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      validatorRules: {
        householdNum: [{ required: true, message: '请输入户号' }],
        name: [{ required: true, message: '请输入姓名' }],
        gender: [{ required: true, message: '请选择性别' }],
        identity: [{ required: true, validator: this.validateIdCard }],
        relation: [{ required: true, message: '请输入监护人关系' }],
        guardian: [{ required: true, message: '请输入监护人' }]
      },
      url: {
        add: '/sys/minor/add',
        edit: '/sys/minor/edit',
        queryById: '/sys/minor/queryById',
        familys: '/sys/minor/queryFamilyByMainId'
      },
      familyLoading: false,
      dataSource: [],
      columns: [
        {
          title: '户号',
          key: 'householdNum',
          width: '230px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '人员编号',
          key: 'number',
          width: '230px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入',
        },
        {
          title: '姓名',
          key: 'name',
          width: '100px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '身份证号',
          key: 'identity',
          width: '190px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入',
          validateRules: [{
            // pattern: '/(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$)/',
            pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
            message: '${title}格式不正确'
          }]
        },
        {
          title: '与户主的关系',
          key: 'relation',
          width: '120px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '行政区划',
          key: 'division',
          width: '180px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入',
        },
        {
          title: '现住址',
          key: 'address',
          width: '200px',
          type: FormTypes.input_pop,
          defaultValue: '',
          placeholder: '请输入'
        },
        {
          title: '是否犯罪',
          key: 'crime',
          width: '100px',
          type: FormTypes.select,
          options: [],
          dictCode: 'is_crime',
          placeholder: '请选择',
        },
        {
          title: '犯罪原因',
          key: 'reason',
          width: '200px',
          type: FormTypes.input_pop,
          defaultValue: '',
          placeholder: '请输入'
        },
        {
          title: '其他参考信息',
          key: 'other',
          width: '200px',
          type: FormTypes.input_pop,
          defaultValue: '',
          placeholder: '请输入'
        }
      ]
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    getAgeByIdentity(identity) {
      return GetAge(identity)
    },
    validateIdCard(rule, value, callback) {
      console.log(value)
      if (undefined == value || null == value || '' == value) {
        callback('请输入正确的公民身份号码!')
      } else if (!value || new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/).test(value)) {
        callback()
      } else {
        callback('请输入正确的公民身份号码!')
      }
    },
    // 获取所有的editableTable实例
    getAllTable() {
      return Promise.all([
        getRefPromise(this, 'editableTable')
      ])
    },
    add() {
      this.dataSource = []
      // 默认新增一条数据
      this.getAllTable().then(editableTables => {
        editableTables[0].add()
      })
      this.edit({})
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      // 加载子表数据
      if (this.model.householdNum) {
        let params = { householdNum: this.model.householdNum }
        this.requestTableData(this.url.familys, params)
      }
    },
    /** 查询某个tab的数据 */
    requestTableData(url, params) {
      this.familyLoading = true
      getAction(url, params).then(res => {
        console.log(this.dataSource)
        this.dataSource = res.result || []
        console.log(this.dataSource)
      }).finally(() => {
        this.familyLoading = false
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
      this.getAllTable().then(editableTables => {
        editableTables[0].initialize()
      })
      this.$emit('close')
      this.$refs.form.resetFields()
    },
    handleOk() {
      this.validateFields()
    },
    /** 触发表单验证 */
    validateFields() {
      this.getAllTable().then(tables => {
        /** 一次性验证主表和所有的次表 */
        return validateFormModelAndTables(this.$refs.form, this.model, tables)
      }).then(allValues => {
        let formData = this.classifyIntoFormData(allValues)
        // 发起请求
        return this.requestAddOrEdit(formData)
      }).catch(e => {
        if (e.error === VALIDATE_NO_PASSED) {
          // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
          this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
        } else {
          console.error(e)
        }
      })
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let MinorPage = Object.assign(this.model, allValues.formValue)
      return {
        ...MinorPage, // 展开
        familyList: allValues.tablesValue[0].values
      }
    },
    /** 发起新增或修改的请求 */
    requestAddOrEdit(formData) {
      let url = this.url.add, method = 'post'
      if (this.model.id) {
        url = this.url.edit
        method = 'put'
      }
      this.confirmLoading = true
      httpAction(url, formData, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.close()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 10px;
}
</style>
<style>
.main_table .input-table .thead {
  overflow-y: auto;
}
.main_table .input-table .thead .tr {
  overflow-y: auto;
}
.main_table .input-table .scroll-view {
  overflow-y: auto;
  scrollbar-width: thin;
}
/* 设置滚动条的样式 */
.main_table .input-table .scroll-view::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* 滚动槽 */
.main_table .input-table .scroll-view::-webkit-scrollbar-track {
  background: #f5f5f5;
}
/* 滚动条滑块 */
.main_table .input-table .scroll-view::-webkit-scrollbar-thumb {
  background: #dedede;
  -webkit-box-shadow: none;
}
.main_table .ant-row-flex {
  margin-top: -55px;
  flex-flow: row-reverse;
}
.main_table .ant-row-flex .action-button {
  margin-bottom: 20px;
}
</style>