green.v0.3/src/views/Challenge/components/Enroll.vue

<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() {
      console.log(this.needContent);
      // 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>