saas_masterPlatform/src/views/financed/accountsPayable/commissionSettlement/index.vue

<template>
  <div id="ActivityList">
    <search-box-new
      ref="searchBox"
      :redIcon="false"
      :formData="formData"
      :formList="formList"
      @search="search(3)"
      @init="init"
    />
    <picture-list ref="pictureList" :list="showTabList"></picture-list>
    <table-list
      :key="type"
      rowKey="id"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize">
        <el-button @click="batchAudit(1)" type="primary"> 批量审核 </el-button>
        <el-button v-if="isTj" @click="batchAudit(-1)" type="warning"
          >批量审核不通过</el-button
        >
        <!-- <el-button @click="batchExport" type="primary"> 导出excel </el-button> -->
      </template>
      <template slot="checkStatus" slot-scope="props">
        <div>
          {{
            [
              "未通过",
              "待审核",
              "已通过",
              "待支付",
              "已结算",
              "审核中",
              "支付失败",
            ][props.scope.row.checkStatus + 1]
          }}
          <span style="color: red" v-if="props.scope.row.roleName">
            ({{ props.scope.row.roleName }})
          </span>
        </div>
      </template>
      <template slot="pretax" slot-scope="props">
        {{ props.scope.row.pretax * 100 }}%
      </template>
      <template slot="btn" slot-scope="props">
        <el-button
          type="text"
          @click="openDialog({ ...props.scope.row, type: 1 })"
        >
          详情
        </el-button>
        <el-button
          type="text"
          v-if="
            props.scope.row.checkStatus === 1 ||
            props.scope.row.checkStatus === 5
          "
          :disabled="getRoles(props.scope.row.roleId)"
          @click="openDialog({ ...props.scope.row, type: 3 })"
        >
          支付
        </el-button>
        <el-button
          v-else
          type="text"
          :disabled="
            props.scope.row.checkStatus !== 0 ||
            getRoles(props.scope.row.roleId)
          "
          @click="openDialog({ ...props.scope.row, type: 2 })"
        >
          审核
        </el-button>
        <el-button
          type="text"
          :style="{
            color:
              props.scope.row.checkStatus !== 1 ? '#ccc' : 'rgb(230, 162, 60)',
          }"
          :disabled="props.scope.row.checkStatus !== 1"
          @click="openDialog({ ...props.scope.row, type: 3, printType: 1 }, 0)"
        >
          单据打印
        </el-button>
        <el-button
          type="text"
          style="color: rgb(230, 162, 60)"
          @click="openDialog({ ...props.scope.row, type: 3, printType: 2 }, 0)"
        >
          明细打印
        </el-button>
      </template>
    </table-list>
    <pagination1
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search(3)"
    />
    <!-- 打印 -->
    <dislog-print
      :activeData="activeOrderInfo"
      :dialogVisible.sync="printDialogVisible"
    />
    <!-- 批量审核 -->
    <dislog-batch-audit
      :info="activeOrderInfo"
      @search="search"
      :dialogVisible.sync="auditDialogVisible"
    />
    <!-- 佣金审核或支付 -->
    <dislog-Cms-Audit
      :info="activeOrderInfo"
      @search="search"
      :dialogVisible.sync="cmsAuditDialogVisible"
    />
  </div>
</template>

<script>
import pictureList from "@/components/Comon/pictureList.vue";
import dislogPrint from "../components/dislogPrint.vue";
import dislogBatchAudit from "../components/dislogBatchAudit";
import dislogCmsAudit from "../components/dislogCmsAudit";
import { exportFn } from "@/utils/index.js";
import {
  commissionList,
  commissionExport,
  commissionOrderCount,
} from "@/api/financed/index";

export default {
  name: "Arap",
  components: {
    pictureList,
    dislogPrint,
    dislogBatchAudit,
    dislogCmsAudit,
  },
  data() {
    return {
      showTabList: [
        {
          label: "订单金额",
          img: "未收款",
          value: 0,
        },
        {
          label: "税前佣金",
          img: "已退款",
          value: 0,
        },
        {
          label: "结算佣金",
          img: "成本金额",
          value: 0,
        },
      ],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "佣金结算",
        index: 0,
        ch: "条",
        num: true,
        choice: true,
        addHide: true,
        dontNum: true,
        openCheckMore: false,
        changeWidth: "280px",
        custom: false,
        tableColor: true,
        selectableStatus: true,
        selectableFunc: (row, rowIndex) => {
          return row.checkStatus === 0 && !this.getRoles(row.roleId);
        },
      },
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      tableSet: [
        {
          label: "订单日期",
          prop: "createTime",
          hidden: true,
          scope: "aTimeList",
          width: 160,
        },
        {
          label: "订单号",
          prop: "orderSn",
          width: "210",
          hidden: true,
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "业务员",
          prop: "createUsername",
          hidden: true,
        },
        {
          label: "业务号",
          prop: "createNo",
          hidden: true,
        },
        {
          label: "下单企业",
          prop: "purchaseOrg",
          hidden: true,
        },
        {
          label: "订单金额",
          prop: "orderPrice",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "税前佣金",
          prop: "pretaxBrokerage",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "佣金税占比",
          prop: "pretax",
          hidden: true,
          scope: "solt",
          soltName: "pretax",
        },
        {
          label: "结算佣金",
          prop: "brokerage",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "支付方式",
          prop: "payType",
          hidden: true,
          scope: "type",
          hidden: true,
          values: {
            1: "微信",
            2: "支付宝",
            3: "金币",
            4: "现金",
            5: "网银支付",
            6: "协议",
            7: "对公转账",
          },
        },
        {
          label: "审核状态",
          prop: "checkStatus",
          hidden: true,
          scope: "solt",
          soltName: "checkStatus",
        },
        {
          label: "审核意见",
          prop: "checkReason",
          hidden: true,
        },
      ],
      tableData: [], //表单数据
      formList: [
        {
          prop: "tenantIds",
          placeholder: "机构选择",
          scope: "systemtenantlist",
          multiple: true,
        },
        {
          prop: "monthTime",
          placeholder: "账期时间",
          scope: "moreMonth",
        },
        {
          prop: "checkStatus",
          placeholder: "审核状态",
          scope: "select",
          multiple: true,
          options: [
            { label: "待审核", value: 0 },
            { label: "审核中", value: 4 },
            { label: "未通过", value: -1 },
            { label: "待结算", value: 2 },
            { label: "已结算", value: 3 },
          ],
        },
        {
          prop: "orderSn",
          placeholder: "输入订单号",
        },
        {
          prop: "createNo",
          placeholder: "输入业务号/业务员号",
        },
      ],
      total: 0, //一共多少条
      printDialogVisible: false,
      auditDialogVisible: false,
      cmsAuditDialogVisible: false,
      type: 1,
      activeOrderInfo: {},
      activeOrderInfoArray: [],
      roleList: [],
      countInfo: {},
      spanData: {},
      maps: new Map(),
      activeList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    getRoles(roleId) {
      if (
        (this.$store.state.user.rolesId?.length > 0 &&
          this.$store.state.user.rolesId.includes(roleId)) ||
        this.$store.state.user.rolesId.includes(1)
      ) {
        return false;
      } else {
        return true;
      }
    },
    openDialog(data, type = 1) {
      data.checkFrom = 4;
      this.activeOrderInfo = data;
      this[["print", "cmsAudit", "audit"][type] + "DialogVisible"] = true;
    },
    batchExport() {
      commissionExport(this.formData).then((res) => {
        if (res.msg) {
          exportFn(res.msg, "导出佣金结算数据");
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    getDataList() {
      commissionList(this.formData)
        .then((res) => {
          res.rows.forEach((e) => {
            e.monthTime = this.parseTime(e.monthTime, "{y}-{m}");
            e.closeOrderMoney = e.deductMoney + e.payMoney;
          });
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async search(v) {
      this.loading = true;
      if (v === 2) {
        this.tableData = [];
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          monthTime: [],
          years: [],
          roleIds: this.rolesId,
        };
      }
      this.$nextTick(() => {
        this.$refs.tableList.clearMoreActive();
      });
      this.getCountOrderNum();
      this.getDataList();
    },
    init() {
      this.search(2);
    },
    getCountOrderNum() {
      commissionOrderCount(this.formData).then((res) => {
        this.showTabList[0].value = res.data.orderTotalPrice;
        this.showTabList[1].value = res.data.pretaxTotalBrokerage;
        this.showTabList[2].value = res.data.BrokerageTotalMoney;
      });
    },
    batchAudit(checkResult = 1) {
      const orderSn = this.$refs.tableList.allCheckData.map((e) => e.orderSn);
      if (orderSn.length === 0) {
        this.$message.error("请先勾选待审核数据");
        return;
      }
      this.openDialog(
        {
          orderSn,
          checkResult,
          isCommission: true,
        },
        2
      );
    },
  },
  computed: {
    rolesId() {
      return this.$store.state.user.rolesId;
    },
    isTj() {
      return !this.$store.state.user.roles.includes("统计");
    },
  },
};
</script>

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