马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/views/intellectInspect/inspectBasic/facility/components/facilityAreaDialog.vue
@@ -5,25 +5,19 @@
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="设备区域名称" prop="region">
                            <el-input
                                class="input-length"
                                v-model.trim="facilityAreaForm.region"
                                placeholder="请输入设备区域名称"
                                clearable
                            ></el-input>
                            <el-input class="input-add" v-model.trim="facilityAreaForm.region" placeholder="请输入设备区域名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="设备区域类型" prop="regionTypeId">
                            <el-select
                                class="input-length"
                                v-model="facilityAreaForm.regionTypeId"
                                placeholder="请选择设备区域类型"
                                clearable
                                filterable
                            >
                            <el-select class="input-add" v-model="facilityAreaForm.regionTypeId" placeholder="请选择设备区域类型" clearable filterable>
                                <el-option v-for="item in facilityAreaTypeList" :key="item.id" :label="item.regionType" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="所属部门" prop="regionDepartmentId">
                            <el-cascader :options="departmentData" filterable :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择所属部门" clearable class="input-add" v-model="facilityAreaForm.regionDepartmentId"> </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
@@ -31,7 +25,7 @@
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowFacilityAreaDialog = !isShowFacilityAreaDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitFacilityArea" v-throttle size="default">确 实</el-button>
                    <el-button type="primary" @click="submitFacilityArea" v-throttle size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
@@ -39,14 +33,18 @@
</template>
<script lang="ts">
import {departmentApi} from "/@/api/systemManage/department";
interface stateType {
    isShowFacilityAreaDialog: Boolean;
    facilityAreaForm: {
        region: string;
        regionTypeId: number | null;
        regionDepartmentId: number | null;
    };
    title: string;
    facilityAreaTypeList: Array<facilityAreaTypeState>;
    departmentData: [];
    facilityAreaFormRules: {};
}
interface facilityAreaTypeState {
@@ -54,7 +52,7 @@
    id: number;
}
import { reactive, toRefs, ref } from 'vue';
import {reactive, toRefs, ref, onMounted} from 'vue';
import { facilityAreaApi } from '/@/api/intellectInspectSystem/facilityAreaManage';
import { ElMessage } from 'element-plus';
export default {
@@ -64,23 +62,22 @@
        const state = reactive<stateType>({
            title: '',
            facilityAreaTypeList: [],
            departmentData: [],
            isShowFacilityAreaDialog: false,
            facilityAreaForm: {
                region: '',
                regionTypeId: null
                regionTypeId: null,
                regionDepartmentId: null
            },
            facilityAreaFormRules: {
                region: [{ required: true, message: '请填写设备区域名称', trigger: 'blur' }],
                regionTypeId: [{ required: true, message: '请选择设备区域类型', trigger: 'change' }]
                regionTypeId: [{ required: true, message: '请选择设备区域类型', trigger: 'change' }],
                regionDepartmentId: [{ required: true, message: '请选择所属部门', trigger: 'change' }]
            }
        });
        //打开模态框
        const openFacilityAreaDialog = (
            type: string,
            value: { id: number; region: string; regionTypeId: number },
            facilityAreaTypeList: Array<facilityAreaTypeState>
        ) => {
        const openFacilityAreaDialog = (type: string, value: { id: number; region: string; regionTypeId: number }, facilityAreaTypeList: Array<facilityAreaTypeState>) => {
            state.isShowFacilityAreaDialog = true;
            state.facilityAreaTypeList = facilityAreaTypeList.filter((item) => item.regionType !== '所有类型');
            setTimeout(() => {
@@ -90,7 +87,8 @@
                state.title = '新增设备区域';
                state.facilityAreaForm = {
                    region: '',
                    regionTypeId: null
                    regionTypeId: null,
                    regionDepartmentId: null
                };
            } else {
                state.title = '修改设备区域';
@@ -100,9 +98,23 @@
                        if (res.data.code === '200') {
                            state.facilityAreaForm = JSON.parse(JSON.stringify(res.data.data));
                        } else {
                        }
                    })
                    .catch((error) => {});
                    }
                })
                .catch((error) => {
                });
            }
        };
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentData = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
@@ -151,6 +163,9 @@
                }
            });
        };
        onMounted(() => {
            getDepartmentData();
        })
        return {
            ...toRefs(state),