fangyuan
2022-12-16 9ff66017debadfc89bc0c1b796684a4d1dbe2bc3
src/components/scene/index.vue
@@ -2,100 +2,118 @@
    <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 class="outer">
                    <div :class="['inner', active === o.index ? 'inner-active' : '']"></div>
                </div>
                <div class="innet-title">{{o.label}}</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-input disabled v-model="arrivalSituation.arrivalTime"></el-input>
                </el-form-item>
                <el-form-item label="到达地址:">
                    <el-input v-model="arrivalSituation.arrivalAddress"></el-input>
                    <el-input disabled v-model="arrivalSituation.arrivalAddress"></el-input>
                </el-form-item>
                <el-form-item label="现场情况说明:">
                    <el-input v-model="arrivalSituation.situationExplain"></el-input>
                    <el-input disabled v-model="arrivalSituation.situationExplain"></el-input>
                </el-form-item>
                <el-form-item label="信访回复说明:">
                    <el-input v-model="arrivalSituation.replyExplain"></el-input>
                    <el-input disabled v-model="arrivalSituation.replyExplain"></el-input>
                </el-form-item>
                <el-form-item label="现场情况照片:">
                    <el-input v-model="arrivalSituation.situationPic"></el-input>
                    <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">
                <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>
                <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 v-model="investigation.type"></el-input>
                    <el-input disabled v-model="investigation.investigationTime"></el-input>
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input v-model="investigation.type"></el-input>
                    <el-input disabled v-model="investigation.address"></el-input>
                </el-form-item>
                <el-form-item label="案由:">
                    <el-input v-model="investigation.type"></el-input>
                    <el-input disabled v-model="investigation.caseAction"></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 label="处置结果:">
                    <el-input disabled v-model="investigation.description"></el-input>
                </el-form-item>
                <el-form-item label="照片附件:">
                    <el-input v-model="investigation.type"></el-input>
                    <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>
                <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>
                <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 v-model="investigation.type"></el-input>
                    <el-input disabled v-model="partyInfo.work"></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>
                <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 v-model="investigation.type"></el-input>
                    <el-input disabled v-model="partyInfo.liveAddress"></el-input>
                </el-form-item>
                <el-form-item label="户籍所在地:">
                    <el-input v-model="investigation.type"></el-input>
                    <el-input disabled v-model="partyInfo.registerAddress"></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-input type="textarea" :rows="5" disabled v-model="type"></el-input>
                </el-form-item>
            </el-form>
        </div>
@@ -120,17 +138,34 @@
                    label: '告知违法'
                }
            ],
            mybaseCase: {},
            arrivalSituation: {},
            investigation:{},
            writ:{}
            investigation: {},
            writ: {},
            partyInfo: {},
            type: null
        }
    },
    props:['currentSitVo'],
    created(){
        const {currentSitVo} = this;
        console.log(currentSitVo);
        // this.arrivalSituation = mylist;
    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.violationsVO) {
          this.type = baseCase.violationsVO.typeText;
        } else {
          this.type = baseCase.illegalBuilding.categoryText;
        }
    },
    methods: {
        changeActive(idx) {
@@ -145,11 +180,13 @@
        padding: 20px 100px;
        display: flex;
        justify-content: space-between;
        .nav-item{
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .outer {
            width: 50px;
            height: 50px;
@@ -179,12 +216,26 @@
    }
    .scene-item {
        padding: 20px 100px;
        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>