saas_masterPlatform/src/views/financed/arap/index.vue

<template>
  <div id="ActivityList">
    <el-radio-group
      v-model="type"
      @change="changeSearch"
      style="margin-bottom: 10px"
    >
      <el-radio-button :label="0">应收账款</el-radio-button>
      <el-radio-button :label="1">机构分成</el-radio-button>
      <el-radio-button :label="2">业务员提成</el-radio-button>
      <el-radio-button :label="3">佣金结算</el-radio-button>
    </el-radio-group>
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <picture-list
      :key="type + 'a'"
      :fn="getCountOrderNum"
      :list="showTabList[type]"
    ></picture-list>
    <table-list
      :key="type"
      rowKey="id"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
      :setIndex="setIndex"
      @load="load"
    >
      <template slot="customize">
        <el-button v-if="type == 0" @click="openDialog({}, 4)" type="success">
          坏账设置
        </el-button>
        <el-button @click="batchExport" type="primary"> 导出excel </el-button>
      </template>
      <template slot="predictPayTime" slot-scope="props">
        <span v-if="props.scope.row.creditStatus == 1">已结清</span>
        <span style="color: red" v-else>
          {{ $methodsTools.onlyForma(props.scope.row.predictPayTime) || "--" }}
        </span>
      </template>
      <template slot="noteType" slot-scope="props">
        <div v-if="!props.scope.row.noteId || props.scope.row.noteType == 1">
          --
        </div>
        <div v-else>
          <div :class="'tip' + props.scope.row.noteType">
            <span v-for="(text, idx) in backText(props.scope.row)" :key="idx">
              <span v-if="props.scope.row.noteType == 3">周</span>
              {{ text }}
              <span v-if="props.scope.row.noteType == 4">日</span>
              <i></i>
            </span>
          </div>
          <div>{{ props.scope.row.dayTime }}</div>
        </div>
      </template>
      <template slot="divideCheckStatus" slot-scope="props">
        <div v-if="props.scope.row.billType != 7">
          {{
            divideCheckStatus(
              props.scope.row.orderSn,
              props.scope.row.payStatus,
              props.scope.row.checkStatus
            )
          }}
          <span style="color: #409eff" v-if="props.scope.row.roleName">
            ({{ props.scope.row.roleName }})
          </span>
        </div>
      </template>
      <template slot="status" slot-scope="props">
        {{ backStatus(props.scope) | formatPrice }}
      </template>
      <template slot="btn" slot-scope="props">
        <el-button
          v-if="props.scope.row.oId || type == 0"
          type="text"
          @click="openDialog(props.scope.row, 3)"
        >
          查看详情
        </el-button>
        <el-button
          v-if="type == 0"
          type="text"
          :disabled="props.scope.row.creditStatus == 1"
          @click="openDialog(props.scope.row, 0)"
        >
          催款提醒
        </el-button>
        <template v-else>
          <el-button
            type="text"
            v-if="!props.scope.row.orderSn"
            :disabled="
              !(
                props.scope.row.payStatus === 0 ||
                props.scope.row.payStatus === 4
              )
            "
            @click="openDialog(props.scope.row, 1)"
          >
            {{
              type == 1
                ? "分成支付"
                : type == 2
                ? "提成支付"
                : type == 3
                ? "佣金支付"
                : ""
            }}
          </el-button>
          <el-button
            v-else
            type="text"
            :disabled="props.scope.row.checkStatus !== 0"
            @click="openDialog(props.scope.row, 1)"
          >
            {{
              type == 1
                ? "分成审核"
                : type == 2
                ? "提成审核"
                : type == 3
                ? "佣金审核"
                : ""
            }}
          </el-button>
          <el-button
            type="text"
            style="color: #e6a23c"
            @click="openDialog(props.scope.row, 2)"
          >
            修改备注
          </el-button>
        </template>
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search"
    />
    <dislog-tip
      :dialogVisible.sync="tipDialogVisible"
      :orderInfo="activeOrderInfo"
      @search="search"
    />
    <!-- 订单详情 -->
    <dislog-order-details
      :orderSn="activeOrderInfo.orderSn"
      :orderFrom="activeOrderInfo.orderFrom"
      :dialogVisible.sync="orderDialogVisible"
    />
    <arap-remarks
      :info="activeOrderInfo"
      @search="search"
      :dialogVisible.sync="remarkDialogVisible"
    />
    <dislog-set
      :dialogVisible.sync="examineDialogVisible"
      @search="search"
      :info="activeOrderInfo"
      @update="update"
    ></dislog-set>
    <!-- 坏账设置 -->
    <dislog-bad-bill
      :dialogVisible.sync="badBillDialogVisible"
    ></dislog-bad-bill>
  </div>
</template>

<script>
import dislogSet from "../components/audit/dislogSet.vue";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import dislogTip from "./dislogTip.vue";
import dislogOrderDetails from "../components/dislogOrderDetails.vue";
import arapRemarks from "../components/arapRemarks.vue";
import pictureList from "@/components/Comon/pictureList.vue";
import dislogBadBill from "../components/dislogBadBill.vue";
import { exportFn } from "@/utils/index.js";
import {
  orderList,
  companyList,
  orderExport,
  tenantExport,
  sellerExport,
  countOrderNum,
  commissionList,
  sellerPercentageList,
  monthOrderList,
  commissionExport,
} from "@/api/financed/index";
export default {
  name: "Arap",
  components: {
    searchBoxNew,
    tableList,
    pagination,
    dislogTip,
    dislogOrderDetails,
    arapRemarks,
    dislogSet,
    pictureList,
    dislogBadBill,
  },
  data() {
    return {
      value5: [],
      showTabList: [
        [
          {
            label: "未收账款",
            prop: "orderUncollectedTotal",
            img: "未收款",
          },
        ],
        [
          {
            label: "待付分成",
            prop: "unPayMoneyTotal",
            img: "未收款",
          },
          {
            label: "待扣分成",
            prop: "unDeductMoneyTotal",
            img: "已退款",
          },
          {
            label: "已扣分成",
            prop: "deductMoneyTotal",
            img: "成本金额",
          },
          {
            label: "已付分成",
            prop: "payMoneyTotal",
            img: "已收款",
          },
        ],
        [
          {
            label: "待付分成",
            prop: "unPayMoneyTotal",
            img: "未收款",
          },
          {
            label: "待扣分成",
            prop: "unDeductMoneyTotal",
            img: "已退款",
          },
          {
            label: "已扣分成",
            prop: "deductMoneyTotal",
            img: "成本金额",
          },
          {
            label: "已付分成",
            prop: "payMoneyTotal",
            img: "已收款",
          },
        ],
        [
          {
            label: "待付佣金",
            prop: "unPayMoneyTotal",
            img: "未收款",
          },
          {
            label: "已付佣金",
            prop: "payMoneyTotal",
            img: "已收款",
          },
        ],
      ],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "应收应付",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: true,
        dontNum: false,
        openCheckMore: true,
        changeWidth: "240px",
        custom: false,
        tableColor: true,
        tableColorFunc: ({ row, rowIndex }) => {
          if (row.oId) {
            return "child-row";
          }
          return "";
        },
      },
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet0: [
        {
          label: "坏账",
          prop: "badBill",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "否",
              value: false,
            },
            {
              label: "是",
              value: true,
              style: {
                color: "red",
              },
            },
          ],
        },
        {
          label: "下单时间",
          prop: "buyTime",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "订单单号",
          prop: "orderSn",
          hidden: true,
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "业务员",
          prop: "createUsername",
          hidden: true,
        },
        {
          label: "业务号",
          prop: "createNo",
          hidden: true,
        },
        {
          label: "合同金额(元)",
          prop: "orderPrice",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "已收账款(元)",
          prop: "orderReceived",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "已退金额(元)",
          prop: "orderRefunded",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "未收账款(元)",
          prop: "orderUncollected",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "预收时间",
          hidden: true,
          prop: "predictReceiveTime",
          scope: "aTimeList",
        },
        {
          label: "剩余天数",
          prop: "predictReceiveDay",
          hidden: true,
          scope: "fill",
        },
        {
          label: "提醒设置",
          prop: "noteType",
          scope: "solt",
          soltName: "noteType",
          hidden: true,
        },
        {
          label: "最新提醒",
          prop: "lastTime",
          hidden: true,
          scope: "aTimeList",
        },
      ],
      tableSet1: [
        {
          label: "时间",
          prop: "monthTime",
          hidden: true,
          width: 140,
        },
        {
          label: "订单单号",
          prop: "orderSn",
          hidden: true,
          scope: "fill",
          width: 200,
        },
        {
          label: "类型",
          prop: "billType",
          scope: "type",
          hidden: true,
          values: {
            1: "月份",
            2: "季度",
            3: "半年",
            4: "年度",
            6: "完单",
            7: "退款",
          },
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "角色名称",
          prop: "roleName",
          hidden: true,
          scope: "fill",
        },
        {
          label: "已付分成(元)",
          prop: "payMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "已扣分成(元)",
          prop: "deductMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "待付分成(元)",
          prop: "payMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "待扣分成(元)",
          prop: "deductMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "预付时间",
          prop: "predictPayTime",
          hidden: true,
          scope: "aTimeList",
          hidden: true,
        },
        {
          label: "剩余天数",
          prop: "predictPayDay",
          hidden: true,
          scope: "fill",
        },
        {
          label: "审核状态",
          prop: "divideCheckStatus",
          hidden: true,
          scope: "solt",
          soltName: "divideCheckStatus",
        },
        {
          label: "支付时间",
          prop: "payTime",
          scope: "aTimeList",
          hidden: true,
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
      ],
      tableSet2: [
        {
          label: "时间",
          prop: "monthTime",
          hidden: true,
          width: 140,
        },
        {
          label: "订单单号",
          prop: "orderSn",
          scope: "fill",
          hidden: true,
          width: 200,
        },
        {
          label: "类型",
          prop: "billType",
          scope: "type",
          hidden: true,
          values: {
            1: "月份",
            2: "季度",
            3: "半年",
            4: "年度",
            6: "完单",
            7: "退款",
          },
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "角色名称",
          prop: "roleName",
          hidden: true,
          scope: "fill",
        },
        {
          label: "业务员",
          prop: "createUsername",
          hidden: true,
        },
        {
          label: "业务号",
          prop: "createNo",
          hidden: true,
        },
        {
          label: "已付提成(元)",
          prop: "payMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "已扣提成(元)",
          prop: "deductMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "待付提成(元)",
          prop: "payMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "待扣提成(元)",
          prop: "deductMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "审核状态",
          prop: "divideCheckStatus",
          hidden: true,
          scope: "solt",
          soltName: "divideCheckStatus",
        },
        {
          label: "支付时间",
          prop: "payTime",
          scope: "aTimeList",
          hidden: true,
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
      ],
      tableSet3: [
        {
          label: "时间",
          prop: "monthTime",
          hidden: true,
          width: 140,
        },
        {
          label: "订单单号",
          prop: "orderSn",
          scope: "fill",
          hidden: true,
          width: 200,
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "角色名称",
          prop: "roleName",
          hidden: true,
          scope: "fill",
        },
        {
          label: "已付佣金(元)",
          prop: "payMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "待付佣金(元)",
          prop: "payMoney",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "审核状态",
          prop: "divideCheckStatus",
          hidden: true,
          scope: "solt",
          soltName: "divideCheckStatus",
        },
        {
          label: "支付时间",
          prop: "payTime",
          scope: "aTimeList",
          hidden: true,
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      tipDialogVisible: false,
      orderDialogVisible: false,
      remarkDialogVisible: false,
      examineDialogVisible: false,
      badBillDialogVisible: false,
      type: 0,
      activeOrderInfo: {},
      roleList: [],
      countInfo: {},
      spanData: {},
      maps: new Map(),
    };
  },
  created() {
    this.init();
  },
  methods: {
    divideCheckStatus(type, e1, e2) {
      var a = "";
      if (type) {
        switch (e2) {
          case -1:
            a = "未通过";
            break;
          case 0:
            a = "待审核";
            break;
          case 1:
            a = "已通过";
            break;
          case 2:
            a = "待支付";
            break;
          case 3:
            a = "已支付";
            break;
          default:
            break;
        }
      } else {
        switch (e1) {
          case 0:
            a = "待支付";
            break;
          case 1:
            a = "已打款";
            break;
          case 2:
            a = "待审核";
            break;
          case 3:
            a = "打款中";
            break;
          case 4:
            a = "打款失败";
            break;
          default:
            break;
        }
      }
      return a;
    },
    openDialog(data, type) {
      this.activeOrderInfo = data;
      this.activeOrderInfo.checkFrom = this.type + 1;
      this[
        ["tip", "examine", "remark", "order", "badBill"][type] + "DialogVisible"
      ] = true;
    },
    batchExport() {
      const fn = [orderExport, tenantExport, sellerExport, commissionExport][
        this.type
      ];
      fn(this.formData).then((res) => {
        if (res.msg) {
          exportFn(
            res.msg,
            `导出${
              ["应收应付", "机构分成", "业务员提成", "佣金结算"][this.type]
            }数据`
          );
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    backText(row) {
      const type = row.noteType;
      if (type == 2) {
        return ["每天"];
      }
      const key = ["weekTime", "monthTime"][type - 3];
      let data = row[key].split(",").sort((a, b) => a - b);
      return data;
    },
    setIndex(index) {
      return index + 1;
    },
    changeSearch() {
      this.maps.clear();
      this.search(2);
    },
    getDataList() {
      const fn = [orderList, companyList, sellerPercentageList, commissionList][
        this.type
      ];
      fn(this.formData)
        .then((res) => {
          this.type != 0 &&
            res.rows.forEach((e) => {
              e.children = [];
              e.hasChildren = true;
              e.monthTime = this.parseTime(e.monthTime, "{y}-{m}");
            });
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    load(tree, treeNode, resolve) {
      monthOrderList({ divideLogId: tree.id, roleId: this.formData.roleId })
        .then((res) => {
          // id冲突会报错
          res.data.forEach((e) => {
            e.oId = e.id;
            e.id = e.id + 100086;
            e.billType = e.orderType + 5;
            e.monthTime = this.parseTime(e.orderTime, "{y}-{m}-{d}");
            if (this.type == 3 || this.type == 2) {
              e.divideCompanyMoney =
                this.type == 2 ? e.divideSellerMoney : e.brokerage;
            }
          });
          resolve(res.data);
        })
        .catch(() => {
          resolve([]);
        });
      this.maps.set(tree.id, { tree, treeNode, resolve });
    },
    update(parentId) {
      const { tree, treeNode, resolve } = this.maps.get(parentId);
      this.$set(
        this.$refs.tableList.$refs.pagerset.store.states.lazyTreeNodeMap,
        parentId,
        []
      );
      if (tree) {
        this.load(tree, treeNode, resolve);
      }
    },
    // 切换已付待付
    backStatus({ row, column }) {
      let { payStatus, oId } = row;
      let { label, property } = column;
      if (oId) {
        property =
          property == "payMoney" ? "divideCompanyMoney" : "divideMoney";
        // payStatus = payStatus != 3 ? 0 : 1;
      }
      payStatus = payStatus != 1 ? 0 : 1;
      return ["0.00", row[property]][
        (label.indexOf("已") != -1 ? 0 : 1) ^ payStatus
      ];
    },
    changeData(data) {
      if (this.type == 0) {
        return data;
      }
      let total = 0;
      let arr = [];
      data.forEach((ele) => {
        const monthList = ele.monthList;
        delete ele.monthList;
        this.spanData[total] = monthList.length;
        total += monthList.length;
        monthList.map((e) => {
          Object.keys(e).forEach((key) => {
            e[key] = e[key] || ele[key];
          });
        });
        arr.push(...monthList);
      });
      return arr;
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          month: [],
        };
      }
      this.maps.forEach((value, id) => {
        this.update(id);
      });
      this.getDataList();
    },
    init() {
      this.getRoleList();
      this.search(2);
    },
    getRoleList() {
      this.$api.obtainRoleList().then((res) => {
        this.roleList = res.rows;
      });
    },
    getCountOrderNum() {
      return countOrderNum({ totalType: this.type + 1 }).then((res) => {
        return Promise.resolve(res);
      });
    },
  },
  computed: {
    tableSet() {
      return this["tableSet" + this.type];
    },
    formList() {
      const key = ["订单", "分成", "提成", "分成"][this.type];
      let data = [
        {
          prop: "tenantId",
          placeholder: "机构选择",
          scope: "systemtenantlist",
        },
      ];
      if (this.type != 0) {
        data.push(
          {
            prop: "roleId",
            scope: "roleList",
            placeholder: "角色选择",
          },
          {
            prop: "monthTime",
            scope: "moreMonth",
          },
          {
            prop: "payStatus",
            placeholder: "审核状态",
            scope: "select",
            options: [
              { label: "待支付", value: 0 },
              { label: "已打款", value: 1 },
              { label: "待审核", value: 2 },
              { label: "打款中", value: 3 },
              { label: "打款失败", value: 4 },
            ],
          }
        );
      }
      if (this.type == 0) {
        data.push(
          {
            prop: "badBill",
            placeholder: "坏账选择",
            scope: "select",
            options: [
              { label: "是", value: 1 },
              { label: "否", value: 2 },
            ],
          },
          {
            prop1: "startTime",
            prop2: "endTime",
            placeholder1: key + "开始时间",
            placeholder2: key + "结束时间",
            scope: "moreDataPicker",
          },
          {
            prop: "orderSn",
            placeholder: "订单单号",
          }
        );
      }
      if (this.type == 0 || this.type == 2) {
        data.push({
          prop: "keyNo",
          placeholder: "业务号",
        });
      }
      if (this.type == 1) {
        data.push({
          prop: "billType",
          placeholder: "账单类型",
          scope: "select",
          options: [
            { label: "月份", value: 1 },
            { label: "季度", value: 2 },
            { label: "半年", value: 3 },
            { label: "年度", value: 4 },
          ],
        });
      }
      return data;
    },
  },
  watch: {
    type(value) {
      this.navText.title = ["应收应付", "机构分成", "业务员提成", "佣金结算"][
        value
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.tip4,
.tip3 {
  white-space: normal;
  i::before {
    content: "，";
  }
}
/deep/ {
  .el-table {
    .child-row {
      background: #f0f9eb;
      .el-table__cell {
        background: #f0f9eb !important;
      }
    }
  }
}
</style>