article-mobile/src/views/adminCenter/topic/edit.vue

<template>
  <div id="edit">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <van-nav-bar :title="pageTitle" left-text="取消" @click-left="toCancel" :right-text="id ? '修改' : '发表'" @click-right="toSubmit" />
        </el-col>
        <el-col :span="24">
          <van-form ref="form">
            <van-field name="type" label="话题类型">
              <template #input>
                <van-radio-group v-model="form.type" direction="horizontal">
                  <van-radio name="0">图文</van-radio>
                  <van-radio name="1">视频</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="uploader" label="图片" v-if="form.type === '0'">
              <template #input>
                <van-uploader :fileList="form.imgUrl" :after-read="file => toUpload(file, 'imgUrl')" @delete="file => toDelete(file, 'imgUrl')" />
              </template>
            </van-field>
            <van-field name="uploader" label="视频" v-if="form.type === '1'">
              <template #input>
                <van-uploader
                  :fileList="form.fileUrl"
                  :max-count="1"
                  :after-read="file => toUpload(file, 'fileUrl')"
                  max-size="11534336"
                  @delete="file => toDelete(file, 'fileUrl')"
                  @oversize="onOversize"
                />
              </template>
            </van-field>
            <van-field v-model="form.origin" name="origin" label="信息来源" placeholder="请输入信息来源" />
            <van-field v-model="form.website" name="website" label="网址" placeholder="请输入网址" />
            <van-field v-model="form.content" rows="2" autosize label="文章内容" type="textarea" placeholder="请输入本文内容" />
          </van-form>
        </el-col>
        <el-col :span="24" class="foot">
          <foot></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const moment = require('moment');
const _ = require('lodash');
import Toast from 'vant';
import foot from '@/layout/common/foot.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: upload } = createNamespacedHelpers('upload');
const { mapActions: topic } = createNamespacedHelpers('topic');
export default {
  name: 'edit',
  props: {},
  components: { foot },
  data: function() {
    return {
      form: {
        imgUrl: [],
        fileUrl: [],
      },
    };
  },
  created() {
    if (this.id) this.search();
  },
  methods: {
    ...upload(['upload']),
    ...topic(['create', 'fetch', 'update']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res, null, res.errmsg || '未找到指定数据')) {
        this.$set(this, `form`, res.data);
      }
    },
    async toSubmit() {
      let dup = _.cloneDeep(this.form);
      if (dup.type === '0') delete dup.fileUrl;
      else if (dup.type === '1') delete dup.imgUrl;
      else delete dup.fileUrl, delete dup.imgUrl;
      let res;
      if (this.id) {
        dup.renew_time = moment().format('YYYY-MM-DD HH:mm:ss');
        res = await this.update(dup);
      } else {
        // user_id,origin需要加进数据中
        dup.user_id = this.user._id;
        res = await this.create(dup);
      }
      if (this.$checkRes(res, '保存成功', res.errmsg || '保存失败')) {
        this.toCancel();
      }
    },
    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'topic' });
      if (this.$checkRes(res)) {
        this.form[model].push({ url: res.uri });
      }
    },
    toDelete(file, model) {
      const index = this.form[model].findIndex(f => _.isEqual(f, file));
      this.form[model].splice(index, 1);
    },
    toCancel() {
      this.$router.push('/adminCommunity');
    },
    onOversize() {
      Toast('文件大小不能超过 10MB');
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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