ycwh/admin_ui/src/views/ycwh/components/editFamousSnacks/index.vue

<template>
  <el-form ref="form" class="article-form" :model="form" :rules="rules" label-width="85px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" maxlength="80" show-word-limit />
    </el-form-item>
    <el-form-item label="所属菜系" prop="cuisineCode">
      <div style="display: flex;">
        <el-select v-model="form.cuisineCode" placeholder="请选择所属菜系">
          <el-option v-for="item in cuisineList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="所属地区" prop="regionId">
      <div style="display: flex;">
        <el-select v-model="form.regionId" placeholder="请选择所属区域">
          <el-option v-for="item in regionList" :key="item.key" :label="item.title" :value="item.key" />
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="副标题" prop="subTitle">
      <el-input v-model="form.subTitle" type="textarea" maxlength="90" show-word-limit />
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <!--<content-item v-if="contentItemVisible" ref="contentComp" :html.sync="form.content" />-->
      <avue-ueditor v-model="form.content" v-bind="editorOptions"></avue-ueditor>
    </el-form-item>
    <!--<el-form-item label="附件" prop="attachment">
        <el-upload class="upload-demo" :http-request="uploadImg" :data="{type:'att'}" :file-list="attachmentList" :on-remove="handleRemoveImg" :on-preview="handlePreview" :accept='["image/jpeg", "image/png", "image/tga", "image/gif", "image/bmp"]'>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>-->

    <el-form-item label="封面" prop="cover">
      <div style="display: flex;">
        <el-upload class="avatar-uploader cover-w16h9" style="margin-right: 30px !important;" :http-request="uploadImg" :data="{type:'img'}" :show-file-list="false" :before-upload="beforeAvatarUpload">
          <el-image fit="contain" v-if="form.cover" :src="form.cover" class="avatar"></el-image>
          <el-icon v-else class="el-icon-plus avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
        <!--1.建议长×宽比例为16:9，否则默认拉伸<br /> 2.像素最大不超过960*540<br />3.只能上传jpg/png文件，且不超过5MB-->
      </div>
    </el-form-item>
    <el-form-item label="视频" prop="videos">
      <div style="display: flex;">
        <el-upload class="avatar-uploader cover-w16h9" style="margin-right: 30px !important;" :http-request="uploadImg" :data="{type:'video'}" :show-file-list="false" :before-upload="beforeAvatarUpload">
          <video fit="contain" v-if="form.videos" :src="form.videos" class="avatar"></video>
          <el-icon v-else class="el-icon-plus avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
    </el-form-item>
    <el-form-item label="详细地址" prop="address">
      <div style="display: flex;width: 100%;">
        <el-input v-model="form.address" @focus="showMap('input')" :readonly="!(form.latitude && form.longitude)" placeholder="请填写详细地址"></el-input>
        <el-button type="primary" @click="showMap()">{{(form.latitude && form.latitude)?'重新选择':'选择地址'}}</el-button>
      </div>
    </el-form-item>
    <el-form-item label="顺序" prop="sort">
      <el-input v-model="form.sort" type="number" show-word-limit />
    </el-form-item>
    <div style="height: 72px;"></div>
    <div style="position: fixed;bottom: 0;padding: 20px 0;z-index: 999;">
      <el-button type="primary" @click="toSave(1)">保存</el-button>
      <!--<el-button type="primary" @click="toSave(0)">存为草稿</el-button>-->
      <!--<el-button type="primary" @click="toPreview">预览</el-button>-->
      <el-button type="info" @click="toCancel">关闭</el-button>
    </div>
  </el-form>

  <avue-input-map v-show="false" ref='amap' :params="{zoom:10, zoomEnable: true, dragEnable: true}" placeholder="请选择地址" v-model="mapForm"></avue-input-map>
</template>

<script>
  // import contentItem from "@/components/richtext/tinymce.vue"
  import {
    getDetail,
    add,
    update
  } from "@/api/ycwh/famousSnacks";
  import {
    uploadFile
  } from "@/api/oss/oss";
  import { getLazyTree } from "@/api/base/region";
  import { getDictionary } from "@/api/system/dictbiz";
  //
  export default {
    props: ['id'],
    components: {
      // contentItem
    },
    data() {
      var checkListNull = (rule, value, cb) => {
        if(value && value.length > 0) {
          return cb();
        }
        cb(new Error("请选择标签"));
      };
      return {
        loading: false,
        //
        cuisineList: [],
        regionList: [],
        //
        attachmentList: [],
        // 提交内容
        form: {
          id: null,
          name: '',
          subTitle: '',
          content: '',
          // 标签
          videos: null,
          cuisineCode: '',
          regionId: '',
          address: '',
          latitude: '',
          longitude: '',
          top: '',
          sort: ''
        },
        //
        contentItemVisible: false,
        rules: {
          name: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 80,
              message: '长度不能超过80个字',
              trigger: 'blur'
            }
          ],
          subTitle: [{
              required: true,
              message: '请输入副标题',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 90,
              message: '长度不能超过90个字',
              trigger: 'blur'
            }
          ],
          cover: [{
            required: true,
            message: '请上传封面',
            trigger: 'blur',
          }],
          content: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }],
          regionId: [{
            required: true,
            message: '请选择所属区域',
            trigger: 'blur'
          }],
//        address: [{
//          required: true,
//          message: '请输入详细地址',
//          trigger: 'blur'
//        }],
        },
        // 富文本相关配置
        editorOptions: {
          //普通上传地址
          action: "https://api.avuejs.com/imgupload",
          customConfig: {}, //wangEditor编辑的配置
          //是否启用oss(qiniu/ali)
          oss: '',
          headers: {},
          data: {},
          propsHttp: {
            home: '',
            url: 'url',
            res: 'data'
          },
          //七牛云oss配置
          qiniu: {
            AK: "",
            SK: "",
            scope: "",
            url: "",
            deadline: 1
          },
          //阿里云oss配置
          ali: {
            region: "",
            endpoint: "",
            accessKeyId: "",
            accessKeySecret: "",
            bucket: ""
          }
        },
        mapForm: [],
      }
    },
    watch: {},
    created() {
      this.toReloadData()
    },
    mounted() {
      if(this.id && this.id > 0) {
        this.getDetail(this.id)
      }
      this.getCuisineList();
      this.getRegionList();
    },
    watch: {
      'mapForm' () {
        if(this.mapForm && this.mapForm.length == 3) {
          this.form.longitude = this.mapForm[0];
          this.form.latitude = this.mapForm[1];
          this.form.address = this.mapForm[2];
        }
      },
    },
    methods: {
      getCuisineList() {
        getDictionary({
          code: "cuisine"
        }).then(res => {
          this.cuisineList = res.data.data || [];
        })
      },
      getRegionList() {
        getLazyTree("44").then(res => {
          this.regionList = res.data.data || [];
        })
      },
      showMap(formType) {
        if(formType === 'input') {
          if(!(this.form.longitude && this.form.latitude)) {
            this.$refs.amap.handleShow();
          }
        } else {
          this.$refs.amap.handleShow();
        }

      },
      getDetail(id) {
        if(!(id && id > 0)) {
          return;
        }
        /** 获取对应的文章详情 */
        getDetail(id).then(res => {
          if(res.data.success && res.data.data) {
            let data = res.data.data;
            if(data.regionId && data.regionId > 0) {
              data.regionId = data.regionId.toString()
            }
            if(data.content) {
              data.content = decodeURIComponent(data.content)
            }

            //
            this.form = data;
          }
        })
      },
      toReloadData(data) { //
        this.form = data || {}
        this.contentItemVisible = true
      },
      toSave(isPublish) {
        if(this.loading) {
          return;
        }
        this.loading = true;
        this.$refs.form.validate((valid) => {
          if(valid) { //校验通过
            let submitObj = JSON.parse(JSON.stringify(this.form)) //克隆一份数据，避免影响到富文本编辑器
            submitObj.content = encodeURIComponent(submitObj.content)

            /** id不为空则为编辑，为空则新增 */
            let saveFunc = submitObj.id ? update : add
            this.loading = true;
            //  发布或存为草稿
            submitObj.isPublish = isPublish || 0;
            // 处理附件列表
            if(this.attachmentList && this.attachmentList.length > 0) {
              submitObj.attachment = ""
              this.attachmentList.map(e => {
                if(submitObj.attachment) {
                  submitObj.attachment += "," + e.name + "::" + e.url
                } else {
                  submitObj.attachment += e.name + "::" + e.url
                }
              })
            } else {
              submitObj.attachment = ''
            }
            // content
            submitObj.content = submitObj.content || ''

            saveFunc(submitObj).then(() => {
              this.$message({
                type: "success",
                message: "保存成功!"
              })
              this.$emit("toCancel", true)
            }, error => {
              this.loading = false;
              window.console.log(error)
            })
          } else { //校验不通过
            this.$message.error('存在未完善的内容，请完善后再试!');
            this.loading = false;
            return false;
          }
        })
      },
      toView() {
        // 预览
      },
      toCancel() {
        this.$emit("toCancel", false)
      },
      // 图片上传
      uploadImg(params) { // 调用接口上传不使用upload上传
        if(!(params.data && params.data.type)) {
          // att img
          return;
        }
        let uploadType = params.data.type;
        //
        let fd = new FormData();
        let f = params.file;
        fd.append("file", f);
        uploadFile(fd).then(res => {
          if(res && res.data && res.data.success) {
            // 提交内容
            if(uploadType == 'img') {
              this.form.cover = res.data.data.link;
              this.$refs.form.validateField(["cover"], () => {
                // 只触发校验不做其他处理
              })
            } else if(uploadType == 'video') {
              this.form.videos = res.data.data.link;
              this.$refs.form.validateField(["videos"], () => {
                // 只触发校验不做其他处理
              })
            } else if(uploadType == 'att') {
              this.attachmentList.push({
                uid: f.uid,
                name: f.name,
                url: res.data.data.link
              })
            }
            this.$forceUpdate();
          }
          this.loading = false;
        }, e => {
          console.log(e)
          this.loading = false;
        });
      },
      beforeAvatarUpload(file) {
        // 封面限制5m    附件暂时不限制
        //        const isJPG = file.type === 'image/jpeg';
        //        if(!isJPG) {
        //          this.$message.error('上传头像图片只能是 JPG 格式!');
        //        }
        const isLt5M = (file.size / 1024 / 1024) < 5;
        if(!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return true;
      },
      handlePreview(file) {
        window.open(file.url);
      },
      handleRemoveImg(file, fileList) {
        this.attachmentList = fileList;
      },
      toPreview() {
        let submitObj = JSON.parse(JSON.stringify(this.form)) //克隆一份数据，避免影响到富文本编辑器
        /** id不为空则为编辑，为空则新增 */
        this.loading = true;
        // 标签预览需要处理

        // content
        submitObj.content = submitObj.content || ''
        // 新选择的标签、专栏需要单独赋值提供显示
        // goPreview(this, "article", submitObj, this.tagOptions)
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "./index.scss"
</style>