addClerk.vue

<template>
  <div>
    <el-dialog
      :title="$t('dialog.addClerk')"
      :visible.sync="isShow"
      class="manage-dialog"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
        <el-form-item :label="$t('table.name')" prop="name">
          <el-input v-model="addForm.name"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.gender')" prop="gender">
          <el-select
            class="manage-sel"
            v-model="addForm.gender"
            :placeholder="$t('pholder.select')"
            :no-data-text="$t('pholder.nodata')"
          >
            <el-option :label="$t('head.man')" :value="1"></el-option>
            <el-option :label="$t('head.woman')" :value="0"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.age')" prop="age">
          <el-input v-model="addForm.age"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.position')" prop="position">
          <el-input v-model="addForm.position"></el-input>
          <!-- <i class="error-tip">*</i> -->
        </el-form-item>
        <el-form-item :label="$t('table.square')" prop="mallId">
          <el-select
            class="manage-sel"
            v-model="addForm.mallId"
            filterable
            :placeholder="$t('pholder.select')"
            :no-data-text="$t('pholder.nodata')"
          >
            <el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('dialog.profilePic')" prop="photo">
          <!-- <el-button @click="profileHandle" class="dialog-btn">{{$t('dialog.profilePic')}}</el-button>
          <input type="file" v-show="false" @change="handleChange2" ref="fileinput" />-->
          <el-upload
            class="avatar-uploader"
            :multiple="false"
            :show-file-list="false"
            :auto-upload="false"
            :action="uploadAction"
            :headers="uploadHeaders"
            :on-change="handleChange"
            ref="profileupload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <i class="error-tip">*</i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button
          type="primary"
          :loading="addButLoad"
          :disabled="addButDisable"
          @click="addSubmit('addForm')"
          class="dialog-btn dialog-confirm-btn"
        >{{ addButDisable? $t('button.uploaing') : $t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
    <crop-dialog ref="cropRef" @profilePath="getPath" />
  </div>
</template>

<script>
import CropDialog from "./crop";
export default {
  props: {
    mallList: {
      type: Array,
      default: () => []
    }
  },
  components: { CropDialog },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(Number(value))) {
          callback(new Error("请输入正确格式"));
        } else {
          // if (value < 18) {
          // callback(new Error('必须年满18岁'));
          // } else {
          callback();
          // }
        }
      }, 1000);
    };
    var checkPhoto = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请上传证件照"));
      } else {
        callback();
      }
    };
    return {
      timer: "",
      isShow: false,
      addForm: {
        name: "",
        mallId: null,
        gender: null,
        age: null,
        position: "",
        photo: null
      },
      uploadAction: "/staffs/uploadImg/",
      uploadHeaders: {},
      profileFormData: {},
      imageUrl: "",
      maxSize: 20,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        age: [{ validator: checkAge, trigger: "change" }],
        mallId: [
          { required: true, message: "请选择所属广场", trigger: "change" }
        ],
        photo: [{ validator: checkPhoto, trigger: "change" }]
      },
      curMallId: null,
      addButDisable: false,
      addButLoad: false
    };
  },
  created() {
    // this.getMallList();
    this.uploadHeaders = {
      Authorization: this.$cookie.get("atoken")
    };
  },
  methods: {
    dialogInit(mall_id) {
      this.curMallId = mall_id;
      this.addForm.mallId = mall_id;
      // this.getMallList();
      this.isShow = true;
    },
    // getMallList() {
    //     this.mallList = [];
    //     this.$api.base.mall({
    //         accountId: this.$cookie.get('accountId'),
    //         // status: 1,
    //         status_arr: '1,3'
    //         // _t: Date.parse(new Date()) / 1000
    //     },null,true)
    //     .then(res => {
    //         let result = res.data;
    //         result.data.forEach(item => {
    //             if(item.id == this.curMallId) {
    //                 this.addForm.mallId = item.id;
    //             }
    //         })
    //         if(result.data.length > 0) {
    //             if(!this.curMallId) {
    //                 this.addForm.mallId = result.data[0].id;
    //             }
    //             this.mallList = result.data;
    //         }
    //     })
    //     .catch(err => { })
    // },
    handleChange(file, fileList) {
      let { maxSize } = this,
        isJPG = file.raw.type === "image/jpeg" || file.raw.type === "image/png",
        isLt2M = file.size / 1024 / 1024 < maxSize;
      if (!isJPG) {
        this.$message.error(
          this.$t("message.uploadImg") +
            " JPG or Png" +
            this.$t("message.imgFormat")
        );
      }
      // 超出大小
      if (!isLt2M) {
        this.$message.error(this.$t("message.imgLimSize") + " 20MB!");
      }
      if (isJPG && isLt2M) {
        this.$refs.cropRef.cropDialogInit(fileList[fileList.length - 1].raw);
      }
    },
    getPath(path, blobPath) {
      this.profileFormData = path;
      this.imageUrl = blobPath;
      this.addForm.photo = blobPath;
    },
    addSubmit(formName) {
      this.$refs[formName].validate(valid => {
        try {
          if (valid) {
            if (this.addButDisable) {
              return;
            }
            this.addButDisable = this.addButLoad = true;
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
              let params = null;
              params = new FormData();
              // this.addForm['accountId'] = this.$cookie.get('accountId');
              if (this.toRawType(this.profileFormData) === "FormData") {
                for (let key of this.profileFormData.keys()) {
                  let val = this.profileFormData.get(key);
                  params.append(key, val);
                }
                Object.keys(this.addForm).forEach(k => {
                  if (
                    typeof this.addForm[k] !== "undefined" &&
                    (this.addForm[k] || typeof this.addForm[k] === "number")
                  ) {
                    params.append(k, this.addForm[k]);
                  }
                });
              } else {
                Object.keys(this.addForm).forEach(k => {
                  params.append(k, this.addForm[k]);
                });
              }
              params.append("accountId", this.$cookie.get("accountId"));
              this.$api.management
                .addStaff(params, {
                  headers: {
                    "Content-type":
                      "application/x-www-form-urlencoded;charset=utf-8" //multipart/form-data; charset=utf-8
                  }
                })
                .then(data => {
                  let result = data.data;
                  if (result.code == 200) {
                    this.$refs.addForm.resetFields();
                    this.$refs.profileupload.clearFiles();
                    this.imageUrl = "";
                    this.isShow = false;
                    this.$parent.getTableData();
                  } else {
                    this.$message({
                      showClose: true,
                      type: "error",
                      message: this.$t("message.addClerkFailed") + result.msg
                    });
                  }
                  this.addButDisable = this.addButLoad = false;
                })
                .catch(err => {
                  this.addButDisable = this.addButLoad = false;
                  this.$message({
                    showClose: true,
                    type: "error",
                    message: this.$t("message.addClerkFailed") + err.message
                  });
                });
            }, 300);
          } else {
            return false;
          }
        } catch (error) {
          this.addButDisable = this.addButLoad = false;
        }
      });
    },
    closeDialog() {
      this.profileFormData = null;
      this.$refs.profileupload.clearFiles();
      this.imageUrl = "";
      this.$refs.addForm.resetFields();
      this.isShow = false;
      // this.$parent.getTableData();
    }
  }
};
</script>