245 lines
7.9 KiB
Vue
245 lines
7.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="system-menu-container layout-padding">
|
|||
|
|
<ProTable ref="tableRef" :request-api="SysMenuApi.page" :columns="columns" :pagination="false"
|
|||
|
|
:tool-button="false">
|
|||
|
|
<template #tools>
|
|||
|
|
<el-button v-auth="'sysmenu:add'" 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 v-auth="'sysmenu:edit'" icon="ele-Edit" size="small" text type="primary"
|
|||
|
|
@click="onOpenMenu(scope.row.id)"> 编辑 </el-button>
|
|||
|
|
<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
|
|||
|
|
<template #reference>
|
|||
|
|
<el-button v-auth="'sysmenu:delete'" icon="ele-Delete" size="small" text type="danger"> 删除
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-popconfirm> -->
|
|||
|
|
|
|||
|
|
<el-button v-auth="'sysmenu:add'" 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 lang="ts" name="sysMenu">
|
|||
|
|
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 { ColumnProps } from '/@/components/ProTable/interface';
|
|||
|
|
|
|||
|
|
// 定义表单引用类型
|
|||
|
|
const formRef = ref<InstanceType<typeof ElForm>>();
|
|||
|
|
|
|||
|
|
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<ColumnProps[]>([
|
|||
|
|
{ prop: 'index',label: '订单编号',align: 'center',search: { el: 'input',},},
|
|||
|
|
{prop: 'name',label: '单位名称',align: 'center',},
|
|||
|
|
{prop: 'type',label: '所属赛事',search: { el: 'input',},},
|
|||
|
|
{prop: 'path',label: '订单类型',search: { el: 'select',},enum: [ { label: '全部', value: 0 }, { label: '收款', value: 1 }, { label: '退款', value: 2 },],},
|
|||
|
|
{ prop: 'code', label: '关联订单' },
|
|||
|
|
{prop: 'pay',label: '支付方式',search: { el: 'select',},enum: [ { label: '全部', value: 0 }, { label: '线上', value: 1 }, { label: '线下', value: 2 },],},
|
|||
|
|
{ prop: 'code', label: '付款凭证' },
|
|||
|
|
{prop: 'typeRegistration',label: '报名方式',search: { el: 'select',},enum: [ { label: '全部', value: 0 }, { label: '个人', value: 1 }, { label: '团队', value: 2 },],},
|
|||
|
|
{ prop: 'code1', label: '报名用户' },
|
|||
|
|
{ prop: 'code2', label: '报名账号', search: { el: 'input' } },
|
|||
|
|
{ prop: 'num', label: '原金额' },
|
|||
|
|
{ prop: 'num1', label: '优惠金额' },
|
|||
|
|
{ prop: 'num2', label: '实付金额' },
|
|||
|
|
{ prop: 'num3', label: '退款金额' },
|
|||
|
|
{ prop: 'time', label: '生成时间', search: { el: 'date-picker', props: { type: 'daterange' } } },
|
|||
|
|
{ prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 120, isShow: auths(['sysmenu:add']) },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const isShowDialog = ref(false);
|
|||
|
|
const dialogTitle = ref('新增');
|
|||
|
|
|
|||
|
|
const onOpenMenu = (id: number = 0) => {
|
|||
|
|
dialogTitle.value = id ? '编辑' : '新增';
|
|||
|
|
formData.value = {
|
|||
|
|
projectName: '',
|
|||
|
|
projectType: '',
|
|||
|
|
participantCount: '',
|
|||
|
|
description: '',
|
|||
|
|
fee: '',
|
|||
|
|
durationMinutes: '',
|
|||
|
|
durationSeconds: ''
|
|||
|
|
};
|
|||
|
|
isShowDialog.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//删除菜单
|
|||
|
|
const onDeleteMenu = async (id: number) => {
|
|||
|
|
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>
|