boss/components/drawer/user_invoice_order/my.vue

<template>
  <div v-loading="loading">
    <div class="qs_search" style="margin-bottom: 0px;display: flex;justify-content: space-between;align-items: center;">
      <el-form ref="form" label-width="80px" style="display: flex;flex-direction: row;">
        <el-form-item label="公司名称">
          <el-input size="small" v-model="search.company_name"></el-input>
        </el-form-item>
        <el-form-item label-width="5px">
          <el-button @click="getList" size="small" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="company_name" label="公司名称"></el-table-column>
      <el-table-column label="开票用户"  prop="uid">
        <template slot-scope="scope">
          <a :href="scope.row.user_link" target="_blank">{{scope.row.uid}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="money"  label="开票金额"></el-table-column>
      <el-table-column prop="address" label="状态">
        <template slot-scope="scope">
          <span :style="`color: ${scope.row.status_obj.color}`">{{scope.row.status_obj.name}}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="addtime"  label="申请时间"></el-table-column>
      <el-table-column  prop="addtime"  label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="show_info_dialog(scope.row)" type="primary">开票明细</el-button>
          <el-button size="mini" v-if="scope.row.status==1" @click="cancel(scope.row)" type="info">撤销开票</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
      background
      style="margin-top: 10px"
      layout="total,prev, pager, next"
      @current-change="page_event"
      :page-size="search.pagesize"
      :total="search.total">
    </el-pagination>


    <el-dialog :append-to-body="true" :close-on-click-modal="false" v-loading="loading" title="开票明细" width="1200px" :visible.sync="show_info">
      <div style="display: flex;flex-flow: row;justify-content: space-between">
        <div style="width: 400px;">
          <el-divider>客户信息</el-divider>
          <div class="user_account" style="display: flex;flex-flow: column">
            <el-form label-width="80px">
              <el-form-item label="名称">{{show_info_data.apply_content.company_name}}</el-form-item>
              <el-form-item label="税号">{{show_info_data.apply_content.tax_number}}</el-form-item>
              <el-form-item label="单位地址">{{show_info_data.apply_content.company_address}}</el-form-item>
              <el-form-item label="电话号码">{{show_info_data.apply_content.company_tel}}</el-form-item>
              <el-form-item label="开户银行">{{show_info_data.apply_content.address}}</el-form-item>
              <el-form-item label="银行账号">{{show_info_data.apply_content.bank_number}}</el-form-item>
              <el-form-item label="邮箱">{{show_info_data.apply_content.email}}</el-form-item>
            </el-form>
          </div>
          <el-divider>关联订单</el-divider>
          <div class="user_account" style="display: flex;flex-flow: column">
            <el-form label-width="80px">
              <el-form-item v-for="item in show_info_data.g_order" label="订单："><a target="_blank" :href="`/main/orders_detail/?id=${item}`">{{item}}</a></el-form-item>
            </el-form>
          </div>
        </div>
        <div style="width: 50px;border-right: 1px solid #DCDFE6;"></div>
        <div  style="width: 50%">
          <el-divider v-if="show_info_data.memo">特别说明</el-divider>
          <div v-if="show_info_data.memo" class="user_account" style="display: flex;flex-flow: column">
            <el-form>
              <el-form-item v-html="show_info_data.memo"></el-form-item>
            </el-form>
          </div>
          <el-divider v-if="show_info_data.memo">发票备注</el-divider>
          <div v-if="show_info_data.memo" class="user_account" style="display: flex;flex-flow: column">
            <el-form>
              <el-form-item v-html="show_info_data.kh_memo"></el-form-item>
            </el-form>
          </div>
          <el-divider>开票信息</el-divider>
          <div class="user_account" style="display: flex;flex-flow: column">
            <el-form label-width="80px">
              <el-form-item label="开票金额">
                <span style="font-size:20px;font-weight: 700;color: red;">{{show_info_data.money}}</span>元
                <el-link v-if="show_info_data.status==2 && show_info_data.user_invoice.file" style="margin-left: 30px"  :href="show_info_data.user_invoice.file" type="success" target="_blank">查看发票</el-link>
              </el-form-item>
              <el-form-item label="发票类型">{{show_info_data.type==1?"普票":"专票"}}</el-form-item>
              <el-form-item  v-if="show_info_data.status==1" label="发票号码">
                <el-input size="small" style="width: 200px" v-model="show_info_data.tax_number" placeholder="发票号码"></el-input>
              </el-form-item>
              <el-form-item v-if="show_info_data.status==1" 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="mini" type="primary">点击上传</el-button></div>
                    <div style="margin-left: 10px" slot="tip" class="el-upload__tip">只能上传pdf文件</div>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
          <el-form  v-if="show_info_data.status==1" style="margin-top: 20px" label-width="120px">
            <el-button type="primary" size="small" @click="user_invoice_order_submit">确认开票</el-button>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      back:{
        type:Object
      },
    },
    data() {
      return {
        show_info:false,
        show_info_data:{
          apply_content:{}
        },
        loading:true,
        list:[],
        user_account:{},
        search:{
          page:1,
          total:0,
          pagesize:10
        },
        user_invoice_fileList:[],
        user_invoice:{},
      };
    },
    page_event(page) {
      this.search.page = page;
      this.getList();
    },
    async mounted() {
      this.getList();
    },
    methods: {
      page_event(page) {
        this.search.page = page;
        this.getList();
      },
      async show_info_dialog(row)
      {
        this.show_info_data=row;
        this.show_info=true;
      },
      async getList() {
        this.loading = true;
        let res = await this.$post("/uapi/pub/info/user/user_invoice_order/my_admin",this.search);
        if (res.status == 1) {
          this.list=res.data.list;
          this.search.total=res.data.total;
        }
        this.loading = false;
      },
      async user_invoice_order_submit()
      {
        this.loading = true;
        let res = await this.$post("/uapi/pub/info/user/user_invoice_order/submit_admin",{id:this.show_info_data.id,tax_number:this.show_info_data.tax_number,file:this.show_info_data.file});
        if (res.status == 1) {
          this.list=res.data.list;
          await  this.getList();
          this.show_info=false;
        }
        this.loading = false;
      },
      async cancel(row)
      {
        this.$confirm('是否确认取消开票?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await this.$post("/uapi/pub/info/user/user_invoice_order/cancel_admin",{id:row.id});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '撤销成功!'
            });
            this.getList();
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      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.show_info_data.file="";
          }
          this.$message.error(res.info);
        }
        else
        {
          if(type==1)
          {
            this.user_invoice_fileList=fileList;
            this.show_info_data.file=res.data.url;
          }
        }
      },
      upload_remove( file, fileList,type){
        if(type==1)
        {
          this.user_invoice_fileList=fileList;
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传一个文件`);
      },
    }
  };
</script>

<style scoped>
  .el-tag {
    cursor: pointer;
  }
  .user_account .el-form .el-form-item{
    margin-bottom: 0px;
  }
</style>