forked from xxhjsb/hbt-prevention-ui
615 lines
18 KiB
Vue
615 lines
18 KiB
Vue
<script lang="ts">
|
||
import { Component } from 'vue-property-decorator';
|
||
import template from './common.component.html'
|
||
import BaseRecordComponent from "hbt-common/components/common/baseRecord.component.vue";
|
||
import FormComponent from "hbt-common/components/common/form.component.vue";
|
||
import TableComponent from "hbt-common/components/common/table.component.vue";
|
||
import TrainRecordsService from "@/service/trainRecords.service";
|
||
import FormOption from "hbt-common/models/formOptions";
|
||
import BtnOption from "hbt-common/models/btnOptions";
|
||
|
||
@Component({
|
||
template,
|
||
components: {
|
||
FormComponent,
|
||
TableComponent,
|
||
},
|
||
})
|
||
export default class TrainRecords extends BaseRecordComponent<any> {
|
||
public tableService = new TrainRecordsService();
|
||
|
||
public params = {
|
||
areaId: null,
|
||
unitId: null,
|
||
} as any;
|
||
|
||
public showProtable = false;
|
||
|
||
public tableColumn = [] as any;
|
||
|
||
public subTableColumn = [] as any;
|
||
|
||
public showUpdate = false;
|
||
|
||
public updateParams = {
|
||
members: []
|
||
} as any;
|
||
|
||
public subUpdateParams = {} as any;
|
||
|
||
public selectData = [];
|
||
|
||
public subSelectData = [];
|
||
|
||
public isReadonly = false;
|
||
|
||
public subIsReadonly = false;
|
||
|
||
public subTitle = '参加人员清单'
|
||
|
||
public subShowUpdate = false;
|
||
|
||
public currentDetailsTableData = { datas: [] } as any;
|
||
|
||
public showDetailsTable = false;
|
||
|
||
public showFileModal = false;
|
||
|
||
public showFileList = [] as any;
|
||
|
||
public fileList = [] as any;
|
||
|
||
public showFile = false;
|
||
public currentUrl = null;
|
||
|
||
public typeList = [{
|
||
name: '线上',
|
||
value: 1
|
||
}, {
|
||
name: '线下',
|
||
value: 2
|
||
},]
|
||
|
||
public formActions = [{
|
||
name: "查询",
|
||
value: "search",
|
||
icon: "el-icon-search",
|
||
type: "primary"
|
||
}, {
|
||
name: "清空",
|
||
icon: "el-icon-tickets",
|
||
value: "reset"
|
||
}];
|
||
|
||
public tableActions = [{
|
||
name: "添加",
|
||
value: "add",
|
||
icon: "el-icon-plus",
|
||
type: "primary"
|
||
}, {
|
||
name: "批量删除",
|
||
value: "delete",
|
||
plain: true,
|
||
icon: "el-icon-delete",
|
||
type: "danger"
|
||
}];
|
||
|
||
public footerActions = [{
|
||
name: "选择全部",
|
||
value: "selectAll",
|
||
type: "primary"
|
||
}, {
|
||
name: "反向选择",
|
||
value: "reverse"
|
||
}];
|
||
|
||
public formOptions: FormOption<BtnOption>[] = [{
|
||
name: "培训名称",
|
||
key: "name",
|
||
type: "text",
|
||
}, {
|
||
name: "培训类型",
|
||
key: "type",
|
||
type: "select",
|
||
datas: this.typeList
|
||
}, {
|
||
name: "培训时间",
|
||
key: "startTime",
|
||
type: "date",
|
||
format: "yyyy-MM-dd",
|
||
}];
|
||
|
||
public subActions = [{
|
||
name: "取消",
|
||
value: "cancel"
|
||
}];
|
||
|
||
public updateActions = [] as any;
|
||
|
||
public subUpdateActions = [] as any;
|
||
|
||
public updateOptions: FormOption<BtnOption>[] = [] as any;
|
||
public buildUpdateForm() {
|
||
this.updateOptions = [{
|
||
name: "培训名称",
|
||
type: "text",
|
||
key: "name",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
},
|
||
{
|
||
name: "培训类型",
|
||
type: "select",
|
||
key: "type",
|
||
format: "typeName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
datas: this.typeList
|
||
},
|
||
{
|
||
name: "培训方式",
|
||
type: "select",
|
||
key: "mode",
|
||
format: "modeName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
datas: this.$store.state.prevention_training_methods
|
||
},
|
||
{
|
||
name: "培训层级",
|
||
type: "select",
|
||
key: "level",
|
||
format: "levelName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
datas: this.$store.state.prevention_training_level
|
||
},
|
||
{
|
||
name: "培训时长/h",
|
||
type: "number",
|
||
key: "duration",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
},
|
||
{
|
||
name: "培训时间",
|
||
type: "date",
|
||
subType: "daterange",
|
||
format: "yyyy-MM-dd",
|
||
key: "trainingTime",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
},
|
||
{
|
||
name: "讲师姓名",
|
||
type: "select",
|
||
key: "lecturerId",
|
||
format: "lecturerName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
datas: this.$store.state.userList,
|
||
},
|
||
{
|
||
name: "课程主题",
|
||
type: "text",
|
||
key: "subject",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
},
|
||
]
|
||
this.updateActions = [{
|
||
name: "取消",
|
||
value: "cancel"
|
||
}, {
|
||
name: "保存并继续添加",
|
||
value: "saveAndContinue",
|
||
type: "primary",
|
||
hide: this.updateParams.id
|
||
}, {
|
||
name: "保存",
|
||
value: "save",
|
||
type: "primary"
|
||
}];
|
||
}
|
||
|
||
public subUpdateOptions: FormOption<BtnOption>[] = []
|
||
public buildSubForm() {
|
||
this.subUpdateOptions = [{
|
||
name: "姓名",
|
||
type: "select",
|
||
key: "userId",
|
||
format: "userName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
datas: this.$store.state.userList,
|
||
}, {
|
||
name: "工号",
|
||
type: "text",
|
||
key: "number",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
}, {
|
||
name: "联系方式",
|
||
type: "text",
|
||
key: "phone",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
rules: [
|
||
{ pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', }
|
||
]
|
||
}, {
|
||
name: "培训课程名称",
|
||
type: "text",
|
||
key: "lessonName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
}, {
|
||
name: "是否考试",
|
||
type: "select",
|
||
key: "examStatus",
|
||
format: "examStatusName",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
showError: false,
|
||
datas: [{
|
||
name: '已参加',
|
||
value: 1
|
||
}, {
|
||
name: '未参加',
|
||
value: 0
|
||
}]
|
||
}, {
|
||
name: "得分",
|
||
type: "number",
|
||
key: "score",
|
||
require: true,
|
||
width: "calc(50% - 20px)",
|
||
controls: false,
|
||
showError: false,
|
||
// max: 100,
|
||
// min: 0,
|
||
rules: [
|
||
{ pattern: /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/, message: '在0~100之间，保留两位小数', }
|
||
],
|
||
hide: !(this.subUpdateParams.examStatus === 1)
|
||
},]
|
||
this.subUpdateActions = [{
|
||
name: "取消",
|
||
value: "cancel"
|
||
}, {
|
||
name: "保存并继续添加",
|
||
value: "saveAndContinue",
|
||
type: "primary",
|
||
hide: this.subUpdateParams.index
|
||
}, {
|
||
name: "保存",
|
||
value: "save",
|
||
type: "primary"
|
||
}];
|
||
}
|
||
|
||
|
||
created() {
|
||
//
|
||
}
|
||
|
||
|
||
public buildTable() {
|
||
this.tableColumn.push({ name: '培训名称', key: "name" });
|
||
this.tableColumn.push({
|
||
name: '培训类型', key: "type", render: (data) => {
|
||
if (data.type === 1) {
|
||
return '线上'
|
||
} else if (data.type === 2) {
|
||
return '线下'
|
||
}
|
||
}
|
||
});
|
||
this.tableColumn.push({
|
||
name: '培训时间', key: "startTime", render: (data) => {
|
||
return data.startTime + (data.endTime ? '~' + data.endTime : "")
|
||
}
|
||
});
|
||
this.tableColumn.push({
|
||
name: '培训方式', key: "mode", render: (data) => {
|
||
if (data.mode) {
|
||
return this.$store.getters.prevention_training_methods_map[data.mode]
|
||
}
|
||
}
|
||
});
|
||
this.tableColumn.push({
|
||
name: '培训层级', key: "level", render: (data) => {
|
||
if (data.level) {
|
||
return this.$store.getters.prevention_training_level_map[data.level]
|
||
}
|
||
}
|
||
});
|
||
this.tableColumn.push({ name: '参加人数', key: "memberNumber", });
|
||
this.tableColumn.push({ name: '讲师姓名', key: "lecturerName" });
|
||
|
||
|
||
this.subTableColumn.push({ name: '序号', key: "index", width: "80px" });
|
||
this.subTableColumn.push({ name: '姓名', key: "userName", width: "80px" });
|
||
this.subTableColumn.push({ name: '工号', key: "number", });
|
||
this.subTableColumn.push({ name: '联系方式', key: "phone", });
|
||
this.subTableColumn.push({ name: '培训课程名称', key: "lessonName" });
|
||
this.subTableColumn.push({
|
||
name: '是否考试', key: "examStatus", render: (data) => {
|
||
if (data.examStatus === 0) {
|
||
return '未参加'
|
||
} else if (data.examStatus === 1) {
|
||
return '已参加'
|
||
}
|
||
}
|
||
});
|
||
this.subTableColumn.push({ name: '得分', key: "score", });
|
||
}
|
||
|
||
public changes(data, item) {
|
||
if (item && item.key === "trainingTime") {
|
||
if (data && data.length) {
|
||
this.updateParams.startTime = data[0]
|
||
this.updateParams.endTime = data[1]
|
||
} else {
|
||
this.updateParams.startTime = null
|
||
this.updateParams.endTime = null
|
||
}
|
||
}
|
||
|
||
if (item && item.key === "examStatus") {
|
||
if (data === 0) {
|
||
this.subUpdateParams.score = null
|
||
}
|
||
this.buildSubForm()
|
||
}
|
||
//培训时长格式化
|
||
this.durationChange(data, item);
|
||
//得分格式化
|
||
this.scoreFormat(data, item);
|
||
}
|
||
/**
|
||
* 培训时长格式化，保留一位小数
|
||
* @param data
|
||
* @param item
|
||
*/
|
||
public durationChange(data: any, item: any) {
|
||
if (item && item.key === 'duration') {
|
||
this.$set(this.updateParams, item.key, null);
|
||
setTimeout(() => {
|
||
this.$set(this.updateParams, item.key, +data.toFixed(1))
|
||
}, 0)
|
||
}
|
||
}
|
||
public scoreFormat(data: any, item: any) {
|
||
if (item && item.key === 'score') {
|
||
this.updateParams.score = null;
|
||
setTimeout(() => {
|
||
this.$set(this.subUpdateParams, item.key, +data.toFixed(2))
|
||
}, 0)
|
||
}
|
||
}
|
||
|
||
public callback(data, type) {
|
||
if (type) {
|
||
if (type === 'pageSize' || type === 'pageNum') {
|
||
this.params[type] = data;
|
||
}
|
||
this.getTableData();
|
||
return
|
||
}
|
||
// 查询
|
||
if (data.value === "search") {
|
||
this.getTableData()
|
||
// 重置
|
||
} else if (data.value === "reset") {
|
||
this.reset()
|
||
// 反选
|
||
} else if (data.value === "reverse") {
|
||
this.toggleAll()
|
||
// 全选
|
||
} else if (data.value === "selectAll") {
|
||
this.selectAll()
|
||
} else if (data.value === "delete") {
|
||
this.deleteData(this.selectData.map((item: any) => item.id))
|
||
} else if (data.value === 'add') {
|
||
this.updateParams = { members: [] } as any;
|
||
this.isReadonly = false;
|
||
this.subIsReadonly = false;
|
||
this.buildUpdateForm()
|
||
this.showUpdate = true;
|
||
|
||
}
|
||
}
|
||
// 分页数据
|
||
public getTableData() {
|
||
this.tableService.selectByPage(this.params).then(res => {
|
||
this.tableData = res.data as any;
|
||
})
|
||
}
|
||
// 重置数据
|
||
public reset() {
|
||
this.params = {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
} as any;
|
||
this.getTableData()
|
||
}
|
||
|
||
public showUpdateModel(id) {
|
||
this.showUpdate = true
|
||
}
|
||
|
||
public handleClose() {
|
||
this.showUpdate = false;
|
||
}
|
||
|
||
public handleTableClose() {
|
||
//
|
||
}
|
||
|
||
public toggleAll() {
|
||
|
||
this.tableData.datas.forEach((item, index) => {
|
||
(this.$refs.multipleTable as any).toggleRowSelection(item);
|
||
})
|
||
}
|
||
public selectAll() {
|
||
if (!this.selectData.length) {
|
||
this.toggleAll()
|
||
} else {
|
||
this.tableData.datas.forEach((item, index) => {
|
||
const find = this.selectData.find((data: any) => data.id === item.id);
|
||
if (!find) {
|
||
(this.$refs.multipleTable as any).toggleRowSelection(item);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
public handleSelectionChange(data) {
|
||
this.selectData = data;
|
||
}
|
||
|
||
public handleSubSelectionChange(data) {
|
||
this.subSelectData = data;
|
||
}
|
||
|
||
public showModal(row, isReadonly) {
|
||
if (isReadonly) {
|
||
this.isReadonly = true
|
||
this.subIsReadonly = true
|
||
} else {
|
||
this.isReadonly = false
|
||
this.subIsReadonly = false
|
||
}
|
||
|
||
this.tableService.getListDetail({ id: row.id }).then((res: any) => {
|
||
if (res.code === 200) {
|
||
this.updateParams = Object.assign({
|
||
typeName: res.data.type === 1 ? '线上' : res.data.type === 2 ? '线下' : '',
|
||
modeName: this.$store.getters.prevention_training_methods_map[res.data.mode],
|
||
levelName: this.$store.getters.prevention_training_level_map[res.data.level],
|
||
trainingTime: isReadonly ? res.data.startTime + "~" + res.data.endTime : [res.data.startTime, res.data.endTime]
|
||
}, res.data)
|
||
this.updateParams.members.forEach((item, index) => {
|
||
item.index = index + 1;
|
||
});
|
||
|
||
this.buildUpdateForm()
|
||
this.showUpdate = true
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
public subCallback(data) {
|
||
if (data.value === "add") {
|
||
this.subIsReadonly = false
|
||
this.subUpdateParams = {} as any;
|
||
this.subShowUpdate = true
|
||
this.buildSubForm()
|
||
} else if (data.value === "cancel") {
|
||
this.showUpdate = false
|
||
} else if (data && data.value.indexOf("save") >= 0) {
|
||
this.doSave(data.value !== "save")
|
||
} else if (data && data.value === 'delete') {
|
||
// 批量删除步骤
|
||
this.deleteSubData(this.subSelectData.map((itm: any) => itm.index - 1))
|
||
}
|
||
}
|
||
|
||
|
||
public doSave(goOn?) {
|
||
// 新增
|
||
this.updateParams.lecturerName = this.$store.getters.user_map[this.updateParams.lecturerId];
|
||
this.updateParams.memberNumber = this.updateParams.members.length
|
||
this.tableService.addOrUpdate(this.updateParams, this.updateParams.id ? false : true).then((res) => {
|
||
this.$message.success(!this.updateParams.id ? "新增成功！" : "编辑成功！");
|
||
this.updateParams = {
|
||
members: [],
|
||
} as any
|
||
this.showUpdate = !!goOn;
|
||
this.getTableData();
|
||
})
|
||
}
|
||
|
||
|
||
public triCallback(data) {
|
||
if (data.value === "cancel") {
|
||
this.subShowUpdate = false
|
||
} else if (data && data.value.indexOf("save") >= 0) {
|
||
this.doSubSave(data.value !== "save")
|
||
}
|
||
}
|
||
|
||
public doSubSave(goOn) {
|
||
// 如果是新增步骤
|
||
if (this.subShowUpdate) {
|
||
// 新增
|
||
this.subUpdateParams.userName = this.$store.getters.user_map[this.subUpdateParams.userId]
|
||
if (!this.subUpdateParams.index) {
|
||
this.subUpdateParams.index = this.updateParams.members.length + 1;
|
||
this.updateParams.members.push(this.subUpdateParams);
|
||
} else {
|
||
this.updateParams.members.splice(this.updateParams.members.findIndex(item => item.index === this.subUpdateParams.index), 1, this.subUpdateParams)
|
||
}
|
||
this.subUpdateParams = {} as any;
|
||
const option = this.subUpdateOptions.find(item => item.key === "score") as any;
|
||
option.hide = true
|
||
this.subShowUpdate = !!goOn;
|
||
return
|
||
}
|
||
}
|
||
|
||
|
||
//查看或者修改
|
||
public showSubModal(row, isReadonly) {
|
||
if (isReadonly) {
|
||
this.subIsReadonly = true
|
||
this.subUpdateParams = JSON.parse(JSON.stringify(row))
|
||
this.subUpdateParams.examStatusName = row.examStatus === 1 ? '已参加' : '未参加'
|
||
} else {
|
||
this.subIsReadonly = false
|
||
this.subUpdateParams = JSON.parse(JSON.stringify(row))
|
||
}
|
||
this.subShowUpdate = true
|
||
this.buildSubForm()
|
||
}
|
||
|
||
//删除成员
|
||
public deleteSubData(indexs) {
|
||
this.$confirm('确认删除所选数据', '确认数据', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
for (let i = this.updateParams.members.length - 1; i >= 0; i--) {
|
||
if (indexs.includes(i)) {
|
||
this.updateParams.members.splice(i, 1)
|
||
}
|
||
}
|
||
this.updateParams.members.forEach((item, index) => {
|
||
item.index = index + 1;
|
||
});
|
||
}).catch(() => {
|
||
//
|
||
});
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped src="../common.component.scss"></style> |