区分编辑组件

admin_ui/src/views/ycwh/components/editFamousDish/index.scss

@@ -0,0 +1,53 @@
+.article-form {
+    padding: 0 20px;
+}
+
+.avatar-uploader {
+     :deep(.el-upload) {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+     :deep(.el-upload):hover {
+        border-color: #409EFF;
+    }
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+}
+
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+}
+
+// Collapse 折叠面板 样式修改
+.form-collapse {
+    border: none;
+     :deep(.el-collapse-item .el-collapse-item__header) {
+        margin-bottom: 20px;
+        /* border-bottom: 1px solid #eee !important; */
+        border-bottom-color: #eee !important;
+    }
+     :deep(.el-collapse-item .el-collapse-item__wrap) {
+        border: none;
+    }
+}
+
+.form-title {
+    height: 30px;
+    line-height: 30px;
+    border-left: 5px solid #409eff;
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 15px;
+}

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

@@ -0,0 +1,379 @@
+<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="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-bing="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="regionId">
+      <div style="display: flex;">
+        <el-select v-model="form.regionId" placeholder="请选择所属区域">
+          <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </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>
+    <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: false}" placeholder="请选择地址" v-model="mapForm"></avue-input-map>
+</template>
+
+<script>
+  // import contentItem from "@/components/richtext/tinymce.vue"
+  import {
+    getDetail,
+    add,
+    update
+  } from "@/api/ycwh/famousDish";
+  import {
+    uploadFile
+  } from "@/api/oss/oss";
+  import { getLazyTree } from "@/api/base/region";
+  //
+  import {
+    startPickTime,
+    endPickTime,
+    normalPlateType,
+    childTypeOptions,
+    normalChildType
+  } from "../../common/constants.js";
+
+  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,
+        //
+        regionList: [],
+        //
+        attachmentList: [],
+        // 提交内容
+        form: {
+          id: null,
+          name: '',
+          subTitle: '',
+          content: '',
+          // 标签
+          videos: null,
+          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: [113.10235504165291, 41.03624227495205, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒"],
+      }
+    },
+    watch: {},
+    created() {
+      this.toReloadData()
+    },
+    mounted() {
+      if(this.id && this.id > 0) {
+        this.getDetail(this.id)
+      }
+      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: {
+      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;
+            //
+            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>

admin_ui/src/views/ycwh/components/editFamousLocation/index.scss

@@ -0,0 +1,53 @@
+.article-form {
+    padding: 0 20px;
+}
+
+.avatar-uploader {
+     :deep(.el-upload) {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+     :deep(.el-upload):hover {
+        border-color: #409EFF;
+    }
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+}
+
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+}
+
+// Collapse 折叠面板 样式修改
+.form-collapse {
+    border: none;
+     :deep(.el-collapse-item .el-collapse-item__header) {
+        margin-bottom: 20px;
+        /* border-bottom: 1px solid #eee !important; */
+        border-bottom-color: #eee !important;
+    }
+     :deep(.el-collapse-item .el-collapse-item__wrap) {
+        border: none;
+    }
+}
+
+.form-title {
+    height: 30px;
+    line-height: 30px;
+    border-left: 5px solid #409eff;
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 15px;
+}

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

@@ -0,0 +1,379 @@
+<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="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-bing="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="regionId">
+      <div style="display: flex;">
+        <el-select v-model="form.regionId" placeholder="请选择所属区域">
+          <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </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>
+    <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: false}" placeholder="请选择地址" v-model="mapForm"></avue-input-map>
+</template>
+
+<script>
+  // import contentItem from "@/components/richtext/tinymce.vue"
+  import {
+    getDetail,
+    add,
+    update
+  } from "@/api/ycwh/famousLocation";
+  import {
+    uploadFile
+  } from "@/api/oss/oss";
+  import { getLazyTree } from "@/api/base/region";
+  //
+  import {
+    startPickTime,
+    endPickTime,
+    normalPlateType,
+    childTypeOptions,
+    normalChildType
+  } from "../../common/constants.js";
+
+  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,
+        //
+        regionList: [],
+        //
+        attachmentList: [],
+        // 提交内容
+        form: {
+          id: null,
+          name: '',
+          subTitle: '',
+          content: '',
+          // 标签
+          videos: null,
+          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: [113.10235504165291, 41.03624227495205, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒"],
+      }
+    },
+    watch: {},
+    created() {
+      this.toReloadData()
+    },
+    mounted() {
+      if(this.id && this.id > 0) {
+        this.getDetail(this.id)
+      }
+      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: {
+      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;
+            //
+            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>

admin_ui/src/views/ycwh/components/editFamousStore/index.scss

@@ -0,0 +1,53 @@
+.article-form {
+    padding: 0 20px;
+}
+
+.avatar-uploader {
+     :deep(.el-upload) {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+     :deep(.el-upload):hover {
+        border-color: #409EFF;
+    }
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+}
+
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+}
+
+// Collapse 折叠面板 样式修改
+.form-collapse {
+    border: none;
+     :deep(.el-collapse-item .el-collapse-item__header) {
+        margin-bottom: 20px;
+        /* border-bottom: 1px solid #eee !important; */
+        border-bottom-color: #eee !important;
+    }
+     :deep(.el-collapse-item .el-collapse-item__wrap) {
+        border: none;
+    }
+}
+
+.form-title {
+    height: 30px;
+    line-height: 30px;
+    border-left: 5px solid #409eff;
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 15px;
+}

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

@@ -0,0 +1,379 @@
+<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="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-bing="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="regionId">
+      <div style="display: flex;">
+        <el-select v-model="form.regionId" placeholder="请选择所属区域">
+          <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </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>
+    <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: false}" placeholder="请选择地址" v-model="mapForm"></avue-input-map>
+</template>
+
+<script>
+  // import contentItem from "@/components/richtext/tinymce.vue"
+  import {
+    getDetail,
+    add,
+    update
+  } from "@/api/ycwh/famousStore";
+  import {
+    uploadFile
+  } from "@/api/oss/oss";
+  import { getLazyTree } from "@/api/base/region";
+  //
+  import {
+    startPickTime,
+    endPickTime,
+    normalPlateType,
+    childTypeOptions,
+    normalChildType
+  } from "../../common/constants.js";
+
+  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,
+        //
+        regionList: [],
+        //
+        attachmentList: [],
+        // 提交内容
+        form: {
+          id: null,
+          name: '',
+          subTitle: '',
+          content: '',
+          // 标签
+          videos: null,
+          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: [113.10235504165291, 41.03624227495205, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒"],
+      }
+    },
+    watch: {},
+    created() {
+      this.toReloadData()
+    },
+    mounted() {
+      if(this.id && this.id > 0) {
+        this.getDetail(this.id)
+      }
+      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: {
+      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;
+            //
+            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>

admin_ui/src/views/ycwh/famousDish.vue

@@ -30,7 +30,7 @@
   import 'nprogress/nprogress.css';
   //
   import { getLazyTree } from "@/api/base/region";
-  import editArticle from "./components/editArticle/index.vue"
+  import editArticle from "./components/editFamousDish/index.vue"
 
   export default {
     components: {

admin_ui/src/views/ycwh/famousLocation.vue

@@ -30,7 +30,7 @@
   import 'nprogress/nprogress.css';
   //
   import { getLazyTree } from "@/api/base/region";
-  import editArticle from "./components/editArticle/index.vue"
+  import editArticle from "./components/editFamousLocation/index.vue"
 
   export default {
     components: {

admin_ui/src/views/ycwh/famousStore.vue

@@ -30,7 +30,7 @@
   import 'nprogress/nprogress.css';
   //
   import { getLazyTree } from "@/api/base/region";
-  import editArticle from "./components/editArticle/index.vue"
+  import editArticle from "./components/editFamousStore/index.vue"
 
   export default {
     components: {