hazardousWaste_app/pages/warehousing/StockOut/components/technicalEvaluation.vue

<template>
    <navigation title="技术鉴定表详情" :back-url="backUrl">
        <template #right>
            <my-link @tap="toMyTechnicalList" style="font-size: 14px;">我的</my-link>
        </template>
    </navigation>
    <view class="contentBox">
        <uv-form labelPosition="top" :model="formModel" class="technicalForm" ref="technicalEvaluationRef"
            labelWidth="auto">
            <uv-form-item label="技术鉴定表" prop="fileList" style="margin-top: 16rpx;">
                <uv-upload :fileList="formModel?.fileList" name="1" multiple :maxCount="6" @afterRead="afterRead"
                    @delete="deleteImg" :previewFullImage="true"></uv-upload>
            </uv-form-item>
            <uv-form-item label="技术鉴定表备注说明" prop="remark" style="margin-top: 16rpx;">
                <uv-textarea v-model="formModel.remark" placeholder="请输入技术鉴定表备注说明..." border="none"></uv-textarea>
            </uv-form-item>

        </uv-form>
        <view class="bottom">
            <uv-button type="primary" v-if="!formModel?.appraisalNo" @tap="submitForm">提交信息</uv-button>
            <uv-button type="error" v-else @tap="delForm">删除</uv-button>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue';

import { onLoad } from "@dcloudio/uni-app";
import { objectToQuery } from '../../../until';
import Navigation from '../../../components/Navigation.vue';
import { uploadTechnicalFile, addWithFiles, deleteAppraisal } from '@/api/stockOut'
import _ from 'lodash';
const queryParams = ref('')
const formModel = ref({
    billNo: null,
    remark: '',
    appraisalNo: '',
    id: '',
    fileList: [],
})
const backUrl = ref('')
const afterRead = async (event) => {
    // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    console.log(event, '上传')
    let files = event.file?.map(file => file.url);
    let formData = {
        scene: 'OUTBOUND',
        bizType: 'TECHNICAL_APPRAISAL',
    }
    uploadTechnicalFile(files, formData).then(res => {
        const some = _.some(res, { success: false })
        console.log(some, '上传接口调取成功', res)
        if (some) return;
        if (!formModel.value.fileList || formModel.value.fileList.length == 0) {
            formModel.value.fileList = []
        }
        res?.forEach(item => {
            formModel.value.fileList.push({ url: item?.url, name: item?.name, scene: 'OUTBOUND', bizType: 'TECHNICAL_APPRAISAL' })
        })
    })
}
// 删除图片
const deleteImg = (index, type) => {
    formModel.value.fileList?.splice(index, 1)
}
// 提交
const submitForm = () => {
    const params = {
        remark: formModel.value.remark,
        billNo: queryParams.value.billNo,
        fileList: formModel.value.fileList,
    }
    addWithFiles(params).then((res) => {
        if (res.code == 200) {
            console.log(res.data);
            uni.setStorageSync('app_technical', {
                remark: res.data?.remark,
                appraisalNo: res.data.appraisalNo,
                id: res.data.id,
                createTime: res.data.createTime,
                fileList: res.data?.fileUrlList || [],
            });
            uni.navigateTo({
                url: backUrl.value
            });
        }

    })

}
const delForm = () => {
    deleteAppraisal({ id: formModel.value?.id }).then((res) => {
        console.log(res, '删除');
        formModel.value = {
            billNo: null,
            remark: '',
            appraisalNo: '',
            id: '',
            fileList: [],
        }
        uni.removeStorageSync("app_technical");
    })
}
// 数据：获取缓存信息
const getMaterialList = () => {
    // 获取技术鉴定表数据
    const list = uni.getStorageSync('app_technical') || {};
    formModel.value = list
}
getMaterialList()
// 数据：路径参数
onLoad((options) => {
    const query = objectToQuery(options)
    queryParams.value = options
    backUrl.value = `/pages/warehousing/stockOut/components/outAway${query}`

})
const toMyTechnicalList = () => {
    const query = objectToQuery(queryParams.value)
    uni.navigateTo({
        url: `/pages/warehousing/stockOut/components/myTechnicalEvaluation${query}`
    });
}
// 获取技术鉴定编数据
const getTechnicalList = () => {
    const list = uni.getStorageSync('app_technical');
    formModel.value.fileList = list?.fileList || []
    formModel.value.remark = list?.remark
}
getTechnicalList()
</script>
<style scoped lang="scss">
::v-deep.technicalForm {
    .uv-form-item {
        background-color: #fff;
        padding: 0 24rpx;
    }

    .uv-form-item__body__left__content__label {
        margin-bottom: 8px;
    }

    .uv-form-item__body {
        background-color: #fff;
        padding: 12rpx;
        margin-bottom: 2rpx;
    }

    .uv-textarea {
        padding: 0;
    }
}

/* 底部按钮 */
::v-deep .bottom {
    position: fixed;
    bottom: 0;
    height: 60rpx;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .uv-button-wrapper {
        width: 100%;
        border-radius: 0;
    }

    .uv-button--info {
        background-color: #07c160;
        color: #fff;

    }
}
</style>