<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 disabled v-model="arrivalSituation.arrivalTime"></el-input>
|
</el-form-item>
|
<el-form-item label="到达地址:">
|
<el-input disabled v-model="arrivalSituation.arrivalAddress"></el-input>
|
</el-form-item>
|
<el-form-item label="现场情况说明:">
|
<el-input disabled v-model="arrivalSituation.situationExplain"></el-input>
|
</el-form-item>
|
<el-form-item label="信访回复说明:">
|
<el-input disabled v-model="arrivalSituation.replyExplain"></el-input>
|
</el-form-item>
|
<el-form-item label="现场情况照片:">
|
<div class="flex">
|
<template v-for="item in arrivalSituation.situationPic">
|
<img class="img" :src="item" alt="" v-if="investigation.pic">
|
</template>
|
</div>
|
</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">
|
<div class="inves-item">
|
<el-form-item label="承办队员:">
|
<el-input disabled v-model="investigation.undertaker"></el-input>
|
</el-form-item>
|
<el-form-item label="协办队员:">
|
<el-input disabled v-model="investigation.assistant"></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="时间:">
|
<el-input disabled v-model="investigation.investigationTime"></el-input>
|
</el-form-item>
|
<el-form-item label="地址:">
|
<el-input disabled v-model="investigation.address"></el-input>
|
</el-form-item>
|
<el-form-item label="案由:">
|
<el-input disabled v-model="investigation.caseAction"></el-input>
|
</el-form-item>
|
<el-form-item label="处置结果:">
|
<el-input disabled v-model="investigation.description"></el-input>
|
</el-form-item>
|
<el-form-item label="照片附件:">
|
<div class="flex">
|
<template v-for="item in investigation.pic">
|
<img class="img" :src="item" alt="" v-if="investigation.pic">
|
</template>
|
</div>
|
<!-- <el-input disabled v-model="investigation.pic"></el-input> -->
|
</el-form-item>
|
<div class="inves-item">
|
当事人信息
|
</div>
|
<el-form-item label="类型:">
|
<el-input type="textarea" :rows="5" disabled v-model="type"></el-input>
|
</el-form-item>
|
<div class="inves-item">
|
<el-form-item label="当事人姓名:">
|
<el-input disabled v-model="partyInfo.name"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号码:">
|
<el-input disabled v-model="partyInfo.phoneCode"></el-input>
|
</el-form-item>
|
</div>
|
<div class="inves-item">
|
<el-form-item label="证件类型:">
|
<el-input disabled v-model="partyInfo.certificateTypeText"></el-input>
|
</el-form-item>
|
<el-form-item label="证件号码:">
|
<el-input disabled v-model="partyInfo.certificateCode"></el-input>
|
</el-form-item>
|
</div>
|
<div class="inves-item">
|
<el-form-item label="文化程度:">
|
<el-input disabled v-model="partyInfo.educationDegreeText"></el-input>
|
</el-form-item>
|
<el-form-item label="职业:">
|
<el-input disabled v-model="partyInfo.career"></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="工作单位及职务:">
|
<el-input disabled v-model="partyInfo.work"></el-input>
|
</el-form-item>
|
<div class="inves-item">
|
<el-form-item label="民族:">
|
<el-input disabled v-model="partyInfo.nationText"></el-input>
|
</el-form-item>
|
<el-form-item label="籍贯:">
|
<el-input disabled v-model="partyInfo.nativePlace"></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="现住址:">
|
<el-input disabled v-model="partyInfo.liveAddress"></el-input>
|
</el-form-item>
|
<el-form-item label="户籍所在地:">
|
<el-input disabled v-model="partyInfo.registerAddress"></el-input>
|
</el-form-item>
|
</el-form>
|
</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 type="textarea" :rows="5" disabled v-model="type"></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: '告知违法'
|
}
|
],
|
mybaseCase: {},
|
arrivalSituation: {},
|
investigation: {},
|
writ: {},
|
partyInfo: {},
|
type: null
|
}
|
},
|
props: ['currentSitVo', 'baseCase'],
|
created() {
|
const { currentSitVo: { arrivalSituation: mylist, investigation: invesList }, baseCase } = this;
|
if (invesList) {
|
if (invesList) {
|
this.investigation = invesList;
|
this.investigation.pic = invesList.pic?.split(",");
|
this.partyInfo = invesList.partyInfo;
|
}
|
}
|
if (mylist) {
|
this.arrivalSituation = mylist;
|
this.arrivalSituation.situationPic = mylist.situationPic.split(",")
|
}
|
this.mybaseCase = baseCase;
|
if (baseCase.violations) {
|
this.type = baseCase.violations.typeText;
|
} else {
|
this.type = baseCase.illegalBuilding.categoryText;
|
}
|
},
|
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 0px;
|
|
::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
}
|
|
.img {
|
width: 60px;
|
height: 60px;
|
margin-left: 5px;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.inves-item {
|
display: flex;
|
}
|
}
|
</style>
|
