推荐管理 模块名称和有效时间改为三级详情页编辑

src/views/operation/recommend/detail.vue

@@ -1,48 +1,62 @@
 <template>
   <div class="app-container">
-    <el-button v-if="!isRead" type="primary" icon="el-icon-plus" size="mini" @click="getPush">新增</el-button>
+    <el-form size="mini" inline :disabled="isRead">
+      <el-form-item label="模块名称：">
+        <el-input v-model="form.title" placeholder="请输入模块名称" />
+      </el-form-item>
+      <el-form-item label="有效时间：">
+        <el-date-picker v-model="form.timeList" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button v-if="!isRead" type="primary" icon="el-icon-plus" @click="getPush">新增</el-button>
+      </el-form-item>
+    </el-form>
     <!-- 模块 -->
     <div style="display: flex; flex-wrap: wrap;">
-      <el-form class="form" v-for="(item, index) in form" :key="item.id" label-width="auto" :disabled="isRead">
+      <el-form class="form" :model="item" :rules="rules" ref="list" v-for="(item, index) in form.list" :key="item.id"
+        label-width="auto" :disabled="isRead">
         <el-form-item class="sort" :label="(index + 1).toString()">
           <el-link v-if="!isRead" icon="el-icon-close" :underline="false" @click="getDelete(index)" />
         </el-form-item>
-        <el-form-item v-if="'title' in item" label="标题：">
+        <el-form-item v-if="'title' in item" label="标题：" prop="title">
           <el-input v-model="item.title" placeholder="请输入内容标题" />
         </el-form-item>
-        <el-form-item v-if="'description' in item" label="简介：">
+        <el-form-item v-if="'description' in item" label="简介：" prop="description">
           <el-input v-model="item.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }"
             placeholder="请输入简介" />
         </el-form-item>
-        <el-form-item v-if="'contentName' in item" label="内容：">
+        <el-form-item v-if="'contentName' in item" label="内容：" prop="contentName">
           <el-input v-model="item.contentName" prefix-icon="el-icon-search" placeholder="选择内容"
             @focus="getDialog(item, index, false)" />
         </el-form-item>
-        <el-form-item v-if="'forwardType' in item" label="跳转方式：">
-          <el-select v-model="item.forwardType" placeholder="请选择跳转方式" @change="forwardTypeChange(item)">
+        <el-form-item v-if="'forwardType' in item" label="跳转方式：" prop="forwardType">
+          <el-select v-model="item.forwardType" placeholder="请选择跳转方式" @change="forwardTypeChange(item, index)">
             <el-option v-for="item in forwardTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="'forwardUrl' in item" label="跳转地址：">
+        <el-form-item v-if="'forwardUrl' in item" label="跳转地址：" prop="forwardUrl">
           <el-input v-model="item.forwardUrl" placeholder="请输入跳转地址" />
         </el-form-item>
-        <el-form-item v-if="'contentId' in item" label="专区页面：">
+        <el-form-item v-if="'contentId' in item" label="专区页面：" prop="contentId">
           <el-select v-model="item.contentId" placeholder="请选择跳转专区" @change="contentIdChange(item)">
             <el-option v-for="item in sceneOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="'isCustom' in item" label="封面模式：">
+        <el-form-item v-if="'isCustom' in item" label="封面模式：" prop="isCustom">
           <el-select v-model="item.isCustom" placeholder="选择封面模式" @change="isCustomChange(item, index)">
             <el-option v-for="item in coverOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="'pic' in item" label="图片：">
-          <Upload listType="picture-card" :url="item.pic" @upload="upload($event, item)" :disabled="isRead || item.isCustom === 1" />
+        <el-form-item v-if="'pic' in item" label="图片：" prop="pic">
+          <Upload listType="picture-card" :url="item.pic" @upload="upload($event, item)"
+            :disabled="isRead || item.isCustom === 1" />
         </el-form-item>
-        <el-form-item v-if="'sort' in item" label="排序：">
+        <el-form-item v-if="'sort' in item" label="排序：" prop="sort">
           <el-input-number v-model="item.sort" />
         </el-form-item>
-        <el-form-item v-if="'childList' in item" label="列表：">
+        <el-form-item v-if="'childList' in item" label="列表：" prop="childList">
           <el-button type="primary" @click="getDialog(item, index, true)">添加内容</el-button>
           <el-table :data="item.childList">
             <el-table-column label="电台名称" prop="contentName" align="center" show-overflow-tooltip />
@@ -54,7 +68,7 @@
             </el-table-column>
           </el-table>
         </el-form-item>
-        <el-form-item label="当前状态：">
+        <el-form-item label="当前状态：" prop="status">
           <el-select v-model="item.status" placeholder="请选择当前状态">
             <el-option v-for="item in disabledOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
@@ -143,12 +157,11 @@ export default {
     return {
       // 遮罩层
       loading: false,
-      // 二级id
-      secondId: this.$route.query.secondId,
-      // 三级id
-      threeId: this.$route.query.threeId,
       // 表单
-      form: [],
+      form: {
+        // 模板列表
+        list: []
+      },
       // 模板
       module: [],
       // 弹窗
@@ -207,7 +220,43 @@ export default {
       // 只读
       isRead: false,
       // 缓存内容图片
-      picList: {}
+      picList: {},
+      // 校验
+      rules: {
+        title: [{
+          required: true, message: '请输入标题', trigger: 'blur'
+        }],
+        description: [{
+          required: true, message: '请输入简介', trigger: 'blur'
+        }],
+        contentName: [{
+          required: true, message: '请选择内容', trigger: 'blur'
+        }],
+        forwardType: [{
+          required: true, message: '请选择跳转方式', trigger: 'change'
+        }],
+        forwardUrl: [{
+          required: true, message: '请输入跳转地址', trigger: 'blur'
+        }],
+        contentId: [{
+          required: true, message: '请选择跳转专区', trigger: 'change'
+        }],
+        isCustom: [{
+          required: true, message: '请选择封面模式', trigger: 'change'
+        }],
+        pic: [{
+          required: true, message: '请上传图片', trigger: 'change'
+        }],
+        sort: [{
+          required: true, message: '请选择排序', trigger: 'change'
+        }],
+        childList: [{
+          required: true, message: '请关联内容', trigger: 'change'
+        }],
+        status: [{
+          required: true, message: '请选择当前状态', trigger: 'change'
+        }]
+      }
     }
   },
   watch: {
@@ -288,7 +337,7 @@ export default {
               }
               obj.status = i.status
             }
-            this.form.push(obj)
+            this.form.list.push(obj)
           })
         }
       })
@@ -301,7 +350,7 @@ export default {
         obj[i] = i === 'childList' ? [] : i === 'module' ? {} : ''
       })
       obj.status = 0
-      this.form.push(obj)
+      this.form.list.push(obj)
     },
 
     // 爱听专区
@@ -319,7 +368,8 @@ export default {
     },
 
     // 跳转方式
-    forwardTypeChange(item) {
+    forwardTypeChange(item, index) {
+      this.$refs.list[index].clearValidate()
       this.$set(item, 'module', {}),
         [0, 1, 2, 3, 4].includes(item.forwardType) ? [
           this.$set(item, 'contentName', ''),
@@ -377,8 +427,8 @@ export default {
           this.dialogTableData = res.data.records
           this.total = res.data.total
           this.$refs.dialogTableData.clearSelection()
-          if (this.form[this.index].childList && this.form[this.index].childList.length > 0) {
-            this.form[this.index].childList.map(i => {
+          if (this.form.list[this.index].childList && this.form.list[this.index].childList.length > 0) {
+            this.form.list[this.index].childList.map(i => {
               let row = res.data.records.find(j => j.audioId === i.module.contentId)
               // 有相同数据就回显勾选
               if (row) {
@@ -403,7 +453,7 @@ export default {
 
     // 选择
     getSelect(row) {
-      let e = this.form[this.index]
+      let e = this.form.list[this.index]
       e.module = {
         contentId: row.audioId,
         platformId: row.platformId,
@@ -426,8 +476,8 @@ export default {
     handleSelectionChange(row) {
       if (row.length > 0) {
         row.map(i => {
-          if (this.form[this.index].childList.findIndex(j => j.module.contentId === i.audioId) === -1) {
-            this.form[this.index].childList.push({
+          if (this.form.list[this.index].childList.findIndex(j => j.module.contentId === i.audioId) === -1) {
+            this.form.list[this.index].childList.push({
               module: {
                 contentId: i.audioId,
                 platformId: i.platformId,
@@ -462,30 +512,42 @@ export default {
       }
     },
 
+    // 删除模块
+    getDelete(index) {
+      this.form.list.splice(index, 1)
+    },
+
+    // 删除关联
+    getRemove(row, index) {
+      let e = this.form.list[index].childList.findIndex(i => i.module.contentId === row.module.contentId)
+      this.form.list[index].childList.splice(e, 1)
+    },
+
+
     // 提交
     getSubmit() {
-      // 区分2级新增 还是 3级编辑
-      let data = this.secondId ? {
-        secondId: this.secondId,
-        list: this.form
-      } : {
-        threeId: this.threeId,
-        list: this.form
-      }
-      // 删除仅作展示的缓存数据
-      for (const index in this.form) {
-        delete this.form[index].contentId
-        if ('description' in this.form[index]) {
-          this.form[index].module.description = this.form[index].description
-          delete this.form[index].description
-        }
-      }
-      submitThree(data).then(res => {
-        if (res.code === 0) {
-          this.$message.success('提交成功！')
-          this.cancel()
+      this.$refs.list.map(i => i.validate((valid) => {
+        if (valid) {
+          // 区分2级新增 还是 3级编辑
+          this.$route.query.secondId ? this.form.secondId = this.$route.query.secondId : this.form.threeId = this.$route.query.threeId
+          // 删除仅作展示的缓存数据
+          for (const index in this.form.list) {
+            delete this.form.list[index].contentId
+            if ('description' in this.form.list[index]) {
+              this.form.list[index].module.description = this.form.list[index].description
+              delete this.form.list[index].description
+            }
+          }
+          submitThree(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功！')
+              this.cancel()
+            }
+          })
+        } else {
+          return false
         }
-      })
+      }))
     },
 
     // 返回
@@ -493,17 +555,6 @@ export default {
       this.$tab.closeOpenPage("/operation/operationRecommend");
     },
 
-    // 删除模块
-    getDelete(index) {
-      this.form.splice(index, 1)
-    },
-
-    // 删除关联
-    getRemove(row, index) {
-      let e = this.form[index].childList.findIndex(i => i.module.contentId === row.module.contentId)
-      this.form[index].childList.splice(e, 1)
-    },
-
     // 字典翻译
     audioFormatter(row) {
       return this.selectDictLabel(this.audioOptions, row.audioType)

src/views/operation/recommend/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="app-container">
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true, title = '新增'"
-      v-hasPermi="['operation:recommend:add']">新增</el-button>
     <!-- 列表 -->
     <el-table :data="tableData" ref="tableData" row-key="id" :default-sort="{ prop: 'sort', order: 'ascending' }"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
@@ -21,33 +19,39 @@
           <span v-else>{{ tabOptions.find(i => i.id == scope.row.categoryId).name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="模块名称" align="center" prop="moduleName" show-overflow-tooltip />
       <el-table-column label="模块类型" align="center" prop="moduleTypeId" show-overflow-tooltip :formatter="typeFormatter" />
+      <el-table-column label="模块名称" align="center" prop="moduleName" show-overflow-tooltip />
       <el-table-column label="模块数量" align="center" prop="moduleNum" />
       <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip />
-      <el-table-column label="生效时间" align="center" show-overflow-tooltip width="380px">
+      <el-table-column label="有效时间" align="center" show-overflow-tooltip width="380px">
         <template slot-scope="scope">
           <span v-if="scope.row.lv === 3">
-            <el-date-picker v-if="checkPermi(['operation:recommend:time'])" v-model="scope.row.rsDates"
-              popper-class="popper-class" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
-              value-format="yyyy-MM-dd HH:mm:ss" @change="getChange(scope.row)" :clearable="false" />
-            <span v-else>{{ scope.row.rsDates[0] }} - {{ scope.row.rsDates[1] }}</span>
+            {{ scope.row.rsDates[0] }} - {{ scope.row.rsDates[1] }}
           </span>
         </template>
       </el-table-column>
       <el-table-column label="当前状态" align="center" prop="isProgressStatus" :formatter="statusFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.lv === 2" type="text" @click="getDetail(scope.row)"
-            v-hasPermi="['operation:recommend:add']">新增</el-button>
-          <el-button v-if="scope.row.lv === 1" type="text" @click="getDialog(scope.row.id)">历史记录</el-button>
-          <span v-else style="margin-left: 10px">
-            <el-button type="text" @click="getOpen('查看', scope.row, true)">查看</el-button>
-            <el-button type="text" @click="getOpen('编辑', scope.row)"
+          <span v-if="scope.row.lv === 1">
+            <el-button type="text" @click="getDialog('新增', scope.row)"
+              v-hasPermi="['operation:recommend:add']">新增</el-button>
+            <el-button type="text" @click="getHistoryDialog(scope.row.id)">历史记录</el-button>
+          </span>
+          <span v-else-if="scope.row.lv === 2">
+            <el-button type="text" @click="getDetail(scope.row)" v-hasPermi="['operation:recommend:add']">新增</el-button>
+            <el-button type="text" @click="getDialog('查看', scope.row)">查看</el-button>
+            <el-button type="text" @click="getDialog('编辑', scope.row)"
               v-hasPermi="['operation:recommend:edit']">编辑</el-button>
             <el-button type="delete" @click="getDelete(scope.row)"
               v-hasPermi="['operation:recommend:delete']">删除</el-button>
           </span>
+          <span v-else>
+            <el-button type="text" @click="getDetail(scope.row, true)">查看</el-button>
+            <el-button type="text" @click="getDetail(scope.row)" v-hasPermi="['operation:recommend:edit']">编辑</el-button>
+            <el-button type="delete" @click="getDelete(scope.row)"
+              v-hasPermi="['operation:recommend:delete']">删除</el-button>
+          </span>
         </template>
       </el-table-column>
     </el-table>
@@ -55,14 +59,6 @@
     <!-- 弹窗 -->
     <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
       <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px" :disabled="title === '查看'">
-        <el-form-item label="导航名称：" prop="categoryId">
-          <el-select v-model="dialogForm.categoryId" placeholder="请选择导航" :disabled="title === '编辑'">
-            <el-option v-for="item in tabOptions" :key="item.id" :value="item.id.toString()" :label="item.name" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模块名称：" prop="moduleName">
-          <el-input v-model="dialogForm.moduleName" placeholder="请输入模块名称" />
-        </el-form-item>
         <el-form-item label="模块类型：" prop="moduleTypeId">
           <el-select v-model="dialogForm.moduleTypeId" placeholder="请选择模块类型" :disabled="title === '编辑'">
             <el-option v-for="item in typeOptions" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
@@ -86,7 +82,7 @@
             end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
         </el-form-item>
         <el-form-item label="模块名称：">
-          <el-input v-model="dialogForm_list.moduleName" placeholder="请输入模块名称" />
+          <el-input v-model="dialogForm_list.moduleName" placeholder="请输入模块名称" clearable />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
@@ -106,7 +102,7 @@
         <el-table-column label="创建时间" prop="createTime" align="center" />
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="getOpen('查看', scope.row, true)">查看</el-button>
+            <el-button type="text" @click="getDetail(scope.row, true)">查看</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -118,7 +114,6 @@
 
 <script>
 import { tabList, typeList, list, submit, listDetail, remove, history, timeChange } from '@/api/operation/recommend'
-import { checkPermi } from '@/utils/permission'
 export default {
   data() {
     return {
@@ -243,14 +238,27 @@ export default {
       this.dialogForm = {}
     },
 
-    // 新增模块
+    // 弹窗
+    getDialog(title, row) {
+      this.title = title
+      this.dialogVisible = true
+      this.dialogForm.categoryId = row.id
+      if (row.lv === 2) {
+        listDetail(row.id).then(res => {
+          if (res.code === 0) {
+            this.dialogForm = res.data
+          }
+        })
+      }
+    },
+
+    // 详情页
     getDetail(row, boolean) {
       this.$router.push({
         path: `/operation/recommend/detail`,
         query: row.lv === 2 ? {
           secondId: row.id,
-          moduleTypeId: row.moduleTypeId,
-          boolean: boolean
+          moduleTypeId: row.moduleTypeId
         } : {
           threeId: row.id,
           moduleTypeId: row.moduleTypeId,
@@ -259,24 +267,9 @@ export default {
       })
     },
 
-    // 查看 编辑
-    getOpen(title, row, boolean) {
-      this.title = title
-      if (row.lv === 2) {
-        this.dialogVisible = true
-        listDetail(row.id).then(res => {
-          if (res.code === 0) {
-            this.dialogForm = res.data
-          }
-        })
-      } else {
-        this.getDetail(row, boolean)
-      }
-    },
-
     // 删除
     getDelete(row) {
-      this.$confirm(`是否删除${row.moduleName}?`, '提醒', {
+      this.$confirm(`是否删除?`, '提醒', {
         type: 'warning'
       }).then(() => {
         remove(row.lv, row.id).then(res => {
@@ -289,7 +282,7 @@ export default {
     },
 
     // 历史记录
-    getDialog(id) {
+    getHistoryDialog(id) {
       this.dialogVisible_list = true
       this.loading = true
       this.dialogForm_list.categoryId = id
@@ -343,10 +336,7 @@ export default {
 
     typeFormatter(row) {
       return row.moduleTypeId ? this.typeOptions.find(i => i.typeId === row.moduleTypeId).typeName : ''
-    },
-
-    // 权限判断
-    checkPermi
+    }
   }
 }
 </script>