| | |
| | | }); |
| | | }, |
| | | |
| | | // addEquipment: (params: object) => { |
| | | // return request({ |
| | | // url: import.meta.env.VITE_API_URL + '/basic/insert/insertDevice', |
| | | // method: 'post', |
| | | // data: params |
| | | // }); |
| | | // }, |
| | | |
| | | addEquipment: (params: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + '/basic/insert/insertDevice', |
| | |
| | | method: 'get', |
| | | }); |
| | | }, |
| | | |
| | | getAllType: () => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + '/basic/select/listDeviceType', |
| | | method: 'get', |
| | | }); |
| | | }, |
| | | }; |
| | | } |
| | |
| | | }); |
| | | }, |
| | | |
| | | getAllType: () => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + '/basic/select/listSiteType', |
| | | method: 'get', |
| | | }); |
| | | }, |
| | | |
| | | }; |
| | | } |
| | |
| | | // v2 |
| | | getDepartmentList: () => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + `/department/list`, |
| | | method: 'post' |
| | | url: import.meta.env.VITE_API_URL + `/account/department/list`, |
| | | method: 'get' |
| | | }); |
| | | }, |
| | | // v2 |
| | | addDepartment: (data: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + `/department/add`, |
| | | url: import.meta.env.VITE_API_URL + `/account/department/save`, |
| | | method: 'post', |
| | | data: data |
| | | }); |
| | |
| | | // v2 |
| | | modDepartment: (data: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + `/department/mod`, |
| | | url: import.meta.env.VITE_API_URL + `/account/department/update`, |
| | | method: 'post', |
| | | data: data |
| | | }); |
| | |
| | | // v1 |
| | | deleteDepartment: (value?: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + `/department/del`, |
| | | url: import.meta.env.VITE_API_URL + `/account/department/delete`, |
| | | method: 'post', |
| | | data: value |
| | | }); |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="设备类型" prop="deviceTypeId"> |
| | | <el-select v-model="equipmentDialogState.equipmentForm.deviceTypeId" placeholder="设备类型" clearable class="input-length"> |
| | | <el-option v-for="item in equipmentTypeList" :key="item.id" :label="item.deviceType" :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="deviceDesc"> |
| | | <el-input v-model="equipmentDialogState.equipmentForm.deviceDesc" placeholder="设备型号" clearable class="input-length"></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="devicePower"> |
| | | <el-input v-model="equipmentDialogState.equipmentForm.devicePower" placeholder="设备功率" clearable class="input-length"></el-input> |
| | | </el-form-item> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="设备状态" prop="deviceStatus"> |
| | | <el-select v-model="equipmentDialogState.equipmentForm.deviceStatus" placeholder="设备状态" clearable class="input-length"> |
| | | <el-option :key="1" label="完好" :value="1"></el-option> |
| | | <el-option :key="2" label="异常" :value="2"></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="安全防护"> |
| | | <el-input type="textarea" :rows="3" v-model="equipmentDialogState.equipmentForm.safeProtect" placeholder="安全防护" clearable class="input-length"></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="buyTime"> |
| | | <el-date-picker |
| | | v-model="equipmentDialogState.equipmentForm.buyTime" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD 00:00:00" |
| | | type="dateTime" |
| | | placeholder="购入时间" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="校准时间" prop="adjustTime"> |
| | | <el-date-picker |
| | | v-model="equipmentDialogState.equipmentForm.adjustTime" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD 00:00:00" |
| | | type="dateTime" |
| | | placeholder="校准时间" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { reactive, ref } from "vue"; |
| | | import { defineProps, reactive, ref } from "vue"; |
| | | import {useMenuApi} from "/@/api/systemManage/menu"; |
| | | import {ElMessage} from "element-plus"; |
| | | import {equipmentApi} from "/@/api/basic/equipement"; |
| | |
| | | deviceName: '', |
| | | devicePower: '', |
| | | deviceUnit: null, |
| | | specialDevice: null, |
| | | safeProtect: '', |
| | | deviceTypeId: null, |
| | | deviceDesc: '', |
| | | deviceStatus: null, |
| | | buyTime: '', |
| | | adjustTime: '' |
| | | }, |
| | | equipmentFormRules: { |
| | | deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }], |
| | | deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }], |
| | | devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }], |
| | | deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }] |
| | | deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }], |
| | | deviceTypeId: [{ required: true, message: '请填写设备类型ID', trigger: 'blur' }], |
| | | deviceDesc: [{ required: true, message: '请填写设备型号', trigger: 'blur' }], |
| | | deviceStatus: [{ required: true, message: '请选择设备状态', trigger: 'blur' }], |
| | | buyTime: [{ required: true, message: '请选择购入时间', trigger: 'blur' }], |
| | | adjustTime: [{ required: true, message: '请选择校准时间', trigger: 'blur' }] |
| | | }, |
| | | specialDeviceList: [], |
| | | deviceUnitList: [ |
| | |
| | | if(title === '新增'){ |
| | | equipmentDialogState.title = '新增'; |
| | | equipmentDialogState.equipmentForm = { |
| | | id: null, |
| | | deviceCode: '', |
| | | deviceName: '', |
| | | devicePower: '', |
| | | deviceUnit: null, |
| | | specialDevice: null, |
| | | safeProtect: '', |
| | | deviceTypeId: null, |
| | | deviceDesc: '', |
| | | deviceStatus: null, |
| | | buyTime: '', |
| | | adjustTime: '' |
| | | }; |
| | | }else{ |
| | | equipmentDialogState.title = '编辑' |
| | |
| | | deviceName: value.deviceName, |
| | | devicePower: value.devicePower, |
| | | deviceUnit: value.deviceUnit, |
| | | specialDevice: value.specialDevice, |
| | | safeProtect: value.safeProtect, |
| | | deviceTypeId:value.deviceTypeId, |
| | | deviceDesc: value.deviceDesc, |
| | | deviceStatus: value.deviceStatus, |
| | | buyTime: value.buyTime, |
| | | adjustTime: value.adjustTime |
| | | }; |
| | | } |
| | | }; |
| | |
| | | }); |
| | | } |
| | | }else{ |
| | | console.log(equipmentDialogState.equipmentForm,'修改') |
| | | let res = await equipmentApi().modEquipment(equipmentDialogState.equipmentForm) |
| | | if(res.data.code === 100){ |
| | | emit('refresh') |
| | |
| | | |
| | | const emit = defineEmits(['refresh']) |
| | | |
| | | defineProps({ |
| | | equipmentTypeList: Array |
| | | }) |
| | | |
| | | defineExpose({ |
| | | showEquipmentDialog |
| | | }) |
| | |
| | | declare interface EquipmentStateType { |
| | | equipmentData: Array<EquipmentType> |
| | | equipmentTypeList: Array<deviceType> |
| | | searchQuery: { |
| | | pageIndex: number, |
| | | pageSize: number, |
| | |
| | | deviceName: string, |
| | | devicePower: string, |
| | | deviceUnit: number | null, |
| | | specialDevice: number | null, |
| | | safeProtect: string, |
| | | deviceTypeId: number | null, |
| | | deviceDesc: string, |
| | | deviceStatus: number | null, |
| | | buyTime: string, |
| | | adjustTime: string |
| | | } |
| | | |
| | | declare interface Type { |
| | | id: number, |
| | | name: string, |
| | | } |
| | | |
| | | declare interface deviceType { |
| | | id: number, |
| | | deviceType: string, |
| | | } |
| | | declare interface EquipmentDialogType { |
| | | title: string, |
| | | equipmentDialogVisible: boolean, |
| | | equipmentForm: { |
| | | id: number | null, |
| | | id?: number | null, |
| | | deviceCode: string, |
| | | deviceName: string, |
| | | devicePower: string, |
| | | deviceUnit: number | null, |
| | | specialDevice: number | null, |
| | | safeProtect: string, |
| | | deviceTypeId: number | null, |
| | | deviceDesc: string, |
| | | deviceStatus: number | null, |
| | | buyTime: string, |
| | | adjustTime: string |
| | | }, |
| | | equipmentFormRules: { |
| | | |
| | |
| | | <el-table ref="multipleTableRef" :data="equipmentState.equipmentData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }"> |
| | | <el-table-column prop="deviceCode" label="设备编号"/> |
| | | <el-table-column prop="deviceName" label="设备名称" /> |
| | | <el-table-column prop="deviceTypeId" label="设备类型" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <span>{{equipmentState.equipmentTypeList.find(item =>item.id === scope.row.deviceTypeId)?.deviceType}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deviceDesc" label="设备型号" /> |
| | | <el-table-column prop="devicePower" label="设备功率"> |
| | | <template #default="scope"> |
| | | <span>{{scope.row.devicePower}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deviceStatus" label="设备状态"> |
| | | <template #default="scope"> |
| | | <span>{{`${scope.row.devicePower}${equipmentState.deviceUnitList.find(item =>item.id === scope.row.deviceUnit)?.name || ''}`}}</span> |
| | | <span>{{scope.row.deviceStatus == 1?'完好':'异常'}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deviceUnit" label="计量单位" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <span>{{`${equipmentState.deviceUnitList.find(item =>item.id === scope.row.deviceUnit)?.name}`}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="specialDevice" label="是否特殊装备" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <span>{{`${equipmentState.specialDeviceList.find(item =>item.id === scope.row.specialDevice)?.name}`}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="safeProtect" label="安全防护"/> |
| | | <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <equipment-dialog ref="equipmentDialogRef" @refresh="getEquipmentData"></equipment-dialog> |
| | | <equipment-dialog ref="equipmentDialogRef" @refresh="getEquipmentData" :equipmentTypeList="equipmentState.equipmentTypeList"></equipment-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | |
| | | const equipmentState = reactive<EquipmentStateType>({ |
| | | equipmentData: [], |
| | | equipmentTypeList: [], |
| | | searchQuery: { |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | |
| | | {id:3, name: '件'} |
| | | ] |
| | | }) |
| | | |
| | | const getAllType = async ()=>{ |
| | | const res = await equipmentApi().getAllType(); |
| | | if(res.data.code === 100){ |
| | | equipmentState.equipmentTypeList = res.data.data |
| | | } |
| | | } |
| | | |
| | | const getEquipmentData = async () => { |
| | | let res = await equipmentApi().getEquipmentByList(equipmentState.searchQuery); |
| | |
| | | |
| | | onMounted(() => { |
| | | getEquipmentData() |
| | | getAllType() |
| | | }) |
| | | |
| | | </script> |
| | |
| | | <el-form ref="roomFormRef" :rules="roomDialogState.roomFormRules" :model="roomDialogState.roomForm" size="default" label-width="120px"> |
| | | <el-row :gutter="35"> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="场所名称" prop="siteName"> |
| | | <el-form-item label="实验室名称" prop="siteName"> |
| | | <el-input v-model="roomDialogState.roomForm.siteName" placeholder="场所名称" clearable class="input-length"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-input v-model="roomDialogState.roomForm.room" placeholder="实验室所在房间" clearable class="input-length"></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="siteLiabilityPersonId"> |
| | | <el-select v-model="roomDialogState.roomForm.siteLiabilityPersonId" placeholder="场所责任人" clearable class="input-length"> |
| | | <el-option v-for="item in memberList" :key="item.id" :label="item.personName" :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="safeLiabilityPersonId"> |
| | | <el-select v-model="roomDialogState.roomForm.safeLiabilityPersonId" placeholder="场所安全员" clearable class="input-length"> |
| | | <el-option v-for="item in memberList" :key="item.id" :label="item.personName" :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="fireFacilities"> |
| | | <el-select v-model="roomDialogState.roomForm.fireFacilities" placeholder="有无消防设施" clearable class="input-length"> |
| | | <el-option :key="1" label="有" :value="1"></el-option> |
| | | <el-option :key="2" label="无" :value="2"></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="partitionStatus"> |
| | | <el-select v-model="roomDialogState.roomForm.partitionStatus" placeholder="有无隔断" clearable class="input-length"> |
| | | <el-option :key="1" label="有" :value="1"></el-option> |
| | | <el-option :key="2" label="无" :value="2"></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="siteTypeId"> |
| | | <el-select v-model="roomDialogState.roomForm.siteTypeId" placeholder="场所性质" clearable class="input-length"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.siteType" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { reactive, ref } from "vue"; |
| | | import { reactive, ref, defineProps} from "vue"; |
| | | import {ElMessage} from "element-plus"; |
| | | import {roomApi} from "/@/api/basic/room"; |
| | | |
| | |
| | | siteName: '', |
| | | floor: '', |
| | | room: '', |
| | | siteLiabilityPersonId: null, |
| | | safeLiabilityPersonId: null, |
| | | fireFacilities: null, |
| | | partitionStatus: null, |
| | | siteTypeId: null |
| | | }, |
| | | roomFormRules: { |
| | | siteName: [{ required: true, message: '请填写实验室名称', trigger: 'blur' }], |
| | | floor: [{ required: true, message: '请填写楼名称', trigger: 'blur' }], |
| | | room: [{ required: true, message: '请填写房间', trigger: 'blur' }], |
| | | siteLiabilityPersonId: [{ required: true, message: '请选择场所责任人', trigger: 'blur' }], |
| | | safeLiabilityPersonId: [{ required: true, message: '请选择场所安全员', trigger: 'blur' }], |
| | | fireFacilities: [{ required: true, message: '请选择有无消防设施', trigger: 'blur' }], |
| | | partitionStatus: [{ required: true, message: '请选择有无隔断', trigger: 'blur' }], |
| | | siteTypeId: [{ required: true, message: '请选择场所性质', trigger: 'blur' }] |
| | | }, |
| | | specialDeviceList: [], |
| | | deviceUnitList: [ |
| | |
| | | siteName: '', |
| | | floor: '', |
| | | room: '', |
| | | siteLiabilityPersonId: null, |
| | | safeLiabilityPersonId: null, |
| | | fireFacilities: null, |
| | | partitionStatus: null, |
| | | siteTypeId: null |
| | | }; |
| | | }else{ |
| | | roomDialogState.title = '编辑' |
| | |
| | | siteName: value.siteName, |
| | | floor: value.floor, |
| | | room: value.room, |
| | | siteLiabilityPersonId: value.siteLiabilityPersonId, |
| | | safeLiabilityPersonId: value.safeLiabilityPersonId, |
| | | fireFacilities: value.fireFacilities, |
| | | partitionStatus: value.partitionStatus, |
| | | siteTypeId: value.siteTypeId |
| | | }; |
| | | } |
| | | }; |
| | |
| | | |
| | | const emit = defineEmits(['refresh']) |
| | | |
| | | defineProps({ |
| | | memberList: Array, |
| | | typeList: Array |
| | | }) |
| | | |
| | | defineExpose({ |
| | | showroomDialog |
| | | }) |
| | |
| | | declare interface RoomStateType { |
| | | roomData: Array<RoomType> |
| | | memberList: Array<any> |
| | | typeList: Array<any> |
| | | searchQuery: { |
| | | pageIndex: number, |
| | | pageSize: number, |
| | |
| | | siteName: string, |
| | | floor: string, |
| | | room: string, |
| | | siteLiabilityPersonId: number | null, |
| | | safeLiabilityPersonId: number | null, |
| | | fireFacilities: number | null, |
| | | partitionStatus: number | null, |
| | | siteTypeId: number | null |
| | | } |
| | | |
| | | declare interface Type { |
| | |
| | | siteName: string, |
| | | floor: string, |
| | | room: string, |
| | | siteLiabilityPersonId: number | null, |
| | | safeLiabilityPersonId: number | null, |
| | | fireFacilities: number | null, |
| | | partitionStatus: number | null, |
| | | siteTypeId: number | null |
| | | }, |
| | | roomFormRules: { |
| | | |
| | |
| | | <el-table-column prop="siteName" label="场所名称"/> |
| | | <el-table-column prop="floor" label="实验室所在楼" /> |
| | | <el-table-column prop="room" label="实验室所在房间"/> |
| | | <el-table-column prop="siteLiabilityPerson" label="场所责任人"/> |
| | | <el-table-column prop="safeLiabilityPerson" label="场所安全员"/> |
| | | <el-table-column prop="fireFacilities" label="有无消防设施"> |
| | | <template #default="scope"> |
| | | <span>{{scope.row.fireFacilities == 1?'有':'无'}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="partitionStatus" label="有无隔断"> |
| | | <template #default="scope"> |
| | | <span>{{scope.row.partitionStatus == 1?'有':'无'}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="siteType" label="场所性质"/> |
| | | <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <room-dialog ref="roomDialogRef" @refresh="getRoomData"></room-dialog> |
| | | <room-dialog ref="roomDialogRef" @refresh="getRoomData" :memberList="roomState.memberList" :typeList="roomState.typeList"></room-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import {defineAsyncComponent, onMounted, reactive, ref} from "vue"; |
| | | import {roomApi} from "/@/api/basic/room"; |
| | | import {personApi} from "/@/api/basic/person"; |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import { Edit, View, Plus, Delete } from '@element-plus/icons-vue'; |
| | | import {equipmentApi} from "/@/api/basic/equipement"; |
| | | |
| | | const RoomDialog = defineAsyncComponent(() => import('./components/roomDialog.vue')); |
| | | |
| | |
| | | |
| | | const roomState = reactive<RoomStateType>({ |
| | | roomData: [], |
| | | memberList: [], |
| | | typeList: [], |
| | | searchQuery: { |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | |
| | | {id:3, name: '件'} |
| | | ] |
| | | }) |
| | | |
| | | const getAllMember = async ()=>{ |
| | | const res = await personApi().getAllPerson(); |
| | | if(res.data.code === 100){ |
| | | roomState.memberList = res.data.data |
| | | } |
| | | } |
| | | |
| | | const getAllType = async ()=>{ |
| | | const res = await roomApi().getAllType(); |
| | | if(res.data.code === 100){ |
| | | roomState.typeList = res.data.data |
| | | } |
| | | } |
| | | |
| | | const getRoomData = async () => { |
| | | let res = await roomApi().getRoomByList(roomState.searchQuery); |
| | |
| | | |
| | | onMounted(() => { |
| | | getRoomData() |
| | | getAllMember() |
| | | getAllType() |
| | | }) |
| | | |
| | | </script> |
| | |
| | | <el-form :model="departmentForm" size="default" label-width="90px"> |
| | | <el-row :gutter="35"> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="部门等级"> |
| | | <el-select v-model="departmentForm.depLevel" placeholder="请输入部门等级" class="input-add" clearable> |
| | | <el-option |
| | | v-for="item in depLevelList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :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="上级部门"> |
| | | <el-cascader :options="deptData" class="input-add" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable v-model="departmentForm.parentDepId"> </el-cascader> |
| | | <el-input v-model="parentName" class="input-add" disabled clearable/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="部门描述"> |
| | | <el-input v-model="departmentForm.depInfo" class="input-add" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input> |
| | | <el-input v-model="departmentForm.info" class="input-add" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | parentId: string; |
| | | id: number; |
| | | } |
| | | interface DeptSate { |
| | | interface DeptState { |
| | | title: string; |
| | | parentName: string |
| | | isShowDialog: boolean; |
| | | departmentForm: { |
| | | depName: string; |
| | | depInfo: string; |
| | | parentDepId: string; |
| | | depLevel:null | number |
| | | info: string; |
| | | parentId?: null|number |
| | | id?: null|number |
| | | }; |
| | | deptData: Array<TableDataRow>; |
| | | depLevelList: Array<Type>; |
| | |
| | | export default defineComponent({ |
| | | name: 'systemAddDept', |
| | | setup(prop, context) { |
| | | const state = reactive<DeptSate>({ |
| | | const state = reactive<DeptState>({ |
| | | title: '', |
| | | parentName: '', |
| | | isShowDialog: false, |
| | | departmentForm: { |
| | | depName: '', |
| | | parentDepId: '', |
| | | depInfo: '', |
| | | depLevel:null, |
| | | parentId: null, |
| | | info: '', |
| | | id: null |
| | | }, |
| | | deptData: [], // 部门数据 |
| | | depLevelList: [ |
| | |
| | | ] // 部门数据 |
| | | }); |
| | | |
| | | const findParentById=(tree:Array<any>,id:number|null,depName:string)=>{ |
| | | const parent = tree.find(i=>i.id == id) |
| | | if(parent){ |
| | | return parent[depName] |
| | | } |
| | | for(const item of tree){ |
| | | if(item.children){ |
| | | const result = findParentById(item.children,id,depName) |
| | | if(result){ |
| | | return result |
| | | } |
| | | } |
| | | } |
| | | return null |
| | | } |
| | | |
| | | // 打开弹窗 |
| | | const openDialog = (type: string, value: any, departmentList: []) => { |
| | | state.isShowDialog = true; |
| | | state.departmentForm = JSON.parse(JSON.stringify(value)) |
| | | state.parentName = value.depName |
| | | state.deptData = JSON.parse(JSON.stringify(departmentList)); |
| | | if (type === '新增') { |
| | | state.title = '新增部门'; |
| | | state.departmentForm = { |
| | | depName: '', |
| | | parentDepId: '', |
| | | depLevel:null, |
| | | depInfo: '' |
| | | parentId: value.id, |
| | | info: '' |
| | | }; |
| | | } else { |
| | | state.parentName = findParentById(departmentList,value.parentId,'depName') |
| | | state.title = '修改部门'; |
| | | state.departmentForm = JSON.parse(JSON.stringify(value)); |
| | | state.departmentForm = { |
| | | depName: value.depName, |
| | | id: value.id, |
| | | info: value.info |
| | | } |
| | | } |
| | | }; |
| | | // 关闭弹窗 |
| | |
| | | const onSubmit = async () => { |
| | | if (state.title === '新增部门') { |
| | | let res = await departmentApi().addDepartment(state.departmentForm); |
| | | if (res.data.code === '200') { |
| | | if (res.data.code === 100) { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '部门新增成功', |
| | |
| | | } |
| | | } else { |
| | | let res = await departmentApi().modDepartment(state.departmentForm); |
| | | if (res.data.code === '200') { |
| | | if (res.data.code === 100) { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '部门修改成功', |
| | |
| | | initTableData(); |
| | | }); |
| | | return { |
| | | findParentById, |
| | | openDialog, |
| | | closeDialog, |
| | | onCancel, |
| | |
| | | <el-card shadow="hover"> |
| | | <div class="system-dept-search mb15"> |
| | | <!-- <el-input size="default" placeholder="请输入部门名称" style="max-width: 180px"> </el-input>--> |
| | | <el-button size="default" type="primary" class="ml10"> |
| | | <el-icon> |
| | | <ele-Search /> |
| | | </el-icon> |
| | | 查询 |
| | | </el-button> |
| | | <!-- <el-button size="default" type="primary" class="ml10">--> |
| | | <!-- <el-icon>--> |
| | | <!-- <ele-Search />--> |
| | | <!-- </el-icon>--> |
| | | <!-- 查询--> |
| | | <!-- </el-button>--> |
| | | <el-button size="default" type="success" class="ml10" @click="onOpenDeptDialog('新增', '')"> |
| | | <el-icon> |
| | | <ele-FolderAdd /> |
| | |
| | | 新增部门 |
| | | </el-button> |
| | | </div> |
| | | <el-table :data="tableData.data" style="width: 100%" row-key="depId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
| | | <el-table :data="tableData.data" style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
| | | <el-table-column prop="depName" label="部门名称" show-overflow-tooltip> </el-table-column> |
| | | <el-table-column prop="depInfo" label="部门描述" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="info" label="部门描述" show-overflow-tooltip></el-table-column> |
| | | <el-table-column label="操作" show-overflow-tooltip width="140"> |
| | | <template #default="scope"> |
| | | <el-button size="small" text type="primary" @click="onOpenDeptDialog('新增', '')">新增</el-button> |
| | | <el-button size="small" text type="primary" @click="onOpenDeptDialog('新增', scope.row)">新增</el-button> |
| | | <el-button size="small" text type="primary" @click="onOpenDeptDialog('修改', scope.row)">修改</el-button> |
| | | <el-button size="small" style="color: red" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button> |
| | | </template> |
| | |
| | | parentId: number; |
| | | info: string; |
| | | depId: number; |
| | | hasChildren?: boolean |
| | | children?: TableDataRow[]; |
| | | } |
| | | interface TableDataState { |
| | |
| | | }); |
| | | // 初始化表格数据 |
| | | const initTableData = async () => { |
| | | let res = await departmentApi().getDepartmentList(); |
| | | if (res.data.code === '200') { |
| | | let res = await departmentApi().getDepartmentList() |
| | | if (res.data.code === 100) { |
| | | state.tableData.data = res.data.data; |
| | | state.tableData.total = state.tableData.data.length; |
| | | } else { |
| | |
| | | }; |
| | | // 删除当前行 |
| | | const onTabelRowDel = (row: TableDataRow) => { |
| | | ElMessageBox.confirm(`此操作将永久删除部门:${row.depId}, 是否继续?`, '提示', { |
| | | ElMessageBox.confirm(`此操作将永久删除部门:${row.depName}, 是否继续?`, '提示', { |
| | | confirmButtonText: '删除', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(async () => { |
| | | let res = await departmentApi().deleteDepartment({ depId: row.depId }); |
| | | if (res.data.code === '200') { |
| | | let res = await departmentApi().deleteDepartment({ id: row.id }); |
| | | if (res.data.code === 100) { |
| | | ElMessage({ |
| | | type: 'success', |
| | | duration: 2000, |
| | |
| | | <el-card shadow="hover"> |
| | | <div class="system-user-search mb15"> |
| | | <!-- <el-input size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>--> |
| | | <el-button size="default" type="primary" class="ml10" @click="handleSearch"> |
| | | <el-icon> |
| | | <ele-Search /> |
| | | </el-icon> |
| | | 查询 |
| | | </el-button> |
| | | <!-- <el-button size="default" type="primary" class="ml10" @click="handleSearch">--> |
| | | <!-- <el-icon>--> |
| | | <!-- <ele-Search />--> |
| | | <!-- </el-icon>--> |
| | | <!-- 查询--> |
| | | <!-- </el-button>--> |
| | | <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')"> |
| | | <el-icon> |
| | | <ele-FolderAdd /> |
| | |
| | | <el-card shadow="hover"> |
| | | <div class="system-user-search mb15"> |
| | | <!-- <el-input size="default" v-model.trim="userTableData.listQuery.roleId" placeholder="请输入用户名" style="max-width: 180px"> </el-input>--> |
| | | <el-button size="default" type="primary" class="ml10" @click="initUserTableData"> |
| | | <el-icon> |
| | | <ele-Search /> |
| | | </el-icon> |
| | | 查询 |
| | | </el-button> |
| | | <!-- <el-button size="default" type="primary" class="ml10" @click="initUserTableData">--> |
| | | <!-- <el-icon>--> |
| | | <!-- <ele-Search />--> |
| | | <!-- </el-icon>--> |
| | | <!-- 查询--> |
| | | <!-- </el-button>--> |
| | | <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增', '')"> |
| | | <el-icon> |
| | | <ele-FolderAdd /> |