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

<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" width="480" :close-on-click-modal="false" @closed="$emit('closed')">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
            <el-form-item label="车牌号" prop="plateNumber">
                <el-input v-model="form.plateNumber" placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型" prop="vehicleType">
                <el-select v-model="form.vehicleType" placeholder="请选择车辆类型">
                    <el-option v-for="(label, key) in carWashDic.carType" :key="key" :label="label" :value="key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车辆颜色" prop="vehicleColor">
                <el-select v-model="form.vehicleColor" placeholder="请选择车辆颜色">
                    <el-option v-for="(label, key) in carWashDic.carColor" :key="key" :label="label" :value="key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="使用状态" prop="isSupervise">
                <el-select v-model="form.isSupervise" placeholder="请选择使用状态">
                    <el-option v-for="(item, index) in carWashDic.isSupervise" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
                <el-date-picker v-model="form.createTime" type="datetime" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间"></el-date-picker>
            </el-form-item>
        </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 moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { carWashDic } from "@/views/dataMock/carwash/main";

const $emit = defineEmits(["success", "closed"]);
const visible = ref(false);
const isSaving = ref(false);

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

const form = ref({
    id: null,
    projectId: TOOL.data.get("PROJECT_ID"),
    plateNumber: null,
    vehicleType: null,
    vehicleColor: null,
    isSupervise: null,
    createTime: moment().format("YYYY-MM-DD HH:mm:ss")
});
const rules = reactive({
    plateNumber: [{ required: true, message: "请输入车牌号" }],
    vehicleType: [{ required: true, message: "请选择车辆类型" }],
    vehicleColor: [{ required: true, message: "请选择车辆颜色" }],
    isSupervise: [{ required: true, message: "请选择使用状态" }],
    createTime: [{ required: true, message: "请选择创建时间" }]
})

const open = () => visible.value = true;
const setData = data => {
    open();
    mode.value = "edit";
    XEUtils.objectEach(form.value, (_, key) => XEUtils.set(form.value, key, XEUtils.get(data, key)));
}

const formRef = ref();
const submit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            isSaving.value = true;
            API.car_rinse.carInfo[mode.value](form.value).then(res => {
                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>