boying-vue/src/views/modules/report/report_manage.vue

<template>
  <div class="customer-css" >
    <!--  查询时间和产品  -->
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" >
      <el-row>
        <el-form-item :label="'报表名称:'">
          <el-input v-model="pageData.reportName" style="width: 120px"></el-input>
        </el-form-item>
        <el-form-item :label="'报表分类:'">
          <el-select v-model="pageData.reportType"  style="width: 130px">
            <el-option
              v-for="(item, index) in reportTypeList"
              :key="index"
              :label="item.baseData"
              :value="item.baseData">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="''" style="margin-left: 50px; margin-top: 20px;">
          <el-button class="customer-bun-min" type="primary" @click="refreshPageTables" style="margin-left: 10px; margin-bottom: 5px;">查询</el-button>
          <el-button class="customer-bun-min" type="primary" @click="addReportModal" style="margin-left: 10px; margin-bottom: 5px;">新增</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <!--  工单主表信息  -->
    <el-main style="margin-top: 5px; padding: 0px; width: 100%;">
      <el-table
        :height="height"
        :data="reportList"
        border
        ref="reportTable"
        highlight-current-row
        @row-click="setCurrentReportRow"
        v-loading="dataListLoading"
        style="margin-top: 0px; width: 100%;">
        <el-table-column
          fixed="left"
          header-align="center"
          align="center"
          width="220"
          :label="'操作'">
          <template slot-scope="scope">
            <a class="customer-a"  @click="editCustomerReportModal(scope.row)">编辑</a>
            <a class="customer-a"  @click="warnDeleteCustomerReportConfirm(scope.row)">删除</a>
            <a class="customer-a"  @click="editCustomerReportSearchColumnModal(scope.row)">查询参数维护</a>
            <a class="customer-a"  @click="showCustomerReportSearchColumnModal(scope.row)">查询</a>
            <a class="customer-a"  @click="showAuthCustomerReportModal(scope.row)">权限</a>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in columnReportArray" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed==''?false:item.fixed"
          :width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
            <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                               style="width: 100px; height: 80px"/></span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>


      <!-- 新增 -->
    <addCustomerReport ref="addCustomerReport" :close-on-click-modal="false"
                  :visible.sync="addCustomerReportFlag"
                  @refreshCurrentPage = "refreshCurrentPage">
    </addCustomerReport>

    <!-- 修改 -->
    <updateCustomerReport ref="updateCustomerReport" :close-on-click-modal="false"
                       :visible.sync="updateCustomerReportFlag"
                       @refreshCurrentPage = "refreshCurrentPage">
    </updateCustomerReport>

    <!-- 查询参数维护 -->
    <editCustomerReportSearchColumn ref="editCustomerReportSearchColumn" :close-on-click-modal="false"
                          :visible.sync="editCustomerReportSearchColumnFlag"
                          @refreshCurrentPage = "refreshCurrentPage">
    </editCustomerReportSearchColumn>

    <!-- 查询列展示 -->
    <showCustomerReportSearchColumn ref="showCustomerReportSearchColumn" :close-on-click-modal="false"
                                    :visible.sync="showCustomerReportSearchColumnFlag"
                                    @refreshCurrentPage = "refreshCurrentPage">
    </showCustomerReportSearchColumn>


    <!-- 查询列展示 -->
    <authSingleCustomerReport ref="authSingleCustomerReport" :close-on-click-modal="false"
                                    :visible.sync="showAuthCustomerReportFlag"
                                    @refreshCurrentPage = "refreshCurrentPage">
    </authSingleCustomerReport>

  </div>
</template>

<script>
  /*组件*/
  import addCustomerReport from '@/views/modules/report/com_add_customer_report';/*新增自定义报表的功能*/
  import updateCustomerReport from '@/views/modules/report/com_update_customer_report';/*新增自定义报表的功能*/
  import editCustomerReportSearchColumn from '@/views/modules/report/com_edit_customer_report_search_column';/*新增自定义报表的功能*/
  import showCustomerReportSearchColumn from '@/views/modules/report/com_show_customer_report_search_column';/*新增自定义报表的功能*/
  import authSingleCustomerReport from '@/views/modules/report/com_auth_single_customer_report';/*单个报表赋权限*/
import {
  getReportTypeList,
  getCurrentPageTables,
  deleteCustomerReport,
} from '@/api/report/report_manage.js'

export default {
  data() {
    return {
      height: 200,
      reportTypeList: [],
      addCustomerReportFlag: false,
      updateCustomerReportFlag: false,
      editCustomerReportSearchColumnFlag: false,
      showCustomerReportSearchColumnFlag: false,
      showAuthCustomerReportFlag: false,
      currentReportRow: {},
      pageData: {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        reportName: '',
        reportType: '',
        seqNo: 0,
        status: 1,
      },
      reportList: [],
      dataListLoading: false,
      columnReportArray: [
        {
          userId: this.$store.state.user.name,
          functionId: 5306,
          serialNumber: '5306ReportReportId',
          tableId: "5306Report",
          tableName: "自定义报表",
          columnProp: "reportId",
          headerAlign: "center",
          align: "center",
          columnLabel: "报表ID",
          columnWidth: '',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5306,
          serialNumber: '5306ReportReportName',
          tableId: "5306Report",
          tableName: "自定义报表",
          columnProp: "reportName",
          headerAlign: "center",
          align: "center",
          columnLabel: "报表名称",
          columnWidth: '',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5306,
          serialNumber: '5306ReportReportType',
          tableId: "5306Report",
          tableName: "自定义报表",
          columnProp: "reportType",
          headerAlign: "center",
          align: "center",
          columnLabel: "报表分类",
          columnWidth: '',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5306,
          serialNumber: '5306ReportReportRemark',
          tableId: "5306Report",
          tableName: "自定义报表",
          columnProp: "reportRemark",
          headerAlign: "center",
          align: "center",
          columnLabel: "备注",
          columnWidth: '',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
    }
  },
  /*组件*/
  components: {
    addCustomerReport,/*新增自定义报表的功能*/
    updateCustomerReport,/*报表修改*/
    editCustomerReportSearchColumn,/*查询列修改*/
    showCustomerReportSearchColumn,/*显示查询列参数*/
    authSingleCustomerReport,/*单个报表赋权限*/
  },

  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 165;
    })
  },
  methods: {

    /*刷新报工的类型*/
    refreshReportType(){
      let requestData = {'type': 'report_type'};
      getReportTypeList(requestData).then(({data}) => {
        this.reportTypeList = data.rows;
        //选则第一个
        this.pageData.reportType = data.rows[0].baseData;
        //加载当前报表数据
        this.refreshPageTables();
      })
    },

    /*刷新页面table*/
    refreshCurrentPage(){
      this.refreshPageTables();
    },

    /*获取工单信息*/
    refreshPageTables() {
      getCurrentPageTables(this.pageData).then(({data}) => {
        this.reportList = data.rows;
        //清空已经选好的行数据
        this.currentReportRow = null;
      })
    },

    /*刷新当前的页面的显示数据*/
    addReportModal(orderRow){
      this.$nextTick(() => {
        this.addCustomerReportFlag = true;
        this.$refs.addCustomerReport.init();
      });
    },

    /*修改当前的定制报表数据*/
    editCustomerReportModal(currentRow){
      this.$nextTick(() => {
        this.updateCustomerReportFlag = true;
        this.$refs.updateCustomerReport.init(currentRow.reportId);
      });
    },

    /*查询列维护*/
    editCustomerReportSearchColumnModal(currentRow){
      this.$nextTick(() => {
        this.editCustomerReportSearchColumnFlag = true;
        this.$refs.editCustomerReportSearchColumn.init(currentRow.reportId);
      });
    },

    /*展示查询列*/
    showCustomerReportSearchColumnModal(currentRow){
      this.$nextTick(() => {
        this.showCustomerReportSearchColumnFlag = true;
        this.$refs.showCustomerReportSearchColumn.init(currentRow.reportId);
      });
    },

    /*给单个报表赋权限*/
    showAuthCustomerReportModal(currentRow){
      this.$nextTick(() => {
        this.showAuthCustomerReportFlag = true;
        this.$refs.authSingleCustomerReport.init(currentRow);
      });
    },

    /*设置工艺的行*/
    setCurrentReportRow(row, column, event) {
      this.currentReportRow = row;
    },

    /*提醒是否删除的提示*/
    warnDeleteCustomerReportConfirm(currentCustomerReport) {
      this.$confirm('确实要删除报表'+currentCustomerReport.reportName+'吗?', '提示', {
        confirmButtonText: '确认',
        celButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //执行删除定制报表的功能
        this.deleteCustomerReportOperation(currentCustomerReport);
      });
    },

    /*执行删除定制报表的功能*/
    deleteCustomerReportOperation(currentCustomerReport) {
      //执行删除卷的操作
      deleteCustomerReport(currentCustomerReport).then(({data}) => {
        //判断是否成功
        if (data.code == 200) {
          this.$message.success(data.msg);
          //刷新报工的页面
          this.refreshPageTables();
        } else {
          this.$message.error(data.msg);
        }
      });
    },

  },
  created() {
    //查询报表的类型
    this.refreshReportType();
  },


}
</script>

<!--当前页面的标签样式-->
<style scoped lang="scss">

/*针对el-card*/
.customer-card .el-form-item__content{
  margin-top: -15px;
}
.customer-card .el-form-item{
  height: 22px;
}

.customer-border .el-form-item__content{
  margin-top: -30px;
}

/*全局年与日类型  宽度*/
div.el-time-width{
  width: 110px !important;
}
/* 全局时间右边框*/
.customer-css input.el-input__inner{
  height: 22px !important;
  padding-right: 0px !important;
}
/* 控制el-card标签的数据*/
div.customer-el-card {
  margin-left: 110px;
  margin-top: -15px;
  height: 20px;
  width: 60px;
}
/* 颜色控制 */
div.customer-el-card-pink {
  background: #FF00FF;
}

div.customer-el-card-orange {
  background: #FFD700;
}

div.customer-el-card-blue {
  background: #0000CD;
}

/*清掉样式*/
.el-radio+.el-radio {
  margin-left: 0px;
}


/*当前按钮的通用样式*/
.customer-css .customer-bun-mid{
  width: 60px;
  text-align: center;
}

.customer-css .customer-bun-min{
  width: 50px;
  text-align: center;
}

.customer-css .customer-bun-max{
  width: 80px;
  text-align: center;
}
/*当前按钮的通用样式*/
.customer-css .el-button--medium {
  padding: 5px 5px;
}

</style>