client-app/pages/image/form.vue

<template>
    <hc-sys :isNavBar="false">
        <uni-notice-bar text="请上传MP4、MOV格式的视频文件，文件大小不超过500M，只能上传1个视频文件" v-if="formData.type === 1"/>
        <uni-notice-bar text="请上传JPG、JPEG、PNG格式的图片文件，大小不超过30M，最多10张图片文件" v-if="formData.type === 2"/>
        <view class="relative bg-white mt-1 hc-p">
            <!-- 文件上传 -->
            <view class="hc-flex flex-wrap pb-3 mb-5" un-border-b="1 solid gray-2" v-if="formData.type === 2">
                <template v-for="(item, index) in fileList" :key="index">
                    <view class="hc-flex h-120 w-120 b-rounded mr-2 mt-2" @click="previewImg(index)">
                        <hc-img :src="item" width="60" height="60" class="b-rounded"/>
                        <view class="hc-tr bg-red-5 text-white text-center w-38 h-38 b-rounded-lb-1 b-rounded-tr-1" @click.stop="delFileClick(index)">
                            <text class="relative cuIcon-close top--2 text-24"/>
                        </view>
                    </view>
                </template>
                <template v-if="fileList.length < 10">
                    <view class="hc-flex-center h-120 w-120 b-rounded mt-2" un-border="2 dashed gray-2" @click="addFileClick">
                        <text class="i-iconoir-plus text-70 text-gray-4"/>
                    </view>
                </template>
            </view>
            <!-- 表单 -->
            <uni-forms ref="formRef" :rules="formRules" :modelValue="formData" :label-width="82">
                <uni-forms-item label="题名" required name="title">
                    <uni-easyinput v-model="formData.title" placeholder="请输入题名" />
                </uni-forms-item>
                <uni-forms-item label="文字说明" required name="textContent">
                    <uni-easyinput type="textarea" v-model="formData.textContent" placeholder="请输入文字说明" />
                </uni-forms-item>
                <uni-forms-item label="拍摄时间" required name="shootingTimeStr">
                    <uni-datetime-picker type="date" v-model="formData.shootingTimeStr" :end="dateEnd"/>
                </uni-forms-item>
                <uni-forms-item label="上传日期" required name="uploadTime">
                    <uni-datetime-picker type="date" v-model="formData.uploadTime" :end="dateEnd"/>
                </uni-forms-item>
                <uni-forms-item label="拍摄者" required name="shootingUser">
                    <uni-easyinput v-model="formData.shootingUser" placeholder="请输入拍摄者" />
                </uni-forms-item>
                <template v-if="formData.type === 2">
                    <uni-forms-item label="照片号">
                        <uni-easyinput v-model="formData.photoCode" placeholder="请输入照片号" />
                    </uni-forms-item>
                    <uni-forms-item label="底片号">
                        <uni-easyinput v-model="formData.filmCode" placeholder="请输入底片号" />
                    </uni-forms-item>
                    <uni-forms-item label="参见号">
                        <uni-easyinput v-model="formData.seeAlsoCode" placeholder="请输入参见号" />
                    </uni-forms-item>
                </template>
            </uni-forms>
        </view>
        <!-- 底部操作栏 -->
        <HcTabbarBlock :height="70"/>
        <hc-tabbars class="flex items-center">
            <template v-if="!dataId">
                <view class="flex-1 mr-2">
                    <button hover-class="none" class="cu-btn block bg-orange text-white">继续新增</button>
                </view>
                <view class="flex-1 ml-2">
                    <button hover-class="none" class="cu-btn block bg-purple-8 text-white">提交保存</button>
                </view>
            </template>
            <template v-else>
                <button hover-class="none" class="cu-btn flex-1 bg-purple-8 text-white" @click="saveClick">提交保存</button>
            </template>
        </hc-tabbars>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import mainApi from '~api/image/index';
import {uploadApi} from '~api/upload';
import {getObjValue} from "js-fast-way";
import {errorToast, formValidate, successToast} from "@/utils/tools";
import {onLoad, onReady} from '@dcloudio/uni-app'
import {chooseImage} from "@/utils/utils";
import dayjs from "dayjs";

//初始变量
const dataId = ref('');
const fileList = ref([])
const pdfList = ref([])

const dateEnd = ref(dayjs().format("YYYY-MM-DD"));

//页面启动
onLoad((options) => {
    const {id} = getObjValue(options)
    dataId.value = id ?? '';
    if (id) {
        uni.setNavigationBarTitle({title: '编辑声像文件'})
        getInfoApi()
    } else {
        uni.setNavigationBarTitle({title: '新增声像文件'})
    }
})

onReady(() => {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    formRef.value?.setRules(formRules)
})

//获取详情
const getInfoApi = async () => {
    formData.value = {}
    if (!dataId.value) {
        errorToast('参数异常，请退出重试')
        return false;
    }
    uni.showLoading({title: '获取数据中...', mask: true});
    const { data } = await mainApi.queryById({
        id: dataId.value
    })
    const res = getObjValue(data)
    formData.value = res
    console.log(res)
    const {imageUrl, pdfUrl} = res
    fileList.value = imageUrl.toString().split(',')
    pdfList.value = pdfUrl.toString().split(',')
    uni.hideLoading();
}

//添加文件
const addFileClick = async () => {
    const tempFiles = await chooseImage(10 - fileList.value.length)
    if (tempFiles.length > 0) {
        uni.showLoading({title: '上传文件中...', mask: true});
    }
    for (let i = 0; i < tempFiles.length; i++) {
        await uploadFile(tempFiles[i]);
    }
    uni.hideLoading();
}

//上传文件
const uploadFile = async (item) => {
    const {error, msg, data} = await uploadApi(item.path || item.tempFilePath)
    if (!error) {
        const { link, pdfUrl } = getObjValue(data)
        fileList.value.push(link)
        pdfList.value.push(pdfUrl)
    } else {
        errorToast(msg)
    }
}

//删除文件
const delFileClick = (index) => {
    fileList.value.splice(index, 1)
    pdfList.value.splice(index, 1)
}

//预览图片
const previewImg = (index) => {
    uni.previewImage({
        current: index,
        urls: fileList.value,
    });
}

//表单验证
const formRef = ref(null)
const formData = ref({})
const formRules = {
    title: {
        rules: [{
            required: true,
            errorMessage: '请输入题名'
        }]
    },
    textContent: {
        rules: [{
            required: true,
            errorMessage: '请输入文字说明'
        }]
    },
    shootingTimeStr: {
        rules: [{
            required: true,
            errorMessage: '请选择拍摄时间'
        }]
    },
    uploadTime: {
        rules: [{
            required: true,
            errorMessage: '请选择上传日期'
        }]
    },
    shootingUser: {
        rules: [{
            required: true,
            errorMessage: '请输入拍摄者'
        }]
    },
}

//提交保存
const saveClick = async () => {
    if (fileList.value.length <= 0) {
        errorToast('请先上传文件')
        return false
    }
    const isForm = formValidate(formRef.value)
    if (!isForm) {
        errorToast('请先完善表单')
        return false
    }
    //更新数据
    if (dataId.value) {
        await updateImageData()
    } else {
        await addImageData()
    }
}

//更新数据
const updateImageData = async () => {
    uni.showLoading({title: '保存数据中...', mask: true});
    const {error, code, msg} = await mainApi.updateImageclassifyFile({
        ...formData.value,
        imageUrl: fileList.value.join(','),
        pdfUrl: pdfList.value.join(','),
    })
    uni.hideLoading();
    if (!error && code === 200) {
        successToast('保存成功')
    } else {
        errorToast('保存失败: ' + msg)
    }
}

//新增数据
const addImageData = async () => {
    uni.showLoading({title: '新增数据中...', mask: true});
    const {error, code, msg} = await mainApi.addImageclassifyFile({
        ...formData.value,
        imageUrl: fileList.value.join(','),
        pdfUrl: pdfList.value.join(','),
    })
    uni.hideLoading();
    if (!error && code === 200) {
        successToast('新增成功')
    } else {
        errorToast('新增失败: ' + msg)
    }
}
</script>