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="projectName" label="项目名称" required>
            <up-input
                readonly
                border="none"
                v-model="addAndEditModel.projectName"
                :placeholder="props.addAndEditFormType == 3 ? '' : '点击选择项目'"
            >
                <template #suffix v-if="props.addAndEditFormType != 3">
                    <up-icon name="arrow-right" @tap="onSelectProject" />
                </template>
            </up-input>
        </up-form-item>
        <up-form-item prop="major" label="专业">
            <up-input
                border="none"
                readonly
                v-model="addAndEditModel.major"
                :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="procedure" label="工序">
            <up-input
                border="none"
                readonly
                v-model="addAndEditModel.procedure"
                :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="examiner" label="检查人">
            <up-input
                border="none"
                :readonly="props.addAndEditFormType == 3"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入检查人'"
            />
        </up-form-item>
        <up-form-item prop="inspectTime" label="检查日期">
            <up-input
                readonly
                border="none"
                inputAlign="right"
                v-model="addAndEditModel.inspectTime"
                :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="correctionTerm" label="整改期限" required>
            <up-input
                readonly
                border="none"
                inputAlign="right"
                v-model="addAndEditModel.correctionTerm"
                :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="vrLocation" label="违章地点" required>
            <up-input
                border="none"
                v-model="addAndEditModel.vrLocation"
                :readonly="props.addAndEditFormType == 3"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入违章地点'"
            />
        </up-form-item>
        <up-form-item prop="vrDescribe" label="违章描述" required>
            <up-textarea
                autoHeight
                border="none"
                v-model="addAndEditModel.vrDescribe"
                :readonly="props.addAndEditFormType == 3"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入违章描述'"
            />
        </up-form-item>
        <up-form-item
            prop="vrImgList"
            :label="props.addAndEditFormType == 3 ? '违章照片' : '违章照片(最多9张)'"
            required
        >
            <up-upload
                name="1"
                multiple
                @delete="onDeletePicVrImgList"
                @afterRead="onAfterReadVrImgList"
                :fileList="addAndEditModel.vrImgList"
                :maxCount="props.addAndEditFormType == 3 ? 1 : 9"
            />
        </up-form-item>
        <TitleTipModal :TitleTip="`整改信息`" />
        <up-form-item prop="correctionPerson" label="整改人" required>
            <up-input
                border="none"
                :readonly="props.addAndEditFormType == 3"
                v-model="addAndEditModel.correctionPerson"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入整改人'"
            />
        </up-form-item>
        <up-form-item prop="correctionTime" label="整改日期">
            <up-input
                readonly
                border="none"
                inputAlign="right"
                v-model="addAndEditModel.correctionTime"
                :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="correctionDescribe" label="整改说明" required>
            <up-textarea
                autoHeight
                border="none"
                :readonly="props.addAndEditFormType == 3"
                v-model="addAndEditModel.correctionDescribe"
                :placeholder="props.addAndEditFormType == 3 ? '' : '请输入整改说明'"
            />
        </up-form-item>
        <up-form-item
            prop="examiner"
            :label="props.addAndEditFormType == 3 ? '整改照片' : '整改照片(最多9张)'"
        >
            <up-upload
                name="1"
                multiple
                @delete="onDeleteCorrectionImgList"
                @afterRead="onAfterReadCorrectionImgList"
                :deletable="!props.addAndEditFormType == 3"
                :fileList="addAndEditModel.correctionImgList"
                :maxCount="props.addAndEditFormType == 3 ? 1 : 9"
            />
        </up-form-item>

        <up-button type="primary" text="提交" @tap="onSubmitForm" style="width: 100%" />
    </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%">
                    <up-list-item v-for="item in 20" :key="item">
                        <up-cell :title="`xxxxxxxxx工程-${item}`" @tap="onSelectProjectItem(item)">
                            <template #icon>
                                <text style="margin-right: 10rpx">
                                    {{ item }}
                                </text>
                            </template>
                        </up-cell>
                    </up-list-item>
                </up-list>
            </view>
        </view>
    </up-popup>

    <!-- 专业选择器 -->
    <up-picker
        keyName="label"
        :show="majorShow"
        :columns="majorList"
        @confirm="onConfirmMajor"
        @cancel="majorShow = !majorShow"
    />
    <!-- 工序选择器 -->
    <up-picker
        keyName="label"
        :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"
    />

    <!-- loading-page -->
    <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 } from 'vue'
import { debounce } from 'lodash-es' // 引入防抖函数
import TitleTipModal from '@/components/TitleTipModal/index'
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,
    },
})

console.log(props.addAndEditFormType, '表单类型')

// 表单数据源
const addAndEditModel = reactive({
    projectName: '',
    procedure: '',
    major: '',
    examiner: '',
    inspectTime: '',
    correctionTerm: '',
    vrLocation: '',
    vrDescribe: '',
    vrImgList: [],
    correctionPerson: '',
    correctionDescribe: '',
    correctionTime: '',
    correctionImgList: [],
})

// 校验规则
const addAndEditModelRules = ref({
    projectName: [
        {
            type: 'string',
            required: true,
            message: '请选择项目名称',
            trigger: ['blur', 'change'],
        },
    ],
    correctionTerm: [
        {
            type: 'string',
            required: true,
            message: '请选择整改期限',
            trigger: ['blur', 'change'],
        },
    ],
    vrLocation: [
        {
            type: 'string',
            required: true,
            message: '请填写违章地点',
            trigger: ['blur', 'change'],
        },
    ],
    vrDescribe: [
        {
            type: 'string',
            required: true,
            message: '请填写违章描述',
            trigger: ['blur', 'change'],
        },
    ],
    vrImgList: [
        {
            type: 'string',
            required: true,
            message: '请上传违章照片',
            trigger: ['blur', 'change'],
        },
    ],
    correctionPerson: [
        {
            type: 'string',
            required: true,
            message: '请填写整改人',
            trigger: ['blur', 'change'],
        },
    ],
    correctionDescribe: [
        {
            type: 'string',
            required: true,
            message: '请填写整改说明',
            trigger: ['blur', 'change'],
        },
    ],
})
// 项目数据源
const projectList = ref([])
// 专业数据源
const majorList = reactive([
    [
        {
            label: '专业1',
            value: 2021,
        },
        {
            label: '专业2',
            value: 2022,
        },
        {
            label: '专业3',
            value: 2023,
        },
        {
            label: '专业4',
            value: 2024,
        },
    ],
])
// 工序数据源
const procedureList = reactive([
    [
        {
            label: '工序1',
            id: 2021,
        },
        {
            label: '工序2',
            id: 2022,
        },
        {
            label: '工序3',
            id: 2023,
        },
        {
            label: '工序4',
            id: 2024,
        },
    ],
])

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

// 选择项目
const onSelectProject = () => {
    console.log('---选择')

    projectShow.value = true
}
// 搜索
const onSearchInProjectPopup = () => {
    console.log('---搜索', onSearchProjectName.value)
}

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

// 选择项目
const onSelectProjectItem = (item) => {
    addAndEditModel.projectName = 'xxxxxx工程' + item
    projectShow.value = false
}

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

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

// 专业确定
const onConfirmMajor = (item) => {
    console.log('---确定', item.value[0].label)
    addAndEditModel.major = item.value[0].label
    majorShow.value = false
}
// 选择工序
const onSelectProcedure = () => {
    procedureShow.value = true
}

// 工序确定
const onConfirmProcedure = (item) => {
    addAndEditModel.procedure = item.value[0].label
    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.inspectTime = formatDateValue
    }
    if (dateType.value === 2) {
        addAndEditModel.correctionTerm = formatDateValue
    }
    if (dateType.value === 3) {
        addAndEditModel.correctionTime = formatDateValue
    }
    dateShow.value = false
    console.log('---日期确定', formatDateValue)
}

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,
        })
    })
}
// 违章照片删除
const onDeletePicVrImgList = (event) => {
    addAndEditModel.vrImgList.splice(event.index, 1)
}

// 整改照片上传
const onAfterReadCorrectionImgList = (event) => {
    let lists = [].concat(event.file)
    lists.map((item) => {
        addAndEditModel.correctionImgList.push({
            ...item,
        })
    })
}
// 违章照片删除
const onDeleteCorrectionImgList = (event) => {
    addAndEditModel.correctionImgList.splice(event.index, 1)
}

// 提交
const onSubmitForm = debounce(() => {
    console.log('---提交')
    sendLoading.value = true
    addAndEditModelRef.value.validate().then((valid) => {
        if (valid) {
            console.log('校验通过')
            sendLoading.value = false
        }
    })
}, 1000)

// 获取表单详情
const getFormDetail = () => {
    console.log('---获取详情数据')
}
// props.addAndEditFormType 如果为2怎为编辑表单
if (props.addAndEditFormType == 2) {
    // 先获取详情数据并回显
    getFormDetail()
}

// 获取表单详情
</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>