<template>
|
<div class="system-edit-user-container">
|
<el-dialog title="应急演练计划--修改审批进度" v-model="isShowDialog" width="769px" draggable :fullscreen="full">
|
<el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
|
<!-- <img class="process-status-img" src=""> -->
|
<el-tabs type="border-card">
|
<el-tab-pane label="流转记录">
|
<el-card class="box-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>流转记录</span>
|
</div>
|
</template>
|
<div>
|
<el-steps :active="2">
|
<el-step title="开始" description="胡海涛,2022-07-09 20:41:50" />
|
<el-step title="一级审批" description="管理员,2022-07-09 20:41:50" />
|
</el-steps>
|
</div>
|
<el-table :data="tableData" stripe style="width: 100%">
|
<el-table-column prop="date" label="执行环节" width="120" />
|
<el-table-column prop="name" label="执行人" width="120" />
|
<el-table-column prop="address" label="开始时间" width="100" />
|
<el-table-column prop="address" label="结束时间" width="100" />
|
<el-table-column prop="address" label="办理状态" width="100" />
|
<el-table-column prop="address" label="审批意见" width="100" />
|
<el-table-column prop="address" label="任务历时" width="100" />
|
</el-table>
|
</el-card>
|
</el-tab-pane>
|
<el-tab-pane label="流程信息">
|
<el-card class="box-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>流程信息</span>
|
</div>
|
</template>
|
<div>
|
<el-timeline>
|
<el-timeline-item timestamp="2018/4/12" placement="top" color="rgb(63, 158, 255)">
|
<el-card>
|
<h4 style="margin: 10px 0; padding-bottom: 10px">一级审批</h4>
|
<el-row>
|
<el-col class="tip" :span="22" :offset="1">
|
<div class="item">
|
<span class="label">审批人：</span>
|
<span class="value">管理员</span>
|
</div>
|
<div class="item">
|
<span class="label">办理状态：</span>
|
<span class="value">
|
<!-- <el-tag-->
|
<!-- v-for="item in items"-->
|
<!-- :key="item.label"-->
|
<!-- :type="item.type"-->
|
<!-- class="mx-1"-->
|
<!-- effect="dark"-->
|
<!-- >-->
|
<!-- {{ item.label }}-->
|
<!-- </el-tag>-->
|
<p class="text">等待审核</p>
|
</span>
|
</div>
|
<div class="item">
|
<span class="label">审批意见：</span>
|
<span class="value">等待审核</span>
|
</div>
|
<div class="item">
|
<span class="label">开始时间：</span>
|
<span class="value">2022-07-09 20:41:50</span>
|
</div>
|
<div class="item">
|
<span class="label">结束时间：</span>
|
<span class="value">2022-07-09 20:41:50</span>
|
</div>
|
<div class="item">
|
<span class="label">用时：</span>
|
<span class="value">0秒</span>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-timeline-item>
|
<el-timeline-item timestamp="2018/4/3" placement="top" color="rgb(63, 158, 255)">
|
<el-card>
|
<h4>开始</h4>
|
<el-row>
|
<el-col class="tip" :span="22" :offset="1">
|
<div class="item">
|
<span class="label">审批人：</span>
|
<span class="value">胡海涛</span>
|
</div>
|
<div class="item">
|
<span class="label">办理状态：</span>
|
<span class="value">
|
<p class="text">开始</p>
|
</span>
|
</div>
|
<div class="item">
|
<span class="label">审批意见：</span>
|
<span class="value">等待审核</span>
|
</div>
|
<div class="item">
|
<span class="label">开始时间：</span>
|
<span class="value">2022-07-09 20:41:50</span>
|
</div>
|
<div class="item">
|
<span class="label">结束时间：</span>
|
<span class="value">2022-07-09 20:41:50</span>
|
</div>
|
<div class="item">
|
<span class="label">用时：</span>
|
<span class="value">0秒</span>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-card>
|
</el-tab-pane>
|
<el-tab-pane label="流程图">
|
<el-card class="box-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>流程图</span>
|
</div>
|
</template>
|
<div></div>
|
</el-card>
|
</el-tab-pane>
|
</el-tabs>
|
</el-dialog>
|
<RegionsDialog ref="Shows" />
|
<UserCheckbox ref="userRef" />
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { ref, defineComponent } from 'vue';
|
|
import type { TagProps } from 'element-plus';
|
|
import { Search, FullScreen } from '@element-plus/icons-vue';
|
import UserCheckbox from '/@/components/userCheckbox/index.vue';
|
import RegionsDialog from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue';
|
|
export default defineComponent({
|
name: 'openAdd',
|
components: {
|
RegionsDialog,
|
UserCheckbox,
|
},
|
setup() {
|
const isShowDialog = ref(false);
|
// 打开弹窗
|
const openDialog = () => {
|
// state.ruleForm = row;
|
isShowDialog.value = true;
|
};
|
// 关闭弹窗
|
const closeDialog = () => {
|
isShowDialog.value = false;
|
};
|
const tableData = [
|
{
|
date: '2016-05-03',
|
name: 'Tom',
|
address: '2022-07-09 20:41:50',
|
},
|
{
|
date: '2016-05-02',
|
name: 'Tom',
|
address: '2022-07-09 20:41:50',
|
},
|
{
|
date: '2016-05-04',
|
name: 'Tom',
|
address: '2022-07-09 20:41:50',
|
},
|
{
|
date: '2016-05-01',
|
name: 'Tom',
|
address: '2022-07-09 20:41:50',
|
},
|
];
|
|
type Item = { type: TagProps['type']; label: string };
|
|
const items = ref<Array<Item>>([{ type: '', label: '等待审核' }]);
|
//全屏
|
const full = ref(false);
|
const toggleFullscreen = () => {
|
if (full.value == false) {
|
full.value = true;
|
} else {
|
full.value = false;
|
}
|
};
|
return {
|
openDialog,
|
closeDialog,
|
isShowDialog,
|
Search,
|
tableData,
|
items,
|
toggleFullscreen,
|
FullScreen,
|
full,
|
};
|
},
|
});
|
</script>
|
<style scoped lang="scss">
|
.process-status-img {
|
width: 128px;
|
height: auto;
|
position: absolute;
|
right: 10px;
|
top: 60px;
|
z-index: 999;
|
}
|
//弹窗底部边框线
|
::v-deep .el-dialog__footer {
|
border-top: 1px solid #e8e8e8;
|
border-radius: 0 0 4px 4px;
|
}
|
//弹窗顶部边框线
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e8e8e8;
|
margin-right: 0;
|
border-radius: 4px 4px 0 0;
|
}
|
//tabs字体颜色
|
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
color: #a9d86e !important;
|
}
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
//.box-card {
|
// width: 480px;
|
//}
|
//步骤条字体大小
|
::v-deep .el-step__icon-inner {
|
font-size: 14px !important;
|
}
|
//步骤条颜色
|
::v-deep .el-step__line {
|
background-color: #409eff;
|
}
|
//表头
|
::v-deep .el-table th.el-table__cell {
|
background-color: #f6f7fa;
|
font-weight: 400;
|
color: #909399;
|
}
|
.el-table .sort-caret.ascending {
|
border-bottom-color: #c0c4cc;
|
}
|
|
.tip {
|
padding: 8px 16px;
|
background-color: #ecf8ff;
|
border-radius: 4px;
|
border-left: 5px solid #50bfff;
|
margin: 20px 0;
|
}
|
.item {
|
height: 32px;
|
line-height: 32px;
|
margin-bottom: 8px;
|
}
|
.item .label {
|
display: inline-block;
|
height: 100%;
|
width: 70px;
|
font-size: 14px;
|
color: #5e6d82;
|
text-align: end;
|
vertical-align: top;
|
}
|
.item .value {
|
padding-left: 10px;
|
font-size: 14px;
|
max-width: calc(100% - 90px);
|
color: #5e6d82;
|
display: inline-block;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.text {
|
background-color: #409eff;
|
color: #fff;
|
border-width: 1px;
|
border-style: solid;
|
border-radius: 4px;
|
height: 24px;
|
padding: 0 8px;
|
line-height: 22px;
|
display: inline-block;
|
}
|
</style>
|
