forked from TALL/check-work
13 changed files with 409 additions and 134 deletions
|
After Width: | Height: | Size: 84 KiB |
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<div> |
|||
<a-button @click="showModal" type="primary">需求填报</a-button> |
|||
|
|||
<a-modal |
|||
:confirm-loading="confirmLoading" |
|||
:title="title" |
|||
:visible="visible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
width="50%" |
|||
> |
|||
<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" |
|||
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" |
|||
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" |
|||
class="mb-3" |
|||
label="需求类别" |
|||
> |
|||
<a-checkbox-group @change="onChange" class="line-height-30"> |
|||
<a-checkbox value="1">技术研发（关键、核心技术）</a-checkbox> |
|||
<a-checkbox value="2">产品研发（产品升级、新产品研发）</a-checkbox> |
|||
<a-checkbox value="3">技术改造（设备研发、生产条件）</a-checkbox> |
|||
<a-checkbox value="4">技术配套（技术、产品等配套合作）</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="needContent" |
|||
></quill-editor> |
|||
</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 { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
import 'quill/dist/quill.bubble.css'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
export default { |
|||
name: 'Enroll', |
|||
components: { quillEditor }, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
visible: false, |
|||
title: '需求填报', |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
needContent: ``, |
|||
editorOption: { |
|||
placeholder: '请在这里输入', |
|||
modules: { |
|||
toolbar: [ |
|||
['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'], //上传图片、上传视频 |
|||
], |
|||
}, |
|||
}, |
|||
platform: { |
|||
needName: '', |
|||
technicalField: '', |
|||
basics: '', |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
// 需求截止时间 |
|||
changeNeedTime(date, dateString) { |
|||
this.platform.buildTime = this.$moment(date).unix() * 1000; |
|||
// console.log(this.$moment(date).unix(), dateString); |
|||
}, |
|||
|
|||
onEditorReady(editor) { |
|||
// 准备编辑器 |
|||
}, |
|||
onEditorBlur() {}, // 失去焦点事件 |
|||
onEditorFocus() {}, // 获得焦点事件 |
|||
onEditorChange() { |
|||
// 内容改变事件 |
|||
// console.log(this.content); |
|||
}, |
|||
// 上传图片事件 |
|||
fileChange(info) { |
|||
console.log(info); |
|||
// this.fileList = info.fileList; |
|||
// if (info.file.status === 'done') { |
|||
// this.files = []; |
|||
// this.files = info.fileList[0].response.data[0].id; |
|||
// console.log(this.files); |
|||
// } |
|||
}, |
|||
|
|||
// 显示表单输入框 |
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
|
|||
// 点击确定 |
|||
handleOk() { |
|||
this.subMitAdd(); |
|||
}, |
|||
// 加入接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
// const params = { param: {} }; |
|||
// const res = await apply(params); |
|||
// const { code, msg, data } = res.data; |
|||
// if (code === 200) { |
|||
// this.$message.success('申请成功'); |
|||
// this.visible = false; |
|||
// this.confirmLoading = false; |
|||
// for (let key in this.platform) { |
|||
// this.platform[key] = ''; |
|||
// } |
|||
// this.platform.isTel = false; |
|||
// } else { |
|||
// throw msg; |
|||
// this.confirmLoading = false; |
|||
// } |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</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