admin/src/pages/system/caseManager/signinManager/index.vue

<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h"></div>
        <ul>
          <li>
            <el-select v-model="valueCase" placeholder="请选择案场" @change="handelSignin">
              <el-option
                key="all"
                label="所有案场"
                value="all">
              </el-option>
              <el-option
                v-for="item in optionsCase"
                :key="item.valueCase"
                :label="item.label"
                :value="item.valueCase">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-select v-model="valueTime" placeholder="请选择时间">
              <el-option
                v-for="item in optionsTime"
                :key="item.valueTime"
                :label="item.label"
                :value="item.valueTime">
              </el-option>
            </el-select>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary" @click="getList">搜索</el-button>
        <el-button
        size="mini"
        type="success" @click="excelSignin">导出excel</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <!-- 表格 -->
    <div class="content">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="CaseName"
            label="案场"
            width="180">
          </el-table-column>
          <el-table-column
            prop="CreateDate"
            label="签到时间"
            width="250">
            <template slot-scope="scope">
              <span>{{FormatDate(scope.row.CreateDate)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="CustomerName"
            label="微信昵称">
          </el-table-column>
          <el-table-column
            prop="Name"
            label="客户姓名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="客户类型">
            <template slot-scope="scope">
              <span>{{scope.row.UserId === '' ? '前台用户' : '后台用户'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="Phone"
            label="手机号">
          </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="foot">
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="postData.page"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: '',
  data () {
    return {
      msg: '签到管理',
      currentPage: 1,
      postData: { // 表格搜索条件 //caseid: '', // 案场id
        page: 1, // 当前页码
        pageSize: 10, // 请求数据量
      },
      total: 0, // 总数
      // 数据体
      // {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}
      tableData: [],
      // 时间数据
      optionsTime: [{
        valueTime: '-1',
        label: '全部'
      }, {
        valueTime: '0',
        label: '今天'
      }, {
        valueTime: '1',
        label: '本周'
      }, {
        valueTime: '2',
        label: '本月'
      }, {
        valueTime: '3',
        label: '今年'
      }],
      valueTime: '0',
      // 案场数据
      // {valueCase: '1',label: '案场1'}
      optionsCase: [], // 调用computed计算属性
      tempoptionsCase: [], // 临时的存储案场数据
      valueCase: ''
    }
  },
  mounted () {
    // 获取案场列表
    this.getCase()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.$data.postData.page = val
      this.getList()
    },
    getList () { // 获取数据列表
      this.$ajax(this.$api.caseManager.getSignin.url, {
        method: this.$api.caseManager.getSignin.method,
        queryData: { ...this.postData, org: this.$data.valueCase, selectType: this.$data.valueTime }
      }).then(res => {
        this.tableData = res.list
        this.postData.page = res.page
        this.total = res.pagenum
      })
    },
    getCase () { // 获取案场数据列表
      this.$ajax(this.$api.caseManager.getCaseList.url, {
        method: this.$api.caseManager.getCaseList.method,
        queryData: { ...this.postData, caseid: this.CaseId === 'all' ? '' : this.CaseId }
      }).then(res => {
        this.tempoptionsCase = res.list
        this.postData.page = res.page
        this.total = res.pagenum
        // 调用一次,计算属性
        this.optionsCase = this.CaseCompted
      })
    },
    handelSignin () { // 查询签到记录
      this.getList()
    },
    reset () { // 重置按钮
      this.$data.valueTime = '0'
      this.$data.total = ''
      this.$data.tableData = []
      this.$data.postData.page = 1
      this.$data.postData.pageSize = 10
      this.$data.valueCase = ''
    },
    FormatDate (date) {
      return this.toolClass.dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
    },
    excelSignin () { // 导出Excel
      window.open(`${this.toolClass.ReplaceOrg(this.$api.caseManager.getExcelSignin.url)}?token=${localStorage.getItem('JWT')}&selectType=${this.$data.valueTime}&caseid=${this.$data.valueCase}`, '_blank')
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    },
    CaseCompted: {
      get () { // get方法
        let data = []
        console.log('数据大小')
        console.log(this.$data.tempoptionsCase)
        var cases = this.$data.tempoptionsCase
        for (let i = 0; i < cases.length; i++) {
          let obj = []
          obj.valueCase = cases[i].CaseId
          obj.label = cases[i].CaseName
          console.log('编号:' + obj.valueCase + '名称:' + obj.label)
          data.push(obj)
        }
        return data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "page.scss";
</style>