xujiecloud-vue/src/views/modules/eamReport/eamObjectMaintenanceReport.vue

<template>
  <div class="mod-config">
    <div>
        <span @click="favoriteFunction()">
         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg>
        </span>
    </div>
    <el-form :inline="true"  label-position="top" :model="searchData" @keyup.enter.native="getDataList()">
      <el-form-item >
        <span slot="label" style="" @click="getBaseList(200)"><a herf="#">设备编码</a></span>
        <el-input v-model="searchData.objectID"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'设备名称'">
        <el-input v-model="searchData.objectDesc"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item >
        <span slot="label" style="" @click="getBaseList(27)"><a herf="#">分类编码</a></span>
        <el-input v-model="searchData.familyID"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item >
        <span slot="label" style="" @click="getBaseList(28)"><a herf="#">分组编码</a></span>
        <el-input v-model="searchData.groupID"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'维保日期：'">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-top: 23px;">
        <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
      </el-form-item>
      <el-form-item  :label="' '">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item  :label="' '">
        <el-button @click="getDataList()">查询</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ "导出" }}
        </download-excel>
      </el-form-item>
    </el-form>
    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :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"
        :min-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-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {
    searchEamObjectSumReport
  } from "@/api/eam/eamReport.js"
  import {
    getTableDefaultListLanguage,
    getTableUserListLanguage,
  } from "@/api/table.js"
  import Chooselist from '@/views/modules/common/Chooselist_eam'
  import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'

  export default {
    components: {
      Chooselist
    },
    watch: {
      searchData: {
        deep: true,
        handler: function (newV, oldV) {
          this.searchData.familyID = this.searchData.familyID.toUpperCase()
        }
      },

      modalData: {
        deep: true,
        handler: function (newV, oldV) {
          this.modalData.familyID = this.modalData.familyID.toUpperCase()
        }
      }
    },
    data () {
      return {
        // 是否收藏
        favorite: false,
        tagNo:'',
        // 导出 start
        exportData: [],
        exportName: "设备维保报表" + this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ["设备维保报表"],
        exportFooter: [],
        resultList:[],
        // 导出 end
        searchData: {
          site: this.$store.state.user.site,
          objectID: '',
          objectDesc: '',
          familyID: '',
          groupID: '',
          functionType:'B',
          startDate: '',
          endDate: '',
          active: 'Y',
          page: 1,
          limit: 10,
        },
        height: 200,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataList: [],
        dataListLoading: false,
        // 展示列集
        columnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableObjectID',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'objectID',
            headerAlign: "center",
            align: "left",
            columnLabel: '设备编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 152,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableObjectDesc',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'objectDesc',
            headerAlign: "center",
            align: "left",
            columnLabel: '设备名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableFamilyID',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'familyID',
            headerAlign: "center",
            align: "center",
            columnLabel: '分类编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableFamilyDesc',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'familyDesc',
            headerAlign: "center",
            align: "left",
            columnLabel: '分类名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableGroupID',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'groupID',
            headerAlign: "center",
            align: "center",
            columnLabel: '分组编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableGroupDesc',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'groupDesc',
            headerAlign: "center",
            align: "left",
            columnLabel: '分组名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableQtyAll',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'qtyAll',
            headerAlign: "center",
            align: "right",
            columnLabel: '总工单数',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableQTyFinished',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'qtyFinished',
            headerAlign: "center",
            align: "right",
            columnLabel: '已完工数',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableQtyUnFinishied',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'qtyUnFinishied',
            headerAlign: "center",
            align: "right",
            columnLabel: '未开工数',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableQtycancelled',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'qtycancelled',
            headerAlign: "center",
            align: "right",
            columnLabel: '取消数',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101005002,
            serialNumber: '101005002TableFinishPercent',
            tableId: "101005002Table",
            tableName: "设备维保报表",
            columnProp: 'finishPercent',
            headerAlign: "center",
            align: "right",
            columnLabel: '完成比率(%)',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 145,
          }
        ],

      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 210
      })
    },
    created () {
      this.getDataList()
      this.favoriteIsOk()
      // 动态列
      this.getTableUserColumn(this.$route.meta.menuId+'table',1)
    },
    methods: {
      // 校验用户是否收藏
      favoriteIsOk() {
        let userFavorite = {
          userId: this.$store.state.user.id,
          languageCode: this.$i18n.locale
        }
        userFavoriteList(userFavorite).then(({data}) => {
          for (let i = 0; i < data.list.length; i++) {
            if(this.$route.meta.menuId === data.list[i].menuId){
              this.favorite = true
            }
          }
        })
      },
      // 收藏 OR 取消收藏
      favoriteFunction () {
        let userFavorite = {
          userId: this.$store.state.user.id,
          functionId: this.$route.meta.menuId,
        }
        if (this.favorite) {
          // 取消收藏
          // this.$confirm(`确定取消收藏`, '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // }).then(() => {
            removeUserFavorite(userFavorite).then(({data}) => {
              this.$message.success(data.msg)
              this.favorite = false
            })
          // })
        } else {
          // 收藏
          saveUserFavorite(userFavorite).then(({data}) => {
            this.$message.success(data.msg)
            this.favorite = true
          })
        }

      },

      // 获取基础数据列表S
      getBaseList (val,type) {
        this.tagNo = val
        this.$nextTick(() => {
          let strVal = ''
          if (val === 200 ) {
            strVal = this.searchData.objectID
            this.$refs.baseList.init(val, strVal)
          }

          if (val === 27) {
            strVal = this.searchData.familyID
            this.$refs.baseList.init(val, strVal)
          }
          if (val === 28) {
            strVal = this.searchData.groupID
            this.$refs.baseList.init(val, strVal)
          }
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 200) {
          this.searchData.objectID = val.ObjectID
        }
        if (this.tagNo === 27) {
          this.searchData.familyID = val.FamilyID
        }
        if (this.tagNo === 28) {
          this.searchData.groupID = val.GroupID
        }
      },
      // 获取数据列表
      getDataList () {
        this.searchData.limit = this.pageSize
        this.searchData.page = this.pageIndex
        searchEamObjectSumReport(this.searchData).then(({data}) => {
          if (data.code == 0) {
            this.dataList = data.page.list
            this.pageIndex = data.page.currPage
            this.pageSize = data.page.pageSize
            this.totalPage = data.page.totalCount
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },


      //导出excel
       async createExportData() {
        this.searchData.limit = -1
        this.searchData.page = 1
         await searchEamObjectSumReport(this.searchData).then(({data}) => {
          this.resultList= data.page.list;
        })

        return this.resultList;
      },
      startDownload() {
        //  this.exportData = this.dataList

      },
      finishDownload() {

      },
      fields() {
        let json = "{"
        this.columnList.forEach((item, index) => {
          if (index == this.columnList.length - 1) {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
          } else {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
          }
        })
        json += "}"
        let s = eval("(" + json + ")")

        return s
      },
      // 导出 end

      // 动态列开始 获取 用户保存的 格式列
      async getTableUserColumn(tableId, columnId) {
        let queryTableUser = {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          tableId: tableId,
          status: true,
          languageCode: this.$i18n.locale
        }
        await getTableUserListLanguage(queryTableUser).then(({data}) => {
          if (data.rows.length > 0) {
            //this.columnList1 = []
            switch (columnId) {
              case 1:
                this.columnList = data.rows
                break;
              // case 2:
              //   this.columnDetailList = data.rows
              //   break;
              // case 3:
              //   this.columnList2 = data.rows
              //   break;
              // case 4:
              //   this.columnList3 = data.rows
              //   break;
            }

          } else {
            this.getColumnList(tableId, columnId)
          }
        })

      },

      // 获取 tableDefault 列
      async getColumnList(tableId, columnId) {
        let queryTable= {
          functionId: this.$route.meta.menuId,
          tableId: tableId,
          languageCode: this.$i18n.locale
        }
        await getTableDefaultListLanguage(queryTable).then(({data}) => {
          if (!data.rows.length == 0) {
            switch (columnId) {
              case 1:
                this.columnList = data.rows
                break;
              // case 2:
              //   this.columnDetailList = data.rows
              //   break;
              // case 3:
              //   this.columnList2 = data.rows
              //   break;
              // case 4:
              //   this.columnList3 = data.rows
              //   break;
            }
          } else {
            // this.showDefault = true.
          }
        })

      },
      //动态列结束
    }
  }
</script>