nsgk_mobile/src/views/sunVillage_info/entityReport/reportLineSummary.vue

<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 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(col.type),
                  'background-color': calcColor(col.type),
                }">
                  <div class="full-height">
                    <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="col.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(col.type)}">{{col.name}}</div>

                    <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>
            </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: [],
        headerRows: [],
        headerLength: 0,
        headerDeep: 0,
        headerTypes: [],
        header: null,
      },
      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: [],
        headerRows: [],
        headerLength: 0,
        headerDeep: 0,
        headerTypes: [],
        header: null,
      };
    },
    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;
    }
    th {
      text-align: center;
      border: 0.01rem solid #1989fa;
      min-height: 1rem;
      font-size: 0.32rem;
      padding: 0.4rem 0.4rem;
      margin: 0;
      font-weight: bold;
      min-width: 1rem;
      /*max-width: 2rem;*/
      white-space: nowrap;
    }
    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;
      min-width: 1rem;
    }

    .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>