wiki_platform_admin/src/views/College/components/CollegeAdd.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal
      :mask-closable="false"
      @cancel="$emit('closeModal')"
      destroy-on-close
      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
            @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 :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="时间">
          <a-date-picker class="ml-3" @change="changeBirthday" show-time />
        </a-form-item>
        <!-- 类型 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="类型">
          <a-select @change="getUse($event, 'type')" class="ml-3" default-value="视频" style="width: 100%">
            <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 :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="是否在首页展示">
          <a-radio-group class="ml-3" v-model="whetherShow" @change="onChange">
            <a-radio :value="0"> 否 </a-radio>
            <a-radio :value="1"> 是 </a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- 栏目 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="栏目">
          <a-checkbox-group class="ml-3" @change="onChangeBan">
            <a-checkbox class="my-2" v-for="(item, index) in bannersList" :key="index" :value="item.moldId">{{ item.moldName }}</a-checkbox>
          </a-checkbox-group>
        </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 { upload, academySave, queryMold } from 'config/api';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };

export default {
  name: 'CollegeAdd',
  props: { visible: { type: Boolean, default: false } },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'r-d-member-add' }),
      upload: upload,
      fileList: [],
      //限制文件上传的格式和大小
      beforeUpload: file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('仅支持 JPG/PNG 格式的图片!');
          this.fileList = [];
        }
        return isJpgOrPng;
      },
      recStatusList: ['视频', '音频', 'PPT'],
      bannersList: [],
      banner: [],
      title: '',
      contentUrl: '',
      intro: '',
      times: '',
      type: 1,
      whetherShow: 0,
    };
  },
  created() {
    this.getQueryMold();
  },
  methods: {
    changeBirthday(date, dateString) {
      // console.log(this.$moment(date._e).format('YYYY-MM-DD HH:mm:ss'));
      this.times = this.$moment(date._e).format('YYYY-MM-DD HH:mm:ss');
    },
    onChange(e) {
      console.log(this.whetherShow);
    },
    onChangeBan(e) {
      this.banner = e;
    },
    // 上传图片事件
    handleChange(info) {
      // this.fileList = fileList;
      console.log(info);
      if (info.file.status === 'done') {
        this.fileList.push(info.file.response.data[0].id);
      } else if (info.file.status === 'removed') {
        this.fileList = info.fileList;
      }
    },
    changeIpt(e, str) {
      this[str] = e.target.value;
    },
    getUse(e, str) {
      this[str] = e;
    },
    async getQueryMold() {
      try {
        const res = await queryMold();
        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) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.fileList.length > 0) {
            try {
              this.picId = this.fileList[0];
              const params = {
                param: {
                  banners: this.banner,
                  contentUrl: this.contentUrl,
                  coverPicture: this.fileList[0],
                  intro: this.intro,
                  times: this.times,
                  title: this.title,
                  type: this.type,
                  whetherShow: this.whetherShow,
                },
              };
              const res = await academySave(params);
              const { data, msg, code } = res.data;
              if (code === 200) {
                this.$emit('handleTableChange');
                this.$emit('closeModal');
                this.$message.success('添加成功');
              } else {
                throw msg;
              }
            } catch (error) {
              this.$message.error(error || '添加失败');
            }
          } else {
            this.$message.error('请上传图片');
          }
        }
      });
    },
  },
};
</script>

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