目标

shj

2022-07-04 ac680789d9e47d8a6508949146a18c56e1f112d0

目标

 src/components/DailogSearch/DailogSearch.vue

@@ -1,7 +1,7 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable>
        <el-row>
            <el-col :span="20">
            <el-col :span="18">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
            <el-row>
                <el-col :span="6">
@@ -43,7 +43,11 @@
            @current-change="handleCurrentChange"
        />
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="6">
            <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
        </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
@@ -97,6 +101,11 @@
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
        };
        return {
            dialogVisible,
            openDailog,
@@ -105,6 +114,8 @@
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
        };
    },

 src/views/goalManagement/targetEscalation/component/Dailog.vue

对比新文件
@@ -0,0 +1,46 @@
<template>
     <el-dialog
    v-model="dialogVisible"
    title="记录"
    width="50%"
    draggable
  >
   <el-table :data="tableData" style="width: 100%">
    <el-table-column align="center" label="序号" type="index" width="80"/>
    <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="date" label="制定日期" />
    <el-table-column align="center" prop="name" label="检查值" />
    <el-table-column align="center" prop="name" label="检查人" />
    <el-table-column align="center" prop="address" label="检查时间" />
  </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent,reactive,ref} from 'vue'

export default defineComponent({
    setup() {
        const dialogVisible = ref(false)
        const tableData=ref()
        const openDailog=(data:any)=>{
            dialogVisible.value=true
            tableData.value=data
        }
        return{
        dialogVisible,
        tableData,
        openDailog
        }
    },
})
</script>

 src/views/goalManagement/targetEscalation/index.vue

对比新文件
@@ -0,0 +1,173 @@
<template>
    <search></search>
    <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-tabs>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <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 v-if="activeName == 1" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom">检查</el-button>
                    <el-button link type="primary" size="default" :icon="View" @click="openDai(tableData)">记录</el-button>
                </template>
            </el-table-column>
            <el-table-column v-if="activeName == 2" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="handleClick">上报</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>
    </div>
    <Dailog ref="Show"></Dailog>
</template>
<script lang="ts">
import search from '../targetSettings/component/search.vue';
import Dailog from './component/Dailog.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';
import {useRouter} from "vue-router"
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, search,Dailog },
    setup() {
        // 下方导航与表格
        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}`);
        };
        // 记录弹窗
        const Show=ref()
        const openDai=(data:any)=>{
            Show.value.openDailog(data)
        }
        // 流程表单
        const router=useRouter()
        const jumpFrom=()=>{
            router.push({
                path:"/processForms"
            })
        }
        return {
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Show,
            openDai,
            router,
            jumpFrom,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            EditPen
        };
    },
});
</script>
<style scoped>
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/targetEscalation/processForms.vue

对比新文件
@@ -0,0 +1,37 @@
<template>
    <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#f5f7fa"
        active-text-color="#a9d86e"
        mode="horizontal"
        @select="handleSelect"
    >
        <el-menu-item index="1">表单信息</el-menu-item>
        <el-menu-item index="2">流程图</el-menu-item>
    </el-menu>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup() {
        const activeIndex = ref('1');
        const handleSelect = (key: string, keyPath: string[]) => {
            console.log(key, keyPath);
        };
        return {
            activeIndex,
            handleSelect,
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
</style>

 src/views/goalManagement/targetSettings/index.vue

@@ -24,7 +24,6 @@
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="序号"
@@ -91,10 +90,10 @@
              show-overflow-tooltip
            >
              <template #default>
                <el-button link type="primary" size="small" :icon="View" @click="handleClick"
                <el-button link type="primary" size="default" :icon="View" @click="handleClick"
                  >查看</el-button
                >
                <el-button link type="primary" size="small" :icon="Delete">删除</el-button>
                <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -196,6 +195,9 @@
    ];
    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`);
    };
@@ -226,6 +228,9 @@
      openD,
      upShow,
      upButton,
      small,
      disabled,
      background,
      Plus,
      Delete,
      Upload,