From 2b4328392746fc59f5edf98fed629f8db2804e18 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 27 七月 2022 09:29:23 +0800 Subject: [PATCH] 对接 --- src/views/goalManagement/targetEscalation/index.vue | 272 ++++++++++++++++++++++++++++------------------------- 1 files changed, 143 insertions(+), 129 deletions(-) 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; -- Gitblit v1.9.2