feat: support multi-level page caching

src/layout/Solo.vue

@@ -0,0 +1,15 @@
+<template>
+  <keep-alive :include="cacheRoutes">
+    <router-view />
+  </keep-alive>
+</template>
+
+<script>
+export default {
+  computed: {
+    cacheRoutes () {
+      return this.$route.meta?.cache || []
+    }
+  }
+}
+</script>

src/layout/components/AppMain.vue

@@ -3,9 +3,7 @@
     name="fade-transform"
     mode="out-in"
   >
-    <keep-alive :include="cacheRoutes">
-      <router-view :key="key" />
-    </keep-alive>
+    <router-view />
   </transition>
 </template>
 
@@ -14,10 +12,13 @@ export default {
   name: 'AppMain',
   computed: {
     key () {
-      return this.$route.path
-    },
-    cacheRoutes () {
-      return this.$store.state.cacheRoutes
+      const { path, matched } = this.$route
+      for (let i = 1; i >= 0; i--) {
+        if (matched[i].name) {
+          return matched[i].name
+        }
+      }
+      return path
     }
   }
 }

src/layout/components/Navbar/Breadcrumb.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-breadcrumb class="c-breadcrumb" separator="/">
+  <el-breadcrumb
+    class="c-breadcrumb"
+    separator="/"
+  >
     <transition-group name="breadcrumb">
       <el-breadcrumb-item
         v-for="(item, index) in levelList"
@@ -70,7 +73,7 @@ export default {
 <style lang="scss" scoped>
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .breadcrumb-enter,
@@ -80,7 +83,7 @@ export default {
 }
 
 .breadcrumb-move {
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .breadcrumb-leave-active {

src/main.js

@@ -18,6 +18,7 @@ import Permission from './components/Permission'
 import StatusWrapper from './components/StatusWrapper'
 import Pagination from './components/Pagination'
 import CTable from './components/CTable'
+import AutoText from '@/components/AutoText'
 import EditInput from './components/EditInput'
 import SearchInput from './components/SearchInput'
 
@@ -34,6 +35,7 @@ async function startApp () {
   Vue.component('StatusWrapper', StatusWrapper)
   Vue.component('Pagination', Pagination)
   Vue.component('CTable', CTable)
+  Vue.component('AutoText', AutoText)
   Vue.component('EditInput', EditInput)
   Vue.component('SearchInput', SearchInput)
 

src/permission.js

@@ -58,7 +58,7 @@ router.beforeEach(async (to, from, next) => {
   }
 })
 
-router.afterEach(() => {
+router.afterEach((to, from) => {
   // finish progress bar
   NProgress.done()
 })

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { Role } from '@/constant'
 import Layout from '@/layout'
+import Solo from '@/layout/Solo'
 
 Vue.use(Router)
 
@@ -102,14 +103,21 @@ export const asyncRoutes = [
       {
         name: 'schedule',
         path: 'schedule',
-        component: () => import('@/views/schedule/index'),
+        component: Solo,
         meta: { title: '节目排期' },
         children: [
+          {
+            name: 'schedule-list',
+            path: '',
+            component: () => import('@/views/schedule/index'),
+            meta: { cache: 'ScheduleList' },
+            hidden: true
+          },
           {
             name: 'schedule-design',
-            path: 'design/:id',
+            path: ':id',
             component: () => import('@/views/schedule/designer/index'),
-            meta: { title: '排期编辑', activeMenu: '/cm/schedule' },
+            meta: { title: '排期编辑', activeMenu: '/cm/schedule', cache: 'ScheduleList' },
             hidden: true
           }
         ]
@@ -171,19 +179,41 @@ export const asyncRoutes = [
         component: () => import('@/views/device/product/index'),
         meta: { title: '产品管理', roles: [Role.ADMIN] }
       },
+      // {
+      //   name: 'device',
+      //   path: 'device',
+      //   component: () => import('@/views/device/index'),
+      //   meta: { title: '设备管理' }
+      // },
       {
-        name: 'device',
         path: 'device',
-        component: () => import('@/views/device/index'),
-        meta: { title: '设备管理' }
-      },
-      {
-        name: 'device-detail',
-        path: 'device/:id',
-        component: () => import('@/views/device/detail/index'),
-        meta: { title: '设备详情', activeMenu: '/m/device' },
-        hidden: true
+        name: 'device',
+        component: Solo,
+        meta: { title: '设备管理' },
+        children: [
+          {
+            name: 'device-list',
+            path: '',
+            component: () => import('@/views/device/index'),
+            meta: { cache: 'DeviceList' },
+            hidden: true
+          },
+          {
+            name: 'device-detail',
+            path: ':id',
+            component: () => import('@/views/device/detail/index'),
+            meta: { title: '设备详情', activeMenu: '/m/device', cache: 'DeviceList' },
+            hidden: true
+          }
+        ]
       },
+      // {
+      //   name: 'device-detail',
+      //   path: 'device/:id',
+      //   component: () => import('@/views/device/detail/index'),
+      //   meta: { title: '设备详情', activeMenu: '/m/device' },
+      //   hidden: true
+      // },
       {
         name: 'group',
         path: 'group',

src/scss/bem/_component.scss

@@ -172,6 +172,10 @@
   & + & {
     margin-left: 10px !important;
   }
+
+  & + &.far {
+    margin-left: 16px !important;
+  }
 }
 
 .c-tabs {

src/store/index.js

@@ -19,27 +19,7 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 
 const store = new Vuex.Store({
   modules,
-  getters,
-  state: {
-    cacheRoutes: []
-  },
-  mutations: {
-    UPDATE_CACHE_ROUTES (state, payload) {
-      state.cacheRoutes = payload
-    }
-  },
-  actions: {
-    addCacheRoutes ({ state, commit }, payload) {
-      const routes = new Set(state.cacheRoutes)
-      routes.add(payload)
-      commit('UPDATE_CACHE_ROUTES', [...routes])
-    },
-    delCacheRoutes ({ state, commit }, payload) {
-      const routes = new Set(state.cacheRoutes)
-      routes.delete(payload)
-      commit('UPDATE_CACHE_ROUTES', [...routes])
-    }
-  }
+  getters
 })
 
 export default store

src/views/dashboard/components/Card.vue

@@ -33,13 +33,8 @@
 </template>
 
 <script>
-import AutoText from '@/components/AutoText'
-
 export default {
   name: 'Card',
-  components: {
-    AutoText
-  },
   props: {
     type: {
       type: String,

src/views/dashboard/components/Device.vue

@@ -127,13 +127,9 @@ import {
   unlisten,
   publish
 } from '@/utils/mqtt'
-import AutoText from '@/components/AutoText'
 
 export default {
   name: 'DeviceCard',
-  components: {
-    AutoText
-  },
   props: {
     device: {
       type: Object,
@@ -191,7 +187,7 @@ export default {
           : '未激活'
     },
     address () {
-      return `备注：${this.device.remark}`
+      return `地址：${this.device.remark}`
     },
     styles () {
       return this.isOnline && this.shot ? {

src/views/device/detail/components/DeviceInfo.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="c-info">
+    <div class="l-flex--row has-bottom-padding u-bold">
+      <span class="c-sibling-item">设备信息</span>
+      <span
+        class="c-sibling-item o-edit u-pointer"
+        @click="toEdit"
+      >
+        <i class="el-icon-edit" />
+        编辑
+      </span>
+    </div>
+    <div class="l-flex--row c-info__block">
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">设备名称</div>
+        <div class="l-flex__fill c-info__value">{{ device.name }}</div>
+      </div>
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">产品</div>
+        <div class="l-flex__fill c-info__value">{{ device.productName }}</div>
+      </div>
+    </div>
+    <div class="l-flex--row c-info__block">
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">MAC</div>
+        <div class="l-flex__fill c-info__value">{{ device.mac }}</div>
+      </div>
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">序列号</div>
+        <div class="l-flex__fill c-info__value">{{ device.serialNumber }}</div>
+      </div>
+    </div>
+    <div class="l-flex--row c-info__block">
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">分辨率</div>
+        <div class="l-flex__fill c-info__value">{{ device.resolutionRatio }}</div>
+      </div>
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">创建时间</div>
+        <div class="l-flex__fill c-info__value">{{ device.createTime }}</div>
+      </div>
+    </div>
+    <div class="l-flex--row c-info__block">
+      <div class="l-flex--row l-flex__fill c-info__item">
+        <div class="l-flex__none c-info__title">地址</div>
+        <div class="l-flex__fill c-info__value primary">{{ device.remark }}</div>
+      </div>
+    </div>
+    <el-dialog
+      title="编辑"
+      :visible.sync="show"
+      custom-class="c-dialog"
+      :close-on-click-modal="false"
+    >
+      <div class="c-form">
+        <div class="c-form__section">
+          <span class="c-form__label required">名称：</span>
+          <el-input
+            v-model.trim="info.name"
+            class="c-form__item"
+            maxlength="50"
+            show-word-limit
+          />
+        </div>
+        <div class="c-form__section">
+          <span class="c-form__label required">地址：</span>
+          <el-input
+            v-model="info.remark"
+            class="c-form__item"
+            type="textarea"
+            :rows="3"
+            maxlength="100"
+            show-word-limit
+          />
+        </div>
+      </div>
+      <template #footer>
+        <button
+          class="o-button"
+          @click="save"
+        >
+          确定
+        </button>
+        <button
+          class="o-button cancel"
+          @click="close"
+        >
+          取消
+        </button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { updateDevice } from '@/api/device'
+
+export default {
+  name: 'DeviceInfo',
+  props: {
+    device: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      show: false,
+      info: {}
+    }
+  },
+  methods: {
+    toEdit () {
+      this.info = {
+        name: this.device.name,
+        remark: this.device.remark
+      }
+      this.show = true
+    },
+    close () {
+      this.show = false
+    },
+    save () {
+      if (!this.info.name) {
+        this.$message({
+          type: 'warning',
+          message: '名称不能为空'
+        })
+        return
+      }
+      if (!this.info.remark) {
+        this.$message({
+          type: 'warning',
+          message: '地址不能为空'
+        })
+        return
+      }
+      if (this.info.name === this.device.name && this.info.remark === this.device.remark) {
+        this.close()
+        return
+      }
+      updateDevice({
+        id: this.device.id,
+        ...this.info
+      }).then(() => {
+        Object.assign(this.device, this.info)
+        this.close()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-info {
+  color: $black;
+  line-height: 1;
+
+  &__block {
+    padding: 20px 32px;
+    background-color: #f5f7f9;
+
+    & + & {
+      margin-top: 8px;
+    }
+  }
+
+  &__item + &__item {
+    margin-left: 20px;
+  }
+
+  &__title {
+    width: 120px;
+    color: #8e929c;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: bold;
+
+    &.primary {
+      color: $blue;
+    }
+  }
+}
+
+.o-edit {
+  color: $blue;
+  font-size: 14px;
+}
+</style>

src/views/device/detail/index.vue

@@ -1,33 +1,176 @@
 <template>
-  <wrapper fill />
+  <wrapper
+    v-loading="loading"
+    class="c-detail"
+    fill
+  >
+    <div class="l-flex__none c-detail__header">
+      <template v-if="device">
+        <div class="l-flex--row has-padding">
+          <span
+            class="c-sibling-item o-status"
+            :class="statusType"
+          >
+            {{ statusTip }}
+          </span>
+          <auto-text
+            class="c-sibling-item o-name"
+            :text="deviceName"
+          />
+        </div>
+        <el-tabs
+          v-model="active"
+          class="c-tabs"
+        >
+          <el-tab-pane
+            label="设备信息"
+            name="info"
+          />
+          <!-- <el-tab-pane
+            label="运行状态"
+            name="status"
+          /> -->
+        </el-tabs>
+      </template>
+      <el-result
+        v-if="!loading && !device"
+        icon="warning"
+      >
+        <template #extra>
+          <el-link
+            class="u-pointer"
+            type="warning"
+            @click="getDevice"
+          >
+            出错了，点击重试
+          </el-link>
+        </template>
+      </el-result>
+    </div>
+    <div class="l-flex--col l-flex__fill has-padding">
+      <div class="l-flex__fill c-detail__wrapper has-padding u-overflow-y--auto">
+        <component
+          :is="activeComponent"
+          v-if="device"
+          :device="device"
+        />
+      </div>
+    </div>
+  </wrapper>
 </template>
+
 <script>
 import {
   getDevice
 } from '@/api/device'
+import DeviceInfo from './components/DeviceInfo'
 
 export default {
   name: 'DeviceDetail',
+  components: {
+    DeviceInfo
+  },
   data () {
     return {
-      loading: false,
-      device: null
+      loading: true,
+      device: null,
+      active: 'info'
     }
   },
-  beforeRouteLeave (to, from, next) {
-    if (to.name !== 'device') {
-      this.$store.dispatch('delCacheRoutes', 'Device')
+  computed: {
+    isActivated () {
+      return this.device?.activate === 2
+    },
+    isOnline () {
+      return this.device?.onlineStatus === 1
+    },
+    statusType () {
+      return this.isActivated
+        ? this.isOnline
+          ? 'success'
+          : 'error'
+        : this.device.activate
+          ? 'primary'
+          : 'warning'
+    },
+    statusTip () {
+      return this.isActivated
+        ? this.isOnline
+          ? '在线'
+          : '离线'
+        : this.device.activate
+          ? '已激活'
+          : '未激活'
+    },
+    deviceName () {
+      return this.device?.name
+    },
+    activeComponent () {
+      switch (this.active) {
+        case 'info':
+          return 'DeviceInfo'
+        default:
+          return ''
+      }
     }
+  },
+  created () {
+    this.getDevice()
+  },
+  beforeRouteUpdate (to, from, next) {
+    this.getDevice()
     next()
   },
   methods: {
     getDevice () {
-      getDevice(this.$route.id).then(({ data }) => {
-        console.log(data)
+      this.loading = true
+      getDevice(this.$route.params.id).then(({ data }) => {
+        this.device = data
+      }).finally(() => {
+        this.loading = false
       })
     }
   }
 }
 </script>
-<style lang="sass" scoped>
+
+<style lang="scss" scoped>
+.c-detail {
+  &__header {
+    background-color: #fff;
+  }
+
+  &__wrapper {
+    border-radius: $radius;
+    background-color: #fff;
+  }
+}
+
+.o-name {
+  color: $black;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.o-status {
+  display: inline-block;
+  padding: 4px 8px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 1;
+  border-radius: 4px;
+  background-color: $success--dark;
+
+  &.primary {
+    background-color: $primary;
+  }
+
+  &.error {
+    background-color: $error;
+  }
+
+  &.warning {
+    background: $warning;
+  }
+}
 </style>

src/views/device/index.vue

@@ -317,7 +317,7 @@ import DownloadProgress from '@/components/DownloadProgress'
 import ProgramChoose from '@/components/Schedule/components/ProgramChoose'
 
 export default {
-  name: 'Device',
+  name: 'DeviceList',
   components: {
     DownloadProgress,
     ProgramChoose
@@ -391,12 +391,6 @@ export default {
       return this.device?.name
     }
   },
-  beforeRouteLeave (to, from, next) {
-    if (to.name === 'device-detail') {
-      this.$store.dispatch('addCacheRoutes', 'Device')
-    }
-    next()
-  },
   activated () {
     this.getList()
   },
@@ -555,9 +549,6 @@ export default {
           id: item.id
         }
       })
-      // this.isSub = !item.isMaster
-      // this.$master = item.parent
-      // this.toEdit(item)
     },
     reloadSubDevices (item) {
       item.loaded = false

src/views/schedule/designer/index.vue

@@ -1,9 +1,16 @@
 <template>
-  <schedule
-    class="l-flex__auto"
-    :schedule="scheduleId"
-    editable
-  />
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
+    <schedule
+      class="l-flex__auto"
+      :schedule="scheduleId"
+      editable
+    />
+  </wrapper>
 </template>
 
 <script>

src/views/schedule/index.vue

@@ -4,250 +4,247 @@
     margin
     background
   >
-    <template v-if="isExact">
-      <el-tabs
-        v-model="active"
-        class="c-tabs"
-        @tab-click="onTabClick"
-      >
-        <el-tab-pane
-          label="节目排期"
-          name="normal"
-        />
-        <el-tab-pane
-          label="默认排期"
-          name="defaults"
-        />
-      </el-tabs>
-      <c-table
-        class="has-padding"
-        :curr="currObj"
-        @pagination="getList"
-      >
-        <template #header>
-          <div class="l-flex__auto c-sibling-item">
-            <button
-              v-if="isNormal"
-              class="o-button"
-              @click="toAdd"
-            >
-              <i class="o-button__icon el-icon-circle-plus-outline" />
-              新增
-            </button>
-          </div>
-          <el-select
-            v-model="currObj.params.type"
-            class="l-flex__none c-sibling-item o-select"
-            placeholder="请选择类型"
-            @change="search"
-          >
-            <el-option
-              v-for="item in scheduleOptions"
-              :key="item.label"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-select
-            v-model="currObj.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="currObj.params.name"
-            class="l-flex__none c-sibling-item"
-            placeholder="排期名称"
-            @search="search"
-          />
+    <el-tabs
+      v-model="active"
+      class="c-tabs"
+      @tab-click="onTabClick"
+    >
+      <el-tab-pane
+        label="节目排期"
+        name="normal"
+      />
+      <el-tab-pane
+        label="默认排期"
+        name="defaults"
+      />
+    </el-tabs>
+    <c-table
+      class="has-padding"
+      :curr="currObj"
+      @pagination="getList"
+    >
+      <template #header>
+        <div class="l-flex__auto c-sibling-item">
           <button
-            class="l-flex__none c-sibling-item o-button"
-            @click="search"
+            v-if="isNormal"
+            class="o-button"
+            @click="toAdd"
           >
-            搜索
+            <i class="o-button__icon el-icon-circle-plus-outline" />
+            新增
           </button>
-        </template>
-        <el-table-column
-          prop="name"
-          label="排期名称"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="typeName"
-          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"
+        </div>
+        <el-select
+          v-model="currObj.params.type"
+          class="l-flex__none c-sibling-item o-select"
+          placeholder="请选择类型"
+          @change="search"
         >
-          <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-option
+            v-for="item in scheduleOptions"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select
+          v-model="currObj.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="currObj.params.name"
+          class="l-flex__none c-sibling-item"
+          placeholder="排期名称"
+          @search="search"
         />
-        <el-table-column
-          label="操作"
-          align="center"
-          width="180"
+        <button
+          class="l-flex__none c-sibling-item o-button"
+          @click="search"
         >
-          <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>
-            <permission
-              :skip="scope.row.status === 0"
-              deletable
+          搜索
+        </button>
+      </template>
+      <el-table-column
+        prop="name"
+        label="排期名称"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="typeName"
+        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
-                class="c-table__btn u-pointer"
-                @click="toDel(scope.row)"
-              >
-                删除
-              </div>
-            </permission>
+              编辑
+            </div>
             <div
-              v-if="scope.row.status !== 0"
               class="c-table__btn u-pointer"
-              @click="toView(scope.row.id)"
+              @click="toSubmit(scope.row)"
             >
-              预览
+              提交
             </div>
           </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.type"
-              class="c-form__item"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="type in typeOptions"
-                :key="type.value"
-                :label="type.label"
-                :value="type.value"
-              />
-            </el-select>
-          </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"
+          <permission
+            :skip="scope.row.status === 0"
+            deletable
+          >
+            <div
+              class="c-table__btn u-pointer"
+              @click="toDel(scope.row)"
             >
-              <el-option
-                v-for="ratio in ratios"
-                :key="ratio.value"
-                :label="ratio.label"
-                :value="ratio.value"
-              />
-            </el-select>
+              删除
+            </div>
+          </permission>
+          <div
+            v-if="scope.row.status !== 0"
+            class="c-table__btn u-pointer"
+            @click="toView(scope.row.id)"
+          >
+            预览
           </div>
+        </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>
-        <template #footer>
-          <button
-            class="o-button"
-            @click="add"
+        <div class="c-form__section">
+          <span class="c-form__label">类型：</span>
+          <el-select
+            v-model="schedule.type"
+            class="c-form__item"
+            placeholder="请选择"
           >
-            确定
-          </button>
-          <button
-            class="o-button cancel"
-            @click="handleCloseAddDialog"
+            <el-option
+              v-for="type in typeOptions"
+              :key="type.value"
+              :label="type.label"
+              :value="type.value"
+            />
+          </el-select>
+        </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"
           >
-            取消
-          </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>
-    </template>
-    <router-view class="has-padding" />
+            <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>
 
@@ -302,9 +299,6 @@ export default {
     }
   },
   computed: {
-    isExact () {
-      return this.$route.name === 'schedule'
-    },
     currObj () {
       return this[this.active]
     },
@@ -322,7 +316,10 @@ export default {
     }
   },
   created () {
-    this.isExact && this.getList()
+    this.getList()
+  },
+  activated () {
+    this.getList()
   },
   methods: {
     search () {

src/views/schedule/timeline/index.vue

@@ -180,13 +180,9 @@ import {
   createListOptions,
   parseTime
 } from '@/utils'
-import AutoText from '@/components/AutoText'
 
 export default {
   name: 'ScheduleTimeline',
-  components: {
-    AutoText
-  },
   data () {
     return {
       productOptions: [