cmanager/src/views/wel/cards/authSteps/companyInfo.vue

<template>
  <div v-loading="loading">
    <el-row>
      <el-col :sm="24" :md="{ span: 12, offset: 6 }">
        <el-form
          :model="form"
          ref="form"
          class="content"
          label-position="right"
          label-width="140px"
          :rules="rules"
        >
          <el-form-item label="用工单位" prop="companyName">
            <el-input
              maxlength="50"
              placeholder="请输入"
              v-model.trim="form.companyName"
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="companyTid">
            <el-input
              placeholder="请输入18位有效社会统一信用代码"
              v-model.trim="form.companyTid"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="cityId">
            <jl-city-cascader
              :disabled="disabled"
              v-model="form.cityId"
            ></jl-city-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="companyAddress">
            <el-input
              placeholder="请输入"
              v-model.trim="form.companyAddress"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属行业" prop="tradeId">
            <el-select placeholder="请选择" v-model="form.tradeId">
              <el-option
                v-for="item in tradeDic"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业营业执照：" prop="authUrlId">
            <el-upload
              :action="putFile"
              :show-file-list="false"
              :on-progress="
                () => {
                  uploading = true;
                }
              "
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :http-request="httpRequest"
            >
              <div v-loading="uploading">
                <img
                  class="companyInfo-upload-image"
                  :src="form.authUrlId || imageUrl"
                />
              </div>
              <!-- <div class="companyInfo-upload-tip" slot="tip">
                请上传营业执照
              </div> -->
            </el-upload>
            <p class="uploadImgP">上传图片大小限制2M以内</p>
          </el-form-item>
          <el-form-item>
            <el-button @click="next" type="primary">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { putFile } from "@/api/resource/oss";
import { getTradeDic } from "@/api/manage/trade";
import { checkIdentity } from "@/api/tenant/auth";
import lodash from "lodash";
import httpRequest from "./httpRequest";

const accept = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"];

export default {
  props: {
    value: Object,
  },
  data() {
    const validateId = (rule, value, callback) => {
      checkIdentity(value)
        .then(() => {
          callback();
        })
        .catch((err) => {
          
          callback(err);
          this.$message.closeAll();
        });
    };
    return {
      uploading: false,
      putFile,
      imageUrl: "/img/license.png",
      rules: {
        companyName: [
          { required: true, message: "请输入用工单位", trigger: "blur" },
        ],
        companyTid: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
          {
            max: 18,
            min: 18,
            trigger: "blur",
            message: "请输入18位有效社会统一信用代码",
          },
          {
            trigger: "blur",
            validator: validateId,
          },
        ],
        cityId: [
          {
            required: true,
            message: "请选择所在地区",
            trigger: "blur",
          },
        ],
        companyAddress: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        tradeId: [
          {
            required: true,
            message: "请选择所属行业",
            trigger: "blur",
          },
        ],
        authUrlId: [
          {
            required: true,
            message: "请上传营业执照",
            trigger: "change",
          },
        ],
      },
      form: lodash.clone(this.value || {}),
      tradeDic: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getTradeDic(true).then((res) => {
        this.tradeDic = res.data.data;
      });
    },
    next() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.form);
          this.$emit("input", this.form);
        }
      });
    },
    /**上传图片**/
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$set(this.form, "authUrlId", res.data.link);
      this.uploading = false;
    },
    beforeAvatarUpload(file) {
      const isJPG = accept.includes(file.type);
      const is2M=file.size/1024/1024<2;
      if (!isJPG) {
        this.$message.error("图片格式不正确!");
      }
      if(!is2M){
        this.$message.error("上传图片大小不能超过2M!");
      }
      return isJPG && is2M;
    },
    /**上传图片*/
    httpRequest,
  },
  watch: {
    value(val) {
      this.form = val;
    },
    form: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.companyInfo-upload-image {
  height: 100px;
  width: 160px;
}
.companyInfo-upload-tip {
  line-height: 12px;
  font-size: 12px;
  color: #999999;
}
.el-form-item__content{
  line-height: normal;
}
.uploadImgP{
  padding: 0;
  margin: 0;
  line-height: 18px;
}
</style>