<template>
|
<div class="system-user-container">
|
<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">
|
<formInformationTop v-if="false"></formInformationTop>
|
<formInformationTops></formInformationTops>
|
</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>
|
</div>
|
</template>
|
<script lang="ts">
|
import { defineComponent, reactive, ref,onMounted } from 'vue';
|
import { useRouter } from 'vue-router';
|
import formInformationTop from './component/formInformationTop.vue'
|
import formInformationTops from './component/formInformationTops.vue'
|
import lowerPlate from './component/lowerPlate.vue'
|
export default defineComponent({
|
components:{lowerPlate,formInformationTop,formInformationTops},
|
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 router=useRouter()
|
const Type=onMounted(()=>{
|
// console.log("xxxxxxx",router)
|
})
|
|
return {
|
activeIndex,
|
handleSelect,
|
form,
|
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;
|
padding: 15px;
|
}
|
.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;
|
}
|
|
/*弹窗底部边框线*/
|
::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;
|
}
|
</style>
|
