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

<template>
  <div class="operation">
    <search-box-new
      class="search_box_page"
      ref="searchBox"
      :redIcon="false"
      :formData="formData"
      :formList="formList"
      @search="search(3)"
      @init="init"
    />
    <picture-list ref="pictureList" :list="showTabList"></picture-list>
    <table-list
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize">
        <el-button type="primary" @click="batchCollection">批量催款</el-button>
        <el-button @click="openDialog({}, 2)" type="primary">
          坏账设置
        </el-button>
      </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="predictPayTime" slot-scope="props">
        <span
          :style="{ color: props.scope.row.predictReceiveDay < 0 ? 'red' : '' }"
        >
          {{ props.scope.row.predictReceiveDay || "--" }}
        </span>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="openDialog(props.scope.row, 0)">
          详情
        </el-button>
        <el-button
          type="text"
          :disabled="props.scope.row.creditStatus == 1"
          @click="openDialog({ ...props.scope.row, ctype: 1 }, 1)"
        >
          催款
        </el-button>
      </template>
    </table-list>
    <pagination1
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search(3)"
    />
    <!-- 催款 -->
    <dislog-tip
      :dialogVisible.sync="tipDialogVisible"
      :orderInfo="activeOrderInfo"
      @search="search(3)"
    />
    <!-- 订单详情 -->
    <dislog-order-details
      :ShowStatus="1"
      :orderSn="activeOrderInfo.orderSn"
      :orderFrom="activeOrderInfo.orderFrom"
      :dialogVisible.sync="orderDialogVisible"
    />
    <!-- 坏账设置 -->
    <dislog-bad-bill :dialogVisible.sync="badBillDialogVisible" />
  </div>
</template>

<script>
import pictureList from "@/components/Comon/pictureList.vue";
import dislogBadBill from "../components/dislogBadBill.vue";
import dislogOrderDetails from "../../components/dislogOrderDetails.vue";
import dislogTip from "../components/dislogTip.vue";
import { orderList } from "@/api/financed/index";
export default {
  name: "SaasMasterPlatformIndex",

  data() {
    return {
      showTabList: [
        {
          label: "未收账款",
          prop: "orderUncollectedTotal",
          img: "未收款",
        },
      ],
      navText: {
        title: "应收应付",
        index: 0,
        ch: "条",
        num: true,
        choice: true,
        addHide: true,
        dontNum: false,
        openCheckMore: false,
        changeWidth: "240px",
        custom: false,
      },
      formList: [
        {
          prop: "tenantId",
          placeholder: "机构选择",
          scope: "systemtenantlist",
        },
        {
          prop: "badBill",
          placeholder: "坏账选择",
          scope: "select",
          options: [
            { label: "是", value: 1 },
            { label: "否", value: 2 },
          ],
        },
        {
          prop1: "startTime",
          prop2: "endTime",
          placeholder1: "订单开始时间",
          placeholder2: "订单结束时间",
          scope: "moreDataPicker",
        },
        {
          prop: "orderSn",
          placeholder: "订单单号",
        },
        {
          prop: "keyNo",
          placeholder: "业务号",
        },
      ],
      tableSet: [
        {
          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: "solt",
          soltName: "predictPayTime",
        },
        {
          label: "提醒设置",
          prop: "noteType",
          scope: "solt",
          soltName: "noteType",
          hidden: true,
        },
        {
          label: "最新提醒",
          prop: "lastTime",
          hidden: true,
          scope: "aTimeList",
        },
      ],
      formData: {},
      tableData: [],
      total: 0,
      loading: false,
      badBillDialogVisible: false,
      orderDialogVisible: false,
      tipDialogVisible: false,
      activeOrderInfo: {},
    };
  },

  created() {
    this.init();
  },
  methods: {
    async search(v) {
      this.loading = true;
      if (v === 2) {
        this.tableData = [];
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      this.getDataList();
    },
    init() {
      this.search(2);
    },
    getDataList() {
      orderList(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    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;
    },
    openDialog(data, type) {
      data.checkFrom = 1;
      this.activeOrderInfo = data;
      this[["order", "tip", "badBill"][type] + "DialogVisible"] = true;
    },
    batchCollection() {
      let orderSnList = this.$refs.tableList.allCheckData.map((item) => {
        return { orderSn: item.orderSn, tenantId: item.tenantId };
      });
      if (orderSnList.length === 0) {
        this.$message.error("请先勾选批量催款数据");
        return;
      }
      this.openDialog({ orderSnList }, 1);
    },
  },
  components: {
    pictureList,
    dislogBadBill,
    dislogOrderDetails,
    dislogTip,
  },
};
</script>

<style lang="scss" scoped>
.search_box_page {
  /deep/ .el-select {
    width: 120px;
  }
  /deep/ .el-date-editor {
    width: 140px;
  }
  /deep/ .el-form-item__content > .el-input {
    width: 190px;
  }
}
</style>