行级填报多级表头

src/views/sunVillage_info/entityReport/reportLineSummary.vue

@@ -51,30 +51,29 @@
         <div class="main-table" v-if="!!editorData.templateId">
           <table>
             <thead>
-            <tr>
-              <td v-for="(header) in removePlaceholder(editorData.headers)" :colspan="header.colspan" :style="{
-                'background-color': calcColor(header.type),
-                'color': calcTextColor(header.type),
-              }">{{header.headerName}}</td>
-            </tr>
+              <tr v-for="(headerRow, rindex) in editorData.headerRows">
+                <th v-for="(header) in removePlaceholder(headerRow)" :__Col="header.headerSort" :__Row="header.headerRowSort" :colspan="header.colspan" :rowspan="header.rowspan">
+                  {{header.headerName}}
+                </th>
+              </tr>
             </thead>
 
             <tbody>
               <tr v-for="(row, rindex) in editorData.rows">
                 <td v-for="(col, cindex) in removePlaceholder(row)" :colspan="col.colspan" :rowspan="col.rowspan" :style="{
-                  'text-align': calcAlign(editorData.headers[col.colIndex].type),
-                  'background-color': calcColor(editorData.headers[col.colIndex].type),
+                  'text-align': calcAlign(col.type),
+                  'background-color': calcColor(col.type),
                 }">
                   <div class="full-height">
-                    <div class="full-height" v-if="editorData.headers[col.colIndex].type === '2'">
+                    <div class="full-height" v-if="col.type === '2'">
                       <input class="input-field align-right full-height" v-model="col.val" :readonly="disableEdit" type="number"></input>
                     </div>
-                    <div class="full-height" v-else-if="editorData.headers[col.colIndex].type === '4'">
+                    <div class="full-height" v-else-if="col.type === '4'">
                       <input class="input-field align-center full-height" v-model="col.name" :readonly="disableEdit"></input>
                     </div>
-                    <div class="full-height" v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>
+                    <div v-else :style="{'text-align': calcAlign(col.type)}">{{col.name}}</div>
 
-                    <van-icon name="edit" v-if="cindex === editorData.headers.length - 1 && canEdit(col)" class="edit-icon" color="#1989fa" size="24" @click="edit(col)"/>
+                    <van-icon name="edit" v-if="cindex === editorData.headerTypes.length - 1 && canEdit(col)" class="edit-icon" color="#1989fa" size="24" @click="edit(col)"/>
                   </div>
                 </td>
               </tr>
@@ -136,6 +135,11 @@ export default {
         rows: [],
         cells: [],
         rules: [],
+        headerRows: [],
+        headerLength: 0,
+        headerDeep: 0,
+        headerTypes: [],
+        header: null,
       },
       templateList: [],
       loading: false,
@@ -247,6 +251,11 @@ export default {
         rows: [],
         cells: [],
         rules: [],
+        headerRows: [],
+        headerLength: 0,
+        headerDeep: 0,
+        headerTypes: [],
+        header: null,
       };
     },
     parseQuery() {
@@ -358,18 +367,19 @@ export default {
       border: 0.01rem solid #1989fa;
       table-layout: fixed;
     }
-    thead td {
+    th {
       text-align: center;
       border: 0.01rem solid #1989fa;
-      height: 1rem;
+      min-height: 1rem;
       font-size: 0.32rem;
-      padding: 0 0.4rem;
+      padding: 0.4rem 0.4rem;
       margin: 0;
       font-weight: bold;
+      min-width: 1rem;
+      /*max-width: 2rem;*/
       white-space: nowrap;
-      /*max-width: 1.2rem;*/
     }
-    tbody td {
+    td {
       font-size: 0.3rem;
       border: 0.01rem solid #1989fa;
       height: 1rem;
@@ -380,6 +390,7 @@ export default {
       margin: 0;
       /*max-width: 1.5rem;*/
       position: relative;
+      min-width: 1rem;
     }
 
     .input-field {

src/views/sunVillage_info/entityReport/reportLineView.vue

@@ -49,7 +49,7 @@
         </van-row>
 
         <div class="main-table" v-if="!!editorData.templateId">
-            <div v-for="(header, rindex) in editorData.headers">
+            <div v-for="(header, rindex) in editorData.detailHeaders">
               <van-field v-if="header.type === '2'" label-width="50%" :readonly="disableEdit" v-model="editorData.rows[0][rindex].val" :label="header.headerName" :placeholder="header.headerName" input-align="right" type="number"/>
               <van-field v-else-if="header.type === '4' || header.type === '3'" label-width="50%" :readonly="disableEdit" v-model="editorData.rows[0][rindex].name" :label="header.headerName" :placeholder="header.headerName" input-align="right"/>
               <van-field v-else label-width="50%" :readonly="true" :value="editorData.rows[0][rindex].name" :label="header.headerName" :placeholder="header.headerName" input-align="right"/>
@@ -128,6 +128,12 @@ export default {
         rows: [],
         cells: [],
         rules: [],
+        headerRows: [],
+        headerLength: 0,
+        headerDeep: 0,
+        headerTypes: [],
+        header: null,
+        detailHeaders: [],
       },
       templateList: [],
       loading: false,
@@ -159,9 +165,13 @@ export default {
       this.loading = true;
       if(this.editorData.id) // 修改
       {
-        getReport(this.editorData.id).then((resp) => {
+        getReport(this.editorData.id, {
+          genDetailHeaders: true
+        }).then((resp) => {
           let reportData = resp.data;
-          getReportTemplate(reportData.templateId).then((resp) => {
+          getReportTemplate(reportData.templateId, {
+            genDetailHeaders: true
+          }).then((resp) => {
             let templateData = resp.data;
             this.setTableData(templateData, reportData);
           }).finally(() => {
@@ -173,7 +183,9 @@ export default {
       }
       else
       {
-        getReportTemplate(this.editorData.templateId).then((resp) => {
+        getReportTemplate(this.editorData.templateId, {
+          genDetailHeaders: true
+        }).then((resp) => {
           let templateData = resp.data;
           this.setTableData(templateData);
         }).finally(() => {
@@ -197,6 +209,11 @@ export default {
         let cells = reportData.cells;
         data = reportData;
         data.headers = templateData.headers;
+        data.headerRows = templateData.headerRows;
+        data.headerTypes = templateData.headerTypes;
+        data.headerLength = templateData.headerLength;
+        data.headerDeep = templateData.headerDeep;
+        data.detailHeaders = templateData.detailHeaders;
         data.rows = templateData.rows;
         data.cells = templateData.cells;
         data.rules = templateData.rules;
@@ -208,7 +225,7 @@ export default {
           cols.forEach((x) => {
             if(group[rowIndex] && group[rowIndex][x.colIndex])
             {
-              if(templateData.headers[x.colIndex].type === '4')
+              if(templateData.headerTypes[x.colIndex] === '4')
                 x.name = group[rowIndex][x.colIndex].name;
               x.val = group[rowIndex][x.colIndex].val;
             }
@@ -297,6 +314,12 @@ export default {
         rows: [],
         cells: [],
         rules: [],
+        headerRows: [],
+        headerLength: 0,
+        headerDeep: 0,
+        headerTypes: [],
+        header: null,
+        detailHeaders: [],
       };
     },
     parseQuery() {

src/views/sunVillage_info/entityReport/reportView.vue

@@ -52,27 +52,26 @@
         <div class="main-table" v-if="!!editorData.templateId">
           <table>
             <thead>
-            <tr>
-              <td v-for="(header) in removePlaceholder(editorData.headers)" :colspan="header.colspan" :style="{
-                'background-color': calcColor(header.type),
-                'color': calcTextColor(header.type),
-              }">{{header.headerName}}</td>
-            </tr>
+              <tr v-for="(headerRow, rindex) in editorData.headerRows">
+                <th v-for="(header) in removePlaceholder(headerRow)" :__Col="header.headerSort" :__Row="header.headerRowSort" :colspan="header.colspan" :rowspan="header.rowspan">
+                  {{header.headerName}}
+                </th>
+              </tr>
             </thead>
 
             <tbody>
-            <tr v-for="(row, rindex) in editorData.rows">
+              <tr v-for="(row, rindex) in editorData.rows">
               <td v-for="(col) in removePlaceholder(row)" :colspan="col.colspan" :rowspan="col.rowspan" :style="{
-                'text-align': calcAlign(editorData.headers[col.colIndex].type),
-                'background-color': calcColor(editorData.headers[col.colIndex].type),
+                'text-align': calcAlign(col.type),
+                'background-color': calcColor(col.type),
               }">
-                <div class="absolute-full" v-if="editorData.headers[col.colIndex].type === '2'" :class="{'validate-error': col.error, 'validate-error-box': col.error,}">
+                <div class="absolute-full" v-if="col.type === '2'" :class="{'validate-error': col.error, 'validate-error-box': col.error,}">
                   <input class="input-field align-right full-height" v-model="col.val" :readonly="disableEdit" type="number"></input>
                 </div>
-                <div class="full-height" v-else-if="editorData.headers[col.colIndex].type === '4'">
+                <div class="full-height" v-else-if="col.type === '4'">
                   <input class="input-field align-center full-height" v-model="col.name" :readonly="disableEdit"></input>
                 </div>
-                <div class="full-height" v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>
+                <div v-else :style="{'text-align': calcAlign(col.type)}">{{col.name}}</div>
               </td>
             </tr>
             </tbody>
@@ -155,6 +154,11 @@ export default {
         rows: [],
         cells: [],
         rules: [],
+        headerRows: [],
+        headerLength: 0,
+        headerDeep: 0,
+        headerTypes: [],
+        header: null,
       },
       templateList: [],
       loading: false,
@@ -223,6 +227,10 @@ export default {
         let cells = reportData.cells;
         data = reportData;
         data.headers = templateData.headers;
+        data.headerRows = templateData.headerRows;
+        data.headerTypes = templateData.headerTypes;
+        data.headerLength = templateData.headerLength;
+        data.headerDeep = templateData.headerDeep;
         data.rows = templateData.rows;
         data.cells = templateData.cells;
         data.rules = templateData.rules;
@@ -234,7 +242,7 @@ export default {
           cols.forEach((x) => {
             if(group[rowIndex] && group[rowIndex][x.colIndex])
             {
-              if(templateData.headers[x.colIndex].type === '4')
+              if(templateData.headerTypes[x.colIndex] === '4')
                 x.name = group[rowIndex][x.colIndex].name;
               x.val = group[rowIndex][x.colIndex].val;
             }
@@ -347,16 +355,21 @@ export default {
         rows: [],
         cells: [],
         rules: [],
+        headerRows: [],
+        headerLength: 0,
+        headerDeep: 0,
+        headerTypes: [],
+        header: null,
       };
     },
     validate(showMsg) {
       if(!this.editorData.rules || !this.editorData.rules.length)
         return true;
       let errors = [];
-      for(let i in this.editorData.headers)
+      for(let i in this.editorData.headerTypes)
       {
-        let header = this.editorData.headers[i];
-        if(header.type !== '2')
+        let type = this.editorData.headerTypes[i];
+        if(type !== '2')
           continue;
         let map = {};
         for(let m in this.editorData.rows)
@@ -502,18 +515,19 @@ export default {
       border: 0.01rem solid #1989fa;
       table-layout: fixed;
     }
-    thead td {
+    th {
       text-align: center;
       border: 0.01rem solid #1989fa;
-      height: 1rem;
+      min-height: 1rem;
       font-size: 0.32rem;
-      padding: 0 0.4rem;
+      padding: 0.4rem 0.4rem;
       margin: 0;
       font-weight: bold;
+      min-width: 1rem;
+      /*max-width: 2rem;*/
       white-space: nowrap;
-      /*max-width: 1.2rem;*/
     }
-    tbody td {
+    td {
       font-size: 0.3rem;
       border: 0.01rem solid #1989fa;
       height: 1rem;
@@ -524,6 +538,7 @@ export default {
       margin: 0;
       /*max-width: 1.5rem;*/
       position: relative;
+      min-width: 1rem;
     }
 
     .input-field {