<template>
|
<div class="scene">
|
<div class="nav">
|
<div class="nav-item" v-for="o in list" :key="o.index" @click="changeActive(o.index)">
|
<div class="outer" >
|
<div :class="['inner',active === o.index ? 'inner-active' : '']"></div>
|
</div>
|
<div class="innet-title">{{o.label}}</div>
|
</div>
|
</div>
|
<div class="scene-item" v-if="active === 1">
|
<el-form ref="arrivalSituation" label-position="right" label-width="120px" :model="arrivalSituation">
|
<el-form-item label="到达时间:">
|
<el-input v-model="arrivalSituation.arrivalTime"></el-input>
|
</el-form-item>
|
<el-form-item label="到达地址:">
|
<el-input v-model="arrivalSituation.arrivalAddress"></el-input>
|
</el-form-item>
|
<el-form-item label="现场情况说明:">
|
<el-input v-model="arrivalSituation.situationExplain"></el-input>
|
</el-form-item>
|
<el-form-item label="信访回复说明:">
|
<el-input v-model="arrivalSituation.replyExplain"></el-input>
|
</el-form-item>
|
<el-form-item label="现场情况照片:">
|
<el-input v-model="arrivalSituation.situationPic"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="scene-item" v-if="active === 2">
|
<el-form ref="investigation" label-position="right" label-width="120px" :model="investigation">
|
<el-form-item label="承办队员:">
|
<el-input v-model="investigation.name"></el-input>
|
</el-form-item>
|
<el-form-item label="协办队员:">
|
<el-input v-model="investigation.region"></el-input>
|
</el-form-item>
|
<el-form-item label="时间:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="地址:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="案由:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="当事人信息:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="情况描述:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="照片附件:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="类型:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="当事人姓名:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号码:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="证件类型:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="证件号码:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="文化程度:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="职业:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="工作单位及职务:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="名族:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="籍贯:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="现住址:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
<el-form-item label="户籍所在地:">
|
<el-input v-model="investigation.type"></el-input>
|
</el-form-item>
|
</el-form>
|
<el-button>返回</el-button>
|
</div>
|
<div class="scene-item" v-if="active === 3">
|
<el-form ref="writ" label-position="right" label-width="120px" :model="writ">
|
<el-form-item label="类型:">
|
<el-input v-model="writ.name"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
active: 1,
|
list: [
|
{
|
index: 1,
|
label: '到达现场情况'
|
},
|
{
|
index: 2,
|
label: '调查取证'
|
},
|
{
|
index: 3,
|
label: '告知违法'
|
}
|
],
|
arrivalSituation: {},
|
investigation:{},
|
writ:{}
|
|
}
|
},
|
props:['currentSitVo'],
|
created(){
|
const {currentSitVo} = this;
|
console.log(currentSitVo);
|
// this.arrivalSituation = mylist;
|
},
|
methods: {
|
changeActive(idx) {
|
this.active = idx;
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.scene {
|
.nav {
|
padding: 20px 100px;
|
display: flex;
|
justify-content: space-between;
|
.nav-item{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.outer {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
background-color: #0101ff;
|
}
|
|
.inner {
|
background-color: #0101ff;
|
border-radius: 50%;
|
width: 30px;
|
height: 30px;
|
}
|
|
.innet-title {
|
line-height: 20px;
|
padding-top: 20px;
|
}
|
|
.inner-active {
|
background-color: #fff;
|
}
|
}
|
|
.scene-item {
|
padding: 20px 100px;
|
|
::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
}
|
}
|
</style>
|
