feat: remove the default tag and type when making media selection

MutilAssetTransferDialog, SingleAssetDialog

src/api/asset.js

@@ -34,14 +34,14 @@ export function getAsset (keyName) {
 }
 
 export function getAssetsByQuery (query) {
-  const { pageNum: currentPage, pageSize: pageCount, type, ...params } = query
+  const { pageNum: currentPage, pageSize: pageCount, typeList, type, ...params } = query
   return request({
     url: '/minio-data/listByPage',
     method: 'POST',
     data: addStatus({
       currentPage,
       pageCount,
-      typeList: type ? [type] : void 0,
+      typeList: typeList || (type ? [type] : void 0),
       ...params
     })
   }).then(({ data, totalCount }) => {

src/components/dialog/MultiAssetTransferDialog/index.vue

@@ -26,11 +26,13 @@
         >
           <template #header>
             <template v-if="isDir">
-              <i
-                class="l-flex__none o-icon o-icon--hover el-icon-arrow-left u-bold u-pointer"
-                @click="fileDir = null"
-              />
-              <div class="l-flex__fill u-ellipsis u-bold">{{ fileDir.name }}</div>
+              <div class="l-flex__fill l-flex--row u-height">
+                <i
+                  class="l-flex__none o-icon o-icon--hover el-icon-arrow-left u-bold u-pointer"
+                  @click="fileDir = null"
+                />
+                <div class="l-flex__fill u-ellipsis u-bold">{{ fileDir.name }}</div>
+              </div>
             </template>
           </template>
           <grid-table-item v-slot="item">
@@ -61,23 +63,25 @@
           </grid-table-item>
           <div
             v-if="isDir"
-            class="l-flex__self l-grid u-overflow-y--auto"
+            class="l-flex__auto c-sibling-item--v u-overflow-y--auto"
           >
-            <media-card
-              v-for="file in fileDir.files"
-              :key="file.keyName"
-              :asset="asset"
-              @click="onToggleAsset"
-            >
-              <el-checkbox
-                v-model="file.selected"
-                class="o-card__checkbox"
-              />
-              <i
-                class="o-card__play el-icon-video-play has-active"
-                @click.stop="onViewAsset(file)"
-              />
-            </media-card>
+            <div class="l-flex__none l-grid large">
+              <media-card
+                v-for="file in fileDir.files"
+                :key="file.keyName"
+                :asset="file"
+                @click="onToggleAsset"
+              >
+                <el-checkbox
+                  v-model="file.selected"
+                  class="o-card__checkbox"
+                />
+                <i
+                  class="o-card__play el-icon-video-play has-active"
+                  @click.stop="onViewAsset(file)"
+                />
+              </media-card>
+            </div>
           </div>
         </grid-table>
         <div class="l-flex__none l-flex--row c-transfer-area">
@@ -103,6 +107,7 @@
               <el-input-number
                 v-model="duration"
                 class="c-sibling-item u-width--xs"
+                size="small"
                 title="上播时长(s)"
                 controls-position="right"
                 :min="1"
@@ -110,7 +115,7 @@
                 step-strictly
               />
               <div
-                class="c-sibling-item near o-button"
+                class="c-sibling-item near o-button o-button--sm"
                 @click="onSetImageDuration"
               >
                 设置
@@ -150,7 +155,10 @@ import {
   AssetType,
   AssetTypeInfo
 } from '@/constant'
-import { getAssetDuration } from '@/utils'
+import {
+  parseDuration,
+  getAssetDuration
+} from '@/utils'
 import { getAssetsByQuery } from '@/api/asset'
 import Draggable from 'vuedraggable'
 
@@ -199,8 +207,8 @@ export default {
         condition: {
           pageSize: 18,
           status: State.AVAILABLE,
-          tag: AssetTag.AD,
-          type: this.types[0]
+          tag: '',
+          type: this.types.length > 1 ? '' : this.types[0]
         },
         filters: [
           { key: 'tag', type: 'select', options: [
@@ -208,7 +216,7 @@ export default {
             { value: AssetTag.PUBLICITY, label: AssetTagInfo[AssetTag.PUBLICITY] },
             { value: AssetTag.LOCAL_PUBLICITY, label: AssetTagInfo[AssetTag.LOCAL_PUBLICITY] },
             { value: AssetTag.SHIM, label: AssetTagInfo[AssetTag.SHIM] }
-          ] },
+          ], placeholder: '资源分类' },
           this.types.length > 1
             ? {
               key: 'type', type: 'select', options: this.types.map(type => {
@@ -216,7 +224,7 @@ export default {
                   value: type,
                   label: AssetTypeInfo[type]
                 }
-              })
+              }), placeholder: '资源类型'
             }
             : null,
           { key: 'originalName', type: 'search', placeholder: '资源名称' }
@@ -234,7 +242,10 @@ export default {
     },
     statistics () {
       const length = this.assets.length
-      return `共${length}条，总时长${this.assets.reduce((total, { duration }) => total + duration, 0)}秒`
+      return `共${length}条，总时长 ${parseDuration(this.assets.reduce((total, { duration }) => total + duration, 0), false)}`
+    },
+    mediaTypes () {
+      return this.types.filter(type => type !== AssetType.STREAMING_MEDIA)
     }
   },
   methods: {
@@ -270,9 +281,13 @@ export default {
       this.$refs.table?.pageTo(1)
     },
     getAssetsByQuery (params) {
-      if (params.type === AssetType.STREAMING_MEDIA) {
+      const { type, ...options } = params
+      if (type === AssetType.STREAMING_MEDIA) {
         this.isStream = true
-        return getAssetsByQuery(params)
+        return getAssetsByQuery({
+          ...options,
+          type
+        })
       }
       this.isStream = false
       if (!this.directoryOption) {
@@ -280,10 +295,11 @@ export default {
       }
       const { root, id, group: { path } } = this.directoryOption
       return getAssetsByQuery({
-        ...params,
+        ...options,
         ...(root
           ? { org: path }
-          : { treeId: id, queryRelation: '1' })
+          : { treeId: id, queryRelation: '1' }),
+        typeList: type ? [type] : [...this.mediaTypes]
       })
     },
     transformAsset ({ tag, type, originalName, keyName, duration, size, md5, file, diff }) {

src/components/dialog/SingleAssetDialog/index.vue

@@ -8,6 +8,7 @@
     <template #default>
       <div class="l-flex__auto l-flex">
         <directory-tree
+          v-if="needDirectory"
           class="c-sibling-item c-sidebar u-width"
           :option="directoryOption"
           @change="onAssetDirectoryChanged"
@@ -42,6 +43,7 @@ import {
   State,
   AssetTag,
   AssetTagInfo,
+  AssetType,
   AssetTypeInfo
 } from '@/constant'
 import { getAssetsByQuery } from '@/api/asset'
@@ -71,7 +73,7 @@ export default {
         condition: {
           pageSize: 24,
           status: State.AVAILABLE,
-          tag: AssetTag.AD,
+          tag: '',
           type: this.type
         },
         filters: [
@@ -80,10 +82,13 @@ export default {
             { value: AssetTag.PUBLICITY, label: AssetTagInfo[AssetTag.PUBLICITY] },
             { value: AssetTag.LOCAL_PUBLICITY, label: AssetTagInfo[AssetTag.LOCAL_PUBLICITY] },
             { value: AssetTag.SHIM, label: AssetTagInfo[AssetTag.SHIM] }
-          ] },
+          ], placeholder: '资源分类' },
           { key: 'originalName', type: 'search', placeholder: '资源名称' }
         ]
       }
+    },
+    needDirectory () {
+      return this.type !== AssetType.STREAMING_MEDIA
     }
   },
   methods: {
@@ -98,6 +103,9 @@ export default {
       this.$refs.table?.pageTo(1)
     },
     getAssetsByQuery (params) {
+      if (!this.needDirectory) {
+        return getAssetsByQuery(params)
+      }
       if (!this.directoryOption) {
         return Promise.resolve({ data: [] })
       }

src/components/service/EventTargetPicker/index.vue

@@ -119,7 +119,10 @@ import {
   AssetTypeInfo,
   Dataset
 } from '@/constant'
-import { transformDatasetAssetToAsset } from '@/utils'
+import {
+  parseDuration,
+  transformDatasetAssetToAsset
+} from '@/utils'
 import { getRatios } from '@/api/device'
 import {
   getDatasets,
@@ -186,7 +189,7 @@ export default {
       if (this.isAssets) {
         const assets = this.currentTarget.assets
         const length = assets.length
-        return `共${length}条，总时长${assets.reduce((total, { duration }) => total + duration, 0)}秒`
+        return `共${length}条，总时长 ${parseDuration(assets.reduce((total, { duration }) => total + duration, 0), false)}`
       }
       return ''
     },

src/scss/bem/_utility.scss

@@ -184,6 +184,10 @@
   object-fit: contain !important;
 }
 
+.u-height {
+  height: $height  !important;
+}
+
 .u-width {
   width: $width  !important;
 

src/utils/index.js

@@ -89,9 +89,9 @@ export function parseByte (byte) {
   return `${parseInt(byte * 100) / 100}${units[i]}`
 }
 
-export function parseDuration (duration) {
+export function parseDuration (duration, ignore = true) {
   if (!duration) {
-    return '-'
+    return ignore ? '-' : '00:00'
   }
   const seconds = `${duration % 60}`
   const minutes = `${duration / 60 | 0}`

src/views/ad/automation/mixins/asset-table.js

@@ -16,18 +16,18 @@ export const assetTableMixin = {
           size: 'small'
         },
         list: this.getAssetsByQuery,
-        condition: { status: State.AVAILABLE, tag: AssetTag.AD, type: AssetType.IMAGE },
+        condition: { status: State.AVAILABLE, tag: '', type: '' },
         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] },
             { value: AssetTag.SHIM, label: AssetTagInfo[AssetTag.SHIM] }
-          ] },
+          ], placeholder: '资源分类' },
           { key: 'type', type: 'select', options: [
             { value: AssetType.IMAGE, label: AssetTypeInfo[AssetType.IMAGE] },
             { value: AssetType.VIDEO, label: AssetTypeInfo[AssetType.VIDEO] }
-          ] },
+          ], placeholder: '资源类型' },
           { key: 'originalName', type: 'search', placeholder: '资源名称' }
         ],
         cols: [
@@ -41,14 +41,14 @@ export const assetTableMixin = {
           size: 'small'
         },
         list: getAssetsByQuery,
-        condition: { status: State.AVAILABLE, tag: AssetTag.AD, type: AssetType.STREAMING_MEDIA },
+        condition: { status: State.AVAILABLE, tag: '', type: AssetType.STREAMING_MEDIA },
         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] },
             { value: AssetTag.SHIM, label: AssetTagInfo[AssetTag.SHIM] }
-          ] },
+          ], placeholder: '资源分类' },
           { key: 'originalName', type: 'search', placeholder: '资源名称' }
         ],
         cols: [
@@ -70,9 +70,11 @@ export const assetTableMixin = {
       if (!this.directoryOption) {
         return Promise.resolve({ data: [] })
       }
+      const { type, ...options } = params
       const { root, id, group: { path } } = this.directoryOption
       return getAssetsByQuery({
-        ...params,
+        typeList: type ? [type] : [AssetType.IMAGE, AssetType.VIDEO],
+        ...options,
         ...(root
           ? { org: path }
           : { treeId: id, queryRelation: '1' })