目标

shj

2022-07-07 0f7d430071d52b1c331741e5dfcbe006434e350d

 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%;