easydo-ops/src/views/dataMock/carwash/components/record/detail.vue

<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" width="860" :close-on-click-modal="false" @closed="$emit('closed')">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
            <el-row>
                <el-col v-if="props.projectId != 1" :md="12" :xs="24">
                    <el-form-item label="所属项目" prop="fpiId">
                        <el-select v-model="form.fpiId" filterable placeholder="请选择所属项目">
                            <el-option v-for="item in $TOOL.data.get('PROJECT')" :key="item.fpiId" :label="item.projectName" :value="item.fpiId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="车牌号" prop="licensePlate">
                        <el-input v-model="form.licensePlate" placeholder="请输入车牌号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="车辆类型" prop="carType">
                        <el-select v-model="form.carType" placeholder="请选择车辆类型">
                            <el-option v-for="(label, key) in carWashDic.carType" :key="key" :label="label" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="车牌颜色" prop="licensePlateColor">
                        <el-select v-model="form.licensePlateColor" placeholder="请选择车牌颜色">
                            <el-option v-for="(label, key) in carWashDic.plateColor.slice(1)" :key="key" :label="label" :value="key + 1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="抓拍时间" prop="captureTime">
                        <el-date-picker v-model="form.captureTime" type="datetime" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择抓拍时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="车辆入场时间">
                        <el-date-picker v-model="form.enterTime" type="datetime" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择车辆入场时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="车辆出场时间">
                        <el-date-picker v-model="form.leaveTime" type="datetime" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择车辆出场时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="识别结果" prop="alarmType">
                        <el-select v-model="form.alarmType" placeholder="请选择识别结果">
                            <el-option v-for="(item, index) in carWashDic.alarmType.slice(1)" :key="index" :label="item" :value="index + 1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="12" :xs="24">
                    <el-form-item label="车身清洗图片" prop="folders[carrinse/attach].entities[0]">
                        <sc-upload v-model="form.folders['carrinse/attach'].entities[0]" :width="140" :height="180" accept="image/jpeg, image/png"></sc-upload>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="后盖密闭图片" prop="folders[carrinse/side].entities[0]">
                        <sc-upload v-model="form.folders['carrinse/side'].entities[0]" :width="140" :height="180" accept="image/jpeg, image/png"></sc-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button :loading="isSaving" type="primary" auto-insert-space @click="submit">保存</el-button>
            <el-button auto-insert-space @click="visible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { carWashDic } from "@/views/dataMock/carwash/main";
import scUpload from "@/components/scUpload/index";

const $emit = defineEmits(["success", "closed"]);
const props = defineProps({
    projectId: { type: Number, default: TOOL.data.get("PROJECT_ID") }
});

const visible = ref(false);
const isSaving = ref(false);

const mode = ref("add");
const titleMap = reactive({
    add: "数据录入",
    edit: "修改"
});

const form = ref({
    id: null,
    fpiId: props.projectId,
    carType: null,
    licensePlate: null,
    licensePlateColor: null,
    captureTime: null,
    enterTime: null,
    leaveTime: null,
    alarmType: null,
    folders: {
        "carrinse/attach": {
            entities: [{}]
        },

        "carrinse/side": {
            entities: [{}]
        }
    }
});
const rules = reactive({
    fpiId: [{ required: true, message: "请选择所属项目" }],
    licensePlate: [{ required: true, message: "请输入车牌号" }],
    carType: [{ required: true, message: "请选择车辆类型" }],
    licensePlateColor: [{ required: true, message: "请选择车牌颜色" }],
    captureTime: [{ required: true, message: "请选择抓拍时间" }],
    alarmType: [{ required: true, message: "请选择识别结果" }],
    "folders[carrinse/attach].entities[0]": [{ required: true, validator: (rule, value, callback) => {
        if (XEUtils.isEmpty(value)) return callback(new Error("请上传车身清洗图片"));
        callback();
    }}],
    "folders[carrinse/side].entities[0]": [{ required: true, validator: (rule, value, callback) => {
        if (XEUtils.isEmpty(value)) return callback(new Error("请上传后盖密闭图片"));
        callback();
    }}]
})

const open = () => visible.value = true;
const setData = data => {
    open();
    mode.value = "edit";
    XEUtils.objectEach(form.value, (_, key) => {
        if (key == "folders") {
            XEUtils.objectEach(form.value.folders, (_, folder_key) => {
                XEUtils.set(form.value, `${key}.${folder_key}.entities`, XEUtils.map(XEUtils.get(data, `${key}.${folder_key}.entities`), ({ id, mineType, name, path }) => ({ id, mineType, name, path })))
            });
        } else XEUtils.set(form.value, key, XEUtils.get(data, key));
    });
}

const formRef = ref();
const submit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            const folders = {}, data = XEUtils.omit(form.value, "folders");
            XEUtils.objectEach(form.value.folders, (item, key) => {
                const newFiles = item.entities.filter(item => !item.id).map(item => item.path);
                if (newFiles.length) {
                    XEUtils.set(folders, key, {
                        entities: newFiles.map(ticket => ({ features: { ticket } }))
                    })
                }
            })
            !XEUtils.isEmpty(folders) && XEUtils.set(data, "folders", folders);

            isSaving.value = true;
            API.car_rinse.record[mode.value](data).then(() => {
                isSaving.value = false;
                ElMessage.success("操作成功");
                visible.value = false;
                $emit("success", mode.value);
            }).catch(() => isSaving.value = false);
        } else {
            return false;
        }
    });
}

defineExpose({
    open,
    setData
})
</script>

<style scoped>
.el-form {
    padding-right: calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px));
}
</style>