refactor: adjust some styles

src/components/service/DraggableItem/index.vue

@@ -3,17 +3,17 @@
     <div class="l-flex__auto l-flex--row mover">
       <i class="l-flex__none o-draggable-item__mover el-icon-sort has-active" />
       <div
-        class="l-flex__auto c-slibing-item has-padding--v u-ellipsis has-active"
+        class="l-flex__auto c-sibling-item has-padding--v u-ellipsis has-active"
         @click="onView"
       >
         {{ label }}
       </div>
     </div>
     <template v-if="!hideDuration">
-      <span class="l-flex__none c-slibing-item u-color--info">上播时长(s)：</span>
+      <span class="l-flex__none c-sibling-item u-font-size--sm u-color--info">上播时长(s)</span>
       <el-input-number
         v-model="item.duration"
-        class="l-flex__none o-draggable-item__seconds"
+        class="l-flex__none c-sibling-item near o-draggable-item__seconds"
         controls-position="right"
         :min="1"
         :max="86400"

src/scss/bem/_utility.scss

@@ -216,3 +216,7 @@
 .u-line-height {
   line-height: 1;
 }
+
+.u-line-height--md {
+  line-height: 1.6;
+}

src/views/ad/automation/task/AssetTask.vue

@@ -107,7 +107,7 @@
               :key="device.id"
               class="l-flex--row c-sibling-item--v c-device-toggle__item"
             >
-              <div class="l-flex__auto c-slibing-item has-padding u-ellipsis">
+              <div class="l-flex__auto u-ellipsis">
                 {{ device.name }}
               </div>
               <i
@@ -821,6 +821,7 @@ export default {
   }
 
   &__item {
+    padding: 0 0 0 $padding--lg;
     border: 1px solid $gray;
     border-radius: $radius--sm;
   }

src/views/device/detail/components/DeviceTakeOver/components/AssetCard.vue

@@ -22,7 +22,7 @@
       />
       <i
         v-if="canDel"
-        class="l-flex__none c-slibing-item el-icon-delete has-active"
+        class="l-flex__none c-sibling-item el-icon-delete has-active"
         @click="onDel"
       />
     </div>

src/views/screen/material/schedule/ScheduleDesigner.vue

@@ -197,7 +197,7 @@ export default {
       if (this.redirect) {
         this.$router.push({
           name: this.redirect,
-          params: { id: `${id}` }
+          params: { id }
         })
       }
     },

src/views/screen/review/workflow/detail/components/ReviewPublish.vue

@@ -1,16 +1,37 @@
 <template>
-  <schema-table
-    ref="table"
-    :schema="schema"
-    default-expand-all
-    @row-click="onToggle"
-  >
+  <div class="l-flex__fill l-flex--col">
+    <schema-table
+      ref="table"
+      class="l-flex__none c-sibling-item--v"
+      :schema="schema"
+      default-expand-all
+      @row-click="onToggle"
+    />
+    <div class="l-flex__fill c-sibling-item--v u-overflow-y--auto">
+      <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">目标设备</div>
+      <div class="c-sibling-item--v near u-color--info u-line-height--md">{{ devices }}</div>
+      <template v-if="assets">
+        <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">上播内容</div>
+        <schema-table
+          class="c-sibling-item--v near"
+          :schema="contentSchema"
+        />
+        <preview-dialog ref="previewDialog" />
+      </template>
+    </div>
     <material-dialog ref="materialDialog" />
-  </schema-table>
+  </div>
 </template>
 
 <script>
-import { State } from '@/constant'
+import {
+  State,
+  PublishTargetType,
+  EventTarget,
+  AssetTagInfo,
+  AssetTypeInfo
+} from '@/constant'
+import { parseDuration } from '@/utils'
 import { transformCalendarRelease } from '../../utils'
 import mixin from './mixin'
 
@@ -19,35 +40,58 @@ export default {
   mixins: [mixin],
   data () {
     return {
-      type: 'calendar'
+      type: 'calendar',
+      contentSchema: {
+        nonPagination: true,
+        list: this.getContentAssets,
+        cols: [
+          { prop: 'tagType', label: '文件', width: 100, align: 'center' },
+          { prop: 'fileType', label: '', width: 80 },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'name', label: '' },
+          { prop: 'adDuration', label: '上播时长', 'min-width': 60, align: 'center' },
+          { type: 'invoke', render: [
+            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
+          ] }
+        ]
+      },
+      assets: null
     }
   },
   computed: {
     schema () {
       return {
-        condition: { pageSize: this.list.length },
         list: this.getList,
         cols: [
-          { type: 'expand', render (data, h) {
-            return h('div', {
-              staticClass: 'o-info'
-            }, [
-              h('div', null, `设备：${data.device}`)
-            ])
-          } },
           { prop: 'priority', label: '优先级', width: 80, align: 'center' },
           { prop: 'priorityInfo', label: '', width: 80, align: 'center' },
           { prop: 'targetInfo', label: '上播内容', width: 80, align: 'center' },
-          { prop: 'targetName', label: '', 'min-width': 100 },
-          { prop: 'desc', label: '上播时间', 'min-width': 180 },
-          ...this.reviewCol
+          this.assets ? null : { prop: 'targetName', label: '' },
+          { prop: 'desc', label: '上播时间', 'min-width': 160 },
+          { type: 'invoke', width: this.assets ? 120 : 160, render: [
+            this.assets ? null : { label: '查看', on: this.onView },
+            { label: '通过', on: this.onResolve },
+            { label: '驳回', on: this.onReject }
+          ].filter(Boolean) }
         ]
       }
+    },
+    devices () {
+      return this.list?.[0]?.device
     }
   },
   created () {
     this.list = [this.transformItem(this.workflow.calendarReleaseScheduling)]
-    if (!this.list.some(({ pass }) => !pass)) {
+    if (this.list.some(({ pass }) => !pass)) {
+      const publishTarget = this.list[0].target
+      if (publishTarget.type === PublishTargetType.EVENT && publishTarget.detail.target.type === EventTarget.ASSETS) {
+        const assets = publishTarget.detail.target.sources.map(this.transformAsset)
+        if (assets.length === 1) {
+          assets[0].adDuration = '独占'
+        }
+        this.assets = assets
+      }
+    } else {
       this.$emit('next', 2)
     }
   },
@@ -63,6 +107,24 @@ export default {
     },
     onView ({ target }) {
       this.$refs.materialDialog.showPublishTarget(target)
+    },
+    onViewAsset ({ file }) {
+      this.$refs.previewDialog.show(file)
+    },
+    transformAsset ({ tag, type, keyName, name, duration }) {
+      return {
+        tagType: AssetTagInfo[tag],
+        fileType: AssetTypeInfo[type],
+        file: {
+          type,
+          url: keyName
+        },
+        name: name || '',
+        adDuration: parseDuration(duration)
+      }
+    },
+    getContentAssets () {
+      return Promise.resolve({ data: this.assets })
     }
   }
 }