7 changed files with 898 additions and 26 deletions
@ -0,0 +1,550 @@ |
|||||
|
<template> |
||||
|
<div class="pa-3 white fill-height d-flex flex-column"> |
||||
|
<!-- 搜索 --> |
||||
|
<div class="d-flex flex-wrap pb-3"> |
||||
|
<div> |
||||
|
<span class="mr-4">导师姓名:</span> |
||||
|
<a-input placeholder="导师姓名" style="width: 150px" v-model="teacherName" /> |
||||
|
<span class="ml-4 mr-4">导师分类:</span> |
||||
|
<a-select mode="multiple" style="width: 400px" @change="typeChange($event, 0)" placeholder="导师分类"> |
||||
|
<a-select-option v-for="item in typeList" :key="item.id" :value="item.id"> |
||||
|
{{ item.categoryName }} |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
|
||||
|
<a-button @click="selModelSearch" class="ml-3" type="primary">搜索</a-button> |
||||
|
</div> |
||||
|
<div class="flex-1"></div> |
||||
|
<a-button class="editable-add-btn" @click="visible = true" style="margin-top: 1px" type="primary">增加</a-button> |
||||
|
</div> |
||||
|
<!-- 添加表单 --> |
||||
|
<a-modal :mask-closable="false" destroy-on-close title="添加导师" v-model="visible" width="700px" @ok="addTeacherData"> |
||||
|
<a-form :form="form"> |
||||
|
<!-- 公司名称 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称"> |
||||
|
<a-input placeholder="所在公司名称" v-model="addData.company" /> |
||||
|
</a-form-item> |
||||
|
<!-- 职务/职称 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="职务/职称"> |
||||
|
<a-input placeholder="职务/职称" v-model="addData.duties" /> |
||||
|
</a-form-item> |
||||
|
<!-- 导师姓名 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师姓名"> |
||||
|
<a-input placeholder="导师姓名" v-model="addData.name" /> |
||||
|
</a-form-item> |
||||
|
<!-- 导师性别 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师性别"> |
||||
|
<a-radio-group :default-value="0" @change="changeAddSex"> |
||||
|
<a-radio :value="0"> 女 </a-radio> |
||||
|
<a-radio :value="1"> 男 </a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
<!-- 导师照片 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师照片"> |
||||
|
<a-upload :action="upload" :before-upload="beforeUpload" @change="handleChange($event, 1)" list-type="picture" name="files"> |
||||
|
<a-button v-show="fileList.length - 0 === 0"> <a-icon type="upload" />选择图片 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
<!-- 导师简介 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师简介"> |
||||
|
<a-textarea style="height: 100px" placeholder="导师简介" v-model="addData.intro" /> |
||||
|
</a-form-item> |
||||
|
<!-- 服务案例 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="服务案例"> |
||||
|
<a-textarea style="height: 100px" placeholder="服务案例" v-model="addData.serviceCase" /> |
||||
|
</a-form-item> |
||||
|
<!-- 导师分类 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师分类"> |
||||
|
<a-select mode="multiple" style="width: 100%" @change="typeChange($event, 1)" placeholder="导师分类"> |
||||
|
<a-select-option v-for="item in typeList" :key="item.id" :value="item.id"> |
||||
|
{{ item.categoryName }} |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-item> |
||||
|
<!-- 导师聘书 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师聘书"> |
||||
|
<a-upload :action="upload" :before-upload="beforeUpload1" @change="handleChange($event, 2)" list-type="picture" name="files"> |
||||
|
<a-button v-show="fileList1.length - 0 === 0"> <a-icon type="upload" />选择图片 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
<!-- 导师简历 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师简历"> |
||||
|
<a-upload :action="upload" :before-upload="beforeUpload2" @change="handleChange($event, 3)" list-type="picture" name="files"> |
||||
|
<a-button v-show="fileList2.length - 0 === 0"> <a-icon type="upload" />选择图片 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
<!-- 表格 --> |
||||
|
<div class="main flex-1"> |
||||
|
<div style="width: 100%" v-if="lists.list && lists.list.length > 0"> |
||||
|
<a-table |
||||
|
:columns="columns" |
||||
|
:data-source="lists.list" |
||||
|
:pagination="pagination" |
||||
|
:row-key="record => record.id" |
||||
|
@change="handleTableChange" |
||||
|
:scroll="{ y: height }" |
||||
|
bordered |
||||
|
class="white" |
||||
|
> |
||||
|
<template slot="id" slot-scope="text, record, index"> |
||||
|
<span>{{ index + 1 }}</span> |
||||
|
</template> |
||||
|
|
||||
|
<template slot="sex" slot-scope="text, record"> |
||||
|
<span v-if="record.sex === 0">女</span> |
||||
|
<span v-else>男</span> |
||||
|
</template> |
||||
|
<template slot="teacherPhoto" slot-scope="text, record"> |
||||
|
<img style="width: 100%" v-if="record.teacherPhoto" :src="record.teacherPhoto" /> |
||||
|
</template> |
||||
|
<template slot="resume" slot-scope="text, record"> |
||||
|
<img style="width: 100%" v-if="record.resume" :src="record.resume" /> |
||||
|
</template> |
||||
|
<template slot="offer" slot-scope="text, record"> |
||||
|
<img style="width: 100%" v-if="record.offer" :src="record.offer" /> |
||||
|
</template> |
||||
|
|
||||
|
<template slot="edit" slot-scope="text, record"> |
||||
|
<a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" /> |
||||
|
<a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?" v-if="lists.list.length"> |
||||
|
<a-icon class="ml-4 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" /> |
||||
|
</a-popconfirm> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
<a-empty v-else /> |
||||
|
</div> |
||||
|
<!-- 修改表单 --> |
||||
|
<a-modal :mask-closable="false" destroy-on-close title="修改" v-model="visible1" width="700px" @ok="editTeacherData"> |
||||
|
<a-form :form="form"> |
||||
|
<!-- 公司名称 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称"> |
||||
|
<a-input placeholder="所在公司名称" v-model="editData.company" /> |
||||
|
</a-form-item> |
||||
|
<!-- 职务/职称 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="职务/职称"> |
||||
|
<a-input placeholder="职务/职称" v-model="editData.duties" /> |
||||
|
</a-form-item> |
||||
|
<!-- 导师姓名 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师姓名"> |
||||
|
<a-input placeholder="导师姓名" v-model="editData.name" /> |
||||
|
</a-form-item> |
||||
|
<!-- 导师性别 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师性别"> |
||||
|
<a-radio-group :default-value="editData.sex" @change="changeAddSex"> |
||||
|
<a-radio :value="0"> 女 </a-radio> |
||||
|
<a-radio :value="1"> 男 </a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
<!-- 导师照片 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师照片"> |
||||
|
<a-upload :action="upload" @change="handleChange($event, 4)" name="files"> |
||||
|
<a-button v-if="!editData.teacherPhoto"> <a-icon type="upload" />选择图片 </a-button> |
||||
|
<img v-else :src="editData.teacherPhoto" style="width: 100%; cursor: pointer" title="重新选择" /> |
||||
|
<div slot="listType"></div> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
<!-- 导师简介 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师简介"> |
||||
|
<a-textarea style="height: 100px" placeholder="导师简介" v-model="editData.intro" /> |
||||
|
</a-form-item> |
||||
|
<!-- 服务案例 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="服务案例"> |
||||
|
<a-textarea style="height: 100px" placeholder="服务案例" v-model="editData.serviceCase" /> |
||||
|
</a-form-item> |
||||
|
<!-- 导师分类 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师分类"> |
||||
|
<a-select |
||||
|
:default-value="editData.categoryList" |
||||
|
mode="multiple" |
||||
|
style="width: 100%" |
||||
|
@change="typeChange($event, 2)" |
||||
|
placeholder="导师分类" |
||||
|
> |
||||
|
<a-select-option v-for="item in typeList" :key="item.id" :value="item.id"> |
||||
|
{{ item.categoryName }} |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-item> |
||||
|
<!-- 导师聘书 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师聘书"> |
||||
|
<a-upload :action="upload" @change="handleChange($event, 5)" name="files"> |
||||
|
<a-button v-if="!editData.offer"> <a-icon type="upload" />选择图片 </a-button> |
||||
|
<img v-else :src="editData.offer" style="width: 100%; cursor: pointer" title="重新选择" /> |
||||
|
<div slot="listType"></div> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
<!-- 导师简历 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="导师简历"> |
||||
|
<a-upload :action="upload" @change="handleChange($event, 6)" name="files"> |
||||
|
<a-button v-if="!editData.resume"> <a-icon type="upload" />选择图片 </a-button> |
||||
|
<img v-else :src="editData.resume" style="width: 100%; cursor: pointer" title="重新选择" /> |
||||
|
<div slot="listType"></div> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { upload, getFindTeachH, getSelTutorH, delTeacher, addTeacher, upTeacher } from 'config/api'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 16 }, |
||||
|
}; |
||||
|
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
align: 'center', |
||||
|
dataIndex: 'id', |
||||
|
key: 'id', |
||||
|
width: '7%', |
||||
|
scopedSlots: { customRender: 'id' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '所在单位', |
||||
|
align: 'center', |
||||
|
dataIndex: 'company', |
||||
|
key: 'company', |
||||
|
}, |
||||
|
{ |
||||
|
title: '职务', |
||||
|
align: 'center', |
||||
|
dataIndex: 'duties', |
||||
|
key: 'duties', |
||||
|
}, |
||||
|
{ |
||||
|
title: '姓名', |
||||
|
align: 'center', |
||||
|
dataIndex: 'name', |
||||
|
key: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '性别', |
||||
|
align: 'center', |
||||
|
dataIndex: 'sex', |
||||
|
key: 'sex', |
||||
|
scopedSlots: { customRender: 'sex' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '照片', |
||||
|
align: 'center', |
||||
|
dataIndex: 'teacherPhoto', |
||||
|
key: 'teacherPhoto', |
||||
|
scopedSlots: { customRender: 'teacherPhoto' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '简介', |
||||
|
align: 'center', |
||||
|
dataIndex: 'intro', |
||||
|
key: 'intro', |
||||
|
}, |
||||
|
{ |
||||
|
title: '教师聘书', |
||||
|
align: 'center', |
||||
|
dataIndex: 'offer', |
||||
|
key: 'offer', |
||||
|
scopedSlots: { customRender: 'offer' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '教师简历', |
||||
|
align: 'center', |
||||
|
dataIndex: 'resume', |
||||
|
key: 'resume', |
||||
|
scopedSlots: { customRender: 'resume' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '编辑', |
||||
|
align: 'center', |
||||
|
dataIndex: 'edit', |
||||
|
key: 'edit', |
||||
|
scopedSlots: { customRender: 'edit' }, |
||||
|
}, |
||||
|
]; |
||||
|
export default { |
||||
|
name: 'Teacher', |
||||
|
data() { |
||||
|
return { |
||||
|
upload, |
||||
|
//限制文件上传的格式 |
||||
|
beforeUpload: file => { |
||||
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
if (!isJpgOrPng) { |
||||
|
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
||||
|
this.fileList = []; |
||||
|
} |
||||
|
return isJpgOrPng; |
||||
|
}, |
||||
|
beforeUpload1: file => { |
||||
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
if (!isJpgOrPng) { |
||||
|
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
||||
|
this.fileList1 = []; |
||||
|
} |
||||
|
return isJpgOrPng; |
||||
|
}, |
||||
|
beforeUpload2: file => { |
||||
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
if (!isJpgOrPng) { |
||||
|
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
||||
|
this.fileList2 = []; |
||||
|
} |
||||
|
return isJpgOrPng; |
||||
|
}, |
||||
|
columns, |
||||
|
formItemLayout, |
||||
|
tailItemLayout, |
||||
|
form: this.$form.createForm(this, { name: 'teacher-add' }), |
||||
|
height: '', |
||||
|
lists: {}, |
||||
|
pagination: { current: 1, pageSize: 10, total: 0 }, |
||||
|
typeList: [], // 导师类型数组 |
||||
|
teacherType: [], // 已选中的 搜索时的 导师类型 |
||||
|
addType: [], // 已选中的 添加时的 导师类型 |
||||
|
addData: { |
||||
|
company: '', // 所在公司/单位名称 |
||||
|
duties: '', // 职务/职称 |
||||
|
intro: '', // 简介(图片id) |
||||
|
name: '', // 导师名称 |
||||
|
serviceCase: '', // 服务案例 |
||||
|
sex: 0, // 性别 |
||||
|
}, |
||||
|
teacherName: '', |
||||
|
pageNum: 1, |
||||
|
visible: false, // 添加表单 |
||||
|
visible1: false, // 修改表单 |
||||
|
fileList: [], // 导师照片数组 |
||||
|
fileList1: [], // 导师聘书数组 |
||||
|
fileList2: [], // 导师简历数组 |
||||
|
editData: { |
||||
|
id: '', // 导师id |
||||
|
company: '', // 所在公司/单位名称 |
||||
|
duties: '', // 职务/职称 |
||||
|
intro: '', // 简介(图片id) |
||||
|
name: '', // 导师名称 |
||||
|
serviceCase: '', // 服务案例 |
||||
|
sex: 0, // 性别 |
||||
|
teacherPhoto: '', // 照片路径 |
||||
|
teacherPhotoId: '', // 照片id |
||||
|
offer: '', // 聘书(图片)路径 |
||||
|
offerId: '', // 聘书id |
||||
|
resume: '', // 简历(图片)路径 |
||||
|
resumeId: '', // 简历id |
||||
|
categoryList: [], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.getTeaClass(); |
||||
|
this.selModelSearch(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
let th = 150; |
||||
|
let wh = window.innerHeight; |
||||
|
this.height = wh - th; |
||||
|
window.onresize = () => { |
||||
|
return (() => { |
||||
|
wh = window.innerHeight; |
||||
|
this.height = wh - th; |
||||
|
})(); |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 获取导师列表 |
||||
|
*/ |
||||
|
async selModelSearch() { |
||||
|
try { |
||||
|
const { teacherName, pageNum, teacherType } = this; |
||||
|
const params = { |
||||
|
param: { |
||||
|
teacherName, |
||||
|
pageNum, |
||||
|
pageSize: 10, |
||||
|
teacherType, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await getFindTeachH(params); |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.lists = data; |
||||
|
this.pagination.total = parseInt(data.total); |
||||
|
const paper = { ...this.pagination }; |
||||
|
paper.current = data.pageNum; |
||||
|
paper.total = +data.total; |
||||
|
paper.pageSize = data.pageSize; |
||||
|
this.pagination = paper; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error; |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 查询导师类型 |
||||
|
*/ |
||||
|
async getTeaClass() { |
||||
|
try { |
||||
|
const params = { param: { categoryName: '', recStatus: 0 } }; |
||||
|
const res = await getSelTutorH(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.typeList = data; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error; |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 改变导师分类 |
||||
|
*/ |
||||
|
typeChange(e, num) { |
||||
|
if (num === 0) { |
||||
|
this.teacherType = e; |
||||
|
} else if (num === 1) { |
||||
|
this.addType = e; |
||||
|
} else if (num === 2) { |
||||
|
this.editData.categoryList = e; |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 提交添加表单 |
||||
|
*/ |
||||
|
handleSubmit(e) { |
||||
|
console.log(e); |
||||
|
}, |
||||
|
/** |
||||
|
* 表格改变分页 |
||||
|
*/ |
||||
|
handleTableChange(pagination) { |
||||
|
this.pageNum = pagination.current; |
||||
|
this.selModelSearch(); |
||||
|
}, |
||||
|
// 删除 |
||||
|
async onDelete(teacherId) { |
||||
|
try { |
||||
|
const params = { param: { teacherId } }; |
||||
|
const res = await delTeacher(params); |
||||
|
const { data, msg, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.selModelSearch(); |
||||
|
} else { |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error || '删除失败'); |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 添加时修改性别 |
||||
|
*/ |
||||
|
changeAddSex(e) { |
||||
|
this.addData.sex = e.target.value; |
||||
|
}, |
||||
|
/** |
||||
|
* 增加导师的上传图片事件 |
||||
|
*/ |
||||
|
handleChange(info, num) { |
||||
|
if (info.file.status === 'done') { |
||||
|
if (num === 1) { |
||||
|
this.fileList.push(info.file.response.data[0].id); |
||||
|
} else if (num === 2) { |
||||
|
this.fileList1.push(info.file.response.data[0].id); |
||||
|
} else if (num === 3) { |
||||
|
this.fileList2.push(info.file.response.data[0].id); |
||||
|
} else if (num === 4) { |
||||
|
this.editData.teacherPhoto = info.file.response.data[0].visitUrl; |
||||
|
this.editData.teacherPhotoId = info.file.response.data[0].id; |
||||
|
} else if (num === 5) { |
||||
|
this.editData.offer = info.file.response.data[0].visitUrl; |
||||
|
this.editData.offerId = info.file.response.data[0].id; |
||||
|
} else if (num === 6) { |
||||
|
this.editData.resume = info.file.response.data[0].visitUrl; |
||||
|
this.editData.resumeId = info.file.response.data[0].id; |
||||
|
} |
||||
|
} else if (info.file.status === 'removed') { |
||||
|
if (num === 1) { |
||||
|
this.fileList = info.fileList; |
||||
|
} else if (num === 2) { |
||||
|
this.fileList1 = info.fileList; |
||||
|
} else if (num === 3) { |
||||
|
this.fileList2 = info.fileList; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 增加导师 事件 |
||||
|
*/ |
||||
|
async addTeacherData() { |
||||
|
try { |
||||
|
const { addData, addType, fileList, fileList1, fileList2 } = this; |
||||
|
const params = { |
||||
|
param: { |
||||
|
services: addType, |
||||
|
teacherPhoto: fileList[0], |
||||
|
offer: fileList1[0], |
||||
|
resume: fileList2[0], |
||||
|
...addData, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await addTeacher(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('增加导师成功'); |
||||
|
this.selModelSearch(); |
||||
|
this.visible = false; |
||||
|
} else { |
||||
|
this.$message.error('增加导师失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error('增加导师失败'); |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 显示修改modal |
||||
|
*/ |
||||
|
showEditModal(data) { |
||||
|
let { editData } = this; |
||||
|
editData = { ...data }; |
||||
|
this.editData = { ...editData }; |
||||
|
this.visible1 = true; |
||||
|
}, |
||||
|
/** |
||||
|
* 修改确定事件 |
||||
|
*/ |
||||
|
async editTeacherData() { |
||||
|
try { |
||||
|
const { editData } = this; |
||||
|
const params = { |
||||
|
param: { |
||||
|
...editData, |
||||
|
offer: editData.offerId, |
||||
|
resume: editData.resumeId, |
||||
|
teacherPhoto: editData.teacherPhotoId, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await upTeacher(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.visible1 = false; |
||||
|
this.$message.success('修改成功'); |
||||
|
this.selModelSearch(); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error('修改失败'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,289 @@ |
|||||
|
<template> |
||||
|
<div class="pa-3 white fill-height d-flex flex-column"> |
||||
|
<!-- 搜索 --> |
||||
|
<div class="d-flex flex-wrap pb-3"> |
||||
|
<div> |
||||
|
<span class="mr-4">分类名称:</span> |
||||
|
<a-input placeholder="分类名称" style="width: 150px" v-model="typeName" /> |
||||
|
<span class="ml-4 mr-4">分类状态:</span> |
||||
|
<a-select allow-clear style="width: 200px" @change="typeChange($event, 0)" placeholder="分类状态"> |
||||
|
<a-select-option v-for="item in typeList" :key="item.id" :value="item.id"> |
||||
|
{{ item.categoryName }} |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
|
||||
|
<a-button @click="getTeaClass" class="ml-3" type="primary">搜索</a-button> |
||||
|
</div> |
||||
|
<div class="flex-1"></div> |
||||
|
<a-button class="editable-add-btn" @click="visible = true" style="margin-top: 1px" type="primary">增加</a-button> |
||||
|
</div> |
||||
|
<!-- 添加表单 --> |
||||
|
<a-modal :mask-closable="false" destroy-on-close title="添加导师" v-model="visible" width="700px" @ok="addClass"> |
||||
|
<a-form :form="form"> |
||||
|
<!-- 分类名称 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="分类名称" required> |
||||
|
<a-input placeholder="分类名称" v-model="addType" /> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
<!-- 表格 --> |
||||
|
<div class="main flex-1"> |
||||
|
<div style="width: 100%" v-if="list && list.length > 0"> |
||||
|
<a-table |
||||
|
:columns="columns" |
||||
|
:data-source="list" |
||||
|
:pagination="pagination" |
||||
|
:row-key="record => record.id" |
||||
|
@change="handleTableChange" |
||||
|
:scroll="{ y: height }" |
||||
|
bordered |
||||
|
class="white" |
||||
|
> |
||||
|
<template slot="id" slot-scope="text, record, index"> |
||||
|
<span>{{ index + 1 }}</span> |
||||
|
</template> |
||||
|
|
||||
|
<template slot="recStatus" slot-scope="text, record"> |
||||
|
<span style="width: 100%" v-if="record.recStatus === 0">正常</span> |
||||
|
<span style="width: 100%" v-else-if="record.recStatus === 1">禁用</span> |
||||
|
<span style="width: 100%" v-else-if="record.recStatus === 2">删除</span> |
||||
|
</template> |
||||
|
|
||||
|
<template slot="edit" slot-scope="text, record"> |
||||
|
<a-icon @click="showEditModel(record)" class="pointer" theme="twoTone" type="edit" /> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
<a-empty v-else /> |
||||
|
</div> |
||||
|
<!-- 修改表单 --> |
||||
|
<a-modal :mask-closable="false" destroy-on-close title="修改" v-model="visible1" width="700px" @ok="editChange"> |
||||
|
<a-form :form="form"> |
||||
|
<!-- 分类名称 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="分类名称"> |
||||
|
<a-input placeholder="分类名称" v-model="editData.categoryName" /> |
||||
|
</a-form-item> |
||||
|
<!-- 分类状态 --> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="分类状态"> |
||||
|
<a-select |
||||
|
:default-value="getDefault(editData.recStatus)" |
||||
|
allow-clear |
||||
|
style="width: 100%" |
||||
|
@change="typeChange($event, 1)" |
||||
|
placeholder="分类状态" |
||||
|
> |
||||
|
<a-select-option v-for="item in typeList" :key="item.id" :value="item.id"> |
||||
|
{{ item.categoryName }} |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getSelTutorH, addTutor, upTutorH } from 'config/api'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 16 }, |
||||
|
}; |
||||
|
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
align: 'center', |
||||
|
dataIndex: 'id', |
||||
|
key: 'id', |
||||
|
width: '7%', |
||||
|
scopedSlots: { customRender: 'id' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '分类名称', |
||||
|
align: 'center', |
||||
|
dataIndex: 'categoryName', |
||||
|
key: 'categoryName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '分类状态', |
||||
|
align: 'center', |
||||
|
dataIndex: 'recStatus', |
||||
|
key: 'recStatus', |
||||
|
scopedSlots: { customRender: 'recStatus' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '修改', |
||||
|
align: 'center', |
||||
|
dataIndex: 'edit', |
||||
|
key: 'edit', |
||||
|
scopedSlots: { customRender: 'edit' }, |
||||
|
}, |
||||
|
]; |
||||
|
export default { |
||||
|
name: 'Teacher', |
||||
|
data() { |
||||
|
return { |
||||
|
columns, |
||||
|
formItemLayout, |
||||
|
tailItemLayout, |
||||
|
form: this.$form.createForm(this, { name: 'teacher-add' }), |
||||
|
height: '', |
||||
|
list: [], |
||||
|
pagination: { current: 1, pageSize: 10, total: 0 }, |
||||
|
typeList: [ |
||||
|
{ |
||||
|
id: 0, |
||||
|
categoryName: '正常', |
||||
|
}, |
||||
|
{ |
||||
|
id: 1, |
||||
|
categoryName: '禁用', |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
categoryName: '删除', |
||||
|
}, |
||||
|
], // 导师类型数组 |
||||
|
teacherType: '', // 已选中的 搜索时的 类型状态 |
||||
|
addType: '', // 已选中的 添加时的 导师类型 |
||||
|
typeName: '', |
||||
|
pageNum: 1, |
||||
|
visible: false, // 添加表单 |
||||
|
visible1: false, // 修改表单 |
||||
|
editData: { |
||||
|
categoryName: '', |
||||
|
recStatus: '', |
||||
|
id: '', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.getTeaClass(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
let th = 150; |
||||
|
let wh = window.innerHeight; |
||||
|
this.height = wh - th; |
||||
|
window.onresize = () => { |
||||
|
return (() => { |
||||
|
wh = window.innerHeight; |
||||
|
this.height = wh - th; |
||||
|
})(); |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 查询导师类型 |
||||
|
*/ |
||||
|
async getTeaClass() { |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
categoryName: this.typeName, |
||||
|
recStatus: this.teacherType, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await getSelTutorH(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.list = data; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error; |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 改变导师分类 |
||||
|
*/ |
||||
|
typeChange(e, num) { |
||||
|
if (num === 0) { |
||||
|
this.teacherType = e; |
||||
|
} else if (num === 1) { |
||||
|
this.editData.recStatus = e; |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 添加导师分类 |
||||
|
*/ |
||||
|
async addClass() { |
||||
|
try { |
||||
|
const { addType } = this; |
||||
|
if (addType === '') { |
||||
|
this.$message.error('请填写分类名称'); |
||||
|
return; |
||||
|
} |
||||
|
const params = { param: { categoryName: addType } }; |
||||
|
const res = await addTutor(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('分类添加成功'); |
||||
|
this.visible = false; |
||||
|
this.getTeaClass(); |
||||
|
} else { |
||||
|
this.$message.error('分类添加失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error('分类添加失败'); |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 表格改变分页 |
||||
|
*/ |
||||
|
handleTableChange(pagination) { |
||||
|
// this.pageNum = pagination.current; |
||||
|
this.pagination.current = pagination.current; |
||||
|
}, |
||||
|
/** |
||||
|
* 显示修改弹框,获取需要修改的数据 |
||||
|
*/ |
||||
|
showEditModel(data) { |
||||
|
this.editData = data; |
||||
|
this.visible1 = true; |
||||
|
}, |
||||
|
/** |
||||
|
* 确认修改 |
||||
|
*/ |
||||
|
async editChange() { |
||||
|
try { |
||||
|
const { editData } = this; |
||||
|
if (!editData.categoryName && !editData.recStatus) { |
||||
|
this.$message.error('请填写完整信息'); |
||||
|
return; |
||||
|
} |
||||
|
const params = { param: { ...editData } }; |
||||
|
const res = await upTutorH(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('修改成功'); |
||||
|
this.visible1 = false; |
||||
|
this.editData = { |
||||
|
categoryName: '', |
||||
|
recStatus: '', |
||||
|
id: '', |
||||
|
}; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error('修改失败'); |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 获取分类默认值 |
||||
|
*/ |
||||
|
getDefault(e) { |
||||
|
if (e !== '') { |
||||
|
const defaultObj = this.typeList.find(item => { |
||||
|
return item.id === e; |
||||
|
}); |
||||
|
return defaultObj.categoryName; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue