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

<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" :width="860" :close-on-click-modal="false" @closed="$emit('closed', isDel)">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
            <el-row v-if="props.projectId != 1">
                <el-col :md="12" :xs="24">
                    <el-form-item 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="mountedId">
                        <el-select v-model="form.mountedId" filterable placeholder="请选择设备安装点">
                            <el-option v-for="item in filterMounteds" :key="item.id" :label="item.mountedName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :md="12" :xs="24">
                    <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-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="起重量" prop="features.weight">
                        <el-input-number v-model="form.features.weight" :controls="false" placeholder="请输入起重量">
                            <template #suffix>kg</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="载重百分比" prop="features.weightRate">
                        <el-input-number v-model="form.features.weightRate" :precision="2" :controls="false" placeholder="请输入载重百分比">
                            <template #suffix>%</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="高度" prop="features.height">
                        <el-input-number v-model="form.features.height" :precision="1" :controls="false" placeholder="请输入高度">
                            <template #suffix>m</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="力矩百分比" prop="features.powerRate">
                        <el-input-number v-model="form.features.powerRate" :precision="2" :controls="false" placeholder="请输入力矩百分比">
                            <template #suffix>%</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="回转角度" prop="features.rotationAngle">
                        <el-input-number v-model="form.features.rotationAngle" :precision="1" :controls="false" placeholder="请输入回转角度">
                            <template #suffix>°</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="倾角" prop="features.tiltAngle">
                        <el-input-number v-model="form.features.tiltAngle" :precision="2" :controls="false" placeholder="请输入回转角度">
                            <template #suffix>°</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="风力" prop="features.windSpeed">
                        <el-input-number v-model="form.features.windSpeed" :precision="1" :controls="false" placeholder="请输入风力">
                            <template #suffix>级</template>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :xs="24">
                    <el-form-item label="幅度" prop="features.workAngle">
                        <el-input-number v-model="form.features.workAngle" :precision="1" :controls="false" placeholder="请输入幅度">
                            <template #suffix>m</template>
                        </el-input-number>
                    </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 { valueFormatDic } from "@/views/dataMock/tower/main";

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 isDel = ref(false);

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

const form = ref({
    id: null,
    projectId: props.projectId,
    mountedId: null,
    createTime: null,
    features: {
        weight: null,
        weightRate: null,
        height: null,
        powerRate: null,
        rotationAngle: null,
        tiltAngle: null,
        windSpeed: null,
        workAngle: null
    }
});
const rules = reactive({
    projectId: [{ required: true, message: "请选择所属项目" }],
    mountedId: [{ required: true, message: "请选择设备安装点" }],
    createTime: [{ required: true, message: "请选择监测时间" }],
    "features.weight": [{ required: true, message: "请输入起重量" }],
    "features.weightRate": [{ required: true, message: "请输入载重百分比" }],
    "features.height": [{ required: true, message: "请输入高度" }],
    "features.powerRate": [{ required: true, message: "请输入力矩百分比" }],
    "features.rotationAngle": [{ required: true, message: "请输入回转角度" }],
    "features.tiltAngle": [{ required: true, message: "请输入倾角" }],
    "features.windSpeed": [{ required: true, message: "请输入风力" }],
    "features.workAngle": [{ required: true, message: "请输入幅度" }]
})

const mounteds = ref([]);
const filterMounteds = computed(() => form.value.projectId ? XEUtils.filter(mounteds.value, item => item.projectId == form.value.projectId) : []);
const fetchMounted = async () => {
    const res = await API.tower.mounted.get();
    mounteds.value = res || [];
    if (props.projectId == 1) form.value.mountedId = XEUtils.get(XEUtils.find(res, item => item.projectId == 1), "id");
}

const open = () => {
    visible.value = true;
    fetchMounted();
}
const setData = data => {
    open();
    mode.value = "edit";
    XEUtils.objectEach(form.value, (_, key) => {
        if (key == "features") {
            const features = XEUtils.toStringJSON(XEUtils.get(data, key));
            XEUtils.objectEach(valueFormatDic, (item, digits) => XEUtils.arrayEach(item, feaKey => XEUtils.set(features, feaKey, XEUtils.divide(XEUtils.get(features, feaKey), digits))));
            XEUtils.merge(form.value.features, 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");

            const features = XEUtils.clone(form.value.features, true);
            XEUtils.objectEach(valueFormatDic, (item, digits) => XEUtils.arrayEach(item, feaKey => XEUtils.set(features, feaKey, XEUtils.multiply(XEUtils.get(features, feaKey), digits))));
            XEUtils.set(data, "features", XEUtils.toJSONString(features));
            
            isSaving.value = true;
            API.tower.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 lang="scss" scoped>
.el-form {
    padding-right: calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px));

    .el-input-number {width: 100%;}
    .el-input-number :deep(.el-input__inner) {text-align: unset;}
    .el-input-number :deep(.el-input__suffix) {font-size: 12px;}
}
</style>