green-valley-admin/src/components/IndustryInfo/ActivityAdd.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal :closable="false" 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
            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
            placeholder="地点"
            v-decorator="[
                      'site',
                      {
                        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="时间"
          required
        >
          <a-date-picker
            @change="onChange"
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择时间"
            show-time
          />
        </a-form-item>

        <!-- 发布部门 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="发布部门"
        >
          <a-input
            placeholder="发布部门"
            v-decorator="[
                      'spreadDepartment',
                      {
                        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-textarea
            placeholder="简介"
            v-decorator="[
                      'description',
                    ]"
          />
        </a-form-item>
        <!-- 详情 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="详情"
        >
          <quill-editor :max-size="maxSize" :placeholder="placeholder" @changeInput="changeInput" />
        </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 { addIndustryInfo } from 'config/api';
import QuillEditor from 'components/QuillEditor/QuillEditor.vue';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
export default {
  name: 'ActivityAdd',
  props: { visible: { type: Boolean, default: false } },
  components: { QuillEditor },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'activity-add' }),
      maxSize: 2048,
      content: '',
      placeholder: '请输入...',
      time: '',
    };
  },

  methods: {
    // 举办时间
    onChange(value, dateString) {
      this.time = dateString;
    },

    // 修改内容
    changeInput(value) {
      this.content = value;
    },

    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            const { content, time } = this;
            const params = { param: values };
            params.param.time = time;
            params.param.content = content;
            const res = await addIndustryInfo(params);
            const { data, msg, code } = res.data;
            if (code === 200) {
              this.$message.success('添加成功');
              this.$emit('closeModal');
            } else {
              this.$emit('closeModal');
              throw msg;
            }
          } catch (error) {
            this.$message.error(error || '添加失败');
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus"></style>