| | |
| | | <div class="personnel-main "> |
| | | <div class="page-header-search"> |
| | | <div class="search-bar"> |
| | | <el-form ref="form" inline="true" :model="searchData"> |
| | | <el-form ref="form" :inline="true"> |
| | | <el-form-item> |
| | | <el-input |
| | | v-model="keyword" |
| | | placeholder="请输入人员名称" |
| | | > |
| | | <el-input v-model="keyword" placeholder="请输入人员名称"> |
| | | <i slot="prefix" class="el-input__icon el-icon-search" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="searchData()">查询</el-button> |
| | | <el-button type="primary" @click="getData()">查询</el-button> |
| | | <el-button type="primary" plain @click="resetData()">重置</el-button> |
| | | <!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> --> |
| | | </el-form-item> |
| | |
| | | </div> |
| | | <div class="content-main"> |
| | | <div class="personner-table"> |
| | | <el-table |
| | | ref="personnerlTable" |
| | | :height="700" |
| | | :max-height="700" |
| | | :cell-style="{textAlign: 'center'}" |
| | | :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" |
| | | :data="personnerlTable" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | prop="username" |
| | | label="角色名称" |
| | | min-width="120" |
| | | /> |
| | | <el-table-column |
| | | prop="roleName" |
| | | label="角色权限" |
| | | min-width="120" |
| | | /> |
| | | <el-table-column |
| | | prop="age" |
| | | label="年龄" |
| | | min-width="150" |
| | | /> |
| | | <el-table-column |
| | | prop="createTime" |
| | | label="创建时间" |
| | | min-width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="phone" |
| | | label="电话" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | prop="email" |
| | | label="邮箱" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | prop="jobState" |
| | | label="在职状态" |
| | | min-width="120" |
| | | :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]" |
| | | :filter-method="filterTag" |
| | | filter-placement="bottom-end" |
| | | > |
| | | <el-table ref="personnerlTable" :max-height="700" :cell-style="{ textAlign: 'center' }" |
| | | :header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'center' }" |
| | | :data="personnerlTable" style="width: 100%"> |
| | | <el-table-column prop="username" label="角色名称" min-width="120" /> |
| | | <el-table-column prop="roleName" label="角色权限" min-width="120" /> |
| | | <el-table-column prop="age" label="年龄" min-width="150" /> |
| | | <el-table-column prop="createTime" label="创建时间" min-width="180" /> |
| | | <el-table-column prop="phone" label="电话" min-width="200" /> |
| | | <el-table-column prop="email" label="邮箱" min-width="200" /> |
| | | <el-table-column prop="jobState" label="在职状态" min-width="120" |
| | | :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]" :filter-method="filterTag" |
| | | filter-placement="bottom-end"> |
| | | <template slot-scope="scope"> |
| | | <el-tag |
| | | :type="scope.row.businessStatus === 0 ? 'primary' : 'success'" |
| | | disable-transitions |
| | | >{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag> |
| | | <el-tag :type="scope.row.jobState === 0 ? 'danger' : 'success'" disable-transitions>{{ |
| | | scope.row.jobState === 0 ? '离岗' : '在职' }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="操作" |
| | | min-width="120" |
| | | > |
| | | <el-table-column label="操作" min-width="120"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button> |
| | | <!-- <el-button type="text" size="small">编辑</el-button> --> |
| | |
| | | </el-table> |
| | | <div> |
| | | <!-- 分页器 --> |
| | | <el-pagination |
| | | :current-page="currentPage" |
| | | :page-sizes="[100, 200, 300, 400]" |
| | | :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="this.personnerlTable.length" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" :total="this.personnerlTable.length" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import axios from 'axios' |
| | | axios.defaults.baseURL = 'http://192.168.110.167:1234' |
| | | import { get, post } from '@/api/util/requestUtil'; |
| | | import urlInfo from '../../../api/urlEnum/personnel.js' |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | filteredpersonnerlTable: [], |
| | | currentindex: 1, |
| | | currentPage: 1, // 当前页码 |
| | | total: 20, // 总条数 |
| | | total: 0, // 总条数 |
| | | pageSize: 100, // 每页的数据条数 |
| | | personData: [], // 用来存放接口传过来的人员列表数据 |
| | | dialogFormVisible: false, |
| | |
| | | this.currentPage = 1 |
| | | this.pageSize = val |
| | | }, |
| | | filterTag() { |
| | | console.log(11); |
| | | }, |
| | | // 当前页改变时触发 跳转其他页 |
| | | handleCurrentChange(val) { |
| | | console.log(`当前页: ${val}`) |
| | | this.currentPage = val |
| | | }, |
| | | getData() { |
| | | axios.get('/user/list_new_personnel', { |
| | | params: { |
| | | pageNo: 0, |
| | | pageSize: 20 |
| | | } |
| | | }).then(res => { |
| | | // console.log(res) |
| | | this.personData = res.data.data.row |
| | | this.personnerlTable = this.personData |
| | | }).catch(res => { |
| | | console.log('error') |
| | | }) |
| | | async getData() { |
| | | let data = { |
| | | pageNo: 0, |
| | | pageSize: 20, |
| | | name: this.keyword |
| | | } |
| | | let res = await get(urlInfo.url.list_new_personnel, data); |
| | | this.personnerlTable=res.data.row |
| | | this.total=res.data.total |
| | | }, |
| | | searchData() { |
| | | this.filteredpersonnerlTable = this.personnerlTable.filter((item) => { |
| | |
| | | return false |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .personnel-main{ |
| | | .personnel-main { |
| | | |
| | | // width: 100%; |
| | | // height: 100%; |
| | | .page-header-search{ |
| | | .page-header-search { |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 0 24px 12px 24px; |
| | | .search-bar{ |
| | | .el-form{ |
| | | .el-form-item{ |
| | | margin-bottom: 0px !important; |
| | | .el-input{ |
| | | width: 360px; |
| | | } |
| | | |
| | | .search-bar { |
| | | .el-form { |
| | | .el-form-item { |
| | | margin-bottom: 0px !important; |
| | | |
| | | .el-input { |
| | | width: 360px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .personner-table{ |
| | | |
| | | .personner-table { |
| | | background: #fff; |
| | | padding: 20px 20px 10px 20px; |
| | | >div:nth-child(2){ |
| | | |
| | | >div:nth-child(2) { |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |