相册列表修改

src/api/modules/other-file/album.js

@@ -0,0 +1,29 @@
+import { HcApi } from '../../request/index'
+
+export default {
+
+
+    //接口相册列表
+    async getPage(form) {
+        return HcApi({
+            url: '/api/blade-manager/album/page',
+            method: 'post',
+            params: form,
+        })
+    },
+        //接口相册列表
+    async update(form) {
+        return HcApi({
+            url: '/api/blade-manager/album/update',
+            method: 'post',
+            data: form,
+        })
+    },
+    async save(form) {
+        return HcApi({
+            url: '/api/blade-manager/album/save',
+            method: 'post',
+            data: form,
+        })
+    },
+}

src/views/other-file/image-data.vue

@@ -21,6 +21,7 @@
                     <span>返回主页</span>
                 </el-button>
             </template>
+            
             <HcTable v-if="!isShowImageList" :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
                 <template #fileType="{ row }">
                     {{ row.fileType == 1 ? '视频文件' : '图片文件' }}
@@ -32,11 +33,24 @@
                     </HcTooltip>
                 </template>
             </HcTable>
+            <!-- 相册列表 -->
             <HcTable v-else :column="imageListColumn" :datas="imageListData" :loading="imageLoading" is-new :index-style="{ width: 60 }">
-                <template #count="{ row }">
-                    <span v-if="!row.isEditing">{{ row.count }}</span>
-                    
-                    <el-input v-else v-model="row.count" placeholder="请输入内容" />
+                <template #groupNumber="{ row }">
+                    <span v-if="!row.isEditing">{{ row.groupNumber }}</span>
+                 
+                    <el-input-number v-else v-model="row.count" :controls="false" :precision="0" :min="0" style="width: 100%;" />
+                </template>
+                <template #photographer="{ row }">
+                    <span v-if="!row.isEditing">{{ row.photographer }}</span>
+                    <el-input v-else v-model="row.photographer" placeholder="请输入" />
+                </template>
+                <template #date="{ row }">
+                    <span v-if="!row.isEditing">{{ row.dateValue }}</span>
+                    <hc-date-picker v-else :dates="betweenTime" clearable @change="betweenTimeUpdate($event, row)" />
+                </template>
+                <template #imagesName="{ row }">
+                    <span v-if="!row.isEditing">{{ row.imagesName }}</span>
+                    <el-input v-else v-model="row.imagesName" placeholder="请输入" />
                 </template>
                 <template #action="{ row }">
                     <el-link v-if="!row.isEditing" type="primary" @click="startEditing(row)">编辑</el-link>
@@ -68,6 +82,7 @@ import { onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
 import { useRouter } from 'vue-router'
 import imageApi from '~api/other-file/imageData'
+import albumApi from '~api/other-file/album'
 import { delStoreValue } from '~src/utils/storage'
 import { getArrValue } from 'js-fast-way'
 //变量
@@ -187,6 +202,8 @@ const saveConfig = async (row) => {
 const isShowImageList = ref(false)
 const showImageList = () => {
     isShowImageList.value = true
+    //获取相册列表数据
+    getImageListData()
   
 }
 const goBackList = () => {
@@ -194,11 +211,11 @@ const goBackList = () => {
   
 }
 const imageListColumn = ref([
-    { key: 'className', name: '分类名称' },
-    { key: 'count', name: '分组号', width:100 },
-    { key: 'user', name: '主要拍摄者', width: 100 },
+    { key: 'classifyName', name: '分类名称' },
+    { key: 'groupNumber', name: '分组号', width:100 },
+    { key: 'photographer', name: '主要拍摄者', width: 100 },
     { key: 'date', name: '拍摄起止日期' },
-    { key: 'fileName', name: '文件题名' },
+    { key: 'imagesName', name: '文件题名' },
     { key: 'action', name: '操作', width: 100 },
 ])
 const imageListData = ref([
@@ -206,6 +223,33 @@ const imageListData = ref([
     { className:'基础设施2', count: '1', user: '张三', date: '2023-01-01 至 2023-01-31', fileName: '基础设施照片1.jpg' },
     { className:'基础设施3', count: '1', user: '张三', date: '2023-01-01 至 2023-01-31', fileName: '基础设施照片1.jpg' },
 ])
+
+const getImageListData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await albumApi.getPage({
+        projectId: projectId.value,
+        contractId: contractId.value,
+    })
+    //处理数据
+    tableLoading.value = false
+    if (!error && code === 200) {
+        imageListData.value = getArrValue(data)
+    } else {
+        imageListData.value = []
+    }
+}
+
+const betweenTime = ref(null)
+
+//日期时间被选择
+const betweenTimeUpdate = ({ arr, val, query }, row) => {
+    betweenTime.value = arr
+
+    row.dateValue = query
+    console.log(query, 'query')
+    
+    
+}
 const imageLoading = ref(false)
 
 const handleDelete = (row) => {

src/views/other-file/image-view.vue

@@ -58,7 +58,15 @@
                             <span>下载PDF</span>
                         </el-button>
                     </HcTooltip>
-
+                    <HcTooltip keys="image-data-download">
+                        <el-button
+                            :disabled="tableCheckedKeys.length <= 0" :loading="downPdfLoading" hc-btn
+                            @click="combineAlbumClick"
+                        >
+                            <HcIcon name="play-list-add" />
+                            <span>组成相册</span>
+                        </el-button>
+                    </HcTooltip>
                     <HcTooltip keys="image-data-del">
                         <el-button
                             :disabled="tableCheckedKeys.length <= 0" :loading="delLoading" hc-btn
@@ -138,6 +146,24 @@
                 您的浏览器不支持 video
             </video>
         </hc-new-dialog>
+        <!-- 组成相册 弹框 -->
+        <hc-new-dialog v-model="albumDialog" title="预览" widths="47rem" :loading="albumDialogLoading" @save="saveAlbum">
+            <el-form ref="albumFormRef" :model="albumForm" label-width="auto" :rules="albumRules">
+                <el-form-item label="相册文件题名" prop="imagesName">
+                    <el-input v-model="albumForm.imagesName" />
+                </el-form-item>
+                <el-form-item label="主要拍摄人" prop="photographer">
+                    <el-input v-model="albumForm.photographer" />
+                </el-form-item>
+                <el-form-item label="分组号">
+                    <el-input v-model="albumForm.groupNumber" />
+                </el-form-item>
+                <el-form-item label="拍摄起止日期">
+                    <!-- <el-input v-model="albumForm.dateValue" /> -->
+                    <hc-date-picker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
+                </el-form-item>
+            </el-form>
+        </hc-new-dialog>
     </div>
 </template>
 
@@ -149,10 +175,11 @@ import WbsTree from './components/WbsTree.vue'
 import HcTreeData from './components/HcTreeData.vue'
 import imageApi from '~api/other-file/imageData'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
-import { arrToId, downloadBlob, getArrValue } from 'js-fast-way'
+import { arrToId, arrToKey, downloadBlob, getArrValue } from 'js-fast-way'
 import { HcDelMsg } from 'hc-vue3-ui'
 import { toPdfPage } from '~uti/btn-auth'
 import website from '~src/config'
+import albumApi from '~api/other-file/album'
 
 //变量
 const router = useRouter()
@@ -545,6 +572,101 @@ const onmousedown = () => {
         document.onmouseup = null
     }
 }
+//组成相册
+const albumDialog = ref(false)
+const albumFormRef = ref(null)
+const albumForm = ref({})
+const albumRules = ref({
+    imagesName: [
+        { required: true, message: '请输入相册文件题名', trigger: 'blur' },
+    ],
+       photographer: [
+        { required: true, message: '请输入相册文件题名', trigger: 'blur' },
+    ],
+})
+
+//日期时间被选择
+const betweenTime = ref([])
+const betweenTimeUpdate = ({ arr, val, query }, row) => {
+    betweenTime.value = arr
+    albumForm.value.dateValue = query
+    console.log(arr, 'val')
+    
+    console.log(query, 'query')
+    
+
+    
+}
+const combineAlbumClick = ()=>{
+    albumForm.value = {
+        imagesName: '',
+        photographer: '',
+        groupNumber: '',
+        dateValue: '',
+    }
+    betweenTime.value = []
+    albumDialog.value = true
+const arr = getDateRangeFromShootTime(tableCheckedKeys.value)
+console.log(arr, 'arr')
+// albumForm.value.dateValue = arr
+betweenTime.value = arr
+
+ albumForm.value.dateValue = arr.join('~')
+
+                
+
+}
+const getDateRangeFromShootTime = (items) =>{
+  if (!items || items.length === 0) return [null, null]
+
+  // 提取并格式化所有有效日期
+  const dates = items
+    .map(item => item.shootingTimeStr)
+    .filter(time => typeof time === 'string' && time.trim() !== '')
+    .map(time => {
+      const date = new Date(time)
+      return isNaN(date.getTime()) ? null : date
+    })
+    .filter(Boolean)
+
+  if (dates.length === 0) return [null, null]
+
+  // 获取最早和最晚日期
+  const minDate = new Date(Math.min(...dates))
+  const maxDate = new Date(Math.max(...dates))
+
+  // 格式化为 YYYY-MM-DD
+  const formatDate = (date) => date.toISOString().split('T')[0]
+  
+  return [formatDate(minDate), formatDate(maxDate)]
+}
+
+// 使用示例
+const [startDate, endDate] = getDateRangeFromShootTime(tableCheckedKeys.value)
+console.log('日期范围:', [startDate, endDate]) // 输出: ["2025-07-01", "2025-07-31"]
+const albumDialogLoading = ref(false)
+const saveAlbum = async () => {
+    const rows = tableCheckedKeys.value
+        const margePdfUrls = arrToKey(rows, 'margePdfUrl', ',')
+        console.log(margePdfUrls, 'margePdfUrls')
+        
+    albumDialogLoading.value = true
+    const { error, code, msg } = await albumApi.save(
+       { ...albumForm.value,
+        projectId:projectId.value,
+        contractId: contractId.value,
+        classifyId:dataId.value,
+        margePdfUrls: margePdfUrls.split(','),
+       },
+    )
+    //判断状态
+    if (!error && code === 200) {
+        window.$message?.success(msg)
+        getTableData()
+        albumDialog.value = false
+    } 
+    albumDialogLoading.value = false
+}
 </script>
 
 <style lang="scss" scoped>