boss/components/drawer/invoice/order_settlement.vue

<template>
  <el-drawer
    :title="`关联订单（发票总价：￥${fp_info.money}）`"
    size="60%"
    :append-to-body="false"
    :destroy-on-close="true"
    :visible="true"
    :modal-append-to-body="false"
    :before-close="handleClose"
    :wrapperClosable="false"
    ref="drawer_close">
    <div v-loading="loading" style="padding: 20px"  class="block">
      <div style="display: flex;justify-content: space-between">
        <div></div>
        <el-button size="small" @click="g_order" type="primary">关联订单</el-button>
      </div>
      <el-table row-key="id"  show-summary :data="list">
        <el-table-column prop="title" width="400px" label="订单名称">
          <template slot-scope="scope">
            <a :href="`/main/orders_detail/?id=${scope.row.order_no}`" style="color: #006eff" target="_blank">{{scope.row.product_title}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="amount"  label="订单金额">
          <template slot-scope="scope">
            <span>{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="关联项目">
          <template slot-scope="scope">
            <a :href="scope.row.project_url" style="color: #006eff" target="_blank">{{scope.row.project_name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="订单编号">
          <template slot-scope="scope">
            <span>{{scope.row.order_no}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" width="100px" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="qx_g_order(scope.row)">取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
  export default {
    props: {
      action: {
      },
      pro: {
      },
      back:{
        type:Object
      },
      fp_info:{
        type:Object
      }
    },
    data() {
      return {
        search: {
          pagesize: 15,
          page:0,
          total:0,
        },
        loading:true,
        list: []
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      async qx_g_order(row) {
        this.$confirm('是否确认取消关联?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/order/user_order/qx_g_order",{order_no:row.order_no,invoice_id:this.pro});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '成功!'
            });
            await this.getList();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleClose:function()
      {
        this.back.drawer_obj.order_settlement=false;
        this.back.drawer_obj.id="";
      },
      async g_order() {
        this.$prompt('请输入关联的订单编号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async  ({ value }) => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/order/user_order/bd_invoice_id",{id:this.pro,order_no:value});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '关联成功!'
            });
            await this.getList();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关联'
          });
        });
      },
      async getList() {
        this.loading = true;
        let res = await  this.$post("/uapi/pub/info/order/user_order/invoice_order_list",{id:this.pro});
        this.loading = false;
        if (res.status == 1) {
          this.list = res.data.list;
          this.search.total = res.data.total;
        }
      },
      page_event(page) {
        this.search.page = page;
        this.getList();
      },
    }
  };
</script>

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