轮播管理自测

src/components/ImageUpload/index.vue

@@ -35,10 +35,7 @@
       width="800"
       append-to-body
     >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      >
+      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" alt="" />
     </el-dialog>
   </div>
 </template>
@@ -224,5 +221,9 @@ export default {
     opacity: 0;
     transform: translateY(0);
 }
+::v-deep .el-upload:focus {
+  border-color: #5FB54B !important;
+  color: #5FB54B !important;
+}
 </style>
 

src/views/banner_management/banner_add.vue

@@ -11,21 +11,23 @@
       <div>
         <el-form ref="form" :model="form" label-width="133px" :rules="rules">
           <el-form-item label="标题：" prop="title">
-            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="20" show-word-limit clearable />
+            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable />
           </el-form-item>
           <el-form-item label="轮播图：" prop="img">
-            <image-upload v-model="form.img" :limit="1" :is-show-tip="false" />
+            <image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
           </el-form-item>
           <el-form-item label="跳转地址：" prop="url">
-            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="30" show-word-limit clearable />
+            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable />
           </el-form-item>
           <el-form-item label="权重：" prop="sort">
             <el-input-number
-              v-model="form.sort"
+              v-model.number="form.sort"
               class="weight-number"
               :max="9999"
               :min="0"
               controls-position="right"
+              :precision="0"
+              @blur="form.sort === undefined || form.sort === null ? form.sort = 0:form.sort"
             />
           </el-form-item>
           <el-form-item label="创建日期：" prop="createTime">
@@ -68,6 +70,9 @@ export default {
       const search = {
         sort: value
       }
+      if (value === 0) {
+        return callback(new Error('权重不能为零'))
+      }
       // 调用后端api
       listBanner(search).then(Response => {
         if (Response.code === 200) {
@@ -78,6 +83,15 @@ export default {
         }
       })
     }
+    const titleTest = (rule, value, callback) => {
+      // const title= /^[\u0391-\uFFE5A-Za-z]+$/
+      const title = /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/
+      if (!title.test(value)) {
+        callback(new Error('请输入中英文数字'))
+      } else {
+        callback()
+      }
+    }
     return {
       // 表单数据
       form: {
@@ -92,17 +106,18 @@ export default {
       submitLoading: false,
       rules: {
         title: [
-          { required: true, message: '请输入轮播标题', trigger: 'blur' }
+          { required: true, message: '请输入标题', trigger: 'blur' },
+          { validator: titleTest, trigger: 'blur' }
         ],
         img: [
           { required: false, message: '请选择轮播图', trigger: 'blur' }
         ],
         url: [
-          { required: true, message: '请输入跳转地址', trigger: 'blur' }
+          { required: false, message: '请输入跳转地址', trigger: 'blur' }
         ],
         sort: [
           { required: true, message: '请输入权重', trigger: 'blur' },
-          { validator: checkSort, trigger: 'change' }
+          { validator: checkSort, trigger: 'blur' }
         ],
         status: [
           { required: false, message: '请选择轮播状态', trigger: 'blur' }
@@ -113,9 +128,22 @@ export default {
       }
     }
   },
-  watch: {},
+  watch: {
+    'form.status'(newVal) {
+      if (newVal === '1') {
+        this.rules.img[0].required = true
+      } else {
+        this.rules.img[0].required = false
+      }
+    }
+  },
   created() {
     this.getNowDate()
+    if (this.form.status === '1') {
+      this.rules.img[0].required = true
+    } else {
+      this.rules.img[0].required = false
+    }
   },
   methods: {
     // 获取当前日期

src/views/banner_management/banner_detail.vue

@@ -14,7 +14,7 @@
             <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="20" show-word-limit clearable disabled />
           </el-form-item>
           <el-form-item label="轮播图：" prop="img">
-            <el-image :src="baseUrl + form.img" class="formImg" :preview-src-list="srcList" />
+            <ImagePreview :height="100" :src="baseUrl + form.img" :width="100" />
           </el-form-item>
           <el-form-item label="跳转地址：" prop="url">
             <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="30" show-word-limit clearable disabled />

src/views/banner_management/banner_edit.vue

@@ -11,22 +11,24 @@
       <div>
         <el-form ref="form" :model="form" label-width="133px" :rules="rules">
           <el-form-item label="标题：" prop="title">
-            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="20" show-word-limit clearable :disabled="form.id === 1" />
+            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable :disabled="form.id === 1" />
           </el-form-item>
           <el-form-item label="轮播图：" prop="img">
-            <image-upload v-model="form.img" :limit="1" :is-show-tip="false" />
+            <image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
           </el-form-item>
           <el-form-item label="跳转地址：" prop="url">
-            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="30" show-word-limit clearable :disabled="form.id === 1" />
+            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable :disabled="form.id === 1" />
           </el-form-item>
           <el-form-item label="权重：" prop="sort">
             <el-input-number
-              v-model="form.sort"
+              v-model.number="form.sort"
               class="weight-number"
               :max="9999"
               :min="0"
               controls-position="right"
               :disabled="form.id === 1"
+              :precision="0"
+              @blur="form.sort === undefined || form.sort === null ? form.sort = 0:form.sort"
             />
           </el-form-item>
           <el-form-item label="创建日期：" prop="createTime">
@@ -47,7 +49,7 @@
             </span>
           </el-form-item>
           <el-form-item label="备注：" prop="notes">
-            <el-input :disabled="form.id === 1" v-model.trim="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
+            <el-input v-model.trim="form.notes" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
           </el-form-item>
           <el-form-item>
             <el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
@@ -65,8 +67,10 @@ export default {
   name: 'BannerEdit',
   data() {
     const checkSort = (rule, value, callback) => {
-      if (!value) {
+      if (value === undefined || value === null) {
         return callback(new Error('请输入权重'))
+      } else if (value === 0) {
+        return callback(new Error('权重不能为零'))
       } else {
         const search = {
           exceptId: this.id,
@@ -83,6 +87,15 @@ export default {
         })
       }
     }
+    const titleTest = (rule, value, callback) => {
+      // const title= /^[\u0391-\uFFE5A-Za-z]+$/
+      const title = /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/
+      if (!title.test(value)) {
+        callback(new Error('请输入中英文数字'))
+      } else {
+        callback()
+      }
+    }
     return {
       id: undefined,
       // 表单数据
@@ -98,17 +111,18 @@ export default {
       submitLoading: false,
       rules: {
         title: [
-          { required: true, message: '请输入轮播标题', trigger: 'blur' }
+          { required: true, message: '请输入标题', trigger: 'blur' },
+          { validator: titleTest, trigger: 'blur' }
         ],
         img: [
           { required: false, message: '请选择轮播图', trigger: 'blur' }
         ],
         url: [
-          { required: true, message: '请输入跳转地址', trigger: 'blur' }
+          { required: false, message: '请输入跳转地址', trigger: 'blur' }
         ],
         sort: [
-          { required: false, message: '请输入权重', trigger: 'blur' },
-          { validator: checkSort, trigger: 'change' }
+          { required: true, message: '请输入权重', trigger: 'blur' },
+          { validator: checkSort, trigger: 'blur' }
         ],
         status: [
           { required: false, message: '请选择轮播状态', trigger: 'blur' }
@@ -119,7 +133,15 @@ export default {
       }
     }
   },
-  watch: {},
+  watch: {
+    'form.status'(newVal) {
+      if (newVal === '1') {
+        this.rules.img[0].required = true
+      } else {
+        this.rules.img[0].required = false
+      }
+    }
+  },
   created() {
     this.id = this.$route.query.id
     if (this.id) {
@@ -133,6 +155,11 @@ export default {
         if (res.code === 200) {
           console.log('轮播信息', res)
           this.form = res.data
+          if (this.form.status === '1') {
+            this.rules.img[0].required = true
+          } else {
+            this.rules.img[0].required = false
+          }
         }
       })
     },
@@ -142,16 +169,27 @@ export default {
       this.$refs['form'].validate(valid => {
         if (valid) {
           console.log('校验通过')
-          this.submitLoading = true
-          updateBanner(this.form).then(res => {
-            if (res.code === 200) {
-              this.submitLoading = false
-              this.$message({
-                message: '修改成功！',
-                type: 'success'
-              })
-              this.goBack()
-            }
+
+          this.$confirm('系统将立即发布编辑内容,是否确定?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            customClass: 'box-logout',
+            cancelButtonClass: 'resetBtn',
+            confirmButtonClass: 'queryBtn',
+            type: 'warning',
+            closeOnClickModal: false
+          }).then(() => {
+            this.submitLoading = true
+            updateBanner(this.form).then(res => {
+              if (res.code === 200) {
+                this.submitLoading = false
+                this.$message({
+                  message: '修改成功！',
+                  type: 'success'
+                })
+                this.goBack()
+              }
+            })
           })
         }
       })

src/views/banner_management/banner_management.vue

@@ -320,12 +320,24 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除该轮播图信息？').then(function() {
-        return delBanner(ids)
+
+      this.$confirm('是否确认删除此条数据，删除后不可恢复', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        customClass: 'box-logout',
+        cancelButtonClass: 'resetBtn',
+        confirmButtonClass: 'queryBtn',
+        type: 'warning',
+        closeOnClickModal: false
       }).then(() => {
-        this.getBannerList()
-        this.$modal.msgSuccess('删除成功')
-      }).catch(() => {})
+        this.submitLoading = true
+        delBanner(ids).then(res => {
+          if (res.code === 200) {
+            this.getBannerList()
+            this.$modal.msgSuccess('删除成功')
+          }
+        })
+      })
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -339,17 +351,11 @@ export default {
         id: row.id,
         status: '2'
       }
-      this.$modal.confirm('是否确认禁用该轮播图信息？').then(function() {
-        updateBanner(update).then(res => {
-          if (res.code === 200) {
-            this.getBannerList()
-          }
-        })
-        return null
-      }).then(() => {
-        this.getBannerList()
-        this.$modal.msgSuccess('禁用成功')
-      }).catch(() => {})
+      updateBanner(update).then(res => {
+        if (res.code === 200) {
+          this.getBannerList()
+        }
+      })
     }
   }
 }