15 changed files with 1017 additions and 297 deletions
@ -1,230 +1,278 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 添加 --> |
|||
<div> |
|||
<a-button @click="showModal" type="primary">增加</a-button> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@cancel="$emit('closeModal')" |
|||
destroy-on-close |
|||
footer |
|||
title="创业学院添加" |
|||
v-model="visible" |
|||
width="700px" |
|||
:confirm-loading="confirmLoading" |
|||
:title="title" |
|||
:visible="visible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
width="50%" |
|||
> |
|||
<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 v-show="fileList.length - 0 === 0"> <a-icon type="upload" />选择封面图片 </a-button> |
|||
</a-upload> |
|||
<a-form :form="form"> |
|||
<!-- 需求名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求名称"> |
|||
<a-input placeholder="请输入需求名称..." v-model.trim="platform.needName" /> |
|||
</a-form-item> |
|||
<!-- 时间 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="时间"> |
|||
<a-date-picker class="ml-3" @change="changeBirthday" show-time /> |
|||
<!-- 公司名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="公司名称"> |
|||
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
|||
</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 :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="技术领域"> |
|||
<a-input placeholder="请输入技术领域..." v-model.trim="platform.technicalField" /> |
|||
</a-form-item> |
|||
<!-- 是否在首页展示 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="是否在首页展示"> |
|||
<a-radio-group class="ml-3" v-model="whetherShow" @change="onChange"> |
|||
<a-radio :value="0"> 否 </a-radio> |
|||
<a-radio :value="1"> 是 </a-radio> |
|||
</a-radio-group> |
|||
<!-- 需求截止时间 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="截止时间"> |
|||
<a-date-picker @change="changeNeedTime" style="width: 100%" /> |
|||
</a-form-item> |
|||
<!-- 栏目 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="栏目"> |
|||
<a-checkbox-group class="ml-3" @change="onChangeBan"> |
|||
<a-checkbox class="my-2" v-for="(item, index) in bannersList" :key="index" :value="item.moldId">{{ item.moldName }}</a-checkbox> |
|||
<!-- 需求类别 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求类别"> |
|||
<a-checkbox-group @change="onChange" class="line-height-30"> |
|||
<a-checkbox style="width: 100%" v-for="(item, index) in typeList" :key="index" :value="item.id">{{ item.name }}</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 :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求内容"> |
|||
<quill-editor |
|||
:options="editorOption" |
|||
@blur="onEditorBlur($event)" |
|||
@change="onEditorChange($event)" |
|||
@focus="onEditorFocus($event)" |
|||
class="editor-box" |
|||
ref="myQuillEditor" |
|||
v-model="needContent" |
|||
></quill-editor> |
|||
<a-upload |
|||
accept="image/png, image/jpeg" |
|||
name="files" |
|||
:multiple="false" |
|||
style="display: none" |
|||
:action="action" |
|||
@change="fileChange" |
|||
> |
|||
<a-button id="upload-img"> <a-icon type="upload" /></a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 现有基础 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="现有基础"> |
|||
<a-textarea |
|||
placeholder="（已经开展的工作、所处阶段、投入资金和人力、仪器 设备、生产条件等）" |
|||
style="min-height: 100px" |
|||
v-model.trim="platform.basics" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { upload, academySave, queryMold } from 'config/api'; |
|||
import { mapState } from 'vuex'; |
|||
import { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
import 'quill/dist/quill.bubble.css'; |
|||
import { upload, addTelease, findTypeList } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
|
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
|||
['blockquote', 'code-block'], //引用，代码块 |
|||
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
|||
[{ list: 'ordered' }, { list: 'bullet' }], //列表 |
|||
[{ script: 'sub' }, { script: 'super' }], // 上下标 |
|||
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
|||
[{ direction: 'rtl' }], // 文本方向 |
|||
// [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
|||
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
|||
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
|||
// [{ font: [] }], //字体 |
|||
[{ align: [] }], //对齐方式 |
|||
['clean'], //清除字体样式 |
|||
['image', 'video'], //上传图片、上传视频 |
|||
]; |
|||
|
|||
export default { |
|||
name: 'CollegeAdd', |
|||
props: { visible: { type: Boolean, default: false } }, |
|||
name: 'Enroll', |
|||
components: { quillEditor }, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
visible: false, |
|||
title: '发榜', |
|||
action: upload, |
|||
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 格式的图片!'); |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
needContent: ``, |
|||
editorOption: { |
|||
placeholder: '在这里输入...', |
|||
modules: { |
|||
toolbar: { |
|||
container: toolbarOptions, // 工具栏 |
|||
handlers: { |
|||
image: function(value) { |
|||
if (value) { |
|||
// alert('自定义图片'); |
|||
document.getElementById('upload-img').click(); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
recStatusList: ['视频', '音频', 'PPT'], |
|||
bannersList: [], |
|||
banner: [], |
|||
title: '', |
|||
contentUrl: '', |
|||
intro: '', |
|||
times: '', |
|||
type: 1, |
|||
whetherShow: 0, |
|||
}, |
|||
video: function(value) { |
|||
if (value) { |
|||
alert('自定义视频'); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
platform: { |
|||
needName: '', |
|||
technicalField: '', |
|||
basics: '', |
|||
companyName: '', |
|||
type: [], |
|||
buildTime: '', |
|||
}, |
|||
hideMessage: null, |
|||
typeList: [], |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['anyringToken']), |
|||
created() { |
|||
this.getQueryMold(); |
|||
this.findType(); |
|||
}, |
|||
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'); |
|||
// 需求截止时间 |
|||
changeNeedTime(date, dateString) { |
|||
this.platform.buildTime = this.$moment(date).format('YYYY-MM-DD HH:mm:ss'); |
|||
// console.log(this.$moment(date).unix(), dateString); |
|||
}, |
|||
onChange(e) { |
|||
console.log(this.whetherShow); |
|||
|
|||
onEditorReady(editor) { |
|||
// 准备编辑器 |
|||
}, |
|||
onEditorBlur() {}, // 失去焦点事件 |
|||
onEditorFocus() {}, // 获得焦点事件 |
|||
onEditorChange() { |
|||
// 内容改变事件 |
|||
// console.log(this.content); |
|||
}, |
|||
onChangeBan(e) { |
|||
this.banner = e; |
|||
onChange(e) { |
|||
console.log(e); |
|||
this.platform.type = e; |
|||
}, |
|||
// 上传图片事件 |
|||
handleChange(info) { |
|||
// this.fileList = fileList; |
|||
fileChange(info) { |
|||
console.log(info); |
|||
if (info.file.status === 'uploading') { |
|||
if (!this.hideMessage) { |
|||
this.hideMessage = this.$message.loading('上传中...'); |
|||
} |
|||
} |
|||
// this.fileList = info.fileList; |
|||
if (info.file.status === 'done') { |
|||
this.fileList.push(info.file.response.data[0].id); |
|||
} else if (info.file.status === 'removed') { |
|||
this.fileList = info.fileList; |
|||
this.files = []; |
|||
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
|||
this.needContent += img; |
|||
setTimeout(this.hideMessage, 0); |
|||
this.$message.success('上传成功'); |
|||
} |
|||
}, |
|||
changeIpt(e, str) { |
|||
this[str] = e.target.value; |
|||
|
|||
// 显示表单输入框 |
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
getUse(e, str) { |
|||
this[str] = e; |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
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); |
|||
} |
|||
// 点击确定 |
|||
handleOk() { |
|||
this.subMitAdd(); |
|||
}, |
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
if (this.fileList.length > 0) { |
|||
// 加入接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
this.picId = this.fileList[0]; |
|||
const params = { |
|||
param: { |
|||
banners: this.banners, |
|||
contentUrl: this.contentUrl, |
|||
coverPicture: this.fileList[0], |
|||
intro: this.intro, |
|||
times: this.times, |
|||
title: this.title, |
|||
type: this.type, |
|||
whetherShow: this.whetherShow, |
|||
address: '123', |
|||
title: this.platform.needName, |
|||
content: this.needContent, |
|||
servics: this.platform.technicalField, |
|||
companyName: this.platform.companyName, |
|||
deadline: this.platform.buildTime, |
|||
existingBasis: this.platform.basics, |
|||
models: this.platform.type, |
|||
}, |
|||
}; |
|||
const res = await academySave(params); |
|||
const { data, msg, code } = res.data; |
|||
const res = await addTelease(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$emit('handleTableChange'); |
|||
this.$emit('closeModal'); |
|||
this.$message.success('添加成功'); |
|||
this.visible = false; |
|||
this.confirmLoading = false; |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
} else { |
|||
throw msg; |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '添加失败'); |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
|
|||
// 查询分类列表 |
|||
async findType() { |
|||
try { |
|||
const res = await findTypeList(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.typeList = data; |
|||
} else { |
|||
this.$message.error('请上传图片'); |
|||
console.log(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,321 @@ |
|||
<template> |
|||
<div> |
|||
<a-modal :confirm-loading="confirmLoading" :title="title" :visible="editVisible" @cancel="handleCancel" @ok="handleOk" width="50%"> |
|||
<a-spin v-if="platform.id === ''" /> |
|||
<a-form :form="form" v-else> |
|||
<!-- 需求名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求名称"> |
|||
<a-input placeholder="请输入需求名称..." v-model.trim="platform.title" /> |
|||
</a-form-item> |
|||
<!-- 公司名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="公司名称"> |
|||
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
|||
</a-form-item> |
|||
<!-- 技术领域 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="技术领域"> |
|||
<a-input placeholder="请输入技术领域..." v-model.trim="platform.servics" /> |
|||
</a-form-item> |
|||
<!-- 需求截止时间 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="截止时间"> |
|||
<a-date-picker :default-value="$moment(platform.deadline, dateFormat)" @change="changeNeedTime" style="width: 100%" /> |
|||
</a-form-item> |
|||
<!-- 需求类别 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求类别"> |
|||
<a-checkbox-group :default-value="platform.models" @change="onChange" class="line-height-30"> |
|||
<a-checkbox style="width: 100%" v-for="(item, index) in typeList" :key="index" :value="item.id">{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<!-- 需求内容 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求内容"> |
|||
<quill-editor |
|||
:options="editorOption" |
|||
@blur="onEditorBlur($event)" |
|||
@change="onEditorChange($event)" |
|||
@focus="onEditorFocus($event)" |
|||
class="editor-box" |
|||
ref="myQuillEditor" |
|||
v-model="platform.content" |
|||
></quill-editor> |
|||
<a-upload |
|||
accept="image/png, image/jpeg" |
|||
name="files" |
|||
:multiple="false" |
|||
style="display: none" |
|||
:action="action" |
|||
@change="fileChange" |
|||
> |
|||
<a-button id="upload-img"> <a-icon type="upload" /></a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 现有基础 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="现有基础"> |
|||
<a-textarea |
|||
placeholder="（已经开展的工作、所处阶段、投入资金和人力、仪器 设备、生产条件等）" |
|||
style="min-height: 100px" |
|||
v-model.trim="platform.existingBasis" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
import 'quill/dist/quill.bubble.css'; |
|||
import { upload, updateTelease, findTypeList, selTeleaseById } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
|||
['blockquote', 'code-block'], //引用，代码块 |
|||
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
|||
[{ list: 'ordered' }, { list: 'bullet' }], //列表 |
|||
[{ script: 'sub' }, { script: 'super' }], // 上下标 |
|||
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
|||
[{ direction: 'rtl' }], // 文本方向 |
|||
// [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
|||
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
|||
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
|||
// [{ font: [] }], //字体 |
|||
[{ align: [] }], //对齐方式 |
|||
['clean'], //清除字体样式 |
|||
['image', 'video'], //上传图片、上传视频 |
|||
]; |
|||
|
|||
export default { |
|||
name: 'ChallengeEdit', |
|||
components: { quillEditor }, |
|||
props: { |
|||
editVisible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
editData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
title: '发榜', |
|||
action: upload, |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
needContent: ``, |
|||
editorOption: { |
|||
placeholder: '在这里输入...', |
|||
modules: { |
|||
toolbar: { |
|||
container: toolbarOptions, // 工具栏 |
|||
handlers: { |
|||
image: function(value) { |
|||
if (value) { |
|||
// alert('自定义图片'); |
|||
document.getElementById('upload-img').click(); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
video: function(value) { |
|||
if (value) { |
|||
alert('自定义视频'); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
dateFormat: 'YYYY-MM-DD', |
|||
platform: { |
|||
id: '', |
|||
title: '', |
|||
companyName: '', |
|||
content: '', |
|||
servics: '', |
|||
deadline: '', |
|||
existingBasis: '', |
|||
models: [], |
|||
}, |
|||
hideMessage: null, |
|||
typeList: [], |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['anyringToken']), |
|||
watch: { |
|||
editVisible(val) { |
|||
if (val) { |
|||
this.confirmLoading = true; |
|||
this.getDetail(this.editData.bid); |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
this.findType(); |
|||
}, |
|||
methods: { |
|||
// 需求截止时间 |
|||
changeNeedTime(date, dateString) { |
|||
this.platform.buildTime = this.$moment(date).format('YYYY-MM-DD HH:mm:ss'); |
|||
// console.log(this.$moment(date).unix(), dateString); |
|||
}, |
|||
async getDetail(id) { |
|||
try { |
|||
const params = { param: { id } }; |
|||
const res = await selTeleaseById(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.platform.id = data.bid; |
|||
this.platform.title = data.title; |
|||
this.platform.content = data.content; |
|||
this.platform.companyName = data.companyName; |
|||
this.platform.servics = data.servics; |
|||
this.platform.deadline = data.deadline; |
|||
this.platform.existingBasis = data.existingBasis; |
|||
this.platform.models = this.getModelId(data.list); |
|||
console.log(this.platform.models); |
|||
this.confirmLoading = false; |
|||
} else { |
|||
console.log(msg); |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
getModelId(list) { |
|||
console.log(list); |
|||
this.platform.models = []; |
|||
let idList = []; |
|||
for (var i = 0; i < list.length; i++) { |
|||
idList.push(list[i].moid); |
|||
} |
|||
return idList; |
|||
}, |
|||
onEditorReady(editor) { |
|||
// 准备编辑器 |
|||
}, |
|||
onEditorBlur() {}, // 失去焦点事件 |
|||
onEditorFocus() {}, // 获得焦点事件 |
|||
onEditorChange() { |
|||
// 内容改变事件 |
|||
// console.log(this.content); |
|||
}, |
|||
onChange(e) { |
|||
console.log(e); |
|||
this.platform.models = e; |
|||
}, |
|||
// 上传图片事件 |
|||
fileChange(info) { |
|||
console.log(info); |
|||
if (info.file.status === 'uploading') { |
|||
if (!this.hideMessage) { |
|||
this.hideMessage = this.$message.loading('上传中...'); |
|||
} |
|||
} |
|||
// this.fileList = info.fileList; |
|||
if (info.file.status === 'done') { |
|||
this.files = []; |
|||
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
|||
this.needContent += img; |
|||
setTimeout(this.hideMessage, 0); |
|||
this.$message.success('上传成功'); |
|||
} |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
this.$emit('closeModal', false); |
|||
}, |
|||
// 点击确定 |
|||
handleOk() { |
|||
this.subMitAdd(); |
|||
}, |
|||
// 修改接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
const params = { |
|||
param: { |
|||
id: this.platform.id, |
|||
title: this.platform.title, |
|||
content: this.platform.content, |
|||
servics: this.platform.servics, |
|||
deadline: this.platform.deadline, |
|||
existingBasis: this.platform.existingBasis, |
|||
models: this.platform.models, |
|||
}, |
|||
}; |
|||
const res = await updateTelease(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
this.$emit('getData'); |
|||
this.handleCancel(); |
|||
this.confirmLoading = false; |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
} else { |
|||
throw msg; |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
|
|||
// 查询分类列表 |
|||
async findType() { |
|||
try { |
|||
const res = await findTypeList(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.typeList = data; |
|||
} else { |
|||
console.log(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<a-input placeholder="揭榜人" style="width: 150px" v-model="accepterName" 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" v-for="(item, index) in statusList">{{ item }}</a-select-option> |
|||
</a-select> |
|||
|
|||
<a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button> |
|||
</div> |
|||
|
|||
<div class="flex-1"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UnveSearch', |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
title: '', |
|||
statusList: ['待审核', '成功', '未成功'], |
|||
orderStatus: '', |
|||
accepterName: '', |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleChangeSelect(e) { |
|||
this.orderStatus = e; |
|||
}, |
|||
handleTableChange() { |
|||
const { orderStatus, accepterName } = this; |
|||
// 传参 |
|||
const condition = { orderStatus, accepterName }; |
|||
this.$emit('getData', condition); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<div> |
|||
<a-modal |
|||
:footer="false" |
|||
:confirm-loading="confirmLoading" |
|||
:title="title" |
|||
:visible="unvuVisible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
width="80%" |
|||
> |
|||
<unve-search @getData="getData" /> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="dataList" |
|||
:loading="loading" |
|||
:row-key="record => record.id" |
|||
:pagination="pagination" |
|||
@change="handleTableChange" |
|||
bordered |
|||
class="white" |
|||
> |
|||
<template slot="id" slot-scope="text, record, index"> |
|||
<span>{{ index + 1 }}</span> |
|||
</template> |
|||
<template slot="orderStatus" slot-scope="text, record"> |
|||
<div style="width: 120px; text-align: center; margin: auto" v-if="!record.editable"> |
|||
<span v-if="record.orderStatus === 0">待审核</span> |
|||
<span v-else-if="record.orderStatus === 1">成功</span> |
|||
<span v-else-if="record.orderStatus === 2">未成功</span> |
|||
</div> |
|||
<div v-else> |
|||
<a-select style="width: 120px" @change="changeRecord"> |
|||
<a-select-option v-for="(item, index) in statusList" :key="index" :value="index"> |
|||
{{ item }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</div> |
|||
</template> |
|||
<template slot="edit" slot-scope="text, record, index"> |
|||
<a-icon v-if="!record.editable" @click="changeStatus(record, index)" class="pointer" theme="twoTone" type="edit" /> |
|||
<span v-else> |
|||
<a @click="saveStatus(index)">保存</a> |
|||
<a class="ml-3" @click="changeStatus(record.id, index)">取消</a> |
|||
</span> |
|||
</template> |
|||
</a-table> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import UnveSearch from './UnveSearch.vue'; |
|||
import { selfulUnveiling, upUnveiling } from 'config/api'; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '揭榜人', |
|||
align: 'center', |
|||
dataIndex: 'accepterName', |
|||
key: 'accepterName', |
|||
}, |
|||
{ |
|||
title: '揭榜单位', |
|||
align: 'center', |
|||
dataIndex: 'unit', |
|||
key: 'unit', |
|||
}, |
|||
{ |
|||
title: '手机号', |
|||
align: 'center', |
|||
dataIndex: 'phone', |
|||
key: 'phone', |
|||
}, |
|||
{ |
|||
title: '时间', |
|||
align: 'center', |
|||
dataIndex: 'times', |
|||
key: 'times', |
|||
}, |
|||
{ |
|||
title: '方案简述', |
|||
align: 'center', |
|||
dataIndex: 'planIntro', |
|||
key: 'planIntro', |
|||
}, |
|||
{ |
|||
title: '揭榜状态', |
|||
align: 'center', |
|||
dataIndex: 'orderStatus', |
|||
key: 'orderStatus', |
|||
scopedSlots: { customRender: 'orderStatus' }, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
width: '15%', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'UnveilingDate', |
|||
components: { UnveSearch }, |
|||
props: { |
|||
unvuVisible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
objData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
title: '发榜', |
|||
confirmLoading: false, |
|||
loading: false, |
|||
columns: columns, |
|||
pagination: { current: 1, pageSize: 10 }, |
|||
billboardId: '', |
|||
orderStatus: '', |
|||
accepterName: '', |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
dataList: [], |
|||
statusList: ['待审核', '成功', '未成功'], |
|||
status: '', |
|||
id: '', |
|||
}; |
|||
}, |
|||
watch: { |
|||
objData(val) { |
|||
if (val.bid) { |
|||
this.getData(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleCancel() { |
|||
this.$emit('closeModal1', false); |
|||
}, |
|||
handleOk() { |
|||
this.$emit('closeModal1', false); |
|||
}, |
|||
async getData(condition) { |
|||
try { |
|||
if (condition && condition.current) { |
|||
this.pageNum = condition.current; |
|||
this.pageSize = condition.pageSize; |
|||
} else if (condition) { |
|||
this.orderStatus = condition.orderStatus; |
|||
this.accepterName = condition.accepterName; |
|||
this.pageNum = 1; |
|||
this.pageSize = 10; |
|||
} |
|||
const params = { |
|||
param: { |
|||
accepterName: this.accepterName, |
|||
billboardId: this.objData.bid, |
|||
orderStatus: this.orderStatus, |
|||
pageNum: this.pageNum, |
|||
pageSize: this.pageSize, |
|||
}, |
|||
}; |
|||
const res = await selfulUnveiling(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.dataList = data.list; |
|||
for (let i = 0; i < this.dataList.length; i++) { |
|||
this.dataList.editable = true; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.getData(); |
|||
}, |
|||
changeStatus(data, index) { |
|||
const newDataList = [...this.dataList]; |
|||
newDataList[index].editable = !newDataList[index].editable; |
|||
this.dataList = newDataList; |
|||
this.status = data.orderStatus; |
|||
this.id = data.id; |
|||
}, |
|||
changeRecord(e) { |
|||
this.status = e; |
|||
}, |
|||
async saveStatus(index) { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
id: this.id, |
|||
orderStatus: this.status, |
|||
}, |
|||
}; |
|||
const res = await upUnveiling(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
const newDataList = [...this.dataList]; |
|||
newDataList[index].editable = !newDataList[index].editable; |
|||
this.dataList = newDataList; |
|||
this.getData(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue