great_webui/src/views/distribution/withdrawalApp/dialog/imgAduit.vue

<!--
 * @Description: 打款凭证弹框
-->
<template>
  <el-dialog :title="title" :visible.sync="open" width="600" append-to-body :close-on-click-modal="false"
    @close="cancel">
    <div class="dialog" v-if="form">
      <div v-loading="loading" element-loading-text="加载详情中...">
        <!-- 对公支付信息 -->
        <el-form :model="form" ref="form" :rules="rules" label-width="120px">
          <el-form-item label="打款凭证：" prop="voucherImg">
              <el-upload
                ref="upload"
                list-type="picture-card"
                :limit="2"
                :file-list="form.voucherImg"
                :action="uploadObj.url"
                :headers="uploadObj.headers"
                :before-upload="beforeAvatarUpload" 
                :on-success="handleAvatarSuccess"
                :on-progress="handleAvatarProgress" 
                :disabled="actionUrlLoading" 
                :on-error="handleAvatarError"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <!-- <div style="width: 100px; height: 100px;margin-top: 5px;" v-if="!form.voucherImg || form.voucherImg.length < 15"
                v-loading="actionUrlLoading" element-loading-text="上传中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-upload 
                 class="avatar-uploader" 
                  :action="uploadObj.url" 
                  :headers="uploadObj.headers"
                  :show-file-list="false" 
                  :before-upload="beforeAvatarUpload" 
                  :on-success="handleAvatarSuccess"
                  :on-progress="handleAvatarProgress" 
                  :disabled="actionUrlLoading" 
                  :on-error="handleAvatarError">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div> -->
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="handleWithdrawAudit()" :loading="loading">
        <span v-if="loading">提交中...</span>
        <span v-else>保存</span>
      </el-button>
    </span>

  </el-dialog>
</template>

<script>
// import { getSelectById, updateCorporateApi } from '@/api/order/groupBuyingMr'
import { 
  withdrawAudit
} from '@/api/distribution/Withdrawl'
import { getToken } from "@/utils/auth";
export default {
  name: "imgAduit",
  data() {
    return {
      title: "上传打款凭证",
      model: "EDIT",
      open: false,
      loading: false,
      form: {
        withdrawLogId: undefined,
        voucherImg: [],
        remark: null,
      },
      rules: {
        voucherImg: [{ required: true, message: "请上传凭证", trigger: ["change","blur"] }],
        remark: [
          { required: true, message: '请输入备注', trigger: ['change','blur' ]}
        ],
      },
      loading_form: false,//  加载表单
      uploadObj: {
        url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
        Headers: { Authorization: "Bearer " + getToken() },
      },
      actionUrlLoading:false,
    };
  },
  methods: {
    // 打开弹框
    async openDialog(title, obj) {
      this.title = title
      this.open = true;
      if(obj.voucherImg){
        if(obj.voucherImg.indexOf(',') > -1){
          let img_list = obj.voucherImg.split(',');
          let img_list_new = [];
          img_list.forEach((item, index) => {
            img_list_new.push({
              url: item,
            })
          });
          this.$set(this.form, 'voucherImg', img_list_new);
        } else {
          this.$set(this.form, 'voucherImg', [{url: obj.voucherImg}]);
        }
      } else {
        this.$set(this.form, 'voucherImg', []);
      }
      this.$set(this.form, 'withdrawLogId', obj.id);
      this.$set(this.form, 'remark', obj.remark);
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    /** 保存打款凭证 */
    async handleWithdrawAudit() { 
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            if(this.form.voucherImg.length==0) {
              this.$message.error("请上传打款凭证!");
            }
            this.loading = true
            let param = JSON.parse(JSON.stringify(this.form))
            let imgStr = ''
            if(param.voucherImg.length != 0){
              param.voucherImg.forEach((item, index) => {
                if(index < param.voucherImg.length - 1) {
                  imgStr += item.url + ","
                } else {
                  imgStr += item.url
                }
              })
            }
            param.voucherImg = imgStr
            console.log(param,'param111')
            let res = await withdrawAudit(param)
            if(res.code == 200) {
              this.$message.success("操作成功!");
              this.loading = false
              this.$emit("getList");
              this.cancel()
            }else {
              this.loading = false
            }
          } catch (error) {
            console.error(error)
            this.loading = false
          }
        }
      })
    },
    cancel() {
      this.open = false;
    },
    /**  上传图片 单张  */
    handleAvatarSuccess(response, file, fileList) {
      console.log("res, file",response, file, fileList)
      this.actionUrlLoading = false
      if(response.code == 200) {
        this.form.voucherImg.push({url: response.data.url})
      }
      this.$refs.form.validateField('voucherImg')
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 <= 100;
      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      let typeList = ['png','jepg','jpg','gif']
      const isJPG = typeList.includes(testmsg);
      if (!isJPG) {
        this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
      }
      if (!isLt2M) {
        this.$message.error('上传图片图片大小不能超过 100MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarProgress(){
      this.actionUrlLoading = true
    },
    handleAvatarError() {
      this.actionUrlLoading = false
    },
    handleRemove(file, fileList) {
      console.log(file,'qqq');
      this.form.voucherImg.forEach((item, index) => {
        if(item.url == file.url){
          this.form.voucherImg.splice(index, 1)
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 100%;
}
.dialog {
  padding: 0 30px;
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
  .title-class{
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .item-class{
    margin-bottom: 20px;
  }
}

.voucher-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
}
.pay-type-remark{
  margin:14px 0;
}

.dialog-bbb {
  width: 100%;
  display: flex;
  --widdd: 700px;

  >div:first-child {
    width: var(--widdd);
    flex-shrink: 0;
    overflow-y: auto;
    padding: 0 0 10px 0;
    margin-right: 10px;
  }

  .dialog-bbb_2 {
    width: calc(100% - var(--widdd));
    height: 100%;
  }
}

</style>