order-ui-pc/src/components/changeDialog/invoice.vue

<template>
  <el-dialog
    v-loading="loading"
    title="选择发票"
    :center="true"
    align="left"
    top="7vh"
    width="1024px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
    @close="closeModel"
  >
    <el-card style="height: 700px; margin-top: -25px">
      <el-row :gutter="10">
        <el-col :span="24" style="padding: 0 0 10px 0">
          <el-col :span="8" style="width: 290px">
            <el-input v-model="parmValue.invNo" placeholder="请输入发票编号">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchList"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="4" style="width: 160px" class="fr tr">
            <el-button type="primary" @click="searchList"> 刷新 </el-button>
            <el-button type="warning" @click="restSearch"> 重置 </el-button>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="tableData"
            ref="multipleTable"
            stripe
            border
            :size="'mini'"
            max-height="610"
            style="width: 100%"
            row-key="id"
            :expand-row-keys="expands"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="45"
                 fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="invNo"
              label="发票编号"
              show-overflow-tooltip
              width="170"
            ></el-table-column>
                <el-table-column
              prop="inv_in"
              label="企业编码"
              show-overflow-tooltip
              min-width="130"
            ></el-table-column>
            <el-table-column
              prop="company"
              label="企业名称"
              show-overflow-tooltip
              min-width="170"
            ></el-table-column>
            <el-table-column
              prop="apply_name"
              label="处理人"
              show-overflow-tooltip
              min-width="70"
            ></el-table-column>

            <el-table-column
              prop="inv_value"
              label="发票额度"
              show-overflow-tooltip
              min-width="110"
            ></el-table-column>

            <el-table-column
              label="关联资金信息"
              show-overflow-tooltip
              align="center"
            >
              <el-table-column
                prop="atrade_fee"
                label="已核销金额"
                show-overflow-tooltip
                min-width="110"
              ></el-table-column>
              <el-table-column
                prop="fund_used"
                label="处理中的金额"
                show-overflow-tooltip
                min-width="110"
              ></el-table-column>
              <el-table-column
                prop="wtrade_fee"
                label="未核销金额"
                show-overflow-tooltip
                min-width="110"
              ></el-table-column>
              <el-table-column
                label="核销状态"
                show-overflow-tooltip
                min-width="95"
              >
                <template slot-scope="scope">
                  <el-tag
                    type="danger"
                    :size="'mini'"
                    v-if="scope.row.trade_status === '1'"
                    >未核销</el-tag
                  >
                  <el-tag
                    type="warning"
                    :size="'mini'"
                    v-else-if="scope.row.trade_status === '2'"
                    >部分核销</el-tag
                  >
                  <el-tag type="" :size="'mini'" v-else>全部核销</el-tag>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="关联确认单信息"
              show-overflow-tooltip
              align="center"
            >
              <el-table-column
                prop="aorder_fee"
                label="已核销金额"
                show-overflow-tooltip
                min-width="110"
              ></el-table-column>
              <el-table-column
                prop="order_used"
                label="处理中的金额"
                show-overflow-tooltip
                min-width="110"
              ></el-table-column>
              <el-table-column
                prop="worder_fee"
                label="未核销金额"
                show-overflow-tooltip
                min-width="110"
              ></el-table-column>
              <el-table-column
                label="核销状态"
                show-overflow-tooltip
                min-width="95"
              >
                <template slot-scope="scope">
                  <el-tag
                    type="danger"
                    :size="'mini'"
                    v-if="scope.row.order_status === '1'"
                    >未核销</el-tag
                  >
                  <el-tag
                    type="warning"
                    :size="'mini'"
                    v-else-if="scope.row.order_status === '2'"
                    >部分核销</el-tag
                  >
                  <el-tag type="" :size="'mini'" v-else>全部核销</el-tag>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="addtime"
              label="创建时间"
              show-overflow-tooltip
              width="150"
            ></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="18">
              <div
                class="Pagination"
                style="text-align: center; margin-top: 12px"
              >
                <el-pagination
                  :current-page="parmValue.page"
                  :page-size="parmValue.size"
                  :size="searchSize"
                  layout="total,  prev, pager, next, jumper"
                  :total="count"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                />
              </div>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <div style="margin-top: 12px">
                <el-button type="primary" size="medium" @click="submitForm"
                  >保 存
                </el-button>
                <el-button @click="showModelThis = false" size="medium">{{
                  isDetail ? "关 闭" : "取 消"
                }}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/service/InvoiceSales/invoicePool";
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
export default {
  props: [
    "id",
    "showModel",
    "trade_status",
    "order_status",
    "inv_status",
    "type_check",
    "onces",
  ],
  mixins: [mixinPage, resToken],
  data() {
    return {
      loading: false,
      icon: "",
      count: 0,
      tableData: [],
      showModelThis: this.showModel,
      multipleSelection: [],
      parmValue: {
        companyNo: "",
        order_status: "",
        trade_status: "",
        total_low: "",
        total_up: "",
        starttime: "",
        endtime: "",
        type_check: "",
        status: "",
        invNo: "",
        page: 1, // 页码
        size: 15, // 每页显示条数
      },
    };
  },
  watch: {
    icon(val) {
      if (val) {
        this.showModelThis = false;
        this.$emit("setVal", val);
      }
    },
    showModel: function (val) {
      this.showModelThis = val;
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      } else {
        this.searchList();
      }
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    restSearch() {
      this.parmValue.invNo = "";
      this.parmValue.page = 1;
      this.searchList();
    },
    async searchList() {
      this.multipleSelection = [];
      if (!this.loading) {
        this.loading = true;
        this.tableData = [];
        this.parmValue.companyNo = this.id; // 客户企业编码
        this.parmValue.type_check = this.type_check;
        this.parmValue.order_status = this.order_status;
        this.parmValue.trade_status = this.trade_status;
        const res = await asyncRequest.list(this.parmValue);
        if (res && res.code === 0 && res.data && res.data.list) {
          this.tableData = res.data.list;
          this.count = res.data.count;
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.tableData = [];
          this.count = 0;
        }
        this.loading = false;
      }
    },
    closeModel() {
      console.log("closeModel!!");
    },
    async submitForm() {
      let isok = true;
      this.multipleSelection.forEach((v1) => {
        if (this.trade_status === "4" && parseInt(v1.fund_used) !== 0) {
          isok = false;
        }
        if (this.order_status === "4" && parseInt(v1.order_used) !== 0) {
          isok = false;
        }
      });
      if (!isok) {
        if (this.trade_status === "4") {
          this.$message.warning("部分发票信息：资金处理中的金额不为零！！");
          return;
        }
        if (this.order_status === "4") {
          this.$message.warning("部分发票信息：确认单处理中的金额不为零！！");
          return;
        }
      }

      if (this.onces && this.multipleSelection.length > 1) {
        this.$message.warning("只能选择一条数据！");
      } else {
        // 刷新
        this.showModelThis = false;
        this.$emit("refresh", this.multipleSelection);
      }
    },
  },
};
</script>

<style></style>