gms-app.vue

<template>
  <div class="feedback">
    <div class="feedback-title">
      <span class="feedback-title-side"></span>
      反馈信息
      <span class="feedback-title-more" @click="handleMore">
        <span>更多</span>
        <Icon type="ios-arrow-forward" class="more-icon"/>
      </span>
    </div>
    <div class="feedback-content">
      <messageItem v-for="(item,index) in homeTableData" @seeDetail="seeDetail(item)" :file="item" :key="index"></messageItem>
    </div>
    <Modal class-name="file-modal" v-model="modalShow" title="反馈信息列表" width="750">
      <div style="overflow: auto">
        <tableMore
          :tableData="tableData"
          :total="count"
          @changePage="changePage"
          @pageSizeChange="pageSizeChange"
          @seeDetail="seeDetail"
          ref="tableMoreRef"
        ></tableMore>
      </div>
      <div slot="footer">
        <Button @click="modalShow = false">关闭</Button>
        <Button @click="updateBatch" type="primary">已阅</Button>
      </div>
    </Modal>
    <billForm
      :billDefine="row.billDefine"
      :billId="row.billId"
      :title="row.title"
      :id="row.id"
      :billtemplate="row.billtemplate"
      @updateBatch="updateBatch"
    >
    </billForm>
  </div>
</template>
<script>
import tableMore from "./table-more.vue";
import billForm from "./bill-form.vue";
import messageItem from "./messageItem.vue"
export default {
  components: {
    tableMore,
    billForm,
    messageItem
  },
  props: {
    itemSetting: {
      type: Array,
      default: () => [],
    },
  },
  filters: {
    filterCreateTime(val) {
      return val.substr(0, 10)
    },
  },
  data() {
    return {
      feedback: [],
      modalShow: false,
      tableData: [],
      homeTableData:[],
      count: 0,
      row: {},
      limit:7
    };
  },
  created() {
    let prop = this.itemSetting.properties;
    if (prop && prop.num) {
      this.limit = Number(prop.num);
    }
  },
  mounted() {
    this.getFileLList();
  },
  methods: {
    seeDetail(row) {
      this.row = {};
      this.$nextTick(() => {
        this.row = row;
      });
    },
    async updateBatch(list) {
      let arr = (list.length)?list:this.$refs.tableMoreRef.selectArr;
      if (arr.length == 0) {
        this.$Message.info("请勾选需要操作的数据");
        this.modalShow = true;
        return;
      }
      const url = `/rbc/auditFeedBack/updateBatch`;
      let params = arr.map((v) => {
        v.readState = 1; // 0 是未阅  1 是已阅读
        return v;
      });
      const { data } = await window.GMS.$http.post(url, params);
      if (data.msg) {
        this.changePage(1); //刷新列表
        this.$Message.success(data.msg);
      }
      this.modalShow = false;
    },
    changePage(page) {
      let pageSize = this.$refs.tableMoreRef.pageSize;
      let getOffset = (page - 1) * pageSize;
      this.getFileLList(getOffset, pageSize);
    },
    pageSizeChange(pageSize) {
      let getOffset = (this.$refs.tableMoreRef.pageNum * 1 - 1) * pageSize;
      this.getFileLList(getOffset, pageSize);
    },
    async getFileLList(getOffset = 0, getLimit = 7) {
      const url = `/rbc/auditFeedBack/query`;
      let params = {
        pagination: true, //-是否分页  如果不开启下面的参数不会生效
        offset: getOffset, // -第几页
        limit: this.modalShow ? getLimit : this.limit, //-一页多少行
        readState:0
      };
      const { data } = await window.GMS.$http.post(url, params);
      if(this.modalShow){
        this.tableData = data.data;
        this.count = data.count;
      }else{
        this.homeTableData = data.data;
      }
    },
    handleMore() {
      this.modalShow = true;
      this.getFileLList(0,10);
    },
  },
};
</script>
<style lang="less" scoped>
.feedback {
  height: 100%;
  padding: 16px;
  &-title {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    height: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0f0f0f;
    line-height: 22px;
    margin-bottom: 16px;
    &-side {
      display: inline-block;
      width: 3px;
      height: 14px;
      background: #5369d8;
      border-radius: 2px;
      margin-right: 5px;
    }
    &-more {
      float: right;
      width: 45px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #5369d8;
      line-height: 20px;
      cursor: pointer;
      .more-icon {
        background: rgba(83, 105, 216, 0.11);
        border-radius: 2px;
      }
    }
  }
  &-content {
    float:left;
    width:100%;
  }
}
.file-modal {
  /deep/ .ivu-modal {
    .ivu-modal-body {
      height: 500px;
      overflow: auto;
    }
  }
}
</style>