行级填报

src/api/sunVillage_info/entity/report.js

@@ -179,3 +179,21 @@ export function horizontalSummaryStatisticsExport(query) {
     params: query
   })
 }
+
+// 查询统计报列表(行级)
+export function listLineReporttitle(query) {
+  return request({
+    url: '/entity/reporttitle/lineList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 竖向统计(不相加)
+export function summaryList(query) {
+  return request({
+    url: '/entity/report/summaryList',
+    method: 'get',
+    params: query
+  })
+}

src/router/index.js

@@ -3552,6 +3552,33 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportView'], resolve)
   },
+  { // 行级填报
+    path: '/sunVillage_info/entityReportLineList',
+    name: 'entityReportLineList',
+    meta: {
+      title: '行级填报',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportLineList'], resolve)
+  },
+  { // 行级填报
+    path: '/sunVillage_info/entityReportLineView',
+    name: 'entityReportLineView',
+    meta: {
+      title: '行级填报',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportLineView'], resolve)
+  },
+  { // 行级填报
+    path: '/sunVillage_info/entityReportLineSummary',
+    name: 'entityReportLineSummary',
+    meta: {
+      title: '行级填报',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportLineSummary'], resolve)
+  },
   { // 统计填报
     path: '/sunVillage_info/statistical_report',
     name: 'sunVillageInfoStatisticalReport',

src/views/sunVillage_info/entityReport/reportLineList.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="app-container">
+      <div class="header_main-placeholder">
+        <div class="header_main">
+          行级填报
+          <div class="return_btn" @click="$router.back()"></div>
+        </div>
+      </div>
+
+      <van-pull-refresh v-model="refreshing" @refresh="getList()">
+        <van-list
+          class="list_main"
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList('+1')"
+      >
+
+          <van-swipe-cell class="item"  v-for="(item,index) in list" :key="index">
+            <div class="item_box" @click="view(item)">
+              <div class="head_block">
+                <i class="icon"></i>
+                <div class="title">{{item.reportName}}</div>
+              </div>
+
+              <div class="order_block">
+                <div class="flex_block">
+                  <i class="icon icon_1"></i>
+                  <div class="text">最近填报: {{item.params.lastOperatorDate}}</div>
+                </div>
+                <div class="flex_block">
+                  <i class="icon icon_2"></i>
+                  <div class="text">填报数: {{item.params.numReport}}</div>
+                </div>
+              </div>
+            </div>
+            <template #right>
+              <van-row class="full-height toolbar">
+                <van-col class="full-height">
+                  <van-button square text="填报" type="primary" :to="{name:'entityReportLineView', query: {templateId:item.id, intent: 'add'}}" class="full-height" />
+                </van-col>
+              </van-row>
+            </template>
+          </van-swipe-cell>
+      </van-list>
+      </van-pull-refresh>
+    </div>
+</template>
+
+<script>
+import {delReport, listLineReporttitle} from "@/api/sunVillage_info/entity/report.js";
+export default {
+  name: "ReportLineList",
+  data() {
+    return {
+      list:[],
+      loading: false,
+      finished: false,
+      refreshing: false,
+      total: 0,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        orderByColumn:'createTime',
+        isAsc:'desc',
+        type: '2',
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    view(row){
+      this.$router.push({
+        name: 'entityReportLineSummary',
+        query: {
+          intent: 'view',
+          templateId: row.id,
+        }
+      });
+    },
+    getList(target){
+      let type = typeof (target);
+      //console.log(type, target);
+      if(target && this.finished)
+        return;
+      if (target === 0) {
+        this.refreshing = true;
+        this.finished = true;
+        this.total = 0;
+        this.queryParams.pageNum = 1;
+        this.list = [];
+      }
+      else if (type === 'number')
+        this.queryParams.pageNum = target;
+      else if (type === 'string') {
+        this.queryParams.pageNum = eval(this.queryParams.pageNum + target)
+      }
+      else
+      {
+        this.refreshing = true;
+        this.finished = true;
+        this.total = 0;
+        this.queryParams.pageNum = 1;
+        this.list = []
+      }
+      listLineReporttitle(this.queryParams).then(response => {
+        if (response.rows.length === 0) {
+          this.finished = true;
+          return;
+        }
+        this.list.push(...response.rows);
+        this.total += response.rows.length;
+        this.finished = this.total >= response.total;
+      }).finally(() => {
+        this.loading = false;
+        this.refreshing = false;
+      });
+    },
+    remove(row, index){
+      this.$dialog.confirm({
+        message: '您确认删除综合填报？',
+      })
+      .then(() => {
+        delReport(row.id).then(res => {
+          this.$toast.success('删除成功');
+          this.list.splice(index,1);
+        });
+      })
+      .catch(() => {
+      });
+    },
+    refresh() {
+      this.getList(); return;
+      this.list = [];
+      this.queryParams.pageNum = 1;
+      this.refreshing = true;
+      this.finished = false;
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    //padding: 0.2rem 3%;
+    width: 100vw;
+    height: 100vh;
+  }
+  .full-height {
+    height: 100%;
+  }
+  .header_main-placeholder {
+    height: 116px;
+  }
+  .header_main {
+    height: 116px;
+    background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 36px;
+    line-height: 116px;
+    text-align: center;
+    color: #fff;
+    z-index: 999;
+
+    .return_btn {
+      width: 24px;
+      height: 43.2px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+      background-size: 20px 36px;
+      position: absolute;
+      left: 38px;
+      top: 36px;
+    }
+
+    .add_btn {
+      width: 56.4px;
+      height: 40.8px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+      background-size: 47px 34px;
+      position: absolute;
+      right: 38px;
+      top: 36px;
+    }
+  }
+
+  .list_main{
+    padding:26px 22px 0;
+    .item{
+      height: 162px;
+      border-radius: 30px;
+      background: #fff;
+      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+      margin-bottom: 20px;
+      .item_box{
+        padding:25px 32px;
+      }
+      .head_block{
+        height: 62px;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .icon{
+          width: 34px;
+          height: 30px;
+          background: url('../../../assets/images/sunVillage_info/fixedAssets_icon_4.png') no-repeat;
+          background-size: 100% 100%;
+          display: block;
+          margin-right: 12px;
+        }
+        .title{
+          flex:1;
+          font-size: 32px;
+          color: #252525;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-right: 20px;
+
+        }
+      }
+      .order_block{
+        display: flex;
+        height: 52px;
+        padding-top: 12px;
+        font-size: 24px;
+        color: #858585;
+        align-items: center;
+        padding-bottom: 10px;
+        .flex_block{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 28px;
+          height: 42px;
+          .icon{
+            width: 25px;
+            height: 25px;
+            margin-top: 3px;
+            margin-right: 8px;
+            &.icon_1{
+              background:  url('../../../assets/images/sunVillage_info/fixedAssets_icon_3.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.icon_2{
+              background:  url('../../../assets/images/sunVillage_info/fixedAssets_icon_5.png') no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .toolbar {
+    margin-left: 2px;
+  }
+</style>

src/views/sunVillage_info/entityReport/reportLineSummary.vue

@@ -0,0 +1,462 @@
+<template>
+    <div class="app-container">
+      <div class="header_main-placeholder">
+        <div class="header_main">
+          行级填报
+          <div class="return_btn" @click="back"></div>
+          <div class="add_btn" @click="add"></div>
+        </div>
+      </div>
+
+      <van-form ref="form" readonly :class="{'form_readonly': disableEdit}">
+        <van-row>
+          <van-col :span="editorData.templateId ? 16 : 24">
+            <field-select
+              class="template-selector"
+              :value="editorData.templateId"
+              label=" 模板"
+              value-key="reportName"
+              data-key="id"
+              placeholder="报表模板"
+              :rules="[{ required: true }]"
+              :readonly="true"
+              :columns="templateList"
+              @input="getTemplate"
+            />
+          </van-col>
+          <van-col span="8" v-if="!!editorData.templateId">
+            <field-date-picker
+              class="field_no-label"
+              v-model="editorData.reportYear"
+              placeholder="报表年度"
+              formatter="yyyy"
+              :readonly="disableEdit"
+              input-align="center"
+              type="year"
+            />
+          </van-col>
+        </van-row>
+        <van-row v-if="!!editorData.templateId">
+          <van-col span="8">
+            <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleLeft" label="" placeholder="左上" input-align="left"/>
+          </van-col>
+          <van-col span="8">
+            <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleCenter" label="" placeholder="中上" input-align="center"/>
+          </van-col>
+          <van-col span="8">
+            <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleRight" label="" placeholder="右上" input-align="right"/>
+          </van-col>
+        </van-row>
+
+        <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>
+            </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),
+                }">
+                  <div class="full-height">
+                    <div class="full-height" v-if="editorData.headers[col.colIndex].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'">
+                      <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>
+
+                    <van-icon name="edit" v-if="cindex === editorData.headers.length - 1 && canEdit(col)" class="edit-icon" color="#1989fa" size="24" @click="edit(col)"/>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <template v-if="!!editorData.templateId">
+          <div>
+            <van-field :readonly="disableEdit" v-model="editorData.reportRemark" label="备注" placeholder="报表备注"/>
+          </div>
+<!--          <div>
+            <van-field readonly :value="editorData.rule" label="规则" placeholder="报表效验公式"></van-field>
+          </div>-->
+        </template>
+      </van-form>
+    </div>
+</template>
+
+<script>
+import FieldSelect from "@/components/form/FieldSelect";
+import {
+  addReport, delReport,
+  getReport,
+  getReportTemplate,
+  listReporttitle, summaryList,
+  updateReport
+} from "@/api/sunVillage_info/entity/report";
+import {array_grouping, array_toMap, date_format} from "@/utils";
+import {Expression} from "@/utils/expression";
+import {is_not_number} from "@/utils/utils";
+import FieldDatePicker from "@/components/form/FieldDatePicker";
+import {Notify} from "vant";
+import Cookies from "js-cookie";
+export default {
+  name: "ReportLineSummary",
+  components: {FieldDatePicker, FieldSelect},
+  data() {
+    return {
+      editorData: {
+        id: null,
+        templateId: null,
+        reportRemark: null,
+        titleLeft: null,
+        titleCenter: null,
+        titleRight: null,
+        reportStatus: "0",
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        reportName: '',
+        operatorName: '',
+        operatorDate: '',
+        operatorDepartment: '',
+        rule: null,
+        reportYear: date_format('%Y'),
+        headers: [],
+        rows: [],
+        cells: [],
+        rules: [],
+      },
+      templateList: [],
+      loading: false,
+      disableEdit: false,
+      intent: 'add',
+      templateId: null,
+    };
+  },
+  created() {
+    this.getTemplateList();
+    this.parseQuery();
+  },
+  mounted(){
+    this.init();
+  },
+  methods: {
+    getTemplateList() {
+      listReporttitle({
+        type: '2',
+        reportStatus: '0',
+      }).then((resp) => {
+        this.templateList = resp.rows;
+      });
+    },
+    getTemplate() {
+      if(!this.editorData.templateId)
+        return;
+      this.loading = true;
+      summaryList({
+        templateId: this.editorData.templateId,
+      }).then((resp) => {
+        this.editorData = resp.data;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    cellIsPlaceholder(x) {
+      return x.colspan <= 0 || (x.hasOwnProperty('rowspan') && x.rowspan <= 0);
+    },
+    removePlaceholder(cells) {
+      return cells.filter((x) => !this.cellIsPlaceholder(x));
+    },
+    calcAlign(type) {
+      switch(type)
+      {
+        case '2':
+          return 'right';
+        case '3':
+        case '4':
+          return 'center';
+        case '1':
+          return 'left';
+      }
+    },
+    calcColor(type) {
+      switch(type)
+      {
+        case '2':
+          return 'unset';
+        case '4':
+          return 'unset';
+        case '3':
+          return '#d7e8f3';
+        case '1':
+          return '#aad8f6';
+      }
+    },
+    calcTextColor(type) {
+      switch(type)
+      {
+        case '2':
+        case '4':
+          return '#2facfe';
+        case '3':
+        case '1':
+          return '#858585';
+      }
+    },
+    add() {
+      this.$router.push({
+        name: 'entityReportLineView',
+        query: {
+          intent: 'add',
+          templateId: this.templateId,
+        }
+      });
+    },
+    reset() {
+      this.$refs.form.resetValidation();
+      this.editorData = {
+        id: null,
+        deptId: null,
+        deptName: null,
+        templateId: null,
+        reportName: null,
+        reportYear: null,
+        reportRemark: null,
+        titleLeft: null,
+        titleCenter: null,
+        titleRight: null,
+        rule: null,
+        operatorName: null,
+        operatorDate: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        headers: [],
+        rows: [],
+        cells: [],
+        rules: [],
+      };
+    },
+    parseQuery() {
+      let query = this.$route.query;
+      this.templateId = query.templateId;
+      this.intent = query.intent;
+      if(!this.templateId)
+      {
+        this.$router.back();
+        return;
+      }
+    },
+    init() {
+      this.editorData.templateId = this.templateId;
+      this.getTemplate();
+      this.disableEdit = this.intent === 'view';
+    },
+    back() {
+      this.$router.back();
+    },
+    notify(message, type) {
+      Notify.clear();
+      Notify({ type: type || 'primary', message: message });
+    },
+    edit(row) {
+      this.$router.push({
+        name: 'entityReportLineView',
+        query: {
+          intent: 'edit',
+          templateId: '',
+          reportId: row.reportId,
+        }
+      });
+    },
+    canEdit(col) {
+      return col.createBy == Cookies.get('deptId');
+    },
+  },
+  computed: {
+    isAdd() {
+      return this.intent === 'add';
+    },
+    isEdit() {
+      return this.intent === 'edit';
+    },
+    isView() {
+      return this.intent === 'view';
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container{
+   background: #e9e9e9;
+   min-height: 100vh;
+   width: 100vw;
+  .header_main-placeholder {
+    height: 116px;
+  }
+
+  .header_main {
+    height: 116px;
+    background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 36px;
+    line-height: 116px;
+    text-align: center;
+    color: #fff;
+    z-index: 999;
+
+    .return_btn {
+      width: 24px;
+      height: 43.2px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+      background-size: 20px 36px;
+      position: absolute;
+      left: 38px;
+      top: 36px;
+    }
+
+    .add_btn {
+      width: 56.4px;
+      height: 40.8px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+      background-size: 47px 34px;
+      position: absolute;
+      right: 38px;
+      top: 36px;
+    }
+  }
+
+  .main-table {
+    overflow-x: auto;
+    overflow-y: auto;
+    position: relative;
+    background-color: #ffffff;
+    padding: 0.15rem 0.15rem;
+    border-radius: 0.15rem;
+    margin: 0.1rem 0.1rem;
+
+    table {
+      /*width: max-content;*/
+      border-collapse: collapse;
+      border: 0.01rem solid #1989fa;
+      table-layout: fixed;
+    }
+    thead td {
+      text-align: center;
+      border: 0.01rem solid #1989fa;
+      height: 1rem;
+      font-size: 0.32rem;
+      padding: 0 0.4rem;
+      margin: 0;
+      font-weight: bold;
+      white-space: nowrap;
+      /*max-width: 1.2rem;*/
+    }
+    tbody td {
+      font-size: 0.3rem;
+      border: 0.01rem solid #1989fa;
+      height: 1rem;
+      white-space: break-spaces;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      padding: 0 0.1rem;
+      margin: 0;
+      /*max-width: 1.5rem;*/
+      position: relative;
+    }
+
+    .input-field {
+      width: 100%;
+      background-color: unset;
+      border: 0;
+    }
+
+    .validate-error {
+      color: #F56C6C;
+    }
+    .validate-error-box {
+      color: #F56C6C;
+      border: 0.02rem solid #F56C6C;
+    }
+  }
+  .align-right {
+    text-align: right;
+  }
+  .align-center {
+    text-align: center;
+  }
+  .full-height {
+    height: 100%;
+  }
+
+  /deep/ .van-field__label {
+    background-color: #2facfe;
+    margin: 0;
+    color: #fff;
+    border-top-left-radius: 0.15rem;
+    border-bottom-left-radius: 0.15rem;
+    padding: 0 0.2rem;
+    display: flex;
+    align-items: center;
+  }
+
+  /deep/ .van-field__body {
+    background-color: #ffffff;
+    border-top-right-radius: 0.15rem;
+    border-bottom-right-radius: 0.15rem;
+    padding: 0 0.1rem;
+  }
+
+  /deep/ .van-field__body {
+    height: 100%;
+  }
+
+  /deep/ .van-field {
+    background-color: unset;
+    padding: 0.1rem 0.15rem;
+    height: 1rem;
+  }
+
+  .field_no-label /deep/ .van-field__body {
+    border-top-left-radius: 0.15rem;
+    border-bottom-left-radius: 0.15rem;
+  }
+
+  .template-selector /deep/ span {
+    padding-left: 0.8rem;
+    background: #2facfe url('../../../assets/images/sunVillage_info/list_icon_11.png') left center no-repeat;
+    background-size: 0.45rem;
+  }
+
+  .form_readonly /deep/ .van-icon-arrow-down {
+    display: none;
+  }
+
+  .edit-icon {
+    display: inline-block;
+    width: 0.6rem;
+    position: absolute;
+    right: -0.6rem;
+    top: calc(50% - 0.3rem);
+  }
+}
+
+
+</style>

src/views/sunVillage_info/entityReport/reportLineView.vue

@@ -0,0 +1,508 @@
+<template>
+    <div class="app-container">
+      <div class="header_main-placeholder">
+        <div class="header_main">
+          行级填报
+          <div class="return_btn" @click="back"></div>
+          <div class="add_btn" @click="save" v-if="(isAdd || isEdit) && editorData.templateId">保 存</div>
+        </div>
+      </div>
+
+      <van-form ref="form" :class="{'form_readonly': disableEdit}">
+        <van-row>
+          <van-col :span="editorData.templateId ? 16 : 24">
+            <field-select
+              class="template-selector"
+              :value="editorData.templateId"
+              label=" 模板"
+              value-key="reportName"
+              data-key="id"
+              placeholder="报表模板"
+              :rules="[{ required: true }]"
+              :readonly="true"
+              :columns="templateList"
+              @input="getTemplate"
+            />
+          </van-col>
+          <van-col span="8" v-if="!!editorData.templateId">
+            <field-date-picker
+              class="field_no-label"
+              v-model="editorData.reportYear"
+              placeholder="报表年度"
+              formatter="yyyy"
+              :readonly="disableEdit"
+              input-align="center"
+              type="year"
+            />
+          </van-col>
+        </van-row>
+        <van-row v-if="!!editorData.templateId">
+          <van-col span="8">
+            <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleLeft" label="" placeholder="左上" input-align="left"/>
+          </van-col>
+          <van-col span="8">
+            <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleCenter" label="" placeholder="中上" input-align="center"/>
+          </van-col>
+          <van-col span="8">
+            <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleRight" label="" placeholder="右上" input-align="right"/>
+          </van-col>
+        </van-row>
+
+        <div class="main-table" v-if="!!editorData.templateId">
+            <div v-for="(header, rindex) in editorData.headers">
+              <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"/>
+            </div>
+        </div>
+
+        <template v-if="!!editorData.templateId">
+          <div>
+            <van-field :readonly="disableEdit" v-model="editorData.reportRemark" label="备注" placeholder="报表备注"/>
+          </div>
+<!--          <div>
+            <van-field readonly :value="editorData.rule" label="规则" placeholder="报表效验公式"></van-field>
+          </div>-->
+
+          <van-row>
+            <van-col span="8">
+              <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.operatorDepartment" label="" placeholder="填报单位" input-align="left"/>
+            </van-col>
+            <van-col span="8">
+              <van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.operatorName" label="" placeholder="填报人" input-align="center"/>
+            </van-col>
+            <van-col span="8">
+              <field-date-picker
+                class="field_no-label"
+                v-model="editorData.operatorDate"
+                placeholder="填报日期"
+                formatter="yyyy-MM-dd"
+                :readonly="disableEdit"
+                input-align="right"
+              />
+            </van-col>
+          </van-row>
+        </template>
+      </van-form>
+    </div>
+</template>
+
+<script>
+import FieldSelect from "@/components/form/FieldSelect";
+import {
+  addReport, delReport,
+  getReport,
+  getReportTemplate,
+  listReporttitle,
+  updateReport
+} from "@/api/sunVillage_info/entity/report";
+import {array_grouping, array_toMap, date_format} from "@/utils";
+import {Expression} from "@/utils/expression";
+import {is_not_number} from "@/utils/utils";
+import FieldDatePicker from "@/components/form/FieldDatePicker";
+import {Notify} from "vant";
+export default {
+  name: "ReportLineView",
+  components: {FieldDatePicker, FieldSelect},
+  data() {
+    return {
+      editorData: {
+        id: null,
+        templateId: null,
+        reportRemark: null,
+        titleLeft: null,
+        titleCenter: null,
+        titleRight: null,
+        reportStatus: "0",
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        reportName: '',
+        operatorName: '',
+        operatorDate: '',
+        operatorDepartment: '',
+        rule: null,
+        reportYear: date_format('%Y'),
+        headers: [],
+        rows: [],
+        cells: [],
+        rules: [],
+      },
+      templateList: [],
+      loading: false,
+      disableEdit: false,
+      intent: 'add',
+      templateId: null,
+      reportId: null,
+    };
+  },
+  created() {
+    this.getTemplateList();
+    this.parseQuery();
+  },
+  mounted(){
+    this.init();
+  },
+  methods: {
+    getTemplateList() {
+      listReporttitle({
+        type: '2',
+        reportStatus: '0',
+      }).then((resp) => {
+        this.templateList = resp.rows;
+      });
+    },
+    getTemplate() {
+      if(!this.editorData.templateId && !this.editorData.id)
+        return;
+      this.loading = true;
+      if(this.editorData.id) // 修改
+      {
+        getReport(this.editorData.id).then((resp) => {
+          let reportData = resp.data;
+          getReportTemplate(reportData.templateId).then((resp) => {
+            let templateData = resp.data;
+            this.setTableData(templateData, reportData);
+          }).finally(() => {
+            this.loading = false;
+          });
+        }).catch(() => {
+          this.loading = false;
+        });
+      }
+      else
+      {
+        getReportTemplate(this.editorData.templateId).then((resp) => {
+          let templateData = resp.data;
+          this.setTableData(templateData);
+        }).finally(() => {
+          this.loading = false;
+        });
+      }
+    },
+    setTableData(templateData, reportData) {
+      let data;
+      if(!reportData)
+      {
+        data = templateData;
+        data.rows.forEach((x) => {
+          x.forEach((y) => {
+            y.error = false;
+          });
+        });
+      }
+      else
+      {
+        let cells = reportData.cells;
+        data = reportData;
+        data.headers = templateData.headers;
+        data.rows = templateData.rows;
+        data.cells = templateData.cells;
+        data.rules = templateData.rules;
+        data.rule = templateData.rule;
+
+        let group = array_grouping(cells, (x) => x.rowIndex);
+        Object.keys(group).forEach((x) => group[x] = array_toMap(group[x], (x) => x.colIndex));
+        data.rows.forEach((cols, rowIndex) => {
+          cols.forEach((x) => {
+            if(group[rowIndex] && group[rowIndex][x.colIndex])
+            {
+              if(templateData.headers[x.colIndex].type === '4')
+                x.name = group[rowIndex][x.colIndex].name;
+              x.val = group[rowIndex][x.colIndex].val;
+            }
+          })
+        });
+      }
+      this.editorData = data;
+    },
+    calcAlign(type) {
+      switch(type)
+      {
+        case '2':
+          return 'right';
+        case '3':
+        case '4':
+          return 'center';
+        case '1':
+          return 'left';
+      }
+    },
+    calcColor(type) {
+      switch(type)
+      {
+        case '2':
+          return 'unset';
+        case '4':
+          return 'unset';
+        case '3':
+          return '#d7e8f3';
+        case '1':
+          return '#aad8f6';
+      }
+    },
+    calcTextColor(type) {
+      switch(type)
+      {
+        case '2':
+        case '4':
+          return '#2facfe';
+        case '3':
+        case '1':
+          return '#858585';
+      }
+    },
+    save() {
+      this.$refs.form.validate().then(() => {
+        this.preHandle();
+        this.loading = true;
+        let func = this.editorData.id ? updateReport : addReport;
+        func(this.editorData).then((resp) => {
+          this.notify("保存成功!", 'success');
+          this.back();
+        }).finally(() => {
+          this.loading = false;
+        });
+      }).catch(() => {
+        this.notify("请填写完整表单", 'danger');
+        this.$refs.form.scrollToField();
+      });
+    },
+    preHandle() {
+      this.editorData.cells = [];
+      this.editorData.rows.forEach((x) => this.editorData.cells.push(...x));
+    },
+    reset() {
+      this.$refs.form.resetValidation();
+      this.editorData = {
+        id: null,
+        deptId: null,
+        deptName: null,
+        templateId: null,
+        reportName: null,
+        reportYear: null,
+        reportRemark: null,
+        titleLeft: null,
+        titleCenter: null,
+        titleRight: null,
+        rule: null,
+        operatorName: null,
+        operatorDate: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        headers: [],
+        rows: [],
+        cells: [],
+        rules: [],
+      };
+    },
+    parseQuery() {
+      let query = this.$route.query;
+      this.templateId = query.templateId;
+      this.reportId = query.reportId;
+      this.intent = query.intent;
+      if(!this.reportId)
+      {
+        this.intent = 'add';
+        return;
+      }
+      if(this.intent === 'add')
+      {
+        this.reportId = null;
+      }
+      if(!this.templateId && !this.reportId)
+      {
+        this.$router.back();
+        return;
+      }
+    },
+    init() {
+      this.editorData.templateId = this.templateId;
+      this.editorData.id = this.reportId;
+      this.getTemplate();
+      this.disableEdit = this.intent === 'view';
+    },
+    back() {
+      this.$router.back();
+    },
+    notify(message, type) {
+      Notify.clear();
+      Notify({ type: type || 'primary', message: message });
+    },
+  },
+  computed: {
+    isAdd() {
+      return this.intent === 'add';
+    },
+    isEdit() {
+      return this.intent === 'edit';
+    },
+    isView() {
+      return this.intent === 'view';
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container{
+   background: #e9e9e9;
+   min-height: 100vh;
+   width: 100vw;
+  .header_main-placeholder {
+    height: 116px;
+  }
+
+  .header_main {
+    height: 116px;
+    background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 36px;
+    line-height: 116px;
+    text-align: center;
+    color: #fff;
+    z-index: 999;
+
+    .return_btn {
+      width: 24px;
+      height: 43.2px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+      background-size: 20px 36px;
+      position: absolute;
+      left: 38px;
+      top: 36px;
+    }
+
+    .add_btn {
+      width: 72px;
+      //height: 40.8px;
+      //background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+      //background-size: 47px 34px;
+      position: absolute;
+      right: 38px;
+      top: 0;
+      font-size: 28px;
+    }
+  }
+
+  .main-table {
+    overflow-x: auto;
+    overflow-y: auto;
+    position: relative;
+    background-color: #ffffff;
+    padding: 0.15rem 0.15rem;
+    border-radius: 0.15rem;
+    margin: 0.1rem 0.1rem;
+
+    table {
+      width: max-content;
+      border-collapse: collapse;
+      border: 0.01rem solid #1989fa;
+      table-layout: fixed;
+    }
+    thead td {
+      text-align: center;
+      border: 0.01rem solid #1989fa;
+      height: 1rem;
+      font-size: 0.32rem;
+      padding: 0 0.4rem;
+      margin: 0;
+      font-weight: bold;
+      max-width: 1.2rem;
+    }
+    tbody td {
+      font-size: 0.3rem;
+      border: 0.01rem solid #1989fa;
+      height: 1rem;
+      white-space: break-spaces;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      padding: 0;
+      margin: 0;
+      max-width: 1.5rem;
+      position: relative;
+    }
+
+    .input-field {
+      width: 100%;
+      background-color: unset;
+      border: 0;
+    }
+
+    .validate-error {
+      color: #F56C6C;
+    }
+    .validate-error-box {
+      color: #F56C6C;
+      border: 0.02rem solid #F56C6C;
+    }
+  }
+  .align-right {
+    text-align: right;
+  }
+  .align-center {
+    text-align: center;
+  }
+  .full-height {
+    height: 100%;
+  }
+
+  /deep/ .van-field__label {
+    background-color: #2facfe;
+    margin: 0;
+    color: #fff;
+    border-top-left-radius: 0.15rem;
+    border-bottom-left-radius: 0.15rem;
+    padding: 0 0.2rem;
+    display: flex;
+    align-items: center;
+  }
+
+  /deep/ .van-field__body {
+    background-color: #ffffff;
+    border-top-right-radius: 0.15rem;
+    border-bottom-right-radius: 0.15rem;
+    padding: 0 0.1rem;
+  }
+
+  /deep/ .van-field__body {
+    height: 100%;
+  }
+
+  /deep/ .van-field {
+    background-color: unset;
+    padding: 0.1rem 0.15rem;
+    height: 1rem;
+  }
+
+  .field_no-label /deep/ .van-field__body {
+    border-top-left-radius: 0.15rem;
+    border-bottom-left-radius: 0.15rem;
+  }
+
+  .main-table /deep/ .van-field__body {
+    border-right: 0.01rem solid #ccc;
+    border-top: 0.01rem solid #ccc;
+    border-bottom: 0.01rem solid #ccc;
+  }
+
+  .template-selector /deep/ span {
+    padding-left: 0.8rem;
+    background: #2facfe url('../../../assets/images/sunVillage_info/list_icon_11.png') left center no-repeat;
+    background-size: 0.45rem;
+  }
+
+  .form_readonly /deep/ .van-icon-arrow-down {
+    display: none;
+  }
+}
+
+
+</style>

src/views/sunVillage_info/entityReport/reportView.vue

@@ -8,7 +8,7 @@
         </div>
       </div>
 
-      <van-form ref="form" :class="{'form_readonly': disableEdit}">
+      <van-form ref="form" :readonly="disableEdit" :class="{'form_readonly': disableEdit}">
         <van-row>
           <van-col :span="editorData.templateId ? 16 : 24">
             <field-select
@@ -20,7 +20,7 @@
               placeholder="报表模板"
               :rules="[{ required: true }]"
               :required="true"
-              :readonly="disableEdit"
+              :readonly="disableEdit || !!editorData.id"
               :columns="templateList"
               @input="getTemplate"
             />
@@ -56,9 +56,7 @@
               <td v-for="(header) in removePlaceholder(editorData.headers)" :colspan="header.colspan" :style="{
                 'background-color': calcColor(header.type),
                 'color': calcTextColor(header.type),
-              }">
-                {{header.headerName}}
-              </td>
+              }">{{header.headerName}}</td>
             </tr>
             </thead>
 
@@ -68,13 +66,13 @@
                 'text-align': calcAlign(editorData.headers[col.colIndex].type),
                 'background-color': calcColor(editorData.headers[col.colIndex].type),
               }">
-                <div class="full-height" v-if="editorData.headers[col.colIndex].type === '2'" :class="{'validate-error': col.error, 'validate-error-box': col.error,}">
+                <div class="absolute-full" v-if="editorData.headers[col.colIndex].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'">
                   <input class="input-field align-center full-height" v-model="col.name" :readonly="disableEdit"></input>
                 </div>
-                <div v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>
+                <div class="full-height" v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>
               </td>
             </tr>
             </tbody>
@@ -499,7 +497,7 @@ export default {
     margin: 0.1rem 0.1rem;
 
     table {
-      width: max-content;
+      /*width: max-content;*/
       border-collapse: collapse;
       border: 0.01rem solid #1989fa;
       table-layout: fixed;
@@ -512,7 +510,8 @@ export default {
       padding: 0 0.4rem;
       margin: 0;
       font-weight: bold;
-      max-width: 1.2rem;
+      white-space: nowrap;
+      /*max-width: 1.2rem;*/
     }
     tbody td {
       font-size: 0.3rem;
@@ -521,9 +520,9 @@ export default {
       white-space: break-spaces;
       word-wrap: break-word;
       overflow-wrap: break-word;
-      padding: 0;
+      padding: 0 0.1rem;
       margin: 0;
-      max-width: 1.5rem;
+      /*max-width: 1.5rem;*/
       position: relative;
     }
 
@@ -593,6 +592,14 @@ export default {
   .form_readonly /deep/ .van-icon-arrow-down {
     display: none;
   }
+
+  .absolute-full {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 }