<template>
|
<div class="process-wrap">
|
<basic-container>
|
<!-- <div class="process-header">-->
|
<!-- <div class="backbtn">-->
|
<!-- <router-link to="/News/case-manage"><i class="el-icon-arrow-left"></i> 返回</router-link>-->
|
<!-- </div>-->
|
<!--<!– <h2>案件名称</h2>–>-->
|
<!-- </div>-->
|
<router-link to="/News/case-manage"><i class="el-icon-arrow-left"></i> 返回</router-link>
|
<el-table
|
ref="table"
|
:height="tableHeight"
|
:data="tableData"
|
border
|
row-key="id"
|
style="width: 100%;margin-bottom: 20px"
|
default-expand-all
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
:row-style="{height:'69px'}"
|
:cell-style="columnStyle"
|
>
|
<el-table-column
|
prop="name"
|
min-width="25%"
|
align="left"
|
header-align="center">
|
<!-- <template slot-scope="scope">
|
<span @click="handleIconToggle(scope.row)" style="cursor: pointer">
|
<!– <i :ref="'myicon'+scope.row.id" class="iconfont icon-list-collapse"–>
|
<!– v-show="scope.row.children != null && scope.row.children.length != 0">–>
|
<!– </i>–>
|
{{ scope.row.name }}
|
<img src="../../../assets/lawImg/xiajiaT.png" :ref="'myicon'+scope.row.id"
|
v-show="scope.row.children != null && scope.row.children.length != 0">
|
</span>
|
</template>-->
|
</el-table-column>
|
<el-table-column
|
align="left"
|
header-align="center"
|
min-width="40%"
|
className="my-cell"
|
label="审核环节">
|
<template slot-scope="scope">
|
<div style="display: inline-block"
|
v-for="(item,index) in scope.row.buttons" :key=" index"
|
@click="lookword(item)"
|
:class="{'btn':item.finish == '0','btn1':item.finish == '1','btn2':item.finish == '2','btn3':item.finish == '3'}">
|
<p class="types" v-if="item.finish == '0'">未填写</p>
|
<p class="types" v-else-if="item.finish == '1'">未完成</p>
|
<p class="types" v-else-if="item.finish == '3'">审批中</p>
|
<p class="types" v-else>已完成</p>
|
<div style="display: inline-block">
|
<p class="names">{{ item.name }}</p>
|
<p>
|
<span>{{ item.addTime }}</span>
|
<span class="str1">{{ item.updateBy }}</span>
|
</p>
|
</div>
|
<div v-if="item.hasReceipt == 1">
|
<img :src="item.receiptState =='0' ? src2 :src1" @click.stop="openHuiZheng(item)">
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="left"
|
header-align="center"
|
className="my-cell"
|
label="内部文书">
|
<template slot-scope="scope">
|
<div style="display: inline-block"
|
v-for="(item,index) in scope.row.buttons1" :key=" index"
|
@click="lookword(item)"
|
:class="{'btn':item.finish == '0','btn1':item.finish == '1','btn2':item.finish == '2','btn3':item.finish == '3'}">
|
<p class="types" v-if="item.finish == '0'">未填写</p>
|
<p class="types" v-else-if="item.finish == '1'">未完成</p>
|
<p class="types" v-else-if="item.finish == '3'">审批中</p>
|
<p class="types" v-else>已完成</p>
|
<div style="display: inline-block">
|
<p class="names">{{ item.name }}</p>
|
<p>
|
<span>{{ item.addTime }}</span>
|
<span class="str1">{{ item.updateBy }}</span>
|
</p>
|
</div>
|
<div v-if="item.hasReceipt == 1">
|
<img :src="item.receiptState =='0' ? src2 :src1" @click.stop="openHuiZheng(item)">
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="left"
|
header-align="center"
|
className="my-cell"
|
label="外部文书">
|
<template slot-scope="scope">
|
<div style="display: inline-block"
|
v-for="(item,index) in scope.row.buttons2" :key=" index"
|
@click="lookword(item)"
|
:class="{'btn':item.finish == '0','btn1':item.finish == '1','btn2':item.finish == '2','btn3':item.finish == '3'}">
|
<p class="types" v-if="item.finish == '0'">未填写</p>
|
<p class="types" v-else-if="item.finish == '1'">未完成</p>
|
<p class="types" v-else-if="item.finish == '3'">审批中</p>
|
<p class="types" v-else>已完成</p>
|
<div style="display: inline-block">
|
<p class="names">{{ item.name }}</p>
|
<p>
|
<span>{{ item.addTime }}</span>
|
<span class="str1">{{ item.updateBy }}</span>
|
</p>
|
</div>
|
<div v-if="item.hasReceipt == 1">
|
<img :src="item.receiptState =='0' ? src2 :src1" @click.stop="openHuiZheng(item)">
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</basic-container>
|
<WordManage ref="detaInfo" v-if="isShowYulan" :isShowYulan="isShowYulan" @cancel="cancel" @getDataList="getDataList"></WordManage>
|
</div>
|
|
</template>
|
|
<script>
|
import {getfindlList} from '@/api/News/processManage'
|
import WordManage from '../word-manage/index'
|
|
export default {
|
name: "index",
|
components: {
|
WordManage
|
},
|
data() {
|
return {
|
tableHeight: 500,
|
id: '',
|
isShowYulan: false,
|
tableData: [],
|
src1: require('../../../assets/lawImg/lianJieTrue.png'),
|
src2: require('../../../assets/lawImg/lianJieFalse.png'),
|
};
|
},
|
mounted() {
|
// this.init();
|
},
|
created() {
|
if (this.$route.query) {
|
this.id = this.$route.query.id
|
}
|
this.getDataList()
|
this.tableHeight = window.innerHeight - 220
|
},
|
methods: {
|
//点击table展开收起
|
/*handleIconToggle(row) {
|
this.$refs.topicTable.toggleRowExpansion(row);
|
if (this.$refs['myicon' + row.id].getAttribute('class') == 'iconfont icon-list-collapse') {
|
this.$refs['myicon' + row.id].setAttribute('class', 'iconfont icon-shousuo')
|
} else {
|
this.$refs['myicon' + row.id].setAttribute('class', 'iconfont icon-list-collapse')
|
}
|
},*/
|
columnStyle({row, column, rowIndex, columnIndex}) {
|
if (columnIndex == 0) {
|
//第二三第四列的背景色就改变了2和3都是列数的下标
|
// if (columnIndex == 3 || columnIndex == 4) {
|
// //字体颜色
|
// return "background:#e6cc6f;color:blue;cursor: pointer";
|
// }
|
if (row.name == "调查取证文书" || row.name == "强制措施文书" || row.name == "辅助文书" || row.name == "送达文书" || row.name == "执行文书" || row.name == "强制执行文书") {
|
return "background:rgba(24,144,255,0.20);color:#1890FF;";
|
}
|
return "background:#1890FF;color:#fff;";
|
}
|
},
|
getDataList() {
|
getfindlList(this.id).then(res => {
|
this.tableData = res.data.data
|
this.$nextTick(() => {
|
this.$refs.table.doLayout()
|
})
|
})
|
},
|
lookword(obj) {
|
this.isShowYulan = true
|
this.$nextTick(() => {
|
this.$refs.detaInfo.init(obj, this.id)
|
})
|
},
|
openHuiZheng(obj) {
|
let str =JSON.stringify(obj)
|
let data = JSON.parse(str)
|
data.name = data.name + '送达回证'
|
data.router = 'word-manage/externalFile/certificateOfService.vue'
|
this.isShowYulan = true
|
this.$nextTick(() => {
|
this.$refs.detaInfo.init(data, this.id)
|
})
|
|
// })
|
},
|
cancel(e) {
|
this.isShowYulan = e
|
}
|
},
|
}
|
</script>
|
<style>
|
.el-table .my-cell {
|
vertical-align: top
|
}
|
/* my_table 是table的className */
|
.el-table [class*=el-table__row--level] .el-table__expand-icon {
|
/*display: none !important;*/
|
color: #FFFFFF !important;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.process-header {
|
position: relative;
|
margin-bottom: 10px;
|
|
.backbtn {
|
position: absolute;
|
left: 20px;
|
top: 0px;
|
}
|
|
h2 {
|
text-align: center;
|
}
|
}
|
|
.btn {
|
width: 188px;
|
height: 90px;
|
display: flex;
|
flex-wrap: wrap;
|
margin: 5px;
|
background: rgba(255, 177, 48, 0.04);;
|
border: #666666 1px solid;
|
color: #666666;
|
position: relative;
|
|
.types {
|
width: 10%;
|
height: 100%;
|
display: inline-block;
|
padding: 4% 0 0;
|
box-sizing: border-box;
|
background: #666666;
|
color: #fff;
|
text-align: center;
|
}
|
|
div {
|
.names {
|
display: flex;
|
max-width: 165px;
|
flex-wrap: wrap;
|
font-weight: bold;
|
font-size: 14px;
|
}
|
|
p {
|
.str1 {
|
display: inline-block;
|
margin-left: 6px
|
}
|
}
|
}
|
|
div {
|
img {
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
right: 1px;
|
bottom: 1px;
|
}
|
}
|
}
|
|
.btn1 {
|
width: 188px;
|
height: 90px;
|
display: flex;
|
margin: 5px;
|
background: rgba(255, 177, 48, 0.04);;
|
border: #FFB130 1px solid;
|
color: #FFB130;
|
position: relative;
|
|
.types {
|
width: 10%;
|
height: 100%;
|
display: inline-block;
|
padding: 4% 0 0;
|
box-sizing: border-box;
|
background: #FFB130;
|
color: #fff;
|
text-align: center;
|
}
|
|
div {
|
.names {
|
display: flex;
|
max-width: 165px;
|
flex-wrap: wrap;
|
font-weight: bold;
|
font-size: 14px;
|
}
|
p {
|
.str1 {
|
display: inline-block;
|
margin-left: 6px
|
}
|
}
|
}
|
|
div {
|
img {
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
right: 1px;
|
bottom: 1px;
|
}
|
}
|
}
|
|
.btn2 {
|
width: 188px;
|
height: 90px;
|
display: flex;
|
margin: 5px;
|
background: rgba(255, 177, 48, 0.04);;
|
border: #30B700 1px solid;
|
color: #30B700;
|
position: relative;
|
|
.types {
|
width: 10%;
|
height: 100%;
|
display: inline-block;
|
padding: 4% 0 0;
|
box-sizing: border-box;
|
background: #30B700;
|
color: #fff;
|
text-align: center;
|
}
|
|
div {
|
.names {
|
display: flex;
|
max-width: 165px;
|
flex-wrap: wrap;
|
font-weight: bold;
|
font-size: 14px;
|
}
|
p {
|
.str1 {
|
display: inline-block;
|
margin-left: 6px
|
}
|
}
|
}
|
|
div {
|
img {
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
right: 1px;
|
bottom: 1px;
|
}
|
}
|
}
|
|
.btn3 {
|
width: 188px;
|
height: 90px;
|
display: flex;
|
margin: 5px;
|
background: rgba(255, 177, 48, 0.04);;
|
border: #FF3C30 1px solid;
|
color: #FF3C30;
|
position: relative;
|
|
.types {
|
width: 10%;
|
height: 100%;
|
display: inline-block;
|
padding: 4% 0 0;
|
box-sizing: border-box;
|
background: #FF3C30;
|
color: #fff;
|
text-align: center;
|
}
|
|
div {
|
.names {
|
display: flex;
|
max-width: 165px;
|
flex-wrap: wrap;
|
font-weight: bold;
|
font-size: 14px;
|
}
|
p {
|
.str1 {
|
display: inline-block;
|
margin-left: 6px
|
}
|
}
|
}
|
|
div {
|
img {
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
right: 1px;
|
bottom: 1px;
|
}
|
}
|
}
|
|
|
.el-header {
|
position: relative;
|
}
|
|
.el-header > h2 {
|
position: fixed;
|
left: 50%;
|
top: 30%;
|
}
|
|
</style>
|
