easydo-ops/src/views/system/milestone/components/record/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-row>
                <el-col :md="12" :xs="24">
                    <el-form-item v-if="props.projectId != 1" label="所属项目" prop="projectId">
                        <el-select v-model="form.projectId" filterable placeholder="请选择所属项目" @change="form.mountedId = null">
                            <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="parentId">
                        <el-tree-select v-model="form.parentId" v-bind="props.treeSelectProps"></el-tree-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="节点序号" prop="nodeSeq">
                        <el-input-number v-model="form.nodeSeq" :min="0" :controls="false" placeholder="请输入节点序号"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="节点名称" prop="nodeName">
                        <el-input v-model="form.nodeName" placeholder="请输入节点名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="计划开始时间">
                        <el-date-picker v-model="form.planStartTime" :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.planFinishTime" :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.createTime" :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.createTime" :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="nodeStatus">
                        <el-select v-model="form.nodeStatus" filterable placeholder="请选择节点状态">
                            <el-option v-for="(label, key) in nodeStatusDic" :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="描述内容">
                        <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入描述内容"></el-input>
                    </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 { nodeStatusDic } from "@/views/system/milestone/main";

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

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

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

const form = ref({
    id: null,
    projectId: props.projectId,
    parentId: 0,
    nodeName: null,
    nodeType: null,
    nodeSeq: null,
    planStartTime: null,
    planFinishTime: null,
    actualStartTime: null,
    actualFinishTime: null,
    nodeStatus: null,
    remark: null
});
const rules = reactive({
    projectId: [{ required: true, message: "请选择所属项目" }],
    mountedId: [{ required: true, message: "请选择设备安装点" }],
    createTime: [{ required: true, message: "请选择抓拍时间" }],
    recordType: [{ required: true, message: "请选择识别结果" }],
})

const open = () => visible.value = true;

const setData = data => {
    open();
    mode.value = "edit";
    XEUtils.objectEach(XEUtils.omit(form.value, "fileData"), (_, key) => {
        // if (key == "features") {
        //     const features = XEUtils.toStringJSON(XEUtils.get(data, key, "{}"));
        //     const path = XEUtils.get(features, "bigImage.image", "");
            
        //     path && XEUtils.set(form.value, "fileData", { path });
        //     XEUtils.set(form.value, key, features);
        // } else XEUtils.set(form.value, key, XEUtils.get(data, key));
    });
}

const formRef = ref();
const submit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            // const data = XEUtils.omit(form.value, "features", "fileData");
            // const features = XEUtils.clone(form.value.features);
            // XEUtils.set(features, "bigImage.image", form.value.fileData.path);
            // XEUtils.set(data, "features", XEUtils.toJSONString(features));

            // isSaving.value = true;
            // API.aihazard.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>