zx_bms_uni/libs/index.vue

<template>
  <div>
    <el-dialog
      v-loading="loading"
      :modal-append-to-body="false"
      :visible.sync="visible"
      :width="width"
      :close-on-click-modal="false"
      :before-close="() => {$emit('update:visible', false)}"
      title="设备天数修改记录">

      <el-button type="success" icon="el-icon-download" size="mini" @click="handleDownload">当前页面导出</el-button>

      <div class="app-container">
        <el-table
          ref="multipleTable"
          :data="dataList"
          :highlight-current-row="true"
          stripe
          border
          size="mini"
          style="width: 100%">
          <el-table-column prop="target_id" label="订单编号" align="center" />
          <el-table-column prop="battery_sn" label="设备编号" align="center" />
          <el-table-column prop="shop_name" label="门店" align="center" />
          <el-table-column prop="days" label="天数变动" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.days-0 >0 ? ('+' + scope.row.days) : scope.row.days }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="target_type" label="状态" align="center">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.target_type == 1">充值</div>
                <div v-if="scope.row.target_type == 2">用户租赁扣除</div>
                <div v-if="scope.row.target_type == 3">用户提前解绑退回</div>
                <div v-if="scope.row.target_type == 4">手动绑定电池扣除</div>
                <div v-if="scope.row.target_type == 5">增加租赁过期时间</div>
                <div v-if="scope.row.target_type == 6">减少租赁过期时间</div>
                <div v-if="scope.row.target_type == 7">用户未支付归还</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="op_days" label="门店剩余天数" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.after_days }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ctime" label="时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.ctime == '0' ?'': DateFormat(new Date((scope.row.ctime - 0) * 1000), "yyyy-MM-dd HH:mm:ss") }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :total="count"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.limit"
          :page-sizes.sync="searchForm.page_sizes"
          style="margin: 0;"
          @pagination="loadDataList" />
        <scrollbar
          v-if="$refs.multipleTable&&$refs.multipleTable.layout.scrollX"
          ref="scrollbar"
          v-model="$refs.multipleTable.bodyWrapper.scrollLeft"
          :size="$refs.multipleTable?$refs.multipleTable.layout.bodyWidth:0"
          :page="$refs.multipleTable?$refs.multipleTable.$el.offsetWidth:0" />

      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  apiUserDaysHistory
} from '@/api/user'
import {
  DateFormat
} from '@/lib'
import LazyTree from '@/components/LazyTree'
import Scrollbar from '@/components/Scrollbar'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'Invite',
  components: {
    Pagination,
    LazyTree,
    Scrollbar
  },
  props: {
    showTime: {
      type: Number,
      default: 0
    },
    width: {
      type: String,
      default: '900px'
    },
    visible: {
      type: Boolean,
      default: false
    },
    shopId: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      isShow: false,
      shop_id: '',
      count: 0,
      loading: false,
      dataList: [],
      searchForm: {
        is_all_level: 1,
        page: 1,
        limit: 10,
        page_sizes: [10, 30, 50, 200]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    showTime() {
      this.loadDataList()
    },
    shopId: {
      deep: true,
      handler(val) {
        this.searchForm.page = 1
        if (val) {
          this.shop_id = val
          this.loadDataList()
        }
      }
    }
  },
  created() {
    this.DateFormat = DateFormat
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    loadDataList() {
      this.searchForm.is_all_level = 1
      this.searchForm.shop_id = this.shop_id
      this.searchForm.time = new Date().getTime()
      apiUserDaysHistory(this.searchForm).then(response => {
        if (response.data.code === 200) {
          this.dataList = response.data.data.list
          this.count = response.data.data.total - 0
          this.$forceUpdate()
          console.log(this.dataList)
        } else {
          this.$message.error(response.data.msg)
        }
        this.loading = false
      })
    },
    handleDownload() {
      this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['订单编号', '设备编号', '门店', '天数变动', '状态', '门店剩余天数', '时间']
          const filterVal = ['target_id', 'battery_sn', 'shop_name', 'days', 'target_type', 'after_days', 'ctime']
          const list = this.dataList
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '设备天数修改记录',
            autoWidth: this.autoWidth
          })
          this.downloadLoading = false
        })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'target_type') {
          var target_mark = ''
          if (v['target_type'] === 1) {
            target_mark = '充值'
          }
          if (v['target_type'] === 2) {
            target_mark = '用户租赁扣除'
          }
          if (v['target_type'] === 3) {
            target_mark = '用户提前解绑退回'
          }
          if (v['target_type'] === 4) {
            target_mark = '手动绑定电池扣除'
          }
          if (v['target_type'] === 5) {
            target_mark = '增加租赁过期时间'
          }
          if (v['target_type'] === 6) {
            target_mark = '减少租赁过期时间'
          }
          if (v['target_type'] === 7) {
            target_mark = '用户未支付归还'
          }
          return target_mark
        } else if (j === 'ctime') {
          return this.DateFormat(new Date(v[j] * 1000), 'yyyy-MM-dd HH:mm:ss')
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style scoped>
  .label_title {
    width: 70px;
    margin-left: 10px;
  }

  .top {
    margin-top: 10px;
  }
</style>