group_web_merchant/src/views/couponManagement/index.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <div class="table-header-btn">
          <el-button :icon="Plus" class="button" type="primary" @click="newGroupBuying"> 新建优惠券 </el-button>
          <el-tabs v-if="showTabs" v-model="activeName" class="tabs" @tab-click="handleClick">
            <el-tab-pane v-for="tab in filteredTabOptions" :key="tab.name" :label="tab.label" :name="tab.name" />
          </el-tabs>
        </div>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button
          link
          type="primary"
          @click="changeTypes(scope.row, 'on')"
          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.上架)"
        >
          上架
        </el-button>
        <el-button
          link
          type="primary"
          @click="changeTypes(scope.row, 'off')"
          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.下架)"
        >
          下架
        </el-button>
        <el-button
          link
          type="primary"
          @click="changeInventory(scope.row)"
          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.修改库存)"
        >
          修改库存
        </el-button>
        <el-button
          type="primary"
          link
          @click="toDetail(scope.row)"
          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.查看详情)"
        >
          查看详情
        </el-button>
        <el-button
          link
          type="primary"
          @click="editRow(scope.row)"
          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.编辑)"
        >
          编辑
        </el-button>
        <el-button
          link
          type="primary"
          @click="deleteRow(scope.row)"
          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.删除)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <el-dialog v-model="dialogFormVisible" title="修改库存" width="500">
      <el-form ref="ruleFormRef" :model="formInventory" :rules="rules" @submit.prevent>
        <el-form-item label="套餐名">
          {{ formInventory.packageName }}
        </el-form-item>
        <el-form-item label="剩余库存">
          {{ formInventory.inventoryNum }}
        </el-form-item>
        <el-form-item label="修改库存" prop="newInventory">
          <el-input v-model="formInventory.newInventory" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog"> 取消 </el-button>
          <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx" name="groupPackageManagement">
import { computed, onActivated, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { Plus } from "@element-plus/icons-vue";
import { getThaliList, sjxj, updateNum, delThaliById } from "@/api/modules/couponManagement";
import { ElMessageBox } from "element-plus/es";
import { localGet } from "@/utils";

const router = useRouter();
const dialogFormVisible = ref(false);
const formInventory: any = ref({
  id: "",
  packageName: "",
  inventoryNum: "",
  newInventory: ""
});
const rowData = ref<any>();
const activeName = ref("");
// 定义表单类型
interface RuleForm {
  newInventory: string;
}
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<RuleForm>>({
  newInventory: [
    { required: true, message: "请输入库存数量", trigger: "blur" },
    {
      pattern: /^(0|[1-9][0-9]*)$/,
      message: "请输入整数,不允许输入小数,负数",
      trigger: "blur"
    }
  ]
});
const allTabOptions = [
  { label: "全部", name: "" },
  { label: "草稿", name: "0" },
  { label: "进行中", name: "5" },
  { label: "未开始", name: "2" },
  { label: "已下架", name: "6" },
  { label: "已售罄", name: "4" },
  { label: "已结束", name: "7" }
];

// 状态枚举：0草稿 1待审核 2未开始 3审核拒绝 4已售罄 5进行中 6已下架 7已结束
const STATUS = {
  草稿: 0,
  待审核: 1,
  未开始: 2,
  审核拒绝: 3,
  已售罄: 4,
  进行中: 5,
  已下架: 6,
  已结束: 7
} as const;

// 操作按钮权限配置：定义每个操作按钮在哪些状态下显示
const OPERATION_PERMISSIONS = {
  // 查看详情：待审核、未开始、审核拒绝、进行中、已售罄、已下架
  查看详情: [STATUS.待审核, STATUS.未开始, STATUS.审核拒绝, STATUS.进行中, STATUS.已售罄, STATUS.已下架],
  // 上架：未开始、已下架
  上架: [STATUS.未开始, STATUS.已下架],
  // 下架：进行中
  下架: [STATUS.进行中],
  // 修改库存：未开始、进行中、已售罄
  修改库存: [STATUS.未开始, STATUS.进行中, STATUS.已售罄],
  // 编辑：草稿、审核拒绝、已售罄、已下架、已结束
  编辑: [STATUS.草稿, STATUS.审核拒绝, STATUS.已售罄, STATUS.已下架, STATUS.已结束],
  // 删除：草稿、未开始、审核拒绝、已售罄、已结束
  删除: [STATUS.草稿, STATUS.未开始, STATUS.审核拒绝, STATUS.已售罄, STATUS.已结束]
} as const;

// 判断按钮是否显示的工具函数
const canShowButton = (status: number, allowedStatuses: readonly number[]) => {
  return allowedStatuses.includes(status);
};
// ProTable 实例（需要在使用它的地方之前定义）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: "index",
    label: "序号",
    width: 100,
    render: (scope: any) => {
      return scope.$index + (proTable.value!.pageable.pageNum - 1) * proTable.value!.pageable.pageSize + 1;
    }
  },
  {
    prop: "groupName",
    label: "优惠券名称",
    search: {
      el: "input"
    }
  },
  {
    prop: "groupName",
    label: "已领"
  },
  {
    prop: "inventoryNum",
    label: "剩余库存"
  },
  {
    prop: "goodsId",
    label: "结束时间"
  },
  {
    prop: "status",
    label: "状态"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
]);

// 获取当前审核状态
const currentAuditStatus = computed(() => {
  if (!proTable.value?.searchParam) return "";
  return proTable.value.searchParam.reviewType || "";
});

// 控制 el-tabs 是否显示：当审核状态为空或审核通过时显示
const showTabs = computed(() => {
  const status = currentAuditStatus.value;
  return !status || status === "-2";
});

// 根据审核状态过滤 tabOptions：如果审核状态为空，只显示草稿；审核通过时，显示除草稿外的所有标签页
const filteredTabOptions = computed(() => {
  const status = currentAuditStatus.value;
  if (!status) {
    // 审核状态为空时，只显示草稿
    return allTabOptions;
  } else if (status === "-2") {
    // 审核通过时，显示除草稿外的所有标签页
    return allTabOptions.filter(tab => tab.name !== "1");
  }
  return [];
});

// 监听审核状态变化
watch(
  currentAuditStatus,
  newStatus => {
    if (!newStatus || newStatus === "-2") {
      // 审核状态为空时，确保 activeName 为草稿
      activeName.value = "";
    }
  },
  { immediate: true }
);
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
  storeId: "104",
  groupType: "1",
  status: activeName
});

// 页面加载时触发查询
onMounted(() => {
  proTable.value?.getTableList();
});

// 从其他页面返回时触发查询
onActivated(() => {
  proTable.value?.getTableList();
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.records,
    total: data.total
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getThaliList(newParams);
};

const newGroupBuying = () => {
  router.push(`/couponManagement/newCoupon?type=add`);
};
// 跳转详情页
const toDetail = row => {
  router.push(`/couponManagement/detail?id=${row.id}`);
};
const editRow = row => {
  router.push(`/couponManagement/newCoupon?id=${row.id}&type=edit`);
};
const deleteRow = row => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const params = {
      id: row.id,
      groupType: localGet("businessSection") || "1"
    };
    delThaliById(params).then(() => {
      ElMessage.success("删除成功");
      proTable.value?.getTableList();
    });
  });
};
const handleClick = () => {};
const changeTypes = async (row: any, status: string) => {
  rowData.value = row;
  let res = await sjxj({ id: row.id, status: status });
  if (res && res.code == 200) {
    ElMessage.success("操作成功");
    proTable.value?.getTableList();
  }
};
const changeInventory = (row: any) => {
  formInventory.value.id = row.id;
  formInventory.value.packageName = row.packageName;
  formInventory.value.inventoryNum = row.inventoryNum;
  formInventory.value.newInventory = "";
  dialogFormVisible.value = true;
};
// 弹窗提交
const handleSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await updateNum({ id: formInventory.value.id, num: formInventory.value.newInventory });
      if (res && res.code == 200) {
        ElMessage.success("库存修改成功");
        dialogFormVisible.value = false;
        proTable.value?.getTableList();
      }
    }
  });
};
// 关闭弹窗;
const closeDialog = () => {
  dialogFormVisible.value = false;
  formInventory.value = {
    id: "",
    packageName: "",
    inventoryNum: "",
    newInventory: ""
  };
};
</script>

<style lang="scss" scoped>
// 在组件样式中添加
.date-range {
  display: block; // 确保换行生效
  padding: 0 8px; // 可选：增加内边距
  word-wrap: break-word; // 长单词内换行
  white-space: normal; // 允许自然换行
}
.table-header-btn {
  .tabs {
    margin-top: 10px;
    :deep(.el-tabs__nav-wrap::after) {
      height: 0;
    }
  }
}
</style>