From 6ccbdd84fc536b3acca422df522fade6b0092a6f Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 06 七月 2022 09:10:40 +0800 Subject: [PATCH] 目标 --- src/views/goalManagement/Goalsummary/index.vue | 199 +++++++++++++++++++++++++++++++++ src/views/goalManagement/safetyAssessment/component/Dailog.vue | 129 +++++++++++++++++++++ vite.config.ts | 2 3 files changed, 329 insertions(+), 1 deletions(-) diff --git a/src/views/goalManagement/Goalsummary/index.vue b/src/views/goalManagement/Goalsummary/index.vue new file mode 100644 index 0000000..8b05f37 --- /dev/null +++ b/src/views/goalManagement/Goalsummary/index.vue @@ -0,0 +1,199 @@ +<template> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <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="请选择责任部门"> + <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 type="primary" @click="submitForm(ruleFormRef)">查询</el-button> + <el-button @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" :icon="Download">导出</el-button> + </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> +</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'; +export default defineComponent({ + components: { ElButton, ElInput }, + setup() { + // 搜索条件 + const ruleForm = reactive({ + pass: '', + checkPass: '', + }); + 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 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}`); + }; + return { + ruleForm, + resetForm, + activeName, + handleClick, + tableData, + formatter, + currentPage4, + pageSize4, + handleSizeChange, + handleCurrentChange, + small, + disabled, + background, + Plus, + Delete, + Upload, + Download, + Refresh, + View, + }; + }, +}); +</script> +<style scoped> +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; + margin-bottom: 10px; +} +.minCenter { + width: 100%; + background-color: #fff; + margin-top: 10px; + padding: 0 20px; +} +.btns { + padding: 10px 0px 10px 0px; + display: flex; + justify-content: left; +} +.btns p{ + font-size: 18px; + line-height: 40px; + margin-right: 20px; +} +.pages { + padding: 20px 0; + display: flex; + justify-content: right; +} +</style> \ No newline at end of file diff --git a/src/views/goalManagement/safetyAssessment/component/Dailog.vue b/src/views/goalManagement/safetyAssessment/component/Dailog.vue new file mode 100644 index 0000000..d768314 --- /dev/null +++ b/src/views/goalManagement/safetyAssessment/component/Dailog.vue @@ -0,0 +1,129 @@ +<template> + <el-dialog v-model="dialogVisible" title="目标分解" width="70%" draggable> + <el-form :model="form" label-width="120px"> + <el-row> + <el-col :span="11"> + <el-form-item label="安全目标指标"> + <el-input v-model="form.name"> + <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="目标指标编号"> + <el-input v-model="form.name" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="11"> + <el-form-item label="年度"> + <el-input v-model="form.name" /> + </el-form-item> + </el-col> + <el-col :span="11" :offset="2"> + <el-form-item label="指标值"> + <el-input v-model="form.name" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="目标指标分解" name="1"> + </el-tab-pane> + </el-tabs> + <el-table :data="tableData" style="width: 100%"> + <el-table-column align="center" type="index" label="序号" width="70" /> + <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-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="address" label="考核时间" /> + <el-table-column align="center" label="操作"> + <template #default> + <el-button link 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> + </span> + </template> + </el-dialog> + <DailogSearch ref="Shows"></DailogSearch> +</template> +<script lang="ts"> +import { defineComponent, ref, reactive } from 'vue'; +import { Search } from '@element-plus/icons-vue'; +import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue' +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) => { + dialogVisible.value = true; + }; + // 导航 + 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 Shows=ref() + const daiInpt=()=>{ + Shows.value.openDailog() + } + return { + form, + dialogVisible, + openDailog, + activeName, + tableData, + Shows, + daiInpt, + Search, + }; + }, +}); +</script> +<style scoped> +.el-row { + padding: 0 0 20px 0; +} +</style> diff --git a/vite.config.ts b/vite.config.ts index cf7bc27..ddc2da1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -28,7 +28,7 @@ open: env.VITE_OPEN, proxy: { '/gitee': { - target: 'https://gitee.com', + target: 'https://192.168.0.76:8009', ws: true, changeOrigin: true, rewrite: (path) => path.replace(/^\/gitee/, ''), -- Gitblit v1.9.2