boss/components/drawer/invoice/user_invoice_add.vue

<template>
  <el-drawer
    title="上传发票"
    size="600px"
    :append-to-body="false"
    :destroy-on-close="true"
    :visible="true"
    :modal-append-to-body="false"
    :before-close="handleClose"
    :wrapperClosable="false"
    ref="drawer_close">
    <el-form label-width="100px" style="padding: 20px" v-loading="loading" class="qs-form-add">
      <el-form-item label="销售方">
        <el-input v-model="ruleForm.sale_company_name"></el-input>
      </el-form-item>
      <el-form-item label="购买方">
        <el-input v-model="ruleForm.buy_company_name"></el-input>
      </el-form-item>
      <el-form-item label="发票金额">
        <el-input v-model="ruleForm.money"></el-input>
      </el-form-item>
      <el-form-item label="发票号码">
        <el-input v-model="ruleForm.tax_number"></el-input>
      </el-form-item>
      <el-form-item label="备注信息">
        <el-input v-model="ruleForm.memo"></el-input>
      </el-form-item>
      <el-form-item label="发票类型">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="1">普票</el-radio>
          <el-radio :label="2">专票</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="税率">
        <el-radio-group v-model="ruleForm.type_child">
          <el-radio :label="21">1个点</el-radio>
          <el-radio :label="22">3个点</el-radio>
          <el-radio :label="23">6个点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="业务类型">
        <el-radio-group v-model="ruleForm.is_income">
          <el-radio :label="1">进账</el-radio>
          <el-radio :label="2">出账</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发票文件">
        <el-upload
          class="upload-demo"
          action="/uapi/pub/upload"
          :data="{type:'invoice'}"
          :on-success="(response, file, fileList)=> upload_success(response, file, fileList,1)"
          :on-remove="(file, fileList)=> upload_remove(file, fileList,1)"
          accept="application/pdf,image/jpeg,image/gif,image/png"
          multiple
          :on-exceed="handleExceed"
          :limit="1"
          :file-list="user_invoice_fileList">
          <div style="display:flex;align-items: center">
            <div><el-button size="small" type="primary">点击上传</el-button></div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()">保存</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
  export default {
    props: {
      action: {
      },
      pro: {
      },
      back:{
        type:Object
      },
    },
    data() {
      return {
        search: {
          pagesize: 15,
          page:0,
          total:0,
        },
        user_invoice_fileList:[],
        loading:false,
        ruleForm: {
          type:1,
          is_income:2,
        }
      };
    },
    computed: {},
    watch: {},
    created() {},
    async mounted() {
        await this.getInfo();
    },
    methods: {
      handleClose:function()
      {
        this.back.drawer_obj.user_invoice_add=false;
        this.back.drawer_obj.id="";
      },
      async getInfo()
      {
        let id=this.pro;
        if(id)
        {
          let res = await this.$post("/uapi/pub/info/user/user_invoice/admin_info",{id:id});
          if (res.status == 1) {
            if(res.data.file)
            {
              this.user_invoice_fileList=[{"name":"发票文件","url":res.data.file}]
            }
            this.ruleForm=res.data;
          }
        }
      },
      async add() {
        this.loading = true;
        let data=this.ruleForm;
        let res = await this.$post("/uapi/pub/info/user/user_invoice/admin_add", data);
        this.loading = false;
        if (res.status == 1) {
          this.$message.success(`添加成功`);
          this.back.drawer_obj.user_invoice_add=false;
          this.back.drawer_obj.id="";
          this.back.getList();
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传一个文件`);
      },
      upload_success(res, file, fileList,type){
        if(res.status!=1)
        {
          if(type==1)
          {
            let fileList_=[];
            for(var i=0;i<fileList.length;i++)
            {
              let data=fileList[i];
              if(data.response.status==1)
              {
                fileList_.push(fileList[i])
              }
            }
            this.user_invoice_fileList=fileList_;
            this.ruleForm.file="";
          }
          this.$message.error(res.info);
        }
        else
        {
          if(type==1)
          {
            this.user_invoice_fileList=fileList;
            this.ruleForm.file=res.data.url;
          }
        }
      },
      upload_remove( file, fileList,type){
        if(type==1)
        {
          this.user_invoice_fileList=fileList;
          this.ruleForm.file="";
        }
      }
    }
  };
</script>

<style scoped>
  .el-tag {
    cursor: pointer;
  }
</style>