Преглед изворни кода

fix: incorrect width of step column with table

Casper Dai пре 2 година
родитељ
комит
c12a01be1b

+ 1 - 1
src/components/service/EventTargetPicker/index.vue

@@ -227,7 +227,7 @@ export default {
                 : null
             }, on: this.onView }
             : null,
-          { prop: 'name', label: '名称' },
+          { prop: 'name', label: '名称', 'min-width': 120 },
           { prop: 'resolutionRatio', label: '分辨率' },
           { type: 'invoke', render: [
             { label: '查看', on: this.onView }

+ 1 - 1
src/components/service/Schedule/ScheduleCalendar/EventPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="l-flex c-step">
-    <div class="l-flex__none c-step__column large">
+    <div class="l-flex__none c-step__column u-width--lg">
       <div>
         <slot />
         <div class="c-sibling-item--v u-font-size--sm">上播方式</div>

+ 6 - 9
src/scss/bem/_component.scss

@@ -185,14 +185,6 @@
 }
 
 .c-table {
-  &.mini {
-    flex: none;
-
-    .el-table__body-wrapper {
-      min-height: 0;
-    }
-  }
-
   &__header {
     flex: none;
     display: flex;
@@ -278,8 +270,13 @@
 
   .el-table__body-wrapper {
     flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
   }
+
+  .el-empty__image {
+    width: 120px;
+  }
 }
 
 .c-grid-form {
@@ -524,7 +521,7 @@
 
   &__column {
     box-sizing: content-box;
-    min-width: 200px;
+    // min-width: 200px;
     color: $black;
 
     & + & {

+ 15 - 17
src/views/ad/automation/task/components/AssetTaskDialog.vue

@@ -7,7 +7,7 @@
   >
     <template #default>
       <div class="l-flex__fill l-flex c-step">
-        <div class="l-flex__none c-step__column u-overflow-y--auto">
+        <div class="l-flex__none c-step__column">
           <div class="c-grid-form auto">
             <div class="c-grid-form__label">上刊日期</div>
             <el-date-picker
@@ -64,22 +64,20 @@
             />
           </div>
         </div>
-        <div class="l-flex__fill l-flex c-step__column">
-          <directory-tree
-            v-if="!isStream"
-            class="c-sibling-item c-sidebar u-width--md"
-            @change="onAssetDirectoryChanged"
-          />
-          <schema-table
-            ref="table"
-            class="c-sibling-item far"
-            :schema="tableSchema"
-            row-key="keyName"
-            :current-row-key="selectedKey"
-            highlight-current-row
-            @row-click="onClickRow"
-          />
-        </div>
+        <directory-tree
+          v-if="!isStream"
+          class="c-step__column u-width--md"
+          @change="onAssetDirectoryChanged"
+        />
+        <schema-table
+          ref="table"
+          class="c-step__column"
+          :schema="tableSchema"
+          row-key="keyName"
+          :current-row-key="selectedKey"
+          highlight-current-row
+          @row-click="onClickRow"
+        />
       </div>
     </template>
   </confirm-dialog>

+ 8 - 96
src/views/screen/deploy/device/index.vue

@@ -42,7 +42,7 @@
         @change="onChange"
       />
       <template v-if="active > 0">
-        <div class="l-flex--col c-sibling-item far c-step__column">
+        <div class="l-flex--col c-sibling-item c-step__column u-width">
           <div class="l-flex__none c-sibling-item--v u-font-size--sm u-bold">设备</div>
           <div class="l-flex__fill c-sibling-item--v near u-overflow-y--auto">
             <div
@@ -54,48 +54,12 @@
             </div>
           </div>
         </div>
-        <div
-          v-if="isCalendar"
-          class="l-flex__fill l-flex--col c-step__column"
-        >
-          <div class="c-sibling-item--v has-bottom-padding--sm has-bottom-border">
-            <div class="c-sibling-item--v u-font-size--sm u-bold">上播类型</div>
-            <div class="l-flex--row c-sibling-item--v near">
-              <el-select
-                v-model="eventOptions.type"
-                class="c-sibling-item"
-                @change="onChangeType"
-              >
-                <el-option
-                  v-for="option in typeOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :value="option.value"
-                />
-              </el-select>
-              <div
-                class="l-flex--row c-sibling-item far has-active u-ellipsis"
-                @click="onView"
-              >
-                {{ currentTarget }}
-              </div>
-            </div>
-          </div>
-          <schema-table
-            class="c-sibling-item--v"
-            :schema="schema"
-            row-key="id"
-            :current-row-key="selectedId"
-            highlight-current-row
-            @row-click="onClickRow"
-          />
-        </div>
-        <div class="l-flex__none l-flex--col c-step__column large">
+        <div class="l-flex__none l-flex--col c-step__column u-width--lg">
           <div class="c-sibling-item--v u-font-size--sm u-bold">上播配置</div>
-          <div class="c-sibling-item--v u-font-size--sm">上播类型</div>
+          <div class="c-sibling-item--v near u-font-size--sm">上播类型</div>
           <el-select
             v-model="eventOptions.type"
-            class="c-sibling-item--v near u-width--sm"
+            class="c-sibling-item--v nearer u-width--sm"
             @change="onChangeType"
           >
             <el-option
@@ -106,10 +70,10 @@
             />
           </el-select>
           <template v-if="!isDefaultPlayback">
-            <div class="c-sibling-item--v u-font-size--sm">优先级</div>
+            <div class="c-sibling-item--v near u-font-size--sm">优先级</div>
             <el-select
               v-model="priority"
-              class="c-sibling-item--v near u-width--sm"
+              class="c-sibling-item--v nearer u-width--sm"
             >
               <el-option
                 v-for="option in priorityOptions"
@@ -119,7 +83,7 @@
               />
             </el-select>
           </template>
-          <div class="c-sibling-item--v">
+          <div class="c-sibling-item--v near">
             <div
               class="l-flex--row inline u-font-size--sm has-active"
               @click="onAddEvent"
@@ -130,7 +94,7 @@
           </div>
           <schema-table
             ref="timeTable"
-            class="c-sibling-item--v near"
+            class="c-sibling-item--v nearer sm"
             :schema="timeSchema"
           />
         </div>
@@ -167,8 +131,6 @@
 
 <script>
 import {
-  State,
-  ScheduleType,
   EventTarget,
   EventTargetInfo,
   PublishType,
@@ -182,7 +144,6 @@ import {
   getConflict,
   getEventDescription
 } from '@/utils/event'
-import { getSchedules } from '@/api/calendar'
 import { publish } from '@/api/platform'
 import EventFrequencyConfigDialog from '../components/EventFrequencyConfigDialog.vue'
 
@@ -208,28 +169,8 @@ export default {
       eventOptions: null,
       typeOptions: [
         { value: PublishTargetType.EVENT, label: '事件' },
-        // { value: PublishTargetType.CALENDAR, label: '排期' },
         { value: DEFAULT_PLAYBACK, label: '默认播放' }
       ],
-      schema: {
-        list: getSchedules,
-        condition: { type: ScheduleType.COMPLEX, status: State.AVAILABLE },
-        filters: [
-          { key: 'name', type: 'search', placeholder: '名称' }
-        ],
-        cols: [
-          { render: ({ id }, h) => h(
-            'span',
-            { staticClass: `el-radio__input ${id === this.selectedId ? 'is-checked' : ''}` },
-            [h('span', { staticClass: 'el-radio__inner' })]
-          ), width: 60, align: 'center' },
-          { prop: 'name', label: '名称' },
-          { prop: 'resolutionRatio', label: '分辨率' },
-          { type: 'invoke', render: [
-            { label: '查看', on: this.onView }
-          ] }
-        ]
-      },
       timeSchema: {
         nonPagination: true,
         props: {
@@ -253,29 +194,15 @@ export default {
       switch (this.active) {
         case 0:
           return this.selectedDevices.length === 0
-        case 1:
-          return this.isCalendar ? !this.selectedId : false
         default:
           return false
       }
     },
-    isCalendar () {
-      return this.eventOptions?.type === PublishTargetType.CALENDAR
-    },
-    isEvent () {
-      return this.eventOptions?.type === PublishTargetType.EVENT
-    },
     isDefaultPlayback () {
       return this.eventOptions?.type === DEFAULT_PLAYBACK
     },
     btnMsg () {
       return this.active < 1 ? '下一步' : '发布'
-    },
-    selectedId () {
-      return this.eventOptions?.target?.id
-    },
-    currentTarget () {
-      return this.eventOptions?.target?.name
     }
   },
   methods: {
@@ -346,9 +273,6 @@ export default {
     onChangeType (type) {
       this.eventOptions = this.createEventOptions(type)
     },
-    onClickRow (row) {
-      this.eventOptions.target = row
-    },
     onView ({ id }) {
       this.$refs.materialDialog.showSchedule(id)
     },
@@ -424,18 +348,6 @@ export default {
         })
         return Promise.reject('invalid event, no time')
       }
-      if (this.isCalendar) {
-        const { id, name, resolutionRatio } = this.eventOptions.target
-        return Promise.resolve({
-          publishType: PublishType.PROGRAM_TO_DEVICE,
-          targetList: [{
-            type: PublishTargetType.CALENDAR,
-            detail: id
-          }],
-          name,
-          resolutionRatio
-        })
-      }
       const eventTarget = this.$refs.eventTargetPicker.getValue()
       if (!eventTarget) {
         return Promise.reject('invalid event, no target')

+ 2 - 2
src/views/screen/deploy/ratio/index.vue

@@ -22,10 +22,10 @@
     <div class="l-flex__fill l-flex">
       <ratio-tree
         ref="tree"
-        class="l-flex__none c-step__column u-font-size--sm"
+        class="l-flex__none c-step__column u-width--sm u-font-size--sm"
         @change="onChange"
       />
-      <div class="l-flex__none l-flex--col c-step__column u-width--lg">
+      <div class="l-flex__none l-flex--col c-step__column u-width--xl">
         <div class="c-sibling-item--v u-font-size--sm u-bold">上播配置</div>
         <div class="c-sibling-item--v u-font-size--sm">优先级</div>
         <el-select

+ 3 - 4
src/views/screen/review/workflow/audit/index.vue

@@ -26,10 +26,9 @@
     />
     <template v-else>
       <template v-if="audit === 0">
-        <schema-table
-          class="l-flex__none c-sibling-item--v"
-          :schema="schema"
-        />
+        <div class="l-flex__none c-sibling-item--v">
+          <schema-table :schema="schema" />
+        </div>
         <div class="l-flex__fill l-flex c-sibling-item--v far">
           <div class="l-flex__none l-flex--col c-sibling-item u-width--md">
             <schema-table :schema="deviceSchema" />

+ 1 - 4
src/views/screen/review/workflow/components/WorkflowDialog.vue

@@ -6,10 +6,7 @@
   >
     <template #default>
       <div class="l-flex__none c-sibling-item--v">
-        <schema-table
-          class="l-flex__none"
-          :schema="schema"
-        />
+        <schema-table :schema="schema" />
       </div>
       <div class="l-flex__fill l-flex c-sibling-item--v">
         <div class="l-flex--col c-sibling-item c-sidebar u-width">