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

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal
      :maskClosable="false"
      @cancel="$emit('closeModal')"
      destroyOnClose
      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="[
                      'address',
                      {
                        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-range-picker
            @change="onChange"
            format="YYYY-MM-DD HH:mm:ss"
            show-time
            style="width:100%"
          />
        </a-form-item>
        <!-- 活动类型 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="活动类型"
        >
          <a-select @change="changeType" placeholder="活动类型" style="width:100%">
            <a-select-option
              :key="index"
              :value="category.id"
              v-for="(category, index) in types"
            >{{ category.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <!-- 主讲人 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="主讲人"
        >
          <a-input
            placeholder="主讲人"
            v-decorator="[
                      'name',
                      {
                        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="[
                      'organization'
                    ]"
          />
        </a-form-item>

        <!-- 其他事宜 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="其他事宜"
        >
          <a-input
            placeholder="其他事宜"
            v-decorator="[
                      'other'
                    ]"
          />
        </a-form-item>

        <!-- 会议主题 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="会议主题"
        >
          <a-input
            placeholder="会议主题"
            v-decorator="[
                      'theme'
                    ]"
          />
        </a-form-item>

        <!-- 培训对象 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="培训对象"
        >
          <a-input
            placeholder="培训对象"
            v-decorator="[
                      'trainees'
                    ]"
          />
        </a-form-item>

        <!-- 报名方式 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="报名方式"
        >
          <a-input
            placeholder="报名方式"
            v-decorator="[
                      'way'
                    ]"
          />
        </a-form-item>

        <!-- 活动结束内容 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="活动结束内容"
        >
          <a-textarea
            placeholder="活动结束内容"
            v-decorator="[
                      'endContent',
                    ]"
          />
        </a-form-item>

        <!-- 详情 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="详情"
          required
        >
          <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 { saveActivity } 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' }),
      types: [
        { id: 0, name: '路演' },
        { id: 1, name: '沙龙' },
        { id: 2, name: '论坛' },
      ],
      activityType: '',
      maxSize: 2048,
      content: '',
      placeholder: '请输入...',
      releaseTime: '', // 开始时间
      closeTime: '', // 结束时间
    };
  },

  methods: {
    // 类型
    changeType(value) {
      console.log('value: ', value);
      this.activityType = value;
    },

    // 举办时间
    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      this.releaseTime = dateStrings[0];
      this.closeTime = dateStrings[1];
    },

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

    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            console.log('values: ', values);
            const { releaseTime, closeTime, content, activityType } = this;
            const params = { param: values };
            params.param.releaseTime = releaseTime;
            params.param.closeTime = closeTime;
            params.param.content = content;
            params.param.activityType = activityType;
            console.log('params: ', params);
            const res = await saveActivity(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>