无效理由显示界面

src/views/report/InvalidResponse/components/reasonsAndEvidence/details_1.vue

@@ -1,28 +1,133 @@
+
 <template>
-  <div>
-    <el-table :data="tableData" border>
-        <el-table-column  v-for="item in column.filter(item => !item.ifHidden)"
-        :render-header="$commonJS.renderHeaderMethods" :key="item.value" :prop="item.field" :label="item.name"
-        :sortable="item.ifSort?'custom':false" align="center"></el-table-column>
-    </el-table>
-  </div>
+    <div class="height_100">
+      <el-container>
+          <!-- <el-header>
+              <div class="head">
+                  <el-button type="primary" size="small" v-if="isEdit" @click="cancel" class="margin-right_10">取消编辑</el-button>
+                  <el-button type="primary" size="small" v-if="isEdit" @click="save" class="margin-right_10">保存</el-button>
+                  <el-button type="primary" size="small" v-else @click="edit" class="margin-right_10">编辑</el-button>
+              </div>
+          </el-header> -->
+          <el-main v-DivHeight="getDivHeight" class="Evidence_details">
+            <el-table :data="tableData" border v-loading="loading" :maxHeight="tableHeight" >
+                <el-table-column  v-for="item in column"
+                :render-header="$commonJS.renderHeaderMethods" :key="item.value" :prop="item.field" :label="item.name"
+                align="center">
+                    <template slot-scope="scope">
+                        <my-RichText v-model="scope.row[item.value]" v-if="isEdit"></my-RichText>
+                        <div class="text" v-else v-html="scope.row[item.value]"></div>
+                    </template>
+                </el-table-column>
+            </el-table>
+          </el-main>
+      </el-container>
+  
+      
+    </div>
 </template>
-
 <script>
+import { getTableHeight } from '@/views/components/mixins'
 export default {
   components: {},
+  mixins:[getTableHeight],
   props: {},
   data() {
     return {
-        tableData:[]
+        tableData2:[],
+        tableData:[],
+        column:[],
+        loading:false,
+        isEdit:false,
     };
   },
   watch: {},
   computed: {},
   created() {},
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    async init(){
+        var str = localStorage.getItem('details_1')
+        if(str){
+            var data = JSON.parse(str)
+            this.column = data.column
+            this.tableData = data.tableData
+            return
+        }
+        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");   
+            console.log(doc.body.getElementsByTagName('tr')) 
+            var trList =  doc.body.getElementsByTagName('tr')
+            var head = trList[0]
+            console.log(head.getElementsByTagName('td'))
+            var headList = head.getElementsByTagName('td')
+            var column = []
+            
+            for(var i = 0;i<headList.length;i++){
+                var obj = {
+                    value:headList[i].innerText,
+                    field:headList[i].innerText,
+                    name:headList[i].innerText
+                }
+                column.push(obj)
+            }
+            var tableData = []
+            for(var i = 1;i<trList.length;i++){
+                var bodyList = trList[i].getElementsByTagName('td')
+                var obj = {}
+                for(var j = 0;j<bodyList.length;j++){
+                    obj[headList[j].innerText] = bodyList[j].innerHTML
+                }
+                tableData.push(obj)
+            }
+            this.column = column
+            this.tableData = tableData
+            this.loading = false
+        })
+    },
+     //编辑
+     async edit(){
+        this.tableData2 = JSON.parse(JSON.stringify(this.tableData))
+        this.isEdit = true
+    },
+    //保存
+    save(){
+        var data = {
+            column:this.column,
+            tableData:this.tableData
+        }
+        // console.log(JSON.stringify(data))
+        localStorage.setItem('details_1',JSON.stringify(data))
+        this.isEdit = false
+    },
+    //取消编辑
+    cancel(){
+        this.tableData = JSON.parse(JSON.stringify(this.tableData2))
+        this.isEdit = false
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
+.head{
+    width:100%;
+    display: flex;
+    flex-direction: row-reverse;
+}
+.text{
+    text-align: left;
+}
+</style>
+<style lang="scss">
+.Evidence_details .el-table .el-table__cell {  
+    vertical-align: top;  
+    /* 其他样式... */  
+}  
 </style>

src/views/report/InvalidResponse/components/reasonsAndEvidence/details_2.vue

@@ -0,0 +1,139 @@
+
+<template>
+    <div class="height_100">
+      <el-container>
+          <!-- <el-header>
+              <div class="head">
+                  <el-button type="primary" size="small" v-if="isEdit" @click="cancel" class="margin-right_10">取消编辑</el-button>
+                  <el-button type="primary" size="small" v-if="isEdit" @click="save" class="margin-right_10">保存</el-button>
+                  <el-button type="primary" size="small" v-else @click="edit" class="margin-right_10">编辑</el-button>
+              </div>
+          </el-header> -->
+          <el-main v-DivHeight="getDivHeight" class="Evidence_details">
+            <el-table :data="tableData" border v-loading="loading" :maxHeight="tableHeight">
+                <el-table-column  v-for="item in column"
+                :render-header="$commonJS.renderHeaderMethods" :key="item.value" :prop="item.field" :label="item.name"
+                align="center">
+                    <template slot-scope="scope">
+                        <my-RichText v-model="scope.row[item.value]" v-if="isEdit"></my-RichText>
+                        <div class="text" v-else v-html="scope.row[item.value]"></div>
+                    </template>
+                </el-table-column>
+            </el-table>
+          </el-main>
+      </el-container>
+  
+      
+    </div>
+</template>
+<script>
+import { getTableHeight } from '@/views/components/mixins'
+export default {
+  components: {},
+  mixins:[getTableHeight],
+  props: {},
+  data() {
+    return {
+        tableData2:[],
+        tableData:[],
+        column:[],
+        loading:false,
+        isEdit:false,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    async init(){
+        // if(this.str){
+        //     var data = JSON.parse(this.str)
+        //     this.column = data.column
+        //     this.tableData = data.tableData
+        //     return
+        // }
+        var str = localStorage.getItem('details_2')
+        if(str){
+            var data = JSON.parse(str)
+            this.column = data.column
+            this.tableData = data.tableData
+            return
+        }
+        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");   
+            console.log(doc.body.getElementsByTagName('tr')) 
+            var trList =  doc.body.getElementsByTagName('tr')
+            var head = trList[0]
+            console.log(head.getElementsByTagName('td'))
+            var headList = head.getElementsByTagName('td')
+            var column = []
+            
+            for(var i = 0;i<headList.length;i++){
+                var obj = {
+                    value:headList[i].innerText,
+                    field:headList[i].innerText,
+                    name:headList[i].innerText
+                }
+                column.push(obj)
+            }
+            var tableData = []
+            for(var i = 1;i<trList.length;i++){
+                var bodyList = trList[i].getElementsByTagName('td')
+                var obj = {}
+                for(var j = 0;j<bodyList.length;j++){
+                    obj[headList[j].innerText] = bodyList[j].innerHTML
+                }
+                tableData.push(obj)
+            }
+            this.column = column
+            this.tableData = tableData
+            this.loading = false
+        })
+    },
+     //编辑
+     async edit(){
+        this.tableData2 = JSON.parse(JSON.stringify(this.tableData))
+        this.isEdit = true
+    },
+    //保存
+    save(){
+        var data = {
+            column:this.column,
+            tableData:this.tableData
+        }
+        // console.log(JSON.stringify(data))
+        localStorage.setItem('details_1',JSON.stringify(data))
+        this.isEdit = false
+    },
+    //取消编辑
+    cancel(){
+        this.tableData = JSON.parse(JSON.stringify(this.tableData2))
+        this.isEdit = false
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.head{
+    width:100%;
+    display: flex;
+    flex-direction: row-reverse;
+}
+.text{
+    text-align: left;
+}
+</style>
+<style lang="scss">
+    .Evidence_details .el-table .el-table__cell {  
+        vertical-align: top;  
+        /* 其他样式... */  
+    }  
+</style>

src/views/report/components/details/index.vue

@@ -190,6 +190,18 @@ export default {
           reportType: [7]
         },
         {
+          label: '无效理由和证据-三性',
+          name: "reasonsAndEvidence2",
+          path: 'report/InvalidResponse/components/reasonsAndEvidence/details_2.vue',
+          reportType: [7]
+        },
+        {
+          label: '无效理由和证据-非三性',
+          name: "reasonsAndEvidence1",
+          path: 'report/InvalidResponse/components/reasonsAndEvidence/details_1.vue',
+          reportType: [7]
+        },
+        {
           label: '证据文献',
           name: "evidence",
           path: 'report/InvalidResponse/components/Evidence/evidence.vue',