274 lines
6.9 KiB
Vue
274 lines
6.9 KiB
Vue
<template>
|
|
<div class="system-menu-container layout-padding">
|
|
<ProTable ref="tableRef" :request-api="appuserLeaderPageGet" :columns="columns" :pagination="true"
|
|
:tool-button="true" :initParam="initParam">
|
|
<template #tools>
|
|
<el-button type="primary" @click="onOpenMenu"> 新增 </el-button>
|
|
</template>
|
|
<template #index="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
|
|
<template #idCardImageUrl="scope">
|
|
<el-image :src="scope.row.idCardImageUrl" style="min-width: 100px; "/>
|
|
</template>
|
|
|
|
<template #action="scope">
|
|
<el-button 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 icon="ele-Delete" size="small" text type="danger"> 删除
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</ProTable>
|
|
|
|
<!-- 弹窗 -->
|
|
<el-dialog :title="dialogTitle" v-model="isShowDialog">
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px"
|
|
style="max-width: 600px;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="age">
|
|
<el-input v-model="formData.age" placeholder="请输入年龄"></el-input>
|
|
<!-- <el-date-picker v-model="formData.age" type="date" placeholder="请选择出生日期" style="width: 100%;"></el-date-picker> -->
|
|
</el-form-item>
|
|
|
|
<!-- 身份证 -->
|
|
<el-form-item label="身份证照片" prop="idCardImageUrl">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="/api/file/upload"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
>
|
|
<img v-if="formData.idCardImageUrl" :src="formData.idCardImageUrl" style="height: 100px;" class="avatar" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
<!-- 身份证号 -->
|
|
<el-form-item label="身份证号" prop="idCard">
|
|
<el-input v-model="formData.idCard" placeholder="请输入身份证号"></el-input>
|
|
</el-form-item>
|
|
<!-- 性别 -->
|
|
<el-form-item label="性别" prop="gender">
|
|
<el-select v-model="formData.gender" placeholder="请选择性别">
|
|
<el-option label="男" :value="1"></el-option>
|
|
<el-option label="女" :value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 联系电话 -->
|
|
<el-form-item label="联系电话" prop="phone">
|
|
<el-input v-model="formData.phone" placeholder="请输入联系电话" class="fee-input">
|
|
</el-input>
|
|
</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="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 { appuserLeaderPageGet ,appuserLeaderSavePost , appuserMemberDeletePost} from '/@/api/match/appuser';
|
|
|
|
// 定义表单引用类型
|
|
const formRef = ref();
|
|
const initParam = ref({
|
|
refresh: true,
|
|
personType:3
|
|
});
|
|
const formData = ref({
|
|
name: '',
|
|
age: '',
|
|
gender: '',
|
|
phone: '',
|
|
idCardImageUrl: '',
|
|
idCard: '',
|
|
})
|
|
|
|
const formRules = ref({
|
|
name: [
|
|
{ required: true, message: '请输入领队姓名', trigger: 'blur' }
|
|
],
|
|
age: [
|
|
{ required: true, message: '请输入年龄', trigger: 'change' }
|
|
],
|
|
gender: [
|
|
{ required: true, message: '请选择性别', trigger: 'change' }
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' }
|
|
],
|
|
idCardImageUrl: [
|
|
{ required: true, message: '请上传身份证', trigger: 'change' }
|
|
],
|
|
idCard: [
|
|
{ required: true, message: '请输入身份证号', trigger: 'blur' }
|
|
]
|
|
});
|
|
|
|
const columns = ref([
|
|
{ prop: 'index', label: '序号', align: 'center', },
|
|
{ prop: 'name', label: '领队姓名', search: { el: 'input' } },
|
|
{
|
|
prop: 'gender', label: '性别', search: {
|
|
el: 'select',
|
|
},
|
|
enum: [
|
|
{ label: '全部', value: '' },
|
|
{ label: '男', value: 1 },
|
|
{ label: '女', value: 0 },
|
|
],
|
|
},
|
|
{ prop: 'mobile', label: '联系电话' , search: { el: 'input' }},
|
|
{ prop: 'idCardImageUrl', label: '身份证' },
|
|
|
|
{ prop: 'action', label: '操作', align: 'center', fixed: 'right' },
|
|
]);
|
|
|
|
const isShowDialog = ref(false);
|
|
const dialogTitle = ref('新增');
|
|
|
|
const onOpenMenu = (id) => {
|
|
dialogTitle.value = id ? '编辑' : '新增';
|
|
formData.value = {
|
|
name: '',
|
|
age: '',
|
|
gender: '',
|
|
phone: '',
|
|
idCardUrl: '',
|
|
idCard: '',
|
|
};
|
|
if (id) {
|
|
// 编辑
|
|
// const menu = tableRef.value.getRowData(id);
|
|
formData.value = id;
|
|
formData.value.phone = id.mobile;
|
|
formData.value.idCard = id.idCardNumber;
|
|
}
|
|
isShowDialog.value = true;
|
|
};
|
|
|
|
//删除菜单
|
|
const onDeleteMenu = async (id) => {
|
|
const { succeeded, errors } = await appuserMemberDeletePost( id);
|
|
if (succeeded) {
|
|
initParam.value.refresh = !initParam.value.refresh;
|
|
ElMessage.success('删除成功');
|
|
} else {
|
|
ElMessage.error(errors);
|
|
}
|
|
};
|
|
|
|
const handleAvatarSuccess = (response,
|
|
uploadFile) => {
|
|
formData.value.idCardUrl = response[0].url;
|
|
}
|
|
|
|
|
|
|
|
|
|
// 表单提交
|
|
const onSubmit = () => {
|
|
if (!formRef.value) return;
|
|
|
|
formRef.value.validate(async (valid) => {
|
|
if (!valid) return;
|
|
|
|
try {
|
|
let res;
|
|
if (formData.value.id) {
|
|
res = await appuserLeaderSavePost(formData.value);
|
|
} else {
|
|
res = await appuserLeaderSavePost(formData.value);
|
|
}
|
|
|
|
if (res.succeeded) {
|
|
ElMessage.success(dialogTitle.value + '成功');
|
|
initParam.value.refresh = !initParam.value.refresh; // 刷新表格
|
|
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>
|
|
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
}
|
|
</style> |