<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-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>
|
import { FILE_ORIGINAL_URL } from "@/utils";
|
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 = [];
|
if (invesList.pic) {
|
invesList.pic.forEach((o) => {
|
o = o.replace("[", "").replace("]", "");
|
this.investigation.pic.push(
|
`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${o}`
|
);
|
});
|
}
|
this.partyInfo = invesList.partyInfo;
|
}
|
}
|
if (mylist) {
|
this.arrivalSituation = mylist;
|
if (mylist.situationPic) {
|
if (typeof mylist.situationPic == "string") {
|
let urls = mylist.situationPic.split(",");
|
this.arrivalSituation.situationPic = [];
|
urls.forEach((o) => {
|
o = o.replace("[", "").replace("]", "");
|
this.arrivalSituation.situationPic.push(
|
`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${o}`
|
);
|
});
|
}
|
} else {
|
this.arrivalSituation.situationPic = [];
|
}
|
}
|
this.mybaseCase = baseCase;
|
if (baseCase.violationsVO) {
|
this.type = baseCase.violationsVO.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>
|
