10 changed files with 959 additions and 2 deletions
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<college-search @getListData="getListData" /> |
|||
<college-date :lists="lists" :pagination="pagination" @getListData="getListData" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CollegeSearch from './components/CollegeSearch.vue'; |
|||
import CollegeDate from './components/CollegeDate.vue'; |
|||
import { academyQueryBack } from 'config/api'; |
|||
|
|||
export default { |
|||
name: 'College', |
|||
components: { |
|||
CollegeSearch, |
|||
CollegeDate, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
str: '知识平台管理界面', |
|||
lists: {}, |
|||
pagination: { current: 1, pageSize: 10 }, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
paramData: { |
|||
banner: [], |
|||
type: '', |
|||
title: '', |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
this.getListData(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 获取知识平台内容列表 |
|||
async getListData(condition) { |
|||
try { |
|||
if (condition && condition.current) { |
|||
this.pageNum = condition.current; |
|||
this.pageSize = condition.pageSize; |
|||
} else if (condition && !condition.current) { |
|||
this.paramData = condition; |
|||
} |
|||
const params = { |
|||
param: { |
|||
title: this.paramData.title, |
|||
type: this.paramData.type, |
|||
banner: this.paramData.banner, |
|||
pageNum: this.pageNum, |
|||
pageSize: this.pageSize, |
|||
}, |
|||
}; |
|||
const res = await academyQueryBack(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data; |
|||
const paper = { ...this.pagination }; |
|||
paper.current = data.pageNum; |
|||
paper.total = +data.total; |
|||
paper.pageSize = data.pageSize; |
|||
this.pagination = paper; |
|||
} else { |
|||
throw msg || '获取失败'; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,268 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 添加 --> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@cancel="$emit('closeModal')" |
|||
destroy-on-close |
|||
footer |
|||
title="知识平台添加" |
|||
v-model="visible" |
|||
width="700px" |
|||
> |
|||
<a-form :form="form" @submit="handleSubmit"> |
|||
<!-- 标题 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="标题" |
|||
> |
|||
<a-input |
|||
@change="changeIpt($event, 'title')" |
|||
class="ml-3" |
|||
placeholder="标题" |
|||
v-decorator="[ |
|||
'title', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '标题不能为空' }, |
|||
{ whitespace: true, message: '标题不能为空' }, |
|||
{ max: 140, massage: '标题最多140个字符' }, |
|||
], |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 内容链接 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="内容链接" |
|||
> |
|||
<a-input |
|||
@change="changeIpt($event, 'contentUrl')" |
|||
class="ml-3" |
|||
placeholder="内容链接" |
|||
v-decorator="[ |
|||
'contentUrl', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '内容链接不能为空' }, |
|||
{ whitespace: true, message: '内容链接不能为空' }, |
|||
{ max: 300, massage: '内容链接最多30个字符' }, |
|||
], |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="简介" |
|||
> |
|||
<a-textarea |
|||
@change="changeIpt($event, 'intro')" |
|||
class="ml-3" |
|||
placeholder="简介" |
|||
v-decorator="[ |
|||
'intro', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '简介不能为空' }, |
|||
{ whitespace: true, message: '简介不能为空' }, |
|||
{ max: 140, massage: '简介最多140个字符' }, |
|||
], |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 封面图片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="封面图片" |
|||
> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload" |
|||
@change="handleChange" |
|||
class="ml-3" |
|||
list-type="picture" |
|||
name="files" |
|||
> |
|||
<a-button> |
|||
<a-icon type="upload" />选择封面图片 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 时间 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="时间" |
|||
> |
|||
<a-date-picker @change="changeBirthday" class="ml-3" show-time /> |
|||
</a-form-item> |
|||
<!-- 类型 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="类型" |
|||
> |
|||
<a-select |
|||
@change="getUse($event, 'type')" |
|||
class="ml-3" |
|||
default-value="视频" |
|||
style="width: 100%" |
|||
> |
|||
<a-select-option |
|||
:key="index" |
|||
:value="index + 1" |
|||
v-for="(item, index) in recStatusList" |
|||
>{{ item }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<!-- 栏目 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="栏目" |
|||
> |
|||
<a-checkbox-group @change="onChangeBan" class="ml-3"> |
|||
<a-checkbox |
|||
:key="index" |
|||
:value="item.moldId" |
|||
class="my-2" |
|||
v-for="(item, index) in bannersList" |
|||
>{{ item.moldName }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<a-form-item class="d-flex flex-row-reverse"> |
|||
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> |
|||
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { upload, academySave, queryMold } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
|
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
|
|||
export default { |
|||
name: 'CollegeAdd', |
|||
props: { visible: { type: Boolean, default: false } }, |
|||
data() { |
|||
return { |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'r-d-member-add' }), |
|||
upload: upload, |
|||
fileList: [], |
|||
//限制文件上传的格式和大小 |
|||
beforeUpload: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
this.fileList = []; |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
recStatusList: ['视频', '音频', 'PPT'], |
|||
bannersList: [], |
|||
banner: [], |
|||
title: '', |
|||
contentUrl: '', |
|||
intro: '', |
|||
times: '', |
|||
type: 1, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getQueryMold(); |
|||
}, |
|||
methods: { |
|||
changeBirthday(date, dateString) { |
|||
// console.log(this.$moment(date._e).format('YYYY-MM-DD HH:mm:ss')); |
|||
this.times = this.$moment(date._e).format('YYYY-MM-DD HH:mm:ss'); |
|||
}, |
|||
|
|||
onChangeBan(e) { |
|||
this.banner = e; |
|||
}, |
|||
// 上传图片事件 |
|||
handleChange(info) { |
|||
// this.fileList = fileList; |
|||
console.log(info); |
|||
if (info.file.status === 'done') { |
|||
this.fileList.push(info.file.response.data[0].id); |
|||
} else if (info.file.status === 'removed') { |
|||
this.fileList = info.fileList; |
|||
} |
|||
}, |
|||
changeIpt(e, str) { |
|||
this[str] = e.target.value; |
|||
}, |
|||
getUse(e, str) { |
|||
this[str] = e; |
|||
}, |
|||
async getQueryMold() { |
|||
try { |
|||
const res = await queryMold(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.bannersList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
try { |
|||
this.picId = this.fileList[0]; |
|||
const params = { |
|||
param: { |
|||
banners: this.banner, |
|||
contentUrl: this.contentUrl, |
|||
coverPicture: this.fileList[0], |
|||
intro: this.intro, |
|||
times: this.times, |
|||
title: this.title, |
|||
type: this.type, |
|||
}, |
|||
}; |
|||
const res = await academySave(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.fileList.splice(0, this.fileList.length); |
|||
this.$emit('handleTableChange'); |
|||
this.$emit('closeModal'); |
|||
this.$message.success('添加成功'); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '添加失败'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<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" |
|||
:loading="loading" |
|||
:pagination="pagination" |
|||
:row-key="record => record.academyId" |
|||
:scroll="{ y: height }" |
|||
@change="handleTableChange" |
|||
bordered |
|||
class="white" |
|||
> |
|||
<template slot="id" slot-scope="text, record, index"> |
|||
<span>{{ index + 1 }}</span> |
|||
</template> |
|||
|
|||
<template slot="coverPicture" slot-scope="text, record"> |
|||
<img :src="record.picUrl" height="50" width="50" /> |
|||
</template> |
|||
|
|||
<template slot="type" slot-scope="text, record"> |
|||
<span v-if="record.type === 1">视频</span> |
|||
<span v-else-if="record.type === 2">音频</span> |
|||
<span v-else-if="record.type === 3">ppt</span> |
|||
</template> |
|||
|
|||
<template slot="edit" slot-scope="text, record"> |
|||
<a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" /> |
|||
<a-popconfirm |
|||
@confirm="() => onDelete(record.academyId)" |
|||
title="确定要删除这一条?" |
|||
v-if="lists.list.length" |
|||
> |
|||
<a-icon class="ml-4 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" /> |
|||
</a-popconfirm> |
|||
</template> |
|||
<!-- <div class="d-flex flex-nowrap justify-space-between" slot="expandedRowRender" slot-scope="record" style="margin: 0"> |
|||
{{ getselContent(record.id) }} |
|||
</div>--> |
|||
</a-table> |
|||
</div> |
|||
<a-empty v-else /> |
|||
|
|||
<!-- 编辑 --> |
|||
<college-edit |
|||
:edit-data="editData" |
|||
:edit-visible="editVisible" |
|||
@closeModal="closeModal" |
|||
@getData="getData" |
|||
v-if="editVisible" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CollegeEdit from './CollegeEdit.vue'; |
|||
import { academyDelete } from 'config/api'; |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '标题', |
|||
align: 'center', |
|||
dataIndex: 'title', |
|||
key: 'title', |
|||
}, |
|||
{ |
|||
title: '内容链接', |
|||
align: 'center', |
|||
dataIndex: 'contentUrl', |
|||
key: 'contentUrl', |
|||
}, |
|||
{ |
|||
title: '封面图片', |
|||
align: 'center', |
|||
dataIndex: 'coverPicture', |
|||
key: 'coverPicture', |
|||
scopedSlots: { customRender: 'coverPicture' }, |
|||
}, |
|||
{ |
|||
title: '简介', |
|||
align: 'center', |
|||
dataIndex: 'intro', |
|||
key: 'intro', |
|||
// scopedSlots: { customRender: 'picUrl' }, |
|||
}, |
|||
{ |
|||
title: '类型', |
|||
align: 'center', |
|||
dataIndex: 'type', |
|||
key: 'type', |
|||
scopedSlots: { customRender: 'type' }, |
|||
}, |
|||
{ |
|||
title: '时间', |
|||
align: 'center', |
|||
dataIndex: 'times', |
|||
key: 'times', |
|||
scopedSlots: { customRender: 'times' }, |
|||
}, |
|||
{ |
|||
title: '编辑', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'CollegeDate', |
|||
components: { CollegeEdit }, |
|||
// props: { lists: { type: Array, default: () => {} } }, |
|||
props: { lists: { type: Object, default: () => {} }, pagination: { type: Object, default: () => {} } }, |
|||
|
|||
data() { |
|||
return { |
|||
columns, |
|||
loading: false, |
|||
editingKey: '', |
|||
height: '', |
|||
editVisible: false, |
|||
editData: null, |
|||
contents: '', |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
let th = 250; |
|||
let wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
window.onresize = () => { |
|||
return (() => { |
|||
wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
})(); |
|||
}; |
|||
}, |
|||
methods: { |
|||
showEditModal(data) { |
|||
console.log('=====>showEditModal', data); |
|||
this.editData = data; |
|||
// this.contents = this.getselContent(data.academyId); |
|||
this.editVisible = true; |
|||
console.log('是否显示'); |
|||
}, |
|||
|
|||
closeModal() { |
|||
this.editVisible = false; |
|||
}, |
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.$emit('getListData', condition); |
|||
}, |
|||
getData() { |
|||
this.$emit('getListData'); |
|||
}, |
|||
// 删除 |
|||
async onDelete(academyId) { |
|||
try { |
|||
const params = { param: { academyId } }; |
|||
const res = await academyDelete(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$emit('getListData'); |
|||
this.$message.success('删除成功'); |
|||
// TODO: 填到列表中 |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '删除失败'); |
|||
} |
|||
}, |
|||
// 获取服务内容 |
|||
getselContent(id) { |
|||
try { |
|||
const parmas = { |
|||
param: { |
|||
id: +id, |
|||
serviceType: 2, |
|||
}, |
|||
}; |
|||
const res = selContent(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
// console.log(data); |
|||
return data.content; |
|||
} else { |
|||
return '暂无内容'; |
|||
} |
|||
} catch (error) { |
|||
return '暂无内容'; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 添加 --> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@cancel="$emit('closeModal')" |
|||
destroy-on-close |
|||
footer |
|||
title="知识平台修改" |
|||
v-model="editVisible" |
|||
width="700px" |
|||
> |
|||
<a-form :form="form" @submit="handleSubmit"> |
|||
<!-- 标题 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="标题" |
|||
> |
|||
<a-input |
|||
class="ml-3" |
|||
placeholder="标题" |
|||
v-decorator="[ |
|||
'title', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '标题不能为空' }, |
|||
{ whitespace: true, message: '标题不能为空' }, |
|||
{ max: 140, massage: '标题最多140个字符' }, |
|||
], |
|||
initialValue: title, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 内容链接 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="内容链接" |
|||
> |
|||
<a-input |
|||
class="ml-3" |
|||
placeholder="内容链接" |
|||
v-decorator="[ |
|||
'contentUrl', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '内容链接不能为空' }, |
|||
{ whitespace: true, message: '内容链接不能为空' }, |
|||
{ max: 300, massage: '内容链接最多30个字符' }, |
|||
], |
|||
initialValue:contentUrl, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="简介" |
|||
> |
|||
<a-textarea |
|||
class="ml-3" |
|||
placeholder="简介" |
|||
style="height:80px" |
|||
v-decorator="[ |
|||
'intro', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '简介不能为空' }, |
|||
{ whitespace: true, message: '简介不能为空' }, |
|||
{ max: 140, massage: '简介最多140个字符' }, |
|||
], |
|||
initialValue:intro, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 封面图片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="封面图片" |
|||
> |
|||
<div class="d-flex align-end ml-4" v-if="editData.picUrl"> |
|||
<img :src="editData.picUrl" alt style="height:100px;" /> |
|||
<div> |
|||
<a-icon @click="deleteFileList" class="ml-5" type="close-circle" /> |
|||
</div> |
|||
</div> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload" |
|||
@change="handleChange" |
|||
class="ml-3" |
|||
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-date-picker |
|||
class="ml-3" |
|||
show-time |
|||
v-decorator="[ 'times', { initialValue: times }, ]" |
|||
/> |
|||
<!-- <a-date-picker class="ml-3" show-time /> --> |
|||
</a-form-item> |
|||
<!-- 类型 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="类型" |
|||
> |
|||
<a-select |
|||
class="ml-3" |
|||
default-value="视频" |
|||
style="width: 100%" |
|||
v-decorator="[ 'type', { initialValue: type }, ]" |
|||
> |
|||
<a-select-option |
|||
:key="index" |
|||
:value="index + 1" |
|||
v-for="(item, index) in recStatusList" |
|||
>{{ item }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<!-- 栏目 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="栏目" |
|||
> |
|||
<a-checkbox-group class="ml-3" v-decorator="[ 'banner', { initialValue:banner, }, ]"> |
|||
<a-checkbox |
|||
:key="index" |
|||
:value="item.moldId" |
|||
class="my-2" |
|||
v-for="(item, index) in bannersList" |
|||
>{{ item.moldName }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<a-form-item class="d-flex flex-row-reverse"> |
|||
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> |
|||
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { upload, academyUpdate, queryMold } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
|
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
|
|||
export default { |
|||
name: 'CollegeEdit', |
|||
props: { |
|||
editVisible: { type: Boolean, default: false }, |
|||
editData: { type: Object, default: () => {} }, |
|||
}, |
|||
data() { |
|||
return { |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'college-edit' }), |
|||
upload: upload, |
|||
fileList: [], |
|||
//限制文件上传的格式和大小 |
|||
beforeUpload: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
recStatusList: ['视频', '音频', 'PPT'], |
|||
bannersList: [], |
|||
banner: [], |
|||
title: '', |
|||
contentUrl: '', |
|||
intro: '', |
|||
times: '', |
|||
type: 1, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getQueryMold(); |
|||
// this.from = this.editData |
|||
(this.title = this.editData.title), (this.contentUrl = this.editData.contentUrl); |
|||
this.intro = this.editData.intro; |
|||
this.times = this.editData.times; |
|||
this.type = this.editData.type; |
|||
this.banner = this.editData.moldIds; |
|||
this.fileList.push(this.editData.coverPicture); |
|||
console.log('======>collegeEdit'); |
|||
}, |
|||
methods: { |
|||
// 删除fileList |
|||
deleteFileList() { |
|||
console.log('进入事件'); |
|||
this.fileList = []; |
|||
this.editData.picUrl = ''; |
|||
}, |
|||
changeTime(e) { |
|||
return this.$moment(e).format('YYYY-MM-DD HH:mm:ss'); |
|||
}, |
|||
// 上传图片事件 |
|||
handleChange(info) { |
|||
// this.fileList = fileList; |
|||
console.log(info); |
|||
if (info.file.status === 'done') { |
|||
this.fileList.push(info.file.response.data[0].id); |
|||
} else if (info.file.status === 'removed') { |
|||
this.fileList = info.fileList; |
|||
} |
|||
}, |
|||
|
|||
async getQueryMold() { |
|||
try { |
|||
const res = await queryMold(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.bannersList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
if (this.fileList.length > 0 || this.editData.picUrl) { |
|||
try { |
|||
console.log('handleSubmit', values); |
|||
const params = { |
|||
param: { |
|||
academyId: this.editData.academyId, |
|||
banners: values.banner, |
|||
contentUrl: values.contentUrl, |
|||
coverPicture: this.fileList[0] || this.editData.coverPicture, |
|||
intro: values.intro, |
|||
times: this.changeTime(values.times._d), |
|||
title: values.title, |
|||
type: values.type, |
|||
}, |
|||
}; |
|||
const res = await academyUpdate(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$emit('getData'); |
|||
this.$emit('closeModal'); |
|||
this.$message.success('保存成功'); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '添加失败'); |
|||
} |
|||
} else { |
|||
this.$message.error('请上传图片'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<a-input placeholder="标题" style="width: 150px" v-model="title" allow-clear /> |
|||
<span class="ml-3"> 类型:</span> |
|||
<a-select @change="handleChangeSelect" class="ml-3" style="width: 150px" placeholder="类型" allow-clear> |
|||
<a-select-option :key="item" :value="index + 1" v-for="(item, index) in statusList">{{ item }}</a-select-option> |
|||
</a-select> |
|||
<span class="ml-3"> 栏目:</span> |
|||
<a-checkbox-group class="ml-3" @change="onChange"> |
|||
<a-checkbox class="my-2" v-for="(item, index) in bannersList" :key="index" :value="item.moldId">{{ item.moldName }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
|
|||
<a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button> |
|||
</div> |
|||
|
|||
<div class="flex-1"></div> |
|||
|
|||
<a-button type="primary" @click="showModal" class="editable-add-btn">增加</a-button> |
|||
|
|||
<!-- 添加 --> |
|||
<college-add :visible="visible" @closeModal="closeModal" @handleTableChange="handleTableChange" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CollegeAdd from './CollegeAdd.vue'; |
|||
import { queryMold } from 'config/api'; |
|||
|
|||
export default { |
|||
name: 'CollegeSearch', |
|||
components: { CollegeAdd }, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
title: '', |
|||
statusList: ['视频', '音频', 'ppt'], |
|||
bannersList: [], |
|||
banner: [], |
|||
type: '', |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getQueryMold(); |
|||
}, |
|||
methods: { |
|||
onChange(e) { |
|||
this.banner = e; |
|||
}, |
|||
|
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
|
|||
closeModal() { |
|||
this.visible = false; |
|||
}, |
|||
|
|||
handleChangeSelect(e) { |
|||
// this[type] = value; |
|||
this.type = e; |
|||
}, |
|||
|
|||
async handleTableChange() { |
|||
const { title, type, banner } = this; |
|||
// 传参 |
|||
const condition = { title, type, banner }; |
|||
await this.$emit('getListData', condition); |
|||
}, |
|||
async getQueryMold() { |
|||
try { |
|||
const res = await queryMold(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.bannersList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="stylus"></style> |
|||
Loading…
Reference in new issue