|
|
@@ -2,13 +2,14 @@
|
|
|
<template>
|
|
|
<div class="height_100">
|
|
|
<el-container>
|
|
|
- <!-- <el-header>
|
|
|
+ <el-header>
|
|
|
<div class="head">
|
|
|
- <el-button type="primary" size="small" @click="synchronization" class="margin-right_10">同步</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="showField" class="margin-right_10">显示栏位管理</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="add()" class="margin-right_10">添加</el-button>
|
|
|
</div>
|
|
|
- </el-header> -->
|
|
|
+ </el-header>
|
|
|
<el-main v-DivHeight="getDivHeight" class="Evidence_details">
|
|
|
- <el-table :data="tableData" border v-loading="loading" :maxHeight="tableHeight" @cell-dblclick="cellDblclick" @cell-click="cellClick">
|
|
|
+ <el-table :data="tableData" border v-loading="loading" :maxHeight="tableHeight" @cell-dblclick="cellDblclick" @cell-click="cellClick" :span-method="objectSpanMethod">
|
|
|
<el-table-column v-for="item in column.filter(item=>!item.ifHidden)"
|
|
|
:render-header="$commonJS.renderHeaderMethods" :key="item.field" :prop="item.field" :label="item.label" :width="item.width || 'auto'"
|
|
|
align="center">
|
|
|
@@ -16,12 +17,12 @@
|
|
|
<div>
|
|
|
<!-- @input="(value)=>getData(scope.row,item.field,value)" -->
|
|
|
<div v-if="editField==(item.field+scope.row.id)">
|
|
|
- <el-select clearable v-if="item.field == 'invalidStatue.courtOpinions1' || item.field == 'invalidStatue.courtOpinions2'" :value="getColumnData(scope.row,item.field)" @change="(value)=>changeMessage(item.field,scope.row,value)" placeholder="请选择">
|
|
|
+ <el-select clearable v-if="item.field == 'courtOpinions1' || item.field == 'courtOpinions2'" :value="getColumnData(scope.row,item.field)" @change="(value)=>changeMessage(item.field,scope.row,value)" placeholder="请选择">
|
|
|
<el-option label="基于原权要维持有效" value="基于原权要维持有效"></el-option>
|
|
|
<el-option label="基于修改后权要维持有效" value="基于修改后权要维持有效"></el-option>
|
|
|
<el-option label="全部无效" value="全部无效"></el-option>
|
|
|
</el-select>
|
|
|
- <el-select clearable v-else-if="item.field == 'invalidStatue.statuteId'" :value="getColumnData(scope.row,item.field)" @change="(value)=>changeMessage(item.field,scope.row,value)" placeholder="请选择" style="width:100%">
|
|
|
+ <el-select clearable v-else-if="item.field == 'statuteId'" :value="getColumnData(scope.row,item.field)" @change="(value)=>changeMessage(item.field,scope.row,value)" placeholder="请选择" style="width:100%">
|
|
|
<el-option
|
|
|
v-for="item in provisions"
|
|
|
:key="item.value"
|
|
|
@@ -32,32 +33,66 @@
|
|
|
</el-select>
|
|
|
<my-RichText v-else :autoFocus="true" :value="getColumnData(scope.row,item.field)" @blur="(value)=>changeMessage(item.field,scope.row,value)"></my-RichText>
|
|
|
</div>
|
|
|
+ <template v-else>
|
|
|
+ <div class="text">
|
|
|
+ <span v-html="getColumnData(scope.row,item.field)"></span>
|
|
|
+ <span v-if=" item.field == 'claimText'">
|
|
|
+ <el-popover
|
|
|
+ popper-class="reasonAndEvidence"
|
|
|
+ placement="bottom"
|
|
|
+ width="100"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <div class="menuList">
|
|
|
+ <div class="menuListLi" @click="del(scope,item.field)">删除</div>
|
|
|
+ <!-- <div class="menuListLi" @click="add(scope,item.field)">新增特征</div> -->
|
|
|
+ </div>
|
|
|
+ <i slot="reference" class="el-icon-caret-bottom"></i>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <div class="text" v-else v-html="getColumnData(scope.row,item.field)"></div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" min-width="100px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <el-button type="text" size="small" @click="del(scope)">删除</el-button>
|
|
|
+ <el-button type="text" size="small" @click="add(scope,'','up')">在上方新增</el-button>
|
|
|
+ <el-button type="text" size="small" @click="add(scope,'','down')">在下方新增</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+ <addStatute ref="addStatute" @save="save"></addStatute>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import common from './common';
|
|
|
+import addStatute from './components/addStatute.vue';
|
|
|
const column = [
|
|
|
{
|
|
|
- field:'invalidStatue.statuteId',
|
|
|
+ field:'statuteId',
|
|
|
label:'法条',
|
|
|
editable:true,
|
|
|
width:100
|
|
|
},
|
|
|
{
|
|
|
- field:'invalidStatue.claimText',
|
|
|
+ field:'claimText',
|
|
|
label:'权利要求',
|
|
|
editable:true,
|
|
|
+ width:120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field:'feature',
|
|
|
+ label:'特征',
|
|
|
+ editable:true,
|
|
|
width:180
|
|
|
},
|
|
|
{
|
|
|
@@ -77,13 +112,13 @@ const column = [
|
|
|
width:180
|
|
|
},
|
|
|
{
|
|
|
- field:'invalidStatue.courtOpinions1',
|
|
|
+ field:'courtOpinions1',
|
|
|
label:'一审',
|
|
|
editable:true,
|
|
|
width:100
|
|
|
},
|
|
|
{
|
|
|
- field:'invalidStatue.courtOpinions2',
|
|
|
+ field:'courtOpinions2',
|
|
|
label:'二审',
|
|
|
editable:true,
|
|
|
width:100,
|
|
|
@@ -91,104 +126,198 @@ const column = [
|
|
|
}
|
|
|
]
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- mixins:[common],
|
|
|
+ components: {
|
|
|
+ addStatute
|
|
|
+ },
|
|
|
+ mixins:[common],
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- // tableData:[],
|
|
|
column:column,
|
|
|
- // loading:false,
|
|
|
- // editField:'',
|
|
|
- // editMessage:'',
|
|
|
- statueType:1
|
|
|
+ statueType:1,
|
|
|
+ // 计算表格合并行的数量
|
|
|
+ mergeObj: {},
|
|
|
+ // 表格合并行的栏位
|
|
|
+ mergeArr: ['claimText','statuteId'],
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
watch: {},
|
|
|
- computed: {},
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
- // this.init()
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.init2()
|
|
|
+ },1000)
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init2(){
|
|
|
+ this.tableData = [
|
|
|
+ {
|
|
|
+ "id":1,
|
|
|
+ invalidReason:"无效理由",
|
|
|
+ presentOpinions:"陈述意见" ,
|
|
|
+ "rbDecision":"复审委意见" ,
|
|
|
+ "statuteId":"4",
|
|
|
+ "claimText":"权要1",
|
|
|
+ feature:'特征1',
|
|
|
+ "courtOpinions1":"一审法院意见",
|
|
|
+ "court_opinions2":"二审法院意见 ",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id":2,
|
|
|
+ invalidReason:"无效理由",
|
|
|
+ presentOpinions:"陈述意见" ,
|
|
|
+ "rbDecision":"复审委意见" ,
|
|
|
+ "statuteId":"4",
|
|
|
+ "claimText":"权要1",
|
|
|
+ feature:'特征2',
|
|
|
+ "courtOpinions1":"一审法院意见",
|
|
|
+ "court_opinions2":"二审法院意见 ",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id":3,
|
|
|
+ invalidReason:"无效理由",
|
|
|
+ presentOpinions:"陈述意见" ,
|
|
|
+ "rbDecision":"复审委意见" ,
|
|
|
+ "statuteId":"2",
|
|
|
+ "claimText":"权要1",
|
|
|
+ feature:'特征1',
|
|
|
+ "courtOpinions1":"一审法院意见",
|
|
|
+ "court_opinions2":"二审法院意见 ",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id":4,
|
|
|
+ invalidReason:"无效理由",
|
|
|
+ presentOpinions:"陈述意见" ,
|
|
|
+ "rbDecision":"复审委意见" ,
|
|
|
+ "statuteId":"2",
|
|
|
+ "claimText":"权要2",
|
|
|
+ feature:'特征2',
|
|
|
+ "courtOpinions1":"一审法院意见",
|
|
|
+ "court_opinions2":"二审法院意见 ",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ this.getSpanArr(this.tableData)
|
|
|
+ },
|
|
|
+ //获取每个元素所需合并的行数
|
|
|
+ getSpanArr(data) {
|
|
|
+ var mergeObj = {}
|
|
|
+ this.mergeArr.forEach((key, index1) => {
|
|
|
+ let count = 0;
|
|
|
+ mergeObj[key] = [];
|
|
|
+ if(key == 'claimText'){
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ mergeObj[key].push(1);
|
|
|
+ } else {
|
|
|
+ if (item[key] === data[index - 1][key] && item.statuteId === data[index - 1].statuteId) {
|
|
|
+ mergeObj[key][count] += 1;
|
|
|
+ mergeObj[key].push(0);
|
|
|
+ } else {
|
|
|
+ count = index;
|
|
|
+ mergeObj[key].push(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ mergeObj[key].push(1);
|
|
|
+ } else {
|
|
|
+ if (item[key] === data[index - 1][key]) {
|
|
|
+ mergeObj[key][count] += 1;
|
|
|
+ mergeObj[key].push(0);
|
|
|
+ } else {
|
|
|
+ count = index;
|
|
|
+ mergeObj[key].push(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ this.mergeObj = mergeObj
|
|
|
+ return this.mergeObj
|
|
|
+ },
|
|
|
+ // 表格合并行
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (!row) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.mergeArr.indexOf(column.property) !== -1) {
|
|
|
+ if (this.mergeObj[column.property][rowIndex]) {
|
|
|
+ return [this.mergeObj[column.property][rowIndex], 1]
|
|
|
+ } else {
|
|
|
+ return [0, 0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ add(scope,field,type){
|
|
|
+ if(!scope){
|
|
|
+ // this.tableData.push({})
|
|
|
+ this.$refs.addStatute.open()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var row = scope.row
|
|
|
+ var index = scope.$index
|
|
|
+ var obj = {
|
|
|
+ statuteId:row.statuteId,
|
|
|
+ claimText:row.claimText
|
|
|
+ }
|
|
|
+ if(type){
|
|
|
+ if(type == 'up'){
|
|
|
+ this.tableData.splice(index,0,obj)
|
|
|
+ }else{
|
|
|
+ this.tableData.splice(index+1,0,obj)
|
|
|
+ }
|
|
|
+ this.getSpanArr(this.tableData)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // var index2 = this.tableData.findLastIndex(item=>{
|
|
|
+ // return item.statuteId == row.statuteId && item.claimText == row.claimText
|
|
|
+ // })
|
|
|
+
|
|
|
+ // this.tableData.splice(index2+1,0,obj)
|
|
|
+ // this.getSpanArr(this.tableData)
|
|
|
+ },
|
|
|
+ del(scope,field){
|
|
|
+ var row = scope.row
|
|
|
+ if(!field){//删除特征
|
|
|
+ var index = scope.$index
|
|
|
+ this.tableData.splice(index,1)
|
|
|
+ this.getSpanArr(this.tableData)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //删除权要
|
|
|
+ var arr = this.tableData.filter(item=>{
|
|
|
+ return item.statuteId == row.statuteId && item.claimText == row.claimText
|
|
|
+ })
|
|
|
+ this.tableData.splice(index,arr.length)
|
|
|
+ this.getSpanArr(this.tableData)
|
|
|
+
|
|
|
+ },
|
|
|
+ save(){
|
|
|
+ this.tableData.push({})
|
|
|
+ this.getSpanArr(this.tableData)
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
-// methods: {
|
|
|
-// async init(){
|
|
|
-// var url = './三性表格.html'
|
|
|
-// this.loading = true
|
|
|
-// await fetch(url).then(res => res.text() ).then(data => {
|
|
|
-// var html = data
|
|
|
-// const parser = new DOMParser();
|
|
|
-// // 解析包含 HTML 实体的字符串
|
|
|
-// const doc = parser.parseFromString(html, "text/html");
|
|
|
-// var trList = doc.body.getElementsByTagName('tr')
|
|
|
-// var head = trList[0]
|
|
|
-// var headList = head.getElementsByTagName('td')
|
|
|
-// var sign = true
|
|
|
-// var num = 0
|
|
|
-// var tableData = []
|
|
|
-// for(var i = 1;i<trList.length;i++){
|
|
|
-// var bodyList = trList[i].getElementsByTagName('td')
|
|
|
-// var obj = {
|
|
|
-// id:i
|
|
|
-// }
|
|
|
-// for(var j = 0;j<bodyList.length;j++){
|
|
|
-// obj[headList[j].innerText] = bodyList[j].innerHTML
|
|
|
-// if(sign){
|
|
|
-// if(headList[j].innerText == '一审'){
|
|
|
-// num = 1
|
|
|
-// }
|
|
|
-// if(headList[j].innerText == '二审'){
|
|
|
-// num = 2
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// }
|
|
|
-// if(sign){
|
|
|
-// if(num == 0){
|
|
|
-// var arr = this.column.filter(item=>{
|
|
|
-// return item.field == '一审' || item.field == '二审'
|
|
|
-// })
|
|
|
-// arr.forEach(item=>{
|
|
|
-// item.ifHidden = true
|
|
|
-// })
|
|
|
-// }
|
|
|
-// else if(num == 1){
|
|
|
-// this.column.find(item=>{
|
|
|
-// return item.field == '二审'
|
|
|
-// }).ifHidden = true
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// sign = false
|
|
|
-// tableData.push(obj)
|
|
|
-// }
|
|
|
-// this.tableData = tableData
|
|
|
-// this.loading = false
|
|
|
-// })
|
|
|
-// },
|
|
|
-// //编辑
|
|
|
-// async edit(item,row){
|
|
|
-// if(item.field && row){
|
|
|
-// if(!item.editable){
|
|
|
-// this.$message.warning('该栏位不可编辑')
|
|
|
-// return
|
|
|
-// }
|
|
|
-// this.editField = item.field + row.id
|
|
|
-// this.editMessage = row[item.field]
|
|
|
-// return
|
|
|
-// }
|
|
|
-// },
|
|
|
-// changeMessage(field,row,value){
|
|
|
-// this.editField = null
|
|
|
-// if(value == this.editMessage){
|
|
|
-// this.$message('没有发生修改')
|
|
|
-// return
|
|
|
-// }
|
|
|
-// this.$message('修改了')
|
|
|
-// },
|
|
|
|
|
|
-// },
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss">
|
|
|
+ .reasonAndEvidence {
|
|
|
+ min-width: 80px ;
|
|
|
+ border: 1px solid #ACA9A9;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.head{
|
|
|
width:100%;
|
|
|
@@ -198,10 +327,26 @@ export default {
|
|
|
.text{
|
|
|
text-align: left;
|
|
|
}
|
|
|
+.menuList :first-child{
|
|
|
+ padding-top: 0px;
|
|
|
+}
|
|
|
+.menuList :hover{
|
|
|
+ color: #5c67ff;
|
|
|
+}
|
|
|
+
|
|
|
+.menuListLi{
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ padding: 10px 0 3px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.menuListLi :first-child{
|
|
|
+ padding-right: 5px;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
- .Evidence_details .el-table .el-table__cell {
|
|
|
- vertical-align: top;
|
|
|
- /* 其他样式... */
|
|
|
- }
|
|
|
+.Evidence_details .el-table .el-table__cell {
|
|
|
+ vertical-align: top;
|
|
|
+ /* 其他样式... */
|
|
|
+}
|
|
|
</style>
|
