From 0f7d430071d52b1c331741e5dfcbe006434e350d Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期四, 07 七月 2022 15:15:48 +0800 Subject: [PATCH] 目标 --- /dev/null | 182 ---------------- src/views/goalManagement/targetImprovements/component/Dailogprove.vue | 92 ++++++++ src/views/goalManagement/targetImprovements/index.vue | 165 ++++++++++++-- src/views/goalManagement/processForms/component/formInformationTop.vue | 78 +++++++ src/views/goalManagement/processForms/processForms.vue | 128 +++++++++++ src/views/goalManagement/processForms/component/lowerPlate.vue | 0 6 files changed, 433 insertions(+), 212 deletions(-) diff --git a/src/views/goalManagement/processForms/component/formInformationTop.vue b/src/views/goalManagement/processForms/component/formInformationTop.vue new file mode 100644 index 0000000..5d837a3 --- /dev/null +++ b/src/views/goalManagement/processForms/component/formInformationTop.vue @@ -0,0 +1,78 @@ +<template> + <el-form ref="form" :model="form" label-width="120px"> + <el-row style="padding: 20px"> + <el-col :span="11"> + <el-form-item label="安全目标指标"> + <el-input v-model="form.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="11" :offset="2"> + <el-form-item label="目标指标编号"> + <el-input v-model="form.name"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row style="padding: 20px"> + <el-col :span="11"> + <el-form-item label="年度"> + <el-input v-model="form.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="11" :offset="2"> + <el-form-item label="指标值"> + <el-input v-model="form.name"></el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <el-tabs v-model="activeName" style="padding: 0 20px"> + <el-tab-pane label="考核指标" name="1"> + <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" label="检查值"> + <template #default> + <el-input v-model="form.name" placeholder=""></el-input> + </template> + </el-table-column> + <el-table-column align="center" prop="address" label="检查人" /> + <el-table-column align="center" prop="address" label="检查时间" /> + </el-table> + <div class="tiao"> + <div class="typeS">审批</div> + </div> + <el-row style="padding:20px 0"> + <el-col :span="6" style="text-align:right">一级审批:</el-col> + <el-col :span="18">同意</el-col> + </el-row> + <el-row style="padding:0 0 20px 0"> + <el-col :span="6"></el-col> + <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col> + </el-row> + </el-tab-pane> + </el-tabs> +</template> +<script lang="ts"> +import { defineComponent,ref,reactive } from 'vue' + +export default defineComponent({ + setup() { + const form = reactive({ + name: '', + region: '', + date1: '', + date2: '', + delivery: false, + type: [], + resource: '', + desc: '', + }); + return{ + form + } + }, +}) +</script> diff --git a/src/views/goalManagement/targetEscalation/component/lowerPlate.vue b/src/views/goalManagement/processForms/component/lowerPlate.vue similarity index 100% rename from src/views/goalManagement/targetEscalation/component/lowerPlate.vue rename to src/views/goalManagement/processForms/component/lowerPlate.vue diff --git a/src/views/goalManagement/processForms/processForms.vue b/src/views/goalManagement/processForms/processForms.vue new file mode 100644 index 0000000..714dda2 --- /dev/null +++ b/src/views/goalManagement/processForms/processForms.vue @@ -0,0 +1,128 @@ +<template> + <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报(检查)--检查</h4> + <div class="box"> + <el-menu + :default-active="activeIndex" + class="el-menu-demo" + background-color="#ebeef5" + text-color="#fff" + active-text-color="#fff" + mode="horizontal" + @select="handleSelect" + > + <el-menu-item index="1">表单信息</el-menu-item> + <el-menu-item index="2">流程图</el-menu-item> + </el-menu> + <div v-if="activeIndex == 1" class="navType"> + + </div> + <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px"> + <div class="title2">流程图</div> + <div style="width:100%;height:400px"></div> + </div> + </div> + <lowerPlate></lowerPlate> + <div class="btns"> + <el-button type="primary">发起上报</el-button> + </div> +</template> +<script lang="ts"> +import { defineComponent, reactive, ref,onMounted } from 'vue'; +import { useRouter } from 'vue-router'; +import lowerPlate from './component/lowerPlate.vue' +export default defineComponent({ + components:{lowerPlate}, + setup() { + const activeIndex = ref('1'); + const handleSelect = (key: string, keyPath: string[]) => { + // console.log(key, keyPath); + activeIndex.value = key; + }; + const form = reactive({ + name: '', + region: '', + date1: '', + date2: '', + delivery: false, + type: [], + resource: '', + desc: '', + }); + const activeName = ref('1'); + const tableData = [ + { + date: '2016-05-03', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + ]; + const router=useRouter() + const Type=onMounted(()=>{ + // console.log("xxxxxxx",router) + }) + + return { + activeIndex, + handleSelect, + form, + activeName, + tableData, + router, + Type + }; + }, +}); +</script> +<style scoped> +.title { + text-align: center; + font-size: 16px; + margin-bottom: 20px; +} +.box{ + border: 1px solid #dcdfe6; + box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%); +} +.navType { + background-color: #fff; +} +.tiao{ + width: 100%; + height: 1px; + background-color: #dcdfe6; + margin: 30px 0 ; + position: relative; +} +.typeS{ + width: 80px; + background-color: #fff; + position: absolute; + left: 30px; + top: -9px; + font-size: 14px; + text-align: center; +} +.logoColor{ + background-color: #67c23a; + color: #fff; + padding: 5px 8px; + border-radius: 5px; + margin-right: 5px; +} +.btns{ + width: 100%; + padding:20px 0; + background-color: #fff; + position: fixed; + bottom: 0px; + left: 0px; + text-align: center; + box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%); + +} +.title2{ + padding: 20px 0 20px 10px; + width: 100%; + border: 1px solid #dcdfe6; +} +</style> diff --git a/src/views/goalManagement/targetEscalation/processForms.vue b/src/views/goalManagement/targetEscalation/processForms.vue deleted file mode 100644 index d0e1ee2..0000000 --- a/src/views/goalManagement/targetEscalation/processForms.vue +++ /dev/null @@ -1,182 +0,0 @@ -<template> - <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报(检查)--检查</h4> - <div class="box"> - <el-menu - :default-active="activeIndex" - class="el-menu-demo" - background-color="#ebeef5" - text-color="#fff" - active-text-color="#fff" - mode="horizontal" - @select="handleSelect" - > - <el-menu-item index="1">表单信息</el-menu-item> - <el-menu-item index="2">流程图</el-menu-item> - </el-menu> - <div v-if="activeIndex == 1" class="navType"> - <el-form ref="form" :model="form" label-width="120px"> - <el-row style="padding: 20px"> - <el-col :span="11"> - <el-form-item label="安全目标指标"> - <el-input v-model="form.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="11" :offset="2"> - <el-form-item label="目标指标编号"> - <el-input v-model="form.name"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row style="padding: 20px"> - <el-col :span="11"> - <el-form-item label="年度"> - <el-input v-model="form.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="11" :offset="2"> - <el-form-item label="指标值"> - <el-input v-model="form.name"></el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <el-tabs v-model="activeName" style="padding: 0 20px"> - <el-tab-pane label="考核指标" name="1"> - <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" label="检查值"> - <template #default> - <el-input v-model="form.name" placeholder=""></el-input> - </template> - </el-table-column> - <el-table-column align="center" prop="address" label="检查人" /> - <el-table-column align="center" prop="address" label="检查时间" /> - </el-table> - <div class="tiao"> - <div class="typeS">审批</div> - </div> - <el-row style="padding:20px 0"> - <el-col :span="6" style="text-align:right">一级审批:</el-col> - <el-col :span="18">同意</el-col> - </el-row> - <el-row style="padding:0 0 20px 0"> - <el-col :span="6"></el-col> - <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col> - </el-row> - </el-tab-pane> - </el-tabs> - </div> - <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px"> - <div class="title2">流程图</div> - <div style="width:100%;height:400px"></div> - </div> - </div> - <lowerPlate></lowerPlate> - <div class="btns"> - <el-button type="primary">发起上报</el-button> - </div> -</template> -<script lang="ts"> -import { defineComponent, reactive, ref,onMounted } from 'vue'; -import { useRouter } from 'vue-router'; -import lowerPlate from './component/lowerPlate.vue' -export default defineComponent({ - components:{lowerPlate}, - setup() { - const activeIndex = ref('1'); - const handleSelect = (key: string, keyPath: string[]) => { - // console.log(key, keyPath); - activeIndex.value = key; - }; - const form = reactive({ - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '', - }); - const activeName = ref('1'); - const tableData = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const router=useRouter() - const Type=onMounted(()=>{ - // console.log("xxxxxxx",router) - }) - - return { - activeIndex, - handleSelect, - form, - activeName, - tableData, - router, - Type - }; - }, -}); -</script> -<style scoped> -.title { - text-align: center; - font-size: 16px; - margin-bottom: 20px; -} -.box{ - border: 1px solid #dcdfe6; - box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%); -} -.navType { - background-color: #fff; -} -.tiao{ - width: 100%; - height: 1px; - background-color: #dcdfe6; - margin: 30px 0 ; - position: relative; -} -.typeS{ - width: 80px; - background-color: #fff; - position: absolute; - left: 30px; - top: -9px; - font-size: 14px; - text-align: center; -} -.logoColor{ - background-color: #67c23a; - color: #fff; - padding: 5px 8px; - border-radius: 5px; - margin-right: 5px; -} -.btns{ - width: 100%; - padding:20px 0; - background-color: #fff; - position: fixed; - bottom: 0px; - left: 0px; - text-align: center; - box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%); - -} -.title2{ - padding: 20px 0 20px 10px; - width: 100%; - border: 1px solid #dcdfe6; -} -</style> diff --git a/src/views/goalManagement/targetImprovements/component/Dailogprove.vue b/src/views/goalManagement/targetImprovements/component/Dailogprove.vue new file mode 100644 index 0000000..8230e24 --- /dev/null +++ b/src/views/goalManagement/targetImprovements/component/Dailogprove.vue @@ -0,0 +1,92 @@ +<template> + <el-dialog v-model="dialogVisible" title="Tips" width="50%" :before-close="handleClose"> + <el-form :model="form" label-width="120px"> + <el-row> + <el-col :span="11"> + <el-form-item label="安全目标指标"> + <el-input v-model="form.name"></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-row> + <el-col :span="11"> + <el-form-item label="改进期限"> + <el-date-picker v-model="form.date1" type="date" placeholder="选择日期时间" style="width: 100%" /> + </el-form-item> + </el-col> + <el-col :span="11" :offset="2"> + <el-form-item label="发起人"> + <el-input v-model="model"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="11"> + <el-form-item label="发起时间"> + <el-date-picker v-model="form.date1" type="date" placeholder="选择日期时间" style="width: 100%" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <el-tabs v-model="activeName" class="demo-tabs"> + <el-tab-pane label="目标指标" name="first"></el-tab-pane> + </el-tabs> + <template #footer> + <span class="dialog-footer"> + <el-button @click="dialogVisible = false">关闭</el-button> + </span> + </template> + </el-dialog> +</template> +<script lang="ts"> +import { defineComponent, ref, reactive } from 'vue'; +import { Plus, Delete, Upload, Download, Refresh, View, Search } from '@element-plus/icons-vue'; +export default defineComponent({ + setup() { + const dialogVisible = ref(false); + const form = reactive({ + name: '', + region: '', + date1: '', + date2: '', + delivery: false, + type: [], + resource: '', + desc: '', + }); + const openDailog = () => { + dialogVisible.value = true; + }; + const activeName = ref('first'); + return { + dialogVisible, + form, + openDailog, + activeName, + Search, + }; + }, +}); +</script> +<style scoped> +.el-row { + padding: 0 0 20px 0; +} +</style> \ No newline at end of file diff --git a/src/views/goalManagement/targetImprovements/index.vue b/src/views/goalManagement/targetImprovements/index.vue index 25db955..2f48492 100644 --- a/src/views/goalManagement/targetImprovements/index.vue +++ b/src/views/goalManagement/targetImprovements/index.vue @@ -1,5 +1,5 @@ <template> - <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> <el-row> <el-col :span="4"> <el-form-item> @@ -20,17 +20,79 @@ </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-tab-pane label="完成" name="4"></el-tab-pane> - </el-tabs> - <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="发起改进" name="1"> + <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 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="200" 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> + </el-tab-pane> + <el-tab-pane label="整改" name="2"> + <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 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="200" sortable show-overflow-tooltip> + <template #default> + <el-button link type="primary" size="default" :icon="View" @click="openDai">查看</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="3"> + <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> @@ -39,10 +101,9 @@ <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> + <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="200" 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> @@ -63,7 +124,46 @@ @current-change="handleCurrentChange" /> </div> + </el-tab-pane> + <el-tab-pane label="完成" name="4"> + <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 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="200" 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> + </el-tab-pane> + </el-tabs> </div> + <Dailogprove ref="Show"></Dailogprove> </template> <script lang="ts"> import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; @@ -75,19 +175,20 @@ address: string; } import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'; +import Dailogprove from './component/Dailogprove.vue'; export default defineComponent({ - components: { ElButton, ElInput }, + components: { ElButton, ElInput,Dailogprove}, setup() { - // 搜索条件 + // 搜索条件 const ruleForm = reactive({ pass: '', checkPass: '', }); - const resetForm = (formEl: FormInstance | undefined) => { - console.log(!formEl); - if (!formEl) return; - formEl.resetFields(); - }; + const resetForm = (formEl: FormInstance | undefined) => { + console.log(!formEl); + if (!formEl) return; + formEl.resetFields(); + }; // 下方导航与表格 const activeName = ref('1'); const handleClick = (tab: TabsPaneContext, event: Event) => { @@ -145,11 +246,13 @@ const handleCurrentChange = (val: number) => { console.log(`current page: ${val}`); }; - - + const Show=ref() + const openDai=()=>{ + Show.value.openDailog() + } return { - ruleForm, - resetForm, + ruleForm, + resetForm, activeName, handleClick, tableData, @@ -161,6 +264,8 @@ small, disabled, background, + Show, + openDai, Plus, Delete, Upload, @@ -173,9 +278,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%; -- Gitblit v1.9.2