17 changed files with 610 additions and 149 deletions
@ -0,0 +1,346 @@ |
|||
<template> |
|||
<el-dialog v-model="showDialog" title="分发合同" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-tabs v-model="activeTab"> |
|||
|
|||
<el-tab-pane label="分发人员" name="select"> |
|||
<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="电话号" prop="status"> |
|||
<el-input v-model="lessonCourseTeachingTable.searchParam.phone" placeholder="请输入电话号" /> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
<el-form-item label="角色" prop="role_id"> |
|||
<el-select class="input-width" v-model="lessonCourseTeachingTable.searchParam.role_id" clearable |
|||
placeholder="请选择角色"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option v-for="(item, index) in roleIdList" :key="index" :label="item['role_name']" |
|||
:value="item['role_id']" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="部门"> |
|||
<el-select class="input-width" v-model="lessonCourseTeachingTable.searchParam.dept_id" clearable |
|||
placeholder="请选择部门"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option v-for="(item, index) in deptIdList" :key="index" :label="item['department_name']" |
|||
:value="item['id']" /> |
|||
</el-select> |
|||
</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 ref="lessonCourseTableRef" :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="电话" min-width="120" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="状态" 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="创建时间" min-width="150" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="update_time" label="修改时间" min-width="150" :show-overflow-tooltip="true" /> |
|||
|
|||
|
|||
</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> |
|||
|
|||
|
|||
<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-tab-pane> |
|||
|
|||
<el-tab-pane label="分发记录" name="history" > |
|||
<sign :value="BindingId"/> |
|||
</el-tab-pane> |
|||
|
|||
</el-tabs> |
|||
|
|||
|
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch, nextTick } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { |
|||
getWithPersonnelDataList |
|||
} from '@/app/api/lesson_course_teaching' |
|||
|
|||
import { ffContract } from '@/app/api/contract' |
|||
import Sign from '@/app/views/contract_sign/contract_sign.vue' |
|||
import { |
|||
role_all, |
|||
departments_all, |
|||
} from '@/app/api/sys' |
|||
const activeTab = ref('select') |
|||
import { ElMessage, ElMessageBox } from 'element-plus'; |
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
let lessonCourseTeachingTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
name: '', |
|||
phone: '', |
|||
dept_id: '', |
|||
role_id: '' |
|||
}, |
|||
}) |
|||
|
|||
const lessonCourseTableRef = ref() |
|||
|
|||
watch( |
|||
() => lessonCourseTeachingTable.data, |
|||
async (newData) => { |
|||
if (newData.length > 0) { |
|||
await nextTick() |
|||
newData.forEach((row) => { |
|||
lessonCourseTableRef.value.toggleRowSelection(row, false) |
|||
if (lessonCourseTeachingTable.searchParam.dept_id || lessonCourseTeachingTable.searchParam.role_id) { |
|||
lessonCourseTableRef.value.toggleRowSelection(row, true) |
|||
} |
|||
|
|||
}) |
|||
} |
|||
}, |
|||
{ deep: true } |
|||
) |
|||
|
|||
const roleIdList = ref([] as any[]) |
|||
const setRoleIdList = async () => { |
|||
roleIdList.value = await (await role_all({})).data |
|||
} |
|||
setRoleIdList() |
|||
const deptIdList = ref([] as any[]) |
|||
const setDeptIdList = async () => { |
|||
deptIdList.value = await (await departments_all({})).data |
|||
} |
|||
setDeptIdList() |
|||
|
|||
|
|||
const multipleSelection = ref<[]>([]) |
|||
const binding_module = ref('') |
|||
const handleSelectionChange = (val : []) => { |
|||
multipleSelection.value = val |
|||
} |
|||
|
|||
const loadLessonCourseTeachingList = (page : number = 1) => { |
|||
multipleSelection.value = []; |
|||
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) => { |
|||
if (multipleSelection.value.length == 0) { |
|||
ElMessage.error('请选择数据'); |
|||
return; |
|||
} |
|||
let data = { |
|||
id: BindingId.value, |
|||
uid: multipleSelection.value |
|||
.map((item) => item.sys_user_id) |
|||
.join(',') |
|||
} |
|||
|
|||
ffContract(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(0) |
|||
const contract_type = ref('') |
|||
const setUserPermissionList = async () => { |
|||
userPermissionList.value = await (await getWithPersonnelDataList({})).data |
|||
} |
|||
setUserPermissionList() |
|||
const setFormData = async (row : any = null) => { |
|||
BindingId.value = row.id |
|||
contract_type.value = row.contract_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