|
|
@@ -4,201 +4,152 @@
|
|
|
<!-- 表格 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 v-model="activeName" class="tabs" @tab-click="handleClick">
|
|
|
+ <el-tab-pane v-for="tab in statusTabs" :key="tab.name" :label="tab.label" :name="tab.name" />
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <template #status="scope">
|
|
|
- <p>团购状态：{{ allTabOptions.find(item => item.name === scope.row.groupType)?.label ?? "--" }}</p>
|
|
|
- <p>审核状态：{{ statusEnum.find(item => item.value === scope.row.reviewType)?.label ?? "--" }}</p> </template
|
|
|
- >:
|
|
|
<!-- 表格操作 -->
|
|
|
<template #operation="scope">
|
|
|
- <!-- 审批通过和拒绝按钮仅在状态为0时显示 -->
|
|
|
- <template v-if="scope.row.status === '0'">
|
|
|
- <el-button link type="primary" @click="changeTypes(scope.row, 'on')"> 上架 </el-button>
|
|
|
- <el-button link type="primary" @click="changeTypes(scope.row, 'off')"> 下架 </el-button>
|
|
|
- <el-button link type="primary" @click="changeInventory(scope.row)"> 修改库存 </el-button>
|
|
|
- </template>
|
|
|
- <el-button type="primary" link @click="toDetail(scope.row)"> 查看详情 </el-button>
|
|
|
- <el-button link type="primary" @click="editRow(scope.row)"> 编辑 </el-button>
|
|
|
- <el-button link type="primary" @click="deleteRow(scope.row)"> 删除 </el-button>
|
|
|
+ <el-button type="primary" link @click="showDishDialog(scope.row)"> 查看菜品 </el-button>
|
|
|
+ <el-button link type="primary" @click="toDetail(scope.row)"> 订单详情 </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.remainingInventory }}
|
|
|
- </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 v-model="dishDialogVisible" title="菜品详情" width="600">
|
|
|
+ <el-table :data="dishList" border>
|
|
|
+ <el-table-column prop="category" label="菜品类别" width="150" />
|
|
|
+ <el-table-column prop="name" label="菜品名称" />
|
|
|
+ <el-table-column prop="price" label="价格" width="120">
|
|
|
+ <template #default="scope"> ¥{{ scope.row.price }} </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="quantity" label="数量" width="120">
|
|
|
+ <template #default="scope"> {{ scope.row.quantity }}份 </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="tsx" name="groupPackageManagement">
|
|
|
-import { computed, onActivated, onMounted, reactive, ref, watch } from "vue";
|
|
|
+<script setup lang="tsx" name="orderManagement">
|
|
|
+import { onActivated, onMounted, reactive, ref } 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 { audit, getStaffConfigList } from "@/api/modules/staffConfig";
|
|
|
import { getThaliList } from "@/api/modules/groupPackageManagement";
|
|
|
|
|
|
const router = useRouter();
|
|
|
-const dialogFormVisible = ref(false);
|
|
|
-const formInventory: any = ref({
|
|
|
- id: "",
|
|
|
- packageName: "",
|
|
|
- remainingInventory: "",
|
|
|
- newInventory: ""
|
|
|
-});
|
|
|
-const rowData = ref<any>();
|
|
|
+const proTable = ref<ProTableInstance>();
|
|
|
const activeName = ref("");
|
|
|
+const dishDialogVisible = ref(false);
|
|
|
+const dishList = ref<any[]>([]);
|
|
|
|
|
|
-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 statusEnum = [
|
|
|
- { value: "-1", label: "待审核" },
|
|
|
- { value: "-2", label: "审核通过" },
|
|
|
- { value: "0", label: "审核驳回" }
|
|
|
+// 状态标签选项
|
|
|
+const statusTabs = [
|
|
|
+ { label: "全部", name: "" },
|
|
|
+ { label: "待使用", name: "1" },
|
|
|
+ { label: "已完成", name: "2" },
|
|
|
+ { label: "已退款", name: "3" }
|
|
|
];
|
|
|
|
|
|
-// ProTable 实例（需要在使用它的地方之前定义）
|
|
|
-const proTable = ref<ProTableInstance>();
|
|
|
+// 商品类型选项
|
|
|
+const productTypeOptions = [
|
|
|
+ { label: "团购", value: "1" },
|
|
|
+ { label: "代金券", value: "2" },
|
|
|
+ { label: "优惠券", value: "3" }
|
|
|
+];
|
|
|
+
|
|
|
+// 状态映射
|
|
|
+const statusMap: Record<string, string> = {
|
|
|
+ "1": "待使用",
|
|
|
+ "2": "已完成",
|
|
|
+ "3": "已退款"
|
|
|
+};
|
|
|
|
|
|
// 表格配置项
|
|
|
const columns = reactive<ColumnProps<any>[]>([
|
|
|
{
|
|
|
prop: "index",
|
|
|
label: "序号",
|
|
|
- width: 100,
|
|
|
+ width: 80,
|
|
|
render: (scope: any) => {
|
|
|
return scope.$index + (proTable.value!.pageable.pageNum - 1) * proTable.value!.pageable.pageSize + 1;
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- prop: "groupName",
|
|
|
- label: "代金券名称",
|
|
|
+ prop: "orderNo",
|
|
|
+ label: "订单编号",
|
|
|
search: {
|
|
|
- el: "input"
|
|
|
+ el: "input",
|
|
|
+ props: { placeholder: "订单编号" }
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- prop: "groupName",
|
|
|
- label: "价格",
|
|
|
- render: (scope: any) => {
|
|
|
- return `￥${scope.row.preferentialPrice}`;
|
|
|
+ prop: "productName",
|
|
|
+ label: "商品名称",
|
|
|
+ search: {
|
|
|
+ el: "input",
|
|
|
+ props: { placeholder: "商品名称" }
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- prop: "goodsId",
|
|
|
- label: "已售"
|
|
|
+ prop: "productType",
|
|
|
+ label: "商品类型",
|
|
|
+ render: (scope: any) => {
|
|
|
+ const type = productTypeOptions.find(item => item.value === scope.row.productType);
|
|
|
+ return type ? type.label : "--";
|
|
|
+ },
|
|
|
+ search: {
|
|
|
+ el: "select",
|
|
|
+ props: { placeholder: "请选择" }
|
|
|
+ },
|
|
|
+ enum: productTypeOptions,
|
|
|
+ fieldNames: { label: "label", value: "value" }
|
|
|
},
|
|
|
{
|
|
|
- prop: "inventoryNum",
|
|
|
- label: "剩余库存"
|
|
|
+ prop: "quantity",
|
|
|
+ label: "数量"
|
|
|
},
|
|
|
{
|
|
|
- prop: "goodsId",
|
|
|
- label: "结束时间"
|
|
|
+ prop: "paidAmount",
|
|
|
+ label: "实付款",
|
|
|
+ render: (scope: any) => {
|
|
|
+ return `¥${scope.row.paidAmount || 0}`;
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
- prop: "reviewType",
|
|
|
- label: "审核状态",
|
|
|
- isShow: false,
|
|
|
- render: scope => {
|
|
|
- const statusObj = statusEnum.find(item => item.value === scope.row.reviewType);
|
|
|
- return statusObj ? statusObj.label : "--";
|
|
|
- },
|
|
|
+ prop: "estimatedIncome",
|
|
|
+ label: "本单预计收入",
|
|
|
+ render: (scope: any) => {
|
|
|
+ return `¥${scope.row.estimatedIncome || 0}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "orderTime",
|
|
|
+ label: "下单时间",
|
|
|
search: {
|
|
|
- el: "select"
|
|
|
- },
|
|
|
- enum: statusEnum,
|
|
|
- fieldNames: { label: "label", value: "value" }
|
|
|
+ el: "date-picker",
|
|
|
+ props: {
|
|
|
+ type: "daterange",
|
|
|
+ "range-separator": " - ",
|
|
|
+ "start-placeholder": "开始日期",
|
|
|
+ "end-placeholder": "结束日期"
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
prop: "status",
|
|
|
- label: "状态"
|
|
|
+ label: "状态",
|
|
|
+ render: (scope: any) => {
|
|
|
+ return statusMap[scope.row.status] || "--";
|
|
|
+ }
|
|
|
},
|
|
|
- { prop: "operation", label: "操作", fixed: "right", width: 330 }
|
|
|
+ { prop: "operation", label: "操作", fixed: "right", width: 200 }
|
|
|
]);
|
|
|
|
|
|
-// 在 script setup 中添加
|
|
|
-const allTabOptions = [
|
|
|
- { label: "全部", name: "" },
|
|
|
- { label: "草稿", name: "0" },
|
|
|
- { label: "进行中", name: "5" },
|
|
|
- { label: "待审核", name: "1" },
|
|
|
- { label: "审核拒绝", name: "3" },
|
|
|
- { label: "已售罄", name: "4" },
|
|
|
- { label: "已结束", name: "7" }
|
|
|
-];
|
|
|
-
|
|
|
-// 获取当前审核状态
|
|
|
-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
|
|
|
});
|
|
|
|
|
|
@@ -212,93 +163,49 @@ onActivated(() => {
|
|
|
proTable.value?.getTableList();
|
|
|
});
|
|
|
|
|
|
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
|
|
|
-// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
|
|
+// 数据处理回调
|
|
|
const dataCallback = (data: any) => {
|
|
|
return {
|
|
|
- list: data.records,
|
|
|
- total: data.total
|
|
|
+ list: data.records || data.list || [],
|
|
|
+ total: data.total || 0
|
|
|
};
|
|
|
};
|
|
|
|
|
|
-// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
|
|
|
-// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
|
|
+// 获取表格列表
|
|
|
const getTableList = (params: any) => {
|
|
|
let newParams = JSON.parse(JSON.stringify(params));
|
|
|
+ // 将状态标签的值添加到请求参数中
|
|
|
+ if (activeName.value) {
|
|
|
+ newParams.status = activeName.value;
|
|
|
+ }
|
|
|
return getThaliList(newParams);
|
|
|
};
|
|
|
|
|
|
-// 跳转详情页
|
|
|
-const toDetail = row => {
|
|
|
- router.push(`/voucherManagement/detail?id=${row.id}&type=edit`);
|
|
|
-};
|
|
|
-const editRow = row => {};
|
|
|
-const deleteRow = row => {};
|
|
|
-const newGroupBuying = () => {
|
|
|
- router.push(`/voucherManagement/newVoucher?id=104&type=add`);
|
|
|
-};
|
|
|
-const handleClick = () => {};
|
|
|
-const changeTypes = (row: any, status: string) => {
|
|
|
- rowData.value = row;
|
|
|
- if (status === "on") {
|
|
|
- handleChangeStatus(row, "1");
|
|
|
- } else {
|
|
|
- handleChangeStatus(row, "2");
|
|
|
- }
|
|
|
-};
|
|
|
-const changeInventory = (row: any) => {
|
|
|
- formInventory.value.id = 1;
|
|
|
- formInventory.value.packageName = 1;
|
|
|
- formInventory.value.remainingInventory = 1;
|
|
|
- formInventory.value.newInventory = "";
|
|
|
- dialogFormVisible.value = true;
|
|
|
-};
|
|
|
-const handleChangeStatus = async (row: any, status: string) => {
|
|
|
- try {
|
|
|
- let res = await audit({ id: row.id, status: status, rejectionReason: form.comment });
|
|
|
- if (res.code == 200) {
|
|
|
- proTable.value?.getTableList();
|
|
|
- if (status === "2") closeDialog();
|
|
|
- ElMessage.success("审核成功");
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error("操作失败");
|
|
|
- }
|
|
|
+// 状态标签切换
|
|
|
+const handleClick = () => {
|
|
|
+ proTable.value?.getTableList();
|
|
|
};
|
|
|
|
|
|
-// 弹窗提交
|
|
|
-const handleSubmit = async () => {
|
|
|
- if (!ruleFormRef.value) return;
|
|
|
- await ruleFormRef.value.validate((valid, fields) => {
|
|
|
- if (valid) {
|
|
|
- ElMessage.success("修改成功");
|
|
|
- dialogFormVisible.value = false;
|
|
|
- }
|
|
|
- });
|
|
|
+// 显示菜品弹窗
|
|
|
+const showDishDialog = (row: any) => {
|
|
|
+ // TODO: 根据实际API获取菜品数据
|
|
|
+ // 这里先使用模拟数据
|
|
|
+ dishList.value = [
|
|
|
+ { category: "蔬菜", name: "黄豆芽", price: 5, quantity: 1 },
|
|
|
+ { category: "荤菜", name: "虾滑", price: 12, quantity: 1 }
|
|
|
+ ];
|
|
|
+ dishDialogVisible.value = true;
|
|
|
};
|
|
|
-// 关闭弹窗;
|
|
|
-const closeDialog = () => {
|
|
|
- dialogFormVisible.value = false;
|
|
|
- formInventory.value = {
|
|
|
- id: "",
|
|
|
- packageName: "",
|
|
|
- remainingInventory: "",
|
|
|
- newInventory: ""
|
|
|
- };
|
|
|
+
|
|
|
+// 跳转详情页
|
|
|
+const toDetail = (row: any) => {
|
|
|
+ router.push(`/orderManagementDetail?id=${row.id}`);
|
|
|
};
|
|
|
</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;
|
|
|
}
|
congxuesong