72 changed files with 5046 additions and 4367 deletions
@ -0,0 +1,60 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
|
|||
|
|||
// USER_CODE_BEGIN -- student
|
|||
/** |
|||
* 获取学员列表 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function getStudentList(params: Record<string, any>) { |
|||
return request.get(`student/student`, {params}) |
|||
} |
|||
|
|||
/** |
|||
* 获取学员详情 |
|||
* @param id 学员id |
|||
* @returns |
|||
*/ |
|||
export function getStudentInfo(id: number) { |
|||
return request.get(`student/student/${id}`); |
|||
} |
|||
|
|||
/** |
|||
* 添加学员 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function addStudent(params: Record<string, any>) { |
|||
return request.post('student/student', params, { showErrorMessage: true, showSuccessMessage: true }) |
|||
} |
|||
|
|||
/** |
|||
* 编辑学员 |
|||
* @param id |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export function editStudent(params: Record<string, any>) { |
|||
return request.put(`student/student/${params.id}`, params, { showErrorMessage: true, showSuccessMessage: true }) |
|||
} |
|||
|
|||
/** |
|||
* 删除学员 |
|||
* @param id |
|||
* @returns |
|||
*/ |
|||
export function deleteStudent(id: number) { |
|||
return request.delete(`student/student/${id}`, { showErrorMessage: true, showSuccessMessage: true }) |
|||
} |
|||
|
|||
export function getWithCampusList(params: Record<string,any>){ |
|||
return request.get('student/campus_all', {params}) |
|||
}export function getWithClassGradeList(params: Record<string,any>){ |
|||
return request.get('student/class_grade_all', {params}) |
|||
}export function getWithMemberList(params: Record<string,any>){ |
|||
return request.get('student/member_all', {params}) |
|||
} |
|||
|
|||
// USER_CODE_END -- student
|
|||
@ -1,29 +1,21 @@ |
|||
{ |
|||
"id": "考勤编号", |
|||
"idPlaceholder": "请输入考勤编号", |
|||
"campusId": "校区ID", |
|||
"campusIdPlaceholder": "请输入校区ID", |
|||
"staffId": "人员ID", |
|||
"staffIdPlaceholder": "请输入人员ID", |
|||
"attendanceDate": "考勤日期", |
|||
"attendanceDatePlaceholder": "请输入考勤日期", |
|||
"checkInTime": "签到时间", |
|||
"checkInTimePlaceholder": "请输入签到时间", |
|||
"checkOutTime": "签退时间", |
|||
"checkOutTimePlaceholder": "请输入签退时间", |
|||
"status": "考勤状态", |
|||
"statusPlaceholder": "请输入考勤状态", |
|||
"remarks": "备注", |
|||
"remarksPlaceholder": "请输入备注", |
|||
"createdAt": "创建时间", |
|||
"createdAtPlaceholder": "请输入创建时间", |
|||
"updatedAt": "修改时间", |
|||
"updatedAtPlaceholder": "请输入修改时间", |
|||
"coordinate": "坐标", |
|||
"coordinatePlaceholder": "请输入坐标", |
|||
"addAttendance": "添加考勤", |
|||
"updateAttendance": "编辑考勤", |
|||
"attendanceDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"campusId":"校区", |
|||
"campusIdPlaceholder":"全部", |
|||
"staffId":"人员", |
|||
"staffIdPlaceholder":"全部", |
|||
"attendanceDate":"考勤日期", |
|||
"attendanceDatePlaceholder":"请输入考勤日期", |
|||
"checkInTime":"签到时间", |
|||
"checkInTimePlaceholder":"请输入签到时间", |
|||
"checkOutTime":"签退时间", |
|||
"checkOutTimePlaceholder":"请输入签退时间", |
|||
"remarks":"备注", |
|||
"remarksPlaceholder":"请输入备注", |
|||
"status":"考勤状态", |
|||
"statusPlaceholder":"请输入考勤状态", |
|||
"addAttendance":"添加考勤", |
|||
"updateAttendance":"编辑考勤", |
|||
"attendanceDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,25 +1,19 @@ |
|||
{ |
|||
"id": "合同编号", |
|||
"idPlaceholder": "请输入合同编号", |
|||
"contractName": "合同名称", |
|||
"contractNamePlaceholder": "请输入合同名称", |
|||
"contractTemplate": "合同模板", |
|||
"contractTemplatePlaceholder": "请输入合同模板", |
|||
"contractStatus": "合同状态", |
|||
"contractStatusPlaceholder": "请输入合同状态", |
|||
"contractType": "合同类型", |
|||
"contractTypePlaceholder": "请输入合同类型", |
|||
"remarks": "合同备注", |
|||
"remarksPlaceholder": "请输入合同备注", |
|||
"createdAt": "创建时间", |
|||
"createdAtPlaceholder": "请输入创建时间", |
|||
"updatedAt": "修改时间", |
|||
"updatedAtPlaceholder": "请输入修改时间", |
|||
"deletedAt": "逻辑删除时间", |
|||
"deletedAtPlaceholder": "请输入逻辑删除时间", |
|||
"addContract": "添加合同", |
|||
"updateContract": "编辑合同", |
|||
"contractDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"contractName":"合同名称", |
|||
"contractNamePlaceholder":"请输入合同名称", |
|||
"contractTemplate":"合同模板", |
|||
"contractTemplatePlaceholder":"请输入合同模板", |
|||
"contractStatus":"合同状态", |
|||
"contractStatusPlaceholder":"请输入合同状态", |
|||
"contractType":"合同类型", |
|||
"contractTypePlaceholder":"请输入合同类型", |
|||
"remarks":"合同备注", |
|||
"remarksPlaceholder":"请输入合同备注", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"addContract":"添加合同", |
|||
"updateContract":"编辑合同", |
|||
"contractDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,19 +1,18 @@ |
|||
{ |
|||
"id": "答题记录编号", |
|||
"idPlaceholder": "请输入答题记录编号", |
|||
"campusId": "校区ID", |
|||
"campusIdPlaceholder": "请输入校区ID", |
|||
"userId": "人员ID", |
|||
"userIdPlaceholder": "请输入人员ID", |
|||
"questionId": "试题ID", |
|||
"questionIdPlaceholder": "请输入试题ID", |
|||
"answer": "用户答案", |
|||
"answerPlaceholder": "请输入用户答案", |
|||
"isCorrect": "是否正确", |
|||
"isCorrectPlaceholder": "请输入是否正确", |
|||
"addExamAnswers": "添加答题记录", |
|||
"updateExamAnswers": "编辑答题记录", |
|||
"examAnswersDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"campusId":"校区", |
|||
"campusIdPlaceholder":"全部", |
|||
"userId":"人员", |
|||
"userIdPlaceholder":"请输入人员", |
|||
"questionId":"试题", |
|||
"questionIdPlaceholder":"请输入试题", |
|||
"answer":"用户答案", |
|||
"answerPlaceholder":"请输入用户答案", |
|||
"isCorrect":"是否正确", |
|||
"isCorrectPlaceholder":"请输入是否正确", |
|||
"createdAt":"创建时间", |
|||
"addExamAnswers":"添加答题记录", |
|||
"updateExamAnswers":"编辑答题记录", |
|||
"examAnswersDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,15 +1,17 @@ |
|||
{ |
|||
"id": "试卷编号", |
|||
"idPlaceholder": "请输入试卷编号", |
|||
"selectionMode": "题目选择模式: random-随机主题, manual-自选题目", |
|||
"selectionModePlaceholder": "请输入题目选择模式: random-随机主题, manual-自选题目", |
|||
"totalScore": "总分", |
|||
"totalScorePlaceholder": "请输入总分", |
|||
"passingScore": "合格分数", |
|||
"passingScorePlaceholder": "请输入合格分数", |
|||
"addExamPapers": "添加试卷", |
|||
"updateExamPapers": "编辑试卷", |
|||
"examPapersDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"selectionMode":"题目选择模式", |
|||
"selectionModePlaceholder":"请输入题目选择模式", |
|||
"questionsIds":"自选试题", |
|||
"questionsIdsPlaceholder":"请输入自选试题", |
|||
"totalScore":"总分", |
|||
"totalScorePlaceholder":"请输入总分", |
|||
"passingScore":"合格分数", |
|||
"passingScorePlaceholder":"请输入合格分数", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"addExamPapers":"添加试卷", |
|||
"updateExamPapers":"编辑试卷", |
|||
"examPapersDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,33 +1,22 @@ |
|||
{ |
|||
"id": "试题编号", |
|||
"idPlaceholder": "请输入试题编号", |
|||
"questionType": "题型: single_choice-单选, multiple_choice-多选, true_false-判断", |
|||
"questionTypePlaceholder": "请输入题型: single_choice-单选, multiple_choice-多选, true_false-判断", |
|||
"questionContentType": "题干类型: text-文本, image-图片", |
|||
"questionContentTypePlaceholder": "请输入题干类型: text-文本, image-图片", |
|||
"questionContent": "题干内容(如果是图片则存储URL)", |
|||
"questionContentPlaceholder": "请输入题干内容(如果是图片则存储URL)", |
|||
"optionAContentType": "选项A类型: text-文本, image-图片", |
|||
"optionAContentTypePlaceholder": "请输入选项A类型: text-文本, image-图片", |
|||
"optionAContent": "选项A内容(如果是图片则存储URL)", |
|||
"optionAContentPlaceholder": "请输入选项A内容(如果是图片则存储URL)", |
|||
"optionBContentType": "选项B类型: text-文本, image-图片", |
|||
"optionBContentTypePlaceholder": "请输入选项B类型: text-文本, image-图片", |
|||
"optionBContent": "选项B内容(如果是图片则存储URL)", |
|||
"optionBContentPlaceholder": "请输入选项B内容(如果是图片则存储URL)", |
|||
"optionCContentType": "选项C类型: text-文本, image-图片", |
|||
"optionCContentTypePlaceholder": "请输入选项C类型: text-文本, image-图片", |
|||
"optionCContent": "选项C内容(如果是图片则存储URL)", |
|||
"optionCContentPlaceholder": "请输入选项C内容(如果是图片则存储URL)", |
|||
"optionDContentType": "选项D类型: text-文本, image-图片", |
|||
"optionDContentTypePlaceholder": "请输入选项D类型: text-文本, image-图片", |
|||
"optionDContent": "选项D内容(如果是图片则存储URL)", |
|||
"optionDContentPlaceholder": "请输入选项D内容(如果是图片则存储URL)", |
|||
"correctAnswer": "正确答案(如果是多选,答案格式为如A,B,D)", |
|||
"correctAnswerPlaceholder": "请输入正确答案(如果是多选,答案格式为如A,B,D)", |
|||
"addExamQuestions": "添加试题", |
|||
"updateExamQuestions": "编辑试题", |
|||
"examQuestionsDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"title":"题目标题", |
|||
"titlePlaceholder":"请输入题目标题", |
|||
"questionType":"题型", |
|||
"questionTypePlaceholder":"请输入题型", |
|||
"questionContentType":"题干类型", |
|||
"questionContentTypePlaceholder":"请输入题干类型", |
|||
"questionContent":"题干内容", |
|||
"questionContentPlaceholder":"请输入题干内容", |
|||
"optionJson":"选项", |
|||
"optionJsonPlaceholder":"请输入选项", |
|||
"correctAnswer":"正确答案", |
|||
"correctAnswerPlaceholder":"请输入正确答案", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"updatedAt":"修改时间", |
|||
"addExamQuestions":"添加试题", |
|||
"updateExamQuestions":"编辑试题", |
|||
"examQuestionsDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,23 +1,21 @@ |
|||
{ |
|||
"id": "记录编号", |
|||
"idPlaceholder": "请输入记录编号", |
|||
"campusId": "校区ID", |
|||
"campusIdPlaceholder": "请输入校区ID", |
|||
"userId": "人员ID", |
|||
"userIdPlaceholder": "请输入人员ID", |
|||
"paperId": "试卷ID", |
|||
"paperIdPlaceholder": "请输入试卷ID", |
|||
"score": "得分", |
|||
"scorePlaceholder": "请输入得分", |
|||
"status": "考试状态: in_progress-进行中, completed-已完成", |
|||
"statusPlaceholder": "请输入考试状态: in_progress-进行中, completed-已完成", |
|||
"startTime": "考试开始时间", |
|||
"startTimePlaceholder": "请输入考试开始时间", |
|||
"endTime": "考试结束时间", |
|||
"endTimePlaceholder": "请输入考试结束时间", |
|||
"addExamRecords": "添加考试记录", |
|||
"updateExamRecords": "编辑考试记录", |
|||
"examRecordsDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"campusId":"校区", |
|||
"campusIdPlaceholder":"全部", |
|||
"userId":"人员", |
|||
"userIdPlaceholder":"请输入人员", |
|||
"paperId":"试卷", |
|||
"paperIdPlaceholder":"全部", |
|||
"score":"得分", |
|||
"scorePlaceholder":"请输入得分", |
|||
"status":"考试状态", |
|||
"statusPlaceholder":"请输入考试状态", |
|||
"startTime":"考试开始时间", |
|||
"startTimePlaceholder":"请输入考试开始时间", |
|||
"endTime":"考试结束时间", |
|||
"endTimePlaceholder":"请输入考试结束时间", |
|||
"addExamRecords":"添加考试记录", |
|||
"updateExamRecords":"编辑考试记录", |
|||
"examRecordsDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,23 +1,21 @@ |
|||
{ |
|||
"id": "绩效编号", |
|||
"idPlaceholder": "请输入绩效编号", |
|||
"staffId": "员工ID", |
|||
"staffIdPlaceholder": "请输入员工ID", |
|||
"resourceId": "资源ID", |
|||
"resourceIdPlaceholder": "请输入资源ID", |
|||
"orderId": "订单ID", |
|||
"orderIdPlaceholder": "请输入订单ID", |
|||
"orderStatus": "订单状态: pending-待处理, completed-已完成, cancelled-已取消", |
|||
"orderStatusPlaceholder": "请输入订单状态: pending-待处理, completed-已完成, cancelled-已取消", |
|||
"performanceType": "绩效类型: sales-销售绩效, marketing-市场绩效, other-其他", |
|||
"performanceTypePlaceholder": "请输入绩效类型: sales-销售绩效, marketing-市场绩效, other-其他", |
|||
"performanceValue": "绩效金额或分值", |
|||
"performanceValuePlaceholder": "请输入绩效金额或分值", |
|||
"remarks": "备注", |
|||
"remarksPlaceholder": "请输入备注", |
|||
"addPerformanceRecords": "添加绩效记录", |
|||
"updatePerformanceRecords": "编辑绩效记录", |
|||
"performanceRecordsDeleteTips": "确定要删除该数据吗?", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"staffId":"员工", |
|||
"staffIdPlaceholder":"全部", |
|||
"resourceId":"资源", |
|||
"resourceIdPlaceholder":"请输入资源", |
|||
"orderStatus":"订单状态", |
|||
"orderStatusPlaceholder":"请输入订单状态", |
|||
"performanceType":"绩效类型", |
|||
"performanceTypePlaceholder":"请输入绩效类型", |
|||
"performanceValue":"绩效金额或分值", |
|||
"performanceValuePlaceholder":"请输入绩效金额或分值", |
|||
"remarks":"备注", |
|||
"remarksPlaceholder":"请输入备注", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"addPerformanceRecords":"添加绩效记录", |
|||
"updatePerformanceRecords":"编辑绩效记录", |
|||
"performanceRecordsDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
{ |
|||
"campusId":"校区", |
|||
"campusIdPlaceholder":"全部", |
|||
"classId":"班级", |
|||
"classIdPlaceholder":"请输入班级", |
|||
"userId":"用户", |
|||
"userIdPlaceholder":"请输入用户", |
|||
"name":"学员姓名", |
|||
"namePlaceholder":"请输入学员姓名", |
|||
"gender":"性别", |
|||
"genderPlaceholder":"请输入性别", |
|||
"age":"年龄", |
|||
"agePlaceholder":"请输入年龄", |
|||
"birthday":"生日", |
|||
"birthdayPlaceholder":"请输入生日", |
|||
"emergencyContact":"紧急联系人", |
|||
"emergencyContactPlaceholder":"请输入紧急联系人", |
|||
"contactPhone":"联系人电话", |
|||
"contactPhonePlaceholder":"请输入联系人电话", |
|||
"note":"备注信息", |
|||
"notePlaceholder":"请输入备注信息", |
|||
"status":"学员状态", |
|||
"statusPlaceholder":"请输入学员状态", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"addStudent":"添加学员", |
|||
"updateStudent":"编辑学员", |
|||
"studentDeleteTips":"确定要删除该数据吗?", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,318 +1,241 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addAttendance') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="attendanceTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.campus_id" |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.staff_id" |
|||
:placeholder="t('staffIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('attendanceDate')" prop="attendance_date"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.attendance_date" |
|||
:placeholder="t('attendanceDatePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('checkInTime')" prop="check_in_time"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.check_in_time" |
|||
:placeholder="t('checkInTimePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('checkOutTime')" prop="check_out_time"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.check_out_time" |
|||
:placeholder="t('checkOutTimePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.status" |
|||
:placeholder="t('statusPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('remarks')" prop="remarks"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.remarks" |
|||
:placeholder="t('remarksPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.created_at" |
|||
:placeholder="t('createdAtPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('updatedAt')" prop="updated_at"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.updated_at" |
|||
:placeholder="t('updatedAtPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('coordinate')" prop="coordinate"> |
|||
<el-input |
|||
v-model="attendanceTable.searchParam.coordinate" |
|||
:placeholder="t('coordinatePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadAttendanceList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="attendanceTable.data" |
|||
size="large" |
|||
v-loading="attendanceTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !attendanceTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="campus_id" |
|||
:label="t('campusId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="staff_id" |
|||
:label="t('staffId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="attendance_date" |
|||
:label="t('attendanceDate')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="check_in_time" |
|||
:label="t('checkInTime')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="check_out_time" |
|||
:label="t('checkOutTime')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="status" |
|||
:label="t('status')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="remarks" |
|||
:label="t('remarks')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="created_at" |
|||
:label="t('createdAt')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="updated_at" |
|||
:label="t('updatedAt')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="coordinate" |
|||
:label="t('coordinate')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="attendanceTable.page" |
|||
v-model:page-size="attendanceTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="attendanceTable.total" |
|||
@size-change="loadAttendanceList()" |
|||
@current-change="loadAttendanceList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editAttendanceDialog" @complete="loadAttendanceList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getAttendanceList, deleteAttendance } from '@/app/api/attendance' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/attendance/components/attendance-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let attendanceTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
campus_id: '', |
|||
staff_id: '', |
|||
attendance_date: '', |
|||
check_in_time: '', |
|||
check_out_time: '', |
|||
status: '', |
|||
remarks: '', |
|||
created_at: '', |
|||
updated_at: '', |
|||
coordinate: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取考勤列表 |
|||
*/ |
|||
const loadAttendanceList = (page: number = 1) => { |
|||
attendanceTable.loading = true |
|||
attendanceTable.page = page |
|||
|
|||
getAttendanceList({ |
|||
page: attendanceTable.page, |
|||
limit: attendanceTable.limit, |
|||
...attendanceTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
attendanceTable.loading = false |
|||
attendanceTable.data = res.data.data |
|||
attendanceTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
attendanceTable.loading = false |
|||
}) |
|||
} |
|||
loadAttendanceList() |
|||
|
|||
const editAttendanceDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加考勤 |
|||
*/ |
|||
const addEvent = () => { |
|||
editAttendanceDialog.value.setFormData() |
|||
editAttendanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑考勤 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editAttendanceDialog.value.setFormData(data) |
|||
editAttendanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除考勤 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('attendanceDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteAttendance(id) |
|||
.then(() => { |
|||
loadAttendanceList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadAttendanceList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<!-- <el-button type="primary" @click="addEvent"> |
|||
{{ t('addAttendance') }} |
|||
</el-button> --> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="attendanceTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="w-[280px]" v-model="attendanceTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-select class="w-[280px]" v-model="attendanceTable.searchParam.staff_id" clearable :placeholder="t('staffIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in staffIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('attendanceDate')" prop="attendance_date"> |
|||
|
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="attendanceTable.searchParam.attendance_date" |
|||
clearable |
|||
type="date" |
|||
value-format="YYYY-MM-DD" |
|||
:placeholder="t('attendanceDate')"> |
|||
</el-date-picker> |
|||
|
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-select class="w-[280px]" v-model="attendanceTable.searchParam.status" clearable :placeholder="t('statusPlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadAttendanceList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="attendanceTable.data" size="large" v-loading="attendanceTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !attendanceTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="staff_id_name" :label="t('staffId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="attendance_date" :label="t('attendanceDate')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="check_in_time" :label="t('checkInTime')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="check_out_time" :label="t('checkOutTime')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="remarks" :label="t('remarks')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('status')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in statusList"> |
|||
<div v-if="item.value == row.status">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<!-- <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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="attendanceTable.page" v-model:page-size="attendanceTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="attendanceTable.total" |
|||
@size-change="loadAttendanceList()" @current-change="loadAttendanceList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editAttendanceDialog" @complete="loadAttendanceList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getAttendanceList, deleteAttendance, getWithCampusList, getWithPersonnelList } from '@/app/api/attendance' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/attendance/components/attendance-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let attendanceTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"campus_id":"", |
|||
"staff_id":"", |
|||
"attendance_date":"", |
|||
"status":"" |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const statusList = ref([] as any[]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('kq_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
|
|||
/** |
|||
* 获取考勤列表 |
|||
*/ |
|||
const loadAttendanceList = (page: number = 1) => { |
|||
attendanceTable.loading = true |
|||
attendanceTable.page = page |
|||
|
|||
getAttendanceList({ |
|||
page: attendanceTable.page, |
|||
limit: attendanceTable.limit, |
|||
...attendanceTable.searchParam |
|||
}).then(res => { |
|||
attendanceTable.loading = false |
|||
attendanceTable.data = res.data.data |
|||
attendanceTable.total = res.data.total |
|||
}).catch(() => { |
|||
attendanceTable.loading = false |
|||
}) |
|||
} |
|||
loadAttendanceList() |
|||
|
|||
const editAttendanceDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加考勤 |
|||
*/ |
|||
const addEvent = () => { |
|||
editAttendanceDialog.value.setFormData() |
|||
editAttendanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑考勤 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editAttendanceDialog.value.setFormData(data) |
|||
editAttendanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除考勤 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('attendanceDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteAttendance(id).then(() => { |
|||
loadAttendanceList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const staffIdList = ref([]) |
|||
const setStaffIdList = async () => { |
|||
staffIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setStaffIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadAttendanceList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,296 +1,260 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title="formData.id ? t('updateAttendance') : t('addAttendance')" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="formData.campus_id" |
|||
clearable |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-input |
|||
v-model="formData.staff_id" |
|||
clearable |
|||
:placeholder="t('staffIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('attendanceDate')" prop="attendance_date"> |
|||
<el-input |
|||
v-model="formData.attendance_date" |
|||
clearable |
|||
:placeholder="t('attendanceDatePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('checkInTime')"> |
|||
<el-input |
|||
v-model="formData.check_in_time" |
|||
clearable |
|||
:placeholder="t('checkInTimePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('checkOutTime')"> |
|||
<el-input |
|||
v-model="formData.check_out_time" |
|||
clearable |
|||
:placeholder="t('checkOutTimePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-input |
|||
v-model="formData.status" |
|||
clearable |
|||
:placeholder="t('statusPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('remarks')"> |
|||
<el-input |
|||
v-model="formData.remarks" |
|||
clearable |
|||
:placeholder="t('remarksPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')"> |
|||
<el-input |
|||
v-model="formData.created_at" |
|||
clearable |
|||
:placeholder="t('createdAtPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('updatedAt')"> |
|||
<el-input |
|||
v-model="formData.updated_at" |
|||
clearable |
|||
:placeholder="t('updatedAtPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('coordinate')"> |
|||
<el-input |
|||
v-model="formData.coordinate" |
|||
clearable |
|||
:placeholder="t('coordinatePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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 { |
|||
addAttendance, |
|||
editAttendance, |
|||
getAttendanceInfo, |
|||
} from '@/app/api/attendance' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
staff_id: '', |
|||
attendance_date: '', |
|||
check_in_time: '', |
|||
check_out_time: '', |
|||
status: '', |
|||
remarks: '', |
|||
created_at: '', |
|||
updated_at: '', |
|||
coordinate: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
staff_id: [ |
|||
{ required: true, message: t('staffIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
attendance_date: [ |
|||
{ |
|||
required: true, |
|||
message: t('attendanceDatePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
check_in_time: [ |
|||
{ required: true, message: t('checkInTimePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
check_out_time: [ |
|||
{ |
|||
required: true, |
|||
message: t('checkOutTimePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
status: [ |
|||
{ required: true, message: t('statusPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
remarks: [ |
|||
{ required: true, message: t('remarksPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
created_at: [ |
|||
{ required: true, message: t('createdAtPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
updated_at: [ |
|||
{ required: true, message: t('updatedAtPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
coordinate: [ |
|||
{ required: true, message: t('coordinatePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editAttendance : addAttendance |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getAttendanceInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateAttendance') : t('addAttendance')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-select class="input-width" v-model="formData.staff_id" clearable :placeholder="t('staffIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in staffIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('attendanceDate')" prop="attendance_date" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.attendance_date" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('attendanceDatePlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('checkInTime')" prop="check_in_time" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.check_in_time" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('checkInTimePlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('checkOutTime')" prop="check_out_time" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.check_out_time" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('checkOutTimePlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('remarks')" > |
|||
<el-input v-model="formData.remarks" clearable :placeholder="t('remarksPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-select class="input-width" v-model="formData.status" clearable :placeholder="t('statusPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<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 { addAttendance, editAttendance, getAttendanceInfo, getWithCampusList, getWithPersonnelList } from '@/app/api/attendance' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
staff_id: '', |
|||
attendance_date: '', |
|||
check_in_time: '', |
|||
check_out_time: '', |
|||
remarks: '', |
|||
status: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
staff_id: [ |
|||
{ required: true, message: t('staffIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
attendance_date: [ |
|||
{ required: true, message: t('attendanceDatePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
check_in_time: [ |
|||
{ required: true, message: t('checkInTimePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
check_out_time: [ |
|||
{ required: true, message: t('checkOutTimePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
remarks: [ |
|||
{ required: true, message: t('remarksPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
status: [ |
|||
{ required: true, message: t('statusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editAttendance : addAttendance |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let statusList = ref([]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('kq_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
watch(() => statusList.value, () => { formData.status = statusList.value[0].value }) |
|||
|
|||
|
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const staffIdList = ref([] as any[]) |
|||
const setStaffIdList = async () => { |
|||
staffIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setStaffIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getAttendanceInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
|
|||
@ -1,274 +1,210 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title="formData.id ? t('updateContract') : t('addContract')" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('contractName')" prop="contract_name"> |
|||
<el-input |
|||
v-model="formData.contract_name" |
|||
clearable |
|||
:placeholder="t('contractNamePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contractTemplate')" prop="contract_template"> |
|||
<el-input |
|||
v-model="formData.contract_template" |
|||
clearable |
|||
:placeholder="t('contractTemplatePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contractStatus')" prop="contract_status"> |
|||
<el-input |
|||
v-model="formData.contract_status" |
|||
clearable |
|||
:placeholder="t('contractStatusPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contractType')" prop="contract_type"> |
|||
<el-input |
|||
v-model="formData.contract_type" |
|||
clearable |
|||
:placeholder="t('contractTypePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('remarks')"> |
|||
<el-input |
|||
v-model="formData.remarks" |
|||
clearable |
|||
:placeholder="t('remarksPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')"> |
|||
<el-input |
|||
v-model="formData.created_at" |
|||
clearable |
|||
:placeholder="t('createdAtPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('updatedAt')"> |
|||
<el-input |
|||
v-model="formData.updated_at" |
|||
clearable |
|||
:placeholder="t('updatedAtPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('deletedAt')"> |
|||
<el-input |
|||
v-model="formData.deleted_at" |
|||
clearable |
|||
:placeholder="t('deletedAtPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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 { addContract, editContract, getContractInfo } from '@/app/api/contract' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
contract_name: '', |
|||
contract_template: '', |
|||
contract_status: '', |
|||
contract_type: '', |
|||
remarks: '', |
|||
created_at: '', |
|||
updated_at: '', |
|||
deleted_at: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
contract_name: [ |
|||
{ |
|||
required: true, |
|||
message: t('contractNamePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
contract_template: [ |
|||
{ |
|||
required: true, |
|||
message: t('contractTemplatePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
contract_status: [ |
|||
{ |
|||
required: true, |
|||
message: t('contractStatusPlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
contract_type: [ |
|||
{ |
|||
required: true, |
|||
message: t('contractTypePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
remarks: [ |
|||
{ required: true, message: t('remarksPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
created_at: [ |
|||
{ required: true, message: t('createdAtPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
updated_at: [ |
|||
{ required: true, message: t('updatedAtPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
deleted_at: [ |
|||
{ required: true, message: t('deletedAtPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editContract : addContract |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getContractInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateContract') : t('addContract')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('contractName')" prop="contract_name"> |
|||
<el-input v-model="formData.contract_name" clearable :placeholder="t('contractNamePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contractTemplate')"> |
|||
<upload-file v-model="formData.contract_template" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contractStatus')" prop="contract_status"> |
|||
<el-select class="input-width" v-model="formData.contract_status" clearable :placeholder="t('contractStatusPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in contract_statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contractType')" prop="contract_type"> |
|||
<el-select class="input-width" v-model="formData.contract_type" clearable :placeholder="t('contractTypePlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in contract_typeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('remarks')" > |
|||
<el-input v-model="formData.remarks" clearable :placeholder="t('remarksPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<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 { addContract, editContract, getContractInfo } from '@/app/api/contract' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
contract_name: '', |
|||
contract_template: '', |
|||
contract_status: '', |
|||
contract_type: '', |
|||
remarks: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
contract_name: [ |
|||
{ required: true, message: t('contractNamePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
contract_template: [ |
|||
{ required: true, message: t('contractTemplatePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
contract_status: [ |
|||
{ required: true, message: t('contractStatusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
contract_type: [ |
|||
{ required: true, message: t('contractTypePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
remarks: [ |
|||
{ required: true, message: t('remarksPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editContract : addContract |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let contract_statusList = ref([]) |
|||
const contract_statusDictList = async () => { |
|||
contract_statusList.value = await (await useDictionary('ht_status')).data.dictionary |
|||
} |
|||
contract_statusDictList(); |
|||
watch(() => contract_statusList.value, () => { formData.contract_status = contract_statusList.value[0].value }) |
|||
let contract_typeList = ref([]) |
|||
const contract_typeDictList = async () => { |
|||
contract_typeList.value = await (await useDictionary('ht_type')).data.dictionary |
|||
} |
|||
contract_typeDictList(); |
|||
watch(() => contract_typeList.value, () => { formData.contract_type = contract_typeList.value[0].value }) |
|||
|
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getContractInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
|
|||
@ -1,290 +1,216 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addContract') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="contractTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('contractName')" prop="contract_name"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.contract_name" |
|||
:placeholder="t('contractNamePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('contractTemplate')" prop="contract_template"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.contract_template" |
|||
:placeholder="t('contractTemplatePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('contractStatus')" prop="contract_status"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.contract_status" |
|||
:placeholder="t('contractStatusPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('contractType')" prop="contract_type"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.contract_type" |
|||
:placeholder="t('contractTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('remarks')" prop="remarks"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.remarks" |
|||
:placeholder="t('remarksPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.created_at" |
|||
:placeholder="t('createdAtPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('updatedAt')" prop="updated_at"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.updated_at" |
|||
:placeholder="t('updatedAtPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('deletedAt')" prop="deleted_at"> |
|||
<el-input |
|||
v-model="contractTable.searchParam.deleted_at" |
|||
:placeholder="t('deletedAtPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadContractList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="contractTable.data" |
|||
size="large" |
|||
v-loading="contractTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !contractTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="contract_name" |
|||
:label="t('contractName')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="contract_template" |
|||
:label="t('contractTemplate')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="contract_status" |
|||
:label="t('contractStatus')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="contract_type" |
|||
:label="t('contractType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="remarks" |
|||
:label="t('remarks')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="created_at" |
|||
:label="t('createdAt')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="updated_at" |
|||
:label="t('updatedAt')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="deleted_at" |
|||
:label="t('deletedAt')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="contractTable.page" |
|||
v-model:page-size="contractTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="contractTable.total" |
|||
@size-change="loadContractList()" |
|||
@current-change="loadContractList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editContractDialog" @complete="loadContractList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getContractList, deleteContract } from '@/app/api/contract' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/contract/components/contract-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let contractTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
contract_name: '', |
|||
contract_template: '', |
|||
contract_status: '', |
|||
contract_type: '', |
|||
remarks: '', |
|||
created_at: '', |
|||
updated_at: '', |
|||
deleted_at: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取合同列表 |
|||
*/ |
|||
const loadContractList = (page: number = 1) => { |
|||
contractTable.loading = true |
|||
contractTable.page = page |
|||
|
|||
getContractList({ |
|||
page: contractTable.page, |
|||
limit: contractTable.limit, |
|||
...contractTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
contractTable.loading = false |
|||
contractTable.data = res.data.data |
|||
contractTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
contractTable.loading = false |
|||
}) |
|||
} |
|||
loadContractList() |
|||
|
|||
const editContractDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加合同 |
|||
*/ |
|||
const addEvent = () => { |
|||
editContractDialog.value.setFormData() |
|||
editContractDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑合同 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editContractDialog.value.setFormData(data) |
|||
editContractDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除合同 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('contractDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteContract(id) |
|||
.then(() => { |
|||
loadContractList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadContractList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addContract') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="contractTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('contractStatus')" prop="contract_status"> |
|||
<el-select class="w-[280px]" v-model="contractTable.searchParam.contract_status" clearable :placeholder="t('contractStatusPlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in contract_statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('contractType')" prop="contract_type"> |
|||
<el-select class="w-[280px]" v-model="contractTable.searchParam.contract_type" clearable :placeholder="t('contractTypePlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in contract_typeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="contractTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadContractList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="contractTable.data" size="large" v-loading="contractTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !contractTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="contract_name" :label="t('contractName')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('contractStatus')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in contract_statusList"> |
|||
<div v-if="item.value == row.contract_status">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="t('contractType')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in contract_typeList"> |
|||
<div v-if="item.value == row.contract_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="contractTable.page" v-model:page-size="contractTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="contractTable.total" |
|||
@size-change="loadContractList()" @current-change="loadContractList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editContractDialog" @complete="loadContractList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getContractList, deleteContract } from '@/app/api/contract' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/contract/components/contract-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let contractTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"contract_status":"", |
|||
"contract_type":"", |
|||
"created_at":[] |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const contract_statusList = ref([] as any[]) |
|||
const contract_statusDictList = async () => { |
|||
contract_statusList.value = await (await useDictionary('ht_status')).data.dictionary |
|||
} |
|||
contract_statusDictList(); |
|||
const contract_typeList = ref([] as any[]) |
|||
const contract_typeDictList = async () => { |
|||
contract_typeList.value = await (await useDictionary('ht_type')).data.dictionary |
|||
} |
|||
contract_typeDictList(); |
|||
|
|||
/** |
|||
* 获取合同列表 |
|||
*/ |
|||
const loadContractList = (page: number = 1) => { |
|||
contractTable.loading = true |
|||
contractTable.page = page |
|||
|
|||
getContractList({ |
|||
page: contractTable.page, |
|||
limit: contractTable.limit, |
|||
...contractTable.searchParam |
|||
}).then(res => { |
|||
contractTable.loading = false |
|||
contractTable.data = res.data.data |
|||
contractTable.total = res.data.total |
|||
}).catch(() => { |
|||
contractTable.loading = false |
|||
}) |
|||
} |
|||
loadContractList() |
|||
|
|||
const editContractDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加合同 |
|||
*/ |
|||
const addEvent = () => { |
|||
editContractDialog.value.setFormData() |
|||
editContractDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑合同 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editContractDialog.value.setFormData(data) |
|||
editContractDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除合同 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('contractDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteContract(id).then(() => { |
|||
loadContractList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadContractList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,223 +1,233 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title="formData.id ? t('updateExamAnswers') : t('addExamAnswers')" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="formData.campus_id" |
|||
clearable |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-input |
|||
v-model="formData.user_id" |
|||
clearable |
|||
:placeholder="t('userIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('questionId')" prop="question_id"> |
|||
<el-input |
|||
v-model="formData.question_id" |
|||
clearable |
|||
:placeholder="t('questionIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('answer')"> |
|||
<el-input |
|||
v-model="formData.answer" |
|||
clearable |
|||
:placeholder="t('answerPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('isCorrect')"> |
|||
<el-input |
|||
v-model="formData.is_correct" |
|||
clearable |
|||
:placeholder="t('isCorrectPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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 { |
|||
addExamAnswers, |
|||
editExamAnswers, |
|||
getExamAnswersInfo, |
|||
} from '@/app/api/exam_answers' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
user_id: '', |
|||
question_id: '', |
|||
answer: '', |
|||
is_correct: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
user_id: [ |
|||
{ required: true, message: t('userIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
question_id: [ |
|||
{ required: true, message: t('questionIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
answer: [ |
|||
{ required: true, message: t('answerPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
is_correct: [ |
|||
{ required: true, message: t('isCorrectPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamAnswers : addExamAnswers |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getExamAnswersInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateExamAnswers') : t('addExamAnswers')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-select class="input-width" v-model="formData.user_id" clearable :placeholder="t('userIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in userIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('questionId')" prop="question_id"> |
|||
<el-select class="input-width" v-model="formData.question_id" clearable :placeholder="t('questionIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in questionIdList" |
|||
:key="index" |
|||
:label="item['title']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('answer')" > |
|||
<el-input v-model="formData.answer" clearable :placeholder="t('answerPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('isCorrect')" > |
|||
<el-radio-group v-model="formData.is_correct" :placeholder="t('isCorrectPlaceholder')"> |
|||
<el-radio |
|||
v-for="(item, index) in is_correctList" |
|||
:key="index" :label="item.value"> |
|||
{{ item.name }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<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 { addExamAnswers, editExamAnswers, getExamAnswersInfo, getWithCampusList, getWithPersonnelList, getWithExamQuestionsList } from '@/app/api/exam_answers' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
user_id: '', |
|||
question_id: '', |
|||
answer: '', |
|||
is_correct: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
user_id: [ |
|||
{ required: true, message: t('userIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
question_id: [ |
|||
{ required: true, message: t('questionIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
answer: [ |
|||
{ required: true, message: t('answerPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
is_correct: [ |
|||
{ required: true, message: t('isCorrectPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamAnswers : addExamAnswers |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let is_correctList = ref([]) |
|||
const is_correctDictList = async () => { |
|||
is_correctList.value = await (await useDictionary('is_correct')).data.dictionary |
|||
} |
|||
is_correctDictList(); |
|||
watch(() => is_correctList.value, () => { formData.is_correct = is_correctList.value[0].value }) |
|||
|
|||
|
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const userIdList = ref([] as any[]) |
|||
const setUserIdList = async () => { |
|||
userIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setUserIdList() |
|||
const questionIdList = ref([] as any[]) |
|||
const setQuestionIdList = async () => { |
|||
questionIdList.value = await (await getWithExamQuestionsList({})).data |
|||
} |
|||
setQuestionIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getExamAnswersInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
|
|||
@ -1,248 +1,203 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamAnswers') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="examAnswersTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="examAnswersTable.searchParam.campus_id" |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-input |
|||
v-model="examAnswersTable.searchParam.user_id" |
|||
:placeholder="t('userIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('questionId')" prop="question_id"> |
|||
<el-input |
|||
v-model="examAnswersTable.searchParam.question_id" |
|||
:placeholder="t('questionIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('answer')" prop="answer"> |
|||
<el-input |
|||
v-model="examAnswersTable.searchParam.answer" |
|||
:placeholder="t('answerPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('isCorrect')" prop="is_correct"> |
|||
<el-input |
|||
v-model="examAnswersTable.searchParam.is_correct" |
|||
:placeholder="t('isCorrectPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamAnswersList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="examAnswersTable.data" |
|||
size="large" |
|||
v-loading="examAnswersTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !examAnswersTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="campus_id" |
|||
:label="t('campusId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="user_id" |
|||
:label="t('userId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="question_id" |
|||
:label="t('questionId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="answer" |
|||
:label="t('answer')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="is_correct" |
|||
:label="t('isCorrect')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="examAnswersTable.page" |
|||
v-model:page-size="examAnswersTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="examAnswersTable.total" |
|||
@size-change="loadExamAnswersList()" |
|||
@current-change="loadExamAnswersList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamAnswersDialog" @complete="loadExamAnswersList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamAnswersList, deleteExamAnswers } from '@/app/api/exam_answers' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_answers/components/exam-answers-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let examAnswersTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
campus_id: '', |
|||
user_id: '', |
|||
question_id: '', |
|||
answer: '', |
|||
is_correct: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取答题记录列表 |
|||
*/ |
|||
const loadExamAnswersList = (page: number = 1) => { |
|||
examAnswersTable.loading = true |
|||
examAnswersTable.page = page |
|||
|
|||
getExamAnswersList({ |
|||
page: examAnswersTable.page, |
|||
limit: examAnswersTable.limit, |
|||
...examAnswersTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
examAnswersTable.loading = false |
|||
examAnswersTable.data = res.data.data |
|||
examAnswersTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
examAnswersTable.loading = false |
|||
}) |
|||
} |
|||
loadExamAnswersList() |
|||
|
|||
const editExamAnswersDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加答题记录 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamAnswersDialog.value.setFormData() |
|||
editExamAnswersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑答题记录 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamAnswersDialog.value.setFormData(data) |
|||
editExamAnswersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除答题记录 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examAnswersDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteExamAnswers(id) |
|||
.then(() => { |
|||
loadExamAnswersList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamAnswersList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamAnswers') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="examAnswersTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="w-[280px]" v-model="examAnswersTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamAnswersList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="examAnswersTable.data" size="large" v-loading="examAnswersTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !examAnswersTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="user_id_name" :label="t('userId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="question_id_name" :label="t('questionId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="answer" :label="t('answer')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('isCorrect')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in is_correctList"> |
|||
<div v-if="item.value == row.is_correct">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="examAnswersTable.page" v-model:page-size="examAnswersTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="examAnswersTable.total" |
|||
@size-change="loadExamAnswersList()" @current-change="loadExamAnswersList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamAnswersDialog" @complete="loadExamAnswersList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamAnswersList, deleteExamAnswers, getWithCampusList, getWithPersonnelList, getWithExamQuestionsList } from '@/app/api/exam_answers' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_answers/components/exam-answers-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let examAnswersTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"campus_id":"" |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const is_correctList = ref([] as any[]) |
|||
const is_correctDictList = async () => { |
|||
is_correctList.value = await (await useDictionary('is_correct')).data.dictionary |
|||
} |
|||
is_correctDictList(); |
|||
|
|||
/** |
|||
* 获取答题记录列表 |
|||
*/ |
|||
const loadExamAnswersList = (page: number = 1) => { |
|||
examAnswersTable.loading = true |
|||
examAnswersTable.page = page |
|||
|
|||
getExamAnswersList({ |
|||
page: examAnswersTable.page, |
|||
limit: examAnswersTable.limit, |
|||
...examAnswersTable.searchParam |
|||
}).then(res => { |
|||
examAnswersTable.loading = false |
|||
examAnswersTable.data = res.data.data |
|||
examAnswersTable.total = res.data.total |
|||
}).catch(() => { |
|||
examAnswersTable.loading = false |
|||
}) |
|||
} |
|||
loadExamAnswersList() |
|||
|
|||
const editExamAnswersDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加答题记录 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamAnswersDialog.value.setFormData() |
|||
editExamAnswersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑答题记录 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamAnswersDialog.value.setFormData(data) |
|||
editExamAnswersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除答题记录 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examAnswersDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteExamAnswers(id).then(() => { |
|||
loadExamAnswersList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const userIdList = ref([]) |
|||
const setUserIdList = async () => { |
|||
userIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setUserIdList() |
|||
const questionIdList = ref([]) |
|||
const setQuestionIdList = async () => { |
|||
questionIdList.value = await (await getWithExamQuestionsList({})).data |
|||
} |
|||
setQuestionIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamAnswersList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,205 +1,298 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title="formData.id ? t('updateExamPapers') : t('addExamPapers')" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('selectionMode')" prop="selection_mode"> |
|||
<el-input |
|||
v-model="formData.selection_mode" |
|||
clearable |
|||
:placeholder="t('selectionModePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('totalScore')" prop="total_score"> |
|||
<el-input |
|||
v-model="formData.total_score" |
|||
clearable |
|||
:placeholder="t('totalScorePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('passingScore')" prop="passing_score"> |
|||
<el-input |
|||
v-model="formData.passing_score" |
|||
clearable |
|||
:placeholder="t('passingScorePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateExamPapers') : t('addExamPapers')" width="50%" |
|||
class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" |
|||
v-loading="loading"> |
|||
|
|||
<el-form-item label="试卷标题"> |
|||
<el-input v-model="formData.title" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('selectionMode')" prop="selection_mode"> |
|||
<el-select class="input-width" v-model="formData.selection_mode" clearable |
|||
:placeholder="t('selectionModePlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option v-for="(item, index) in selection_modeList" :key="index" :label="item.name" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<!-- <el-form-item :label="t('questionsIds')" > |
|||
<el-input v-model="formData.questions_ids" clearable :placeholder="t('questionsIdsPlaceholder')" class="input-width" /> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item :label="t('questionsIds')" v-if="formData.selection_mode == 'manual'"> |
|||
<div class="mt-[10px]"> |
|||
<el-table ref="tableRef" :data="questionsList" style="width: 100%" |
|||
@selection-change="handleSelectionChange" :loading="loadinga"> |
|||
<el-table-column type="selection" width="55" /> |
|||
<el-table-column prop="title" label="题目标题" /> |
|||
|
|||
<el-table-column label="题型" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in question_typeList"> |
|||
<div v-if="item.value == row.question_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="题干类型" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in question_content_typeList"> |
|||
<div v-if="item.value == row.question_content_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="题干内容" width="100" align="left"> |
|||
<template #default="{ row }"> |
|||
<el-avatar v-if="row.question_content_type == 'image'" |
|||
:src="img(row.question_content)" /> |
|||
<div v-if="row.question_content_type == 'text'">{{ row.question_content }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
|
|||
</el-table> |
|||
|
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="total" |
|||
@size-change="fetchQuestions()" @current-change="fetchQuestions" /> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('totalScore')" prop="total_score"> |
|||
<el-input-number v-model="formData.total_score" clearable :placeholder="t('totalScorePlaceholder')" |
|||
class="input-width" :min="0" max="100" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('passingScore')" prop="passing_score"> |
|||
<el-input-number v-model="formData.passing_score" clearable :placeholder="t('passingScorePlaceholder')" |
|||
class="input-width" :min="0" max="100" /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
|
|||
|
|||
|
|||
<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 { |
|||
addExamPapers, |
|||
editExamPapers, |
|||
getExamPapersInfo, |
|||
} from '@/app/api/exam_papers' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
selection_mode: '', |
|||
total_score: '', |
|||
passing_score: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
selection_mode: [ |
|||
{ |
|||
required: true, |
|||
message: t('selectionModePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
total_score: [ |
|||
{ required: true, message: t('totalScorePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
passing_score: [ |
|||
{ |
|||
required: true, |
|||
message: t('passingScorePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamPapers : addExamPapers |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getExamPapersInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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, |
|||
}) |
|||
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 { addExamPapers, editExamPapers, getExamPapersInfo } from '@/app/api/exam_papers' |
|||
import { getExamQuestionsList } from '@/app/api/exam_questions' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
title: '', |
|||
selection_mode: '', |
|||
questions_ids: '', |
|||
total_score: '', |
|||
passing_score: '', |
|||
|
|||
} |
|||
|
|||
|
|||
// 字典数据 |
|||
const question_typeList = ref([] as any[]) |
|||
const question_typeDictList = async () => { |
|||
question_typeList.value = await (await useDictionary('question_type')).data.dictionary |
|||
} |
|||
question_typeDictList(); |
|||
const question_content_typeList = ref([] as any[]) |
|||
const question_content_typeDictList = async () => { |
|||
question_content_typeList.value = await (await useDictionary('question_content_type')).data.dictionary |
|||
} |
|||
question_content_typeDictList(); |
|||
|
|||
|
|||
const dialogVisible = ref(false) |
|||
|
|||
// 列表数据 |
|||
const questionsList = ref([]) |
|||
const loadinga = ref(false) |
|||
const total = ref(0) |
|||
const pageSize = 10 |
|||
const currentPage = ref(1) |
|||
|
|||
const selectedQuestions = ref([]) |
|||
const tableRef = ref() |
|||
|
|||
const fetchQuestions = async (page = 1) => { |
|||
loadinga.value = true |
|||
currentPage.value = page |
|||
getExamQuestionsList({ |
|||
page: page, |
|||
limit: pageSize |
|||
}).then(res => { |
|||
questionsList.value = res.data.data |
|||
total.value = res.data.total |
|||
loadinga.value = false |
|||
|
|||
}).catch(() => { |
|||
loadinga.value = false |
|||
}) |
|||
} |
|||
|
|||
fetchQuestions() |
|||
|
|||
const handleSelectionChange = (val) => { |
|||
selectedQuestions.value = val |
|||
} |
|||
|
|||
|
|||
|
|||
const formData : Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
selection_mode: [ |
|||
{ required: true, message: t('selectionModePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl : FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamPapers : addExamPapers |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
if (formData.selection_mode == 'manual') { |
|||
const ids = selectedQuestions.value.map(item => item.id).join(',') |
|||
formData.questions_ids = ids |
|||
} |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let selection_modeList = ref([]) |
|||
const selection_modeDictList = async () => { |
|||
selection_modeList.value = await (await useDictionary('selection_mode')).data.dictionary |
|||
} |
|||
selection_modeDictList(); |
|||
watch(() => selection_modeList.value, () => { formData.selection_mode = selection_modeList.value[0].value }) |
|||
|
|||
|
|||
|
|||
const setFormData = async (row : any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getExamPapersInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key : string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
|
|||
nextTick(() => { |
|||
const ids = formData.questions_ids?.split(',') || [] |
|||
console.log(ids); |
|||
questionsList.value.forEach(row => { |
|||
if (ids.includes(String(row.id))) { |
|||
tableRef.value.toggleRowSelection(row) |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
|
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
.diy-dialog-wrap .el-form-item__label { |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
@ -1,220 +1,195 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamPapers') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="examPapersTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('selectionMode')" prop="selection_mode"> |
|||
<el-input |
|||
v-model="examPapersTable.searchParam.selection_mode" |
|||
:placeholder="t('selectionModePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('totalScore')" prop="total_score"> |
|||
<el-input |
|||
v-model="examPapersTable.searchParam.total_score" |
|||
:placeholder="t('totalScorePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('passingScore')" prop="passing_score"> |
|||
<el-input |
|||
v-model="examPapersTable.searchParam.passing_score" |
|||
:placeholder="t('passingScorePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamPapersList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="examPapersTable.data" |
|||
size="large" |
|||
v-loading="examPapersTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !examPapersTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="selection_mode" |
|||
:label="t('selectionMode')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="total_score" |
|||
:label="t('totalScore')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="passing_score" |
|||
:label="t('passingScore')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="examPapersTable.page" |
|||
v-model:page-size="examPapersTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="examPapersTable.total" |
|||
@size-change="loadExamPapersList()" |
|||
@current-change="loadExamPapersList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamPapersDialog" @complete="loadExamPapersList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamPapersList, deleteExamPapers } from '@/app/api/exam_papers' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_papers/components/exam-papers-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let examPapersTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
selection_mode: '', |
|||
total_score: '', |
|||
passing_score: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取试卷列表 |
|||
*/ |
|||
const loadExamPapersList = (page: number = 1) => { |
|||
examPapersTable.loading = true |
|||
examPapersTable.page = page |
|||
|
|||
getExamPapersList({ |
|||
page: examPapersTable.page, |
|||
limit: examPapersTable.limit, |
|||
...examPapersTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
examPapersTable.loading = false |
|||
examPapersTable.data = res.data.data |
|||
examPapersTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
examPapersTable.loading = false |
|||
}) |
|||
} |
|||
loadExamPapersList() |
|||
|
|||
const editExamPapersDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加试卷 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamPapersDialog.value.setFormData() |
|||
editExamPapersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑试卷 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamPapersDialog.value.setFormData(data) |
|||
editExamPapersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除试卷 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examPapersDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteExamPapers(id) |
|||
.then(() => { |
|||
loadExamPapersList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamPapersList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamPapers') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="examPapersTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('selectionMode')" prop="selection_mode"> |
|||
<el-select class="w-[280px]" v-model="examPapersTable.searchParam.selection_mode" clearable :placeholder="t('selectionModePlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in selection_modeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="examPapersTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamPapersList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="examPapersTable.data" size="large" v-loading="examPapersTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !examPapersTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
|
|||
<el-table-column prop="title" label="试卷标题" /> |
|||
|
|||
|
|||
<el-table-column :label="t('selectionMode')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in selection_modeList"> |
|||
<div v-if="item.value == row.selection_mode">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="total_score" :label="t('totalScore')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="passing_score" :label="t('passingScore')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="examPapersTable.page" v-model:page-size="examPapersTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="examPapersTable.total" |
|||
@size-change="loadExamPapersList()" @current-change="loadExamPapersList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamPapersDialog" @complete="loadExamPapersList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamPapersList, deleteExamPapers } from '@/app/api/exam_papers' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_papers/components/exam-papers-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let examPapersTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"selection_mode":"", |
|||
"created_at":[] |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const selection_modeList = ref([] as any[]) |
|||
const selection_modeDictList = async () => { |
|||
selection_modeList.value = await (await useDictionary('selection_mode')).data.dictionary |
|||
} |
|||
selection_modeDictList(); |
|||
|
|||
/** |
|||
* 获取试卷列表 |
|||
*/ |
|||
const loadExamPapersList = (page: number = 1) => { |
|||
examPapersTable.loading = true |
|||
examPapersTable.page = page |
|||
|
|||
getExamPapersList({ |
|||
page: examPapersTable.page, |
|||
limit: examPapersTable.limit, |
|||
...examPapersTable.searchParam |
|||
}).then(res => { |
|||
examPapersTable.loading = false |
|||
examPapersTable.data = res.data.data |
|||
examPapersTable.total = res.data.total |
|||
}).catch(() => { |
|||
examPapersTable.loading = false |
|||
}) |
|||
} |
|||
loadExamPapersList() |
|||
|
|||
const editExamPapersDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加试卷 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamPapersDialog.value.setFormData() |
|||
editExamPapersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑试卷 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamPapersDialog.value.setFormData(data) |
|||
editExamPapersDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除试卷 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examPapersDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteExamPapers(id).then(() => { |
|||
loadExamPapersList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamPapersList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,287 @@ |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateExamQuestions') : t('addExamQuestions')" width="50%" |
|||
class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" |
|||
v-loading="loading"> |
|||
<el-form-item :label="t('title')" prop="title"> |
|||
<el-input v-model="formData.title" clearable :placeholder="t('titlePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('questionType')" prop="question_type"> |
|||
<el-select class="input-width" v-model="formData.question_type" clearable |
|||
:placeholder="t('questionTypePlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option v-for="(item, index) in question_typeList" :key="index" :label="item.name" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('questionContentType')" prop="question_content_type"> |
|||
<el-select class="input-width" v-model="formData.question_content_type" clearable |
|||
:placeholder="t('questionContentTypePlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option v-for="(item, index) in question_content_typeList" :key="index" :label="item.name" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('questionContent')" v-if="formData.question_content_type == 'text'"> |
|||
<el-input v-model="formData.question_content" clearable class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('questionContent')" v-if="formData.question_content_type == 'image'"> |
|||
<upload-image v-model="formData.question_content" /> |
|||
</el-form-item> |
|||
|
|||
<!-- <el-form-item :label="t('optionJson')" prop="option_json"> |
|||
<el-input v-model="formData.option_json" clearable :placeholder="t('optionJsonPlaceholder')" class="input-width" /> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item :label="t('optionJson')"> |
|||
<div v-for="(option, index) in formData.option_json" :key="index" class="option-item"> |
|||
<el-card class="box-card" shadow="never"> |
|||
|
|||
<el-form-item label="类型" label-width="60"> |
|||
<el-select v-model="option.option_content_type" placeholder="请选择类型"> |
|||
<el-option label="文本" value="text" /> |
|||
<el-option label="图片" value="image" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="内容" label-width="60" style="margin-top:5px;"> |
|||
<template v-if="option.option_content_type === 'text'"> |
|||
<el-input v-model="option.option_content" placeholder="请输入选项文本" /> |
|||
</template> |
|||
<template v-else> |
|||
<upload-file v-model="option.option_content" /> |
|||
</template> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="答案" label-width="60"> |
|||
<el-switch v-model="option.correct_answer" |
|||
:disabled="formData.question_type === 'single_choice' && option.correct_answer" |
|||
@change="handleCorrectAnswerChange(index)" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="操作" label-width="60"> |
|||
<el-button @click="removeOption(index)" type="danger" size="small" plain>删除</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
</el-card> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="addOption">添加选项</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
</el-form> |
|||
|
|||
<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 { addExamQuestions, editExamQuestions, getExamQuestionsInfo } from '@/app/api/exam_questions' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
title: '', |
|||
question_type: '', |
|||
question_content_type: '', |
|||
question_content: '', |
|||
option_json: [] |
|||
} |
|||
|
|||
const addOption = () => { |
|||
formData.option_json.push({ |
|||
option_content_type: 'text', |
|||
option_content: '', |
|||
correct_answer: false |
|||
}) |
|||
} |
|||
|
|||
const removeOption = (index) => { |
|||
formData.option_json.splice(index, 1) |
|||
} |
|||
|
|||
|
|||
const handleCorrectAnswerChange = (changedIndex) => { |
|||
if (formData.question_type === 'single_choice') { |
|||
formData.options.forEach((opt, i) => { |
|||
if (i !== changedIndex) opt.correct_answer = false |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
const formData : Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
title: [ |
|||
{ required: true, message: t('titlePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
question_type: [ |
|||
{ required: true, message: t('questionTypePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
question_content_type: [ |
|||
{ required: true, message: t('questionContentTypePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
question_content: [ |
|||
{ required: true, message: t('questionContentPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
option_json: [ |
|||
{ required: true, message: t('optionJsonPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
correct_answer: [ |
|||
{ required: true, message: t('correctAnswerPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl : FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamQuestions : addExamQuestions |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let question_typeList = ref([]) |
|||
const question_typeDictList = async () => { |
|||
question_typeList.value = await (await useDictionary('question_type')).data.dictionary |
|||
} |
|||
question_typeDictList(); |
|||
watch(() => question_typeList.value, () => { formData.question_type = question_typeList.value[0].value }) |
|||
let question_content_typeList = ref([]) |
|||
const question_content_typeDictList = async () => { |
|||
question_content_typeList.value = await (await useDictionary('question_content_type')).data.dictionary |
|||
} |
|||
question_content_typeDictList(); |
|||
watch(() => question_content_typeList.value, () => { formData.question_content_type = question_content_typeList.value[0].value }) |
|||
|
|||
|
|||
|
|||
const setFormData = async (row : any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getExamQuestionsInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key : string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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; |
|||
} |
|||
|
|||
.option-item { |
|||
margin-bottom: 20px; |
|||
margin-right: 10px; |
|||
|
|||
} |
|||
</style> |
|||
@ -1,360 +1,216 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamQuestions') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="examQuestionsTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('questionType')" prop="question_type"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.question_type" |
|||
:placeholder="t('questionTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="t('questionContentType')" |
|||
prop="question_content_type" |
|||
> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.question_content_type" |
|||
:placeholder="t('questionContentTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('questionContent')" prop="question_content"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.question_content" |
|||
:placeholder="t('questionContentPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="t('optionAContentType')" |
|||
prop="option_a_content_type" |
|||
> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_a_content_type" |
|||
:placeholder="t('optionAContentTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('optionAContent')" prop="option_a_content"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_a_content" |
|||
:placeholder="t('optionAContentPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="t('optionBContentType')" |
|||
prop="option_b_content_type" |
|||
> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_b_content_type" |
|||
:placeholder="t('optionBContentTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('optionBContent')" prop="option_b_content"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_b_content" |
|||
:placeholder="t('optionBContentPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="t('optionCContentType')" |
|||
prop="option_c_content_type" |
|||
> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_c_content_type" |
|||
:placeholder="t('optionCContentTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('optionCContent')" prop="option_c_content"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_c_content" |
|||
:placeholder="t('optionCContentPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="t('optionDContentType')" |
|||
prop="option_d_content_type" |
|||
> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_d_content_type" |
|||
:placeholder="t('optionDContentTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('optionDContent')" prop="option_d_content"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.option_d_content" |
|||
:placeholder="t('optionDContentPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('correctAnswer')" prop="correct_answer"> |
|||
<el-input |
|||
v-model="examQuestionsTable.searchParam.correct_answer" |
|||
:placeholder="t('correctAnswerPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamQuestionsList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="examQuestionsTable.data" |
|||
size="large" |
|||
v-loading="examQuestionsTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !examQuestionsTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="question_type" |
|||
:label="t('questionType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="question_content_type" |
|||
:label="t('questionContentType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="question_content" |
|||
:label="t('questionContent')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_a_content_type" |
|||
:label="t('optionAContentType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_a_content" |
|||
:label="t('optionAContent')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_b_content_type" |
|||
:label="t('optionBContentType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_b_content" |
|||
:label="t('optionBContent')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_c_content_type" |
|||
:label="t('optionCContentType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_c_content" |
|||
:label="t('optionCContent')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_d_content_type" |
|||
:label="t('optionDContentType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="option_d_content" |
|||
:label="t('optionDContent')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="correct_answer" |
|||
:label="t('correctAnswer')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="examQuestionsTable.page" |
|||
v-model:page-size="examQuestionsTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="examQuestionsTable.total" |
|||
@size-change="loadExamQuestionsList()" |
|||
@current-change="loadExamQuestionsList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { |
|||
getExamQuestionsList, |
|||
deleteExamQuestions, |
|||
} from '@/app/api/exam_questions' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import { useRouter } from 'vue-router' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let examQuestionsTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
question_type: '', |
|||
question_content_type: '', |
|||
question_content: '', |
|||
option_a_content_type: '', |
|||
option_a_content: '', |
|||
option_b_content_type: '', |
|||
option_b_content: '', |
|||
option_c_content_type: '', |
|||
option_c_content: '', |
|||
option_d_content_type: '', |
|||
option_d_content: '', |
|||
correct_answer: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取试题列表 |
|||
*/ |
|||
const loadExamQuestionsList = (page: number = 1) => { |
|||
examQuestionsTable.loading = true |
|||
examQuestionsTable.page = page |
|||
|
|||
getExamQuestionsList({ |
|||
page: examQuestionsTable.page, |
|||
limit: examQuestionsTable.limit, |
|||
...examQuestionsTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
examQuestionsTable.loading = false |
|||
examQuestionsTable.data = res.data.data |
|||
examQuestionsTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
examQuestionsTable.loading = false |
|||
}) |
|||
} |
|||
loadExamQuestionsList() |
|||
|
|||
const router = useRouter() |
|||
|
|||
/** |
|||
* 添加试题 |
|||
*/ |
|||
const addEvent = () => { |
|||
router.push('/exam_questions/exam_questions_edit') |
|||
} |
|||
|
|||
/** |
|||
* 编辑试题 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
router.push('/exam_questions/exam_questions_edit?id=' + data.id) |
|||
} |
|||
|
|||
/** |
|||
* 删除试题 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examQuestionsDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteExamQuestions(id) |
|||
.then(() => { |
|||
loadExamQuestionsList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamQuestionsList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamQuestions') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="examQuestionsTable.searchParam" ref="searchFormRef"> |
|||
<el-form-item :label="t('title')" prop="title"> |
|||
<el-input v-model="examQuestionsTable.searchParam.title" :placeholder="t('titlePlaceholder')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('questionType')" prop="question_type"> |
|||
<el-select class="w-[280px]" v-model="examQuestionsTable.searchParam.question_type" clearable :placeholder="t('questionTypePlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in question_typeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="examQuestionsTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamQuestionsList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="examQuestionsTable.data" size="large" v-loading="examQuestionsTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !examQuestionsTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="title" :label="t('title')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('questionType')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in question_typeList"> |
|||
<div v-if="item.value == row.question_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="t('questionContentType')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in question_content_typeList"> |
|||
<div v-if="item.value == row.question_content_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="t('questionContent')" width="100" align="left"> |
|||
<template #default="{ row }"> |
|||
<el-avatar v-if="row.question_content_type == 'image'" :src="img(row.question_content)" /> |
|||
<div v-if="row.question_content_type == 'text'">{{ row.question_content }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="updated_at" :label="t('updatedAt')" min-width="120" :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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="examQuestionsTable.page" v-model:page-size="examQuestionsTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="examQuestionsTable.total" |
|||
@size-change="loadExamQuestionsList()" @current-change="loadExamQuestionsList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamQuestionsDialog" @complete="loadExamQuestionsList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamQuestionsList, deleteExamQuestions } from '@/app/api/exam_questions' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_questions/components/exam-questions-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let examQuestionsTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"title":"", |
|||
"question_type":"", |
|||
"created_at":[] |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const question_typeList = ref([] as any[]) |
|||
const question_typeDictList = async () => { |
|||
question_typeList.value = await (await useDictionary('question_type')).data.dictionary |
|||
} |
|||
question_typeDictList(); |
|||
const question_content_typeList = ref([] as any[]) |
|||
const question_content_typeDictList = async () => { |
|||
question_content_typeList.value = await (await useDictionary('question_content_type')).data.dictionary |
|||
} |
|||
question_content_typeDictList(); |
|||
|
|||
/** |
|||
* 获取试题列表 |
|||
*/ |
|||
const loadExamQuestionsList = (page: number = 1) => { |
|||
examQuestionsTable.loading = true |
|||
examQuestionsTable.page = page |
|||
|
|||
getExamQuestionsList({ |
|||
page: examQuestionsTable.page, |
|||
limit: examQuestionsTable.limit, |
|||
...examQuestionsTable.searchParam |
|||
}).then(res => { |
|||
examQuestionsTable.loading = false |
|||
examQuestionsTable.data = res.data.data |
|||
examQuestionsTable.total = res.data.total |
|||
}).catch(() => { |
|||
examQuestionsTable.loading = false |
|||
}) |
|||
} |
|||
loadExamQuestionsList() |
|||
|
|||
const editExamQuestionsDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加试题 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamQuestionsDialog.value.setFormData() |
|||
editExamQuestionsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑试题 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamQuestionsDialog.value.setFormData(data) |
|||
editExamQuestionsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除试题 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examQuestionsDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteExamQuestions(id).then(() => { |
|||
loadExamQuestionsList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamQuestionsList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,249 +1,267 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title="formData.id ? t('updateExamRecords') : t('addExamRecords')" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="formData.campus_id" |
|||
clearable |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-input |
|||
v-model="formData.user_id" |
|||
clearable |
|||
:placeholder="t('userIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('paperId')" prop="paper_id"> |
|||
<el-input |
|||
v-model="formData.paper_id" |
|||
clearable |
|||
:placeholder="t('paperIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('score')"> |
|||
<el-input |
|||
v-model="formData.score" |
|||
clearable |
|||
:placeholder="t('scorePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('status')"> |
|||
<el-input |
|||
v-model="formData.status" |
|||
clearable |
|||
:placeholder="t('statusPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('startTime')"> |
|||
<el-input |
|||
v-model="formData.start_time" |
|||
clearable |
|||
:placeholder="t('startTimePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('endTime')"> |
|||
<el-input |
|||
v-model="formData.end_time" |
|||
clearable |
|||
:placeholder="t('endTimePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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 { |
|||
addExamRecords, |
|||
editExamRecords, |
|||
getExamRecordsInfo, |
|||
} from '@/app/api/exam_records' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
user_id: '', |
|||
paper_id: '', |
|||
score: '', |
|||
status: '', |
|||
start_time: '', |
|||
end_time: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
user_id: [ |
|||
{ required: true, message: t('userIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
paper_id: [ |
|||
{ required: true, message: t('paperIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
score: [ |
|||
{ required: true, message: t('scorePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
status: [ |
|||
{ required: true, message: t('statusPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
start_time: [ |
|||
{ required: true, message: t('startTimePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
end_time: [ |
|||
{ required: true, message: t('endTimePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamRecords : addExamRecords |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getExamRecordsInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateExamRecords') : t('addExamRecords')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-select class="input-width" v-model="formData.user_id" clearable :placeholder="t('userIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in userIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('paperId')" prop="paper_id"> |
|||
<el-select class="input-width" v-model="formData.paper_id" clearable :placeholder="t('paperIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in paperIdList" |
|||
:key="index" |
|||
:label="item['title']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('score')" > |
|||
<el-input-number v-model="formData.score" clearable :placeholder="t('scorePlaceholder')" class="input-width" :min = "0" max = "100" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('status')" > |
|||
<el-select class="input-width" v-model="formData.status" clearable :placeholder="t('statusPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('startTime')" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.start_time" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('startTimePlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('endTime')" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.end_time" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('endTimePlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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 { addExamRecords, editExamRecords, getExamRecordsInfo, getWithCampusList, getWithPersonnelList, getWithExamPapersList } from '@/app/api/exam_records' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
user_id: '', |
|||
paper_id: '', |
|||
score: '', |
|||
status: '', |
|||
start_time: '', |
|||
end_time: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
user_id: [ |
|||
{ required: true, message: t('userIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
paper_id: [ |
|||
{ required: true, message: t('paperIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
score: [ |
|||
{ required: true, message: t('scorePlaceholder'), trigger: 'blur' }, |
|||
{ validator: (rule: any, value: string, callback: any) => { if (value && !/^\d{0,100}$/.test(value)) { callback(new Error(t('generateBetween')))} else { callback() }}}, |
|||
] |
|||
, |
|||
status: [ |
|||
{ required: true, message: t('statusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
start_time: [ |
|||
{ required: true, message: t('startTimePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
end_time: [ |
|||
{ required: true, message: t('endTimePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editExamRecords : addExamRecords |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let statusList = ref([]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('ks_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
watch(() => statusList.value, () => { formData.status = statusList.value[0].value }) |
|||
|
|||
|
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const userIdList = ref([] as any[]) |
|||
const setUserIdList = async () => { |
|||
userIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setUserIdList() |
|||
const paperIdList = ref([] as any[]) |
|||
const setPaperIdList = async () => { |
|||
paperIdList.value = await (await getWithExamPapersList({})).data |
|||
} |
|||
setPaperIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getExamRecordsInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
|
|||
@ -1,276 +1,232 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamRecords') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="examRecordsTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.campus_id" |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.user_id" |
|||
:placeholder="t('userIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('paperId')" prop="paper_id"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.paper_id" |
|||
:placeholder="t('paperIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('score')" prop="score"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.score" |
|||
:placeholder="t('scorePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.status" |
|||
:placeholder="t('statusPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('startTime')" prop="start_time"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.start_time" |
|||
:placeholder="t('startTimePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('endTime')" prop="end_time"> |
|||
<el-input |
|||
v-model="examRecordsTable.searchParam.end_time" |
|||
:placeholder="t('endTimePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamRecordsList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="examRecordsTable.data" |
|||
size="large" |
|||
v-loading="examRecordsTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !examRecordsTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="campus_id" |
|||
:label="t('campusId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="user_id" |
|||
:label="t('userId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="paper_id" |
|||
:label="t('paperId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="score" |
|||
:label="t('score')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="status" |
|||
:label="t('status')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="start_time" |
|||
:label="t('startTime')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="end_time" |
|||
:label="t('endTime')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="examRecordsTable.page" |
|||
v-model:page-size="examRecordsTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="examRecordsTable.total" |
|||
@size-change="loadExamRecordsList()" |
|||
@current-change="loadExamRecordsList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamRecordsDialog" @complete="loadExamRecordsList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamRecordsList, deleteExamRecords } from '@/app/api/exam_records' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_records/components/exam-records-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let examRecordsTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
campus_id: '', |
|||
user_id: '', |
|||
paper_id: '', |
|||
score: '', |
|||
status: '', |
|||
start_time: '', |
|||
end_time: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取考试记录列表 |
|||
*/ |
|||
const loadExamRecordsList = (page: number = 1) => { |
|||
examRecordsTable.loading = true |
|||
examRecordsTable.page = page |
|||
|
|||
getExamRecordsList({ |
|||
page: examRecordsTable.page, |
|||
limit: examRecordsTable.limit, |
|||
...examRecordsTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
examRecordsTable.loading = false |
|||
examRecordsTable.data = res.data.data |
|||
examRecordsTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
examRecordsTable.loading = false |
|||
}) |
|||
} |
|||
loadExamRecordsList() |
|||
|
|||
const editExamRecordsDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加考试记录 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamRecordsDialog.value.setFormData() |
|||
editExamRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑考试记录 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamRecordsDialog.value.setFormData(data) |
|||
editExamRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除考试记录 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examRecordsDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteExamRecords(id) |
|||
.then(() => { |
|||
loadExamRecordsList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamRecordsList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addExamRecords') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="examRecordsTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="w-[280px]" v-model="examRecordsTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('paperId')" prop="paper_id"> |
|||
<el-select class="w-[280px]" v-model="examRecordsTable.searchParam.paper_id" clearable :placeholder="t('paperIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in paperIdList" |
|||
:key="index" |
|||
:label="item['title']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-select class="w-[280px]" v-model="examRecordsTable.searchParam.status" clearable :placeholder="t('statusPlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadExamRecordsList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="examRecordsTable.data" size="large" v-loading="examRecordsTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !examRecordsTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="user_id_name" :label="t('userId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="paper_id_name" :label="t('paperId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="score" :label="t('score')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('status')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in statusList"> |
|||
<div v-if="item.value == row.status">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="start_time" :label="t('startTime')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="end_time" :label="t('endTime')" min-width="120" :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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="examRecordsTable.page" v-model:page-size="examRecordsTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="examRecordsTable.total" |
|||
@size-change="loadExamRecordsList()" @current-change="loadExamRecordsList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editExamRecordsDialog" @complete="loadExamRecordsList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getExamRecordsList, deleteExamRecords, getWithCampusList, getWithPersonnelList, getWithExamPapersList } from '@/app/api/exam_records' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/exam_records/components/exam-records-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let examRecordsTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"campus_id":"", |
|||
"paper_id":"", |
|||
"status":"" |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const statusList = ref([] as any[]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('ks_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
|
|||
/** |
|||
* 获取考试记录列表 |
|||
*/ |
|||
const loadExamRecordsList = (page: number = 1) => { |
|||
examRecordsTable.loading = true |
|||
examRecordsTable.page = page |
|||
|
|||
getExamRecordsList({ |
|||
page: examRecordsTable.page, |
|||
limit: examRecordsTable.limit, |
|||
...examRecordsTable.searchParam |
|||
}).then(res => { |
|||
examRecordsTable.loading = false |
|||
examRecordsTable.data = res.data.data |
|||
examRecordsTable.total = res.data.total |
|||
}).catch(() => { |
|||
examRecordsTable.loading = false |
|||
}) |
|||
} |
|||
loadExamRecordsList() |
|||
|
|||
const editExamRecordsDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加考试记录 |
|||
*/ |
|||
const addEvent = () => { |
|||
editExamRecordsDialog.value.setFormData() |
|||
editExamRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑考试记录 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editExamRecordsDialog.value.setFormData(data) |
|||
editExamRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除考试记录 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('examRecordsDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteExamRecords(id).then(() => { |
|||
loadExamRecordsList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const userIdList = ref([]) |
|||
const setUserIdList = async () => { |
|||
userIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setUserIdList() |
|||
const paperIdList = ref([]) |
|||
const setPaperIdList = async () => { |
|||
paperIdList.value = await (await getWithExamPapersList({})).data |
|||
} |
|||
setPaperIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadExamRecordsList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,259 +1,251 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title=" |
|||
formData.id ? t('updatePerformanceRecords') : t('addPerformanceRecords') |
|||
" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-input |
|||
v-model="formData.staff_id" |
|||
clearable |
|||
:placeholder="t('staffIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('resourceId')" prop="resource_id"> |
|||
<el-input |
|||
v-model="formData.resource_id" |
|||
clearable |
|||
:placeholder="t('resourceIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('orderId')"> |
|||
<el-input |
|||
v-model="formData.order_id" |
|||
clearable |
|||
:placeholder="t('orderIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('orderStatus')"> |
|||
<el-input |
|||
v-model="formData.order_status" |
|||
clearable |
|||
:placeholder="t('orderStatusPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceType')" prop="performance_type"> |
|||
<el-input |
|||
v-model="formData.performance_type" |
|||
clearable |
|||
:placeholder="t('performanceTypePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceValue')" prop="performance_value"> |
|||
<el-input |
|||
v-model="formData.performance_value" |
|||
clearable |
|||
:placeholder="t('performanceValuePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('remarks')"> |
|||
<el-input |
|||
v-model="formData.remarks" |
|||
clearable |
|||
:placeholder="t('remarksPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<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 { |
|||
addPerformanceRecords, |
|||
editPerformanceRecords, |
|||
getPerformanceRecordsInfo, |
|||
} from '@/app/api/performance_records' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
staff_id: '', |
|||
resource_id: '', |
|||
order_id: '', |
|||
order_status: '', |
|||
performance_type: '', |
|||
performance_value: '', |
|||
remarks: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
staff_id: [ |
|||
{ required: true, message: t('staffIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
resource_id: [ |
|||
{ required: true, message: t('resourceIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
order_id: [ |
|||
{ required: true, message: t('orderIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
order_status: [ |
|||
{ required: true, message: t('orderStatusPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
performance_type: [ |
|||
{ |
|||
required: true, |
|||
message: t('performanceTypePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
performance_value: [ |
|||
{ |
|||
required: true, |
|||
message: t('performanceValuePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
remarks: [ |
|||
{ required: true, message: t('remarksPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editPerformanceRecords : addPerformanceRecords |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getPerformanceRecordsInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updatePerformanceRecords') : t('addPerformanceRecords')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-select class="input-width" v-model="formData.staff_id" clearable :placeholder="t('staffIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in staffIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('resourceId')" prop="resource_id"> |
|||
<el-select class="input-width" v-model="formData.resource_id" clearable :placeholder="t('resourceIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in resourceIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('orderStatus')" prop="order_status"> |
|||
<el-select class="input-width" v-model="formData.order_status" clearable :placeholder="t('orderStatusPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in order_statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceType')" prop="performance_type"> |
|||
<el-select class="input-width" v-model="formData.performance_type" clearable :placeholder="t('performanceTypePlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in performance_typeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceValue')" prop="performance_value"> |
|||
<el-input v-model="formData.performance_value" clearable :placeholder="t('performanceValuePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('remarks')" > |
|||
<el-input v-model="formData.remarks" clearable :placeholder="t('remarksPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<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 { addPerformanceRecords, editPerformanceRecords, getPerformanceRecordsInfo, getWithPersonnelList, getWithCustomerResourcesList, getWithOrderTableList } from '@/app/api/performance_records' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
staff_id: '', |
|||
resource_id: '', |
|||
order_status: '', |
|||
performance_type: '', |
|||
performance_value: '', |
|||
remarks: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
staff_id: [ |
|||
{ required: true, message: t('staffIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
resource_id: [ |
|||
{ required: true, message: t('resourceIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
order_status: [ |
|||
{ required: true, message: t('orderStatusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
performance_type: [ |
|||
{ required: true, message: t('performanceTypePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
performance_value: [ |
|||
{ required: true, message: t('performanceValuePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
remarks: [ |
|||
{ required: true, message: t('remarksPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editPerformanceRecords : addPerformanceRecords |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let order_statusList = ref([]) |
|||
const order_statusDictList = async () => { |
|||
order_statusList.value = await (await useDictionary('orderstatus')).data.dictionary |
|||
} |
|||
order_statusDictList(); |
|||
watch(() => order_statusList.value, () => { formData.order_status = order_statusList.value[0].value }) |
|||
let performance_typeList = ref([]) |
|||
const performance_typeDictList = async () => { |
|||
performance_typeList.value = await (await useDictionary('performance_type')).data.dictionary |
|||
} |
|||
performance_typeDictList(); |
|||
watch(() => performance_typeList.value, () => { formData.performance_type = performance_typeList.value[0].value }) |
|||
|
|||
|
|||
const staffIdList = ref([] as any[]) |
|||
const setStaffIdList = async () => { |
|||
staffIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setStaffIdList() |
|||
const resourceIdList = ref([] as any[]) |
|||
const setResourceIdList = async () => { |
|||
resourceIdList.value = await (await getWithCustomerResourcesList({})).data |
|||
} |
|||
setResourceIdList() |
|||
const orderIdList = ref([] as any[]) |
|||
const setOrderIdList = async () => { |
|||
orderIdList.value = await (await getWithOrderTableList({})).data |
|||
} |
|||
setOrderIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getPerformanceRecordsInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
|
|||
@ -1,284 +1,236 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addPerformanceRecords') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="performanceRecordsTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.staff_id" |
|||
:placeholder="t('staffIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('resourceId')" prop="resource_id"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.resource_id" |
|||
:placeholder="t('resourceIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('orderId')" prop="order_id"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.order_id" |
|||
:placeholder="t('orderIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('orderStatus')" prop="order_status"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.order_status" |
|||
:placeholder="t('orderStatusPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('performanceType')" prop="performance_type"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.performance_type" |
|||
:placeholder="t('performanceTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('performanceValue')" prop="performance_value"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.performance_value" |
|||
:placeholder="t('performanceValuePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('remarks')" prop="remarks"> |
|||
<el-input |
|||
v-model="performanceRecordsTable.searchParam.remarks" |
|||
:placeholder="t('remarksPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadPerformanceRecordsList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="performanceRecordsTable.data" |
|||
size="large" |
|||
v-loading="performanceRecordsTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ |
|||
!performanceRecordsTable.loading ? t('emptyData') : '' |
|||
}}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="staff_id" |
|||
:label="t('staffId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="resource_id" |
|||
:label="t('resourceId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="order_id" |
|||
:label="t('orderId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="order_status" |
|||
:label="t('orderStatus')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="performance_type" |
|||
:label="t('performanceType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="performance_value" |
|||
:label="t('performanceValue')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="remarks" |
|||
:label="t('remarks')" |
|||
min-width="120" |
|||
: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)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="performanceRecordsTable.page" |
|||
v-model:page-size="performanceRecordsTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="performanceRecordsTable.total" |
|||
@size-change="loadPerformanceRecordsList()" |
|||
@current-change="loadPerformanceRecordsList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit |
|||
ref="editPerformanceRecordsDialog" |
|||
@complete="loadPerformanceRecordsList" |
|||
/> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { |
|||
getPerformanceRecordsList, |
|||
deletePerformanceRecords, |
|||
} from '@/app/api/performance_records' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/performance_records/components/performance-records-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let performanceRecordsTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
staff_id: '', |
|||
resource_id: '', |
|||
order_id: '', |
|||
order_status: '', |
|||
performance_type: '', |
|||
performance_value: '', |
|||
remarks: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取绩效记录列表 |
|||
*/ |
|||
const loadPerformanceRecordsList = (page: number = 1) => { |
|||
performanceRecordsTable.loading = true |
|||
performanceRecordsTable.page = page |
|||
|
|||
getPerformanceRecordsList({ |
|||
page: performanceRecordsTable.page, |
|||
limit: performanceRecordsTable.limit, |
|||
...performanceRecordsTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
performanceRecordsTable.loading = false |
|||
performanceRecordsTable.data = res.data.data |
|||
performanceRecordsTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
performanceRecordsTable.loading = false |
|||
}) |
|||
} |
|||
loadPerformanceRecordsList() |
|||
|
|||
const editPerformanceRecordsDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加绩效记录 |
|||
*/ |
|||
const addEvent = () => { |
|||
editPerformanceRecordsDialog.value.setFormData() |
|||
editPerformanceRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑绩效记录 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editPerformanceRecordsDialog.value.setFormData(data) |
|||
editPerformanceRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除绩效记录 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('performanceRecordsDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deletePerformanceRecords(id) |
|||
.then(() => { |
|||
loadPerformanceRecordsList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadPerformanceRecordsList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<!-- <el-button type="primary" @click="addEvent"> |
|||
{{ t('addPerformanceRecords') }} |
|||
</el-button> --> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="performanceRecordsTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('staffId')" prop="staff_id"> |
|||
<el-select class="w-[280px]" v-model="performanceRecordsTable.searchParam.staff_id" clearable :placeholder="t('staffIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in staffIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('orderStatus')" prop="order_status"> |
|||
<el-select class="w-[280px]" v-model="performanceRecordsTable.searchParam.order_status" clearable :placeholder="t('orderStatusPlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in order_statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="performanceRecordsTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadPerformanceRecordsList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="performanceRecordsTable.data" size="large" v-loading="performanceRecordsTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !performanceRecordsTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="staff_id_name" :label="t('staffId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="resource_id_name" :label="t('resourceId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('orderStatus')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in order_statusList"> |
|||
<div v-if="item.value == row.order_status">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="t('performanceType')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in performance_typeList"> |
|||
<div v-if="item.value == row.performance_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="performance_value" :label="t('performanceValue')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="remarks" :label="t('remarks')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="performanceRecordsTable.page" v-model:page-size="performanceRecordsTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="performanceRecordsTable.total" |
|||
@size-change="loadPerformanceRecordsList()" @current-change="loadPerformanceRecordsList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editPerformanceRecordsDialog" @complete="loadPerformanceRecordsList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getPerformanceRecordsList, deletePerformanceRecords, getWithPersonnelList, getWithCustomerResourcesList, getWithOrderTableList } from '@/app/api/performance_records' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/performance_records/components/performance-records-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let performanceRecordsTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"staff_id":"", |
|||
"order_status":"", |
|||
"created_at":[] |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const order_statusList = ref([] as any[]) |
|||
const order_statusDictList = async () => { |
|||
order_statusList.value = await (await useDictionary('orderstatus')).data.dictionary |
|||
} |
|||
order_statusDictList(); |
|||
const performance_typeList = ref([] as any[]) |
|||
const performance_typeDictList = async () => { |
|||
performance_typeList.value = await (await useDictionary('performance_type')).data.dictionary |
|||
} |
|||
performance_typeDictList(); |
|||
|
|||
/** |
|||
* 获取绩效记录列表 |
|||
*/ |
|||
const loadPerformanceRecordsList = (page: number = 1) => { |
|||
performanceRecordsTable.loading = true |
|||
performanceRecordsTable.page = page |
|||
|
|||
getPerformanceRecordsList({ |
|||
page: performanceRecordsTable.page, |
|||
limit: performanceRecordsTable.limit, |
|||
...performanceRecordsTable.searchParam |
|||
}).then(res => { |
|||
performanceRecordsTable.loading = false |
|||
performanceRecordsTable.data = res.data.data |
|||
performanceRecordsTable.total = res.data.total |
|||
}).catch(() => { |
|||
performanceRecordsTable.loading = false |
|||
}) |
|||
} |
|||
loadPerformanceRecordsList() |
|||
|
|||
const editPerformanceRecordsDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加绩效记录 |
|||
*/ |
|||
const addEvent = () => { |
|||
editPerformanceRecordsDialog.value.setFormData() |
|||
editPerformanceRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑绩效记录 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editPerformanceRecordsDialog.value.setFormData(data) |
|||
editPerformanceRecordsDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除绩效记录 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('performanceRecordsDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deletePerformanceRecords(id).then(() => { |
|||
loadPerformanceRecordsList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const staffIdList = ref([]) |
|||
const setStaffIdList = async () => { |
|||
staffIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setStaffIdList() |
|||
const resourceIdList = ref([]) |
|||
const setResourceIdList = async () => { |
|||
resourceIdList.value = await (await getWithCustomerResourcesList({})).data |
|||
} |
|||
setResourceIdList() |
|||
const orderIdList = ref([]) |
|||
const setOrderIdList = async () => { |
|||
orderIdList.value = await (await getWithOrderTableList({})).data |
|||
} |
|||
setOrderIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadPerformanceRecordsList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,315 @@ |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateStudent') : t('addStudent')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('campusId')" > |
|||
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('classId')" prop="class_id"> |
|||
<el-select class="input-width" v-model="formData.class_id" clearable :placeholder="t('classIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in classIdList" |
|||
:key="index" |
|||
:label="item['class_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('userId')" prop="user_id"> |
|||
<el-select class="input-width" v-model="formData.user_id" clearable :placeholder="t('userIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in userIdList" |
|||
:key="index" |
|||
:label="item['nickname']" |
|||
:value="item['member_id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('name')" prop="name"> |
|||
<el-input v-model="formData.name" clearable :placeholder="t('namePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('gender')" prop="gender"> |
|||
<el-select class="input-width" v-model="formData.gender" clearable :placeholder="t('genderPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in genderList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('age')" > |
|||
<el-input v-model="formData.age" clearable :placeholder="t('agePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('birthday')" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.birthday" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('birthdayPlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('emergencyContact')" > |
|||
<el-input v-model="formData.emergency_contact" clearable :placeholder="t('emergencyContactPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('contactPhone')" > |
|||
<el-input v-model="formData.contact_phone" clearable :placeholder="t('contactPhonePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('note')" > |
|||
<el-input v-model="formData.note" clearable :placeholder="t('notePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('status')" prop="status"> |
|||
<el-select class="input-width" v-model="formData.status" clearable :placeholder="t('statusPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="Number(item.value)" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<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 { addStudent, editStudent, getStudentInfo, getWithCampusList, getWithClassGradeList, getWithMemberList } from '@/app/api/student' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
class_id: '', |
|||
user_id: '', |
|||
name: '', |
|||
gender: '', |
|||
age: '', |
|||
birthday: '', |
|||
emergency_contact: '', |
|||
contact_phone: '', |
|||
note: '', |
|||
status: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
class_id: [ |
|||
{ required: true, message: t('classIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
user_id: [ |
|||
{ required: true, message: t('userIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
name: [ |
|||
{ required: true, message: t('namePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
gender: [ |
|||
{ required: true, message: t('genderPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
age: [ |
|||
{ required: true, message: t('agePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
birthday: [ |
|||
{ required: true, message: t('birthdayPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
emergency_contact: [ |
|||
{ required: true, message: t('emergencyContactPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
contact_phone: [ |
|||
{ required: true, message: t('contactPhonePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
note: [ |
|||
{ required: true, message: t('notePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
status: [ |
|||
{ required: true, message: t('statusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editStudent : addStudent |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let genderList = ref([]) |
|||
const genderDictList = async () => { |
|||
genderList.value = await (await useDictionary('gender')).data.dictionary |
|||
} |
|||
genderDictList(); |
|||
watch(() => genderList.value, () => { formData.gender = genderList.value[0].value }) |
|||
let statusList = ref([]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('xy_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
watch(() => statusList.value, () => { formData.status = statusList.value[0].value }) |
|||
|
|||
|
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const classIdList = ref([] as any[]) |
|||
const setClassIdList = async () => { |
|||
classIdList.value = await (await getWithClassGradeList({})).data |
|||
} |
|||
setClassIdList() |
|||
const userIdList = ref([] as any[]) |
|||
const setUserIdList = async () => { |
|||
userIdList.value = await (await getWithMemberList({})).data |
|||
} |
|||
setUserIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getStudentInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
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> |
|||
@ -0,0 +1,240 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addStudent') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="studentTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="w-[280px]" v-model="studentTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('name')" prop="name"> |
|||
<el-input v-model="studentTable.searchParam.name" :placeholder="t('namePlaceholder')" /> |
|||
</el-form-item> |
|||
<el-form-item :label="t('emergencyContact')" prop="emergency_contact"> |
|||
<el-input v-model="studentTable.searchParam.emergency_contact" :placeholder="t('emergencyContactPlaceholder')" /> |
|||
</el-form-item> |
|||
<el-form-item :label="t('contactPhone')" prop="contact_phone"> |
|||
<el-input v-model="studentTable.searchParam.contact_phone" :placeholder="t('contactPhonePlaceholder')" /> |
|||
</el-form-item> |
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="studentTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadStudentList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="studentTable.data" size="large" v-loading="studentTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !studentTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="class_id_name" :label="t('classId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="user_id_name" :label="t('userId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="name" :label="t('name')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('gender')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in genderList"> |
|||
<div v-if="item.value == row.gender">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="age" :label="t('age')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="emergency_contact" :label="t('emergencyContact')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="contact_phone" :label="t('contactPhone')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="note" :label="t('note')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('status')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in statusList"> |
|||
<div v-if="item.value == row.status">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<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)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="studentTable.page" v-model:page-size="studentTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="studentTable.total" |
|||
@size-change="loadStudentList()" @current-change="loadStudentList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editStudentDialog" @complete="loadStudentList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getStudentList, deleteStudent, getWithCampusList, getWithClassGradeList, getWithMemberList } from '@/app/api/student' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/student/components/student-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let studentTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"campus_id":"", |
|||
"name":"", |
|||
"emergency_contact":"", |
|||
"contact_phone":"", |
|||
"created_at":[] |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const genderList = ref([] as any[]) |
|||
const genderDictList = async () => { |
|||
genderList.value = await (await useDictionary('gender')).data.dictionary |
|||
} |
|||
genderDictList(); |
|||
const statusList = ref([] as any[]) |
|||
const statusDictList = async () => { |
|||
statusList.value = await (await useDictionary('xy_status')).data.dictionary |
|||
} |
|||
statusDictList(); |
|||
|
|||
/** |
|||
* 获取学员列表 |
|||
*/ |
|||
const loadStudentList = (page: number = 1) => { |
|||
studentTable.loading = true |
|||
studentTable.page = page |
|||
|
|||
getStudentList({ |
|||
page: studentTable.page, |
|||
limit: studentTable.limit, |
|||
...studentTable.searchParam |
|||
}).then(res => { |
|||
studentTable.loading = false |
|||
studentTable.data = res.data.data |
|||
studentTable.total = res.data.total |
|||
}).catch(() => { |
|||
studentTable.loading = false |
|||
}) |
|||
} |
|||
loadStudentList() |
|||
|
|||
const editStudentDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加学员 |
|||
*/ |
|||
const addEvent = () => { |
|||
editStudentDialog.value.setFormData() |
|||
editStudentDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑学员 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editStudentDialog.value.setFormData(data) |
|||
editStudentDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除学员 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('studentDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteStudent(id).then(() => { |
|||
loadStudentList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const classIdList = ref([]) |
|||
const setClassIdList = async () => { |
|||
classIdList.value = await (await getWithClassGradeList({})).data |
|||
} |
|||
setClassIdList() |
|||
const userIdList = ref([]) |
|||
const setUserIdList = async () => { |
|||
userIdList.value = await (await getWithMemberList({})).data |
|||
} |
|||
setUserIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadStudentList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<?php |
|||
// +---------------------------------------------------------------------- |
|||
// | Niucloud-admin 企业快速开发的多应用管理平台 |
|||
// +---------------------------------------------------------------------- |
|||
// | 官方网址:https://www.niucloud.com |
|||
// +---------------------------------------------------------------------- |
|||
// | niucloud团队 版权所有 开源版本可自由商用 |
|||
// +---------------------------------------------------------------------- |
|||
// | Author: Niucloud Team |
|||
// +---------------------------------------------------------------------- |
|||
|
|||
namespace app\adminapi\controller\student; |
|||
|
|||
use core\base\BaseAdminController; |
|||
use app\service\admin\student\StudentService; |
|||
|
|||
|
|||
/** |
|||
* 学员控制器 |
|||
* Class Student |
|||
* @package app\adminapi\controller\student |
|||
*/ |
|||
class Student extends BaseAdminController |
|||
{ |
|||
/** |
|||
* 获取学员列表 |
|||
* @return \think\Response |
|||
*/ |
|||
public function lists(){ |
|||
$data = $this->request->params([ |
|||
["campus_id",""], |
|||
["name",""], |
|||
["emergency_contact",""], |
|||
["contact_phone",""], |
|||
["created_at",["",""]] |
|||
]); |
|||
return success((new StudentService())->getPage($data)); |
|||
} |
|||
|
|||
/** |
|||
* 学员详情 |
|||
* @param int $id |
|||
* @return \think\Response |
|||
*/ |
|||
public function info(int $id){ |
|||
return success((new StudentService())->getInfo($id)); |
|||
} |
|||
|
|||
/** |
|||
* 添加学员 |
|||
* @return \think\Response |
|||
*/ |
|||
public function add(){ |
|||
$data = $this->request->params([ |
|||
["campus_id",0], |
|||
["class_id",0], |
|||
["user_id",0], |
|||
["name",""], |
|||
["gender",0], |
|||
["age",0.00], |
|||
["birthday","2025-05-23 17:31:39"], |
|||
["emergency_contact",""], |
|||
["contact_phone",""], |
|||
["note",""], |
|||
["status",0], |
|||
|
|||
]); |
|||
$this->validate($data, 'app\validate\student\Student.add'); |
|||
$id = (new StudentService())->add($data); |
|||
return success('ADD_SUCCESS', ['id' => $id]); |
|||
} |
|||
|
|||
/** |
|||
* 学员编辑 |
|||
* @param $id 学员id |
|||
* @return \think\Response |
|||
*/ |
|||
public function edit(int $id){ |
|||
$data = $this->request->params([ |
|||
["campus_id",0], |
|||
["class_id",0], |
|||
["user_id",0], |
|||
["name",""], |
|||
["gender",0], |
|||
["age",0.00], |
|||
["birthday","2025-05-23 17:31:39"], |
|||
["emergency_contact",""], |
|||
["contact_phone",""], |
|||
["note",""], |
|||
["status",0], |
|||
|
|||
]); |
|||
$this->validate($data, 'app\validate\student\Student.edit'); |
|||
(new StudentService())->edit($id, $data); |
|||
return success('EDIT_SUCCESS'); |
|||
} |
|||
|
|||
/** |
|||
* 学员删除 |
|||
* @param $id 学员id |
|||
* @return \think\Response |
|||
*/ |
|||
public function del(int $id){ |
|||
(new StudentService())->del($id); |
|||
return success('DELETE_SUCCESS'); |
|||
} |
|||
|
|||
|
|||
public function getCampusAll(){ |
|||
return success(( new StudentService())->getCampusAll()); |
|||
} |
|||
|
|||
public function getClassGradeAll(){ |
|||
return success(( new StudentService())->getClassGradeAll()); |
|||
} |
|||
|
|||
public function getMemberAll(){ |
|||
return success(( new StudentService())->getMemberAll()); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
<?php |
|||
// +---------------------------------------------------------------------- |
|||
// | Niucloud-admin 企业快速开发的多应用管理平台 |
|||
// +---------------------------------------------------------------------- |
|||
// | 官方网址:https://www.niucloud.com |
|||
// +---------------------------------------------------------------------- |
|||
// | niucloud团队 版权所有 开源版本可自由商用 |
|||
// +---------------------------------------------------------------------- |
|||
// | Author: Niucloud Team |
|||
// +---------------------------------------------------------------------- |
|||
|
|||
use think\facade\Route; |
|||
|
|||
use app\adminapi\middleware\AdminCheckRole; |
|||
use app\adminapi\middleware\AdminCheckToken; |
|||
use app\adminapi\middleware\AdminLog; |
|||
|
|||
// USER_CODE_BEGIN -- student |
|||
|
|||
Route::group('student', function () { |
|||
|
|||
//学员列表 |
|||
Route::get('student', 'student.Student/lists'); |
|||
//学员详情 |
|||
Route::get('student/:id', 'student.Student/info'); |
|||
//添加学员 |
|||
Route::post('student', 'student.Student/add'); |
|||
//编辑学员 |
|||
Route::put('student/:id', 'student.Student/edit'); |
|||
//删除学员 |
|||
Route::delete('student/:id', 'student.Student/del'); |
|||
|
|||
Route::get('campus_all','student.Student/getCampusAll'); |
|||
|
|||
Route::get('class_grade_all','student.Student/getClassGradeAll'); |
|||
|
|||
Route::get('member_all','student.Student/getMemberAll'); |
|||
|
|||
})->middleware([ |
|||
AdminCheckToken::class, |
|||
AdminCheckRole::class, |
|||
AdminLog::class |
|||
]); |
|||
// USER_CODE_END -- student |
|||
@ -0,0 +1,117 @@ |
|||
<?php |
|||
// +---------------------------------------------------------------------- |
|||
// | Niucloud-admin 企业快速开发的多应用管理平台 |
|||
// +---------------------------------------------------------------------- |
|||
// | 官方网址:https://www.niucloud.com |
|||
// +---------------------------------------------------------------------- |
|||
// | niucloud团队 版权所有 开源版本可自由商用 |
|||
// +---------------------------------------------------------------------- |
|||
// | Author: Niucloud Team |
|||
// +---------------------------------------------------------------------- |
|||
|
|||
namespace app\service\admin\student; |
|||
|
|||
use app\model\student\Student; |
|||
use app\model\campus\Campus; |
|||
use app\model\class_grade\ClassGrade; |
|||
use app\model\member\Member; |
|||
|
|||
use core\base\BaseAdminService; |
|||
|
|||
|
|||
/** |
|||
* 学员服务层 |
|||
* Class StudentService |
|||
* @package app\service\admin\student |
|||
*/ |
|||
class StudentService extends BaseAdminService |
|||
{ |
|||
public function __construct() |
|||
{ |
|||
parent::__construct(); |
|||
$this->model = new Student(); |
|||
} |
|||
|
|||
/** |
|||
* 获取学员列表 |
|||
* @param array $where |
|||
* @return array |
|||
*/ |
|||
public function getPage(array $where = []) |
|||
{ |
|||
$field = 'id,campus_id,class_id,user_id,name,gender,age,birthday,emergency_contact,contact_phone,note,status,created_at,updated_at,deleted_at'; |
|||
$order = 'id asc'; |
|||
|
|||
$search_model = $this->model->withSearch(["campus_id","name","emergency_contact","contact_phone","created_at"], $where)->with(['campus','classGrade','member'])->field($field)->order($order); |
|||
$list = $this->pageQuery($search_model); |
|||
return $list; |
|||
} |
|||
|
|||
/** |
|||
* 获取学员信息 |
|||
* @param int $id |
|||
* @return array |
|||
*/ |
|||
public function getInfo(int $id) |
|||
{ |
|||
$field = 'id,campus_id,class_id,user_id,name,gender,age,birthday,emergency_contact,contact_phone,note,status,created_at,updated_at,deleted_at'; |
|||
|
|||
$info = $this->model->field($field)->where([['id', "=", $id]])->with(['campus','classGrade','member'])->findOrEmpty()->toArray(); |
|||
return $info; |
|||
} |
|||
|
|||
/** |
|||
* 添加学员 |
|||
* @param array $data |
|||
* @return mixed |
|||
*/ |
|||
public function add(array $data) |
|||
{ |
|||
$res = $this->model->create($data); |
|||
return $res->id; |
|||
|
|||
} |
|||
|
|||
/** |
|||
* 学员编辑 |
|||
* @param int $id |
|||
* @param array $data |
|||
* @return bool |
|||
*/ |
|||
public function edit(int $id, array $data) |
|||
{ |
|||
|
|||
$this->model->where([['id', '=', $id]])->update($data); |
|||
return true; |
|||
} |
|||
|
|||
/** |
|||
* 删除学员 |
|||
* @param int $id |
|||
* @return bool |
|||
*/ |
|||
public function del(int $id) |
|||
{ |
|||
$model = $this->model->where([['id', '=', $id]])->find(); |
|||
$res = $model->delete(); |
|||
return $res; |
|||
} |
|||
|
|||
|
|||
public function getCampusAll(){ |
|||
$campusModel = new Campus(); |
|||
return $campusModel->select()->toArray(); |
|||
} |
|||
|
|||
public function getClassGradeAll(){ |
|||
$classGradeModel = new ClassGrade(); |
|||
return $classGradeModel->select()->toArray(); |
|||
} |
|||
|
|||
public function getMemberAll(){ |
|||
$memberModel = new Member(); |
|||
return $memberModel->select()->toArray(); |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
<?php |
|||
// +---------------------------------------------------------------------- |
|||
// | Niucloud-admin 企业快速开发的多应用管理平台 |
|||
// +---------------------------------------------------------------------- |
|||
// | 官方网址:https://www.niucloud.com |
|||
// +---------------------------------------------------------------------- |
|||
// | niucloud团队 版权所有 开源版本可自由商用 |
|||
// +---------------------------------------------------------------------- |
|||
// | Author: Niucloud Team |
|||
// +---------------------------------------------------------------------- |
|||
|
|||
namespace app\validate\student; |
|||
use core\base\BaseValidate; |
|||
/** |
|||
* 学员验证器 |
|||
* Class Student |
|||
* @package addon\app\validate\student |
|||
*/ |
|||
class Student extends BaseValidate |
|||
{ |
|||
|
|||
protected $rule = [ |
|||
'class_id' => 'require', |
|||
'user_id' => 'require', |
|||
'name' => 'require', |
|||
'gender' => 'require', |
|||
'status' => 'require', |
|||
]; |
|||
|
|||
protected $message = [ |
|||
'class_id.require' => ['common_validate.require', ['class_id']], |
|||
'user_id.require' => ['common_validate.require', ['user_id']], |
|||
'name.require' => ['common_validate.require', ['name']], |
|||
'gender.require' => ['common_validate.require', ['gender']], |
|||
'status.require' => ['common_validate.require', ['status']], |
|||
]; |
|||
|
|||
protected $scene = [ |
|||
"add" => ['campus_id', 'class_id', 'user_id', 'name', 'gender', 'age', 'birthday', 'emergency_contact', 'contact_phone', 'note', 'status'], |
|||
"edit" => ['campus_id', 'class_id', 'user_id', 'name', 'gender', 'age', 'birthday', 'emergency_contact', 'contact_phone', 'note', 'status'] |
|||
]; |
|||
|
|||
} |
|||
Loading…
Reference in new issue