mts / mts2.0 · Files

<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 编辑 -->
    <a-spin :spinning="confirmLoading" v-if="editStatus">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="客户姓名"
          prop="name"
          required
          hasFeedback>
          <a-input placeholder="请输入客户姓名" v-model="model.name" :readOnly="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="性别"
          hasFeedback>
          <a-select v-model="model.sex" placeholder="请选择性别">
            <a-select-option value="1">男性</a-select-option>
            <a-select-option value="2">女性</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="身份证号码"
          prop="idcard"
          hasFeedback>
          <a-input placeholder="请输入身份证号码" v-model="model.idcard" :readOnly="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="身份证扫描件"
          hasFeedback>
          <j-image-upload text="上传" v-model="fileList" :isMultiple="true"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系方式"
          prop="telphone"
          hasFeedback>
          <a-input v-model="model.telphone" :readOnly="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="订单号码"
          :hidden="hiding"
          hasFeedback>
          <a-input v-model="model.orderId" disabled="disabled"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {httpAction} from '@/api/manage'
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import JImageUpload from '../../../../components/jeecg/JImageUpload'

export default {
  name: "JeecgOrderCustomerModal",
  components: {JImageUpload},
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      fileList: [],
      disableSubmit: false,
      selectedRowKeys: [],
      orderId: "",
      hiding: false,
      headers: {},
      picUrl: "",
      picArray: [],
      previewVisible: false,
      previewImage: '',
      addStatus: false,
      editStatus: false,
      confirmLoading: false,
      url: {
        add: "/test/order/addCustomer",
        edit: "/test/order/editCustomer",
        fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
        getOrderCustomerList: "/test/order/listOrderCustomerByMainId",
      },
      validatorRules: {
        name: [{required: true, message: '请输入客户姓名!'}],
        telphone: [{validator: this.validateMobile}],
        idcard: [{validator: this.validateIdCard}]
      },
    }
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload;
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token": token}
  },
  methods: {
    add(orderId) {
      this.hiding = true;
      if (orderId) {
        this.edit({orderId}, '');
      } else {
        this.$message.warning("请选择一个客户信息");
      }
    },
    detail(record) {
      this.edit(record, 'd');
    },
    edit(record, v) {
      if (v == 'e') {
        this.hiding = false;
        this.disableSubmit = false;
      } else if (v == 'd') {
        this.hiding = false;
        this.disableSubmit = true;
      } else {
        this.hiding = true;
        this.disableSubmit = false;
      }

      this.model = Object.assign({}, record);
      if (record.id) {
        this.hiding = false;
        this.addStatus = false;
        this.editStatus = true;
        setTimeout(() => {
          this.fileList = record.idcardPic
        }, 5)
      } else {
        this.addStatus = false;
        this.editStatus = true;
      }
      this.visible = true;
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.picUrl = "";
      this.fileList = [];
      this.$refs.form.resetFields();
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign({}, this.model);
          if (this.fileList != '') {
            formData.idcardPic = this.fileList;
          } else {
            formData.idcardPic = '';
          }
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        } else {
          return false;
        }
      })
    },
    handleCancel() {
      this.close();
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback();
      } else {
        callback("您的手机号码格式不正确!");
      }
    },
    validateIdCard(rule, value, callback) {
      if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
        callback();
      } else {
        callback("您的身份证号码格式不正确!");
      }
    },
  }
}
</script>

<style scoped>
/* tile uploaded pictures */
.upload-list-inline > > > .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}

.upload-list-inline > > > .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}

.upload-list-inline > > > .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
</style>