refactor: adjust some styles

src/components/dialog/GridTableDialog/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-dialog
+    :visible.sync="choosing"
+    :custom-class="customClass"
+    :close-on-click-modal="false"
+    v-bind="$attrs"
+  >
+    <grid-table
+      v-if="choosing"
+      ref="table"
+      :schema="schema"
+    >
+      <template
+        v-if="hasHeader"
+        #header="scope"
+      >
+        <slot
+          name="header"
+          v-bind="scope"
+        />
+      </template>
+      <grid-table-item v-slot="item">
+        <slot
+          name="item"
+          v-bind="item"
+        />
+      </grid-table-item>
+    </grid-table>
+    <slot />
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'GridTableDialog',
+  inheritAttrs: false,
+  props: {
+    schema: {
+      type: Object,
+      default: null
+    },
+    size: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      choosing: false
+    }
+  },
+  computed: {
+    hasHeader () {
+      return this.$scopedSlots.header
+    },
+    customClass () {
+      return `c-dialog ${this.size}`
+    }
+  },
+  methods: {
+    show (condition) {
+      if (condition) {
+        this.schema.condition = { ...this.schema.condition, ...condition }
+      }
+      this.choosing = true
+    },
+    hide () {
+      this.choosing = false
+    },
+    getTable () {
+      return this.$refs.table
+    }
+  }
+}
+</script>

src/components/dialog/TaskTargetDialog/index.vue

@@ -7,7 +7,10 @@
     :close-on-click-modal="false"
     v-bind="$attrs"
   >
-    <grid-table :schema="schema">
+    <grid-table
+      v-if="choosing"
+      :schema="schema"
+    >
       <grid-table-item v-slot="item">
         <media-card
           :source="item"
@@ -20,16 +23,15 @@
         </media-card>
       </grid-table-item>
     </grid-table>
-    <materail-dialog ref="materailDialog" />
   </el-dialog>
 </template>
 
 <script>
 import {
   State,
+  AssetTag,
   AssetType,
-  AssetTypeInfo,
-  AssetTag
+  AssetTypeInfo
 } from '@/constant'
 import {
   getAssets,
@@ -59,13 +61,12 @@ export default {
     show () {
       this.choosing = true
     },
-    transformAsset ({ type, originalName, keyName, thumbnail, size, duration, md5 }) {
+    transformAsset ({ tag, type, originalName, keyName, thumbnail, duration }) {
       const asset = {
+        tag,
         type,
         name: originalName,
-        keyName,
-        size,
-        md5
+        keyName
       }
       switch (type) {
         case AssetType.IMAGE:

src/components/table/Table/Column.vue

@@ -202,15 +202,18 @@ export default {
       if (!use || use(data.row)) {
         return (Array.isArray(render) ? render : render(data.row))
           .filter(({ render }) => !render || render(data.row))
-          .map(({ label, on }) => h('div', {
-            staticClass: 'c-table__btn u-pointer',
-            on: on && {
-              click ($event) {
-                $event.stopPropagation()
-                on(data.row, data.$index)
+          .map(({ label, allow, on }) => {
+            const allowed = allow ? allow(data.row) : true
+            return h('div', {
+              staticClass: allowed ? 'c-table__btn' : 'c-table__btn disabled',
+              on: allowed && on && {
+                click ($event) {
+                  $event.stopPropagation()
+                  on(data.row, data.$index)
+                }
               }
-            }
-          }, label))
+            }, label)
+          })
       }
       return null
     }

src/components/tree/DeviceTreeSingle/index.vue

@@ -20,16 +20,9 @@
           <div class="l-flex__auto" />
           <search-input
             v-model.trim="deviceName"
-            class="l-flex__none c-sibling-item"
             placeholder="设备名称"
             @search="onSearch"
           />
-          <button
-            class="l-flex__none c-sibling-item o-button"
-            @click="onSearch"
-          >
-            搜索
-          </button>
         </div>
         <div
           v-if="isEmptySeach"
@@ -184,3 +177,14 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.c-tree {
+  flex: 1 1 0;
+  min-width: 200px;
+  max-width: 400px;
+  padding-right: $spacing;
+  margin-right: $spacing;
+  border-right: 1px solid $gray--light;
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -3,7 +3,7 @@
     <div class="c-sidebar__header">
       <router-link
         tag="img"
-        class="u-pointer"
+        class="c-sidebar__logo u-pointer"
         src="/logo.png"
         to="/"
       />
@@ -89,15 +89,22 @@ export default {
 .c-sidebar {
   display: inline-flex;
   flex-direction: column;
-  width: 240px;
+  width: 200px;
   background-color: #fff;
   box-shadow: 1px 0 4px rgba(0, 21, 41, 0.08);
   z-index: 9;
 
   &__header {
     flex: none;
-    padding: 32px 0 24px;
+    padding: 16px 0 8px;
     text-align: center;
+    border-bottom: 1px solid $border;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    z-index: 9;
+  }
+
+  &__logo {
+    max-width: 50%;
   }
 
   &__menu {
@@ -159,4 +166,14 @@ export default {
     }
   }
 }
+
+@media screen and (min-width: 1920px) {
+  .c-sidebar {
+    width: 240px;
+
+    &__header {
+      padding: 24px 0 16px;
+    }
+  }
+}
 </style>

src/scss/base/_cover.scss

@@ -19,3 +19,7 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+.el-pagination__jump {
+  margin-left: 10px;
+}

src/scss/bem/_component.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 60%;
-  min-width: 640px;
+  min-width: 720px;
   min-height: 240px;
   max-height: 80%;
   margin-top: 10vh !important;
@@ -250,6 +250,12 @@
     padding: 2px 0;
     color: $blue;
     font-size: 14px;
+    cursor: pointer;
+
+    &.disabled {
+      color: $gray;
+      cursor: not-allowed;
+    }
 
     & + & {
       margin-left: 16px;

src/scss/bem/_layout.scss

@@ -64,7 +64,6 @@
   }
 }
 
-
 .l-grid--info {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));

src/scss/helpers/_variables.scss

@@ -26,3 +26,12 @@ $border: #edf0f6;
 $spacing: 16px;
 $radius: 8px;
 $radius--mini: 4px;
+
+$font-size--xs: 12px;
+$font-size--sm: 14px;
+$font-size: 16px;
+$font-size--md: 18px;
+$font-size--lg: 20px;
+$font-size--xl: 24px;
+$font-size--2xl: 28px;
+$font-size--3xl: 32px;

src/views/ad/dataset/index.vue

@@ -149,7 +149,7 @@
                   class="l-flex__auto c-dataset-dialog__name u-ellipsis has-active u-pointer"
                   @click="onViewAssetItem(asset)"
                 >
-                  {{ asset.name }}
+                  {{ asset.tagInfo }} {{ asset.name }}
                 </div>
               </div>
               <span class="l-flex__none u-color--info">上播时长(秒)：</span>
@@ -172,9 +172,9 @@
         </div>
       </div>
     </confirm-dialog>
-    <task-target-dialog
-      ref="taskTargetDialog"
-      @view="onViewAsset"
+    <table-dialog
+      ref="assetDialog"
+      :schema="assetSchema"
       @choosen="onChoosenAsset"
     />
     <preview-dialog ref="previewDialog" />
@@ -183,9 +183,13 @@
 
 <script>
 import {
+  State,
+  AssetTag,
+  AssetTagInfo,
+  AssetType,
+  AssetTypeInfo,
   TimeType,
-  SCREEN_TIME_KEY,
-  AssetType
+  SCREEN_TIME_KEY
 } from '@/constant'
 import {
   parseTime,
@@ -194,8 +198,10 @@ import {
   getTaskTimeInfo,
   transformToTaskTime,
   offsetDate,
-  calculateDay
+  calculateDay,
+  getAssetThumb
 } from '@/utils'
+import { getAssets } from '@/api/asset'
 import {
   getDatasets,
   addDataset,
@@ -248,6 +254,31 @@ export default {
         ]
       },
       files: [],
+      assetSchema: {
+        condition: { status: State.AVAILABLE_TENANT, tag: AssetTag.AD, type: AssetType.IMAGE, originalName: '' },
+        list: getAssets,
+        transform: this.transformAsset,
+        filters: [
+          { key: 'tag', type: 'select', options: [
+            { value: AssetTag.AD, label: AssetTagInfo[AssetTag.AD] },
+            { value: AssetTag.PUBLICITY, label: AssetTagInfo[AssetTag.PUBLICITY] },
+            { value: AssetTag.LOCAL_PUBLICITY, label: AssetTagInfo[AssetTag.LOCAL_PUBLICITY] }
+          ] },
+          { key: 'type', type: 'select', options: [
+            { value: AssetType.IMAGE, label: AssetTypeInfo[AssetType.IMAGE] },
+            { value: AssetType.VIDEO, label: AssetTypeInfo[AssetType.VIDEO] }
+          ] },
+          { key: 'originalName', type: 'search', placeholder: '素材名称' }
+        ],
+        cols: [
+          { prop: 'file', label: '文件', type: 'asset', on: this.onViewAsset },
+          { prop: 'name', label: '' },
+          { prop: 'diff', label: '其他', 'align': 'right' },
+          { type: 'invoke', render: [
+            { label: '查看', on: this.onViewAssetItem }
+          ] }
+        ]
+      },
       assets: []
     }
   },
@@ -321,6 +352,7 @@ export default {
           return {
             key: id,
             id,
+            tagInfo: AssetTagInfo[minioData.tag],
             type: minioData.type,
             keyName,
             name: minioData.originalName,
@@ -370,9 +402,12 @@ export default {
         data.deleteIds = delIds
       }
       if (totalDuration && totalDuration !== duration) {
-        this.$message({
-          type: 'warning',
-          message: '上播时长与上播内容总时长不一致，请修改'
+        this.$confirm(
+          '继续保存？',
+          '上播时长与上播内容总时长不一致',
+          { type: 'warning' }
+        ).then(() => {
+          this.updateDataset(data, done)
         })
         return
       }
@@ -387,7 +422,16 @@ export default {
       })
     },
     onAddAsset () {
-      this.$refs.taskTargetDialog.show()
+      this.$refs.assetDialog.show()
+    },
+    transformAsset (asset) {
+      asset.file = {
+        type: asset.type,
+        url: asset.keyName,
+        thumbnail: getAssetThumb(asset)
+      }
+      asset.diff = parseDuration(asset.duration)
+      return asset
     },
     onViewAssetItem ({ type, keyName }) {
       this.onViewAsset({
@@ -399,12 +443,13 @@ export default {
       this.$refs.previewDialog.show(asset)
     },
     onChoosenAsset (asset) {
-      const { type, name, keyName, duration } = asset
+      const { keyName, tag, type, originalName, duration } = asset
       this.assets.push({
         key: `${Date.now()}_${Math.random().toString(16).slice(2)}`,
-        type,
         keyName,
-        name,
+        tagInfo: AssetTagInfo[tag],
+        type,
+        name: originalName,
         duration: duration || 5,
         disabled: type === AssetType.VIDEO
       })

src/views/ad/history/index.vue

@@ -11,7 +11,7 @@
     />
     <table-dialog
       ref="adDialog"
-      title="广告内容"
+      title="上播内容"
       :schema="adSchema"
     />
     <preview-dialog ref="previewDialog" />
@@ -24,10 +24,7 @@ import {
   AssetType,
   AssetTypeInfo
 } from '@/constant'
-import {
-  parseByte,
-  parseDuration
-} from '@/utils'
+import { parseDuration } from '@/utils'
 import { getOrders } from '../api'
 
 export default {
@@ -53,20 +50,17 @@ export default {
           { prop: 'price', label: '总价(元)', 'min-width': 100, align: 'right' },
           { prop: 'remark', label: '备注', 'min-width': 140, align: 'right' },
           { type: 'invoke', render: [
-            { label: '内容', on: this.onView }
+            { label: '上播内容', on: this.onView }
           ] }
         ]
       },
       adSchema: {
         list: this.getSources,
         cols: [
-          { prop: 'file', label: '缩略图', type: 'asset', on: this.onViewAsset },
-          { prop: 'fileType', label: '文件类型', align: 'center' },
-          { prop: 'adDuration', label: '播放时长', align: 'right' },
-          { prop: 'size', label: '文件大小', align: 'right' },
-          { prop: 'ratio', label: '分辨率', align: 'right' },
-          { prop: 'remark', label: '其他', align: 'right' },
-          { type: 'invoke', width: 80, render: [
+          { prop: 'fileType', label: '文件', width: 100, align: 'center' },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'adDuration', label: '上播时长', align: 'center' },
+          { type: 'invoke', render: [
             { label: '查看', render ({ file }) { return !!file }, on: this.onViewSource }
           ] }
         ]
@@ -98,33 +92,22 @@ export default {
         totalCount: sources.length
       })
     },
-    transformSource ({ keyName, type, adDuration, duration, size, width, height, thumb, status = 3, reason = 'xxxx' }) {
+    transformSource ({ keyName, type, adDuration, thumb }) {
       const isImage = type === AssetType.IMAGE
       return type
         ? {
+          fileType: AssetTypeInfo[type],
           file: {
             type,
             url: keyName,
             thumbnail: isImage ? keyName : thumb || null,
             origin: !isImage
           },
-          fileType: AssetTypeInfo[type],
-          adDuration: parseDuration(adDuration || duration),
-          ratio: width && height ? `${width}x${height}` : '-',
-          size: parseByte(size),
-          remark: duration ? parseDuration(duration) : '-',
-          statusTag: {
-            type: ['', 'primay', 'success', 'danger'][status],
-            label: ['-', '待审核', '已审核', '驳回'][status],
-            msg: status === State.REJECTED ? reason : ''
-          }
+          adDuration: parseDuration(adDuration)
         }
         : {
-          fileType: '-',
-          adDuration: parseDuration(adDuration || duration),
-          ratio: '-',
-          size: '-',
-          remark: '素材已删除'
+          fileType: '素材已删除',
+          adDuration: parseDuration(adDuration)
         }
     },
     onViewSource ({ file }) {

src/views/ad/review-asset/index.vue

@@ -72,8 +72,8 @@ export default {
         transform: this.transform,
         cols: [
           { type: 'refresh' },
-          { prop: 'file', label: '缩略图', type: 'asset', on: this.onView },
-          { prop: 'fileType', label: '文件类型', align: 'center' },
+          { prop: 'fileType', label: '文件', align: 'center' },
+          { prop: 'file', label: '', type: 'asset', on: this.onView },
           { prop: 'size', label: '文件大小', align: 'right' },
           { prop: 'ratio', label: '分辨率', align: 'right' },
           { prop: 'diff', label: '其他', align: 'right' },
@@ -100,13 +100,13 @@ export default {
       const isImage = type === AssetType.IMAGE
       return {
         keyName,
+        fileType: AssetTypeInfo[type],
         file: {
           type,
           url: keyName,
           thumbnail: isImage ? keyName : thumb || null,
           origin: !isImage
         },
-        fileType: AssetTypeInfo[type],
         ratio: width && height ? `${width}x${height}` : '-',
         size: parseByte(size),
         diff: parseDuration(duration),

src/views/ad/review-order/index.vue

@@ -43,7 +43,7 @@
     </confirm-dialog>
     <table-dialog
       ref="adDialog"
-      title="广告内容"
+      title="上播内容"
       :schema="adSchema"
     />
     <preview-dialog ref="previewDialog" />
@@ -56,10 +56,7 @@ import {
   AssetType,
   AssetTypeInfo
 } from '@/constant'
-import {
-  parseByte,
-  parseDuration
-} from '@/utils'
+import { parseDuration } from '@/utils'
 import {
   getOrders,
   resolveOrder,
@@ -82,8 +79,8 @@ export default {
           { prop: 'freq', label: '频率', align: 'right', 'min-width': 140 },
           { prop: 'price', label: '总价(元)', 'min-width': 100, align: 'right' },
           { prop: 'createTime', label: '提交时间', 'min-width': 140, align: 'right' },
-          { type: 'invoke', width: 160, render: [
-            { label: '内容', on: this.onView },
+          { type: 'invoke', width: 180, render: [
+            { label: '上播内容', on: this.onView },
             { label: '通过', on: this.onResolve },
             { label: '拒绝', on: this.onReject }
           ] }
@@ -99,17 +96,15 @@ export default {
         reason: ''
       },
       adSchema: {
-        list: this.getSources,
+        list: this.getOrderAssets,
         cols: [
-          { prop: 'file', label: '缩略图', type: 'asset', on: this.onViewAsset },
-          { prop: 'fileType', label: '文件类型', align: 'center' },
-          { prop: 'adDuration', label: '播放时长', align: 'right' },
-          { prop: 'size', label: '文件大小', align: 'right' },
+          { prop: 'fileType', label: '文件', width: 100, align: 'center' },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'adDuration', label: '上播时长', align: 'center' },
           { prop: 'ratio', label: '分辨率', align: 'right' },
-          { prop: 'remark', label: '其他', align: 'right' },
-          { prop: 'statusTag', type: 'tag', align: 'center', width: 120 },
-          { type: 'invoke', width: 80, render: [
-            { label: '查看', render ({ file }) { return !!file }, on: this.onViewSource }
+          { prop: 'statusTag', type: 'tag', width: 120, align: 'center' },
+          { type: 'invoke', render: [
+            { label: '查看', render ({ file }) { return !!file }, on: this.onViewAssetItem }
           ] }
         ]
       }
@@ -161,28 +156,26 @@ export default {
         this.$refs.table.decrease(1)
       })
     },
-    getSources () {
-      const sources = this.$order.assets
+    getOrderAssets () {
+      const assets = this.$order.assets
       return Promise.resolve({
-        data: sources.map(this.transformSource),
-        totalCount: sources.length
+        data: assets.map(this.transformOrderAsset),
+        totalCount: assets.length
       })
     },
-    transformSource ({ keyName, type, adDuration, duration, size, width, height, thumb, status, reason }) {
+    transformOrderAsset ({ keyName, type, adDuration, width, height, thumb, status, reason }) {
       const isImage = type === AssetType.IMAGE
       return type
         ? {
+          fileType: AssetTypeInfo[type],
           file: {
             type,
             url: keyName,
             thumbnail: isImage ? keyName : thumb || null,
             origin: !isImage
           },
-          fileType: AssetTypeInfo[type],
-          adDuration: parseDuration(adDuration || duration),
+          adDuration: parseDuration(adDuration),
           ratio: width && height ? `${width}x${height}` : '-',
-          size: parseByte(size),
-          remark: duration ? parseDuration(duration) : '-',
           status,
           statusTag: {
             type: ['', 'primay', 'success', 'danger'][status],
@@ -191,15 +184,11 @@ export default {
           }
         }
         : {
-          fileType: '-',
-          adDuration: parseDuration(adDuration || duration),
-          ratio: '-',
-          size: '-',
-          remark: '素材已删除',
-          status
+          fileType: '素材已删除',
+          adDuration: parseDuration(adDuration)
         }
     },
-    onViewSource ({ file }) {
+    onViewAssetItem ({ file }) {
       this.onViewAsset(file)
     },
     onViewAsset (asset) {

src/views/ad/scheduling/index.vue

@@ -7,7 +7,6 @@
     background
   >
     <device-tree-single
-      class="l-flex__none c-device-tree"
       size="mini"
       @change="onChange"
     />
@@ -53,12 +52,12 @@
 import {
   TaskFromType,
   TaskFromTypeInfo,
+  AssetTagInfo,
   AssetType,
   AssetTypeInfo
 } from '@/constant'
 import {
   parseTime,
-  parseByte,
   parseDuration
 } from '@/utils'
 import {
@@ -100,16 +99,13 @@ export default {
       schedulingId: '',
       title: '',
       adSchema: {
-        list: this.getSources,
+        list: this.getOrderAssets,
         cols: [
-          { prop: 'file', label: '缩略图', type: 'asset', on: this.onViewAsset },
-          { prop: 'fileType', label: '文件类型', align: 'center' },
-          { prop: 'adDuration', label: '播放时长', align: 'right' },
-          { prop: 'size', label: '文件大小', align: 'right' },
-          { prop: 'ratio', label: '分辨率', align: 'right' },
-          { prop: 'remark', label: '其他', align: 'right' },
-          { type: 'invoke', width: 80, render: [
-            { label: '查看', render ({ file }) { return !!file }, on: this.onViewSource }
+          { prop: 'fileType', label: '文件', width: 100, align: 'center' },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'adDuration', label: '上播时长', align: 'center' },
+          { type: 'invoke', render: [
+            { label: '查看', render ({ file }) { return !!file }, on: this.onViewAssetItem }
           ] }
         ]
       },
@@ -199,7 +195,7 @@ export default {
     },
     transformScheduling (data) {
       const { from, startTime, endTime, relationBOS } = data
-      data.fromInfo = TaskFromTypeInfo[from]
+      data.fromInfo = from === TaskFromType.ORDER ? TaskFromTypeInfo[from] : from === TaskFromType.ASSET ? AssetTagInfo[relationBOS[0].tag] : '未知'
       data.name = from === TaskFromType.ORDER ? '自助广告' : from === TaskFromType.ASSET ? AssetTypeInfo[relationBOS[0].type] : '未知'
       data.file = from === TaskFromType.ASSET
         ? {
@@ -220,44 +216,38 @@ export default {
           })
           break
         case TaskFromType.ASSET:
-          this.onViewSource(detail)
+          this.onViewAssetItem(detail)
           break
         default:
           break
       }
     },
-    getSources () {
-      const sources = this.$order.assets
+    getOrderAssets () {
+      const assets = this.$order.assets
       return Promise.resolve({
-        data: sources.map(this.transformSource),
-        totalCount: sources.length
+        data: assets.map(this.transformOrderAsset),
+        totalCount: assets.length
       })
     },
-    transformSource ({ keyName, type, adDuration, duration, size, width, height, thumb }) {
+    transformOrderAsset ({ keyName, type, adDuration, thumb }) {
       const isImage = type === AssetType.IMAGE
       return type
         ? {
+          fileType: AssetTypeInfo[type],
           file: {
             type,
             url: keyName,
             thumbnail: isImage ? keyName : thumb || null,
             origin: !isImage
           },
-          fileType: AssetTypeInfo[type],
-          adDuration: parseDuration(adDuration || duration),
-          ratio: width && height ? `${width}x${height}` : '-',
-          size: parseByte(size),
-          remark: duration ? parseDuration(duration) : '-'
+          adDuration: parseDuration(adDuration)
         }
         : {
-          fileType: '-',
-          adDuration: parseDuration(adDuration || duration),
-          ratio: '-',
-          size: '-',
-          remark: '素材已删除'
+          fileType: '素材已删除',
+          adDuration: parseDuration(adDuration)
         }
     },
-    onViewSource ({ file }) {
+    onViewAssetItem ({ file }) {
       this.onViewAsset(file)
     },
     onViewAsset (asset) {
@@ -282,12 +272,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.c-device-tree {
-  width: 294px;
-  padding-right: $spacing;
-  margin-right: $spacing;
-  border-right: 1px solid $gray--light;
-}
-</style>

src/views/ad/task/index.vue

@@ -7,7 +7,6 @@
     background
   >
     <device-tree-single
-      class="l-flex__none c-device-tree"
       size="mini"
       @change="onChange"
     />
@@ -19,7 +18,7 @@
     />
     <table-dialog
       ref="adDialog"
-      title="内容"
+      title="上播内容"
       :schema="adSchema"
     />
     <confirm-dialog
@@ -157,7 +156,6 @@ import {
 } from '@/constant'
 import {
   parseTime,
-  parseByte,
   parseDuration,
   parseTaskTime,
   getTaskTimeInfo,
@@ -179,16 +177,13 @@ export default {
     return {
       device: null,
       adSchema: {
-        list: this.getSources,
+        list: this.getOrderAssets,
         cols: [
-          { prop: 'file', label: '缩略图', type: 'asset', on: this.onViewAsset },
-          { prop: 'fileType', label: '文件类型', align: 'center' },
-          { prop: 'adDuration', label: '播放时长', align: 'right' },
-          { prop: 'size', label: '文件大小', align: 'right' },
-          { prop: 'ratio', label: '分辨率', align: 'right' },
-          { prop: 'remark', label: '其他', align: 'right' },
-          { type: 'invoke', width: 80, render: [
-            { label: '查看', render ({ file }) { return !!file }, on: this.onViewSource }
+          { prop: 'fileType', label: '文件', width: 100, align: 'center' },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'adDuration', label: '上播时长', align: 'center' },
+          { type: 'invoke', render: [
+            { label: '查看', render ({ file }) { return !!file }, on: this.onViewAssetItem }
           ] }
         ]
       },
@@ -274,9 +269,9 @@ export default {
               edit: val => this.onSimpleEdit(data, 'auditCount', val)
             }
           }), align: 'center' },
-          { prop: 'tag', type: 'tag', width: 100, on: this.onAudit },
+          { prop: 'tag', type: 'tag', width: 100, align: 'center', on: this.onAudit },
           { type: 'invoke', render: [
-            { label: '内容', on: this.onView },
+            { label: '内容', on: this.onViewTask },
             { label: '删除', on: this.onDel }
           ] }
         ]
@@ -323,51 +318,49 @@ export default {
         label: enable ? '已审核' : '待审核'
       }
     },
-    onView ({ from, fromId }) {
-      if (from === TaskFromType.ORDER) {
-        getOrderDetail(fromId).then(({ data }) => {
-          this.$order = data
-          this.$refs.adDialog.show()
-        })
-      } else {
-        this.onViewAsset({
-          type: from - 1,
-          url: fromId
-        })
+    onViewTask (task) {
+      switch (task.from) {
+        case TaskFromType.ORDER:
+          getOrderDetail(task.fromId).then(({ data }) => {
+            this.$order = data
+            this.$refs.adDialog.show()
+          })
+          break
+        case TaskFromType.ASSET:
+          this.onViewAsset({
+            url: task.fromId
+          })
+          break
+        default:
+          break
       }
     },
-    getSources () {
-      const sources = this.$order.assets
+    getOrderAssets () {
+      const assets = this.$order.assets
       return Promise.resolve({
-        data: sources.map(this.transformSource),
-        totalCount: sources.length
+        data: assets.map(this.transformOrderAsset),
+        totalCount: assets.length
       })
     },
-    transformSource ({ keyName, type, adDuration, duration, size, width, height, thumb }) {
+    transformOrderAsset ({ keyName, type, adDuration, thumb }) {
       const isImage = type === AssetType.IMAGE
       return type
         ? {
+          fileType: AssetTypeInfo[type],
           file: {
             type,
             url: keyName,
             thumbnail: isImage ? keyName : thumb || null,
             origin: !isImage
           },
-          fileType: AssetTypeInfo[type],
-          adDuration: parseDuration(adDuration || duration),
-          ratio: width && height ? `${width}x${height}` : '-',
-          size: parseByte(size),
-          remark: duration ? parseDuration(duration) : '-'
+          adDuration: parseDuration(adDuration)
         }
         : {
-          fileType: '-',
-          adDuration: parseDuration(adDuration || duration),
-          ratio: '-',
-          size: '-',
-          remark: '素材已删除'
+          fileType: '素材已删除',
+          adDuration: parseDuration(adDuration)
         }
     },
-    onViewSource ({ file }) {
+    onViewAssetItem ({ file }) {
       this.onViewAsset(file)
     },
     onViewAsset (asset) {
@@ -544,13 +537,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-device-tree {
-  width: 294px;
-  padding-right: $spacing;
-  margin-right: $spacing;
-  border-right: 1px solid $gray--light;
-}
-
 .c-task {
   position: relative;
   height: 40px;

src/views/realm/dataset/components/DatasetTable.vue

@@ -48,7 +48,6 @@ import {
   AssetTypeInfo
 } from '@/constant'
 import {
-  parseByte,
   parseDuration,
   getAssetThumb
 } from '@/utils'
@@ -147,11 +146,12 @@ export default {
           { key: 'originalName', type: 'search', placeholder: '素材名称' }
         ],
         cols: [
-          { prop: 'typeName', label: '文件', align: 'center', width: 80 },
-          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'file', label: '文件', type: 'asset', on: this.onViewAsset },
           { prop: 'name', label: '' },
-          { prop: 'size', label: '文件大小', 'align': 'right' },
-          { prop: 'diff', label: '其他', 'align': 'right' }
+          { prop: 'diff', label: '其他', 'align': 'right' },
+          { type: 'invoke', render: [
+            { label: '查看', on: this.onViewAssetItem }
+          ] }
         ]
       },
       deviceSchema: {
@@ -253,7 +253,6 @@ export default {
       return asset
     },
     transformAsset (asset) {
-      asset.typeName = AssetTypeInfo[asset.type]
       asset.file = {
         type: asset.type,
         url: asset.keyName,
@@ -261,7 +260,6 @@ export default {
       }
       asset.name = asset.originalName
       asset.diff = parseDuration(asset.duration)
-      asset.size = parseByte(asset.size)
       return asset
     },
     onAddAsset () {

src/views/screen/material/program/ast/Designer.vue

@@ -221,7 +221,7 @@
     <el-dialog
       :visible.sync="showAssets"
       :title="assetDialogType"
-      custom-class="c-dialog large"
+      custom-class="c-dialog large fixed"
       :close-on-click-modal="false"
       :before-close="onCloseAssetsDialog"
     >