| | |
| | | <el-card shadow="hover"> |
| | | <div class="system-user-search mb15"> |
| | | <div class="basic-line"> |
| | | <span>风险等级:</span> |
| | | <span>生产装置名称: </span> |
| | | <el-input v-model="productionDeviceData.params.produceDeviceName" class="input-box"> </el-input> |
| | | </div> |
| | | <div class="basic-line"> |
| | | <span>风险等级: </span> |
| | | <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="input-box" placeholder="请选择风险等级"> |
| | | <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="basic-line"> |
| | | <span>部门:</span> |
| | | <el-cascader |
| | | :options="departmentList" |
| | | :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" |
| | | placeholder="请选择部门" |
| | | clearable |
| | | filterable |
| | | class="input-box" |
| | | v-model="productionDeviceData.params.depId" |
| | | > |
| | | </el-cascader> |
| | | <span>部门: </span> |
| | | <el-cascader :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable filterable class="input-box" v-model="productionDeviceData.params.depId"> </el-cascader> |
| | | </div> |
| | | <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch"> |
| | | <el-icon> |
| | |
| | | <el-table-column type="index" label="序号" width="60" /> |
| | | <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <el-tag :type="scope.row.riskLevel === 1 ? 'success' : scope.row.riskLevel === 2 ? 'info' : scope.row.riskLevel === 3 ? 'warning' : 'danger'"> |
| | | {{ parseNumber(scope.row.riskLevel, '风险等级') }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="status" label="状态" show-overflow-tooltip> </el-table-column> |
| | | <el-table-column prop="status" label="状态" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <el-tag :type="scope.row.status === 1 ? 'primary' : 'warning'"> |
| | | {{ parseNumber(scope.row.status, '状态') }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column> |
| | | <el-table-column label="操作" width="150"> |
| | | <el-table-column label="操作" width="200" align="center"> |
| | | <template #default="scope"> |
| | | <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button> |
| | | <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button> |
| | | <el-button size="small" text type="primary" :icon="View" @click="onOpenDialogRef('查看', scope.row)">查看</el-button> |
| | | <el-button size="small" text type="primary" :icon="Edit" @click="onOpenDialogRef('修改', scope.row)">修改</el-button> |
| | | <el-button size="small" text type="danger" :icon="Delete" @click="onDelProductionDevice(scope.row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <br /> |
| | | <el-pagination |
| | | @size-change="onHandleSizeChange" |
| | | @current-change="onHandleCurrentChange" |
| | | :pager-count="5" |
| | | :page-sizes="[10, 20, 30]" |
| | | v-model:current-page="productionDeviceData.params.pageIndex" |
| | | background |
| | | v-model:page-size="productionDeviceData.params.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="productionDeviceData.total" |
| | | class="page-position" |
| | | > |
| | | </el-pagination> |
| | | <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="productionDeviceData.params.pageIndex" background v-model:page-size="productionDeviceData.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="productionDeviceData.total" class="page-position"> </el-pagination> |
| | | <br /> |
| | | <br /> |
| | | </el-card> |
| | |
| | | import { ElMessageBox, ElMessage } from 'element-plus'; |
| | | import productionDeviceDialog from './components/productionDeviceDialog.vue'; |
| | | import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts'; |
| | | import { departmentApi } from '/@/api/department'; |
| | | import { departmentApi } from '/@/api/systemManage/department'; |
| | | import { Edit, Delete, View } from '@element-plus/icons-vue'; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface TableData { |
| | |
| | | params: { |
| | | pageIndex: number; |
| | | pageSize: number; |
| | | riskLevel: number | null; |
| | | riskLevel: number | null | ''; |
| | | status: number; |
| | | depId: number | null; |
| | | depId: number | null | ''; |
| | | location: string | null; |
| | | produceDeviceName: string | null; |
| | | }; |
| | | }; |
| | | departmentList: Array<DepartmentState>; |
| | | stateList: Array<levelListState>; |
| | | levelList: Array<levelListState>; |
| | | } |
| | | interface levelListState {} |
| | | interface levelListState { |
| | | id: number; |
| | | name: string; |
| | | } |
| | | interface DepartmentState {} |
| | | |
| | | export default { |
| | | name: 'productionDevice', |
| | | components: { productionDeviceDialog }, |
| | | components: { productionDeviceDialog, Edit, Delete, View }, |
| | | setup() { |
| | | const productionDeviceDialogRef = ref(); |
| | | const state = reactive<TableDataState>({ |
| | |
| | | { id: 2, name: '一般风险' }, |
| | | { id: 3, name: '较大风险' }, |
| | | { id: 4, name: '重大风险' } |
| | | ], |
| | | stateList: [ |
| | | { id: 1, name: '使用中' }, |
| | | { id: 2, name: '已弃用' } |
| | | ] |
| | | }); |
| | | // 初始化表格数据 |
| | | const initProductionDeviceTableData = async () => { |
| | | state.productionDeviceData.params.riskLevel = state.productionDeviceData.params.riskLevel === '' ? null : state.productionDeviceData.params.riskLevel; |
| | | state.productionDeviceData.params.depId = state.productionDeviceData.params.depId === '' ? null : state.productionDeviceData.params.depId; |
| | | let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params); |
| | | if (res.data.code === '200') { |
| | | state.productionDeviceData.data = res.data.data; |
| | |
| | | getDepartmentData(); |
| | | }); |
| | | |
| | | const parseNumber = (value: string | number, type: string) => { |
| | | if (type === '风险等级') { |
| | | return state.levelList.find((item) => item.id === value)?.name; |
| | | } else if (type === '状态') { |
| | | return state.stateList.find((item) => item.id === value)?.name; |
| | | } |
| | | }; |
| | | |
| | | return { |
| | | Edit, |
| | | Delete, |
| | | View, |
| | | parseNumber, |
| | | handleSearch, |
| | | onOpenDialogRef, |
| | | onHandleSizeChange, |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped></style> |
| | | <style scoped> |
| | | :deep(.el-textarea.is-disabled .el-textarea__inner) { |
| | | background-color: var(--el-card-bg-color); |
| | | color: var(--el-input-text-color, var(--el-text-color-regular)); |
| | | } |
| | | :deep(.el-input.is-disabled .el-input__inner) { |
| | | color: var(--el-input-text-color, var(--el-text-color-regular)); |
| | | } |
| | | :deep(.el-input.is-disabled .el-input__wrapper) { |
| | | background-color: var(--el-card-bg-color); |
| | | } |
| | | </style> |