From ede67dc74f5ec5e491b102b1835d9cb5315dc6d5 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期一, 01 八月 2022 10:48:15 +0800 Subject: [PATCH] 双重预防 --- src/views/IntelligentXjSys/basicDataManagement/facilityArea/index.vue | 718 +++++++++++++++++++++++++++++------------------------------ 1 files changed, 355 insertions(+), 363 deletions(-) diff --git a/src/views/IntelligentXjSys/basicDataManagement/facilityArea/index.vue b/src/views/IntelligentXjSys/basicDataManagement/facilityArea/index.vue index 5c490e7..e8629be 100644 --- a/src/views/IntelligentXjSys/basicDataManagement/facilityArea/index.vue +++ b/src/views/IntelligentXjSys/basicDataManagement/facilityArea/index.vue @@ -1,375 +1,367 @@ <template> - <div class="home-container"> - <el-scrollbar height="100%"> - <el-row class="homeCard"> - <el-col :span="12"> - <div class="grid-content topInfo"> - <el-input v-model="searchName" placeholder="设施区域名称"></el-input> - <el-select v-model="searchPlace" placeholder="设施区域类型"> - <el-option label="设备" value="设备" /> - <el-option label="区域" value="区域" /> - </el-select> - <el-button type="primary">查询</el-button> - <el-button plain>重置</el-button> - </div> - </el-col> - </el-row> - <div class="homeCard"> - <div class="main-card"> - <el-row class="cardTop"> - <el-col :span="12" class="mainCardBtn"> - <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> -<!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> - <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> - </el-col> - <el-button type="primary" :icon="Refresh" size="default"/> - </el-row> - <el-table - ref="multipleTableRef" - :data="tableData" - style="width: 100%" - :header-cell-style="{background: '#fafafa'}" - @selection-change="handleSelectionChange" - > - <el-table-column type="selection" width="55" /> - <el-table-column type="index" width="80" label="序号"/> - <el-table-column property="name" label="设施区域名称"/> - <el-table-column property="type" label="设施区域类型"/> - <el-table-column property="rfid" label="关联RFID"/> - <el-table-column property="creater" label="创建人"/> - <el-table-column property="createTime" label="创建时间" sortable/> - <el-table-column property="updater" label="更新人"/> - <el-table-column property="updateTime" label="更新时间" sortable/> - <el-table-column fixed="right" label="操作" align="center" width="250"> - <template #default="scope"> - <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> - <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> - <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> - </template> - </el-table-column> - </el-table> - </div> - <div class="pageBtn"> - <el-pagination - v-model:currentPage="currentPage" - v-model:page-size="pageSize" - :page-sizes="[10, 15]" - small=false - background - layout="total, sizes, prev, pager, next, jumper" - :total="100" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - </div> - </el-scrollbar> - <el-dialog v-model="dialogDetails" title="设施区域"> - <el-form :model="details" label-width="120px"> - <el-form-item label="设施区域名称"> - <el-input v-model="details.name" readonly/> - </el-form-item> - <el-form-item label="设施区域类型"> - <el-input v-model="details.type" readonly/> - </el-form-item> - <el-form-item label="关联RFID"> - <el-input v-model="details.rfid" type="textarea" readonly/> - </el-form-item> - <el-form-item label="创建人"> - <el-input v-model="details.creater" readonly/> - </el-form-item> - <el-form-item label="创建时间"> - <el-input v-model="details.createTime" readonly/> - </el-form-item> - <el-form-item label="更新人"> - <el-input v-model="details.updater" readonly/> - </el-form-item> - <el-form-item label="更新时间"> - <el-input v-model="details.updateTime" readonly/> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="dialogDetails = false" size="default" v-throttle>确认</el-button> - </el-form-item> - </el-form> - </el-dialog> - <el-dialog v-model="dialogAddRecord" title="设施区域编辑" @close="closeAdd"> - <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> - <el-form-item label="设施区域名称" prop="name"> - <el-input - v-model="addRecord.name" - > - </el-input> - </el-form-item> - <el-form-item label="设施区域类型" prop="type"> - <el-select v-model="addRecord.type"> - <el-option label="设备" value="设备" /> - <el-option label="区域" value="区域" /> - </el-select> - </el-form-item> - <el-form-item label="关联RFID" prop="rfid"> - <el-select v-model="addRecord.rfid" multiple> - <el-option label="风机系统1标签" value="风机系统1标签" /> - <el-option label="风机系统2标签" value="风机系统2标签"/> - <el-option label="风机系统3标签" value="风机系统3标签"/> - <el-option label="A场所1标签" value="A场所1标签"/> - </el-select> - </el-form-item> - <el-form-item> - <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> - <el-button type="primary" @click="confirmAddRecord(addRef)" size="default" v-throttle>确认</el-button> - </el-form-item> - </el-form> - </el-dialog> - <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> - <span>您确定要删除该条记录吗?</span> - <template #footer> - <span class="dialog-footer"> - <el-button @click="deleteDialog = false" size="default">取消</el-button> - <el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button> - </span> - </template> - </el-dialog> - </div> + <div class="home-container"> + <el-scrollbar height="100%"> + <el-row class="homeCard"> + <el-col :span="12"> + <div class="grid-content topInfo"> + <el-input v-model="searchName" placeholder="设施区域名称"></el-input> + <el-select v-model="searchPlace" placeholder="设施区域类型"> + <el-option label="设备" value="设备" /> + <el-option label="区域" value="区域" /> + </el-select> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button> + <!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> + <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default" /> + </el-row> + <el-table + ref="multipleTableRef" + :data="tableData" + style="width: 100%" + :header-cell-style="{ background: '#fafafa' }" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55" /> + <el-table-column type="index" width="80" label="序号" /> + <el-table-column property="name" label="设施区域名称" /> + <el-table-column property="type" label="设施区域类型" /> + <el-table-column property="rfid" label="关联RFID" /> + <el-table-column property="creater" label="创建人" /> + <el-table-column property="createTime" label="创建时间" sortable /> + <el-table-column property="updater" label="更新人" /> + <el-table-column property="updateTime" label="更新时间" sortable /> + <el-table-column fixed="right" label="操作" align="center" width="250"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index, scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + </div> + <div class="pageBtn"> + <el-pagination + v-model:currentPage="currentPage" + v-model:page-size="pageSize" + :page-sizes="[10, 15]" + small="false" + background + layout="total, sizes, prev, pager, next, jumper" + :total="100" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </div> + </el-scrollbar> + <el-dialog v-model="dialogDetails" title="设施区域"> + <el-form :model="details" label-width="120px"> + <el-form-item label="设施区域名称"> + <el-input v-model="details.name" readonly /> + </el-form-item> + <el-form-item label="设施区域类型"> + <el-input v-model="details.type" readonly /> + </el-form-item> + <el-form-item label="关联RFID"> + <el-input v-model="details.rfid" type="textarea" readonly /> + </el-form-item> + <el-form-item label="创建人"> + <el-input v-model="details.creater" readonly /> + </el-form-item> + <el-form-item label="创建时间"> + <el-input v-model="details.createTime" readonly /> + </el-form-item> + <el-form-item label="更新人"> + <el-input v-model="details.updater" readonly /> + </el-form-item> + <el-form-item label="更新时间"> + <el-input v-model="details.updateTime" readonly /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default" v-throttle>确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="dialogAddRecord" title="设施区域编辑" @close="closeAdd"> + <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> + <el-form-item label="设施区域名称" prop="name"> + <el-input v-model="addRecord.name"> </el-input> + </el-form-item> + <el-form-item label="设施区域类型" prop="type"> + <el-select v-model="addRecord.type"> + <el-option label="设备" value="设备" /> + <el-option label="区域" value="区域" /> + </el-select> + </el-form-item> + <el-form-item label="关联RFID" prop="rfid"> + <el-select v-model="addRecord.rfid" multiple> + <el-option label="风机系统1标签" value="风机系统1标签" /> + <el-option label="风机系统2标签" value="风机系统2标签" /> + <el-option label="风机系统3标签" value="风机系统3标签" /> + <el-option label="A场所1标签" value="A场所1标签" /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default" v-throttle>确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button> + </span> + </template> + </el-dialog> + </div> </template> <script lang="ts" setup> - import { toRefs, reactive, ref } from 'vue'; - import { storeToRefs } from 'pinia'; - import { initBackEndControlRoutes } from '/@/router/backEnd'; - import {useUserInfo} from "/@/stores/userInfo"; - import { Session } from '/@/utils/storage'; - import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue' - import { ElTable } from 'element-plus' - import { FormInstance, FormRules } from 'element-plus' - let global: any = { - homeChartOne: null, - homeChartTwo: null, - homeCharThree: null, - dispose: [null, '', undefined], - }; +import { toRefs, reactive, ref } from 'vue'; +import { storeToRefs } from 'pinia'; +import { initBackEndControlRoutes } from '/@/router/backEnd'; +import { useUserInfo } from '/@/stores/userInfo'; +import { Session } from '/@/utils/storage'; +import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'; +import { ElTable } from 'element-plus'; +import { FormInstance, FormRules } from 'element-plus'; +let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined] +}; - interface stateType { - homeOne: Array <type> - } - interface type { - - } - // export default defineComponent({ - // name: 'workCheckinRecord', - // setup() { - const userInfo = useUserInfo() - const { userInfos } = storeToRefs(userInfo); - const searchName = ref('') - const searchPlace = ref('') - const currentPage = ref(1) - const pageSize = ref(10) - const chosenIndex = ref(-1) - const casProps = { - expandTrigger: 'hover', - multiple: true, - emitPath: false, - checkStrictly: false - } - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - // 时间格式化 - const timeForm = { - hour12: false, - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - second: '2-digit' - } - const tableData = reactive( - [ - { - name: '风机系统', - type: '设备', - rfid: ['风机系统1标签','风机系统2标签'], - creater: '张三', - createTime: '2022-07-14 12:23:03', - updater: '李四', - updateTime: '2022-07-16 14:23:03' - }, - { - name: 'A场所', - type: '区域', - rfid: ['A场所1标签'], - creater: '李四', - createTime: '2022-07-16 12:23:03', - updater: '张三', - updateTime: '2022-07-18 14:23:03' - } - ] - ) - const addRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - type:[{required: true, message: '该内容不能为空',trigger:'blur'}], - rfid:[{required: true, message: '该内容不能为空',trigger:'blur'}] - }) - const dialogDetails = ref(false) - const dialogAddRecord = ref(false) - const deleteDialog = ref(false) - const addRecord = ref({}) - const details = ref({}) - const viewRecord = (row) =>{ - details.value = JSON.parse(JSON.stringify(row)) - dialogDetails.value = true - } - const deleteRecord = (index) =>{ - chosenIndex.value = index - deleteDialog.value = true - } - const conFirmDelete = ()=> { - tableData.splice(chosenIndex.value,1) - deleteDialog.value = false - } - const confirmAddRecord = async (formEl: FormInstance | undefined) =>{ - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - if(chosenIndex.value == -1){ - addRecord.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-') - addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-') - tableData.unshift(addRecord.value) - }else{ - addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-') - tableData[chosenIndex.value] = addRecord.value - } - dialogAddRecord.value =false - } else { - console.log('error submit!', fields) - } - }) - - } - const closeAdd =()=>{ - addRecord.value={} - chosenIndex.value = -1 - } - const indexClear = ()=>{ - chosenIndex.value = -1 - } - const editRecord =(index, row)=>{ - dialogAddRecord.value = true - chosenIndex.value = index - addRecord.value = JSON.parse(JSON.stringify(row)) - } - // 折线图 - const renderMenu = async (value: string) => { - Session.set('projectId',value) - userInfos.value.projectId = value - await initBackEndControlRoutes(); - }; - // return { - // renderMenu, - // multipleTableRef, - // tableData, - // currentPage, - // pageSize, - // dialogDetails, - // details, - // deleteDialog, - // dialogAddRecord, - // viewRecord, - // deleteRecord, - // handleSizeChange, - // handleCurrentChange, - // Plus, - // Edit, - // Delete, - // Search, - // Download, - // handleSelectionChange, - // Refresh, - // ...toRefs(state), - // }; - // }, - // }); +interface stateType { + homeOne: Array<type>; +} +interface type {} +// export default defineComponent({ +// name: 'workCheckinRecord', +// setup() { +const userInfo = useUserInfo(); +const { userInfos } = storeToRefs(userInfo); +const searchName = ref(''); +const searchPlace = ref(''); +const currentPage = ref(1); +const pageSize = ref(10); +const chosenIndex = ref(-1); +const casProps = { + expandTrigger: 'hover', + multiple: true, + emitPath: false, + checkStrictly: false +}; +const handleSizeChange = (val: number) => { + console.log(`${val} items per page`); +}; +const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); +}; +// 时间格式化 +const timeForm = { + hour12: false, + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit' +}; +const tableData = reactive([ + { + name: '风机系统', + type: '设备', + rfid: ['风机系统1标签', '风机系统2标签'], + creater: '张三', + createTime: '2022-07-14 12:23:03', + updater: '李四', + updateTime: '2022-07-16 14:23:03' + }, + { + name: 'A场所', + type: '区域', + rfid: ['A场所1标签'], + creater: '李四', + createTime: '2022-07-16 12:23:03', + updater: '张三', + updateTime: '2022-07-18 14:23:03' + } +]); +const addRef = ref<FormInstance>(); +const addRules = reactive<FormRules>({ + name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + type: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + rfid: [{ required: true, message: '该内容不能为空', trigger: 'blur' }] +}); +const dialogDetails = ref(false); +const dialogAddRecord = ref(false); +const deleteDialog = ref(false); +const addRecord = ref({}); +const details = ref({}); +const viewRecord = (row) => { + details.value = JSON.parse(JSON.stringify(row)); + dialogDetails.value = true; +}; +const deleteRecord = (index) => { + chosenIndex.value = index; + deleteDialog.value = true; +}; +const conFirmDelete = () => { + tableData.splice(chosenIndex.value, 1); + deleteDialog.value = false; +}; +const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + if (chosenIndex.value == -1) { + addRecord.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); + addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); + tableData.unshift(addRecord.value); + } else { + addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); + tableData[chosenIndex.value] = addRecord.value; + } + dialogAddRecord.value = false; + } else { + console.log('error submit!', fields); + } + }); +}; +const closeAdd = () => { + addRecord.value = {}; + chosenIndex.value = -1; +}; +const indexClear = () => { + chosenIndex.value = -1; +}; +const editRecord = (index, row) => { + dialogAddRecord.value = true; + chosenIndex.value = index; + addRecord.value = JSON.parse(JSON.stringify(row)); +}; +// 折线图 +const renderMenu = async (value: string) => { + Session.set('projectId', value); + userInfos.value.projectId = value; + await initBackEndControlRoutes(); +}; +// return { +// renderMenu, +// multipleTableRef, +// tableData, +// currentPage, +// pageSize, +// dialogDetails, +// details, +// deleteDialog, +// dialogAddRecord, +// viewRecord, +// deleteRecord, +// handleSizeChange, +// handleCurrentChange, +// Plus, +// Edit, +// Delete, +// Search, +// Download, +// handleSelectionChange, +// Refresh, +// ...toRefs(state), +// }; +// }, +// }); </script> <style scoped lang="scss"> - $homeNavLengh: 8; - .home-container { - height: 100%; - overflow: hidden; - padding: 20px; - .homeCard{ - width: 100%; - padding: 20px; - background: #fff; - border-radius: 4px; - } - .el-row{ - display: flex; - align-items: center; - margin-bottom: 20px; - &:last-child { - margin-bottom: 0; - } - .grid-content{ - align-items: center; - min-height: 36px; - } +$homeNavLengh: 8; +.home-container { + height: 100%; + overflow: hidden; + padding: 20px; + .homeCard { + width: 100%; + padding: 20px; + background: #fff; + border-radius: 4px; + } + .el-row { + display: flex; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content { + align-items: center; + min-height: 36px; + } - .topInfo { - display: flex; - align-items: center; - font-size: 16px; - font-weight: bold; + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; - &>div{ - white-space: nowrap; - margin-right: 20px; - } - } - } - .mainPages{ - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - .main-card{ - width: 100%; - .cardTop{ - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - .mainCardBtn{ - margin: 0; - } - } - } - .pageBtn{ - display: flex; - align-items: center; - justify-content: right; - margin-top: 20px; + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } + .mainPages { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .main-card { + width: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + } + .pageBtn { + display: flex; + align-items: center; + justify-content: right; + margin-top: 20px; - .demo-pagination-block + .demo-pagination-block { - margin-top: 10px; - } - .demo-pagination-block .demonstration { - margin-bottom: 16px; - } - } - } - .el-input{ - width: 100% !important; - } - .el-date-editor::v-deep{ - width: 100%; - } - .el-select{ - width: 100%; - } + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } +} +.el-input { + width: 100% !important; +} +.el-date-editor::v-deep { + width: 100%; +} +.el-select { + width: 100%; +} </style> -- Gitblit v1.9.2