```bash
<template>
<div class="logContainer">
<div class="button">
<head-button @click="headBtnClick"
:json_data="jsondata"
:json_fields="jsonfields"
></head-button>
</div>
<div class="main-body">
<el-tabs v-model="activeName" @tab-click="tabsHandleClick" >
<template v-for="item in tabsName">
<el-tab-pane :name="item.keyid" :key="item.keyid" v-if="btnListIndexOf(item.urladdress)">
<span slot="label">{{ item.listname }}</span>
<div class="table">
<table-template
:contract-type="item.keyid"
:contracts="contracts"
@pageInfoChange="getPageInfo"
></table-template>
</div>
</el-tab-pane>
</template>
</el-tabs>
</div>
<div class="dialog">
<!--单合同备案-->
<single-contract-dialog
ref="singleRef"
title=""
width="30%"
@getFormData="submitSingleForm"
></single-contract-dialog>
<!--框架或入库合同备案-->
<frame-or-storage-contract-dialog
ref="frameRef"
title=""
width="30%"
@getFormData="submitSingleForm"
></frame-or-storage-contract-dialog>
<!--高级查询-->
<query-dialog
ref="queryRef"
title="查询"
@getFormData="submitQueryForm"
></query-dialog>
<echartcontract
ref="echartcontract"
title="统计数据显示"
>
</echartcontract>
</div>
</div>
</template>
<script>
// import __ from '__' // __是需要手动引入的文件
import HeadButton from "./button/HeadButton.vue";
import TableButton from "./button/TableButton.vue";
import SingleContractDialog from "./dialog/SingleContractDialog.vue";
import FrameOrStorageContractDialog from "./dialog/FrameOrStorageContractDialog.vue";
import QueryDialog from "./dialog/QueryDialog.vue";
import TableTemplate from "./table/TableTemplate.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import echartcontract from "./dialog/echart_contract.vue"
import {
getBusContract,
getdbc_outexcel,
getBusById,
addBusContract,
upBusContract
} from "@/api/webapi-contract.js";
export default {
inject: ["reload"],
components: {
HeadButton,
TableButton,
SingleContractDialog,
FrameOrStorageContractDialog,
QueryDialog,
TableTemplate,
echartcontract
},
props: {
tabsName: {
type: Array,
default: () => {
return [];
}
}
},
watch: {
activeName(newValue) {
this.session.setItem("contractType", newValue);
this.pageShow.advancedQuery = this.advancedQuery;
this.pageShow.advancedQuery.contractTypeKeyId = newValue;
this.networkGetContacts();
},
vuexActiveName(newValue) {
this.activeName = newValue;
}
},
computed: {
...mapState({
advancedQuery: state => state.businessContract.advancedQuery,
vuexActiveName: state => state.businessContract.activeName
})
},
//数据节点
data() {
return {
activeName: "402880fa74c3492d0174d98785e3003d",
contracts: {
dataList: [],
total: 0
},
pageShow: {
pageInfo: {
page: 1,
limit: 30
},
advancedQuery: {
allstatuscode: "",
contracttypekeiyd:""
}
},
statusList: [],
loading: false,
jsondata:[],
jsonfields:{
状态:{
callback: value => {
let checks=value.allstatuscode;
switch (checks)
{
case "0":
case "1":
return "备案";
break;
case "2":
return "完成";
break;
case "3":
return "取消";
break;
default:
return "无";
}
}
},
原件:{
callback: value => {
let checks=value.turnoversp[0];
return (checks=="ok")?"有":"无";
}
},
合同编号:"contractCode",
合同名称:"contractName",
创建时间:"createddateTime",
创建人:"syscreatepersonname",
归属:"studyOutOrgName",
客户名称:"contractBurchaser",
签订时间:"concludesigndateTime",
客户负责人:"contractBurchaserPerson",
项目负责人:"contractSellerPerson",
收费标准:"projectStandard",
"合同酬金(元)":"contractSum",
是否缴纳保证金:{
callback: value => {
if(value.isgather)
{
let showtile="";
showtile.concat("缴纳金额(元)：",value.depositsum,"缴纳时间：",value.depositdateTime,"退回时间：",value.indepositdateTime);
return showtitle;
}
else
{
return "否"
}
}
},
原件情况:{
callback: value => {}
},
合同争议方式:"methodDisputeName",
}
};
},
//生命周期函数节点
created() {
this.networkGetContacts();
this.getdbcoutexcel();
},
//自定义函数节点
methods: {
...mapMutations({
updateAdvancedQuery: "businessContract/updateAdvancedQuery",
updateOriginalScriptType: "originalScript/updateOriginalScriptType"
}),
...mapActions({
networkAddContact: "businessContract/networkAddContact"
}),
networkGetContacts(){
this.pageShow.advancedQuery.contracttypekeiyd = this.activeName;
getBusContract(this.pageShow).then(item => {
let ref = {
dataList: item.data.content,
total: item.data.totalElements
};
this.contracts=ref;
console.log(item);
}).catch((errorinfo)=>{
this.$message.error(errorinfo);
});
},
getdbcoutexcel()
{
getdbc_outexcel({contractTypeKeyId:this.activeName}).then(item => {
if (item.code==200)
{
this.jsondata=item.data;
}
}).catch((errorinfo)=>{
this.$message.error(errorinfo);
});
},
getPageInfo(pageInfo) {
this.pageShow.pageInfo = pageInfo;
this.pageShow.advancedQuery = this.advancedQuery;
this.pageShow.advancedQuery.contracttypekeiyd = this.activeName;
this.networkGetContacts();
},
getStatus(status) {
this.pageShow.advancedQuery = this.advancedQuery;
this.pageShow.advancedQuery.allstatuscode = status;
this.pageShow.advancedQuery.contracttypekeiyd = this.activeName;
this.networkGetContacts();
},
headBtnClick(btn) {
switch (btn) {
case 1:
this.$refs.singleRef.openDialog();
break;
case 2:
this.$refs.frameRef.openDialog();
break;
case 3:
this.$refs.queryRef.openDialog();
break;
case 4:
this.$refs.echartcontract.openDialog();
break;
case 5:
this.$router.push({ path: "/contract/original_script" });
break;
case 6:
break;
case 7:
// eslint-disable-next-line no-case-declarations
let ref = {
code: "402880fa74e735230174ec6bbe490009",
name: "合同模块/业务合同",
modelName: "ht"
};
this.updateModel(ref);
this.$router.push({ path: "/contract/template_manager" });
break;
case 8:
break;
case 9:
this.reload();
break;
}
},
tabsHandleClick(tab, event) {
this.networkGetContacts();
this.getdbcoutexcel();
},
//提交合同表单
submitSingleForm(formData) {
this.networkAddContact(formData).then(item => {
if (item) {
this.pageShow.advancedQuery.contracttypekeiyd = this.activeName;
this.networkGetContacts();
}
});
},
//提交查询表单
submitQueryForm(formData) {
this.updateAdvancedQuery(formData);
this.pageShow.advancedQuery = formData;
this.networkGetContacts();
}
}
};
</script>
<style lang="less" scoped>
.button {
height: 50px;
line-height: 50px;
padding: 0 20px;
}
</style>
```
