From 2b4328392746fc59f5edf98fed629f8db2804e18 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 27 七月 2022 09:29:23 +0800 Subject: [PATCH] 对接 --- src/components/DailogSearch/DailogSearch.vue | 150 +- src/views/facilityManagement/deviceType/component/Dailog.vue | 17 src/views/goalManagement/safetyAssessment/index.vue | 258 ++-- src/views/facilityManagement/deviceType/index.vue | 212 ++- src/views/goalManagement/targetSettings/index.vue | 526 ++++---- src/views/goalManagement/targetDecompositionYear/component/Dailog.vue | 126 + src/views/goalManagement/targetEscalation/index.vue | 272 ++-- src/components/DailogSearchUser/index.vue | 75 src/views/goalManagement/Goalsummary/index.vue | 286 ++-- src/views/goalManagement/safetyAssessment/component/Dailog.vue | 74 src/views/goalManagement/targetDecompositionYear/component/DailogAdd.vue | 162 ++ src/views/goalManagement/targetDecompositionYear/index.vue | 458 ++++--- src/api/facilityManagement/index.ts | 101 + src/api/goalManagement/index.ts | 254 ++++ src/views/goalManagement/targetSettings/component/dailogAdd.vue | 168 ++ src/views/goalManagement/targetDecompositionMonth/index.vue | 461 ++++--- 16 files changed, 2,237 insertions(+), 1,363 deletions(-) diff --git a/src/api/facilityManagement/index.ts b/src/api/facilityManagement/index.ts new file mode 100644 index 0000000..546df74 --- /dev/null +++ b/src/api/facilityManagement/index.ts @@ -0,0 +1,101 @@ +import request from '/@/utils/request'; +export function facilityManagementApi(){ + return{ + // 设备设施类型管理 查询单条数据 + getequipmentTypeMngDetail:(params:any)=>{ + return request({ + url:`/equipmentTypeMng/selectOne/${params}`, + method:"get" + }) + }, + // 设备设施类型管理 新增或者修改数据 + getequipmentTypeMngAddOrUpdate:(params:object)=>{ + return request({ + url:"/equipmentTypeMng/addOrUpdate", + method:"post", + data:params + }) + }, + // 设备设施类型管理 删除 + getequipmentTypeMngDelete:(params:any)=>{ + return request({ + url:`/equipmentTypeMng/delete?ids=${params}`, + method:"get" + }) + }, + // 设备设施类型管理 查询树状数据 + getequipmentTypeMngTreeData:()=>{ + return request({ + url:`/equipmentTypeMng/treeData`, + method:"get" + }) + }, + // 仪器仪表信息、生产设备设施、安全设备设施 查询单条数据 + getequipmentInfoDetail:(params:any)=>{ + return request({ + url:`/equipmentInfo/selectOne/${params}`, + method:"get" + }) + }, + // 仪器仪表信息、生产设备设施、安全设备设施 新增或者修改数据 + getequipmentInfoAddOrUpdate:(params:object)=>{ + return request({ + url:"/equipmentInfo/addOrUpdate", + method:"post", + data:params + }) + }, + // 仪器仪表信息、生产设备设施、安全设备设施 删除 + getequipmentInfoDelete:(params:any)=>{ + return request({ + url:`/equipmentInfo/delete?ids=${params}`, + method:"get" + }) + }, + // 仪器仪表信息、生产设备设施、安全设备设施 分页查询数据 + getequipmentInfoList:(params:object)=>{ + return request({ + url:"/equipmentInfo/page/list", + method:"post", + data:params + }) + }, + // 仪器仪表信息、生产设备设施、安全设备设施 统计 + getequipmentInfoStatistics:(params:any)=>{ + return request({ + url:`/equipmentInfo/statistics`, + method:"get" + }) + }, + // 重点监管装置/设备 查询单条数据 + getkeypointEquipmentInfoDetail:(params:any)=>{ + return request({ + url:`/keypointEquipmentInfo/selectOne/${params}`, + method:"get" + }) + }, + // 重点监管装置/设备 新增或者修改数据 + getkeypointEquipmentInfoAddOrUpdate:(params:object)=>{ + return request({ + url:`/keypointEquipmentInfo/addOrUpdate`, + method:"post", + data:params + }) + }, + // 重点监管装置/设备 删除 + getkeypointEquipmentInfoDetele:(params:any)=>{ + return request({ + url:`/keypointEquipmentInfo/delete?ids=${params}`, + method:"get" + }) + }, + // 重点监管装置/设备 分页查询数据 + getkeypointEquipmentInfoAddOrList:(params:object)=>{ + return request({ + url:`/keypointEquipmentInfo/page/list`, + method:"post", + data:params + }) + }, + } +} \ No newline at end of file diff --git a/src/api/goalManagement/index.ts b/src/api/goalManagement/index.ts new file mode 100644 index 0000000..0daab7a --- /dev/null +++ b/src/api/goalManagement/index.ts @@ -0,0 +1,254 @@ + +import request from '/@/utils/request'; +export function goalManagementApi() { + return { + // 目标设置、目标指标分解列表 + getTargetMngList: (params: object) => { + return request({ + url: "/targetMng/page/list", + method: "post", + data: params + }) + }, + // 目标设置详情 + getTargetMngDetail: (params: any) => { + return request({ + url: `/targetMng/selectOne/${params}`, + method: "get", + }) + }, + // 目标设置新增或者修改数据 + getTargetMngAddOrupdata: (params: object) => { + return request({ + url: "/targetMng/addOrUpdate", + method: "post", + data: params + }) + }, + // 目标设置删除 + getTargetMngDelete: (params: any) => { + return request({ + url: `/targetMng/delete?ids=${params}`, + method: "get", + }) + }, + // 目标指标分解-新增或者修改数据 + gettargetDivideDetail: (params: object) => { + return request({ + url: "/targetDivideDetail/addOrUpdate", + method: "post", + data: params + }) + }, + // 统计 + getEquipmentInfo: () => { + return request({ + url: "/equipmentInfo/statistics", + method: "get" + }) + }, + // 目标责任书 分页查询数据 + gettargetDutyfileInfoList: (params: object) => { + return request({ + url: "/targetDutyfileInfo/page/list", + method: "post", + data: params + }) + }, + // 目标责任书 查询单条数据 + gettargetDutyfileInfoDetail: (params: any) => { + return request({ + url: `/targetDutyfileInfo/selectOne/${params}`, + method: "get" + }) + }, + // 目标责任书 新增或者修改数据 + gettargetDutyfileInfoAddorUpdata: (params: object) => { + return request({ + url: `/targetDutyfileInfo/addOrUpdate`, + method: "post", + data: params + }) + }, + // 目标责任书 删除 + gettargetDutyfileInfoDelete: (params: any) => { + return request({ + url: `/targetDutyfileInfo/delete?ids=${params}`, + method: "get", + }) + }, + // 奖惩标准设定 分页查询数据 + getrewardPunishmentStandardList: (params: object) => { + return request({ + url: "/rewardPunishmentStandard/page/list", + method: "post", + data: params + }) + }, + // 奖惩标准设定 查询单条数据 + getrewardPunishmentStandardDetail: (params: any) => { + return request({ + url: `/rewardPunishmentStandard/selectOne/${params}`, + method: "get", + }) + }, + // 奖惩标准设定 新增或者修改数据 + getrewardPunishmentStandardaddOrUpdate: (params: object) => { + return request({ + url: "/rewardPunishmentStandard/addOrUpdate", + method: "post", + data: params + }) + }, + // 奖惩标准设定 删除 + getrewardPunishmentStandardDelete: (params: any) => { + return request({ + url: `/rewardPunishmentStandard/delete?ids=${params}`, + method: "get", + }) + }, + // 奖惩记录 分页查询数据 + getrewardPunishmentList: (params: object) => { + return request({ + url: "/rewardPunishmentDetail/page/list", + method: "post", + data: params + }) + }, + // 奖惩记录 查询单条数据 + getrewardPunishmentDetail: (params: any) => { + return request({ + url: `/rewardPunishmentDetail/selectOne/${params}`, + method: "get", + }) + }, + // 奖惩记录 新增或者修改数据 + getrewardPunishmentAddOrUpdate: (params: object) => { + return request({ + url: `/rewardPunishmentDetail/addOrUpdate`, + method: "post", + data: params + }) + }, + // 奖惩记录 删除 + getrewardPunishmentDelete: (params: any) => { + return request({ + url: `/rewardPunishmentDetail/delete?ids=${params}`, + method: "get", + }) + }, + // 绩效考核管理 安全考核管理 分页查询数据 + getexamineMngList: (params: object) => { + return request({ + url: "/examineMng/page/list", + method: "post", + data: params + }) + }, + // 绩效考核管理 安全考核管理 查询单条数据 + getexamineMngDetail: (params: any) => { + return request({ + url: `/examineMng/selectOne/${params}`, + method: "get", + }) + }, + // 绩效考核管理 安全考核管理 新增或者修改数据 + getexamineMngAddOrUpdate: (params: object) => { + return request({ + url: `/examineMng/addOrUpdate`, + method: "post", + data: params + }) + }, + // 绩效考核管理 安全考核管理 删除 + getexamineMngDelete: (params: any) => { + return request({ + url: `/examineMng/delete?ids=${params}`, + method: "get", + }) + }, + // 绩效考核管理 考核标准设定 分页查询数据 + getexamineTemplateList: (params: object) => { + return request({ + url: "/examineTemplate/page/list", + method: "post", + data: params + }) + }, + // 绩效考核管理 考核标准设定 查询单条数据 + getexamineTemplateDetail: (params: any) => { + return request({ + url: `/examineTemplate/selectOne/${params}`, + method: "get", + }) + }, + // 绩效考核管理 考核标准设定 新增或者修改数据 + getexamineTemplateAddOrUpdate: (params: object) => { + return request({ + url: `/examineTemplate/addOrUpdate`, + method: "post", + data: params + }) + }, + // 绩效考核管理 考核标准设定 删除 + getexamineTemplateDelete: (params: any) => { + return request({ + url: `/examineTemplate/delete?ids=${params}`, + method: "get", + }) + }, + // 目标汇总 分页查询数据 + gettargetDutySummaryList: (params: object) => { + return request({ + url: "/targetDutySummary/page/list", + method: "post", + data: params + }) + }, + // 目标汇总 查询单条数据 + gettargetDutySummaryDetail: (params: any) => { + return request({ + url: `/targetDutySummary/selectOne/${params}`, + method: "get", + }) + }, + // 目标汇总 新增或者修改数据 + gettargetDutySummaryAddOrUpdate: (params: object) => { + return request({ + url: `/targetDutySummary/addOrUpdate`, + method: "post", + data: params + }) + }, + // 目标汇总 删除 + gettargetDutySummaryDelete: (params: any) => { + return request({ + url: `/targetDutySummary/delete?ids=${params}`, + method: "get", + }) + }, + // 安全目标考核 查询单条数据 + gettargetExamineDetail: (params: any) => { + return request({ + url: `/targetExamine/selectOne/${params}`, + method: "get" + }) + }, + // 安全目标考核 新增或者修改数据 + gettargetExamineAddOrUpdate: (params: object) => { + return request({ + url: "/targetExamine/addOrUpdate", + method: "post", + data: params + }) + }, + // 目标检查上报 (有疑问) 新增或者修改数据 ---??? + getworkApproveAddOrUpdate: (params: object) => { + return request({ + url: "/workApprove/submitApprove", + method: "post", + data: params + }) + }, + } +} \ No newline at end of file diff --git a/src/components/DailogSearch/DailogSearch.vue b/src/components/DailogSearch/DailogSearch.vue index 562ee42..b1fa129 100644 --- a/src/components/DailogSearch/DailogSearch.vue +++ b/src/components/DailogSearch/DailogSearch.vue @@ -7,51 +7,49 @@ <el-row> <el-col :span="6"> <el-form-item size="default"> - <el-input v-model="ruleForm.pass" placeholder="安全目标指标" /> + <el-input v-model="ruleForm.searchParams.qName" placeholder="安全目标指标" /> </el-form-item> </el-col> <el-col :span="6" :offset="1"> <el-form-item size="default"> - <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" /> + <el-input v-model="ruleForm.searchParams.indexNum" placeholder="目标指标编号" /> </el-form-item> </el-col> <el-col :span="6" :offset="1"> <el-form-item> - <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button> - <el-button @click="resetForm(ruleFormRef)">重置</el-button> + <el-button type="primary" @click="listApi">查询</el-button> + <el-button @click="resetForm">重置</el-button> </el-form-item> </el-col> </el-row> </el-form> - <el-button size="default" :icon="Delete">清除选择</el-button> - <el-table :data="tableData" style="width: 100%; margin-top: 20px"> + <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button> + <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio"> <el-table-column align="center"> <template #default="scope"> - <el-radio-group v-model="radio1" @change="radio"> - <el-radio :label="scope.row.date" size="large">{{null}}</el-radio> + <el-radio-group v-model="radio1"> + <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio> </el-radio-group> </template> </el-table-column> - <el-table-column align="center" prop="date" label="安全目标指标" width="180" /> - <el-table-column align="center" prop="name" label="目标指标编号" width="180" /> - <el-table-column align="center" prop="address" label="年度" /> - <el-table-column align="center" prop="address" label="指标值" /> + <el-table-column align="center" prop="qName" label="安全目标指标" width="180" /> + <el-table-column align="center" prop="indexNum" label="目标指标编号" width="180" /> + <el-table-column align="center" prop="year" label="年度" /> + <el-table-column align="center" prop="value" label="指标值" /> </el-table> <el-pagination style="padding: 20px 0; border-bottom: 1px solid #dedede" v-model:currentPage="currentPage4" v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" + :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" - :total="400" + :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </el-col> <el-col :span="7"> + <div v-if="dynamicTags[0]==''?false:true"> <el-tag v-for="tag in dynamicTags" :key="tag" @@ -61,87 +59,115 @@ :disable-transitions="false" @close="handleClose(tag)" > - {{ tag }} + {{ tag.qName }} </el-tag> + </div> </el-col> </el-row> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false" size="default">关闭</el-button> - <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> + <el-button type="primary" @click="submitForm" size="default">确定</el-button> </span> </template> </el-dialog> </template> <script lang="ts"> -import { defineComponent, reactive, ref } from 'vue'; -import { Delete,FullScreen } from '@element-plus/icons-vue'; +import { defineComponent, reactive, ref, onMounted } from 'vue'; +import { Delete, FullScreen } from '@element-plus/icons-vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - setup() { + setup(props,{emit}) { const dialogVisible = ref<boolean>(false); - const openDailog = () => { + const openDailog = (type:any) => { dialogVisible.value = true; + ruleForm.searchParams.targetType=type + listApi(); }; // 搜索条件 const ruleForm = reactive({ - pass: '', - checkPass: '', + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '', ////指标类型 1:年指标 2:月指标 + divideStatus: '', ////分解状态 1:已分解 2:未分解 + }, }); - // 表格 - const tableData = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const pageSize4 = ref(100); + // 下方导航与表格 + const tableData = ref([]); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; + }; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + onMounted(() => { + }); + const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); }; const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); }; // 右方点击添加后显示标签 - const dynamicTags = ref(['2016-05-03']); + const dynamicTags = ref(['']); const handleClose = (tag: string) => { dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); - radio1.value="" + radio1.value = ''; }; - const radio1=ref('2016-05-03') - const radio=(event:any)=>{ - dynamicTags.value[0]=event + const radio1 = ref(''); + const radio = (event: any) => { + dynamicTags.value[0] = event; + }; + const clear=()=>{ + dynamicTags.value=[''] + radio1.value="" } - //全屏 + //全屏 const full = ref(false); const toggleFullscreen = () => { if (full.value == false) { full.value = true; - }else{ - full.value = false; - } + } else { + full.value = false; + } }; + const submitForm=()=>{ + let obj=JSON.parse(JSON.stringify(dynamicTags.value)) + emit("backNum",obj[0]) + dialogVisible.value = false + } return { dialogVisible, openDailog, ruleForm, tableData, pageSize4, + resetForm, + listApi, handleSizeChange, handleCurrentChange, dynamicTags, @@ -151,7 +177,9 @@ full, toggleFullscreen, Delete, - FullScreen + FullScreen, + clear, + submitForm }; }, }); diff --git a/src/components/DailogSearchUser/index.vue b/src/components/DailogSearchUser/index.vue index 775913e..a1e722b 100644 --- a/src/components/DailogSearchUser/index.vue +++ b/src/components/DailogSearchUser/index.vue @@ -10,7 +10,7 @@ </div> </div> </el-col> - <el-col :span="14" style="padding:20px"> + <el-col :span="14" style="padding: 20px"> <el-form ref="ruleFormRef" :model="ruleForm" status-icon> <el-row> <el-col :span="10" :offset="1"> @@ -26,12 +26,19 @@ </el-col> </el-row> </el-form> - <el-table :data="tableData" style="width: 100%; margin-top: 20px"> - <el-table-column align="center" width="50px" type="selection"></el-table-column> - <el-table-column align="center" prop="date" label="安全目标指标" /> - <el-table-column align="center" prop="name" label="目标指标编号" /> - <el-table-column align="center" prop="address" label="年度" /> - <el-table-column align="center" prop="address" label="指标值" /> + <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio"> + <el-table-column align="center"> + <template #default="scope"> + <el-radio-group v-model="radio1"> + <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio> + </el-radio-group> + </template> + </el-table-column> + <el-table-column align="center" prop="date" label="登录名" /> + <el-table-column align="center" prop="name" label="用户名" /> + <el-table-column align="center" prop="address" label="所属机构" /> + <el-table-column align="center" prop="address" label="所属部门" /> + <el-table-column align="center" prop="address" label="状态" /> </el-table> <el-pagination style="padding: 20px 0; border-bottom: 1px solid #dedede" @@ -48,15 +55,23 @@ /> </el-col> <el-col :span="4"> - <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)"> - {{ tag }} + <el-tag + v-for="tag in dynamicTags" + :key="tag" + class="mx-1" + style="margin: 5px" + closable + :disable-transitions="false" + @close="handleClose(tag)" + > + {{ tag.name }} </el-tag> </el-col> </el-row> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false" size="default">关闭</el-button> - <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> + <el-button type="primary" @click="submitForm" size="default">确定</el-button> </span> </template> </el-dialog> @@ -69,7 +84,7 @@ children?: Tree[]; } export default defineComponent({ - setup() { + setup(props,{emit}) { //左边树形部分 const names = ref<any>(); const handleNodeClick = (data: Tree) => { @@ -141,22 +156,23 @@ }); // 表格 const tableData = [ - { + { id:1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, - { + { + id:2, date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, - { + { id:3, date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, - { + { id:4, date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', @@ -169,26 +185,35 @@ const handleCurrentChange = (val: number) => { console.log(`current page: ${val}`); }; - const radio1 = ref('1'); - // 右方点击添加后显示标签 - const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']); + // 右方点击添加后显示标签 + const dynamicTags = ref(['']); const handleClose = (tag: string) => { dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); + radio1.value = ''; + }; + const radio1 = ref(''); + const radio = (event: any) => { + dynamicTags.value[0] = event; }; // 开启弹窗 const dialogVisible = ref(false); const openDailog = () => { dialogVisible.value = true; }; - //全屏 + //全屏 const full = ref(false); const toggleFullscreen = () => { if (full.value == false) { full.value = true; - }else{ - full.value = false; - } + } else { + full.value = false; + } }; + const submitForm=()=>{ + let obj=JSON.parse(JSON.stringify(dynamicTags.value)) + emit("SearchUser",obj[0]) + dialogVisible.value = false + } return { dialogVisible, names, @@ -202,10 +227,12 @@ handleCurrentChange, radio1, dynamicTags, - handleClose, + handleClose, FullScreen, full, - toggleFullscreen + toggleFullscreen, + radio, + submitForm }; }, }); diff --git a/src/views/facilityManagement/deviceType/component/Dailog.vue b/src/views/facilityManagement/deviceType/component/Dailog.vue index de9cabf..92c73cf 100644 --- a/src/views/facilityManagement/deviceType/component/Dailog.vue +++ b/src/views/facilityManagement/deviceType/component/Dailog.vue @@ -1,13 +1,13 @@ <template> - <el-dialog v-model="dialogVisible" :fullscreen="full" title="新建设备设施类型管理" width="50%" draggable> + <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable> <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> <el-form :model="form" label-width="120px"> <el-row> <el-col :span="11"> <el-form-item label="是否为设备内容" size="default"> <el-select v-model="form.region" placeholder="请选择" style="width: 100%"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> + <el-option label="1">是</el-option> + <el-option label="2">否</el-option> </el-select> </el-form-item> </el-col> @@ -47,9 +47,15 @@ export default defineComponent({ setup() { const dialogVisible = ref(false); - const form = ref({}); - const openDailog = () => { + const form = ref({ + + }); + const titles=ref() + const openDailog = (title:string,id:number) => { dialogVisible.value = true; + titles.value=`${title}设备设施类型管理` + + }; //全屏 const full = ref(false); @@ -63,6 +69,7 @@ return { dialogVisible, form, + titles, openDailog, full, toggleFullscreen, diff --git a/src/views/facilityManagement/deviceType/index.vue b/src/views/facilityManagement/deviceType/index.vue index 4b50a46..c729541 100644 --- a/src/views/facilityManagement/deviceType/index.vue +++ b/src/views/facilityManagement/deviceType/index.vue @@ -1,96 +1,132 @@ <template> - <div class="box"> - <el-button type="primary" :icon="Plus" @click="openD" size="default">新建</el-button> - <el-table :data="tableData" style="width: 100%" row-key="id"> - <el-table-column align="center" prop="date" label="是否为设备内容"/> - <el-table-column align="center" prop="name" label="巡检" /> - <el-table-column align="center" prop="address" label="检测" /> - <el-table-column align="center" prop="address" label="类别名称" /> - <el-table-column align="center" label="操作"> - <template #default> - <el-button type="primary" link :icon="View">查看</el-button> - <el-button type="primary" link :icon="EditPen">修改</el-button> - <el-button type="primary" link :icon="Delete">删除</el-button> - <el-button type="primary" link :icon="CirclePlus">添加下级设备设施类型管理</el-button> - </template> - </el-table-column> - </el-table> - <Dailog ref="Show"></Dailog> - </div> + <div class="box"> + <el-button type="primary" :icon="Plus" @click="openD('新建')" size="default">新建</el-button> + <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all> + <el-table-column align="center" label="是否为设备内容"> + <template #default="scope"> + <span v-if="scope.row.isContent == 1">是</span> + <span v-if="scope.row.isContent == 2">否</span> + </template> + </el-table-column> + <el-table-column align="center" label="巡检"> + <template #default="scope"> + <span v-if="scope.row.isVisit == 1">是</span> + <span v-if="scope.row.isVisit == 2">否</span> + </template> + </el-table-column> + <el-table-column align="center" label="检测"> + <template #default="scope"> + <span v-if="scope.row.isCheck == 1">是</span> + <span v-if="scope.row.isCheck == 2">否</span> + </template> + </el-table-column> + <el-table-column align="center" prop="typeName" label="类别名称" /> + <el-table-column align="center" label="操作"> + <template #default> + <el-button type="primary" link :icon="View" @click="openD('查看')">查看</el-button> + <el-button type="primary" link :icon="EditPen" @click="openD('修改')">修改</el-button> + <el-button type="primary" link :icon="Delete">删除</el-button> + <el-button type="primary" link :icon="CirclePlus" @click="openD('添加')">添加下级设备设施类型管理</el-button> + </template> + </el-table-column> + </el-table> + <Dailog ref="Show"></Dailog> + </div> </template> <script lang="ts"> -import { defineComponent,ref } from 'vue' -import {Plus,View,EditPen,Delete,CirclePlus} from '@element-plus/icons-vue' -import Dailog from "./component/Dailog.vue" +import { defineComponent, onMounted, ref } from 'vue'; +import { Plus, View, EditPen, Delete, CirclePlus } from '@element-plus/icons-vue'; +import Dailog from './component/Dailog.vue'; +import { facilityManagementApi } from '/@/api/facilityManagement'; +import { ElMessage } from 'element-plus'; export default defineComponent({ - components:{Dailog}, - setup() { - const tableData = [ - { - id: 1, - date: '2016-05-02', - name: 'wangxiaohu', - }, - { - id: 2, - date: '2016-05-04', - name: 'wangxiaohu', - }, - { - id: 3, - date: '2016-05-01', - name: 'wangxiaohu', - children: [ - { - id: 31, - date: '2016-05-01', - name: 'wangxiaohu', - children: [ - { - id: 35, - date: '2016-05-01', - name: 'wangxiaohu', - }, - { - id: 36, - date: '2016-05-01', - name: 'wangxiaohu', - }, - ], - }, - { - id: 32, - date: '2016-05-01', - name: 'wangxiaohu', - }, - ], - }, - { - id: 4, - date: '2016-05-03', - name: 'wangxiaohu', - }, -] - const Show=ref() - const openD=()=>{ - Show.value.openDailog() - } - return{ - tableData, - Show, - openD, - Plus, - View, - EditPen, - Delete, - CirclePlus - } - }, -}) + components: { Dailog }, + setup() { + const listApi = () => { + facilityManagementApi() + .getequipmentTypeMngTreeData() + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + } else { + ElMessage({ + showClose: true, + message: 'Oops, this is a error message.', + type: 'error', + }); + } + }); + }; + onMounted(() => { + listApi(); + }); + const tableData = ref([ + { + id: 1, + date: '2016-05-02', + name: 'wangxiaohu', + }, + { + id: 2, + date: '2016-05-04', + name: 'wangxiaohu', + }, + { + id: 3, + date: '2016-05-01', + name: 'wangxiaohu', + children: [ + { + id: 31, + date: '2016-05-01', + name: 'wangxiaohu', + children: [ + { + id: 35, + date: '2016-05-01', + name: 'wangxiaohu', + }, + { + id: 36, + date: '2016-05-01', + name: 'wangxiaohu', + }, + ], + }, + { + id: 32, + date: '2016-05-01', + name: 'wangxiaohu', + }, + ], + }, + { + id: 4, + date: '2016-05-03', + name: 'wangxiaohu', + }, + ]); + const Show = ref(); + const openD = (title: string, id: number) => { + Show.value.openDailog(title, id); + }; + return { + tableData, + Show, + openD, + listApi, + Plus, + View, + EditPen, + Delete, + CirclePlus, + }; + }, +}); </script> <style scoped> -.box{ - padding: 20px; - background-color: #fff; +.box { + padding: 20px; + background-color: #fff; } </style> diff --git a/src/views/goalManagement/Goalsummary/index.vue b/src/views/goalManagement/Goalsummary/index.vue index 1ca28d3..2104dfd 100644 --- a/src/views/goalManagement/Goalsummary/index.vue +++ b/src/views/goalManagement/Goalsummary/index.vue @@ -1,166 +1,178 @@ <template> - <div> - <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> - <el-row> - <el-col :span="4"> - <el-form-item size="default"> - <el-input v-model="ruleForm.pass" placeholder="年度" /> - </el-form-item> - </el-col> - <el-col :span="4"> - <el-form-item> - <el-select v-model="ruleForm.region" placeholder="请选择责任部门" size="default"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="4"> - <el-form-item> - <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button> - <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button> - </el-form-item> - </el-col> - </el-row> - </el-form> - <div class="minCenter"> - <div class="btns"> - <p>汇总日期:2022-07-04 23:00:07</p> - <div> - <el-button type="primary" size="default" :icon="Download">导出</el-button> + <div> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item size="default"> + <el-input v-model="ruleForm.searchParams.year" placeholder="年度" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-tree-select v-model="form.searchParams.departmentId" :data="data" class="w100" placeholder="请选择" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-button size="default" type="primary" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> + <div class="btns"> + <p>汇总日期:2022-07-04 23:00:07</p> + <div> + <el-button type="primary" size="default" :icon="Download">导出</el-button> + </div> + </div> + <el-table :data="tableData" style="width: 100%"> + <el-table-column label="责任部门" align="center"> + <template #default="scope">{{ scope.row.departmentId }}</template> + </el-table-column> + <el-table-column property="targetValue" align="center" label="安全目标指标" /> + <el-table-column property="examineValue" label="考核指标" align="center" show-overflow-tooltip /> + <el-table-column property="yiYue" label="1月" align="center" show-overflow-tooltip /> + <el-table-column property="february" label="2月" align="center" show-overflow-tooltip /> + <el-table-column property="erYue" label="3月" align="center" show-overflow-tooltip /> + <el-table-column property="sanYue" label="4月" align="center" show-overflow-tooltip /> + <el-table-column property="siYue" label="5月" align="center" show-overflow-tooltip /> + <el-table-column property="wuYue" label="6月" align="center" show-overflow-tooltip /> + <el-table-column property="liuYue" label="7月" align="center" show-overflow-tooltip /> + <el-table-column property="qiYue" label="8月" align="center" show-overflow-tooltip /> + <el-table-column property="baYue" label="9月" align="center" show-overflow-tooltip /> + <el-table-column property="jiuYue" label="10月" align="center" show-overflow-tooltip /> + <el-table-column property="shiYue" label="11月" align="center" show-overflow-tooltip /> + <el-table-column property="shiyiYue" label="12月" align="center" show-overflow-tooltip /> + <el-table-column label="考核结果" align="center"> + <template #default="scope">{{ scope.row.examineResult }}</template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> </div> </div> - <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> - <el-table-column label="责任部门" align="center" > - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column property="name" align="center" label="安全目标指标" /> - <el-table-column property="address" label="考核指标" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="1月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="2月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="3月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="4月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="5月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="6月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="7月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="8月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="9月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="10月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="11月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="12月" align="center" show-overflow-tooltip /> - <el-table-column property="address" label="考核结果" align="center" show-overflow-tooltip /> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - </div> </div> </template> <script lang="ts"> import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue'; -interface User { - date: string; - name: string; - address: string; -} -import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ components: { ElButton, ElInput }, setup() { // 搜索条件 const ruleForm = reactive({ - pass: '', - checkPass: '', + pageSize: 10, + pageIndex: 1, + searchParams: { + year: '', //年度 + departmentId: '', //责任部门 + }, }); - const resetForm = (formEl: FormInstance | undefined) => { - console.log(!formEl); - if (!formEl) return; - formEl.resetFields(); - }; // 下方导航与表格 - const activeName = ref('1'); - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event); + const tableData = ref([]); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); + const resetForm = () => { + ruleForm.searchParams.year = ''; + ruleForm.searchParams.departmentId = ''; }; - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; + const listApi = () => { + goalManagementApi() + .gettargetDutySummaryList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); }; + onMounted(() => { + listApi(); + }); - const tableData: User[] = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-08', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-06', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-07', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const small = ref(false); - const disabled = ref(false); - const background = ref(false); const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); }; const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); }; + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: '11', + label: '经营班子', + children: [], + }, + ], + }, + { + value: '2', + label: '生产运行部', + children: [ + { + value: '21', + label: '灌装一班', + children: [], + }, + { + value: '22', + label: '工艺四班', + children: [], + }, + ], + }, + { + value: '3', + label: '设备部', + children: [ + { + value: '31', + label: '仪表班', + children: [], + }, + { + value: '32', + label: '机修班', + children: [], + }, + ], + }, + ]; return { ruleForm, - resetForm, - activeName, - handleClick, tableData, - formatter, currentPage4, pageSize4, + total, + data, + resetForm, + listApi, handleSizeChange, handleCurrentChange, - small, - disabled, - background, Plus, Delete, Upload, @@ -188,10 +200,10 @@ display: flex; justify-content: left; } -.btns p{ - font-size: 18px; - line-height: 40px; - margin-right: 20px; +.btns p { + font-size: 18px; + line-height: 40px; + margin-right: 20px; } .pages { padding: 20px 0; diff --git a/src/views/goalManagement/safetyAssessment/component/Dailog.vue b/src/views/goalManagement/safetyAssessment/component/Dailog.vue index 04c65bb..7639890 100644 --- a/src/views/goalManagement/safetyAssessment/component/Dailog.vue +++ b/src/views/goalManagement/safetyAssessment/component/Dailog.vue @@ -5,26 +5,26 @@ <el-row> <el-col :span="11"> <el-form-item label="安全目标指标" size="default"> - <el-input v-model="form.name"> + <el-input v-model="form.qName" :disabled="disabled"> <template #append> <el-button :icon="Search" @click="daiInpt" /> </template ></el-input> </el-form-item> </el-col> <el-col :span="11" :offset="2"> <el-form-item label="目标指标编号" size="default"> - <el-input v-model="form.name" /> + <el-input v-model="form.indexNum" disabled /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="年度" size="default"> - <el-input v-model="form.name" /> + <el-input v-model="form.year" disabled /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> <el-form-item label="指标值" size="default"> - <el-input v-model="form.name" /> + <el-input v-model="form.value" disabled /> </el-form-item> </el-col> </el-row> @@ -56,58 +56,50 @@ </span> </template> </el-dialog> - <DailogSearch ref="Shows"></DailogSearch> + <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch> </template> <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search, FullScreen } from '@element-plus/icons-vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus'; import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ components: { DailogSearch }, setup() { const dialogVisible = ref<boolean>(false); - const form = reactive({ - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '', - }); - const openDailog = (type: string, value: any, projectList: any, projectId: string) => { + const form = ref({}); + const targetType = ref(); + const disabled = ref(false); + const titles = ref(); + const openDailog = (title: string, type: any, id: number) => { dialogVisible.value = true; + titles.value = title; + targetType.value = type; + disabled.value = title == '查看' ? true : false; + if (title == '查看' || title == '修改') { + goalManagementApi() + .getTargetMngDetail(id) + .then((res) => { + if (res.data.code == 200) { + form.value = res.data.data; + } else { + ElMessage.error(res.data.msg); + } + }); + } + }; + const onNumber = (e: object) => { + form.value = e; }; // 导航 const activeName = ref('1'); // 表格 - const tableData = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; + const tableData = ref([]); // 安全目标指标弹窗 const Shows = ref(); const daiInpt = () => { - Shows.value.openDailog(); + Shows.value.openDailog(targetType.value); }; //全屏 const full = ref(false); @@ -122,6 +114,10 @@ form, dialogVisible, openDailog, + targetType, + onNumber, + disabled, + titles, activeName, tableData, Shows, diff --git a/src/views/goalManagement/safetyAssessment/index.vue b/src/views/goalManagement/safetyAssessment/index.vue index eb2e230..a932c15 100644 --- a/src/views/goalManagement/safetyAssessment/index.vue +++ b/src/views/goalManagement/safetyAssessment/index.vue @@ -1,26 +1,26 @@ <template> - <div> - <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> - <el-row> - <el-col :span="4"> - <el-form-item size="default"> - <el-input v-model="ruleForm.pass" placeholder="请输入目标指标" /> - </el-form-item> - </el-col> - <!-- <el-col :span="4"> + <div> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item size="default"> + <el-input v-model="ruleForm.searchParams.indexNum" placeholder="请输入目标指标" /> + </el-form-item> + </el-col> + <!-- <el-col :span="4"> <el-form-item> <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" /> </el-form-item> </el-col> --> - <el-col :span="4"> - <el-form-item> - <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button> - <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button> - </el-form-item> - </el-col> - </el-row> - </el-form> - <div class="minCenter"> + <el-col :span="4"> + <el-form-item> + <el-button size="default" type="primary" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> <div class="btns"> <div> <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button> @@ -29,37 +29,33 @@ <!-- <el-button size="default" :icon="Refresh"></el-button> --> </div> </div> - <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> - <el-table-column label="序号" align="center" type="index" width="70" /> - <el-table-column label="安全目标指标" align="center" sortable> - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column property="name" align="center" label="考核指标编号" sortable /> - <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip /> - <el-table-column property="address" label="指标值" align="center" sortable show-overflow-tooltip /> - <el-table-column label="操作" align="center" sortable show-overflow-tooltip> - <template #default> - <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button> - <el-button link type="primary" size="default" :icon="Delete">删除</el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column label="序号" align="center" type="index" width="70" /> + <el-table-column label="安全目标指标" align="center" property="qName" sortable /> + <el-table-column property="indexNum" align="center" label="考核指标编号" sortable /> + <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip /> + <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> + <el-table-column label="操作" align="center" width="300" sortable show-overflow-tooltip> + <template #default="scope"> + <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> + <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">修改</el-button> + <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + <Dailog ref="openAdd"></Dailog> </div> - <Dailog ref="openAdd"></Dailog> - </div> </div> </template> <script lang="ts"> @@ -67,104 +63,118 @@ import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue'; -interface User { - date: string; - name: string; - address: string; -} +import { goalManagementApi } from '/@/api/goalManagement'; import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'; export default defineComponent({ components: { ElButton, ElInput, Dailog }, setup() { - // 搜索条件 + // 搜索条件 const ruleForm = reactive({ - pass: '', - checkPass: '', + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '1', ////指标类型 1:年指标 2:月指标 + divideStatus: '', ////分解状态 1:已分解 2:未分解 + }, }); - const resetForm = (formEl: FormInstance | undefined) => { - console.log(!formEl); - if (!formEl) return; - formEl.resetFields(); - }; - // 下方导航与表格 - const activeName = ref('1'); - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event); + // 重置 + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; }; - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); }; - - const tableData: User[] = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-08', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-06', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-07', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const small = ref(false); - const disabled = ref(false); - const background = ref(false); + // + const handleClick = (val: any) => { + let targetType = JSON.parse(JSON.stringify(val)); + ruleForm.searchParams.targetType = targetType.paneName; + listApi(); + }; + onMounted(() => { + listApi(); + }); + const onAddorUpdata = () => { + listApi(); + }; + // 表格 + const tableData = ref(); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); }; const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); + }; + // 删除 + const onDelete = (id: number) => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(id) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + ElMessage({ + type: 'info', + message: 'Delete canceled', + }); + }); }; // 弹窗 const openAdd = ref(); - const openD = (type: String, value: any) => { - openAdd.value.openDailog(type, value); + const openD = (title: String, id: number) => { + openAdd.value.openDailog(title, ruleForm.searchParams.targetType, id); }; return { - ruleForm, - resetForm, - activeName, + listApi, + ruleForm, + resetForm, handleClick, tableData, - formatter, currentPage4, pageSize4, handleSizeChange, handleCurrentChange, + onAddorUpdata, + total, openAdd, openD, - small, - disabled, - background, + onDelete, Plus, Delete, Upload, @@ -177,9 +187,9 @@ </script> <style scoped> .topTitle { - background-color: #fff; - padding: 20px 0px 20px 0px; - margin-bottom:10px ; + background-color: #fff; + padding: 20px 0px 20px 0px; + margin-bottom: 10px; } .minCenter { width: 100%; diff --git a/src/views/goalManagement/targetDecompositionMonth/index.vue b/src/views/goalManagement/targetDecompositionMonth/index.vue index 084d1b9..579df10 100644 --- a/src/views/goalManagement/targetDecompositionMonth/index.vue +++ b/src/views/goalManagement/targetDecompositionMonth/index.vue @@ -1,213 +1,276 @@ <template> - <div> - <search></search> - <div class="minCenter"> - <div class="btns"> - <div> - <el-button size="default" type="primary" :icon="Plus" @click="openType">新建</el-button> - <el-button size="default" type="warning" :icon="EditPen" plain >修改</el-button> - <el-button size="default" type="danger" :icon="Delete" plain>删除</el-button> - </div> - </div> - <el-table - ref="multipleTableRef" - :data="tableData" - style="width: 100%" - @selection-change="handleSelectionChange" - > - <el-table-column - label="序号" - align="center" - type="index" - width="70" - /> - <el-table-column type="selection" align="center" width="55" /> - <el-table-column label="安全目标指标" align="center" sortable> - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column - property="name" - align="center" - label="目标指标编号" - sortable - /> - <el-table-column - property="address" - label="年度" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="指标值" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - label="操作" - align="center" - sortable - show-overflow-tooltip - > - <template #default> - <el-button link type="primary" size="small" :icon="View" @click="handleClick" - >查看</el-button - > - <el-button link type="primary" size="small" :icon="EditPen" @click="handleClick" - >修改</el-button - > - <el-button link type="primary" size="small" :icon="Delete">删除</el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - </div> - <Dailog ref="Show"></Dailog> - </div> + <div> + <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" /> + </el-form-item> + </el-col> + <el-col :span="16"> + <el-form-item> + <el-button type="primary" size="default" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> + <div class="btns"> + <div> + <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button> + <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain>修改</el-button> + <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button> + </div> + </div> + <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"> + <el-table-column label="序号" align="center" type="index" width="70" /> + <el-table-column type="selection" align="center" width="55" /> + <el-table-column type="expand"> + <template #default> + <div class="tableC"> + <el-tabs v-model="activeNames"> + <el-tab-pane label="目标指标分解" name="1"> + <el-table :data="targetDivideDetailList" style="width: 100%"> + <el-table-column align="center" prop="dutyDepartmentId" label="责任部门" /> + <el-table-column align="center" prop="value" label="考核指标" /> + <el-table-column align="center" prop="makerDepartmentId" label="制定人部门" /> + <el-table-column align="center" prop="makeDate" label="制定日期" /> + <el-table-column align="center" prop="commitPersonId" label="上报人" /> + </el-table> + </el-tab-pane> + </el-tabs> + </div> + </template> + </el-table-column> + <el-table-column label="安全目标指标" align="center" property="qName" sortable /> + <el-table-column property="indexNum" align="center" label="目标指标编号" sortable /> + <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip /> + <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> + <el-table-column label="操作" align="center" sortable show-overflow-tooltip> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> + <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button> + <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="400" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </div> + <Dailog ref="Show"></Dailog> + </div> </template> <script lang="ts"> -import search from '../targetSettings/component/search.vue' -import Dailog from '../targetDecompositionYear/component/Dailog.vue' -import { ref, toRefs, reactive, onMounted, defineComponent } from "vue"; -import { - ElMessageBox, - ElMessage, - ElButton, - ElInput, - TabsPaneContext, - FormInstance, -} from "element-plus"; -import { - Plus, - Delete, - Upload, - Download, - Refresh, - View, - EditPen -} from "@element-plus/icons-vue"; -interface User { - date: string; - name: string; - address: string; -} -import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults"; +import search from '../targetSettings/component/search.vue'; +import Dailog from '../targetDecompositionYear/component/Dailog.vue'; +import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; +import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue'; +import { goalManagementApi } from '/@/api/goalManagement'; +import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'; export default defineComponent({ - components: { ElButton, ElInput,search,Dailog}, - setup() { + components: { ElButton, ElInput, Dailog }, + setup() { + // 搜索条件 + const ruleForm = reactive({ + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '2', ////指标类型 1:年指标 2:月指标 + divideStatus: '', ////分解状态 1:已分解 2:未分解 + }, + }); + // 下方导航与表格 + const tableData = ref([]); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; + }; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + onMounted(() => { + listApi(); + }); - - // 下方导航与表格 - const activeName = ref("1"); - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event); - }; - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; - }; - - const tableData: User[] = [ - { - date: "2016-05-03", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-02", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-04", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-01", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-08", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-06", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-07", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); - }; - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); - }; - // 打开弹窗 - const Show=ref() - const openType=()=>{ - Show.value.openDailog() - } - return { - activeName, - handleClick, - tableData, - formatter, - currentPage4, - pageSize4, - handleSizeChange, - handleCurrentChange, - Show, - openType, - Plus, - Delete, - Upload, - Download, - Refresh, - View, - EditPen - }; - }, + const handleSizeChange = (val: number) => { + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); + }; + const handleCurrentChange = (val: number) => { + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); + }; + const activeNames = ref('1'); + // 打开弹窗 + const Show = ref(); + const openD = (title: String, id: number) => { + Show.value.openDailog(title, ruleForm.searchParams.targetType, id); + }; + // 删除 + const onDelete = (id: number) => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(id) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + // ElMessage({ + // type: 'info', + // message: 'Delete canceled', + // }); + }); + }; + // 批量删除 + const warning = ref(true); + const danger = ref(true); + const deletAll = ref(); + const handleSelectionChange = (val: any) => { + let valId = JSON.parse(JSON.stringify(val)); + let arr = []; + for (let i = 0; i < valId.length; i++) { + arr.push(valId[i].id); + } + deletAll.value = arr.toString(); + if (val.length == 1) { + warning.value = false; + danger.value = false; + } else if (val.length == 0) { + warning.value = true; + danger.value = true; + } else { + warning.value = true; + danger.value = false; + } + }; + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(deletAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + ElMessage({ + type: 'info', + message: 'Delete canceled', + }); + }); + }; + return { + listApi, + resetForm, + tableData, + currentPage4, + pageSize4, + total, + ruleForm, + handleSizeChange, + handleCurrentChange, + Show, + openD, + activeNames, + onDelete, + warning, + danger, + deletAll, + handleSelectionChange, + onDeleteAll, + Plus, + Delete, + Upload, + Download, + Refresh, + View, + EditPen, + }; + }, }); </script> <style scoped> .minCenter { - width: 100%; - background-color: #fff; - margin-top: 10px; - padding: 0 20px; + width: 100%; + background-color: #fff; + margin-top: 10px; + padding: 0 20px; } .btns { - padding: 0px 0px 10px 0px; - display: flex; - justify-content: space-between; + padding: 0px 0px 10px 0px; + display: flex; + justify-content: space-between; } -.pages{ -padding:20px 0; -display: flex; -justify-content: right; +.pages { + padding: 20px 0; + display: flex; + justify-content: right; +} +.tableC { + margin: 0 10%; +} +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; } </style> diff --git a/src/views/goalManagement/targetDecompositionYear/component/Dailog.vue b/src/views/goalManagement/targetDecompositionYear/component/Dailog.vue index 381de47..a9bc880 100644 --- a/src/views/goalManagement/targetDecompositionYear/component/Dailog.vue +++ b/src/views/goalManagement/targetDecompositionYear/component/Dailog.vue @@ -1,117 +1,135 @@ <template> - <el-dialog v-model="dialogVisible" :fullscreen="full" title="目标分解" width="50%" draggable> + <el-dialog v-model="dialogVisible" :before-close="resetForm" :fullscreen="full" title="目标分解" width="60%" draggable> <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> <el-form :model="form" label-width="120px"> <el-row> <el-col :span="11"> <el-form-item label="安全目标指标" size="default"> - <el-input v-model="form.name"> + <el-input v-model="form.qName" :disabled="disabled"> <template #append> <el-button :icon="Search" @click="daiInpt" /> </template ></el-input> </el-form-item> </el-col> <el-col :span="11" :offset="2"> <el-form-item label="目标指标编号" size="default"> - <el-input v-model="form.name" /> + <el-input v-model="form.indexNum" disabled /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="年度" size="default"> - <el-input v-model="form.name" /> + <el-input v-model="form.year" disabled /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> <el-form-item label="指标值" size="default"> - <el-input v-model="form.name" /> + <el-input v-model="form.value" disabled /> </el-form-item> </el-col> </el-row> </el-form> - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tabs v-model="activeName" class="demo-tabs"> <el-tab-pane label="目标指标分解" name="1"> - <el-button type="primary" size="default" @click="daiAdd">新增</el-button> + <el-button type="primary" size="default" @click="daiAdd" :disabled="disabled">新增</el-button> </el-tab-pane> </el-tabs> <el-table :data="tableData" style="width: 100%"> - <el-table-column align="center" prop="date" label="责任部门" width="180" /> - <el-table-column align="center" prop="name" label="考核指标" width="180" /> - <el-table-column align="center" prop="address" label="制定人部门" /> - <el-table-column align="center" prop="address" label="制定日期" /> - <el-table-column align="center" prop="address" label="上报人" /> + <el-table-column align="center" prop="dutyDepartmentId" label="责任部门" width="180" /> + <el-table-column align="center" prop="value" label="考核指标" width="180" /> + <el-table-column align="center" prop="makerDepartmentId" label="制定人部门" /> + <el-table-column align="center" prop="makeDate" label="制定日期" /> + <el-table-column align="center" prop="commitPersonId" label="上报人" /> <el-table-column align="center" label="操作"> <template #default> <el-button link type="primary">查看</el-button> + <el-button link :disabled="disabled" type="primary">修改</el-button> + <el-button link :disabled="disabled" type="primary">删除</el-button> </template> </el-table-column> </el-table> <template #footer> <span class="dialog-footer"> - <el-button @click="dialogVisible = false" size="default">关闭</el-button> - <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> + <el-button @click="resetForm" size="default">关闭</el-button> + <el-button type="primary" v-if="disabled == false" @click="submitForm" size="default">确定</el-button> </span> </template> </el-dialog> - <DailogAdd ref="Show"></DailogAdd> - <DailogSearch ref="Shows"></DailogSearch> + <DailogAdd ref="Show" @onAdd="add"></DailogAdd> + <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch> </template> <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search, FullScreen } from '@element-plus/icons-vue'; import DailogAdd from './DailogAdd.vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus'; import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ components: { DailogAdd, DailogSearch }, setup() { const dialogVisible = ref<boolean>(false); - const form = reactive({ - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '', - }); - const openDailog = (type: string, value: any, projectList: any, projectId: string) => { + const form = ref({}); + const targetType = ref(); + const disabled = ref(false); + const titles = ref(); + const openDailog = (title: string, type: any, id: number) => { dialogVisible.value = true; + titles.value = title; + targetType.value = type; + disabled.value = title == '查看' ? true : false; + if (title == '查看' || title == '修改') { + goalManagementApi() + .getTargetMngDetail(id) + .then((res) => { + if (res.data.code == 200) { + form.value = res.data.data; + } else { + ElMessage.error(res.data.msg); + } + }); + } + }; + const onNumber = (e: object) => { + form.value = e; }; // 导航 const activeName = ref('1'); // 表格 - const tableData = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; + const tableData = ref([]); // 新增弹窗 const Show = ref(); const daiAdd = () => { Show.value.openDailog(); }; + const formUp = reactive({ + targetId:"", //关联的目标指标/外键 + delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开 + targetDivideDetailList: [], //目标指标分解列表 + }); + const add = (e:any) => { + formUp.targetDivideDetailList.push(e) + // let obj=JSON.parse(JSON.stringify(form.value)) + formUp.targetId=form.value.id + goalManagementApi().gettargetDivideDetail(formUp).then(res=>{ + if(res.data.code==200){ + + } + }) + }; + const submitForm=()=>{ + + } // 安全目标指标弹窗 const Shows = ref(); const daiInpt = () => { - Shows.value.openDailog(); + Shows.value.openDailog(targetType.value); + }; + // 关闭 + const resetForm = () => { + dialogVisible.value = false; + form.value = {}; + tableData.value = []; }; //全屏 const full = ref(false); @@ -136,6 +154,14 @@ full, toggleFullscreen, FullScreen, + onNumber, + targetType, + disabled, + resetForm, + titles, + add, + formUp, + submitForm }; }, }); diff --git a/src/views/goalManagement/targetDecompositionYear/component/DailogAdd.vue b/src/views/goalManagement/targetDecompositionYear/component/DailogAdd.vue index 95c9d90..5f968af 100644 --- a/src/views/goalManagement/targetDecompositionYear/component/DailogAdd.vue +++ b/src/views/goalManagement/targetDecompositionYear/component/DailogAdd.vue @@ -1,41 +1,35 @@ <template> <el-dialog v-model="dialogVisible" :fullscreen="full" title="新建目标指标分解" width="50%" draggable> <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form :model="form" label-width="120px"> + <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules"> <el-row> <el-col :span="11"> - <el-form-item label="责任部门" size="default"> - <el-select v-model="form.region" style="width: 100%"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> - </el-select> + <el-form-item label="责任部门" prop="dutyDepartmentId" size="default"> + <el-tree-select v-model="form.dutyDepartmentId" :data="data" class="w100" placeholder="请选择" /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="考核指标" size="default"> - <el-input v-model="form.name" /> + <el-form-item label="考核指标" prop="value" size="default"> + <el-input v-model="form.value" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> - <el-form-item label="制定人部门" size="default"> - <el-select v-model="form.region" style="width: 100%"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> - </el-select> + <el-form-item label="制定人部门" prop="makerDepartmentId" size="default"> + <el-tree-select v-model="form.makerDepartmentId" :data="data" class="w100" placeholder="请选择" /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="制定日期" size="default"> - <el-date-picker v-model="form.date1" type="date" style="width: 100%" /> + <el-form-item label="制定日期" prop="makeDate" size="default"> + <el-date-picker v-model="form.makeDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> - <el-form-item label="上报人" size="default"> - <el-input v-model="form.name"> + <el-form-item label="上报人" prop="commitPersonId" size="default"> + <el-input v-model="form.commitPersonId"> <template #append> <el-button :icon="Search" @click="openUser" /> </template ></el-input> </el-form-item> @@ -46,30 +40,84 @@ <template #footer> <span class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> - <el-button @click="dialogVisible = false" size="default">关闭</el-button> - <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> + <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> + <el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button> </span> </template> </el-dialog> - <DailogSearchUser ref="Show"></DailogSearchUser> + <DailogSearchUser ref="Show" @SearchUser="onUser"></DailogSearchUser> </template> <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search, FullScreen } from '@element-plus/icons-vue'; +import type { FormInstance, FormRules } from 'element-plus'; import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue'; export default defineComponent({ components: { DailogSearchUser }, - setup() { - const form = reactive({ - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '', + setup(props,{emit}) { + const form = ref({ + dutyDepartmentId: "", ////责任部门/外键 + makerDepartmentId: "", ////制定人部门/外键 + commitPersonId: "", ////上报人/外键 + value: '', ////考核指标值 + makeDate: "", ////制定日期 }); + const ruleFormRef = ref<FormInstance>(); + const rules = reactive<FormRules>({ + dutyDepartmentId: [ + { + required: true, + message: '责任部门不能为空', + trigger: 'change', + }, + ], + makerDepartmentId: [ + { + required: true, + message: '制定人部门不能为空', + trigger: 'change', + }, + ], + commitPersonId: [ + { + required: true, + message: '上报人不能为空', + trigger: 'change', + }, + ], + value: [ + { + required: true, + message: '考核指标值不能为空', + trigger: 'change', + }, + ], + makeDate: [ + { + required: true, + message: '制定日期不能为空', + trigger: 'change', + }, + ], + }); + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + dialogVisible.value = false; + emit("onAdd",form.value) + } else { + console.log('error submit!', fields); + } + }); + formEl.resetFields(); + }; + + const resetForm = (formEl: FormInstance | undefined) => { + if (!formEl) return; + formEl.resetFields(); + dialogVisible.value = false; + }; // 开启弹窗 const dialogVisible = ref(false); const openDailog = () => { @@ -89,6 +137,54 @@ full.value = false; } }; + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: '11', + label: '经营班子', + children: [], + }, + ], + }, + { + value: '2', + label: '生产运行部', + children: [ + { + value: '21', + label: '灌装一班', + children: [], + }, + { + value: '22', + label: '工艺四班', + children: [], + }, + ], + }, + { + value: '3', + label: '设备部', + children: [ + { + value: '31', + label: '仪表班', + children: [], + }, + { + value: '32', + label: '机修班', + children: [], + }, + ], + }, + ]; + const onUser = (e:any) => { + form.value.commitPersonId=e.id + }; return { form, dialogVisible, @@ -99,6 +195,12 @@ full, toggleFullscreen, FullScreen, + data, + onUser, + ruleFormRef, + rules, + submitForm, + resetForm }; }, }); diff --git a/src/views/goalManagement/targetDecompositionYear/index.vue b/src/views/goalManagement/targetDecompositionYear/index.vue index c4999b3..bddd610 100644 --- a/src/views/goalManagement/targetDecompositionYear/index.vue +++ b/src/views/goalManagement/targetDecompositionYear/index.vue @@ -1,212 +1,274 @@ <template> - <div> - <search></search> - <div class="minCenter"> - <div class="btns"> - <div> - <el-button size="default" type="primary" :icon="Plus" @click="openType">新建</el-button> - <el-button size="default" type="warning" :icon="EditPen" plain >修改</el-button> - <el-button size="default" type="danger" :icon="Delete" plain>删除</el-button> - </div> - </div> - <el-table - ref="multipleTableRef" - :data="tableData" - style="width: 100%" - > - <el-table-column - label="序号" - align="center" - type="index" - width="70" - /> - <el-table-column type="selection" align="center" width="55" /> - <el-table-column label="安全目标指标" align="center" sortable> - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column - property="name" - align="center" - label="目标指标编号" - sortable - /> - <el-table-column - property="address" - label="年度" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="指标值" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - label="操作" - align="center" - sortable - show-overflow-tooltip - > - <template #default> - <el-button link type="primary" size="small" :icon="View" @click="handleClick" - >查看</el-button - > - <el-button link type="primary" size="small" :icon="EditPen" @click="handleClick" - >修改</el-button - > - <el-button link type="primary" size="small" :icon="Delete">删除</el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - </div> - <Dailog ref="Show"></Dailog> - </div> + <div> + <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" /> + </el-form-item> + </el-col> + <el-col :span="16"> + <el-form-item> + <el-button type="primary" size="default" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> + <div class="btns"> + <div> + <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button> + <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain>修改</el-button> + <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button> + </div> + </div> + <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"> + <el-table-column label="序号" align="center" type="index" width="70" /> + <el-table-column type="selection" align="center" width="55" /> + <el-table-column type="expand"> + <template #default> + <div class="tableC"> + <el-tabs v-model="activeNames"> + <el-tab-pane label="目标指标分解" name="1"> + <el-table :data="targetDivideDetailList" style="width: 100%"> + <el-table-column align="center" prop="dutyDepartmentId" label="责任部门" /> + <el-table-column align="center" prop="value" label="考核指标" /> + <el-table-column align="center" prop="makerDepartmentId" label="制定人部门" /> + <el-table-column align="center" prop="makeDate" label="制定日期" /> + <el-table-column align="center" prop="commitPersonId" label="上报人" /> + </el-table> + </el-tab-pane> + </el-tabs> + </div> + </template> + </el-table-column> + <el-table-column label="安全目标指标" align="center" property="qName" sortable /> + <el-table-column property="indexNum" align="center" label="目标指标编号" sortable /> + <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip /> + <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> + <el-table-column label="操作" align="center" sortable show-overflow-tooltip> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> + <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button> + <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="400" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </div> + <Dailog ref="Show"></Dailog> + </div> </template> <script lang="ts"> -import search from '../targetSettings/component/search.vue' -import Dailog from './component/Dailog.vue' -import { ref, toRefs, reactive, onMounted, defineComponent } from "vue"; -import { - ElMessageBox, - ElMessage, - ElButton, - ElInput, - TabsPaneContext, - FormInstance, -} from "element-plus"; -import { - Plus, - Delete, - Upload, - Download, - Refresh, - View, - EditPen -} from "@element-plus/icons-vue"; -interface User { - date: string; - name: string; - address: string; -} -import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults"; +import Dailog from './component/Dailog.vue'; +import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; +import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - components: { ElButton, ElInput,search,Dailog}, - setup() { + components: { ElButton, ElInput, Dailog }, + setup() { + // 搜索条件 + const ruleForm = reactive({ + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '1', ////指标类型 1:年指标 2:月指标 + divideStatus: '', ////分解状态 1:已分解 2:未分解 + }, + }); + // 下方导航与表格 + const tableData = ref([]); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; + }; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + onMounted(() => { + listApi(); + }); - - // 下方导航与表格 - const activeName = ref("1"); - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event); - }; - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; - }; - - const tableData: User[] = [ - { - date: "2016-05-03", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-02", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-04", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-01", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-08", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-06", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-07", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); - }; - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); - }; - // 打开弹窗 - const Show=ref() - const openType=()=>{ - Show.value.openDailog() - } - return { - activeName, - handleClick, - tableData, - formatter, - currentPage4, - pageSize4, - handleSizeChange, - handleCurrentChange, - Show, - openType, - Plus, - Delete, - Upload, - Download, - Refresh, - View, - EditPen - }; - }, + const handleSizeChange = (val: number) => { + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); + }; + const handleCurrentChange = (val: number) => { + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); + }; + const activeNames = ref('1'); + // 打开弹窗 + const Show = ref(); + const openD = (title: String, id: number) => { + Show.value.openDailog(title,ruleForm.searchParams.targetType, id); + }; + // 删除 + const onDelete = (id: number) => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(id) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + // ElMessage({ + // type: 'info', + // message: 'Delete canceled', + // }); + }); + }; + // 批量删除 + const warning = ref(true); + const danger = ref(true); + const deletAll = ref(); + const handleSelectionChange = (val: any) => { + let valId = JSON.parse(JSON.stringify(val)); + let arr = []; + for (let i = 0; i < valId.length; i++) { + arr.push(valId[i].id); + } + deletAll.value = arr.toString(); + if (val.length == 1) { + warning.value = false; + danger.value = false; + } else if (val.length == 0) { + warning.value = true; + danger.value = true; + } else { + warning.value = true; + danger.value = false; + } + }; + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(deletAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + ElMessage({ + type: 'info', + message: 'Delete canceled', + }); + }); + }; + return { + listApi, + resetForm, + tableData, + currentPage4, + pageSize4, + total, + ruleForm, + handleSizeChange, + handleCurrentChange, + Show, + openD, + activeNames, + onDelete, + warning, + danger, + deletAll, + handleSelectionChange, + onDeleteAll, + Plus, + Delete, + Upload, + Download, + Refresh, + View, + EditPen, + }; + }, }); </script> <style scoped> +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; +} .minCenter { - width: 100%; - background-color: #fff; - margin-top: 10px; - padding: 0 20px; + width: 100%; + background-color: #fff; + margin-top: 10px; + padding: 0 20px; } .btns { - padding: 0px 0px 10px 0px; - display: flex; - justify-content: space-between; + padding: 0px 0px 10px 0px; + display: flex; + justify-content: space-between; } -.pages{ -padding:20px 0; -display: flex; -justify-content: right; +.pages { + padding: 20px 0; + display: flex; + justify-content: right; +} +.tableC { + margin: 0 10%; } </style> diff --git a/src/views/goalManagement/targetEscalation/index.vue b/src/views/goalManagement/targetEscalation/index.vue index e6d0a44..2865285 100644 --- a/src/views/goalManagement/targetEscalation/index.vue +++ b/src/views/goalManagement/targetEscalation/index.vue @@ -1,156 +1,166 @@ <template> - <div> - <search></search> - <div class="minCenter"> - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> - <el-tab-pane label="检查" name="1"> </el-tab-pane> - <el-tab-pane label="上报" name="2"></el-tab-pane> - <el-tab-pane label="审核" name="3"></el-tab-pane> - </el-tabs> - <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> - <el-table-column label="安全目标指标" align="center" sortable> - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column property="name" align="center" label="目标指标编号" sortable /> - <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip /> - <el-table-column property="address" label="指标值" align="center" sortable show-overflow-tooltip /> - <el-table-column v-if="activeName == 1" label="操作" align="center" show-overflow-tooltip> - <template #default> - <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(0)">检查</el-button> - <el-button link type="primary" size="default" :icon="View" @click="openDai(tableData)">记录</el-button> - </template> - </el-table-column> - <el-table-column v-if="activeName == 2" label="操作" align="center" show-overflow-tooltip> - <template #default> - <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(1)">上报</el-button> - </template> - </el-table-column> - <el-table-column v-if="activeName == 3" label="操作" align="center" show-overflow-tooltip> - <template #default> - <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom()">待审批</el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + <div> + <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" /> + </el-form-item> + </el-col> + <el-col :span="16"> + <el-form-item> + <el-button type="primary" size="default" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="检查" name="1"> </el-tab-pane> + <el-tab-pane label="上报" name="2"></el-tab-pane> + <el-tab-pane label="审核" name="3"></el-tab-pane> + </el-tabs> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column label="安全目标指标" align="center" property="qName" sortable /> + <el-table-column property="indexNum" align="center" label="目标指标编号" sortable /> + <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip /> + <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> + <el-table-column v-if="activeName == 1" label="操作" align="center" show-overflow-tooltip> + <template #default> + <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(0)">检查</el-button> + <el-button link type="primary" size="default" :icon="View" @click="openDai(tableData)">记录</el-button> + </template> + </el-table-column> + <el-table-column v-if="activeName == 2" label="操作" align="center" show-overflow-tooltip> + <template #default> + <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(1)">上报</el-button> + </template> + </el-table-column> + <el-table-column v-if="activeName == 3" label="操作" align="center" show-overflow-tooltip> + <template #default> + <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom()">待审批</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[100, 200, 300, 400]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> </div> - </div> - <Dailog ref="Show"></Dailog> + <Dailog ref="Show"></Dailog> </div> </template> <script lang="ts"> -import search from '../targetSettings/component/search.vue'; -import Dailog from './component/Dailog.vue' +import Dailog from './component/Dailog.vue'; import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; -import { Plus, Delete, Upload, Download, Refresh, View,EditPen} from '@element-plus/icons-vue'; -import {useRouter} from "vue-router" -interface User { - date: string; - name: string; - address: string; -} -import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'; +import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue'; +import { useRouter } from 'vue-router'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - components: { ElButton, ElInput, search,Dailog }, + components: { ElButton, ElInput, Dailog }, setup() { - // 下方导航与表格 - const activeName = ref('1'); - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event); + // 搜索条件 + const ruleForm = reactive({ + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '1', ////指标类型 1:年指标 2:月指标 + divideStatus: '', ////分解状态 1:已分解 2:未分解 + }, + }); + // 重置 + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; }; - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); }; - - const tableData: User[] = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-08', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-06', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-07', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const small = ref(false); - const disabled = ref(false); - const background = ref(false); + // + const handleClick = (val: any) => { + let targetType = JSON.parse(JSON.stringify(val)); + ruleForm.searchParams.targetType = targetType.paneName; + listApi(); + }; + onMounted(() => { + listApi(); + }); + const onAddorUpdata = () => { + listApi(); + }; + // 表格 + const tableData = ref(); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); }; const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); }; - // 记录弹窗 - const Show=ref() - const openDai=(data:any)=>{ - Show.value.openDailog(data) - } + const activeName = ref('1'); + // 记录弹窗 + const Show = ref(); + const openDai = (data: any) => { + Show.value.openDailog(data); + }; // 流程表单 - const router=useRouter() - const jumpFrom=(data:string)=>{ + const router = useRouter(); + const jumpFrom = (data: string) => { router.push({ - path:"/processForms", - query:{ - type:data - } - }) - } + path: '/processForms', + query: { + type: data, + }, + }); + }; return { activeName, + total, handleClick, + ruleForm, + listApi, + onAddorUpdata, tableData, - formatter, + resetForm, currentPage4, pageSize4, handleSizeChange, handleCurrentChange, - small, - disabled, - background, - Show, - openDai, + Show, + openDai, router, jumpFrom, Plus, @@ -159,12 +169,16 @@ Download, Refresh, View, - EditPen + EditPen, }; }, }); </script> <style scoped> +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; +} .minCenter { width: 100%; background-color: #fff; diff --git a/src/views/goalManagement/targetSettings/component/dailogAdd.vue b/src/views/goalManagement/targetSettings/component/dailogAdd.vue index 714da76..cd28085 100644 --- a/src/views/goalManagement/targetSettings/component/dailogAdd.vue +++ b/src/views/goalManagement/targetSettings/component/dailogAdd.vue @@ -1,54 +1,55 @@ <template> - <el-dialog v-model="Shows" :fullscreen="full" title="新建目标设定" width="50%" draggable> + <el-dialog v-model="Shows" :before-close="resetForm" :fullscreen="full" :title="titles" width="50%" draggable> <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form :model="form" label-width="120px"> + <el-form :model="form" :disabled="disabled" ref="ruleFormRef" :rules="rules" label-width="120px"> <el-row> <el-col :span="11"> - <el-form-item label="安全目标指标" size="default"> - <el-input v-model="form.name" /> + <el-form-item label="安全目标指标" prop="qName" size="default"> + <el-input v-model="form.qName" placeholder="请填写安全目标指标" /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="目标指标编号" size="default"> - <el-input v-model="form.name" /> + <el-form-item label="目标指标编号" prop="indexNum" size="default"> + <el-input v-model="form.indexNum" placeholder="请填写目标指标编号" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> - <el-form-item label="年度" size="default"> - <el-input v-model="form.name" /> + <el-form-item label="年度" prop="year" size="default"> + <el-input v-model.number="form.year" placeholder="请填写年度" /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="指标值" size="default"> - <el-input v-model="form.name" /> + <el-form-item label="指标值" prop="value" size="default"> + <el-input v-model="form.value" placeholder="请填写指标值" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="指标级别" size="default"> - <el-select v-model="form.region" placeholder="please select your zone" style="width: 100%"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> + <el-select v-model="form.level" placeholder="请选择" style="width: 100%"> + <el-option label="公司级" value="1">公司级</el-option> + <el-option label="部门分厂级" value="2">部门分厂级</el-option> + <el-option label="工段班组级" value="3">工段班组级</el-option> </el-select> </el-form-item> </el-col> <el-col :span="11" :offset="2"> <el-form-item label="完成期限" size="default"> - <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width:100%" /> + <el-date-picker v-model="form.completeDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" /> </el-form-item> </el-col> </el-row> <el-form-item label="备注信息"> - <el-input v-model="form.desc" size="default" type="textarea" /> + <el-input v-model="form.memo" size="default" type="textarea" /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> - <el-button @click="Shows = false" size="default">关闭</el-button> - <el-button type="primary" @click="Shows = false" size="default">确定</el-button> + <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> + <el-button type="primary" v-if="titles == '查看目标设定' ? false : true" @click="submitForm(ruleFormRef)" size="default">确定</el-button> </span> </template> </el-dialog> @@ -56,25 +57,43 @@ <script lang="ts"> import { ref, toRefs, reactive, onMounted, watch, defineComponent } from 'vue'; import screenfull from 'screenfull'; -import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; -import { FullScreen } from '@element-plus/icons-vue'; - +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus'; +import type { FormInstance, FormRules } from 'element-plus'; +import { Plus, Delete, Upload, Download, Refresh, View, Search, FullScreen } from '@element-plus/icons-vue'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - setup(props) { + setup(props, { emit }) { let Shows = ref(false); - const form = reactive({ - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '', + const ruleFormRef = ref<FormInstance>(); + const form = ref({ + indexNum: '', //目标指标编号 + qName: '', //安全目标指标 + year: '', //年度 + level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级 + memo: '', ////备注信息 + targetType: '', ////指标类型 1:年指标 2:月指标 + completeDate: '', ////完成期限 + divideStatus: '1', ////分解状态 1:已分解 2:未分解 + value: '', ////指标值 }); + const titles = ref(); + const disabled = ref(false); // 打开弹窗 - const openDialog = (type: string, value: any, projectList: any, projectId: string) => { + const openDialog = (title: string, value: any, id: number) => { Shows.value = true; + titles.value = `${title}目标设定`; + form.value.targetType = value; + disabled.value = title == '查看' ? true : false; + if (title == '查看' || title == '修改') + goalManagementApi() + .getTargetMngDetail(id) + .then((res) => { + if (res.data.code == 200) { + form.value = res.data.data; + } else { + ElMessage.error(res.data.msg); + } + }); }; //全屏 const full = ref(false); @@ -85,12 +104,99 @@ full.value = false; } }; + const rules = reactive<FormRules>({ + qName: [ + { + required: true, + message: '安全目标指标不能为空', + trigger: 'change', + }, + ], + indexNum: [ + { + required: true, + message: '目标指标编号不能为空', + trigger: 'change', + }, + ], + year: [ + { + required: true, + message: '年度不能为空', + trigger: 'change', + }, + ], + value: [ + { + required: true, + message: '指标值不能为空', + trigger: 'change', + }, + ], + }); + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + Shows.value = false; + goalManagementApi() + .getTargetMngAddOrupdata(form.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + emit('navAddorUpdata'); + } else { + ElMessage.error(res.data.msg); + formEl.resetFields(); + } + }); + } else { + console.log('error submit!', fields); + } + }); + form.value = { + indexNum: '', //目标指标编号 + qName: '', //安全目标指标 + year: '', //年度 + level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级 + memo: '', ////备注信息 + targetType: '', ////指标类型 1:年指标 2:月指标 + completeDate: '', ////完成期限 + divideStatus: '1', ////分解状态 1:已分解 2:未分解 + value: '', ////指标值 + }; + }; + + const resetForm = (formEl: FormInstance | undefined) => { + if (!formEl) return; + formEl.resetFields(); + Shows.value = false; + form.value = { + indexNum: '', //目标指标编号 + qName: '', //安全目标指标 + year: '', //年度 + level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级 + memo: '', ////备注信息 + targetType: '', ////指标类型 1:年指标 2:月指标 + completeDate: '', ////完成期限 + divideStatus: '1', ////分解状态 1:已分解 2:未分解 + value: '', ////指标值 + }; + }; return { openDialog, + titles, Shows, form, full, toggleFullscreen, + rules, + ruleFormRef, + submitForm, + resetForm, FullScreen, }; }, diff --git a/src/views/goalManagement/targetSettings/index.vue b/src/views/goalManagement/targetSettings/index.vue index 36388e3..0653f49 100644 --- a/src/views/goalManagement/targetSettings/index.vue +++ b/src/views/goalManagement/targetSettings/index.vue @@ -1,263 +1,293 @@ <template> -<div> - <search></search> - <div class="minCenter"> - <el-tabs - v-model="activeName" - class="demo-tabs" - @tab-click="handleClick" - > - <div class="btns"> - <div> - <el-button type="primary" size="default" :icon="Plus" @click="openD('新建')">新建</el-button> - <el-button type="danger" size="default" :icon="Delete" plain>删除</el-button> - </div> - <div> - <!-- <el-button size="default" :icon="Upload" @click="upButton"></el-button> + <div> + <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" /> + </el-form-item> + </el-col> + <el-col :span="16"> + <el-form-item> + <el-button type="primary" size="default" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> + <el-tabs v-model="ruleForm.searchParams.targetType" class="demo-tabs" @tab-click="handleClick"> + <div class="btns"> + <div> + <el-button type="primary" size="default" :icon="Plus" @click="openD('新建')">新建</el-button> + <el-button type="danger" :disabled="danger" size="default" @click="onDeleteAll" :icon="Delete" plain>删除</el-button> + </div> + <div> + <!-- <el-button size="default" :icon="Upload" @click="upButton"></el-button> <el-button size="default" :icon="Download"></el-button> <el-button size="default" :icon="Refresh"></el-button> --> - </div> - </div> - <el-tab-pane label="目标定制(年)" name="1"> </el-tab-pane> - <el-tab-pane label="目标定制(月)" name="2"></el-tab-pane> - </el-tabs> - <el-table - ref="multipleTableRef" - :data="tableData" - style="width: 100%" - > - <el-table-column - label="序号" - align="center" - type="index" - width="70" - /> - <el-table-column type="selection" align="center" width="55" /> - <el-table-column label="安全目标指标" align="center" sortable> - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column - property="name" - align="center" - label="目标指标编号" - sortable - /> - <el-table-column - property="address" - label="年度" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="指标值" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="指标级别" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="完成期限" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="状态" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - property="address" - label="备注信息" - align="center" - sortable - show-overflow-tooltip - /> - <el-table-column - label="操作" - align="center" - sortable - show-overflow-tooltip - > - <template #default> - <el-button link type="primary" size="default" :icon="View" @click="handleClick" - >查看</el-button - > - <el-button link type="primary" size="default" :icon="Delete">删除</el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - <dailogAdd ref="openAdd"></dailogAdd> - <upData ref="upShow"></upData> - </div> - </div> + </div> + </div> + <el-tab-pane label="目标定制(年)" name="1"> </el-tab-pane> + <el-tab-pane label="目标定制(月)" name="2"></el-tab-pane> + </el-tabs> + <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"> + <el-table-column label="序号" align="center" type="index" width="70" /> + <el-table-column type="selection" align="center" width="55" /> + <el-table-column label="安全目标指标" align="center" property="qName" sortable /> + <el-table-column property="indexNum" align="center" label="目标指标编号" sortable /> + <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip /> + <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> + <el-table-column property="level" label="指标级别" align="center" sortable show-overflow-tooltip /> + <el-table-column property="completeDate" label="完成期限" align="center" sortable show-overflow-tooltip /> + <el-table-column label="状态" align="center" sortable show-overflow-tooltip> + <template #default="scope"> + <span v-if="scope.row.divideStatus == 1">已分解</span> + <span v-if="scope.row.divideStatus == 2">未分解</span> + </template> + </el-table-column> + <el-table-column property="memo" label="备注信息" align="center" sortable show-overflow-tooltip /> + <el-table-column label="操作" align="center" width="300" sortable show-overflow-tooltip> + <template #default="scope"> + <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> + <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">修改</el-button> + <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + <dailogAdd ref="openAdd" @navAddorUpdata="onAddorUpdata"></dailogAdd> + <upData ref="upShow"></upData> + </div> + </div> </template> <script lang="ts"> -import dailogAdd from './component/dailogAdd.vue' -import upData from '../../../components/updata/updata.vue' -import search from './component/search.vue' -import { ref, toRefs, reactive, onMounted, defineComponent } from "vue"; -import { - ElMessageBox, - ElMessage, - ElButton, - ElInput, - TabsPaneContext, - FormInstance, -} from "element-plus"; -import { - Plus, - Delete, - Upload, - Download, - Refresh, - View -} from "@element-plus/icons-vue"; -interface User { - date: string; - name: string; - address: string; -} -import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults"; +import dailogAdd from './component/dailogAdd.vue'; +import upData from '../../../components/updata/updata.vue'; +import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; +import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - components: { ElButton, ElInput,dailogAdd,upData,search}, - setup() { - - - // 下方导航与表格 - const activeName = ref("1"); - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event); - }; - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; - }; - - const tableData: User[] = [ - { - date: "2016-05-03", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-02", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-04", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-01", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-08", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-06", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - { - date: "2016-05-07", - name: "Tom", - address: "No. 189, Grove St, Los Angeles", - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const small = ref(false) - const disabled = ref(false) - const background = ref(false) - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); - }; - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); - }; - // 弹窗 - const openAdd=ref() - const openD=(type:String,value:any)=>{ - openAdd.value.openDialog(type,value) - } - - // 上传 - const upShow=ref() - const upButton=()=>{ - upShow.value.openDialog() - } - return { - activeName, - handleClick, - tableData, - formatter, - currentPage4, - pageSize4, - handleSizeChange, - handleCurrentChange, - openAdd, - openD, - upShow, - upButton, - small, - disabled, - background, - Plus, - Delete, - Upload, - Download, - Refresh, - View - }; - }, + components: { ElButton, ElInput, dailogAdd, upData }, + setup() { + // 搜索条件 + const ruleForm = reactive({ + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '1', ////指标类型 1:年指标 2:月指标 + divideStatus: '', ////分解状态 1:已分解 2:未分解 + }, + }); + // 重置 + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; + }; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + // + const handleClick = (val: any) => { + let targetType = JSON.parse(JSON.stringify(val)); + ruleForm.searchParams.targetType = targetType.paneName; + listApi(); + }; + onMounted(() => { + listApi(); + }); + const onAddorUpdata = () => { + listApi(); + }; + // 表格 + const tableData = ref(); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); + const small = ref(false); + const disabled = ref(false); + const background = ref(false); + const handleSizeChange = (val: number) => { + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); + }; + const handleCurrentChange = (val: number) => { + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); + }; + // 弹窗 + const openAdd = ref(); + const openD = (title: String, id: number) => { + openAdd.value.openDialog(title, ruleForm.searchParams.targetType, id); + }; + // 删除 + const onDelete = (id: number) => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(id) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + ElMessage({ + type: 'info', + message: 'Delete canceled', + }); + }); + }; + // 批量删除 + // const warning = ref(true); + const danger = ref(true); + const deletAll = ref(); + const handleSelectionChange = (val: any) => { + let valId = JSON.parse(JSON.stringify(val)); + let arr = []; + for (let i = 0; i < valId.length; i++) { + arr.push(valId[i].id); + } + deletAll.value = arr.toString(); + if (val.length == 1) { + // warning.value = false; + danger.value = false; + } else if (val.length == 0) { + // warning.value = true; + danger.value = true; + } else { + // warning.value = true; + danger.value = false; + } + }; + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getTargetMngDelete(deletAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + // ElMessage({ + // type: 'info', + // message: 'Delete canceled', + // }); + }); + }; + // 上传 + // const upShow = ref(); + // const upButton = () => { + // upShow.value.openDialog(); + // }; + return { + tableData, + currentPage4, + pageSize4, + total, + handleSizeChange, + handleCurrentChange, + handleClick, + openAdd, + openD, + // upShow, + // upButton, + small, + disabled, + background, + Plus, + Delete, + Upload, + Download, + Refresh, + View, + listApi, + ruleForm, + resetForm, + onAddorUpdata, + onDelete, + handleSelectionChange, + deletAll, + danger, + onDeleteAll, + }; + }, }); </script> <style scoped> +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; +} .minCenter { - width: 100%; - background-color: #fff; - margin-top: 10px; - padding: 0 20px; + width: 100%; + background-color: #fff; + margin-top: 10px; + padding: 0 20px; } .btns { - padding: 0px 0px 10px 0px; - display: flex; - justify-content: space-between; + padding: 0px 0px 10px 0px; + display: flex; + justify-content: space-between; } -.pages{ -padding:20px 0; -display: flex; -justify-content: right; +.pages { + padding: 20px 0; + display: flex; + justify-content: right; } </style> -- Gitblit v1.9.2