From 3fea4c6a262e3d5953f8cd528e12dda7eae6e3c9 Mon Sep 17 00:00:00 2001 From: SZH <szh_hello@163.com> Date: 星期三, 02 十一月 2022 15:51:21 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/router/route.ts | 8 src/views/facilityManagement/securities/index.vue | 860 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 868 insertions(+), 0 deletions(-) diff --git a/src/router/route.ts b/src/router/route.ts index 46504d1..afa1cda 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -103,5 +103,13 @@ meta: { title: '预警预报' } + }, + { + path: '/securities', + name: 'securities', + component: () => import('/@/views/facilityManagement/securities/index.vue'), + meta: { + title: '安全物资与设备' + } } ]; diff --git a/src/views/facilityManagement/securities/index.vue b/src/views/facilityManagement/securities/index.vue new file mode 100644 index 0000000..34c9f62 --- /dev/null +++ b/src/views/facilityManagement/securities/index.vue @@ -0,0 +1,860 @@ +<template> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="5" style="display:flex;align-items: center"> + <span style="white-space: nowrap">分类:</span> + <div class="grid-content topInfo"> + <el-select v-model="searchType"> + <el-option + v-for="item in goodsType" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> + </div> + </el-col> + <el-col :span="5" style="display:flex;align-items: center"> + <span style="white-space: nowrap">名称:</span> + <div class="grid-content topInfo"> + <el-input v-model="searchName"/> + </div> + </el-col> + <el-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </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="success" size="default" @click="dialogAddType = true">管理分类</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" /> + </el-row> + <el-table ref="multipleTableRef" :data="goodsData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }"> + <el-table-column property="id" label="id" width="180" /> + <el-table-column property="type" label="分类" /> + <el-table-column property="depName" label="仓库/部门" /> + <el-table-column property="name" label="名称" /> + <el-table-column property="consumable" label="是否耗材" align="center"/> + <el-table-column property="stock" label="有效库存" align="center"/> + <el-table-column fixed="right" label="操作" align="center" width="400"> + <template #default="scope"> + <el-button link type="success" size="small" :icon="View" @click="incomeBtn(scope.row)">批量入库</el-button> + <el-button link type="success" size="small" :icon="View" @click="outcomeBtn(scope.row)">批量出库</el-button> + <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="editRecordBtn(scope.$index, scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pageBtn"> + <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" /> + </div> + </div> + </div> + </div> + +<!-- 查看详情--> + <el-dialog v-model="dialogDetails" title="物资明细" center> + + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="dialogDetails = false" + >确认</el-button + > + </span> + </template> + </el-dialog> + +<!-- 新增修改--> + <el-dialog v-model="dialogAddRecord" title="安全物资与设备编辑" @close="closeAdd" @open="openAdd" center> + <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> + <div style="display: flex;margin-bottom: 22px;justify-content: space-between;align-items: center"> + <el-form-item label="选择分类" prop="type" style="display: flex"> + <el-select v-model="addRecord.type"> + <el-option v-for="(item, index) in goodsType" :label="item.name" :key="index" :value="item.id">{{ item.name }}</el-option> + </el-select> + </el-form-item> + <el-button style="margin-left: 20px" type="primary" :icon="Plus" size="default" @click="dialogAddType = true">添加分类</el-button> + </div> + <el-form-item label="所属部门/仓库" prop="depName"> + <el-cascader v-model="addRecord.depName" :options="departmentList" :props="casProps" :show-all-levels="false" @change="handleChange" /> + </el-form-item> + <el-form-item label="是否耗材" prop="consumable"> + <el-select v-model="addRecord.consumable"> + <el-option label="是" value="1">是</el-option> + <el-option label="否" value="0">否</el-option> + </el-select> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </span> + </template> + </el-dialog> + +<!-- 批量入库--> + <el-dialog v-model="dialogEnter" title="批量入库" center width="40%"> + <el-form :model="addRecord" label-width="150px" ref="addRef" :rules="addRules"> + <el-form-item label="当前所选物资/设备" prop="name"> + <el-input v-model="addRecord.name" readonly/> + </el-form-item> + <el-form-item label="按RFID标记(选填):" prop="name"> + <el-input v-model="addRecord.name" readonly/> + </el-form-item> + <el-form-item label="输入入库数量" prop="name"> + <el-input v-model="addRecord.name" readonly/> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button type="warning" @click="dialogEnter = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">提交</el-button> + </span> + </template> + </el-dialog> + +<!-- 批量出库--> + <el-dialog v-model="dialogOut" title="批量出库" center width="40%"> + <el-form :model="addRecord" label-width="150px" ref="addRef" :rules="addRules"> + <el-form-item label="当前所选物资/设备" prop="name"> + <el-input v-model="addRecord.name" readonly/> + </el-form-item> + <el-form-item label="按RFID标记(选填):" prop="name"> + <el-input v-model="addRecord.name" readonly/> + </el-form-item> + <el-form-item label="输入出库数量" prop="name"> + <el-input v-model="addRecord.name" readonly/> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button type="warning" @click="dialogOut = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">提交</el-button> + </span> + </template> + </el-dialog> + +<!-- 分类管理--> + <el-dialog v-model="dialogAddType" center width="40%"> + <div style="margin-bottom: 20px"> + <el-button type="primary" :icon="Plus" size="default">新增</el-button> + </div> + <el-table :data="goodsData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> + <el-table-column property="type" label="分类名称"/> + <el-table-column fixed="right" label="操作" align="center"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecordBtn(scope.$index, scope.row)">编辑</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="dialogAddType = false" size="default">确认</el-button> + </span> + </template> + </el-dialog> + +<!-- 删除--> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center> + <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">确认</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue'; +import { storeToRefs } from 'pinia'; +import { initBackEndControlRoutes } from '/@/router/backEnd'; +import { useUserInfo } from '/@/stores/userInfo'; +import { Session } from '/@/utils/storage'; +import { useRouter } from 'vue-router'; +import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download } from '@element-plus/icons-vue'; +import { ElTable } from 'element-plus'; +import { FormInstance, FormRules, ElMessage } from 'element-plus'; +import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; +import type { TabsPaneContext } from 'element-plus'; +import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage"; +import Cookies from 'js-cookie'; +import axios from 'axios'; +import {holidayGroupApi} from "/@/api/systemManage/basicDateManage/personShiftManage/holidayTimeGroup"; + +// 定义接口来定义对象的类型 +interface stateType { + goodsData: Array<any>; + multipleSelection: Array<any>; + goodsType: Array<any>; + dialogDetails: boolean; + dialogAddRecord: boolean; + dialogEnter: boolean; + dialogOut: boolean; + deleteDialog: boolean; + dialogAddType: boolean; + pageIndex1: number; + pageSize1: number; + chosenIndex: null | number; + deleteId: null | number; + searchType: string; + searchName: string; + totalSize1: number; + addRecord: Object; + details: Object; + casProps: Object; + workType: Array<type>; + departmentList: Array<any>; + departmentRecursionList: Array<DepartmentState>; +} +interface type { + id: number; + name: string; +} +interface DepartmentState { + depId: number; + depName: string; +} +export default defineComponent({ + name: 'securities', + components: {}, + setup() { + const userInfo = useUserInfo(); + const { userInfos } = storeToRefs(userInfo); + const router = useRouter(); + const state = reactive<stateType>({ + pageIndex1: 1, + pageSize1: 10, + totalSize1: 0, + departmentList: [], + departmentRecursionList: [], + chosenIndex: null, + searchType: '', + searchName: '', + goodsData: [ + { + id: '001', + type: '安全防护', + depName: '甲醛事业部', + name: '安全帽', + consumable: 0, + stock: 109 + }, + { + id: '002', + type: '消防', + depName: '甲醛事业部', + name: '干粉灭火器', + consumable: 1, + stock: 223 + } + ], + multipleSelection: [], + goodsType:[ + { + id: '001', + name: '安全防护' + }, + { + id: '002', + name: '消防' + } + ], + casProps: { + expandTrigger: 'hover', + emitPath: false, + value: 'depId', + label: 'depName', + checkStrictly: true + }, + dialogEnter: false, + dialogOut: false, + dialogAddRecord: false, + dialogDetails: false, + deleteDialog: false, + dialogAddType: false, + addRecord: {}, + details: {}, + deleteId: null, + workType: [ + { id: 1, name: '动火作业' }, + { id: 2, name: '受限空间作业' }, + { id: 3, name: '吊装作业' }, + { id: 4, name: '动土作业' }, + { id: 5, name: '断路作业' }, + { id: 6, name: '高处作业' }, + { id: 7, name: '临时用电作业' }, + { id: 8, name: '盲板抽堵作业' } + ] + }); + + const addRef = ref<FormInstance>(); + const addRules = reactive<FormRules>({ + name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + type: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + depName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + consumable: [{ required: true, message: '该内容不能为空', trigger: 'blur' }] + }); + // 刷新 + const reLoadData = async () => { + getListByPage(); + }; + const editRecordBtn = (index: number, row: {}) => { + state.dialogAddRecord = true; + state.chosenIndex = index; + state.addRecord = JSON.parse(JSON.stringify(row)); + }; + // 添加方法 + const addRecordBtn = async (data: any) => { + // let res = await holidayGroupApi().addRecord(data); + // if (res.data.code === '200') { + // ElMessage({ + // type: 'success', + // message: '添加成功!' + // }); + // getListByPage(); + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // } + }; + + // 修改方法 + const editRecord = async (data: any) => { + // let res = await holidayGroupApi().updateRecord(data); + // if (res.data.code === '200') { + // ElMessage({ + // type: 'success', + // message: '修改成功!' + // }); + // getListByPage(); + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // } + }; + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate(async (valid, fields) => { + if (valid) { + if (state.chosenIndex == null) { + // await addRecord(data); + } else { + // (data.id = state.addRecord.id), await editRecord(data); + } + state.dialogAddRecord = false; + } else { + console.log('error submit!', fields); + } + }); + }; + const closeAdd = () => { + state.addRecord = { + id: null, + name: '', + startTime: '', + endTime: '', + info: '' + }; + state.chosenIndex = null; + }; + + // 批量入库 + const incomeBtn =(row) =>{ + state.dialogEnter = true + }; + + // 批量出库 + const outcomeBtn =(row) =>{ + state.dialogOut = true + }; + + // 获取部门列表 + const getAllDepartment = async () => { + let res = await teamManageApi().getAllDepartment(); + if (res.data.code === '200') { + state.departmentList = JSON.parse(JSON.stringify(res.data.data)) + // recursion(state.departmentList); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // const recursion = (value: any) => { + // for (let i of value) { + // if (i.children.length !== 0) { + // state.departmentRecursionList.push(i); + // recursion(i.children); + // } else { + // state.departmentRecursionList.push(i); + // } + // } + // }; + + // 分页获取 + const getListByPage = async () => { + const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord } }; + let res = await workApplyApi().getApplyListPage(data); + if (res.data.code === '200') { + // state.applyData = JSON.parse(JSON.stringify(res.data.data)); + // console.log(state.applyData,'applyData') + // state.applyData = state.applyData.map((item) => { + // if (item.operators == null || item.operators == []) { + // item.operators = []; + // } else { + // item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname); + // } + // return item; + // }); + state.totalSize1 = res.data.total; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 表格数据格式化 + // const toNames = (row, column, cellValue, index) => { + // if (row.list == []) { + // return []; + // } else { + // const nameList = []; + // for (let i = 0; i < row.list.length; i++) { + // for (let t = 0; t < state.workTimeList.length; t++) { + // if (row.list[i] == state.workTimeList[t].id) { + // nameList.push(state.workTimeList[t].name); + // } + // } + // } + // return nameList.join(); + // } + // }; + + // 关键词查询记录 + const searchRecord = async () => { + if (state.searchType == '' && state.searchName == '') { + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + } else { + getListByPage(); + } + }; + // 重置搜索 + const clearSearch = async () => { + state.searchType = ''; + state.searchName = ''; + getListByPage(); + }; + + const deleteRecordBtn = (row) => { + state.deleteId = row.workApplyId; + state.deleteDialog = true; + }; + + // 删除方法 + const deleteRecord = async (data: any) => { + let res = await workApplyApi().cancelApply(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '删除成功!' + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + const conFirmDelete = () => { + deleteRecord({ workApplyId: state.deleteId }); + state.deleteDialog = false; + }; + + const handleSizeChange1 = (val: number) => { + state.pageSize1 = val; + getListByPage(); + }; + const handleCurrentChange1 = (val: number) => { + state.pageIndex1 = val; + getListByPage(); + }; + + // 查看记录 + const viewRecord = (row: any) => { + state.details = JSON.parse(JSON.stringify(row)); + }; + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value); + userInfos.value.projectId = value; + await initBackEndControlRoutes(); + }; + + // 页面载入时执行方法 + onMounted(() => { + getListByPage(); + getAllDepartment() + }); + + return { + View, + Edit, + Delete, + Refresh, + Plus, + Finished, + Download, + addRef, + addRules, + addRecordBtn, + incomeBtn, + outcomeBtn, + editRecordBtn, + editRecord, + reLoadData, + searchRecord, + clearSearch, + viewRecord, + deleteRecordBtn, + confirmAddRecord, + closeAdd, + conFirmDelete, + getListByPage, + handleSizeChange1, + handleCurrentChange1, + ...toRefs(state) + }; + } +}); +</script> + +<style scoped lang="scss"> +$homeNavLengh: 8; +.home-container { + height: calc(100vh - 144px); + box-sizing: border-box; + overflow: hidden; + .demo-tabs { + width: 100%; + height: 100%; + + &::v-deep(.el-tabs__content) { + height: calc(100% - 60px); + } + + .el-tab-pane { + height: 100%; + } + } + .homeCard { + width: 100%; + padding: 20px; + box-sizing: border-box; + background: #fff; + border-radius: 4px; + + .main-card { + width: 100%; + height: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + .pageBtn { + height: 60px; + display: flex; + align-items: center; + justify-content: right; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type { + height: calc(100% - 100px); + } + } + .stepItem { + display: flex; + align-items: flex-start; + margin-top: 30px; + margin-left: 30px; + padding-bottom: 30px; + padding-left: 40px; + border-left: 1px solid #a0cfff; + position: relative; + &:first-of-type { + margin-top: 30px; + } + &:first-of-type { + margin-bottom: 0; + border-left: none; + } + .stepNum { + position: absolute; + width: 40px; + height: 40px; + border-radius: 20px; + box-sizing: border-box; + font-size: 18px; + color: #333; + border: 1px solid #a0cfff; + line-height: 38px; + text-align: center; + left: -20px; + top: -30px; + background: #d9ecff; + } + .stepCard { + width: 100%; + margin-top: -30px; + + .box-card { + width: 100%; + + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + + span { + font-weight: bold; + margin-left: 10px; + } + } + + .text { + width: 100%; + font-size: 14px; + margin-bottom: 10px; + padding-left: 10px; + + span { + color: #409eff; + } + + .bold-text{ + font-weight: bolder; + } + + &:last-of-type { + margin-bottom: 0; + } + } + .approveUnit { + width: 100%; + font-size: 14px; + margin-bottom: 20px; + padding: 10px 15px; + border: 1px solid #fff; + background: #ecf8ff; + border-radius: 6px; + .item-tit { + width: 100%; + display: flex; + color: #409eff; + align-items: flex-start; + justify-content: space-between; + padding-bottom: 10px; + border-bottom: 1px solid #a0cfff; + + & > span { + flex: 1; + &:last-of-type{ + text-align: center; + } + } + & > div { + flex: 1; + text-align: center; + } + } + .item-cont { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #c6e2ff; + + & > span { + flex: 1; + &:last-of-type{ + text-align: center; + } + } + & > div { + flex: 1; + text-align: center; + + & > div { + text-align: left; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + span { + width: 45%; + &:first-of-type { + width: 30%; + } + } + } + } + &:last-of-type { + border-bottom: 0; + } + } + } + .approveItem { + width: 100%; + font-size: 14px; + margin-bottom: 20px; + padding: 10px 15px; + background: #ecf8ff; + border: 1px solid #fff; + border-radius: 6px; + .item-tit { + width: 100%; + display: flex; + color: #409eff; + align-items: flex-start; + justify-content: space-between; + padding-bottom: 10px; + border-bottom: 1px solid #a0cfff; + + & > span { + flex: 1; + } + & > div { + flex: 2; + text-align: center; + } + } + .item-cont { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #c6e2ff; + + & > span { + flex: 1; + } + & > div { + flex: 2; + text-align: center; + + & > div { + text-align: left; + width: 100%; + display: flex; + justify-content: center; + align-items: flex-start; + margin-bottom: 10px; + span { + width: 50%; + &:first-of-type { + width: 25%; + } + } + } + } + &:last-of-type { + border-bottom: 0; + } + } + } + } + } + &:hover .card-header { + color: #0098f5; + } + &:hover .stepNum { + border: 2px solid #0098f5; + color: #0098f5; + } + } + .el-row { + display: flex; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content { + align-items: center; + min-height: 36px; + } + + .topInfo { + width: 100%; + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } +} +.el-card { + border: 0; +} +.el-input{ + width: 100% !important; +} +::v-deep(.el-date-editor){ + width: 100%; +} +::v-deep(.el-select){ + width: 100%; +} +:deep(.el-cascader){ + width: 100% !important; +} +.el-form-item{ + width: 100% !important; +} +</style> -- Gitblit v1.9.2