| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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 { |
| | |
| | | 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 { |
| | |
| | | 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(() => { |
| | |
| | | state.title = '新增设备区域'; |
| | | state.facilityAreaForm = { |
| | | region: '', |
| | | regionTypeId: null |
| | | regionTypeId: null, |
| | | regionDepartmentId: null |
| | | }; |
| | | } else { |
| | | state.title = '修改设备区域'; |
| | |
| | | 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 |
| | | }); |
| | | } |
| | | }; |
| | | |
| | |
| | | } |
| | | }); |
| | | }; |
| | | onMounted(() => { |
| | | getDepartmentData(); |
| | | }) |
| | | |
| | | return { |
| | | ...toRefs(state), |