joypedal/src/modules/pages/user/index.vue

<template >
  <div v-loading="loading" :element-loading-text="this.LOADINT_TEXT">
    <div ref="headSearchNav" class="headSearchNav">
      <sg-search-bar
        export
        :onSearch="onSearch"
        :model="searchModel[$route.name]"
        :showModel="authority"
        @getHeight="getHeight"
        @setIsTabOpen="setIsTabOpen"
        :searchs="[
        {type: DATE, name: '注册时间', showLabel: true},
        {type: INPUT, name: '手机号'},
        {type: SELECT, name: '性别', datas: genders},
        {type: DATE, name: '出生日期', showLabel: true}
        ]">
      </sg-search-bar>
    </div>
    <div class="po-re">
      <sg-button-group
        v-if="butGroup.length>0"
        class="right"
        :model="searchModel[$route.name]"
        :showModel="authority"
        :butGroup="butGroup"
        :buttons="buttonGroup">
      </sg-button-group>
      <sg-fixed-table
        :isShowSerialNumber="true"
        :datas="datas"
        :total="total"
        :fixHeight="true"
        :changeHeight="changeHeight"
        :onPageChange="onPageChangeP"
        :current-page="currentPage"
        :props="callProps"
        >
        <template #operationBut="{ data }">
          <div class="td-but-text">
            <el-button size="medium" type="text" @click="gotoDevice(data)">查看设备</el-button>
            <el-button size="medium" type="text" @click="gotoDatas(data)">测量数据</el-button>
          </div>
        </template>
        <template #height="{data}">
          <span v-if="!data.height.startWith('0')">{{ data.height }}</span>
          <span v-else></span>
        </template>
      </sg-fixed-table>
    </div>
    <modal
    :title="modalTitle"
    :is-show="showModal"
    @close="showModal=false"
    :args="[modalTitle]"
    :onOk="submitForm">
      <sg-form
        :ref="modalTitle"
        :data="data">
        <form-item :type="INPUT" name="角色名称" :data="data" prop="name" :rules="[{required: true}, {validator: this.FormCheckSpace}]"/>
      </sg-form>
    </modal>
  </div>
  <!-- <no-page v-else></no-page> -->
</template>
<script>
import ControllerMixin from '@ControllerMixin'
import ModalMixin from '@ModalMixin'
import TableMixin from '@TableMixin'
import FormMixin from '@FormMixin'
import PagerMixin from '@PagerMixin'
import { getTimeStamp } from '@/utils/format'
import { userList, userListExport } from '@/api'
export default {
  name: 'User',
  mixins: [ControllerMixin, ModalMixin, TableMixin, FormMixin, PagerMixin],
  data () {
    return {
      genders: ['女', '男'].selects([1, 2]),
      callProps: [
        {
          prop: 'userId',
          label: '用户ID',
          fixedType: 'left'
        },
        {
          prop: 'phone',
          label: '手机号'
        },
        {
          prop: 'sex',
          label: '性别'
        },
        {
          prop: 'height',
          label: '身高（cm）'
        },
        {
          prop: 'birth',
          label: '出生日期',
          dataType: 'time',
          timeType: 'yy-mm-dd',
          fixw: '160'
        },
        {
          prop: 'cdate',
          label: '注册时间',
          dataType: 'time',
          fixw: '160'
        },
        {
          prop: 'bdate',
          label: '最近登录时间',
          dataType: 'time',
          fixw: '160'
        },
        {
          prop: 'operationBut',
          label: '操作',
          fixw: '120',
          fixedType: 'right'
        }
      ],
      buttonGroup: [
        // {name: '新增', onClick: this.onShowModal, showKey: '新增', classType: 'primary'}
      ]
    }
  },
  beforeMount () {
    // this.loadFunc(() => {
    //   this.mixTitles(this.callProps)
    //   this.mixBut(this.buttonGroup, this.authority, 'button')
    // })
  },
  mounted () {
    let _this = this
    window.onresize = () => {
      return (() => {
        if (!_this.tabOpen) {
          _this.getHeight(0, _this.num)
        } else {
          _this.getHeight('', _this.num)
        }
      })()
    }
  },
  destroyed () {
    window.onresize = null
  },
  methods: {
    gotoDevice (data) {
      this.$router.push({path: '/device', query: {userId: data.userId}})
    },
    gotoDatas (data) {
      this.$router.push({path: '/datas', query: {userId: data.userId}})
    },
    onSearch (date1, phone, gender, date2, isExport) {
      let params = {
        cdate: date1 ? getTimeStamp(date1[0]) : 0,
        cdateEnd: date1 ? getTimeStamp(date1[1]) + 24 * 60 * 60 * 1000 - 1 : 0,
        phone: this.delSpace(phone) || '',
        sex: Number(gender) || 0,
        bdate: date2 ? getTimeStamp(date2[0]) : 0,
        bdateEnd: date2 ? getTimeStamp(date2[1]) + 24 * 60 * 60 * 1000 - 1 : 0
      }
      if (isExport) {
        this.$message('正在下载，请稍等。。。')
        this.download(userListExport, params, '用户管理')
      } else {
        this.pageIndex = 1
        this.currentPage = 1
        params.pageSize = this.pageSize
        params.pageIndex = this.pageIndex
        this.postLoadDatasP(userList, params)
      }
    },
    // formPost (formName, post) {
    //   let params = new URLSearchParams()
    //   params.append('name', this.data.name)
    //   var url = this.URL_ROLE_ADD
    //   if (formName === '修改') {
    //     params.append('id', this.data.id)
    //     url = this.URL_ROLE_UPDATE
    //   }
    //   post(url, params)
    // },
    // onDelete (data) {
    //   this.postDelete('删除后不可恢复，确定删除角色？', this.URL_ROLE_DELETE, data.id)
    // },
    resetData () {
      this.data = {
        id: 0,
        name: ''
      }
    }
  }
}
</script>

<style scoped>
</style>