SH-Arbitrate/Arbitrate-Frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

归档详情页面开发及接口联调

Browse Source
This commit is contained in:
Your Name
2023-10-11 20:20:30 +08:00
parent 620f3411e7
commit 9891cbd6e8
6 changed files with 470 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/caseFiling/archiveList.vue
+8 -6
View File
@@ -108,6 +108,7 @@
v-if="showarchiveDetails"
:showarchiveDetails="showarchiveDetails"
:detailform="detailform"
:flagLoading="flagLoading"
@cancelpaymentdetails="cancelpaymentdetails"
@updataList="updataList"
></archiveDetailsDialog>
@@ -115,10 +116,8 @@
</template>
<script>
import {
caseApplicationList,
caseApplicationDetail,
} from "@/api/awardManagement/awardManagement";
import { caseApplicationList } from "@/api/awardManagement/awardManagement";
import { adjudicationArchives } from "@/api/caseFiling/caseFiling";
import archiveDetailsDialog from "./components/archiveDetailsDialog.vue";
export default {
@@ -145,6 +144,7 @@ export default {
dataList: [],
detailform: {}, //详情数据
showarchiveDetails: false, //详情数据弹框
flagLoading: true, //详情弹框loading
};
},
created() {
@@ -176,7 +176,7 @@ export default {
},
// model框显示
showDetail(row) {
// this.getDetail({ id: row.id });
this.getDetail({ id: row.id });
this.showarchiveDetails = true;
},
// 关闭弹窗
@@ -185,8 +185,10 @@ export default {
},
/** 查询详情 */
getDetail(parms) {
caseApplicationDetail(parms).then((res) => {
this.flagLoading = true;
adjudicationArchives(parms).then((res) => {
this.detailform = res.data;
this.flagLoading = false;
});
},
},
src/views/caseFiling/components/archiveDetailsDialog.vue
+60 -10
View File
@@ -7,13 +7,25 @@
:destroy-on-close="true"
center
>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="案件信息" name="first">
<caseInfo></caseInfo>
</el-tab-pane>
<el-tab-pane label="案件日志" name="second">案件日志</el-tab-pane>
<el-tab-pane label="快递信息" name="third">快递信息</el-tab-pane>
</el-tabs>
<div class="loading" v-if="flagLoading">
<i class="el-icon-loading"></i>
</div>
<div v-else>
<div class="noData" v-if="noData">暂无数据！</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="案件信息" name="first">
<caseInfo :caseApplicationObj="caseApplicationObj"></caseInfo>
</el-tab-pane>
<el-tab-pane label="案件日志" name="second">
<caselogInfo :caselogDataArr="caselogDataArr"></caselogInfo>
</el-tab-pane>
<el-tab-pane label="快递信息" name="third">
<expressDeliveryInfo
:deliveryDataArr="deliveryDataArr"
></expressDeliveryInfo>
</el-tab-pane>
</el-tabs>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
</div>
@@ -23,20 +35,38 @@
<script>
import caseInfo from "./caseInfo.vue";
import caselogInfo from "./caselogInfo.vue";
import expressDeliveryInfo from "./expressDeliveryInfo.vue";
export default {
props: ["showarchiveDetails"],
props: ["showarchiveDetails", "detailform", "flagLoading"],
components: {
caseInfo,
caselogInfo,
expressDeliveryInfo,
},
data() {
return {
// key: value
activeName: "first",
caseApplicationObj: {}, //案件信息
caselogDataArr: [], //案件日志
deliveryDataArr: [], //快递信息
noData: false,
};
},
watch: {
detailform: {
handler(val) {
if (val) {
this.caseApplicationObj = val.caseApplication;
this.caselogDataArr = val.caseLogRecordList;
this.deliveryDataArr = val.logisticsInfoVOList;
}
},
},
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
// console.log(tab, event);
},
cancel() {
this.$emit("cancelpaymentdetails");
@@ -55,4 +85,24 @@ export default {
height: 700px !important;
overflow: auto !important;
}
.loading {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.el-icon-loading {
font-size: 50px;
}
}
.noData {
width: 100%;
height: 400px;
font-size: 30px;
font-weight: 700;
color: #959595;
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/views/caseFiling/components/caseInfo.vue
+163 -45
View File
@@ -81,11 +81,18 @@
</el-col>
<el-col :span="24">
<el-form-item label="申请人案件证据资料：">
<div v-for="(item, index) in applicateArr" :key="index">
<!-- <div v-for="(item, index) in applicateArr" :key="index">
<a href="#" @click="toFile(item, index)" style="color: blue">
{{ item.annexName }}
</a>
</div>
</div> -->
<p
@click="toFile(index, 2)"
v-for="(item, index) in applicantFileArr"
:key="index"
>
<a href="#">{{ item }}</a>
</p>
</el-form-item>
</el-col>
<!-- 仅详情展示 案件质证环节以后显示被申请人证据-->
@@ -94,19 +101,36 @@
label="被申请人案件证据资料："
prop="respondentEvidence"
>
<div v-for="(item, index) in quiltArr" :key="index">
<!-- <div v-for="(item, index) in quiltArr" :key="index">
<a href="#" @click="toFile1(item, index)" style="color: blue">
{{ item.annexName }}
</a>
</div>
</div> -->
<p
v-for="(item, index) in respondentFileArr"
:key="index"
@click="toFile(index, 6)"
>
<a href="#">{{ item }}</a>
</p>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="裁决书附件：">
<p
v-for="(item, index) in awardFileArr"
:key="index"
@click="toFile(index, 3)"
>
<a href="#">{{ item }}</a>
</p>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 申请人主体信息 -->
<el-form ref="form2" :model="form2" label-width="150px">
<!-- <div v-for="(item, index) in form2.paymentArr" :key="index"> -->
<div>
<el-form ref="form2" :model="form2" label-width="150px" disabled>
<div v-for="(item, index) in form2.paymentArr" :key="index">
<div style="display: flex; justify-content: space-between">
<div style="display: inline-flex">
<div class="infoIcon"></div>
@@ -126,14 +150,12 @@
},
]"
>
<!-- <el-input v-model="item.name" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="代码：">
<!-- <el-input v-model="item.identityNum" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.identityNum" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -152,8 +174,7 @@
},
]"
>
<!-- <el-input v-model="item.contactTelphone" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.contactTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -167,8 +188,7 @@
},
]"
>
<!-- <el-input v-model="item.workAddress" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.workAddress" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -182,8 +202,7 @@
},
]"
>
<!-- <el-input v-model="item.workTelphone" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.workTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -197,8 +216,7 @@
},
]"
>
<!-- <el-input v-model="item.contactAddress" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.contactAddress" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
@@ -218,8 +236,7 @@
},
]"
>
<!-- <el-input v-model="item.nameAgent" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.nameAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -239,8 +256,7 @@
},
]"
>
<!-- <el-input v-model="item.identityNumAgent" placeholder="请输入" /> -->
<el-input placeholder="请输入" />
<el-input v-model="item.identityNumAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -259,11 +275,10 @@
},
]"
>
<!-- <el-input
<el-input
v-model="item.contactTelphoneAgent"
placeholder="请输入"
/> -->
<el-input placeholder="请输入" />
/>
</el-form-item>
</el-col>
<el-col :span="12">
@@ -277,22 +292,21 @@
},
]"
>
<!-- <el-input
<el-input
v-model="item.contactAddressAgent"
placeholder="请输入"
/> -->
<el-input placeholder="请输入" />
/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<el-form ref="form3" label-width="150px" :model="form3">
<!-- <div
<!-- 被申请人主体信息 -->
<el-form ref="form3" label-width="150px" disabled :model="form3">
<div
v-for="(itm, index) in form3.paymentArr1"
:key="index + form2.paymentArr.length"
> -->
<div>
>
<div style="display: flex; justify-content: space-between">
<div style="display: inline-flex">
<div class="infoIcon"></div>
@@ -304,6 +318,7 @@
<el-col :span="12">
<el-form-item
label="被申请人姓名"
:prop="'paymentArr1.' + index + '.name'"
:rules="[
{
required: true,
@@ -312,12 +327,13 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="身份证号："
:prop="'paymentArr1.' + index + '.identityNum'"
:rules="[
{
required: true,
@@ -332,12 +348,13 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.identityNum" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="联系电话："
:prop="'paymentArr1.' + index + '.contactTelphone'"
:rules="[
{
required: true,
@@ -351,12 +368,13 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.contactTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="单位地址："
:prop="'paymentArr1.' + index + '.workAddress'"
:rules="[
{
required: true,
@@ -365,12 +383,13 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.workAddress" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="单位电话："
:prop="'paymentArr1.' + index + '.workTelphone'"
:rules="[
{
required: true,
@@ -379,12 +398,13 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.workTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="联系地址："
:prop="'paymentArr1.' + index + '.contactAddress'"
:rules="[
{
required: true,
@@ -393,7 +413,7 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.contactAddress" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
@@ -401,10 +421,12 @@
<div class="infoIcon"></div>
<div class="caseInfo2">代理人信息：</div>
</div>
<!-- <p>代理人信息：</p> -->
<el-row>
<el-col :span="12">
<el-form-item
label="姓名："
:prop="'paymentArr1.' + index + '.nameAgent'"
:rules="[
{
required: true,
@@ -413,12 +435,14 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.nameAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- -->
<el-form-item
label="身份证号："
:prop="'paymentArr1.' + index + '.identityNumAgent'"
:rules="[
{
required: true,
@@ -433,12 +457,13 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input v-model="itm.identityNumAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="联系电话："
:prop="'paymentArr1.' + index + '.contactTelphoneAgent'"
:rules="[
{
required: true,
@@ -452,12 +477,16 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input
v-model="itm.contactTelphoneAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="联系地址："
:prop="'paymentArr1.' + index + '.contactAddressAgent'"
:rules="[
{
required: true,
@@ -466,7 +495,10 @@
},
]"
>
<el-input placeholder="请输入" />
<el-input
v-model="itm.contactAddressAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
@@ -477,15 +509,98 @@
<script>
export default {
props: ["caseApplicationObj"],
data() {
return {
formData: {},
applicateArr: [],
quiltArr: [],
form2: {},
form3: {},
initpaymentArr: [],
initpaymentArr1: [],
form2: {
paymentArr: [
{
identityType: 1,
name: "",
identityNum: "",
contactTelphone: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
],
}, //申请人主体信息
form3: {
paymentArr1: [
{
identityType: 2,
name: "",
identityNum: "",
contactTelphone: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
],
}, //被申请人主体信息
applicantFileArr: [], //申请人
applicantPathArr: [], //申请人
respondentFileArr: [], //被申请人
respondenPathArr: [], //被申请人
awardFileArr: [], //裁决书
awardPathArr: [], //裁决书
};
},
created() {
if (this.caseApplicationObj) {
this.formData = this.caseApplicationObj;
}
console.log("this.formData", this.formData);
if (this.caseApplicationObj && this.caseApplicationObj.caseAffiliates) {
this.caseApplicationObj.caseAffiliates.forEach((item) => {
if (item.identityType == 1) {
this.initpaymentArr.push(item);
} else {
this.initpaymentArr1.push(item);
}
this.form2.paymentArr = this.initpaymentArr;
this.form3.paymentArr1 = this.initpaymentArr1;
});
}
if (this.caseApplicationObj && this.caseApplicationObj.caseAttachList) {
this.caseApplicationObj.caseAttachList.forEach((item) => {
if (item.annexType == 2) {
this.applicantFileArr.push(item.annexName);
this.applicantPathArr.push(item.annexPath);
} else if (item.annexType == 6) {
this.respondentFileArr.push(item.annexName);
this.respondenPathArr.push(item.annexPath);
} else if (item.annexType == 3) {
this.awardFileArr.push(item.annexName);
this.awardPathArr.push(item.annexPath);
}
});
}
},
methods: {
// 预览文件
toFile(index, val) {
let headPath = window.location.origin + "/API";
if (val == 2) {
window.open(headPath + this.applicantPathArr[index], "_blank");
} else if (val == 6) {
window.open(headPath + this.respondenPathArr[index], "_blank");
} else if (val == 3) {
window.open(headPath + this.awardPathArr[index], "_blank");
}
},
},
};
</script>
@@ -506,4 +621,7 @@ export default {
.el-date-editor {
width: 100%;
}
a {
color: blue;
}
</style>
src/views/caseFiling/components/caselogInfo.vue
+99
View File
@@ -0,0 +1,99 @@
<template>
<div>
<div class="loading" v-if="flagLoading">
<i class="el-icon-loading"></i>
</div>
<div v-else>
<div class="noData" v-if="noData">暂无数据！</div>
<el-timeline v-else>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="(index + 1).toString()"
placement="top"
>
<p>{{ activity.content }}</p>
</el-timeline-item>
</el-timeline>
</div>
</div>
</template>
<script>
export default {
props: ["flagLoading", "caselogDataArr"],
data() {
return {
activities: [],
noData: false,
};
},
watch: {
caselogDataArr: {
handler(val) {
if (val && val.length > 0) {
this.noData = false;
this.activities = val;
this.activities.forEach((item) => {
item.content = item.content;
});
} else {
this.noData = true;
}
},
},
},
methods: {
cancel() {
this.$emit("cancelcaseLog");
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
height: 500px !important;
overflow: auto !important;
}
::v-deep .el-dialog {
width: 800px;
background: #ffffff;
border-radius: 20px;
}
.endbutton1 {
width: 154px;
height: 37px;
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 19px;
span {
width: 31px;
height: 13px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #959595;
}
}
.loading {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.el-icon-loading {
font-size: 50px;
}
}
.noData {
width: 100%;
height: 400px;
font-size: 30px;
font-weight: 700;
color: #959595;
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/views/caseFiling/components/expressDeliveryInfo.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<div>
<div class="loading" v-if="flagLoading">
<i class="el-icon-loading"></i>
</div>
<div v-else>
<div class="deliverName">
<span>申请人快递信息：</span>
{{ expressOne.company }} {{ expressOne.no }}
</div>
<el-divider></el-divider>
<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in expressOne.list"
:key="index"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
<div class="deliverName">
<span>被申请人快递信息：</span>
{{ expressTwo.company }} {{ expressTwo.no }}
</div>
<el-divider></el-divider>
<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in expressTwo.list"
:key="index"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
</div>
</template>
<script>
export default {
props: ["deliveryDataArr", "flagLoading"],
data() {
return {
reverse: true,
applicantdelivery: {}, //申请人物流信息
expressOne: {},
expressTwo: {},
};
},
created() {
console.log(this.deliveryDataArr, "deliveryDataArr");
if ((this.deliveryDataArr && this.deliveryDataArr, length > 0)) {
this.deliveryDataArr.forEach((item) => {
if (item.identityType == 1) {
let applicantdata = item.logisticsInfo;
this.applicantdelivery = JSON.parse(applicantdata);
this.expressOne = this.applicantdelivery;
console.log(this.expressOne, "this.expressOne");
if (this.expressOne.length > 0) {
this.expressOne.list.forEach((item) => {
item.content = item.datetime;
item.timestamp = item.remark;
});
}
} else {
let applicantdata = item.logisticsInfo;
this.applicantdelivery = JSON.parse(applicantdata);
if (this.applicantdelivery.list) {
this.expressTwo = this.applicantdelivery;
if (this.expressOne.length > 0) {
this.expressTwo.forEach((item) => {
item.content = item.datetime;
item.timestamp = item.remark;
});
}
}
}
});
}
},
methods: {
cancel() {
this.$emit("closeDeliveryModel");
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
width: 600px;
background: #ffffff;
border-radius: 20px;
}
.deliverName {
// margin-left: 6%;
font-size: 16px;
font-weight: 500;
span {
font-size: 18px;
font-weight: 600;
}
}
.endbutton {
width: 154px;
height: 37px;
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 19px;
span {
width: 31px;
height: 13px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #959595;
}
}
.loading {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.el-icon-loading {
font-size: 50px;
}
}
</style>