28 changed files with 775 additions and 484 deletions
@ -0,0 +1,295 @@ |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="t('addBindingPersonnel')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :inline="true" :model="lessonCourseTeachingTable.searchParam" ref="searchFormRef"> |
|||
<el-form-item :label="t('userName')" prop="title"> |
|||
<el-input v-model="lessonCourseTeachingTable.searchParam.name" :placeholder="t('userName')" /> |
|||
</el-form-item> |
|||
<el-form-item :label="t('userPhone')" prop="status"> |
|||
<el-input v-model="lessonCourseTeachingTable.searchParam.phone" :placeholder="t('userPhone')" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadLessonCourseTeachingList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="lessonCourseTeachingTable.data" size="large" v-loading="lessonCourseTeachingTable.loading" @selection-change="handleSelectionChange"> |
|||
<template #empty> |
|||
<span>{{ !lessonCourseTeachingTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column type="selection" width="55" /> |
|||
<el-table-column prop="name" :label="t('userName')" min-width="70" :show-overflow-tooltip="true"/> |
|||
<el-table-column prop="phone" :label="t('userPhone')" min-width="120" :show-overflow-tooltip="true"/> |
|||
<el-table-column :label="t('userStatus')" min-width="100" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-if="row.status == 1">待审核</div> |
|||
<div v-if="row.status == 2">已审核</div> |
|||
<div v-if="row.status == 3">已禁用</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="create_time" :label="t('userCreateTime')" min-width="150" :show-overflow-tooltip="true"/> |
|||
<el-table-column prop="update_time" :label="t('userUpdateTime')" min-width="150" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('operation')" fixed="right" min-width="120"> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button> |
|||
<el-button type="primary" link @click="deleteEvent(row.id, 1)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="lessonCourseTeachingTable.page" v-model:page-size="lessonCourseTeachingTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="lessonCourseTeachingTable.total" |
|||
@size-change="loadLessonCourseTeachingList()" @current-change="loadLessonCourseTeachingList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- <el-form-item :label="t('bindingModule')" style="margin-top: 15px;">--> |
|||
<!-- <el-select class="w-[280px]" v-model="binding_module" clearable :placeholder="t('bindingModule')">--> |
|||
<!-- <el-option label="课程教学大纲" value="1" />--> |
|||
<!-- <el-option label="跳绳教案库" value="2" />--> |
|||
<!-- <el-option label="增高教案库" value="3" />--> |
|||
<!-- <el-option label="篮球教案库" value="4" />--> |
|||
<!-- <el-option label="强化教案库" value="5" />--> |
|||
<!-- <el-option label="空中忍者教案库" value="6" />--> |
|||
<!-- <el-option label="少儿安防教案库" value="7" />--> |
|||
<!-- <el-option label="体能教案库" value="8" />--> |
|||
<!-- <el-option label="热身动作库" value="9" />--> |
|||
<!-- <el-option label="体能动作库" value="10" />--> |
|||
<!-- <el-option label="趣味游戏库" value="11" />--> |
|||
<!-- <el-option label="放松动作库" value="12" />--> |
|||
<!-- <el-option label="训练内容" value="13" />--> |
|||
<!-- <el-option label="训练视频" value="14" />--> |
|||
<!-- <el-option label="课后作业" value="15" />--> |
|||
<!-- <el-option label="优秀一堂课" value="16" />--> |
|||
<!-- <el-option label="空中忍者" value="17" />--> |
|||
<!-- <el-option label="篮球动作" value="18" />--> |
|||
<!-- <el-option label="跳绳动作" value="19" />--> |
|||
<!-- <el-option label="跑酷动作" value="20" />--> |
|||
<!-- <el-option label="安防动作" value="21" />--> |
|||
<!-- <el-option label="标准化动作" value="22" />--> |
|||
<!-- <el-option label="3-6岁体测" value="23" />--> |
|||
<!-- <el-option label="7+体测" value="24" />--> |
|||
<!-- <el-option label="3-6岁体测讲解—解读" value="25" />--> |
|||
<!-- <el-option label="7+岁体测讲解—解读" value="26" />--> |
|||
<!-- <el-option label="互动游戏" value="27" />--> |
|||
<!-- <el-option label="套圈游戏" value="28" />--> |
|||
<!-- <el-option label="鼓励方式" value="29" />--> |
|||
<!-- </el-select>--> |
|||
<!-- </el-form-item>--> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ |
|||
t('confirm') |
|||
}}</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { |
|||
addLessonCourseTeaching, |
|||
editLessonCourseTeaching, |
|||
getLessonCourseTeachingInfo, |
|||
getLessonCourseTeachingList, |
|||
getWithPersonnelDataList, |
|||
setBindingModule |
|||
} from '@/app/api/lesson_course_teaching' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
let lessonCourseTeachingTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"name":"", |
|||
"phone":"" |
|||
} |
|||
}) |
|||
|
|||
const multipleSelection = ref<[]>([]) |
|||
const binding_module = ref('') |
|||
const handleSelectionChange = (val: []) => { |
|||
multipleSelection.value = val |
|||
} |
|||
|
|||
|
|||
const loadLessonCourseTeachingList = (page: number = 1) => { |
|||
lessonCourseTeachingTable.loading = true |
|||
lessonCourseTeachingTable.page = page |
|||
|
|||
getWithPersonnelDataList({ |
|||
page: lessonCourseTeachingTable.page, |
|||
limit: lessonCourseTeachingTable.limit, |
|||
...lessonCourseTeachingTable.searchParam |
|||
}).then(res => { |
|||
lessonCourseTeachingTable.loading = false |
|||
lessonCourseTeachingTable.data = res.data.data |
|||
lessonCourseTeachingTable.total = res.data.total |
|||
}).catch(() => { |
|||
lessonCourseTeachingTable.loading = false |
|||
}) |
|||
} |
|||
loadLessonCourseTeachingList() |
|||
|
|||
const resetForm = (page: number = 1) => { |
|||
lessonCourseTeachingTable.searchParam.name = '' |
|||
lessonCourseTeachingTable.searchParam.phone = '' |
|||
loadLessonCourseTeachingList() |
|||
} |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
title: '', |
|||
image: '', |
|||
type: '', |
|||
content: '', |
|||
status: '' |
|||
// user_permission: [], |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
title: [ |
|||
{ required: true, message: t('titlePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
image: [ |
|||
{ required: true, message: t('imagePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
type: [ |
|||
{ required: true, message: t('typePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
content: [ |
|||
{ required: true, message: t('contentPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
status: [ |
|||
{ required: true, message: t('statusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
let data = { |
|||
id: BindingId.value, |
|||
user_permission: multipleSelection.value.map(item => item.sys_user_id).join(','), |
|||
user_permission_name: multipleSelection.value.map(item => item.name).join(','), |
|||
table_type: binding_module.value, |
|||
} |
|||
setBindingModule(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let typeList = ref([]) |
|||
const typeDictList = async () => { |
|||
typeList.value = await (await useDictionary('material_type')).data.dictionary |
|||
} |
|||
typeDictList(); |
|||
watch(() => typeList.value, () => { formData.type = typeList.value[0].value }) |
|||
let statusList = ref([]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('course_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
watch(() => statusList.value, () => { formData.status = statusList.value[0].value }) |
|||
|
|||
|
|||
const userPermissionList = ref([] as any[]) |
|||
const BindingId = ref(undefined) |
|||
const setUserPermissionList = async () => { |
|||
userPermissionList.value = await (await getWithPersonnelDataList({})).data |
|||
} |
|||
setUserPermissionList() |
|||
const setFormData = async (row: any = null) => { |
|||
BindingId.value = row.id |
|||
binding_module.value = row.table_type |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label{ |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue