15 changed files with 1017 additions and 297 deletions
@ -1,230 +1,278 @@ |
|||||
<template> |
<template> |
||||
<div class="d-flex flex-wrap pb-3"> |
<div> |
||||
<!-- 添加 --> |
<a-button @click="showModal" type="primary">增加</a-button> |
||||
<a-modal |
<a-modal |
||||
:mask-closable="false" |
|
||||
@cancel="$emit('closeModal')" |
|
||||
destroy-on-close |
destroy-on-close |
||||
footer |
:confirm-loading="confirmLoading" |
||||
title="创业学院添加" |
:title="title" |
||||
v-model="visible" |
:visible="visible" |
||||
width="700px" |
@cancel="handleCancel" |
||||
|
@ok="handleOk" |
||||
|
width="50%" |
||||
> |
> |
||||
<a-form :form="form" @submit="handleSubmit"> |
<a-form :form="form"> |
||||
<!-- 标题 --> |
<!-- 需求名称 --> |
||||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="标题"> |
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求名称"> |
||||
<a-input |
<a-input placeholder="请输入需求名称..." v-model.trim="platform.needName" /> |
||||
@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-item> |
</a-form-item> |
||||
<!-- 时间 --> |
<!-- 公司名称 --> |
||||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="时间"> |
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="公司名称"> |
||||
<a-date-picker class="ml-3" @change="changeBirthday" show-time /> |
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
||||
</a-form-item> |
</a-form-item> |
||||
<!-- 类型 --> |
<!-- 技术领域 --> |
||||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="类型"> |
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="技术领域"> |
||||
<a-select @change="getUse($event, 'type')" class="ml-3" default-value="视频" style="width: 100%"> |
<a-input placeholder="请输入技术领域..." v-model.trim="platform.technicalField" /> |
||||
<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> |
||||
<!-- 是否在首页展示 --> |
<!-- 需求截止时间 --> |
||||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="是否在首页展示"> |
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="截止时间"> |
||||
<a-radio-group class="ml-3" v-model="whetherShow" @change="onChange"> |
<a-date-picker @change="changeNeedTime" style="width: 100%" /> |
||||
<a-radio :value="0"> 否 </a-radio> |
|
||||
<a-radio :value="1"> 是 </a-radio> |
|
||||
</a-radio-group> |
|
||||
</a-form-item> |
</a-form-item> |
||||
<!-- 栏目 --> |
<!-- 需求类别 --> |
||||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="栏目"> |
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求类别"> |
||||
<a-checkbox-group class="ml-3" @change="onChangeBan"> |
<a-checkbox-group @change="onChange" class="line-height-30"> |
||||
<a-checkbox class="my-2" v-for="(item, index) in bannersList" :key="index" :value="item.moldId">{{ item.moldName }}</a-checkbox> |
<a-checkbox style="width: 100%" v-for="(item, index) in typeList" :key="index" :value="item.id">{{ item.name }}</a-checkbox> |
||||
</a-checkbox-group> |
</a-checkbox-group> |
||||
</a-form-item> |
</a-form-item> |
||||
<a-form-item class="d-flex flex-row-reverse"> |
<!-- 需求内容 --> |
||||
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> |
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求内容"> |
||||
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> |
<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-item> |
||||
</a-form> |
</a-form> |
||||
</a-modal> |
</a-modal> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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 = { |
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
labelCol: { span: 6 }, |
labelCol: { span: 6 }, |
||||
wrapperCol: { span: 16 }, |
wrapperCol: { span: 18, offset: 6 }, |
||||
}; |
}; |
||||
|
const toolbarOptions = [ |
||||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
['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 { |
export default { |
||||
name: 'CollegeAdd', |
name: 'Enroll', |
||||
props: { visible: { type: Boolean, default: false } }, |
components: { quillEditor }, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
visible: false, |
||||
|
title: '发榜', |
||||
|
action: upload, |
||||
formItemLayout, |
formItemLayout, |
||||
tailItemLayout, |
formTailLayout, |
||||
form: this.$form.createForm(this, { name: 'r-d-member-add' }), |
confirmLoading: false, |
||||
upload: upload, |
needContent: ``, |
||||
fileList: [], |
editorOption: { |
||||
//限制文件上传的格式和大小 |
placeholder: '在这里输入...', |
||||
beforeUpload: file => { |
modules: { |
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
toolbar: { |
||||
if (!isJpgOrPng) { |
container: toolbarOptions, // 工具栏 |
||||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
handlers: { |
||||
|
image: function(value) { |
||||
|
if (value) { |
||||
|
// alert('自定义图片'); |
||||
|
document.getElementById('upload-img').click(); |
||||
|
} else { |
||||
|
this.quill.format('image', false); |
||||
} |
} |
||||
return isJpgOrPng; |
}, |
||||
}, |
video: function(value) { |
||||
recStatusList: ['视频', '音频', 'PPT'], |
if (value) { |
||||
bannersList: [], |
alert('自定义视频'); |
||||
banner: [], |
} else { |
||||
title: '', |
this.quill.format('image', false); |
||||
contentUrl: '', |
} |
||||
intro: '', |
}, |
||||
times: '', |
}, |
||||
type: 1, |
}, |
||||
whetherShow: 0, |
}, |
||||
|
}, |
||||
|
platform: { |
||||
|
needName: '', |
||||
|
technicalField: '', |
||||
|
basics: '', |
||||
|
companyName: '', |
||||
|
type: [], |
||||
|
buildTime: '', |
||||
|
}, |
||||
|
hideMessage: null, |
||||
|
typeList: [], |
||||
}; |
}; |
||||
}, |
}, |
||||
|
computed: mapState('user', ['anyringToken']), |
||||
created() { |
created() { |
||||
this.getQueryMold(); |
this.findType(); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
changeBirthday(date, dateString) { |
// 需求截止时间 |
||||
// console.log(this.$moment(date._e).format('YYYY-MM-DD HH:mm:ss')); |
changeNeedTime(date, dateString) { |
||||
this.times = this.$moment(date._e).format('YYYY-MM-DD HH:mm:ss'); |
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) { |
onChange(e) { |
||||
this.banner = e; |
console.log(e); |
||||
|
this.platform.type = e; |
||||
}, |
}, |
||||
// 上传图片事件 |
// 上传图片事件 |
||||
handleChange(info) { |
fileChange(info) { |
||||
// this.fileList = fileList; |
|
||||
console.log(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') { |
if (info.file.status === 'done') { |
||||
this.fileList.push(info.file.response.data[0].id); |
this.files = []; |
||||
} else if (info.file.status === 'removed') { |
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
||||
this.fileList = info.fileList; |
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 { |
handleOk() { |
||||
const res = await queryMold(); |
this.subMitAdd(); |
||||
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) { |
async subMitAdd() { |
||||
e.preventDefault(); |
this.confirmLoading = true; |
||||
this.form.validateFieldsAndScroll(async (err, values) => { |
|
||||
if (!err) { |
|
||||
if (this.fileList.length > 0) { |
|
||||
try { |
try { |
||||
this.picId = this.fileList[0]; |
|
||||
const params = { |
const params = { |
||||
param: { |
param: { |
||||
banners: this.banners, |
address: '123', |
||||
contentUrl: this.contentUrl, |
title: this.platform.needName, |
||||
coverPicture: this.fileList[0], |
content: this.needContent, |
||||
intro: this.intro, |
servics: this.platform.technicalField, |
||||
times: this.times, |
companyName: this.platform.companyName, |
||||
title: this.title, |
deadline: this.platform.buildTime, |
||||
type: this.type, |
existingBasis: this.platform.basics, |
||||
whetherShow: this.whetherShow, |
models: this.platform.type, |
||||
}, |
}, |
||||
}; |
}; |
||||
const res = await academySave(params); |
const res = await addTelease(params); |
||||
const { data, msg, code } = res.data; |
const { code, msg, data } = res.data; |
||||
if (code === 200) { |
if (code === 200) { |
||||
this.$emit('handleTableChange'); |
|
||||
this.$emit('closeModal'); |
|
||||
this.$message.success('添加成功'); |
this.$message.success('添加成功'); |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
} else { |
} else { |
||||
throw msg; |
throw msg; |
||||
|
this.confirmLoading = false; |
||||
} |
} |
||||
} catch (error) { |
} 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 { |
} else { |
||||
this.$message.error('请上传图片'); |
console.log(msg); |
||||
} |
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
} |
} |
||||
}); |
|
||||
}, |
}, |
||||
}, |
}, |
||||
}; |
}; |
||||
</script> |
</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