From b80d156b719cef2b9e4fce7e5ada5325681585a9 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 14 七月 2022 11:15:57 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut --- src/views/goalManagement/performanceAppraisal/index.vue | 303 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 296 insertions(+), 7 deletions(-) diff --git a/src/views/goalManagement/performanceAppraisal/index.vue b/src/views/goalManagement/performanceAppraisal/index.vue index e340b14..543d4ce 100644 --- a/src/views/goalManagement/performanceAppraisal/index.vue +++ b/src/views/goalManagement/performanceAppraisal/index.vue @@ -1,12 +1,301 @@ <template> - + <div> + <div class="minCenter"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="安全考核管理" name="1"> + <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-select v-model="ruleForm.region" style="width: 100%" 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">查询</el-button> + <el-button>重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="btns"> + <div> + <el-button type="primary" :icon="Plus" @click="openDai">新建</el-button> + <el-button type="warning" plain :icon="EditPen">修改</el-button> + <el-button type="danger" plain :icon="Delete">删除</el-button> + </div> + </div> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <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="tableData" style="width: 100%"> + <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-tab-pane> + </el-tabs> + </div> + </template> + </el-table-column> + <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 label="操作" align="center" width="250px"> + <template #default> + <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button> + <el-button link type="primary" size="default" :icon="EditPen" @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> + </el-tab-pane> + <el-tab-pane label="考核标准设定" name="2"> + <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.pass" placeholder="标准标题" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <el-button type="primary">查询</el-button> + <el-button>重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="btns"> + <div> + <el-button type="primary" :icon="Plus" @click="openDaiK('新建')">新建</el-button> + <el-button type="warning" plain :icon="EditPen">修改</el-button> + <el-button type="danger" plain :icon="Delete">删除</el-button> + </div> + </div> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <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="tableData" style="width: 100%"> + <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-tab-pane> + </el-tabs> + </div> + </template> + </el-table-column> + <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 label="操作" align="center" width="250px"> + <template #default> + <el-button link type="primary" size="default" :icon="View" @click="openDaiK('查看')">查看</el-button> + <el-button link type="primary" size="default" :icon="EditPen" @click="openDaiK('修改')">修改</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> + </el-tab-pane> + </el-tabs> + </div> + <DailogAq ref="ShowAq"></DailogAq> + <DailogKh ref="ShowKh"></DailogKh> + </div> </template> <script lang="ts"> -import { defineComponent } from 'vue' - +import DailogAq from './component/DailogAq.vue' +import DailogKh from './component/DailogKh.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'; export default defineComponent({ - setup() { - - }, -}) + components: { ElButton, ElInput,DailogAq,DailogKh}, + setup() { + const ruleForm = reactive({}); + + // 下方导航与表格 + const activeName = ref('1'); + const activeNames = 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 ShowAq=ref() + const openDai=()=>{ + ShowAq.value.openDailog() + } + const ShowKh=ref() + const openDaiK=(name:string)=>{ + if(name=='新建'){ + ShowKh.value.openDailog(false) + }else{ + ShowKh.value.openDailog(true) + } + + } + return { + activeName, + activeNames, + handleClick, + tableData, + formatter, + currentPage4, + pageSize4, + handleSizeChange, + handleCurrentChange, + small, + disabled, + background, + ruleForm, + ShowAq, + openDai, + ShowKh, + openDaiK, + Plus, + Delete, + Upload, + Download, + Refresh, + View, + EditPen, + }; + }, +}); </script> +<style scoped> +.minCenter { + width: 100%; + background-color: #fff; + margin-top: 10px; + padding: 0 20px; +} +.btns { + padding: 20px; +} +.topTitle { + padding: 5px 0 20px 0; + border-bottom: 1px solid #dedede; +} +.pages { + padding: 20px 0; + display: flex; + justify-content: right; +} +.tableC{ + margin:0 10%; +} +</style> -- Gitblit v1.9.2