client-app/pages/image/view.vue

<template>
    <z-paging ref="pageRef" v-model="dataList" @query="getDataList">
        <template #top>
            <view class="hc-paging-top-bar mb-1">
                <hc-nav-back-bar ui="top" title="声像文件">
                    <text class="text-26" :class="isDelete?'':'text-red-4'" @click="deleteTap" v-if="dataList.length > 0">
                        {{isDelete? '取消' : '删除'}}
                    </text>
                </hc-nav-back-bar>
                <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 1">
                    <view class="search-form radius">
                        <text class="cuIcon-search"/>
                        <input v-model="searchForm.queryStr" :adjust-position="false" type="text" placeholder="根据题名，名称或拍摄者搜索" confirm-type="search"/>
                    </view>
                    <view class="action">
                        <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
                    </view>
                </view>
                <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 2">
                    <view class="search-form radius">
                        <uni-datetime-picker type="datetime" v-model="searchForm.queryDate"/>
                    </view>
                    <view class="action">
                        <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
                    </view>
                </view>
            </view>
        </template>

        <!-- 数据列表 -->
        <template v-for="(item, index) in dataList" :key="index">
            <view class="bg-white hc-p hc-flex" un-border-b="1 solid gray-2" @click="itemClick(item)">
                <view class="hc-flex mr-2" v-if="isDelete" @click.stop="checkClick(item)">
                    <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="item.check"/>
                    <uni-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
                </view>
                <view class="hc-flex">
                    <video class="h-100 w-100 b-rounded" :src="item.imageUrl" :controls="false" :show-center-play-btn="false" v-if="item.type === 1"/>
                    <hc-img class="b-rounded" :src="item.imageUrl?.toString()?.split(',')[0]" width="50" height="50" v-if="item.type === 2"/>
                </view>
                <view class="relative flex-1 ml-3">
                    <view class="text-30 text-black clip-2">{{item.title}}</view>
                    <view class="text-24 mt-1 text-cut">{{item.textContent}}</view>
                </view>
            </view>
        </template>

        <template #bottom>
            <hc-tabbars class="hc-paging-bottom-bar">
                <view class="hc-flex" v-if="isDelete">
                    <view class="hc-flex" @click="allCheckClick">
                        <uni-icons type="checkbox-filled" size="24" color="#ee5b20" v-if="checkList.length === dataList.length"/>
                        <uni-icons type="checkbox" size="24" color="#9a9a9a" v-else/>
                        <text class="ml-1">全选</text>
                    </view>
                    <view class="flex-1 ml-4 text-gray-5 text-24">
                        <text class="mr-1">已勾选</text>
                        <text class="text-red-5">{{checkList.length}}</text>
                        <text class="ml-1">条数据</text>
                    </view>
                    <button hover-class="none" class="cu-btn bg-red-5 text-white" @click="delCheckList">删除选中</button>
                </view>
                <button hover-class="none" class="cu-btn block bg-purple-8 text-white" @click="addFileData" v-else>新增声像文件</button>
            </hc-tabbars>
        </template>
    </z-paging>
</template>

<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app'
import {useAppStore} from "@/store";
import mainApi from '~api/image/index';
import {arrIndex, deepClone, getArrValue} from "js-fast-way";
import {errorToast, showModal, successToast} from "@/utils/tools";

//初始变量
const store = useAppStore()
const contractInfo = ref(store.contractInfo);
const projectId = ref(store.projectId);
const contractId = ref(store.contractId);

//基础变量
const pageRef = ref(null)
const pageNode = ref({});
const dataList = ref([])

//页面启动
onLoad(({node}) => {
    pageNode.value = node ? JSON.parse(decodeURIComponent(node)) : {};
})

//条件搜索
const searchClick = () => {
    pageRef.value?.reload()
}

//获取数据
const searchForm = ref({queryStr: ''})
const getDataList = async (pageNo, pageSize) => {
    const {id, fileType, type, treeId} = pageNode.value
    if (!type || !id || !type || !fileType) {
        errorToast('参数异常，请退出重试')
        pageRef.value?.complete([]);
        return false;
    }
    //树类型
    const form = searchForm.value
    if (type === 1 && treeId) {
        delete form.queryDate
        form.wbsIdsStr = treeId
    }
    if (type === 2) {
        delete form.wbsIdsStr
        delete form.queryStr
    }
    //获取数据
    uni.showLoading({title: '获取数据中...', mask: true});
    const { data } = await mainApi.getPageList({
        ...form,
        projectId: projectId.value,
        contractId: contractId.value,
        classifyId: id,
        current: pageNo,
        size: pageSize,
        isApp: 1,
    })
    //处理数据
    const res = getArrValue(data?.records)
    pageRef.value?.complete(res);
    uni.hideLoading();
}

//批量删除
const isDelete = ref(false)
const deleteTap = () => {
    isDelete.value = !isDelete.value
}

//点击选中
const checkList = ref([])
const checkClick = (item) => {
    const list = checkList.value
    const index = arrIndex(list, 'id', item.id)
    if (item.check) {
        list.splice(index, 1)
        item.check = false
    } else {
        item.check = true
        list.push(item)
    }
    checkList.value = list
}

//全选
const allCheckClick = () => {
    const check = checkList.value, list = dataList.value
    if (check.length === list.length) {
        list.forEach(item => {
            item.check = false
        })
        checkList.value = []
    } else {
        list.forEach(item => {
            item.check = true
        })
        checkList.value = deepClone(list)
    }
}

//列表项被点击
const itemClick = (item) => {
    if(isDelete.value) {
        checkClick(item)
    } else {
        uni.navigateTo({
            url: `/pages/image/info?id=${item.id}`
        })
    }
}

//删除选中数据
const delCheckList = async () => {
    if (checkList.value.length <= 0) {
        errorToast('请选择要删除的数据')
        return false
    }
    const res = await showModal({
        title: '批量删除提醒',
        content: '确定要删除选中的数据吗？',
    })
    if (!res) return false;
    uni.showLoading({title: '批量删除中...', mask: true});
    const ids = checkList.value.map(item => item.id)
    const { error, code, msg } = await mainApi.removeImageclassifyFile({
        ids: ids.join(',')
    })
    uni.hideLoading();
    if (!error && code === 200) {
        successToast('删除成功')
        searchClick()
    } else {
        errorToast('删除失败: ' + msg)
    }
}

//新增文件数据
const addFileData = () => {
    //准备跳转路由
    const node = encodeURIComponent(JSON.stringify({
        ...pageNode.value
    }));
    uni.navigateTo({
        url: `/pages/image/form?node=${node}`
    })
}
</script>