Merge branch 'perf/three-editor/10-23/2024' into 'main_dev'

feat(src/packages): 3d编辑器 新增批量操作（删除，发布，取消发布）

See merge request yunteng/thingskit-view!297

@@ -112,7 +112,7 @@ export const uploadFile = async (file: FormData, mode: ErrorMessageMode = 'modal
 export function threeJsDeleteApi(ids: string[], mode: ErrorMessageMode = 'modal') {
   return defHttp.delete(
     {
-      url: Api.THREE_JS_MODEL +'?ids=' + ids,
+      url: Api.THREE_JS_MODEL + '?ids=' + ids
     },
     {
       errorMessageMode: mode
@@ -145,7 +145,7 @@ export const putThreeJsModelRelease = (params: { id: string | number; state: num
  */
 export const updateThreeJsModel = (params: { id: string; name: string }) => {
   return defHttp.put({
-    url: Api.THREE_JS_MODEL +'/' + params['id'] + '/' + params['name'],
+    url: Api.THREE_JS_MODEL + '/' + params['id'] + '/' + params['name'],
     params
   })
 }
@@ -155,7 +155,7 @@ export const updateThreeJsModel = (params: { id: string; name: string }) => {
  */
 export function saveOrUpdateThreeJsModel(params: Recordable) {
   return defHttp.post({
-    url: Api.THREE_JS_MODEL +'/' + params['id'],
+    url: Api.THREE_JS_MODEL + '/' + params['id'],
     data: params['data']
   })
 }
@@ -165,7 +165,16 @@ export function saveOrUpdateThreeJsModel(params: Recordable) {
  */
 export function getThreeJsModel(id: string) {
   return defHttp.get({
-    url: Api.THREE_JS_MODEL +'/' + id,
+    url: Api.THREE_JS_MODEL + '/' + id
   })
 }
 
+/**
+ * @description: 3D模型 批量发布/取消发布 api
+ */
+export function putReleaseThreeJsModel(state: number, ids: string[]) {
+  return defHttp.put({
+    url: Api.THREE_JS_MODEL + '/publish/' + state,
+    data: ids
+  })
+}

 <template>
   <div v-if="cardData" class="go-items-list-card">
-    <n-card :hoverable="false" size="small">
+    <n-card hoverable size="small">
+      <template v-if="operationKey">
+        <n-checkbox v-model:checked="cardData.checkedValue"> </n-checkbox>
+      </template>
       <div class="list-content">
         <div class="list-content-img">
           <n-image
@@ -98,7 +101,8 @@ const { EllipsisHorizontalCircleSharpIcon, TrashIcon, HammerIcon, SendIcon } = i
 const emit = defineEmits(['delete', 'resize', 'edit', 'release', 'inputUpdateCard'])
 
 const props = defineProps({
-  cardData: Object as PropType<ChartType>
+  cardData: Object as PropType<ChartType>,
+  operationKey: String,
 })
 
 // 处理url获取
@@ -197,9 +201,9 @@ $contentHeight: 180px;
   border-radius: $--border-radius-base;
   border: 1px solid rgba(0, 0, 0, 0);
   @extend .go-transition;
-  &:hover {
-    @include hover-border-color('hover-border-color');
-  }
+  // &:hover {
+  //   @include hover-border-color('hover-border-color');
+  // }
   .list-content {
     cursor: pointer;
     border-radius: $--border-radius-base;

@@ -44,7 +44,8 @@ export const useDataListInit = (formValue: { name: string; state: string | null
       pagination.count = total
       list.value = items.map(item => ({
         ...item,
-        threeModelFilePath: `${threeFilePath}${VITE_GLOB_API_URL}${VITE_GLOB_API_URL_PREFIX}/3d_component/json/${item.id}/scene.json`
+        threeModelFilePath: `${threeFilePath}${VITE_GLOB_API_URL}${VITE_GLOB_API_URL_PREFIX}/3d_component/json/${item.id}/scene.json`,
+        checkedValue: false
       }))
       setTimeout(() => {
         loading.value = false

@@ -40,7 +40,18 @@
       <div style="display: flex; flex-direction: row-reverse">
         <n-space>
           <n-button type="primary" @click="handleOpenThreeEditor"> 新增 </n-button>
-          <!-- <n-button disabled> 批量操作 </n-button>  -->
+          <n-button v-if="list.length" @click="handleSelectAll" type="info">
+            {{ selectAllTextFlag ? '全选' : '反选' }}
+          </n-button>
+          <n-dropdown
+            v-if="list.length"
+            :disabled="isBulkOperationFlag"
+            trigger="hover"
+            :options="operationOptions"
+            @select="handleOperationSelect"
+          >
+            <n-button :disabled="isBulkOperationFlag"> 批量操作 </n-button>
+          </n-dropdown>
         </n-space>
       </div>
       <n-grid style="margin-top: 16px" :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
@@ -48,6 +59,7 @@
           <div style="display: none">{{ index }}</div>
           <project-items-card
             :cardData="item"
+            :operationKey="operationKey"
             @resize="resizeHandle"
             @delete="deleteHandle(item)"
             @release="releaseHandle(item)"
@@ -89,6 +101,10 @@ import { ref } from 'vue'
 import type { FormInst } from 'naive-ui'
 import { icon } from '@/plugins'
 import { getUUID } from '@/utils/utils'
+import { threeJsDeleteApi, putReleaseThreeJsModel } from '@/api/external/contentSave/content'
+import { ChartType } from '../..'
+import { DialogEnum } from '@/enums/pluginEnum'
+import { goDialog } from '@/utils'
 
 const { SearchIcon, ReloadSearch } = icon.ionicons5
 
@@ -114,6 +130,88 @@ const statusOptions = ref([
   }
 ])
 
+const operationKey = ref('')
+
+const operationOptions = [
+  {
+    label: '批量删除',
+    key: 'Bulk delete'
+  },
+  {
+    label: '批量发布',
+    key: 'Bulk release'
+  },
+  {
+    label: '批量取消发布',
+    key: 'Bulk un release'
+  }
+]
+
+const resetSelect = (list: ChartType[], flag: boolean) => {
+  list.forEach(item => {
+    item.checkedValue = flag
+  })
+}
+
+const releaseGoDialog = (message: string, state: number, messageText: string) => {
+  goDialog({
+    type: DialogEnum.DELETE,
+    promise: true,
+    message,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onPositiveCallback: () => {},
+    promiseResCallback: async () => {
+      console.log(list.value)
+      // eslint-disable-next-line no-case-declarations
+      const bulkDeleteIds = list.value
+        ?.filter((item: ChartType) => item.checkedValue)
+        ?.map((item: ChartType) => item.id)
+      await putReleaseThreeJsModel(state, bulkDeleteIds as unknown as string[])
+      window['$message'].success(window['$t'](messageText))
+      handleSearchClick()
+      isBulkOperationFlag.value = true
+      selectAllTextFlag.value = false
+      operationKey.value = ''
+      resetSelect(list.value, false)
+    }
+  })
+}
+
+const handleOperationSelect = async (key: string) => {
+  operationKey.value = key
+  switch (key) {
+    case 'Bulk delete':
+      goDialog({
+        type: DialogEnum.DELETE,
+        promise: true,
+        message: '是否批量删除所选数据？',
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onPositiveCallback: () => {},
+        promiseResCallback: async () => {
+          console.log(list.value)
+          // eslint-disable-next-line no-case-declarations
+          const bulkDeleteIds = list.value
+            ?.filter((item: ChartType) => item.checkedValue)
+            ?.map((item: ChartType) => item.id)
+          await threeJsDeleteApi([bulkDeleteIds] as unknown as string[])
+          window['$message'].success(window['$t']('common.deleteSuccessText'))
+          handleSearchClick()
+          isBulkOperationFlag.value = true
+          selectAllTextFlag.value = false
+          operationKey.value = ''
+          resetSelect(list.value, false)
+        }
+      })
+      break
+    case 'Bulk release':
+      releaseGoDialog('是否批量发布所选数据？', 1, 'common.releaseSuccessText')
+      break
+    case 'Bulk un release':
+      releaseGoDialog('是否批量取消发布所选数据？', 0, 'common.cancelReleaseSuccessText')
+      break
+  }
+}
+
 const {
   loading,
   pagination,
@@ -126,6 +224,23 @@ const {
   handleSearchClick
 } = useDataListInit(formValue.value)
 
+const isBulkOperationFlag = ref(true)
+
+const selectAllTextFlag = ref(true)
+
+const handleSelectAll = () => {
+  selectAllTextFlag.value = !selectAllTextFlag.value
+  if (!selectAllTextFlag.value) {
+    resetSelect(list.value, true)
+    isBulkOperationFlag.value = false
+    operationKey.value = 'Bulk delete'
+  } else {
+    resetSelect(list.value, false)
+    isBulkOperationFlag.value = true
+    operationKey.value = ''
+  }
+}
+
 const handleResetClick = () => {
   formValue.value.name = ''
   formValue.value.state = null
@@ -151,7 +266,7 @@ $contentHeight: 250px;
   }
   .list-pagination {
     position: fixed;
-    bottom: 30px;
+    bottom: 10px;
     right: 30px;
   }
 }

@@ -9,6 +9,7 @@ export type ChartType = {
   name?: string
   threeModelFilePath?: string
   imageUrl?: string | undefined
+  checkedValue?: boolean
 }
 
 export type ChartList = ChartType[]