boss/components/drawer/invoice/apply_invoice.vue

<template>
  <div>
  <el-drawer
    title="申请开票"
    size="80%"
    :append-to-body="false"
    :destroy-on-close="true"
    :visible="true"
    :modal-append-to-body="false"
    :before-close="handleClose"
    :wrapperClosable="false"
    ref="drawer_close">
    <el-tabs v-model="activeName"  style="padding: 20px;padding-top: 0px" @tab-click="handleClick">
      <el-tab-pane label="申请开票" name="first">
        <div  v-loading="loading" style="display: flex;justify-content: space-between">
          <el-form label-width="100px" style="width: 600px;border-right: 1px solid #DCDFE6;padding-top: 20px;padding-right: 20px;"  class="qs-form-add">
            <el-form-item label="开票用户">
              <el-input placeholder="请输入开票方的UID" @change="getUserAccount" v-model="ruleForm.uid"></el-input>
            </el-form-item>
            <el-form-item label="开票金额">
              <el-input v-model="ruleForm.money" placeholder="请输入开票金额"></el-input>
            </el-form-item>
            <el-form-item label="发票备注">
              <el-input  type="textarea" :rows="4" v-model="ruleForm.kh_memo" placeholder="客户要求的发票备注信息，没有则不填"></el-input>
            </el-form-item>
            <el-form-item label="特别说明">
              <el-input  type="textarea" :rows="4" v-model="ruleForm.memo" placeholder="比如收款日期，收款方式等"></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-switch
                style="margin-left: 20px"
                v-model="ruleForm.kp_type"
                active-value="1"
                inactive-value="0"
                active-text="先票后款"
                inactive-text="">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <el-button size="small" v-if="user_account.id && ruleForm.uid" type="primary" @click="add_user_invoice_order()">确认开票</el-button>
              <el-button size="small" v-if="!user_account.id || !ruleForm.uid" type="primary" disabled>确认开票</el-button>
              <el-button size="small" v-if="ruleForm.uid && !user_account.id" type="primary" @click="show_account_dialog()">添加开票信息</el-button>
              <el-button size="small" v-if="ruleForm.uid && user_account.id" type="primary" @click="show_account_dialog()">修改加开票信息</el-button>
            </el-form-item>
            <div v-if="user_account.id">
              <el-form-item label="销售方：">
                {{user_account.company_name}}
              </el-form-item>
              <el-form-item label="收款人：">
                {{user_account.real_name?user_account.real_name:user_account.company_name}}
              </el-form-item>
              <el-form-item label="发票号码：">
                {{user_account.tax_number}}
              </el-form-item>
              <el-form-item label="单位地址：">
                {{user_account.company_address}}
              </el-form-item>
              <el-form-item label="电话号码：">
                {{user_account.company_tel}}
              </el-form-item>
              <el-form-item label="开户银行：">
                {{user_account.address}}
              </el-form-item>
              <el-form-item label="银行账号：">
                {{user_account.bank_number}}
              </el-form-item>
              <el-form-item label="邮箱：">
                {{user_account.email}}
              </el-form-item>
            </div>
          </el-form>
          <el-form label-width="100px" style="padding: 20px;width: 100%;border-right: 1px solid #DCDFE6" class="qs-form-add">
            <el-form-item label="关联订单"></el-form-item>
            <div style="padding: 20px;padding-top: 0px">
              <el-table
                ref="multipleTable"
                :data="order.list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column label="订单编号" width="180" prop="order_no"></el-table-column>
                <el-table-column prop="real_amount_yuan" label="订单金额" width="140"></el-table-column>
                <el-table-column prop="order_type_name" width="140px" label="订单类型"></el-table-column>
                <el-table-column prop="address" label="关联项目">
                  <template slot-scope="scope">
                    <a :href="scope.row.related_project.url?scope.row.related_project.url:'#'" target="_blank">
                      <span class="lblue">{{scope.row.related_project.name?scope.row.related_project.name:"--"}}</span>
                    </a>
                  </template>
                </el-table-column>
                <el-table-column label="支付时间" width="160px">
                  <template slot-scope="scope">
                    <span>{{formatDate(scope.row.pay_time)}}</span>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination
                background
                style="margin-top: 10px"
                layout="total,prev, pager, next"
                @current-change="page_event"
                :page-size="order_search.pagesize"
                :total="order_search.total">
              </el-pagination>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的开票" name="second">
        <my v-if="activeName=='second'" :back="this"></my>
      </el-tab-pane>

    </el-tabs>
  </el-drawer>
  <el-dialog  v-loading="loading"  :close-on-click-modal="false" title="添加账号" @close="getUserAccount" width="600px" :visible.sync="account_dialog">
    <el-form  label-width="80px">
      <el-form-item label="名称">
        <el-input size="smill" style="width: 400px" v-model="user_account.company_name" placeholder="XXXXX公司"></el-input>
      </el-form-item>
      <el-form-item label="收款人">
        <el-input size="smill" style="width: 400px" v-model="user_account.real_name" placeholder="非必要不要填写"></el-input>
        <p style="color: red">*非必要不要填写</p>
      </el-form-item>
      <el-form-item label="税号">
        <el-input size="smill" style="width: 400px" v-model="user_account.tax_number" placeholder="企业输入税号，暂不支持个人开票"></el-input>
      </el-form-item>
      <el-form-item label="单位地址">
        <el-input size="smill" style="width: 400px" v-model="user_account.company_address" placeholder="X省X市X区街道152号"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input size="smill" style="width: 400px" v-model="user_account.company_tel" placeholder="0571-XXXXXXXX"></el-input>
      </el-form-item>
      <el-form-item label="开户银行">
        <el-input size="smill"  style="width:400px" v-model="user_account.address"  placeholder="请输入开户银行的银行地址"></el-input>
      </el-form-item>
      <el-form-item label="银行账户">
        <el-input size="smill"  style="width:400px" v-model="user_account.bank_number"  placeholder="请输入银行账户"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input size="smill"  style="width:400px" v-model="user_account.email"  placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="account_submit">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  </div>
</template>

<script>
  import my from '@/components/drawer/user_invoice_order/my'
  export default {
    components: {my},
    props: {
      action: {
      },
      pro: {
      },
      back:{
        type:Object
      },
    },
    data() {
      return {
        activeName:"first",
        order:{
          list:[],
          total:0,
        },
        account_dialog:false,
        user_account:{},
        search: {
          pagesize: 15,
          page:0,
          total:0,
        },
        user_invoice_fileList:[],
        loading:false,
        ruleForm: {
          type:1,
          is_income:2,
          kp_type:0
        },
        multipleSelection:[],
        order_search:{order_type:1,view:"platform",date_type:1,status:401,artificial_mark:0,active_name:"all",page:1,page_size:20}
      };
    },
    computed: {},
    watch: {},
    created() {},
    async mounted() {

    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    async account_submit(){
      this.loading=true;
      let data=this.user_account;
      data.uid=this.ruleForm.uid;
      data.post_type="admin";
      let res=await this.$post("/uapi/pub/info/user/user_account/add_admin",data,"","json");
      if(res.status!=1){

      }
      else
      {
        await this.getUserAccount();
        this.account_dialog=false;
      }
      this.loading=false;
    },
    async show_account_dialog(){
      this.account_dialog=true;
    },
    formatDate(time) {
      if (time === "0") {
        return "--";
      }
      let now = new Date(time * 1000);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
      handleClose:function()
      {
        this.back.drawer_obj.apply_invoice=false;
        this.back.drawer_obj.id="";
      },
      async getUserAccount()
      {
        this.loading = true;

        //获取订单信息
        let order_search=this.order_search;
        order_search.user=this.ruleForm.uid;
        let res = await this.$post("/api/admin/order/get_orders",this.order_search);
        if (res.status == 1) {
          this.order.list=res.data.orders;
          this.order.total=res.data.count;
          this.order_search.total=res.data.count;
        }

        //获取开票信息
        res = await this.$post("/uapi/pub/info/user/user_account/get_info_admin",{uid:this.ruleForm.uid});
        if (res.status == 1) {
          this.user_account=res.data;
        }

        this.loading = false;
      },
      page_event(page) {
        this.order_search.page = page;
        this.getUserAccount();
      },
      async add_user_invoice_order() {
        this.loading = true;
        let data=this.ruleForm;
        let g_order="";
        this.multipleSelection.forEach(item=>{
          g_order+=","+item.id;
        })
        data.g_order=g_order;
        let res = await this.$post("/uapi/pub/info/user/user_invoice_order/add_admin", data);
        this.loading = false;
        if (res.status == 1) {
          this.activeName='second';
          this.$message.success(`添加成功`);
        }
      },
      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>