1.能源管理-开发、联调

gaoluyang

昨天 9ad80a31337e3f22b8e66344b13afacdb52c028b

1.能源管理-开发、联调

 src/views/energyManagement/energyPower/components/formDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,194 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="设备能耗"
        width="70%"
        @close="closeDia"
    >
            <el-form
                :model="form"
                label-width="140px"
                label-position="top"
                :rules="rules"
                ref="formRef"
            >
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="设备：" prop="code">
                            <el-select
                                v-model="form.code"
                                placeholder="请选择"
                                clearable
                                @change="setName"
                                :disabled="operationType !== 'add'"
                            >
                                <el-option
                                    v-for="item in codeList"
                                    :key="item.deviceModel"
                                    :label="item.deviceName"
                                    :value="item.deviceModel"
                                >
                                    {{item.deviceName + '--' + item.deviceModel}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="每日限制电量：" prop="everyNum">
                            <el-input
                                v-model="form.everyNum"
                                placeholder="请输入"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="额定功率：" prop="powerRating">
                            <el-input
                                v-model="form.powerRating"
                                placeholder="请输入"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实际功率：" prop="powerActual">
                            <el-input
                                v-model="form.powerActual"
                                placeholder="请输入"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="运行时间：" prop="runDate">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.runDate"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="当日用电量：" prop="dayNum">
                            <el-input
                                v-model="form.dayNum"
                                placeholder="请输入"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确认</el-button>
                    <el-button @click="closeDia">取消</el-button>
                </div>
            </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from "vue";
import useUserStore from "@/store/modules/user.js";
import {deviceList, equipmentEnergyAdd, equipmentEnergyUpdate} from "@/api/energyManagement/index.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const dialogFormVisible = ref(false);
const operationType = ref('')
const userStore = useUserStore();

const data = reactive({
    form: {
        name: "",
        code: "",
        everyNum: "",
        powerRating: "",
        powerActual: "",
        runDate: "",
        dayNum: "",
    },
    rules: {
        code: [{ required: true, message: "请选择", trigger: "change" }],
        runDate: [{ required: true, message: "请选择", trigger: "change" }],
        everyNum: [{ required: true, message: "请输入", trigger: "blur" }],
        powerRating: [{ required: true, message: "请输入", trigger: "blur" }],
        powerActual: [{ required: true, message: "请输入", trigger: "blur" }],
        dayNum: [{ required: true, message: "请输入", trigger: "blur" }],
    },
})
const { form, rules } = toRefs(data);
const codeList = ref([])

// æ‰“开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
    // form.value.maintainer = userStore.nickName;
    // form.value.maintenanceTime = getCurrentDate();
    form.value = {}
    proxy.resetForm("formRef");
    deviceList().then((res) => {
        codeList.value = res.data;
    });
    if (type === "edit") {
        form.value = {...row}
    }
}
const setName = (code) => {
    const index = codeList.value.findIndex(item => item.deviceModel === code);
    if (index > -1) {
        console.log(codeList)
        form.value.name = codeList.value[index].deviceName;
    }
}
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (operationType.value === "add") {
                equipmentEnergyAdd(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功")
                    closeDia()
                })
            } else {
                equipmentEnergyUpdate(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功")
                    closeDia()
                })
            }
        }
    })
}
// å…³é—­å¼¹æ¡†
const closeDia = () => {
    proxy.resetForm("formRef");
  dialogFormVisible.value = false;
  emit('close')
};
// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
}
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>