FE_preschoolEdu_server/src/pages/supplier/manage/auth.vue

<template>
  <div class="page">
    <div class="action">
      <span v-if="form.auditStatus !== '' && !editing"
            class="status">{{ auditStatus.find(e => e.id === form.auditStatus).name }}</span>
      <el-button v-if="!editing"
                 @click="edit">编辑</el-button>
    </div>
    <el-form label-width="170px"
             label-suffix=":"
             class="input-form model"
             size="small"
             :disabled="!editing">
      <el-form-item label="认证状态">
        <el-select v-model="form.authenticationStatus"
                   clearable>
          <el-option v-for="(item, i) in authenticationStatus"
                     :key="i"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商名称">
        <div class="d-inline-block">
          <el-input v-model="form.companyName" />
        </div>
      </el-form-item>
      <el-form-item label="统一社会信用代码">
        <div class="d-inline-block">
          <el-input v-model="form.creditCode" />
        </div>
      </el-form-item>
      <el-form-item label="法人">
        <div class="d-inline-block">
          <el-input v-model="form.legalPerson" />
        </div>
      </el-form-item>
      <el-form-item label="营业执照">
        <el-image v-if="form.businessLicensePicture"
                  class="pic"
                  :src="form.businessLicensePicture"
                  :preview-src-list="[form.businessLicensePicture]" />

        <Upload :limit="1"
                :showFileList="false"
                :on-remove="handleBusinessRemove"
                @onSuccess="uploadBusinessSuccess">
          <template slot="tip">
            <p>请上传.jpg，.jpeg，.png格式的营业执照</p>
          </template>
        </Upload>
      </el-form-item>
      <div class="aline"></div>

      <div class="info">
        <div class="field">
          <label>申请人</label>
          <p class="val">{{ form.account }}</p>
        </div>
        <div class="field">
          <label>联系方式</label>
          <p class="val">{{ form.contactInformation }}</p>
        </div>
        <div class="field">
          <label>提交时间</label>
          <p class="val">{{ form.submitTime }}</p>
        </div>
      </div>
    </el-form>

    <div class="btns">
      <el-button v-if="editing"
                 type="primary"
                 @click="submit">保存</el-button>
      <el-button @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import Util from "@/libs/util";
import Setting from "@/setting";
import Const from '@/const/user'
import Upload from '@/components/upload';
export default {
  data () {
    return {
      id: this.$route.query.id,
      auditStatus: Const.auditStatus,
      authenticationStatus: [
        {
          id: 2,
          name: '已认证'
        },
        {
          id: 0,
          name: '未认证'
        },
      ],
      form: {
        companyName: '',
        creditCode: '',
        legalPerson: '',
        auditStatus: '',
        authenticationStatus: ''
      },
      editing: false,
      submiting: false,
    };
  },
  components: {
    Upload
  },
  mounted () {
    this.$store.commit('user/setCrumbs', [
      {
        name: '供应商管理',
        route: '/supplier'
      },
      {
        name: '认证信息'
      },
    ])
    this.getData()
  },
  methods: {
    getData () {
      this.$post(`${this.api.enterpriseCertificationDetails}?id=${this.id}`).then(({ data }) => {
        if (data.authenticationStatus === 1) data.authenticationStatus = ''
        this.form = data
      }).catch(err => { })
    },
    // 编辑
    edit () {
      this.editing = true
    },
    handleBusinessRemove () {
      this.form.businessLicensePicture = ''
    },
    // 上传成功
    uploadBusinessSuccess ({ url }) {
      this.form.businessLicensePicture = url
    },
    // 提交
    async submit () {
      const { form } = this
      if (form.authenticationStatus === '') return Util.warningMsg('请选择认证状态')
      if (!form.companyName) return Util.warningMsg('请输入供应商名称')
      if (!form.creditCode) return Util.warningMsg('请输入统一社会信用代码')
      if (!form.legalPerson) return Util.warningMsg('请输入法人')

      if (this.submiting) return false
      this.submiting = true
      // 幼儿园和供应商有两个状态 authenticationStatus是认证状态，auditStatus是流程审批状态，authenticationStatus改成已认证后，auditStatus也要改成通过；authenticationStatus改成未认证后，如果未提交的，auditStatus要改成未提交，如果是已提交的，则改成不通过
      // form.auditStatus = form.authenticationStatus === 2 ? 2 : form.auditStatus
      form.auditStatus = form.authenticationStatus
      try {
        await this.$post(this.api.updateCertification, form).then(res => {
          Util.successMsg('保存成功！');
          this.$router.back()
        })
      } catch (e) {
        this.submiting = true
      }
    },
  }
};
</script>

<style scoped lang="scss">
.page {
    position: relative;
    padding-bottom: 80px;
    .action {
        z-index: 1;
        position: absolute;
        right: 50px;
        .status {
            margin-right: 10px;
            color: #2962ff;
        }
    }
}
.pic {
    max-width: 500px;
}
.input-form.model {
    height: calc(100vh - 310px);
}
.info {
    .field {
        display: flex;
        justify-content: space-between;
        width: 470px;
        margin: 10px 0;
    }
    label {
        font-size: 14px;
    }
    .val {
        font-size: 15px;
        font-weight: 600;
        color: #333;
    }
}
</style>