YD_Event.Web/src/views/match/order/index.vue

<template>
	<div class="system-menu-container layout-padding">
		<ProTable ref="tableRef" :request-api="orderPageGet" :columns="columns" :pagination="true"
			:tool-button="true">
			<template #tools>
				<el-button v-auth="'order:export'" type="primary" icon="ele-Plus" @click="onOpenMenu"> 导出 </el-button>
			</template>
			<template #index="scope">
				{{ scope.$index + 1 }}
			</template>
			<template #name="scope">
				<SvgIcon :name="scope.row.icon" />
				<span class="ml10">{{ $t(scope.row.name) }}</span>
			</template>
			<template #type="scope">
				<el-tag :type="scope.row.type === 0 ? '' : scope.row.type === 1 ? 'success' : 'danger'">
					{{ scope.row.type === 0 ? '目录' : scope.row.type === 1 ? '菜单' : '按钮' }}</el-tag>
			</template>
			<template #status="scope">
				<el-tag :type="scope.row.status === 0 ? 'success' : 'danger'"> {{ scope.row.status === 0 ? '启用' : '禁用'
				}}</el-tag>
			</template>
			<template #action="scope">
				<el-button size="small" text type="primary" @click="onOpenMenu(scope.row.id)">
					查看详情 </el-button>
			</template>
		</ProTable>

		<!-- 弹窗 -->
		<el-dialog title="新增" v-model="isShowDialog">
			<el-form ref="formRef" :model="formData" :rules="formRules" label-width="150px"
				style="max-width: 600px;margin-bottom: 30px;" v-if="isShowDialog">

				<!-- 项目名称 -->
				<el-form-item label="项目名称：" prop="projectName">
					<el-input v-model="formData.projectName" placeholder="请输入项目名称"></el-input>
				</el-form-item>

				<!-- 项目类型 -->
				<el-form-item label="项目类型：" prop="projectType">
					<el-select v-model="formData.projectType" placeholder="请选择项目类型" style="width: 100%;">
						<el-option label="个人速度" value="personal_speed"></el-option>
						<el-option label="个人花样" value="personal_endurance"></el-option>
						<el-option label="团队速度" value="team_speed"></el-option>
						<el-option label="团队花样" value="team_cooperation"></el-option>
					</el-select>
				</el-form-item>

				<!-- 完成人数 -->
				<el-form-item label="完成人数：" prop="participantCount">
					<el-input v-model="formData.participantCount" placeholder="请输入完成人数"></el-input>
				</el-form-item>

				<!-- 项目描述（根据图片中的模糊区域推断） -->
				<el-form-item label="项目描述：" prop="description">
					<el-input type="textarea" v-model="formData.description" :rows="4" placeholder="请输入项目描述"></el-input>
				</el-form-item>

				<!-- 费用 -->
				<el-form-item label="费用：" prop="fee">
					<el-input v-model="formData.fee" placeholder="请输入费用" class="fee-input">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>

				<!-- 时长 -->
				<el-form-item label="时长：" prop="duration">
					<div class="duration-row">
						<el-input v-model="formData.durationMinutes" placeholder="分"></el-input>
						<span class="duration-label">分</span>
						<span class="duration-separator">--</span>
						<el-input v-model="formData.durationSeconds" placeholder="秒" value="30"></el-input>
						<span class="duration-label">秒</span>
					</div>
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取消</el-button>
					<el-button type="primary" @click="onSubmit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup >
import { defineAsyncComponent, ref, reactive } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import SysMenuApi from '/@/api/SysMenuApi';
import { auths } from '/@/utils/authFunction';
import ProTable from '/@/components/ProTable/index.vue';
import { orderPageGet} from '../../../api/match/order';

// 定义表单引用类型
const formRef = ref();

const formData = ref({
	projectName: '30秒单摇',
	projectType: 'personal_speed',
	participantCount: '',
	description: '',
	fee: '100',
	durationMinutes: '',
	durationSeconds: '30'
})

const formRules = ref({
	projectName: [
		{ required: true, message: '请输入项目名称', trigger: 'blur' }
	],
	projectType: [
		{ required: true, message: '请选择项目类型', trigger: 'change' }
	],
	participantCount: [
		{ required: true, message: '请输入完成人数', trigger: 'blur' }
	],
	description: [
		{ required: true, message: '请输入项目描述', trigger: 'blur' }
	],
	fee: [
		{ required: true, message: '请输入费用', trigger: 'blur' }
	],
	durationMinutes: [
		{ required: true, message: '请输入时长（分）', trigger: 'blur' }
	],
	durationSeconds: [
		{ required: true, message: '请输入时长（秒）', trigger: 'blur' }
	]
});

const columns = ref([
	{ prop: 'orderNo', label: '订单编号', align: 'center', search: { el: 'input', }, fixed: 'left', width: 150 },
	{ prop: 'unitName', label: '单位名称', align: 'center', },
	{ prop: 'eventName', label: '所属赛事', search: { el: 'input', }, },
	{ prop: 'orderType', label: '订单类型', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '收款', value: 1 }, { label: '退款', value: 2 },], },
	{ prop: 'relatedOrderNo', label: '关联订单' },
	{ prop: 'paymentMethod', label: '支付方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '线上', value: 1 }, { label: '线下', value: 2 },], },
	{ prop: 'paymentProofUrl', label: '付款凭证' },
	{ prop: 'registrationMode', label: '报名方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '个人', value: 1 }, { label: '团队', value: 2 },], },
	{ prop: 'contactName', label: '报名用户' },
	{ prop: 'contactPhone', label: '报名账号', search: { el: 'input' } },
	{ prop: 'originalAmount', label: '原金额' },
	{ prop: 'discountAmount', label: '优惠金额' },
	{ prop: 'actualAmount', label: '实付金额' },
	{ prop: 'orderStatus', label: '订单状态' },
	{ prop: 'createdTime', label: '生成时间', search: { el: 'date-picker', props: { type: 'daterange' } } },
	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 120, },
]);

const isShowDialog = ref(false);
const dialogTitle = ref('新增');

const onOpenMenu = (id) => {
	dialogTitle.value = id ? '编辑' : '新增';
	formData.value = {
		projectName: '',
		projectType: '',
		participantCount: '',
		description: '',
		fee: '',
		durationMinutes: '',
		durationSeconds: ''
	};
	isShowDialog.value = true;
};

//删除菜单
const onDeleteMenu = async (id) => {
	const { succeeded, errors } = await SysMenuApi.delete({ id });
	if (succeeded) {
		ElMessage.success('删除成功');
	} else {
		ElMessage.error(errors);
	}
};

// 表单提交
const onSubmit = () => {
	if (!formRef.value) return;

	formRef.value.validate(async (valid) => {
		if (!valid) return;

		// try {
		// 	let res;
		// 	if (formData.value.id) {
		// 		res = await SysMenuApi.add(formData.value);
		// 	} else {
		// 		res = await SysMenuApi.add(formData.value);
		// 	}

		// 	if (res.succeeded) {
		// 		ElMessage.success(dialogTitle.value + '成功');
		// 		isShowDialog.value = false;
		// 	} else {
		// 		ElMessage.error(res.errors);
		// 	}
		// } catch (error) {
		// 	console.error(error);
		// }
	});
};

// 取消
const onCancel = () => {
	isShowDialog.value = false;
};
</script>
<style scoped lang="scss">
.dialog-footer {
	margin-top: 80px;
}

/* 时长组合框样式 */
.duration-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.duration-row .el-input {
	width: 120px;
}

.duration-separator {
	color: #606266;
	font-size: 14px;
}

.duration-label {
	color: #909399;
	font-size: 14px;
}
</style>