广告弹窗

src/components/Editor/index.vue

@@ -172,11 +172,11 @@ export default {
       // 获取富文本组件实例
       let quill = this.Quill;
       // 如果上传成功
-      if (res.code == 200) {
+      if (res.code == 0) {
         // 获取光标所在位置
         let length = quill.getSelection().index;
         // 插入图片  res.url为服务器返回的图片地址
-        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+        quill.insertEmbed(length, "image", res.data);
         // 调整光标到最后
         quill.setSelection(length + 1);
       } else {
@@ -186,6 +186,20 @@ export default {
     handleUploadError() {
       this.$message.error("图片插入失败");
     },
+
+     uuid() {
+      var s = [];
+      var hexDigits = "0123456789abcdef";
+      for (var i = 0; i < 36; i++) {
+          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+      }
+      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
+      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+      s[8] = s[13] = s[18] = s[23] = "-";
+
+      var uuid = s.join("");
+      return uuid;
+    },
   },
 };
 </script>

src/views/ecw/bannerPop/index.vue

@@ -55,31 +55,31 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column label="" align="center" prop="id" />
-      <el-table-column label="中文标题" align="center" prop="titleZh" />
-      <el-table-column label="英文标题" align="center" prop="titleEn" />
-      <el-table-column label="有效期开始时间" align="center" prop="validateStart" width="180">
+      <el-table-column label="弹窗标题" align="center" prop="titleZh" />
+      <el-table-column label="弹窗时间" align="center" prop="validateDate" width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.validateStart) }}</span>
+          <span>{{ formatTime(scope.row.validateStart) }}~{{ formatTime(scope.row.validateEnd) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="有效期结束时间" align="center" prop="validateEnd" width="180">
+      
+      <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.validateEnd) }}</span>
+          <span>{{ statusName(scope.row.status) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="web网页中文" align="center" prop="htmlWebZh" />
-      <el-table-column label="web网页英文" align="center" prop="htmlWebEn" />
-      <el-table-column label="app网页中文" align="center" prop="htmlAppZh" />
-      <el-table-column label="0显示 1不显示" align="center" prop="status" />
+
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
+      
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['ecw:banner-pop:update']">修改</el-button>
+          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['ecw:banner-pop:update']">修改</el-button> -->
+              <el-button size="mini" type="text"  @click="handleStatus(scope.row)"
+                     v-hasPermi="['ecw:banner-pop:update']">{{scope.row.status == CommonStatusEnum.ENABLE ? '禁用' : '启用'}}</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['ecw:banner-pop:delete']">删除</el-button>
         </template>
@@ -90,8 +90,8 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="标题(中文)" prop="titleZh">
           <el-input v-model="form.titleZh" placeholder="请输入中文标题" />
         </el-form-item>
@@ -99,7 +99,7 @@
           <el-input v-model="form.titleEn" placeholder="请输入英文标题" />
         </el-form-item>
         <el-form-item label="有效期" prop="validateStart">
-          <el-date-picker v-model="form.validateStart"
+          <el-date-picker v-model="form.validateStart" @change="startChange"
             type="date"
             placeholder="选择日期">
           </el-date-picker>
@@ -108,19 +108,20 @@
             type="date"
             placeholder="选择日期">
           </el-date-picker>
+          <span style="color:red;font-size:14px;">注意：留空则表示永久有效</span>
         </el-form-item>
         
-        <el-form-item label="web网页中文" prop="htmlWebZh">
-          <el-input v-model="form.htmlWebZh" placeholder="请输入web网页中文" />
+        <el-form-item label="网页中文" prop="htmlWebZh">
+          <editor v-model="form.htmlWebZh" :min-height="150"/>
         </el-form-item>
-        <el-form-item label="web网页英文" prop="htmlWebEn">
-          <el-input v-model="form.htmlWebEn" placeholder="请输入web网页英文" />
+        <el-form-item label="网页英文" prop="htmlWebEn">
+          <editor v-model="form.htmlWebEn" :min-height="150"/>
         </el-form-item>
-        <el-form-item label="app网页中文" prop="htmlAppZh">
-          <el-input v-model="form.htmlAppZh" placeholder="请输入app网页中文" />
+        <el-form-item label="APP中文" prop="htmlAppZh">
+          <editor v-model="form.htmlAppZh" :min-height="150"/>
         </el-form-item>
-        <el-form-item label="app网页英文" prop="htmlAppZh">
-          <el-input v-model="form.htmlAppZh" placeholder="请输入app网页英文" />
+        <el-form-item label="APP英文" prop="htmlAppEn">
+           <editor v-model="form.htmlAppEn" :min-height="150"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -133,10 +134,14 @@
 
 <script>
 import { createBannerPop, updateBannerPop, deleteBannerPop, getBannerPop, getBannerPopPage, exportBannerPopExcel } from "@/api/ecw/bannerPop";
+import Editor from '@/components/Editor';
+import { getDictDatas, DICT_TYPE } from '@/utils/dict';
+import {CommonStatusEnum} from '@/utils/constants'
 
 export default {
   name: "BannerPop",
   components: {
+    Editor,
   },
   data() {
     return {
@@ -172,9 +177,70 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+        titleZh: [{ required: true, message: "中文标题不能为空", trigger: "blur" }],
+        titleEn: [{ required: true, message: "英文标题不能为空", trigger: "blur" }],
+        validateStart: [{ required: true, message: "有效期开始时间不能为空", trigger: "blur" }]
+      },
+      CommonStatusEnum: CommonStatusEnum,
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
     };
   },
+
+  watch: {
+      'form.validateStart'(newV, oldV) {
+        if(this.form.validateStart && this.form.validateEnd) {
+          let startDate = new Date(this.form.validateStart)
+          let endDate = new Date(this.form.validateEnd)
+          if(startDate.getTime() > endDate.getTime()){
+            this.$message.error('开始时间不能大于结束时间');
+            if(oldV) {
+              this.form.validateStart = oldV;
+            } else {
+              this.form.validateStart = ""
+            }
+          }
+        }
+      },
+
+      'form.validateEnd'(newV, oldV) {
+        if(this.form.validateStart && this.form.validateEnd) {
+          let startDate = new Date(this.form.validateStart)
+          let endDate = new Date(this.form.validateEnd)
+          if(startDate.getTime() > endDate.getTime()){
+            this.$message.error('结束时间不能小于开始时间');
+            if(oldV) {
+              this.form.validateEnd= oldV;
+            } else {
+              this.form.validateEnd = ""
+            }
+          }
+        }
+      },
+      
+    },
+
+  computed: {
+    formatTime() {
+      return millisecond => {
+        if(millisecond) {
+          return new Date(millisecond).format('yyyy-MM-dd');
+        }
+        return '';
+      }
+    },
+
+    statusName() {
+      return value => {
+        for(let index in this.statusDictDatas) {
+          let dictItem = this.statusDictDatas[index];
+          if(dictItem.value == value) {
+            return dictItem.value == CommonStatusEnum.ENABLE + '' ? '正常' : '禁用';
+          }
+        }
+      }
+    },
+  },
+
   created() {
     this.getList();
   },
@@ -212,6 +278,22 @@ export default {
       };
       this.resetForm("form");
     },
+
+    /**修改状态 */
+    handleStatus(row) {
+      row.status=row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE;
+      updateBannerPop(row).then(() => {
+        this.$modal.msgSuccess("修改成功");
+      }).catch(function() {
+        row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE;
+      });
+    },
+
+    /**开始日期变了 */
+    startChange(val) {
+      
+    },
+
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;