yn_img_tools_app/src/pages/qualityInspection/components/addAndEditForm.vue

<template>
    <!-- 新增 修改 详情表单-->
    <up-form
        labelWidth="70"
        labelAlign="center"
        labelPosition="left"
        ref="addAndEditModelRef"
        :model="addAndEditModel"
        :rules="addAndEditModelRules"
        style="background-color: #fff; padding: 0 30rpx 20rpx"
    >
        <TitleTipModal :TitleTip="`项目信息`" />
        <up-form-item prop="proName" label="项目名称" required>
            <up-input
                readonly
                border="none"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择项目'"
                v-model="addAndEditModel.proName"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectProject" />
                </template>
            </up-input>
        </up-form-item>
        <up-form-item prop="majorName" label="专业">
            <up-input
                border="none"
                readonly
                v-model="addAndEditModel.majorName"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择专业'"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectMajor" />
                </template>
            </up-input>
        </up-form-item>
        <up-form-item prop="gxName" label="工序">
            <up-input
                border="none"
                readonly
                v-model="addAndEditModel.gxName"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择工序'"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectProcedure" />
                </template>
            </up-input>
        </up-form-item>

        <TitleTipModal :TitleTip="`检查信息`" />
        <up-form-item prop="checkUserName" label="检查人">
            <up-input
                border="none"
                v-model="addAndEditModel.checkUserName"
                :readonly="props.addAndEditFormType == 3"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入检查人'"
            />
        </up-form-item>
        <up-form-item prop="vioDate" label="检查日期">
            <up-input
                readonly
                border="none"
                inputAlign="right"
                v-model="addAndEditModel.vioDate"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择检查日期'"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectDate(1)" />
                </template>
            </up-input>
        </up-form-item>
        <up-form-item prop="rectDate" label="整改期限" required>
            <up-input
                readonly
                border="none"
                inputAlign="right"
                v-model="addAndEditModel.rectDate"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择整改期限'"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectDate(2)" />
                </template>
            </up-input>
        </up-form-item>
        <up-form-item prop="vioPlace" label="检查地点" required>
            <up-input
                border="none"
                v-model="addAndEditModel.vioPlace"
                :readonly="props.addAndEditFormType == 3"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入检查地点'"
            />
        </up-form-item>
        <up-form-item prop="vioDesc" label="检查描述" required>
            <up-textarea
                count
                autoHeight
                border="none"
                maxlength="200"
                v-model="addAndEditModel.vioDesc"
                :disabled="props.addAndEditFormType == 3"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入检查描述'"
            />
        </up-form-item>
        <up-form-item
            required
            prop="vrImgList"
            :label="props.addAndEditFormType == 3 ? '检查照片' : '检查照片(最多9张)'"
        >
            <up-upload
                multiple
                @delete="onDeletePicVrImgList"
                @afterRead="onAfterReadVrImgList"
                :deletable="props.addAndEditFormType != 3"
                :fileList="addAndEditModel.vrImgList"
                :maxCount="props.addAndEditFormType == 3 ? addAndEditModel.vrImgList.length : 9"
            />
        </up-form-item>
        <TitleTipModal :TitleTip="`整改信息`" />
        <up-form-item prop="rectUserName" label="整改人" required>
            <up-input
                border="none"
                :readonly="props.addAndEditFormType == 3"
                v-model="addAndEditModel.rectUserName"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入整改人'"
            />
        </up-form-item>
        <up-form-item prop="rectTime" label="整改日期">
            <up-input
                readonly
                border="none"
                inputAlign="right"
                v-model="addAndEditModel.rectTime"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择整改日期'"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectDate(3)" />
                </template>
            </up-input>
        </up-form-item>
        <up-form-item prop="rectDesc" label="整改说明" required>
            <up-textarea
                count
                autoHeight
                border="none"
                maxlength="200"
                :disabled="props.addAndEditFormType == 3"
                v-model="addAndEditModel.rectDesc"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入整改说明'"
            />
        </up-form-item>
        <up-form-item
            prop="examiner"
            :label="props.addAndEditFormType == 3 ? '整改照片' : '整改照片(最多9张)'"
        >
            <up-upload
                multiple
                @delete="onDeleteCorrectionImgList"
                :deletable="props.addAndEditFormType != 3"
                @afterRead="onAfterReadCorrectionImgList"
                :fileList="addAndEditModel.correctionImgList"
                :maxCount="
                    props.addAndEditFormType == 3 ? addAndEditModel.correctionImgList.length : 9
                "
            />
        </up-form-item>

        <up-button
            text="提交"
            type="primary"
            @tap="onSubmitForm"
            v-if="props.addAndEditFormType != 3"
            style="width: 100%; margin-top: 10rpx"
        />
    </up-form>

    <!-- 项目选择弹框 -->
    <up-popup :show="projectShow" mode="center" @close="onCloseProjectPopup">
        <view class="project-popup">
            <text>选择工程</text>
            <view style="width: 100%; margin: 18rpx 0">
                <up-input
                    clearable
                    placeholder="输入工程名称搜索"
                    suffixIconStyle="color: #909399"
                    v-model.trim="onSearchProjectName"
                >
                    <template #suffix>
                        <up-icon name="search" size="24" @tap="onSearchInProjectPopup" />
                    </template>
                </up-input>
            </view>

            <!-- 工程列表 -->
            <view class="project-list">
                <up-list @scrolltolower="onScrollTolower" style="width: 100%" pagingEnabled>
                    <up-list-item v-for="(item, index) in projectList" :key="item.id">
                        <up-cell :title="item.name" @tap="onSelectProjectItem(item)">
                            <template #icon>
                                <text style="margin-right: 10rpx">
                                    {{ index + 1 }}
                                </text>
                            </template>
                        </up-cell>
                    </up-list-item>
                </up-list>
            </view>
        </view>
    </up-popup>

    <!-- 专业选择器 -->
    <up-picker
        keyName="name"
        :show="majorShow"
        :columns="majorList"
        @confirm="onConfirmMajor"
        @cancel="majorShow = !majorShow"
    />
    <!-- 工序选择器 -->
    <up-picker
        keyName="name"
        :show="procedureShow"
        :columns="procedureList"
        @confirm="onConfirmProcedure"
        @cancel="procedureShow = !procedureShow"
    />
    <!-- 年月日选择器 -->
    <up-datetime-picker
        mode="date"
        :show="dateShow"
        v-model="dateValue"
        :formatter="formatter"
        @confirm="onConfirmDate"
        @cancel="dateShow = !dateShow"
    />

    <up-loading-page
        color="#333"
        fontSize="16"
        loadingColor="#2979ff"
        :loading="sendLoading"
        bg-color="rgba(0,0,0,0.3)"
        loading-text="正在提交，请稍后..."
    />
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue'
import { debounce } from 'lodash-es' // 引入防抖函数
import { useCommon } from '@/hooks/useCommon.js'
import { getProcedureApi } from '@/services/common.js'
import {
    addQualityInspectionApi,
    editQualityInspectionApi,
    getQualityInspectionDetailsByIdApi,
} from '@/services/qualityInspection.js'
import TitleTipModal from '@/components/TitleTipModal/index'

const { getProjectList, getMajorList } = useCommon()

const addAndEditModelRef = ref(null)
const projectShow = ref(false) // 项目选择弹框
const majorShow = ref(false) // 专业选择器
const procedureShow = ref(false) // 工序选择器
const dateShow = ref(false) // 年月日选择器
const onSearchProjectName = ref('') // 项目搜索条件
const dateValue = ref(Date.now()) // 年月日选择器数据源
const sendLoading = ref(false) // 加载中
const dateType = ref(1)

const props = defineProps({
    // 表单类型 1. 新增 2. 修改 3. 详情
    addAndEditFormType: {
        type: [Number, String],
        default: () => 1,
    },
    // 列表id
    detailsId: {
        type: [Number, String],
        default: () => '',
    },
})

// 项目数据源
const projectList = ref([])
const projectListAll = ref([])
// 专业数据源
const majorList = reactive([])
// 工序数据源
const procedureList = reactive([])

// 修改时删除的数据源
const deleteFileList = []
// 表单数据源
const addAndEditModel = reactive({
    dataSource: 2,
    proId: '', // 工程id
    proName: '', // 工程名称
    majorId: '', // 专业id
    majorName: '', // 专业名称
    gxId: '', // 工序id
    gxName: '', // 工序名称
    checkUserName: '', // 检查人
    vioDate: '', // 检查时间
    vioPlace: '', // 检查地点
    vioDesc: '', //  检查描述
    rectDate: '', // 整改期限
    rectUserName: '', //整改人
    rectTime: '', //整改时间
    rectDesc: '', //整改说明
    vrImgList: [], // 检查照片
    correctionImgList: [], // 整改照片
    rectStatus: 0,
})

// 校验规则
const addAndEditModelRules = ref({
    projectName: [
        {
            type: 'string',
            required: true,
            message: '请选择项目名称',
            trigger: ['blur', 'change'],
        },
    ],
    rectDate: [
        {
            type: 'string',
            required: true,
            message: '请选择整改期限',
            trigger: ['blur', 'change'],
        },
    ],
    checkUserName: [
        {
            trigger: ['blur', 'change'],
            pattern: /^(?:[\u4e00-\u9fa5]{1,10}|[a-zA-Z][a-zA-Z\s\-.]{1,19})$/,
            // 正则检验前先将值转为字符串
            transform(value) {
                return String(value)
            },
            message: '请填写正确的人名',
        },
    ],
    vioPlace: [
        {
            type: 'string',
            required: true,
            message: '请填写检查地点',
            trigger: ['blur', 'change'],
        },
    ],
    vioDesc: [
        {
            type: 'string',
            required: true,
            message: '请填写检查描述',
            trigger: ['blur', 'change'],
        },
    ],
    vrImgList: [
        {
            type: 'array',
            required: true,
            message: '请上传检查照片',
            trigger: ['blur', 'change'],
        },
    ],
    rectUserName: [
        {
            type: 'string',
            required: true,
            message: '请填写整改人',
            trigger: ['blur', 'change'],
        },
    ],
    rectDesc: [
        {
            type: 'string',
            required: true,
            message: '请填写整改说明',
            trigger: ['blur', 'change'],
        },
    ],
})

// 获取工序
const getProcedureData = async (pid) => {
    console.log(
        '%c🔍 获取工序请求入参 %c',
        'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
        '',
        'pid=' + pid,
    )
    const { data: res } = await getProcedureApi({ pid })
    console.log(
        '%c🔍 获取工序请求出参 %c',
        'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
        '',
        res,
    )
    procedureList.push(res)
}

// 日期格式化
const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`
    }
    if (type === 'month') {
        return `${value}月`
    }
    if (type === 'day') {
        return `${value}日`
    }
    return value
}

// 选择项目
const onSelectProject = () => {
    projectShow.value = true
}
// 搜索
const onSearchInProjectPopup = () => {
    if (!onSearchProjectName.value) {
        projectList.value = projectListAll.value // 如果搜索为空，返回所有项目
        return
    }

    const searchTerm = onSearchProjectName.value.toLowerCase()
    projectList.value = projectListAll.value.filter(
        (e) => e.name && e.name.toLowerCase().includes(searchTerm),
    )
}

// 滚动触底事件
const onScrollTolower = () => {
    // console.log('---滚动触底')
}

// 选择项目
const onSelectProjectItem = (item) => {
    addAndEditModel.proName = item.name
    addAndEditModel.proId = item.id
    projectShow.value = false
}

// 关闭项目选择弹框
const onCloseProjectPopup = () => {
    onSearchProjectName.value = ''
    projectShow.value = false
}

// 选择专业
const onSelectMajor = () => {
    majorShow.value = true
}

// 专业确定
const onConfirmMajor = (item) => {
    addAndEditModel.majorName = item.value[0].name
    addAndEditModel.majorId = item.value[0].id
    getProcedureData(item.value[0].id)
    majorShow.value = false
}
// 选择工序
const onSelectProcedure = () => {
    procedureShow.value = true
}

// 工序确定
const onConfirmProcedure = (item) => {
    addAndEditModel.gxName = item.value[0].name
    addAndEditModel.gxId = item.value[0].id
    procedureShow.value = false
}

// 打开日期选择器
const onSelectDate = (type) => {
    // type 为类型 1. 违章日期 2. 整改期限 3. 整改日期
    dateType.value = type
    dateShow.value = true
}

// 日期确定
const onConfirmDate = (item) => {
    const formatDateValue = formatDate(dateValue.value)
    if (dateType.value === 1) {
        addAndEditModel.vioDate = formatDateValue
    }
    if (dateType.value === 2) {
        addAndEditModel.rectDate = formatDateValue
    }
    if (dateType.value === 3) {
        addAndEditModel.rectTime = formatDateValue
    }
    dateShow.value = false
}

const formatDate = (timestamp) => {
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}

// 违章照片上传
const onAfterReadVrImgList = (event) => {
    let lists = [].concat(event.file)
    lists.map((item) => {
        addAndEditModel.vrImgList.push({
            ...item,
            isEdit: false,
        })
    })
}
// 违章照片删除
const onDeletePicVrImgList = (event) => {
    if (props.addAndEditFormType == 2 && addAndEditModel.vrImgList[event.index].isEdit) {
        deleteFileList.push({ id: addAndEditModel.vrImgList[event.index].id })
    }

    addAndEditModel.vrImgList.splice(event.index, 1)
}

// 整改照片上传
const onAfterReadCorrectionImgList = (event) => {
    let lists = [].concat(event.file)
    lists.map((item) => {
        addAndEditModel.correctionImgList.push({
            ...item,
            isEdit: false,
        })
    })
}
//  整改照片删除
const onDeleteCorrectionImgList = (event) => {
    if (props.addAndEditFormType == 2 && addAndEditModel.correctionImgList[event.index].isEdit) {
        deleteFileList.push({ id: addAndEditModel.correctionImgList[event.index].id })
    }

    addAndEditModel.correctionImgList.splice(event.index, 1)
}

// 提交
const onSubmitForm = debounce(() => {
    addAndEditModelRef.value
        .validate()
        .then(async (valid) => {
            if (valid) {
                // 先调上传接口把图片上传
                sendLoading.value = true
                const uploadImages = new Promise(async (resolve, reject) => {
                    try {
                        let successVrImgList = []
                        let successCorrectionImgList = []

                        let successVrImgListNoEdit = []
                        let successCorrectionImgListNoEdit = []

                        if (addAndEditModel.vrImgList.length > 0) {
                            successVrImgListNoEdit = addAndEditModel.vrImgList.filter(
                                (e) => !e.isEdit,
                            )

                            if (successVrImgListNoEdit.length > 0) {
                                successVrImgList = await uploadImgFun(successVrImgListNoEdit, 3)
                            }
                        }
                        if (addAndEditModel.correctionImgList.length > 0) {
                            successCorrectionImgListNoEdit =
                                addAndEditModel.correctionImgList.filter((e) => !e.isEdit)

                            if (successCorrectionImgListNoEdit.length > 0) {
                                successCorrectionImgList = await uploadImgFun(
                                    successCorrectionImgListNoEdit,
                                    4,
                                )
                            }
                        }

                        resolve({ successVrImgList, successCorrectionImgList }) // 上传成功，返回结果
                    } catch (error) {
                        reject(error) // 上传失败，抛出错误
                    }
                })

                uploadImages
                    .then(async ({ successVrImgList, successCorrectionImgList }) => {
                        // 这里写提交表单的逻辑
                        // 组装参数
                        const {
                            dataSource,
                            proId, // 工程id
                            proName, // 工程名称
                            majorId, // 专业id
                            majorName, // 专业名称
                            gxId, // 工序id
                            gxName, // 工序名称
                            checkUserName, // 检查人
                            vioDate, // 违章时间
                            vioPlace, // 违章地点
                            vioDesc, //  违章描述
                            rectDate, // 整改期限
                            rectUserName, //整改人
                            rectTime, //整改时间
                            rectDesc, //整改说明
                            rectStatus,
                        } = addAndEditModel

                        const addParams = {
                            dataSource,
                            proId, // 工程id
                            proName, // 工程名称
                            majorId, // 专业id
                            majorName, // 专业名称
                            gxId, // 工序id
                            gxName, // 工序名称
                            checkUserName, // 检查人
                            vioDate, // 违章时间
                            vioPlace, // 违章地点
                            vioDesc, //  违章描述
                            rectDate, // 整改期限
                            rectUserName, //整改人
                            rectTime, //整改时间
                            rectDesc, //整改说明
                            fileList: [...successVrImgList, ...successCorrectionImgList],
                            uploadType: 2,
                            rectStatus: addAndEditModel.correctionImgList.length > 0 ? 1 : 0,
                        }

                        const SED_API =
                            props.addAndEditFormType == 1
                                ? addQualityInspectionApi
                                : editQualityInspectionApi

                        if (props.addAndEditFormType == 2) {
                            Object.assign(addParams, {
                                id: props.detailsId,
                                delFileList: deleteFileList,
                            })
                        }

                        console.log(
                            '%c🔍 表单提交入参 %c',
                            'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                            '',
                            addParams,
                        )
                        const res = await SED_API(addParams)
                        console.log(
                            '%c🔍 表单提交出参 %c',
                            'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                            '',
                            res,
                        )

                        sendLoading.value = false
                        if (res.code === 200) {
                            uni.$u.toast(res.data)
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1,
                                })
                            }, 500)
                        } else {
                            uni.$u.toast(res.data)
                        }
                    })
                    .catch((error) => {
                        console.error('图片上传失败:', error)
                    })
            }
        })
        .catch((error) => {})
}, 1000)

// 上传逻辑
const uploadImgFun = async (list, type) => {
    return new Promise((resolve, reject) => {
        let successList = []
        let files = []

        list.forEach((f) => {
            let d = {
                file: f.url,
                name: 'files',
                uri: f.url,
            }
            files.push(d)
        })

        sendLoading.value = true

        uni.uploadFile({
            url: '/imgTool/sys/file/uploadFile',
            files: files,
            name: 'files',
            formData: {
                params: JSON.stringify({
                    uploadType: 2,
                    sourceType: type,
                    sourceTypeName: type === 3 ? '质量检查-缺陷问题照片' : '质量检查-整改照片',
                }),
            },
            success: (res) => {
                sendLoading.value = false
                res = JSON.parse(res.data)

                if (res.code === 200) {
                    successList = res.data
                    resolve(successList) // 上传成功，返回数据
                } else {
                    uni.$u.toast('上传失败' + res.msg)
                    reject(new Error('上传失败: ' + res.msg))
                }
            },
            fail: (err) => {
                sendLoading.value = false
                reject(new Error('网络错误: ' + err.errMsg))
            },
        })
    })
}

// 获取表单详情
const getFormDetail = async () => {
    const res = await getQualityInspectionDetailsByIdApi({ id: props?.detailsId })

    if (res.code === 200) {
        const {
            dataSource,
            proId, // 工程id
            proName, // 工程名称
            majorId, // 专业id
            majorName, // 专业名称
            gxId, // 工序id
            gxName, // 工序名称
            checkUserName, // 检查人
            vioDate, // 违章时间
            vioPlace, // 违章地点
            vioDesc, //  违章描述
            rectDate, // 整改期限
            rectUserName, //整改人
            rectTime, //整改时间
            rectDesc, //整改说明
            rectPhotoList,
            vioPhotoList,
            rectStatus,
        } = res.data

        let rectPhotoListEdit = []
        let vioPhotoListEdit = []

        if (rectPhotoList.length > 0) {
            rectPhotoListEdit = rectPhotoList.map((e) => {
                return {
                    isEdit: true,
                    url: e.originalFilePath,
                    ...e,
                }
            })
        }
        if (vioPhotoList.length > 0) {
            vioPhotoListEdit = vioPhotoList.map((e) => {
                return {
                    isEdit: true,
                    url: e.originalFilePath,
                    ...e,
                }
            })
        }

        Object.assign(addAndEditModel, {
            proId, // 工程id
            proName, // 工程名称
            majorId, // 专业id
            majorName, // 专业名称
            gxId, // 工序id
            gxName, // 工序名称
            checkUserName, // 检查人
            vioDate, // 违章时间
            vioPlace, // 违章地点
            vioDesc, //  违章描述
            rectDate, // 整改期限
            rectUserName, //整改人
            rectTime, //整改时间
            rectDesc, //整改说明
            vrImgList: vioPhotoListEdit,
            correctionImgList: rectPhotoListEdit,
            rectStatus,
        })

        getProcedureData(majorId)
    }
}

onMounted(async () => {
    projectList.value = await getProjectList()
    projectListAll.value = await getProjectList()
    majorList.push(await getMajorList())
})

// 监听当前页面是新增还是修改
watch(
    () => props.addAndEditFormType,
    (newValue) => {
        if (newValue != 1) {
            getFormDetail()
        }
    },
    {
        deep: true,
        immediate: true,
    },
)
</script>

<style scoped lang="scss">
.u-nav-slot {
    display: flex;
    align-items: center;
    color: #2979ff;
}

::v-deep .u-navbar__content__title {
    font-weight: bold;
}

::v-deep .u-form-item__body__right {
    padding: 0 60rpx;
}

.project-popup {
    width: 90vw;
    height: 80vh;
    padding: 20rpx 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .project-list {
        width: 100%;
        overflow: hidden;
    }
}
</style>