zc_saas_admin/src/views/finance/invoiceManage/index.vue

<template>
  <div id="invoiceManage">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="search(2)"
      :remarkStatus="true"
    />
    <picture-list
      ref="pictureList"
      :info="info"
      :list="showTabList"
      @backFunc="pictureFunc"
    ></picture-list>
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
      ref="tableList"
      rowKey="invoiceId"
    >
      <template slot="customize">
        <el-button type="primary" @click="blushAll">批量冲红</el-button>
      </template>
      <template slot="applyFor" slot-scope="props">
        <p>
          申请时间：{{ $methodsTools.onlyForma(props.scope.row.applyTime) }}
        </p>
        <p>
          开票时间：{{ $methodsTools.onlyForma(props.scope.row.invoiceTime) }}
        </p>
        <p>订单编号：{{ props.scope.row.orderSn }}</p>
        <p>经办姓名：{{ props.scope.row.createUsername }}</p>
        <p>经办身份：{{ props.scope.row.idCard }}</p>
        <p>经办手机：{{ props.scope.row.telphone }}</p>
        <!-- <p>申请金额：{{ props.scope.row.invoicePrice | formatPrice }}</p> -->
      </template>
      <template slot="goods" slot-scope="props">
        <p>
          商品类型：{{
            props.scope.row.goodsType == 1
              ? "课程"
              : props.scope.row.goodsType == 2
              ? "题库"
              : "-"
          }}
        </p>
        <p>教育类型：{{ props.scope.row.educationName }}</p>
        <p>
          培训项目：{{
            props.scope.row.projectName + " - " + props.scope.row.businessName
          }}
        </p>
      </template>
      <template slot="invoice" slot-scope="props">
        <p>
          发票类型：{{
            props.scope.row.type == 1
              ? "普通发票"
              : props.scope.row.type == 2
              ? "增值税专用发票"
              : ""
          }}
        </p>
        <p>
          发票主体：{{
            props.scope.row.subject == 1
              ? "个人"
              : props.scope.row.subject == 2
              ? "企业"
              : ""
          }}
        </p>
        <p>
          {{ props.scope.row.subject == 1 ? "姓名：" : "企业全称："
          }}{{ props.scope.row.invoiceTitle }}
        </p>
        <p>
          {{ props.scope.row.subject == 1 ? "身份证号：" : "纳税人号："
          }}{{ props.scope.row.taxRegistryNumber }}
        </p>
        <p>开票备注：{{ props.scope.row.openRemark }}</p>
      </template>
      <template slot="invoice1" slot-scope="props">
        <p v-if="props.scope.row.invoiceMode.includes(2)">
          收票邮箱：{{ props.scope.row.email }}
        </p>
        <template v-if="props.scope.row.invoiceMode.includes(3)">
          <p>收票姓名：{{ props.scope.row.consignee }}</p>
          <p>收票电话：{{ props.scope.row.collectionTelephone }}</p>
          <p>收票地址：{{ props.scope.row.shippingAddress }}</p>
        </template>
      </template>
      <template slot="invoice2" slot-scope="props">
        <p v-if="props.scope.row.invoiceMode.includes(1)">在线下载</p>
        <p v-if="props.scope.row.invoiceMode.includes(2)">邮件接收</p>
        <p v-if="props.scope.row.invoiceMode.includes(3)">纸质快递</p>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button
          type="text"
          @click="examineFunc(props.scope.row)"
          :disabled="props.scope.row.invoiceStatus != 1"
          >审核</el-button
        >
        <el-button
          type="text"
          @click="handleFunc(props.scope.row)"
          :disabled="
            props.scope.row.invoiceStatus != 2 &&
            props.scope.row.invoiceStatus != 4
          "
          >处理</el-button
        >
        <el-button
          type="text"
          @click="blush([props.scope.row.invoiceId])"
          :disabled="props.scope.row.washStatus != 1"
          >冲红</el-button
        >
        <el-button type="text" @click="remarkFunc(props.scope.row)"
          >备注</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <dialogRemark :dialogVisible.sync="dialogVisible" :info="activeInfo" />
    <dialogHandle :dialogVisible.sync="dialogHandle" :info="activeInfo" />
    <dialog-examine ref="dialogExamine" />
  </div>
</template>

<script>
import dialogRemark from "./dialogRemark.vue";
import dialogHandle from "./dialogHandle.vue";
import dialogExamine from "./dialogExamine.vue";
import pictureList from "@/components/Comon/pictureList.vue";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "",
  components: {
    searchBoxNew,
    tableList,
    pagination,
    pictureList,
    dialogRemark,
    dialogHandle,
    dialogExamine,
  },
  data() {
    return {
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "经办发票",
        index: 0,
        ch: "条",
        num: true,
        choice: true,
        addHide: true,
        openCheckMore: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      info: {},
      dialogVisible: false,
      dialogHandle: false,
      showTabList: [
        {
          label: "申请金额",
          img: "ContractAmount",
          prop: "applyMoney",
        },
        {
          label: "已审金额",
          img: "PaymentHasBeenReceived",
          prop: "checkMoney",
        },
        {
          label: "待审金额",
          img: "OutstandingPayment",
          prop: "unCheckMoney",
        },
        {
          label: "申请数量",
          img: "NumberOfOrders2",
          prop: "applyNum",
          num: true,
        },
        {
          label: "待审发票",
          img: "PendingOrder",
          prop: "unApplyNum",
          num: true,
          color: "#ff7a38",
        },
      ],
      //搜索
      formList: [
        {
          prop: "goodsType",
          placeholder: "商品类型",
          scope: "select",
          options: [
            { label: "课程", value: 1 },
            { label: "题库", value: 2 },
          ],
        },
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "invoiceStatus",
          placeholder: "发票状态",
          scope: "select",
          options: [
            { label: "已开票", value: 2 },
            { label: "待审核", value: 1 },
            { label: "不通过", value: 3 },
            { label: "已失效", value: 4 },
            { label: "未开票", value: 5 },
          ],
        },
        {
          prop: "washStatus",
          placeholder: "冲红状态",
          scope: "select",
          options: [
            { label: "待冲红", value: 1 },
            { label: "已冲红", value: 2 },
          ],
        },
        {
          prop: "invoiceMode",
          placeholder: "收票方式",
          scope: "select",
          options: [
            { label: "在线下载", value: 1 },
            { label: "邮件接收", value: 2 },
            { label: "纸质快递", value: 3 },
          ],
        },
        {
          prop: "handleOrderSn",
          placeholder: "输入订单编号",
        },
        {
          prop: "telphone",
          placeholder: "输入经办手机",
        },
        {
          prop: "createUsername",
          placeholder: "输入经办姓名",
        },
        {
          prop: "idCard",
          placeholder: "输入经办身份证号",
        }
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "发票状态",
          prop: "invoiceStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            { label: "已开票", value: 2 },
            { label: "待审核", value: 1 },
            { label: "不通过", value: 3 },
            { label: "已失效", value: 4 },
          ],
        },
        {
          label: "申请",
          hidden: true,
          scope: "slot",
          slotName: "applyFor",
          dontCenter: true,
        },
        {
          label: "商品信息",
          hidden: true,
          scope: "slot",
          slotName: "goods",
          dontCenter: true,
        },
        {
          label: "开票信息",
          hidden: true,
          scope: "slot",
          slotName: "invoice",
          dontCenter: true,
        },
        {
          label: "收票信息",
          hidden: true,
          scope: "slot",
          slotName: "invoice1",
          dontCenter: true,
        },
        {
          label: "冲红状态",
          prop: "washStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            { label: "待冲红", value: 1 },
            { label: "已冲红", value: 2 },
          ],
        },
        {
          label: "收票方式",
          hidden: true,
          scope: "slot",
          slotName: "invoice2",
        },
        {
          label: "处理备注",
          prop: "handleRemark",
          hidden: true,
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      activeInfo: {},
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    blushAll() {
      if (this.$refs.tableList.allCheckData.length == 0) {
        this.$message.error("请勾选数据");
        return;
      }
      if (!this.$refs.tableList.allCheckData.every((i) => i.washStatus == 1)) {
        this.$message.error("请选择待冲红数据");
        return;
      }
      let invoiceIds = this.$refs.tableList.allCheckData.map(
        (i) => i.invoiceId
      );
      this.blush(invoiceIds);
    },
    pictureFunc(item) {
      if (item.prop == "unApplyNum") {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          invoiceStatus: 1,
        };
        this.search();
      }
    },
    examineFunc(row) {
      this.$refs.dialogExamine.openBoxs(row);
    },
    remarkFunc(row) {
      this.dialogVisible = true;
      this.activeInfo = row;
    },
    handleFunc(row) {
      this.dialogHandle = true;
      this.activeInfo = row;
    },
    blush(ary) {
      this.$confirm("确定已冲红吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .orderinvoicecompanybatchhandle({
              invoiceIds: ary,
              washStatus: 2,
            })
            .then((res) => {
              this.$message.success("操作成功");
              this.search();
            });
        })
        .catch(() => {});
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
        this.$refs.tableList.clearMoreActive();
      }
      this.$api
        .orderinvoicecompanylist(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
      let obj = JSON.parse(JSON.stringify(this.formData));
      delete obj.pageNum;
      delete obj.pageSize;
      this.$api.orderinvoicecompanystatistics(obj).then((res) => {
        this.info = res.data || {};
      });
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped></style>