推荐管理重构

src/views/operation/recommend/detail.vue

@@ -7,46 +7,52 @@
       <el-form-item class="sort" :label="(index + 1).toString()">
         <el-link icon="el-icon-close" :underline="false" />
       </el-form-item>
-      <el-form-item v-if="'date' in item" label="时间：">
-        <el-date-picker v-model="item.date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
-          value-format="yyyy-MM-dd HH:mm:ss" />
-      </el-form-item>
       <el-form-item v-if="'title' in item" label="标题：">
-        <el-input v-model="item.title" placeholder="请输入标题" />
+        <el-input v-model="item.title" placeholder="请输入内容标题" />
       </el-form-item>
       <el-form-item v-if="'model' in item" label="模式：">
-        <el-select v-model="item.model" placeholder="请选择模式" @change="getModel(item)">
-          <!-- <el-option v-for="item in contentOptions" :key="item.value" :label="item.label" :value="Number(item.value)" /> -->
+        <el-select v-model="item.model" placeholder="请选择模式">
+          <el-option v-for="item in modelOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item v-if="'description' in item" label="简介：">
         <el-input v-model="item.description" type="textarea" rows="4" placeholder="请输入简介" />
       </el-form-item>
       <el-form-item v-if="'contentName' in item" label="内容：">
-        <el-input v-model="item.contentName" prefix-icon="el-icon-search" placeholder="选择内容" @focus="getDialog(index)" />
+        <el-input v-model="item.contentName" prefix-icon="el-icon-search" placeholder="选择内容" />
       </el-form-item>
       <el-form-item v-if="'forwardType' in item" label="跳转方式：">
-        <el-select v-model="item.forwardType" placeholder="请选择跳转方式" @change="getForwardType(item)">
-          <!-- <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="Number(item.value)" /> -->
+        <el-select v-model="item.forwardType" placeholder="请选择跳转方式" @change="changeForwardType($event, 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-input v-model="item.forwardUrl" placeholder="请输入跳转地址" />
       </el-form-item>
+      <el-form-item v-if="'contentId' in item" label="专区页面：">
+        <el-select v-model="item.contentId" placeholder="请选择跳转专区">
+          <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-select v-model="item.isCustom" placeholder="选择封面模式">
-          <!-- <el-option v-for="item in coverOptions" :key="item.value" :label="item.label" :value="Number(item.value)" /> -->
+          <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="getUpload($event, index)" />
+        <Upload listType="picture-card" :url="item.pic" />
       </el-form-item>
       <el-form-item v-if="'sort' in item" label="排序：">
         <el-input-number v-model="item.sort" />
       </el-form-item>
+      <el-form-item v-if="'list' in item" label="列表：">
+        <el-table>
+          <el-table-column></el-table-column>
+        </el-table>
+      </el-form-item>
       <el-form-item>
         <el-button>清空</el-button>
-        <el-button type="primary">提交</el-button>
+        <el-button type="primary" @click="getSubmit">提交</el-button>
         <el-button type="primary" plain>上架</el-button>
       </el-form-item>
     </el-form>
@@ -68,7 +74,10 @@
 </template>
 
 <script>
+import { list } from '@/api/operation/scene'
+import { coverMixin } from '@/mixin/index'
 export default {
+  mixins: [coverMixin],
   data() {
     return {
       // 模块
@@ -79,9 +88,6 @@ export default {
       mouldList: [],
       // 模块选择
       mouldOptions: [{
-        value: 'date',
-        label: '时间'
-      }, {
         value: 'title',
         label: '标题'
       }, {
@@ -97,9 +103,6 @@ export default {
         value: 'forwardType',
         label: '跳转方式'
       }, {
-        value: 'forwardUrl',
-        label: '跳转地址'
-      }, {
         value: 'isCustom',
         label: '封面模式'
       }, {
@@ -109,25 +112,103 @@ export default {
         value: 'sort',
         label: '排序'
       }, {
-        value: 11,
+        value: 'list',
         label: '列表'
-      }]
+      }],
+      // 模板类型
+      modelOptions: [{
+        value: 0,
+        label: '自动推荐内容'
+      }, {
+        value: 1,
+        label: '手动推荐内容'
+      }],
+      // 跳转方式
+      forwardTypeOptions: [{
+        value: 0,
+        label: '跳转广播',
+        type: 2
+      }, {
+        value: 1,
+        label: '跳转歌曲',
+        type: 11
+      }, {
+        value: 2,
+        label: '跳转歌单',
+        type: 10
+      }, {
+        value: 3,
+        label: '跳转专辑',
+        type: 8
+      }, {
+        value: 4,
+        label: '跳转节目',
+        type: 6
+      }, {
+        value: 7,
+        label: '跳转专区',
+        type: 16
+      }, {
+        value: 5,
+        label: '跳转H5内链'
+      }, {
+        value: 6,
+        label: '跳转H5外链'
+      }],
+      // 专区模块
+      sceneOptions: []
     }
   },
   mounted() {
-
+    this.getSceneList()
   },
   methods: {
     // 新增模块
     getPush() {
-      let index = this.list.length
-      this.list[index] = {}
+      let item = {}
       this.mouldList.map(i => {
-        this.list[index][i] = null
+        item[i] = null
       })
+      this.list.push(item)
       this.dialogVisible = false
     },
 
+    // 跳转方式
+    changeForwardType(e, index) {
+      [5, 6].includes(e) ? [
+        this.list[index].forwardUrl = null,
+        delete this.list[index].contentName,
+        delete this.list[index].contentId,
+      ] : [7].includes(e) ? [
+        this.list[index].contentId = null,
+        delete this.list[index].contentName,
+        delete this.list[index].forwardUrl
+      ] : [
+        this.list[index].contentName = null,
+        delete this.list[index].forwardUrl,
+        delete this.list[index].contentId,
+      ]
+    },
+
+    // 爱听专区
+    getSceneList() {
+      list().then(res => {
+        if (res.code === 0) {
+          res.data.map(i => {
+            this.sceneOptions.push({
+              value: i.id,
+              label: i.name
+            })
+          })
+        }
+      })
+    },
+
+    // 提交
+    getSubmit() {
+      console.log(this.list);
+    },
+
     // 返回
     close() {
       this.$tab.closeOpenPage("/operation/recommend");

src/views/operation/recommend/index.vue

@@ -3,7 +3,8 @@
     <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true">新增</el-button>
     <!-- 列表 -->
     <el-table :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-      <el-table-column label="排序" prop="sort"></el-table-column>
+      <el-table-column width="80px" />
+      <el-table-column label="排序" align="center" prop="sort"></el-table-column>
       <el-table-column label="导航名称" align="center" prop="tabName"></el-table-column>
       <el-table-column label="模板名称" align="center" prop="mouldName"></el-table-column>
       <el-table-column label="模板数量" align="center" prop="number"></el-table-column>
@@ -13,7 +14,7 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button v-if="scope.row.type === 2" type="text" @click="getDetail">新增</el-button>
-          <el-button v-if="scope.row.type === 1" type="text">历史记录</el-button>
+          <el-button v-if="scope.row.type === 1" type="text" @click="getDialog()">历史记录</el-button>
           <span v-else style="margin-left: 10px">
             <el-button type="text">查看</el-button>
             <el-button type="text" @click="getDetail">编辑</el-button>
@@ -31,9 +32,9 @@
             <el-option v-for="item in tabOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="模板名称：">
+        <el-form-item label="模板名称：">
           <el-input v-model="dialogForm.mouldName" placeholder="请输入模板名称" />
-        </el-form-item> -->
+        </el-form-item>
         <el-form-item label="模板类型：">
           <el-select placeholder="请选择模板类型">
             <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
@@ -48,6 +49,36 @@
         <el-button type="primary">确定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 历史记录 -->
+    <el-dialog :visible.sync="dialogVisible_list" title="历史记录" width="1000px">
+      <el-form inline size="mini">
+        <el-form-item label="">
+          <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
+            value-format="yyyy-MM-dd HH:mm:ss" />
+        </el-form-item>
+        <el-form-item label="模块名称：">
+          <el-input placeholder="请输入模块名称" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          <el-button icon="el-icon-refresh">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table>
+        <el-table-column label="模块名称" align="center" />
+        <el-table-column label="模块类型" align="center" />
+        <el-table-column label="模块数量" align="center" />
+        <el-table-column label="有效时间" align="center" />
+        <el-table-column label="当前状态" align="center" />
+        <el-table-column label="创建时间" align="center" />
+        <el-table-column label="操作" align="center">
+          <template>
+            <el-button type="text">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -120,8 +151,10 @@ export default {
       }],
       // 弹窗
       dialogVisible: false,
+      dialogVisible_list: false,
       // 弹窗表单
       dialogForm: {},
+      dialogForm_list: {},
       // 导航栏
       tabOptions: [{
         value: 1,
@@ -142,16 +175,31 @@ export default {
         label: '轮播图'
       }, {
         value: 2,
-        label: '四宫格'
+        label: '轮播图（排序）'
       }, {
         value: 3,
-        label: '横排列'
+        label: '场景模式'
       }, {
         value: 4,
-        label: '精选电台'
+        label: '个性推荐'
       }, {
         value: 5,
-        label: '竖排列'
+        label: '个性推荐（排序）'
+      }, {
+        value: 6,
+        label: '歌单'
+      }, {
+        value: 7,
+        label: '歌单（标题）'
+      }, {
+        value: 8,
+        label: '歌单（排序）'
+      }, {
+        value: 9,
+        label: '音乐随心听'
+      }, {
+        value: 10,
+        label: '精选音乐电台'
       }]
     }
   },
@@ -164,6 +212,11 @@ export default {
       this.$router.push({
         path: `/operation/recommend/detail`
       })
+    },
+
+    // 历史记录
+    getDialog() {
+      this.dialogVisible_list = true
     }
   }
 }