320 lines
9.2 KiB
Vue
320 lines
9.2 KiB
Vue
<template>
|
||
<div class="system-menu-container layout-padding">
|
||
<ProTable ref="tableRef" :request-api="projectPageGet" :columns="columns" :pagination="true" :tool-button="false" :initParam="initParam">
|
||
<template #tools>
|
||
<el-button v-auth="'project:add'" type="primary" icon="ele-Plus" @click="onOpenMenu()"> 新增 </el-button>
|
||
</template>
|
||
<template #index="scope">
|
||
{{ scope.$index + 1 }}
|
||
</template>
|
||
|
||
<template #projectTypeId="scope">
|
||
{{ scope.row.projectTypeName }}
|
||
</template>
|
||
|
||
<template #completionCount="scope">
|
||
{{ scope.row.projectTypeId == '1003' || scope.row.projectTypeId == '1004' ? 1 : scope.row.completionCount }}
|
||
</template>
|
||
|
||
<template #action="scope">
|
||
<el-button v-auth="'project:edit'" icon="ele-Edit" size="small" text type="primary" @click="onOpenMenu(scope.row)"> 编辑 </el-button>
|
||
<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
|
||
<template #reference>
|
||
<el-button v-auth="'project:delete'" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
|
||
<el-button v-auth="'project:detail'" size="small" text type="primary" @click="onOpenMenu(scope.row)"> 查看详情 </el-button>
|
||
</template>
|
||
</ProTable>
|
||
|
||
<!-- 弹窗 -->
|
||
<el-dialog :title="dialogTitle" v-model="isShowDialog" width="1100px">
|
||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="150px" style="width: 90%; margin-bottom: 30px" v-if="isShowDialog">
|
||
<!-- 项目名称 -->
|
||
<el-form-item label="项目名称：" prop="name">
|
||
<el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 项目类型 -->
|
||
<el-form-item label="项目类型：" prop="projectTypeId">
|
||
<el-select v-model="formData.projectTypeId" placeholder="请选择项目类型" style="width: 100%">
|
||
<el-option label="个人速度" :value="1003"></el-option>
|
||
<el-option label="个人花样" :value="1004"></el-option>
|
||
<el-option label="团队速度" :value="1005"></el-option>
|
||
<el-option label="团队花样" :value="1006"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 完成人数 -->
|
||
<el-form-item label="完成人数：" prop="completionCount" v-if="formData.projectTypeId == 1005 || formData.projectTypeId == 1006">
|
||
<el-input v-model="formData.completionCount" placeholder="请输入完成人数"></el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 组别 -->
|
||
<div v-if="formData.projectTypeId == 1005 || formData.projectTypeId == 1006">
|
||
<el-form-item
|
||
:label="'组别' + (index + 1) + '：'"
|
||
prop="groups"
|
||
v-for="(group, index) in formData.groups"
|
||
:key="index"
|
||
:rules="{
|
||
validator: (rule, value, callback) => {
|
||
console.log(value);
|
||
if (!value[index].groupName) {
|
||
callback(new Error('请输入组别名'));
|
||
}
|
||
if (!value[index].birthDateStart) {
|
||
callback(new Error('请选择出生日期开始'));
|
||
}
|
||
if (!value[index].birthDateEnd) {
|
||
callback(new Error('请选择出生日期结束'));
|
||
}
|
||
if (!value[index].gender) {
|
||
callback(new Error('请选择性别'));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: 'blur',
|
||
}"
|
||
>
|
||
<el-input v-model="group.groupName" placeholder="输入组别名" style="width: 100px; margin-right: 18px"></el-input>
|
||
<el-date-picker v-model="group.birthDateStart" type="date" placeholder="出生日期开始" style="margin-right: 18px"></el-date-picker>
|
||
<el-date-picker v-model="group.birthDateEnd" type="date" placeholder="出生日期结束" style="margin-right: 18px"></el-date-picker>
|
||
<el-select v-model="group.gender" placeholder="性别" style="width: 100px">
|
||
<el-option label="男" :value="1"></el-option>
|
||
<el-option label="女" :value="2"></el-option>
|
||
<el-option label="不限" :value="0"></el-option>
|
||
</el-select>
|
||
<el-button
|
||
circle
|
||
@click="removeGroup(index)"
|
||
style="margin-left: 30px"
|
||
size="small"
|
||
icon="Minus"
|
||
v-if="index == formData.groups.length - 1 && index != 0"
|
||
></el-button>
|
||
</el-form-item>
|
||
<el-button @click="addGroup" icon="Plus" style="margin: 20px 0px 20px 150px; width: 85%" dashed></el-button>
|
||
</div>
|
||
|
||
<!-- 费用 -->
|
||
<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="秒"></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 name="project">
|
||
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 { projectPageGet, projectAddPost, projectEditPut, projectDeleteDelete , projectDetailGet } from '/@/api/match/project';
|
||
|
||
// 定义表单引用类型
|
||
const formRef = ref();
|
||
const initParam = ref({
|
||
refresh: true,
|
||
});
|
||
|
||
const addGroup = () => {
|
||
formData.value.groups.push({
|
||
groupName: '',
|
||
birthDateStart: '',
|
||
birthDateEnd: '',
|
||
gender: '',
|
||
});
|
||
};
|
||
|
||
const removeGroup = () => {
|
||
formData.value.groups.pop();
|
||
};
|
||
|
||
const formData = ref({
|
||
name: '',
|
||
projectTypeId: '',
|
||
completionCount: '',
|
||
fee: '',
|
||
durationMinutes: '0',
|
||
durationSeconds: '0',
|
||
groups: [
|
||
{
|
||
groupName: '',
|
||
birthDateStart: '',
|
||
birthDateEnd: '',
|
||
gender: '',
|
||
},
|
||
],
|
||
});
|
||
|
||
const formRules = ref({
|
||
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
||
projectTypeId: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
|
||
completionCount: [{ 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: 'index',
|
||
label: '序号',
|
||
align: 'center',
|
||
},
|
||
{
|
||
prop: 'name',
|
||
label: '项目名称',
|
||
align: 'center',
|
||
search: {
|
||
el: 'input',
|
||
},
|
||
},
|
||
{
|
||
prop: 'projectTypeId',
|
||
label: '项目类型',
|
||
search: {
|
||
el: 'select',
|
||
},
|
||
enum: [
|
||
{ label: '全部', value: 0 },
|
||
{ label: '团队速度', value: 1001 },
|
||
{ label: '团队花样', value: 1002 },
|
||
{ label: '个人速度', value: 1003 },
|
||
{ label: '个人花样', value: 1004 },
|
||
],
|
||
},
|
||
{
|
||
prop: 'completionCount',
|
||
label: '完成人数',
|
||
},
|
||
|
||
{ prop: 'fee', label: '费用(元)' },
|
||
|
||
{ prop: 'action', label: '操作', align: 'center', fixed: 'right', isShow: auths(['project:delete', 'project:edit', 'project:add']) },
|
||
]);
|
||
|
||
const isShowDialog = ref(false);
|
||
const dialogTitle = ref('新增');
|
||
|
||
const onOpenMenu = async (row) => {
|
||
console.log(row);
|
||
dialogTitle.value = row ? '编辑' : '新增';
|
||
formData.value = {
|
||
name: '',
|
||
projectTypeId: '',
|
||
completionCount: '',
|
||
fee: '',
|
||
durationMinutes: '0',
|
||
durationSeconds: '0',
|
||
groups: [
|
||
{
|
||
groupName: '',
|
||
birthDateStart: '',
|
||
birthDateEnd: '',
|
||
gender: '',
|
||
},
|
||
],
|
||
};
|
||
if (row) {
|
||
const { succeeded, data } = await projectDetailGet({ id: row.id });
|
||
formData.value = data;
|
||
}
|
||
isShowDialog.value = true;
|
||
};
|
||
|
||
//删除菜单
|
||
const onDeleteMenu = async (id) => {
|
||
const { succeeded, errors } = await merchantDeleteDelete({ 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 projectEditPut(formData.value);
|
||
} else {
|
||
res = await projectAddPost(formData.value);
|
||
}
|
||
|
||
if (res.succeeded) {
|
||
initParam.value.refresh = !initParam.value.refresh; // 刷新表格数据
|
||
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>
|