foton-laws-system-front/src/pages/customReport/index.vue

<template>
<div class="customReport">
  <!-- 顶部工具栏 -->
  <table-tools-bar>
    <div slot="left">
      <el-button type="primary" class="searchAngNewBtn" @click="saveUserInfo">新增</el-button>
    </div>
  </table-tools-bar>
  <el-divider></el-divider>
  <div class="content">
    <el-table
      ref="selection"
      :data="standInfoList"
      tooltip-effect="dark"
      style="width: 100%;padding:0 0 20px 0;"
      :height="tableHeight"
      border
      :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
      @selection-change="standSelectChange">
      <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      <el-table-column
        prop="rdpName"
        label="名字"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="rdpDesc"
        label="描述"
        align="center">
      </el-table-column>
      <el-table-column
        prop="action"
        label="操作"
        width="280px"
        align="center">
        <template slot-scope="scope">
          <el-button
            class="opera-btn"
            size="mini"
            type="danger"
            @click="look(scope.row)">查看</el-button>
          <el-button
            class="opera-btn"
            size="mini"
            type="warning"
            @click.stop="selectStandardPro(scope.row, 'edit')">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <iframe :src = "src" :width="width" height="300"></iframe>
  </div>
  <pagination :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
  <loading :loading="spinShow">数据加载中……</loading>
  <div>
    <!-- 新增抽屉-->
    <el-drawer
      :title="numTitle"
      :wrapperClosable="false"
      :visible.sync="showNumModal"
      :destroy-on-close="true"
      size="1000px"
      custom-class="demo-drawer"
      @close="closeDrawer"
    >
<!--      <loading :loading="drawerLoading">正在保存</loading>-->
<!--      :rules="userVOFormRules"-->
      <div class="demo-drawer__content">
        <el-form
          ref="userVOForm"
          :model="userVO"
          label-position="right"
          class="label-input-form"
          auto-complete="new-password"
          inline
        >
          <el-row span="12">
            <el-col :span="12">
              <el-form-item
                label="名字"
                prop="rdpName"
                class="add-form-item"
              >
                <el-input
                  v-model="userVO.rdpName"
                  placeholder="请输入名字"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="描述"
                prop="rdpDesc"
                class="add-form-item"
              >
                <el-input
                  v-model="userVO.rdpDesc"
                  placeholder="请输入描述"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div id="roleFormButton" class="demo-drawer-footer">
        <el-button size="mini" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="mini" @click="saveUserInfo('userVOForm')">提交</el-button>
      </div>
    </el-drawer>
  </div>
</div>
</template>

<script>
export default {
  name: 'customReport',
  components: {
  },
  data () {
    return {
      spinShow: false,
      standCommonlySearch: {},
      total: 0,
      splitInfoPage: 1,
      splitInfoPageSize: this.$store.getters.userInfo.configContent,
      selectedList: [],
      numTitle: '',
      numType: '',
      showNumModal: false,
      userVO: {
        rdpName: '',
        rdpDesc: ''
      },
      userVOFormRules: {
        rdpName: [{required: true, message: '名字不能为空', trigger: 'blur'},
          {type: 'string', max: 50, message: '最多输入50位', trigger: 'blur'}],
        rdpDesc: [{required: true, message: '描述不能为空', trigger: 'blur'},
          {type: 'string', max: 50, message: '最多输入50位', trigger: 'blur'}]
      },
      standInfoList: [],
      tableHeight: null,
      width: '',
      src: '',
      srcTwo: '',
      srcEdit: ''
    }
  },
  props: {
  },
  watch: {
  },
  methods: {
    // 新增
    // add () {
    // this.numType = 1
    // this.numTitle = '新增自定义报表'
    // this.showNumModal = true
    // this.userVO.rdpName = ''
    // this.userVO.rdpDesc = ''
    // this.$nextTick(() => {
    //   this.$refs['userVOForm'].resetFields()
    // })
    //   this.saveUserInfo()
    // },
    clearSearchStand () {
      this.userVO.rdpName = ''
      this.userVO.rdpDesc = ''
    },
    // 关闭抽屉
    closeDrawer () {
      this.showNumModal = false
      this.$nextTick(() => {
        // 清空新增和编辑的form表单内容
        for (let i in this.standNum) {
          this.standNum[i] = ''
        }
      })
    },
    // 新增跳页
    saveUserInfo (name) {
      this.$http.get('report/msgRdpMes/save', {}, {_this: this},
        res => {
          if (res.ok) {
            this.src = res.data.ssoId
            window.open(this.src)
          }
        }, e => {})
      // this.$refs[name].validate((valid) => {
      //   if (valid) {
      //     // 验证标准--新增、编辑都先验证
      //     this.$http.post('report/msgRdpMes/save', {
      //       // rdpName: JSON.stringify(this.userVO.rdpName),
      //       // rdpDesc: JSON.stringify(this.userVO.rdpDesc)
      //     },
      //     {_this: this, loading: this.loading},
      //     res => {
      //       if (res.ok) {
      //         // 更新
      //       }
      //     }, e => {})
      //   } else {
      //   }
      // })
    },
    pageChange (page) {
      this.splitInfoPage = page
      this.sarStandCompareHis()
    },
    // 分页每页显示数改变后方法
    pageSizeChange (pageSize) {
      this.splitInfoPageSize = pageSize
      this.sarStandCompareHis()
    },
    standSelectChange (data) {
      this.selectedList = []
      for (let i = 0; i < data.length; i++) {
        this.selectedList.push(data[i].id)
      }
    },
    // 查看
    look (row) {
      let ssoId = row.rdpId
      this.$http.get('report/msgRdpMes/queryListByOne', {rdpId: ssoId}, {_this: this},
        res => {
          if (res.ok) {
            this.srcTwo = res.data.ssoId
            window.open(this.srcTwo)
          }
        }, e => {})
    },
    // 编辑
    selectStandardPro (item, state) {
      let rdpId = item.rdpId
      this.$http.get('report/msgRdpMes/update', {rdpId: rdpId}, {_this: this},
        res => {
          if (res.ok) {
            this.srcEdit = res.data.ssoId
            window.open(this.srcEdit)
          }
        }, e => {})
    },
    // 查询表格数据
    sarStandCompareHis () {
      this.spinShow = true
      this.$http.get('report/msgRdpMes/page', {
        page: this.splitInfoPage,
        pageSize: this.splitInfoPageSize
      }, {
        _this: this
      }, res => {
        this.standInfoList = res.data.list
        this.total = res.data.count
        this.spinShow = false
      }, e => {
      })
    }
  },
  mounted () {
    this.width = $('.content').width()
    window.onresize = () => {
      this.width = $('.content').width()
    }
    this.sarStandCompareHis()
  }
}
</script>

<style lang="less" scoped>
  @import '~@/assets/styles/mixins';
  @import '~@/assets/styles/style';
  .customReport{
    padding: 15px;
    height: 100%;
    .content{
      overflow: hidden;
      height: calc(~'100% - 160px');
      width:calc(~'100% - 15px')
    }
  }
</style>