From fd285d6245ddd54c2eef8237eb878f573d665f94 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 07 七月 2022 18:27:39 +0800 Subject: [PATCH] lct --- src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue | 360 +++++++++++++++++++++++++++++------------------------------ 1 files changed, 176 insertions(+), 184 deletions(-) diff --git a/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue b/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue index 63d591b..c240e35 100644 --- a/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue +++ b/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue @@ -2,36 +2,32 @@ <div class="system-role-container"> <el-card shadow="hover"> <div class="system-user-search mb15"> - <div class="basic-search"> + <div class="basic-line"> <span>风险等级:</span> - <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="ml10" placeholder="请选择风险等级"> - <el-option - v-for="item in levelList" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> + <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-search"> + <div class="basic-line"> <span>部门:</span> <el-cascader - :options="departmentList" - :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }" - placeholder="请选择部门" - clearable - filterable - v-model="productionDeviceData.params.depId" + :options="departmentList" + :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }" + placeholder="请选择部门" + clearable + filterable + class="input-box" + v-model="productionDeviceData.params.depId" > </el-cascader> </div> - <el-button size="default" type="primary" class="ml10" @click="handleSearch"> + <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch"> <el-icon> <ele-Search /> </el-icon> 查询 </el-button> - <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')"> + <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')"> <el-icon> <ele-FolderAdd /> </el-icon> @@ -44,191 +40,187 @@ <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="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> </el-table-column> <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column> - <el-table-column prop="gtmCreate" label="创建时间" show-overflow-tooltip></el-table-column> - <el-table-column prop="lastEditByUserName" label="最后修改人" show-overflow-tooltip></el-table-column> - <el-table-column prop="gtmCreate" 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"> <template #default="scope"> - <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button> + <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> </template> </el-table-column> </el-table> <el-pagination - @size-change="onHandleSizeChange" - @current-change="onHandleCurrentChange" - class="mt15" - :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" - > - </el-pagination> + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="mt15" + :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" + > + </el-pagination> </el-card> - <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice ="initProductionDeviceTableData"/> + <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice="initProductionDeviceTableData" /> </div> </template> <script lang="ts"> - import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; - 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 { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; +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'; - // 定义接口来定义对象的类型 - interface TableData { - roleName: string; - roleSign: string; - describe: string; - sort: number; - status: boolean; - createTime: string; - } - interface TableDataState { - productionDeviceData: { - data: Array<TableData>; - total: number; - loading: boolean; - params: { - pageIndex: number; - pageSize: number; - riskLevel: number | null; - status: number; - depId: number | null; - location: string | null; - produceDeviceName: string | null; - }; +// 定义接口来定义对象的类型 +interface TableData { + roleName: string; + roleSign: string; + describe: string; + sort: number; + status: boolean; + createTime: string; +} +interface TableDataState { + productionDeviceData: { + data: Array<TableData>; + total: number; + loading: boolean; + params: { + pageIndex: number; + pageSize: number; + riskLevel: number | null; + status: number; + depId: number | null; + location: string | null; + produceDeviceName: string | null; }; - departmentList:Array<DepartmentState>; - levelList:Array<levelListState>; - } - interface levelListState { + }; + departmentList: Array<DepartmentState>; + levelList: Array<levelListState>; +} +interface levelListState {} +interface DepartmentState {} - } - interface DepartmentState { - - } - - export default defineComponent({ - name: 'productionDevice', - components: { productionDeviceDialog }, - setup() { - const productionDeviceDialogRef = ref(); - const state = reactive<TableDataState>({ - productionDeviceData: { - data: [], - total: 0, - loading: false, - params: { - pageIndex: 1, - pageSize: 10, - riskLevel: null, - status: 1, - depId: null, - location: null, - produceDeviceName: null - }, - }, - departmentList:[], - levelList:[{id:1,name:'低风险'},{id:2,name:'一般风险'},{id:3,name:'较大风险'},{id:4,name:'重大风险'},] - }); - // 初始化表格数据 - const initProductionDeviceTableData = async () => { - let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params) - if(res.data.code === '200'){ - state.productionDeviceData.data = res.data.data; - state.productionDeviceData.total = res.data.count; - }else{ - ElMessage({ - type:'warning', - message:res.data.msg - }) +export default defineComponent({ + name: 'productionDevice', + components: { productionDeviceDialog }, + setup() { + const productionDeviceDialogRef = ref(); + const state = reactive<TableDataState>({ + productionDeviceData: { + data: [], + total: 0, + loading: false, + params: { + pageIndex: 1, + pageSize: 10, + riskLevel: null, + status: 1, + depId: null, + location: null, + produceDeviceName: null } - }; - - const getDepartmentData = async () => { - let res = await departmentApi().getDepartmentList() - if(res.data.code === '200'){ - state.departmentList = res.data.data - }else{ - ElMessage({ - type:'warning', - message:res.data.msg - }) - } - } - - // 打开生产装置弹窗 - const onOpenDialogRef = (type: string, value: any) => { - productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList); - }; - // 删除角色 - const onDelProductionDevice = (row: any) => { - ElMessageBox.confirm(`此操作将永久删除角色名称:“${row.produceDeviceName}”,是否继续?`, '提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', + }, + departmentList: [], + levelList: [ + { id: 1, name: '低风险' }, + { id: 2, name: '一般风险' }, + { id: 3, name: '较大风险' }, + { id: 4, name: '重大风险' } + ] + }); + // 初始化表格数据 + const initProductionDeviceTableData = async () => { + let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params); + if (res.data.code === '200') { + state.productionDeviceData.data = res.data.data; + state.productionDeviceData.total = res.data.count; + } else { + ElMessage({ type: 'warning', - }).then(async () => { - let res = await productionDeviceApi().deleteProductionDevice({id:row.id}) - if(res.data.code ==='200'){ - ElMessage({ - type:'success', - duration:2000, - message:'删除成功' - }) - await initProductionDeviceTableData() - }else{ - ElMessage({ - type:'warning', - message:res.data.msg - }) - } - }).catch(() => {}); - }; - const handleSearch = () => { - initProductionDeviceTableData() + message: res.data.msg + }); } - // 分页改变 - const onHandleSizeChange = (val: number) => { - state.productionDeviceData.params.pageSize = val; - initProductionDeviceTableData() - }; - // 分页改变 - const onHandleCurrentChange = (val: number) => { - state.productionDeviceData.params.pageIndex = val; - initProductionDeviceTableData() - }; - // 页面加载时 - onMounted(() => { - initProductionDeviceTableData(); - getDepartmentData(); - }); - return { - handleSearch, - onOpenDialogRef, - onHandleSizeChange, - onDelProductionDevice, - onHandleCurrentChange, - productionDeviceDialog, - productionDeviceDialogRef, - initProductionDeviceTableData, - ...toRefs(state), - }; - }, - }); + }; + + const getDepartmentData = async () => { + let res = await departmentApi().getDepartmentList(); + if (res.data.code === '200') { + state.departmentList = res.data.data; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 打开生产装置弹窗 + const onOpenDialogRef = (type: string, value: any) => { + productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList); + }; + // 删除角色 + const onDelProductionDevice = (row: any) => { + ElMessageBox.confirm(`此操作将永久删除该条生产装置:“${row.produceDeviceName}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning' + }) + .then(async () => { + let res = await productionDeviceApi().deleteProductionDevice({ id: row.id }); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + duration: 2000, + message: '删除成功' + }); + await initProductionDeviceTableData(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }) + .catch(() => {}); + }; + const handleSearch = () => { + initProductionDeviceTableData(); + }; + // 分页改变 + const onHandleSizeChange = (val: number) => { + state.productionDeviceData.params.pageSize = val; + initProductionDeviceTableData(); + }; + // 分页改变 + const onHandleCurrentChange = (val: number) => { + state.productionDeviceData.params.pageIndex = val; + initProductionDeviceTableData(); + }; + // 页面加载时 + onMounted(() => { + initProductionDeviceTableData(); + getDepartmentData(); + }); + return { + handleSearch, + onOpenDialogRef, + onHandleSizeChange, + onDelProductionDevice, + onHandleCurrentChange, + productionDeviceDialog, + productionDeviceDialogRef, + initProductionDeviceTableData, + ...toRefs(state) + }; + } +}); </script> -<style scoped> -.basic-search{ - display:inline-block; - padding-left: 10px; -} -</style> +<style scoped></style> -- Gitblit v1.9.2