lilishop-ui/manager/src/views/distribution/distribution.vue

<template>
  <div>
    <t-card style="margin-bottom: 12px">
      <t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
        <t-form-item label="会员名称" name="memberName">
          <t-input v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
        </t-form-item>
        
        <t-form-item>
          <t-button theme="primary" @click="handleSearch">搜索</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    <t-card>
      <t-tabs :value="activeStatus" @change="onStatusTabChange" class="status-tabs">
        <t-tab-panel label="全部" value="ALL" />
        <t-tab-panel v-for="item in distributionStatusList" :key="item.value" :label="item.label" :value="item.value" />
      </t-tabs>
      <t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id"></t-table>
      <div class="mt_10" style="display: flex; justify-content: flex-end">
        <t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
      </div>
    </t-card>
    <t-drawer :visible.sync="modalVisible" :header="'修改分销员'" placement="right" size="500px" @close="modalVisible = false">
      <t-form ref="distributionForm" :data="distributionForm" :labelWidth="150">
        <t-form-item label="姓名" name="name">
          <t-input v-model="distributionForm.name" />
        </t-form-item>
        <t-form-item label="身份证号" name="idNumber">
          <t-input v-model="distributionForm.idNumber" />
        </t-form-item>
        <t-form-item label="结算银行开户行名称" name="settlementBankAccountName">
          <t-input v-model="distributionForm.settlementBankAccountName" />
        </t-form-item>
        <t-form-item label="结算银行开户账号" name="settlementBankAccountNum">
          <t-input v-model="distributionForm.settlementBankAccountNum" />
        </t-form-item>
        <t-form-item label="结算银行开户支行名称" name="settlementBankBranchName">
          <t-input v-model="distributionForm.settlementBankBranchName" />
        </t-form-item>
      </t-form>
      <template #footer>
        <t-button variant="text" @click="modalVisible = false">取消</t-button>
        <t-button theme="primary" :loading="submitLoading" @click="handleSubmit">提交</t-button>
      </template>
    </t-drawer>
  </div>
</template>

<script>
import { editDistribution, getDistributionListData, resumeDistribution, retreatDistribution } from "@/api/distribution";
import { distributionStatusList } from "./dataJson.js";
import { MessagePlugin, DialogPlugin } from "tdesign-vue";

export default {
  name: "distribution",
  data() {
    return {
      distributionStatusList,
      loading: true,
      modalVisible: false,
      activeStatus: 'ALL',
      distributionForm: {
        name: "",
        idNumber: "",
        settlementBankAccountName: "",
        settlementBankAccountNum: "",
        settlementBankBranchName: "",
      },
      submitLoading: false,
      searchForm: {
        pageNumber: 1,
        pageSize: 20,
        memberName: "",
        distributionStatus: "",
      },
      columns: [
        { title: "会员名称", colKey: "memberName", minWidth: 120, align: "left", tooltip: true },
        { title: "姓名", colKey: "name", minWidth: 100, align: "left" },
        { title: "身份证号", colKey: "idNumber", minWidth: 120, align: "left" },
        { title: "结算银行开户行名称", colKey: "settlementBankAccountName", minWidth: 120, align: "left" },
        { title: "结算银行开户账号", colKey: "settlementBankAccountNum", minWidth: 120, align: "left" },
        { title: "结算银行开户支行名称", colKey: "settlementBankBranchName", minWidth: 120, align: "left" },
        { title: "推广单数", colKey: "distributionOrderCount", minWidth: 120, width: 150, align: "left" },
        { title: "分销订单金额", colKey: "distributionOrderPrice", width: 150, align: "left", cell: (h, p) => p.row.distributionOrderPrice != null ? h("priceColorScheme", { props: { value: p.row.distributionOrderPrice, color: this.$mainColor } }) : h('span', '-') },
        { title: "分销金额", colKey: "rebateTotal", width: 150, align: "left", cell: (h, p) => p.row.rebateTotal != null ? h("priceColorScheme", { props: { value: p.row.rebateTotal, color: this.$mainColor } }) : h('span', '-') },
        { title: "待提现金额", colKey: "canRebate", width: 150, align: "left", cell: (h, p) => p.row.canRebate != null ? h("priceColorScheme", { props: { value: p.row.canRebate, color: "green" } }) : h('span', '-') },
        { title: "冻结金额", colKey: "commissionFrozen", width: 150, align: "left", cell: (h, p) => p.row.commissionFrozen != null ? h("priceColorScheme", { props: { value: p.row.commissionFrozen, color: "#347dda" } }) : h('span', '-') },
        { title: "状态", colKey: "distributionStatus", width: 150, align: "left", cell: (h, p) => {
          const s = p.row.distributionStatus;
          const map = { PASS: { theme: "success", label: "通过" }, APPLY: { theme: "warning", label: "待审核" }, RETREAT: { theme: "warning", label: "清退" }, REFUSE: { theme: "danger", label: "拒绝" } };
          const cfg = map[s] || { theme: "default", label: s };
          return h("t-tag", { props: { theme: cfg.theme, variant: "light", size: "small" } }, [cfg.label]);
        } },
        { title: "操作", colKey: "action", align: "center", fixed: "right", width: 180, cell: (h, p) => {
          return h("div", { class: "ops" }, [
            h("t-button", { props: { theme: "danger", size: "small" }, style: { marginRight: "8px", display: p.row.distributionStatus !== "RETREAT" ? "inline-block" : "none" }, on: { click: () => this.retreat(p.row) } }, ["清退"]),
            h("t-button", { props: { theme: "success", size: "small" }, style: { marginRight: "8px", display: p.row.distributionStatus === "RETREAT" ? "inline-block" : "none" }, on: { click: () => this.resume(p.row) } }, ["恢复"]),
            h("t-button", { props: { theme: "default", size: "small" }, on: { click: () => this.edit(p.row) } }, ["编辑"]),
          ]);
        } },
      ],
      data: [],
      total: 0,
    };
  },
  methods: {
    init() { this.getDataList(); },
    changePage(v) { this.searchForm.pageNumber = v; this.getDataList(); },
    changePageSize(v) { this.searchForm.pageSize = v; this.getDataList(); },
    onPaginationChange(info) { if (info && typeof info.pageSize !== "undefined" && info.pageSize !== this.searchForm.pageSize) { this.changePageSize(info.pageSize); } if (info && typeof info.current !== "undefined") { this.changePage(info.current); } },
    handleSearch() { this.searchForm.pageNumber = 1; this.searchForm.pageSize = 20; this.getDataList(); },
    onStatusTabChange(v) { this.activeStatus = v; this.searchForm.pageNumber = 1; this.getDataList(); },
    getDataList() {
      this.loading = true;
      this.searchForm.distributionStatus = this.activeStatus === 'ALL' ? '' : this.activeStatus;
      getDistributionListData(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
        }
      }).catch(() => { this.loading = false; });
    },
    retreat(v) {
      DialogPlugin.confirm({
        header: "确认清退",
        content: "您确认要清退 " + v.memberName + " ?",
        theme: "warning",
        onConfirm: () => {
          retreatDistribution(v.id).then((res) => { if (res.success) { MessagePlugin.success("操作成功"); this.getDataList(); } });
        },
      });
    },
    resume(v) {
      DialogPlugin.confirm({
        header: "确认恢复",
        content: "您确认要恢复 " + v.memberName + " ?",
        theme: "warning",
        onConfirm: () => {
          resumeDistribution(v.id).then((res) => { if (res.success) { MessagePlugin.success("操作成功"); this.getDataList(); } });
        },
      });
    },
    edit(v) {
      const data = JSON.parse(JSON.stringify(v));
      for (let attr in data) { if (data[attr] === null) { data[attr] = ""; } }
      this.distributionForm = data;
      this.modalVisible = true;
    },
    handleSubmit() {
      editDistribution(this.distributionForm).then((res) => {
        this.submitLoading = false;
        if (res.success) { MessagePlugin.success("操作成功"); this.getDataList(); this.modalVisible = false; }
      });
    },
  },
  mounted() { this.init(); },
};
</script>
<style scoped lang="scss">
.status-tabs { margin: 8px 0; }
::v-deep .status-tabs .t-tabs__content { display: none; }
</style>