| | |
| | | <template> |
| | | <div>设备点检</div> |
| | | </template> |
| | | <div class="main"> |
| | | <div class="main_header"> |
| | | <div class="header_item"> |
| | | <span class="header_label">设备编号:</span> |
| | | <el-input v-model="bigDeviceName" clearable placeholder="请输入设备编号"></el-input> |
| | | </div> |
| | | <div class="header_item"> |
| | | <span class="header_label">点检日期:</span> |
| | | <el-date-picker |
| | | v-model="timeData" |
| | | type="daterange" |
| | | value-format="yyyy-MM-dd" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div class="header_item"> |
| | | <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchSpotCheckList(true)">查询</el-button> |
| | | <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="propInsert()">新增</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="main_content"> |
| | | <el-table |
| | | v-loading="loading" |
| | | :data="spotCheckList" |
| | | height="100%"> |
| | | <el-table-column label="序号" align="center" > |
| | | <template #default="scope"> |
| | | <div> |
| | | <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="bigDeviceName" label="设备名称" align="center" ></el-table-column> |
| | | <el-table-column prop="bigDeviceModel" label="规格型号" align="center" ></el-table-column> |
| | | <el-table-column prop="bigNumber" label="设备编号" align="center" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="bigTypeStr" label="设备类型" align="center" ></el-table-column> |
| | | <el-table-column prop="checkTime" label="点检时间" align="center" ></el-table-column> |
| | | <el-table-column prop="checkTypeName" label="点检类型" align="center" ></el-table-column> |
| | | <el-table-column prop="adminUserName" label="责任人" align="center" ></el-table-column> |
| | | <el-table-column prop="adminUserPhone" label="责任人电话" align="center" ></el-table-column> |
| | | <el-table-column prop="checkContent" show-overflow-tooltip label="点检内容及结果" align="center" ></el-table-column> |
| | | <el-table-column label="操作" align="center" > |
| | | <template #default="{ row }"> |
| | | <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">修改</el-button> |
| | | <el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="main_footer"> |
| | | <el-pagination |
| | | background |
| | | @current-change="changePageNum" |
| | | @size-change="changePageSize" |
| | | :current-page="pageNum" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total"> |
| | | </el-pagination> |
| | | </div> |
| | | <!-- 新增 修改 --> |
| | | <el-dialog |
| | | class="prop_dialog" |
| | | :title="asyncTitle ? '新增点检' : '修改点检信息'" |
| | | :visible.sync="asyncSpot" |
| | | width="35%"> |
| | | <el-form ref="form" :model="formSpot" :rules="rulesSpot" label-width="auto" class="rule_form"> |
| | | <el-form-item label="设备名称:" prop="deviceId"> |
| | | <el-select v-model="formSpot.deviceId" clearable placeholder="请选择设备" @change="selectDevice"> |
| | | <el-option |
| | | v-for="item in deviceData" |
| | | :key="item.bigDeviceId" |
| | | :label="item.bigDeviceName" |
| | | :value="item.bigDeviceId"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="规格型号:" prop="bigDeviceModel"> |
| | | <el-input v-model="formSpot.bigDeviceModel" disabled placeholder="请输入规格型号"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="设备编号:" prop="bigNumber"> |
| | | <el-input v-model="formSpot.bigNumber" disabled placeholder="请输入设备编号"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="设备类型:" prop="bigTypeName"> |
| | | <el-input v-model="formSpot.bigTypeName" disabled placeholder="请输入设备类型"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="开始时间:" prop="checkTime"> |
| | | <el-date-picker |
| | | v-model="formSpot.checkTime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="请选择开始时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="点检类型:" prop="checkType"> |
| | | <el-select v-model="formSpot.checkType" clearable placeholder="请选择点检类型"> |
| | | <el-option |
| | | v-for="item in checkTypeData" |
| | | :key="item.dictId" |
| | | :label="item.dictName" |
| | | :value="item.dictId"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="点检内容及结果:" prop="checkContent"> |
| | | <el-input |
| | | type="textarea" |
| | | v-model="formSpot.checkContent" |
| | | clearable |
| | | placeholder="请输入点检内容及结果"> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="asyncSpot = false">取 消</el-button> |
| | | <el-button class="submit_btn" @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">提 交</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { buttonPinia } from '../../pinia'; |
| | | import { throttle } from '../../plugins/public'; |
| | | export default { |
| | | data() { |
| | | return { |
| | | bigDeviceName: '', |
| | | timeData: '', |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | loading: false, |
| | | spotCheckList: [], |
| | | asyncTitle: true, // true 新增 false 修改 |
| | | asyncSpot: false, |
| | | formSpot: {}, |
| | | rulesSpot: { |
| | | deviceId: [{ |
| | | required: true, |
| | | message: '请选择设备', |
| | | trigger: ['blur', 'change'] |
| | | }] |
| | | }, |
| | | deviceData: [], |
| | | checkTypeData: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.searchSpotCheckList(true); |
| | | }, |
| | | methods: { |
| | | // 获取全部设备信息 |
| | | async getAllDeviceData() { |
| | | const { data } = await this.$api.Device.getAllDeviceData(); |
| | | this.deviceData = data; |
| | | }, |
| | | // 获取点检类型 |
| | | async getChackAllTypes(){ |
| | | const { data } = await this.$api.Dictionary.searchDictionary({ |
| | | pageNum: 1, |
| | | pageSize: 100000000, |
| | | dictType: 'check_type' |
| | | }); |
| | | this.checkTypeData = data.list; |
| | | }, |
| | | // 查询设备点检列表信息 |
| | | searchSpotCheckList(bol) { |
| | | if(bol) { |
| | | this.pageNum = 1; |
| | | } |
| | | this.loading = true; |
| | | this.spotCheckList = []; |
| | | this.$api.Device.searchSpotCheckList({ |
| | | pageNum: this.pageNum, |
| | | pageSize: this.pageSize, |
| | | startTime: this.timeData ? this.timeData[0] : '', |
| | | endTime: this.timeData ? this.timeData[1] : '' |
| | | }).then(res => { |
| | | if(res.success) { |
| | | this.total = res.data.total; |
| | | this.spotCheckList = res.data.list; |
| | | } |
| | | this.loading = false; |
| | | }).catch(() => { |
| | | this.loading = false; |
| | | }) |
| | | }, |
| | | // 打开添加 |
| | | propInsert() { |
| | | this.asyncTitle = true; |
| | | this.asyncSpot = true; |
| | | }, |
| | | // 选择设备获取设备信息 |
| | | selectDevice(data) { |
| | | this.$set(this.formSpot, 'bigDeviceModel', ''); |
| | | this.$set(this.formSpot, 'bigNumber', ''); |
| | | this.$set(this.formSpot, 'bigTypeName', ''); |
| | | if(!data) return; |
| | | this.$api.Device.detailsBigDevice({ |
| | | bigDeviceId: data |
| | | }).then(res => { |
| | | this.$set(this.formSpot, 'bigDeviceModel', res.data.bigDeviceModel); |
| | | this.$set(this.formSpot, 'bigNumber', res.data.bigNumber); |
| | | this.$set(this.formSpot, 'bigTypeName', res.data.bigTypeName); |
| | | }) |
| | | }, |
| | | // 打开修改信息 |
| | | updateProp(row) { |
| | | this.$api.Device.getSpotCheckDetail({ |
| | | id: row.id |
| | | }).then((res) => { |
| | | this.selectDevice(res.data.deviceId); |
| | | this.$set(this.formSpot, 'id', res.data.id); |
| | | this.$set(this.formSpot, 'deviceId', res.data.deviceId); |
| | | this.$set(this.formSpot, 'checkTime', res.data.checkTime); |
| | | this.$set(this.formSpot, 'checkType', res.data.checkType); |
| | | this.$set(this.formSpot, 'checkContent', res.data.checkContent); |
| | | }); |
| | | this.asyncTitle = false; |
| | | this.asyncSpot = true; |
| | | }, |
| | | // 删除设备点检信息 |
| | | deleteInfo(row) { |
| | | this.$confirm("该操作将删除该点检信息,是否继续删除?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | this.$api.Device.deleteSpotCheckInfo({id: row.id}) |
| | | .then(res => { |
| | | if(res.statusMsg === 'ok') { |
| | | this.searchSpotCheckList(true); |
| | | this.$message.success("删除成功!"); |
| | | } else { |
| | | this.$message.warning(res.statusMsg); |
| | | } |
| | | }) |
| | | }) |
| | | .catch(() => { |
| | | this.$message.warning("您已取消"); |
| | | }) |
| | | }, |
| | | // 提交添加信息 |
| | | submitInsertForm: throttle(function() { |
| | | this.$refs.form.validate((valid) => { |
| | | if(valid) { |
| | | const params = {}; |
| | | params.deviceId = this.formSpot.deviceId; |
| | | params.checkTime = this.formSpot.checkTime; |
| | | params.checkType = this.formSpot.checkType; |
| | | params.checkContent = this.formSpot.checkContent; |
| | | params.fileList = []; |
| | | this.$api.Device.insertSpotCheckInfo(params).then(res => { |
| | | if(res.success) { |
| | | this.asyncSpot = false; |
| | | this.searchSpotCheckList(true); |
| | | this.$message.success('添加成功!'); |
| | | } else { |
| | | this.$message.warning(res.statusMsg); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, 3000), |
| | | // 提交添加信息 |
| | | submitUpdateForm: throttle(function() { |
| | | this.$refs.form.validate((valid) => { |
| | | if(valid) { |
| | | const params = {}; |
| | | params.id = this.formSpot.id; |
| | | params.deviceId = this.formSpot.deviceId; |
| | | params.checkTime = this.formSpot.checkTime; |
| | | params.checkType = this.formSpot.checkType; |
| | | params.checkContent = this.formSpot.checkContent; |
| | | params.fileList = []; |
| | | this.$api.Device.updateSpotCheckInfo(params).then(res => { |
| | | if(res.success) { |
| | | this.asyncSpot = false; |
| | | this.searchSpotCheckList(true); |
| | | this.$message.success('修改成功!'); |
| | | } else { |
| | | this.$message.warning(res.statusMsg); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, 3000), |
| | | // 判断按钮权限信息 |
| | | showButton(str) { |
| | | const pinia = buttonPinia(); |
| | | return pinia.$state.buttonInfo.includes(str); |
| | | }, |
| | | // 切换页数 |
| | | changePageNum(page) { |
| | | this.pageNum = page; |
| | | }, |
| | | // 切换每页条数 |
| | | changePageSize(size) { |
| | | this.pageSize = size; |
| | | } |
| | | }, |
| | | watch: { |
| | | asyncSpot(bol) { |
| | | if(bol) { |
| | | this.getAllDeviceData(); |
| | | this.getChackAllTypes(); |
| | | } else { |
| | | this.formSpot = {}; |
| | | this.$refs.form.resetFields(); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import '@/style/layout-main.scss'; |
| | | </style> |