rose
4 years ago
30 changed files with 17451 additions and 541 deletions
File diff suppressed because it is too large
@ -1,9 +1,14 @@ |
|||
const getters = { |
|||
// 域定制导航展示形式
|
|||
// 0 -> 无特殊导航文字
|
|||
// 1 -> 横向定制导航
|
|||
// 2 -> 纵向定制导航
|
|||
|
|||
}; |
|||
/* |
|||
* @Author: wally |
|||
* @email: 18603454788@163.com |
|||
* @Date: 2021-04-20 12:33:22 |
|||
* @LastEditors: wally |
|||
* @LastEditTime: 2021-04-22 13:09:35 |
|||
*/ |
|||
const getters = {}; |
|||
// 域定制导航展示形式
|
|||
// 0 -> 无特殊导航文字
|
|||
// 1 -> 横向定制导航
|
|||
// 2 -> 纵向定制导航
|
|||
|
|||
export default getters; |
|||
|
|||
@ -1,9 +1,14 @@ |
|||
<!-- |
|||
* @Author: wally |
|||
* @email: 18603454788@163.com |
|||
* @Date: 2021-04-20 12:33:22 |
|||
* @LastEditors: wally |
|||
* @LastEditTime: 2021-04-22 13:08:42 |
|||
--> |
|||
<template> |
|||
<div></div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Index', |
|||
}; |
|||
export default { name: 'Index' }; |
|||
</script> |
|||
|
|||
@ -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,310 @@ |
|||
<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="mr-3 pointer" theme="twoTone" type="edit" /> |
|||
<a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?"> |
|||
<a-icon class="mr-3 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="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, delTutorH } 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 ''; |
|||
} |
|||
}, |
|||
|
|||
// 删除 |
|||
async onDelete(id){ |
|||
try { |
|||
const params = { param: { id} }; |
|||
const res = await delTutorH(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.getTeaClass(); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '删除失败'); |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue