1. 调整默认配置

package.json

@@ -56,6 +56,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/api/CURD.js

@@ -18,6 +18,14 @@ export function getTableDeatilsApi(url,userId) {
     })
   }
   
+// 查询table详细,更具ID
+export function getTableDeatilsByIdApi(url,params) {
+  return request({
+    url: url,
+    method: 'get',
+    params
+  })
+}
   // 新增table
   export function addTableApi(url,data) {
     return request({
@@ -27,7 +35,7 @@ export function getTableDeatilsApi(url,userId) {
     })
   }
   
-  // 修改table
+  // 修改table PUT
   export function updateTableApi(url,data) {
     return request({
       url: url,
@@ -42,4 +50,13 @@ export function getTableDeatilsApi(url,userId) {
       url: url + userId,
       method: 'delete'
     })
+  }
+
+  // 删除table
+  export function delTableParamsApi(url,params) {
+    return request({
+      url: url,
+      method: 'delete',
+      params
+    })
   }

src/views/tourism/scenicAreaManagement/contentManagement/attractionInfo.vue

@@ -292,8 +292,8 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-        return delTableApi(configUrl.delect,ids);
+      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+        return delTableApi(this.configUrl.delect,ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/contentManagement/carouselAdvertis.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/contentManagement/eventNotifications.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/contentManagement/formBox/navigationManagementForm.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :title="title"
     :visible.sync="open"
-    width="800px"
+    width="70%"
     append-to-body
     :close-on-click-modal="false"
     @close="cancel"
@@ -13,7 +13,58 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)">
       <el-form :model="form" ref="form" :rules="rules" label-width="120px">
-        
+        <div class="form-title"><span>基本信息</span></div>
+        <el-form-item label="景区名称" prop="name">
+          <el-input style="width: 350px;" v-model="form.name" placeholder="请输入景区名称" maxlength="20" show-word-limit />
+        </el-form-item>
+        <el-form-item label="开/闭园时间" prop="openDate">
+          <el-time-picker
+            is-range
+            v-model="form.openDate"
+            value-format="HH:mm"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择开/闭园时间范围">
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="景点产品" prop="goodId">
+          <el-select v-model="form.goodId" placeholder="请选择景点产品">
+            <el-option
+              v-for="item in scenicAreaProducts"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开放状态" prop="openDate">
+          <el-switch
+            style="display: block"
+            v-model="form.status"
+            active-color="#13ce66"
+            inactive-color="#ccc"
+            active-text="开"
+            inactive-text="关"
+            :active-value="2"
+            :inactive-value="1"
+            >
+          </el-switch>
+        </el-form-item>
+        <div class="form-title"><span>宣推资料</span></div>
+        <el-form-item label="内容详情" prop="content">
+        </el-form-item>
+        <div style="padding-left: 30px;">
+          <quill-editor
+              v-model="form.content"
+              ref="myQuillEditor"
+              :options="editorOption"
+              @blur="onEditorBlur($event)"
+              @focus="onEditorFocus($event)"
+              @change="onEditorChange($event)"
+              @ready="onEditorReady($event)">
+          </quill-editor>
+        </div>
       </el-form>
     </div>
     <span slot="footer" class="dialog-footer" v-if="formStatus==1">
@@ -35,13 +86,23 @@
 
 <script>
 import { 
-  getTableDeatilsApi,
+  getTableDeatilsByIdApi,
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
+import { quillEditor } from 'vue-quill-editor'
+ 
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+ 
+
 export default {
   name: "addAndEdit",
   dicts: [],
+  components: {
+    quillEditor
+  },
   data() {
     return {
       title: "",
@@ -50,16 +111,43 @@ export default {
       loading: false,
       formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
       configUrl: {
-        add: '/merchant/merchantSysuser', // 新增地址
-        details: '/merchant/merchantSysuser/', // 详情地址
-        edit: '/merchant/merchantSysuser', // 编辑地址
+        add: '/merchant/merchantPoints/insertOrUpdate', // 新增地址
+        details: '/merchant/merchantPoints/selectById', // 详情地址
+        edit: '/merchant/merchantPoints/insertOrUpdate', // 编辑地址
       },
       form: {
         id: undefined,
       },
       rules: {
-        xxx: [{ required: true, message: "请输入xxx", trigger: ["change","blur"] }]
-      }
+        name: [{ required: true, message: "请输入景区名称", trigger: ["change","blur"] }],
+        openDate: [{ required: true, message: "请输入景区名称", trigger: ["change","blur"] }],
+        goodId: [{ required: false, message: "请输入景点产品", trigger: ["change","blur"] }],
+        status: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
+        content: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
+      },
+      scenicAreaProducts: [],// 景点产品关联
+      // 富文本编辑器配置
+      editorOption: {
+        modules: {
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+            ['blockquote', 'code-block'], // 引用  代码块
+            [{ header: 1 }, { header: 2 }], // 1、2 级标题
+            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+            [{ indent: '-1' }, { indent: '+1' }], // 缩进
+            [{ direction: 'rtl' }], // 文本方向
+            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
+            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+            // [{ font: ['songti'] }], // 字体种类
+            [{ align: [] }], // 对齐方式
+            ['clean'], // 清除文本格式
+            ['image', 'video'] // 链接、图片、视频
+          ]
+        },
+        placeholder: '请输入正文'
+      },
     };
   },
   methods: {
@@ -73,7 +161,11 @@ export default {
         this.$set(this,'form',row)
         this.formStatus = 1
       }else if(model=='EDIT') { // 新增
-        this.$set(this,'form',row)
+        let obj = {
+          ...row,
+          openDate: row.openDate?row.openDate.join('~') : null
+        }
+        this.$set(this,'form',obj)
         this.formStatus = 1
       }else if(model=='EDITInit') { // 新增
         await this.getTableDeatilsFun(row)
@@ -90,9 +182,13 @@ export default {
       const id = row.id
       this.loading = true
       try {
-        let res = await getTableDeatilsApi(this.configUrl.details,id)
+        let res = await getTableDeatilsByIdApi(this.configUrl.details,{id})
         if(res.code == 200) {
-          this.$set(this,'form',JSON.parse(JSON.stringify(res.data)))
+          let obj = {
+          ...row,
+          openDate: res.data.openDate?res.data.openDate.split('~') : null
+        }
+          this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
           this.formStatus = 1
         }else {
           this.$message.error('获取详情失败!!!');
@@ -118,8 +214,11 @@ export default {
         if (valid) {
           this.loading = true
           if (this.model != 'ADD') {
-            updateTableApi(
-              this.configUrl.edit,this.form).then(response => {
+            addTableApi(
+              this.configUrl.edit,{
+                ...this.form,
+                openDate: this.form.openDate.join('~')
+              }).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.loading = false
               this.open = false;
@@ -129,7 +228,10 @@ export default {
               this.loading = false
             })
           } else {
-            addTableApi(this.configUrl.edit,this.form).then(response => {
+            addTableApi(this.configUrl.edit,{
+                ...this.form,
+                openDate: this.form.openDate.join('~')
+              }).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.loading = false
               this.open = false;
@@ -161,6 +263,23 @@ export default {
       this.reset();
       this.open = false;
     },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      console.log('editor blur!', quill)
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      console.log('editor focus!', quill)
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      console.log('editor ready!', quill)
+    },
+    // 内容改变事件
+    onEditorChange({ quill, html, text }) {
+      console.log('editor change!', quill, html, text)
+      this.form.content = html
+    },
   },
 };
 </script>
@@ -172,6 +291,23 @@ export default {
   min-height: 50vh;
   max-height: 65vh;
   overflow-y: auto;
+  .form-title {
+    padding: 0 0 10px 0;
+    span {
+      display: flex;
+      color: rgba(65,80,88,1);
+      font-size: 16px;
+      font-family: SourceHanSansSC;
+      font-weight: 700;
+      line-height: 23px;
+      border-left: 4px solid rgb(22, 132, 252);
+      padding-left: 10px;
+    }
+    
+  }
+  ::v-deep .ql-editor {
+    height: 400px;
+  }
   .upload-btn {
     width: 100px;
     height: 100px;

src/views/tourism/scenicAreaManagement/contentManagement/noticeManagement.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/contentManagement/questions.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/contentManagement/suggestions.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/contentManagement/tourismStrategy.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/navigationManagement/pointType.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");

src/views/tourism/scenicAreaManagement/navigationManagement/scenicGuide.vue

@@ -292,8 +292,8 @@
       /** 删除按钮操作 */
       handleDelete(row) {
         const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
-          return delTableApi(configUrl.delect,ids);
+        this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then( ()=> {
+          return delTableApi(this.configUrl.delect,ids);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");