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/Goalsummary/index.vue | 286 +++++++++++++++++++++++++++++--------------------------- 1 files changed, 149 insertions(+), 137 deletions(-) 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; -- Gitblit v1.9.2