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-group>
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <div class="dis_flex_order_li">
      <div class="list" v-for="(item, index) in showTabList[type]" :key="index">
        <img :src="item.img" alt="" />
        <div class="right">
          <h4>{{ item.label }}：</h4>
          <p>{{ countInfo[item.prop] }}{{ item.ch || "元" }}</p>
        </div>
      </div>
    </div>
    <table-list
      :key="type"
      rowKey="id"
      ref="tableList"
      @openDialog="(row) => openDialog(row, 0)"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize">
        <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="refundStatus" slot-scope="props">
        <div>
          {{
            ["待审核", "未通过", "未退款", "已完成"][
              props.scope.row.refundStatus
            ]
          }}
          <span></span>
        </div>
      </template>
      <template slot="status" slot-scope="props">
        <el-checkbox
          @change="changeStatus"
          :checked="!!props.scope.row.status"
        ></el-checkbox>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button
          v-if="type == 0"
          type="text"
          :disabled="props.scope.row.creditStatus == 1"
          @click="openDialog(props.scope.row, 1)"
        >
          催款提醒
        </el-button>
        <template v-else>
          <el-button
            type="text"
            :disabled="props.scope.row.creditStatus == 1"
            @click="openDialog(props.scope.row, 2)"
          >
            点击审核
          </el-button>
          <el-button
            type="text"
            style="color: #e6a23c"
            @click="openDialog(props.scope.row, 3)"
          >
            修改备注
          </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 :dialogVisible.sync="orderDialogVisible" />
    <arap-remarks
      :orderSn="activeOrderInfo.orderSn"
      :remark="activeOrderInfo.remark"
      @search="search"
      :dialogVisible.sync="remarkDialogVisible"
    ></arap-remarks>
  </div>
</template>

<script>
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 { exportFn } from "@/utils/index.js";
import {
  orderList,
  sellerList,
  tenantList,
  orderExport,
  countOrderNum,
} from "@/api/financed/index";
export default {
  name: "cost",
  components: {
    searchBoxNew,
    tableList,
    pagination,
    dislogTip,
    dislogOrderDetails,
    arapRemarks,
  },
  data() {
    return {
      showTabList: [
        [
          {
            label: "合同金额",
            prop: "orderPriceTotal",
            img: require("@/assets/images/合同金额@2x.png"),
          },
          {
            label: "已收账款",
            prop: "orderReceivedTotal",
            img: require("@/assets/images/已收款@2x.png"),
          },
          {
            label: "未收账款",
            prop: "orderUncollectedTotal",
            img: require("@/assets/images/未收款@2x.png"),
          },
        ],
        [
          {
            label: "待付账款",
            prop: "sellerPay",
            img: require("@/assets/images/未收款@2x.png"),
          },
        ],
        [
          {
            label: "待付账款",
            prop: "tenantPay",
            img: require("@/assets/images/未收款@2x.png"),
          },
        ],
      ],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "应收应付",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: true,
        openCheckMore: true,
        changeWidth: "160px",
        custom: false,
      },
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet0: [
        {
          label: "下单时间",
          prop: "buyTime",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "订单单号",
          prop: "orderSn",
          hidden: true,
          scope: "openDialog",
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "业务员",
          prop: "createUsername",
          hidden: true,
        },
        {
          label: "业务号",
          prop: "createNo",
          hidden: true,
        },
        {
          label: "合同金额(元)",
          prop: "orderPrice",
          hidden: true,
        },
        {
          label: "已收账款(元)",
          prop: "orderReceived",
          hidden: true,
        },
        {
          label: "未收账款(元)",
          prop: "orderUncollected",
          hidden: true,
        },
        {
          label: "预收时间",
          hidden: true,
          scope: "solt",
          soltName: "predictPayTime",
        },
        {
          label: "剩余天数",
          prop: "predictPayDay",
          hidden: true,
        },
        {
          label: "提醒设置",
          prop: "noteType",
          scope: "solt",
          soltName: "noteType",
          hidden: true,
        },
        {
          label: "最新提醒",
          prop: "lastTime",
          hidden: true,
        },
      ],
      tableSet1: [
        {
          label: "下单时间",
          prop: "startTime",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "订单单号",
          prop: "orderSn",
          hidden: true,
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "待付账款(元)",
          prop: "divideCompanyMoney",
          hidden: true,
        },
        {
          label: "预付时间",
          prop: "predictPayTime",
          hidden: true,
        },
        {
          label: "剩余天数",
          prop: "predictReceiveDay",
          hidden: true,
        },
        {
          label: "审核状态",
          prop: "refundStatus",
          hidden: true,
          scope: "solt",
          soltName: "refundStatus",
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
      ],
      tableSet2: [
        {
          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: "divideSellerMoney",
          hidden: true,
        },
        {
          label: "预付时间",
          prop: "predictReceiveTime",
          hidden: true,
        },
        {
          label: "剩余天数",
          prop: "predictReceiveDay",
          hidden: true,
        },
        {
          label: "审核状态",
          prop: "refundStatus",
          hidden: true,
          scope: "solt",
          soltName: "refundStatus",
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      tipDialogVisible: false,
      orderDialogVisible: false,
      remarkDialogVisible: false,
      type: 0,
      activeOrderInfo: {},
      roleList: [],
      countInfo: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    openDialog(data, type) {
      this.activeOrderInfo = data;
      this[
        ["order", "tip", "examine", "remark"][type] + "DialogVisible"
      ] = true;
    },
    batchExport() {
      const fn = [orderExport, orderExport, orderExport][this.type];
      fn(this.backData()).then((res) => {
        if (res.msg) {
          exportFn(res.msg, "导出应收应付数据");
        } 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;
    },
    changeSearch() {
      this.search(2);
    },
    getDataList(data) {
      const fn = [orderList, tenantList, sellerList][this.type];
      fn(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      this.getDataList(this.backData());
    },
    backData() {
      let data = this.formData;
      let { startTime, endTime } = this.formData;
      if (startTime || endTime) {
        data = JSON.parse(JSON.stringify(this.formData));
        if (startTime) {
          data.startTime = parseInt(startTime / 1000);
        }
        if (endTime) {
          data.endTime = parseInt(endTime / 1000);
        }
      }
      return data;
    },
    init() {
      this.getRoleList();
      this.getCountOrderNum();
      this.search(2);
    },
    getRoleList() {
      this.$api.obtainRoleList().then((res) => {
        this.roleList = res.rows;
      });
    },
    getCountOrderNum() {
      countOrderNum().then((res) => {
        this.countInfo = res.data;
      });
    },
  },
  computed: {
    tableSet() {
      return this["tableSet" + this.type];
    },
    formList() {
      let data = [
        {
          prop: "creditStatus",
          placeholder: "账款状态",
          scope: "select",
          options: [
            { label: "已结清", value: 1 },
            { label: "未结清", value: 0 },
          ],
        },
        {
          prop1: "startTime",
          prop2: "endTime",
          placeholder1: "开始时间",
          placeholder2: "结束时间",
          scope: "moreDataPicker",
        },
      ];
      if (this.type != 1) {
        data.unshift(
          {
            prop: "roleId",
            placeholder: "角色选择",
            scope: "select",
            options: this.roleList,
            selectValue: "roleId",
            selectLabel: "roleName",
          },
          {
            prop: "divideStatus",
            placeholder: "审核状态",
            scope: "select",
            options: [
              { label: "待审核", value: 0 },
              { label: "已通过", value: 1 },
              { label: "未通过", value: 2 },
              { label: "已撤销", value: 3 },
            ],
          },
          {
            prop: "tenantId",
            placeholder: "机构选择",
            scope: "systemtenantlist",
          }
        );
      } else {
        data.push({
          prop: "keyNo",
          placeholder: "机构/业务号",
        });
      }
      return data;
    },
  },
};
</script>

<style lang="scss" scoped>
.tip4,
.tip3 {
  white-space: normal;
  i::before {
    content: "，";
  }
}
.dis_flex_order_li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  & > .list {
    user-select: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
    &:hover {
      transform: scale(1.04);
    }
    width: 136px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    & > img {
      margin-left: 2px;
      width: 40px;
      height: 40px;
    }
    & > .right {
      flex: 1;
      padding-left: 4px;
      & > h4 {
        color: #000;
        margin: 0;
        font-size: 12px;
      }
      & > p {
        font-size: 12px;
        color: red;
        margin: 0;
      }
    }
  }
}
</style>