fix: no positioning of sidebar after saving the scheduling

src/layout/components/AppMain.vue

@@ -3,13 +3,18 @@
     name="fade-transform"
     mode="out-in"
   >
-    <router-view />
+    <router-view :key="key" />
   </transition>
 </template>
 
 <script>
 export default {
-  name: 'AppMain'
+  name: 'AppMain',
+  computed: {
+    key () {
+      return this.$route.matched[1].path
+    }
+  }
 }
 </script>
 

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import { Access } from '@/constant'
 import Layout from '@/layout'
 import Solo from '@/layout/Solo'
+import { ScheduleType } from '@/constant'
 
 Vue.use(Router)
 
@@ -77,7 +78,7 @@ export const asyncRoutes = [
         path: 'program',
         component: () => import('@/views/bigscreen/index'),
         access: Access.MANAGE_CALENDAR,
-        meta: { title: '节目编排' }
+        meta: { title: '节目编辑' }
       },
       {
         path: 'recur',
@@ -86,16 +87,28 @@ export const asyncRoutes = [
         meta: { title: '轮播编排' },
         children: [
           {
-            name: 'recur',
+            name: 'recur-list',
             path: '',
-            component: () => import('@/views/bigscreen/recur/index'),
-            meta: { cache: 'ProgramRecur' }
+            component: () => import('@/views/schedule/index'),
+            meta: {
+              activeMenu: '/cm/recur',
+              cache: 'ScheduleList',
+              info: {
+                type: ScheduleType.RECUR,
+                design: 'recur-design'
+              }
+            }
           },
           {
             name: 'recur-design',
             path: ':id',
             component: () => import('@/views/schedule/designer/index'),
-            meta: { title: '编辑', activeMenu: '/cm/recur', cache: 'ProgramRecur' },
+            meta: {
+              title: '编辑',
+              activeMenu: '/cm/recur',
+              cache: 'ScheduleList',
+              info: { redirect: 'recur-list' }
+            },
             hidden: true
           }
         ]
@@ -104,19 +117,31 @@ export const asyncRoutes = [
         path: 'schedule',
         component: Solo,
         access: Access.MANAGE_CALENDAR,
-        meta: { title: '节目排期' },
+        meta: { title: '排期编排' },
         children: [
           {
             name: 'schedule-list',
             path: '',
             component: () => import('@/views/schedule/index'),
-            meta: { cache: 'ScheduleList' }
+            meta: {
+              activeMenu: '/cm/schedule',
+              cache: 'ScheduleList',
+              info: {
+                type: ScheduleType.COMPLEX,
+                design: 'schedule-design'
+              }
+            }
           },
           {
             name: 'schedule-design',
             path: ':id',
             component: () => import('@/views/schedule/designer/index'),
-            meta: { title: '排期编辑', activeMenu: '/cm/schedule', cache: 'ScheduleList' },
+            meta: {
+              title: '编辑',
+              activeMenu: '/cm/schedule',
+              cache: 'ScheduleList',
+              info: { redirect: 'schedule-list' }
+            },
             hidden: true
           }
         ]

src/views/bigscreen/recur/index.vue

@@ -1,376 +0,0 @@
-<template>
-  <wrapper
-    fill
-    margin
-    padding
-    background
-  >
-    <c-table
-      :curr="options"
-      @pagination="getList"
-    >
-      <template #header>
-        <div class="l-flex__auto c-sibling-item">
-          <button
-            class="o-button"
-            @click="toAdd"
-          >
-            <i class="o-button__icon el-icon-circle-plus-outline" />
-            新增
-          </button>
-        </div>
-        <el-select
-          v-model="options.params.resolutionRatio"
-          class="l-flex__none c-sibling-item o-select"
-          placeholder="请选择分辨率"
-          :loading="fetching"
-          @change="search"
-          @visible-change="getRatios"
-        >
-          <el-option
-            v-for="item in resolutionRatios"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select
-          v-model="options.params.status"
-          class="l-flex__none c-sibling-item o-select"
-          placeholder="请选择状态"
-          @change="search"
-        >
-          <el-option
-            v-for="item in statusOptions"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <search-input
-          v-model.trim="options.params.name"
-          class="l-flex__none c-sibling-item"
-          placeholder="轮播名称"
-          @search="search"
-        />
-        <button
-          class="l-flex__none c-sibling-item o-button"
-          @click="search"
-        >
-          搜索
-        </button>
-      </template>
-      <el-table-column
-        prop="name"
-        label="轮播名称"
-        align="center"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        prop="resolutionRatio"
-        label="分辨率"
-        align="center"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        label="审核状态"
-        align="center"
-        min-width="100"
-      >
-        <template v-slot="scope">
-          <el-tag
-            v-if="scope.row.status === 1"
-            class="o-tag u-readonly"
-            type="warning"
-            size="medium"
-          >
-            未审核
-          </el-tag>
-          <el-tag
-            v-else-if="scope.row.status === 2"
-            class="o-tag u-readonly"
-            type="success"
-            size="medium"
-          >
-            已审核
-          </el-tag>
-          <el-tag
-            v-else
-            class="o-tag u-readonly"
-            size="medium"
-          >
-            待提交
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="创建时间"
-        align="center"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        label="操作"
-        align="center"
-        width="180"
-      >
-        <template v-slot="scope">
-          <template v-if="scope.row.status === 0">
-            <div
-              class="c-table__btn u-pointer"
-              @click="toDesign(scope.row.id)"
-            >
-              编辑
-            </div>
-            <div
-              class="c-table__btn u-pointer"
-              @click="toSubmit(scope.row)"
-            >
-              提交
-            </div>
-          </template>
-          <div
-            v-else
-            class="c-table__btn u-pointer"
-            @click="toView(scope.row.id)"
-          >
-            预览
-          </div>
-          <permission
-            :skip="scope.row.status === 0"
-            :access="Access.DELETE_FORCE"
-          >
-            <div
-              class="c-table__btn u-pointer"
-              @click="toDel(scope.row)"
-            >
-              删除
-            </div>
-          </permission>
-        </template>
-      </el-table-column>
-    </c-table>
-    <el-dialog
-      title="新增排期"
-      :visible.sync="adding"
-      custom-class="c-dialog"
-      :close-on-click-modal="false"
-    >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label">名称：</span>
-          <el-input
-            v-model.trim="schedule.name"
-            class="c-form__item"
-            placeholder="请输入名称"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">分辨率：</span>
-          <el-select
-            v-model="schedule.resolutionRatio"
-            class="c-form__item"
-            placeholder="请选择"
-            popper-class="o-select-option"
-            :loading="fetching"
-          >
-            <el-option
-              v-for="ratio in ratios"
-              :key="ratio.value"
-              :label="ratio.label"
-              :value="ratio.value"
-            />
-          </el-select>
-        </div>
-      </div>
-      <template #footer>
-        <button
-          class="o-button"
-          @click="add"
-        >
-          确定
-        </button>
-        <button
-          class="o-button cancel"
-          @click="handleCloseAddDialog"
-        >
-          取消
-        </button>
-      </template>
-    </el-dialog>
-    <el-dialog
-      :visible.sync="isPreview"
-      custom-class="c-preview schedule"
-      :before-close="handleCloseScheduleDialog"
-    >
-      <schedule
-        v-if="scheduleId"
-        class="l-flex__auto has-padding"
-        :schedule="scheduleId"
-      />
-    </el-dialog>
-  </wrapper>
-</template>
-
-<script>
-import { getRatios } from '@/api/device'
-import {
-  getSchedules,
-  addSchedule,
-  deleteSchedule,
-  submitSchedule
-} from '@/api/calendar'
-import { State } from '@/constant'
-import { ScheduleType } from '@/constant'
-import { createListOptions } from '@/utils'
-
-export default {
-  name: 'ProgramRecur',
-  data () {
-    return {
-      statusOptions: [
-        { value: void 0, label: '全部状态' },
-        { value: State.READY, label: '待提交' },
-        { value: State.SUBMITTED, label: '未审核' },
-        { value: State.RESOLVED, label: '已审核' }
-      ],
-      options: createListOptions({
-        type: ScheduleType.RECUR,
-        status: void 0,
-        resolutionRatio: void 0,
-        name: ''
-      }),
-      adding: false,
-      schedule: {},
-      scheduleId: null,
-      fetching: false,
-      ratios: [],
-      isPreview: false
-    }
-  },
-  computed: {
-    resolutionRatios () {
-      return [{ value: void 0, label: '全部分辨率' }].concat(this.ratios.map(({ value }) => {
-        return { value, label: value }
-      }))
-    }
-  },
-  created () {
-    this.getList()
-  },
-  activated () {
-    if (this.$route.params.refresh) {
-      const status = this.options.params.status
-      if (status !== void 0) {
-        this.options.params.status = void 0
-      }
-      this.search()
-    }
-  },
-  methods: {
-    search () {
-      const options = this.options
-      options.list = []
-      options.totalCount = 0
-      options.params.pageNum = 1
-      this.getList()
-    },
-    getList () {
-      const options = this.options
-      if (!options.loading) {
-        options.error = false
-        options.loading = true
-        getSchedules(options.params).then(({ data, totalCount }) => {
-          options.list = data
-          options.totalCount = totalCount
-        }, () => {
-          options.error = true
-          options.list = []
-        }).finally(() => {
-          options.loading = false
-        })
-      }
-    },
-    getRatios () {
-      if (!this.fetching && this.ratios.length === 0) {
-        this.fetching = true
-        getRatios().then(ratios => {
-          this.ratios = ratios
-        }).finally(() => {
-          this.fetching = false
-        })
-      }
-    },
-    toAdd () {
-      this.schedule = {
-        type: ScheduleType.RECUR,
-        name: '',
-        resolutionRatio: ''
-      }
-      this.adding = true
-      this.getRatios()
-    },
-    handleCloseAddDialog () {
-      this.adding = false
-    },
-    add () {
-      if (!this.schedule.name) {
-        this.$message({
-          type: 'warning',
-          message: '名称不能为空'
-        })
-        return
-      }
-      if (!this.schedule.resolutionRatio) {
-        this.$message({
-          type: 'warning',
-          message: '请选择分辨率'
-        })
-        return
-      }
-      addSchedule(this.schedule).then(({ data: id }) => {
-        this.handleCloseAddDialog()
-        const params = this.options.params
-        if (params.status && params.status !== State.READY) {
-          params.status = void 0
-        }
-        if (params.name && !(new RegExp(params.name).test(this.schedule.name))) {
-          params.name = ''
-        }
-        this.search()
-        this.toDesign(id)
-      })
-    },
-    toView (id) {
-      this.scheduleId = id
-      this.isPreview = true
-    },
-    handleCloseScheduleDialog () {
-      this.scheduleId = null
-      this.isPreview = false
-    },
-    toDesign (id) {
-      this.$router.push({
-        name: 'recur-design',
-        params: { id: `${id}` }
-      })
-    },
-    toSubmit (item) {
-      submitSchedule(item).then(() => {
-        this.search()
-      })
-    },
-    toDel (item) {
-      const options = this.options
-      deleteSchedule(item).then(() => {
-        if (options.list.length === 1 && options.params.pageNum > 1) {
-          options.params.pageNum -= 1
-        }
-        this.getList()
-      })
-    }
-  }
-}
-</script>

src/views/schedule/designer/index.vue

@@ -24,7 +24,7 @@ export default {
   methods: {
     onSubmit () {
       this.$router.replace({
-        name: 'schedule-list',
+        name: this.$route.meta.info.redirect,
         params: { refresh: true }
       })
     }

src/views/schedule/index.vue

@@ -2,10 +2,10 @@
   <wrapper
     fill
     margin
+    padding
     background
   >
     <c-table
-      class="has-padding"
       :curr="options"
       @pagination="getList"
     >
@@ -13,7 +13,7 @@
         <div class="l-flex__auto c-sibling-item">
           <button
             class="o-button"
-            @click="toAdd"
+            @click="onAdd"
           >
             <i class="o-button__icon el-icon-circle-plus-outline" />
             新增
@@ -50,7 +50,7 @@
         <search-input
           v-model.trim="options.params.name"
           class="l-flex__none c-sibling-item"
-          placeholder="排期名称"
+          placeholder="名称"
           @search="search"
         />
         <button
@@ -62,7 +62,7 @@
       </template>
       <el-table-column
         prop="name"
-        label="排期名称"
+        label="名称"
         align="center"
         show-overflow-tooltip
       />
@@ -129,13 +129,20 @@
               提交
             </div>
           </template>
-          <div
-            v-else
-            class="c-table__btn u-pointer"
-            @click="toView(scope.row.id)"
-          >
-            预览
-          </div>
+          <template v-else>
+            <div
+              class="c-table__btn u-pointer"
+              @click="onView(scope.row.id)"
+            >
+              预览
+            </div>
+            <div
+              class="c-table__btn u-pointer"
+              @click="onCopy(scope.row)"
+            >
+              复制
+            </div>
+          </template>
           <permission
             :skip="scope.row.status === 0"
             :access="Access.DELETE_FORCE"
@@ -151,7 +158,7 @@
       </el-table-column>
     </c-table>
     <el-dialog
-      title="新增排期"
+      title="新增"
       :visible.sync="adding"
       custom-class="c-dialog"
       :close-on-click-modal="false"
@@ -201,7 +208,7 @@
       </template>
     </el-dialog>
     <el-dialog
-      :visible.sync="isPreview"
+      :visible.sync="isPreviewing"
       custom-class="c-preview schedule"
       :before-close="onCloseScheduleDialog"
     >
@@ -222,10 +229,7 @@ import {
   deleteSchedule,
   submitSchedule
 } from '@/api/calendar'
-import {
-  ScheduleType,
-  State
-} from '@/constant'
+import { State } from '@/constant'
 import { createListOptions } from '@/utils'
 
 export default {
@@ -239,7 +243,7 @@ export default {
         { value: State.RESOLVED, label: '已审核' }
       ],
       options: createListOptions({
-        type: ScheduleType.COMPLEX,
+        type: this.$route.meta.info.type,
         status: void 0,
         resolutionRatio: void 0,
         name: ''
@@ -249,7 +253,7 @@ export default {
       scheduleId: null,
       fetching: false,
       ratios: [],
-      isPreview: false
+      isPreviewing: false
     }
   },
   computed: {
@@ -305,9 +309,9 @@ export default {
         })
       }
     },
-    toAdd () {
+    onAdd () {
       this.schedule = {
-        type: ScheduleType.COMPLEX,
+        type: this.$route.meta.info.type,
         name: '',
         resolutionRatio: ''
       }
@@ -345,17 +349,17 @@ export default {
         this.onDesign(id)
       })
     },
-    toView (id) {
+    onView (id) {
       this.scheduleId = id
-      this.isPreview = true
+      this.isPreviewing = true
     },
     onCloseScheduleDialog () {
       this.scheduleId = null
-      this.isPreview = false
+      this.isPreviewing = false
     },
     onDesign (id) {
       this.$router.push({
-        name: 'schedule-design',
+        name: this.$route.meta.info.design,
         params: { id: `${id}` }
       })
     },