From ac680789d9e47d8a6508949146a18c56e1f112d0 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期一, 04 七月 2022 09:14:12 +0800
Subject: [PATCH] 目标
---
src/components/DailogSearch/DailogSearch.vue | 15 ++
src/views/goalManagement/targetSettings/index.vue | 11 +
src/views/goalManagement/targetEscalation/component/Dailog.vue | 46 +++++++++
src/views/goalManagement/targetEscalation/processForms.vue | 37 +++++++
src/views/goalManagement/targetEscalation/index.vue | 173 ++++++++++++++++++++++++++++++++++
5 files changed, 277 insertions(+), 5 deletions(-)
diff --git a/src/components/DailogSearch/DailogSearch.vue b/src/components/DailogSearch/DailogSearch.vue
index 1ab9ca2..239a164 100644
--- a/src/components/DailogSearch/DailogSearch.vue
+++ b/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,
};
},
diff --git a/src/views/goalManagement/targetEscalation/component/Dailog.vue b/src/views/goalManagement/targetEscalation/component/Dailog.vue
new file mode 100644
index 0000000..db1fa1a
--- /dev/null
+++ b/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>
diff --git a/src/views/goalManagement/targetEscalation/index.vue b/src/views/goalManagement/targetEscalation/index.vue
new file mode 100644
index 0000000..af2d37b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/goalManagement/targetEscalation/processForms.vue b/src/views/goalManagement/targetEscalation/processForms.vue
new file mode 100644
index 0000000..b4390a5
--- /dev/null
+++ b/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>
diff --git a/src/views/goalManagement/targetSettings/index.vue b/src/views/goalManagement/targetSettings/index.vue
index dcebe24..3af2890 100644
--- a/src/views/goalManagement/targetSettings/index.vue
+++ b/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,
--
Gitblit v1.9.2