用户列表对接

public/static/config.js

@@ -1,9 +1,9 @@
 // api 请求路径
 var PLATFROM_CONFIG = {};
-// PLATFROM_CONFIG.baseUrl = "http://172.16.120.104:8010/" //杨强本地
-// PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
+PLATFROM_CONFIG.baseUrl = "http://172.16.120.104:8010/" //杨强本地
+    // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
 
-PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上
+// PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上
 PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片
 PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径
 

src/api/systemManage/userManage.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+// 列表查询
+export function list(params) {
+    return request({
+        url: '/system/user/list',
+        method: 'GET',
+        params,
+    })
+}
+
+// //台区-新增
+// export function platformAreaAdd(params) {
+//     return request({
+//         url: 'platformArea/platformAreaAdd',
+//         method: 'POST',
+//         data: params,
+//     })
+// }
+
+// // 台区-修改
+// export function platformAreaUpdate(params) {
+//     return request({
+//         url: '/platformArea/platformAreaUpdate',
+//         method: 'POST',
+//         data: params,
+//     })
+// }
+
+// // 台区-回显
+// export function platformAreaListOne(params) {
+//     return request({
+//         url: '/platformArea/platformAreaList',
+//         method: 'GET',
+//         params,
+//     })
+// }
+
+// //台区-删除
+// export function platformAreaDel(params) {
+//     return request({
+//         url: '/platformArea/platformAreaDel',
+//         method: 'GET',
+//         params,
+//     })
+// }
+
+// // 站点设备列表查询
+// export function siteDeviceList(params) {
+//     return request({
+//         url: '/platformArea/siteDeviceList',
+//         method: 'GET',
+//         params,
+//     })
+// }

src/views/systemManage/userManage/index.vue

@@ -5,54 +5,47 @@
       <div class="left">
         <div>
           <span class="" style="margin-right: 30px">用户管理列表</span>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()"
-            >新增</el-button
-          >
+          <el-button icon="el-icon-plus" type="success" @click="addItem()">
+            新增
+          </el-button>
         </div>
         <div style="margin-top: 20px">
-          <div class="filter-item" >
-          姓名：
-          <el-input
-            v-model="userName"
-            placeholder="请输入内容"
-            style="width: 180px"
-          ></el-input>
-        </div>
-        <div class="filter-item" >
-          手机号：
-          <el-input
-            v-model="phone"
-            placeholder="请输入内容"
-            style="width: 180px"
-          ></el-input>
-        </div>
+          <div class="filter-item">
+          用户姓名：
+            <el-input
+              v-model="userName"
+              placeholder="请输入内容"
+              style="width: 180px"
+            ></el-input>
+          </div>
+         
 
           <div class="filter-item">
-            所属企业:
+            账号状态:
             <el-select
-              v-model="region"
+              v-model="status"
               placeholder="请选择"
               style="width: 150px"
             >
-              <el-option label="企业一" value="1"></el-option>
-              <el-option label="企业二" value="2"></el-option>
+              <el-option label="正常" value="0"></el-option>
+              <el-option label="停用" value="1"></el-option>
             </el-select>
           </div>
 
-          <div class="filter-item">
-            角色:
-            <el-select
-              v-model="role"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="角色1" value="1"></el-option>
-              <el-option label="角色2" value="2"></el-option>
-            </el-select>
+          <div class="filter-item planOutage">
+            选择时间范围：
+            <el-date-picker
+              v-model="dateTime"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width: auto"
+            ></el-date-picker>
           </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button"
-            >查询</el-button
-          >
+          <el-button type="primary" icon="el-icon-search" class="search-button" @click="list()">
+            查询
+          </el-button>
         </div>
       </div>
 
@@ -63,26 +56,27 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-    >
-      <el-table-column prop="xh" label="序号" width="70">
-      </el-table-column>
-      <el-table-column prop="userName" label="姓名" width="">
-      </el-table-column>
+    <el-table :data="tableData" border stripe :header-cell-style="headClass">
+      <!-- <el-table-column prop="xh" label="序号" width="70">
+      </el-table-column> -->
+      <el-table-column prop="nickName" label="昵称" width=""></el-table-column>
+       <el-table-column prop="userName" label="账号" width=""></el-table-column>
       <el-table-column prop="sex" label="性别" width="">
+         <template #default="scope">
+           <span>{{scope.row.sex==1?'男':'女'}}</span>
+         </template>
       </el-table-column>
-      <el-table-column prop="contact" label="联系方式" width="">
-      </el-table-column>
-      <el-table-column prop="password" label="密码" width="">
-      </el-table-column>
-      <el-table-column prop="ownerCompany" label="所属企业" width="">
-      </el-table-column>
-      <el-table-column prop="role" label="角色" width="">
-      </el-table-column>
+      <el-table-column
+        prop="phonenumber"
+        label="手机号码"
+        width=""
+      ></el-table-column>
+      <el-table-column prop="dept.createTime" label="创建时间" width=""></el-table-column>
+      <el-table-column
+        prop="roles.roleName"
+        label="角色名称"
+        width=""
+      ></el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
           <el-button
@@ -90,14 +84,16 @@
             type="text"
             size="small"
             class="delete-text"
-            >查看</el-button
           >
+            查看
+          </el-button>
           <el-button
             type="text"
             size="small"
             @click.prevent="editRow(scope.row)"
-            >编辑</el-button
           >
+            编辑
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -106,15 +102,15 @@
     <!-- 分页start -->
     <div class="paginationBlock">
       <el-pagination
+        v-model:currentPage="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-      >
-      </el-pagination>
+        background
+      ></el-pagination>
     </div>
 
     <!-- 分页end -->
@@ -127,80 +123,118 @@
       :flag="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
-
-
   </div>
 </template>
 
 <script>
+import { useStore } from 'vuex'
+import { defineComponent, ref, reactive, onMounted } from 'vue'
+import * as api from '@/api/systemManage/userManage.js'
+import { ElMessage } from 'element-plus'
 
-import { defineComponent, ref,reactive} from 'vue'
-
-import DialogComponent from "./dialogComponent";
+import DialogComponent from './dialogComponent'
 
 export default defineComponent({
-  components: { DialogComponent},
+  components: { DialogComponent },
   setup() {
+    const store = useStore()
+    const total = ref(0)
+    const pageSize = ref(1)
+    const currentPage = ref(1)
+
+    const dateTime = ref([
+      new Date(2021, 8, 10, 10, 10),
+      new Date(2021, 10, 11, 10, 10),
+    ])
+
     const userName = ref('')
     const phone = ref('')
-    const region = ref('')
+    const status = ref('')
     const role = ref('')
     const currentPage4 = ref(4)
     const dialogTitle = ref('')
     const showDialog = ref(false)
     const tableData = ref([
       {
-           xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          role: "维保 ",
-          ownerCompany: "伍继",
-        },
-         {
-          xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          ownerCompany: "伍继",
-           role: "维保 ",
-        }
+        xh: '1',
+        nickName: '张三',
+        sex: '男',
+        phonenumber: '12345678989 ',
+        password: '123456',
+        role: '维保 ',
+        ownerCompany: '伍继',
+      },
+      {
+        xh: '1',
+        nickName: '张三',
+        sex: '男',
+        phonenumber: '12345678989 ',
+        password: '123456',
+        ownerCompany: '伍继',
+        role: '维保 ',
+      },
     ])
 
-    const handleSizeChange=(val)=> {
-      console.log(`每页 ${val} 条`);
+    // // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA;'
     }
-    const handleCurrentChange=(val)=> {
-      console.log(`当前页: ${val}`);
+
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+      list()
+    }
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+      list()
     }
 
-    // // 表头样式设置
-    const headClass=()=> {
-      return "background:#FAFAFA;";
+    //用户列表
+    function list() {
+      store.commit('TimeAll_function', dateTime.value)
+      const time = store.state.Time_Data
+       console.log('time[0]')
+      console.log(time[0])
+      api
+        .list({
+          pageSize: pageSize.value,
+          pageNum: currentPage.value,
+          status:status.value,
+          userName:userName.value,
+          beginTime: time[0],
+          endTime: time[1],
+          // platformAreaName: platformAreaName.value,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            console.log(requset.data)
+            tableData.value = requset.data.rows
+            total.value = requset.data.total
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
     }
 
     const tableItem = reactive([])
-     // 添加操作
-    const addItem=()=> {
+    // 添加操作
+    const addItem = () => {
       tableItem.value = {
-        id: "",
-        stationName: "",
-        xh: "",
-        userName: "",
+        id: '',
+        stationName: '',
+        xh: '',
+        nickName: '',
         siteList: [],
-        done: "",
-        guaZai: "",
+        done: '',
+        guaZai: '',
         checked: true,
-      };
-      dialogTitle.value = "新增";
-      showDialog.value = true;
-
+      }
+      dialogTitle.value = '新增'
+      showDialog.value = true
     }
 
-     // 查看
-    const checkItem=(row)=> {
+    // 查看
+    const checkItem = (row) => {
       console.log(row)
       tableItem.value = row
       dialogTitle.value = '查看'
@@ -220,16 +254,27 @@ export default defineComponent({
       showDialog.value = false
     }
 
+    onMounted(() => {
+      list()
+    })
+
     return {
-       userName,
+      userName,
       phone,
-      region,
+      status,
       role,
       tableItem,
       currentPage4,
       dialogTitle,
       showDialog,
       tableData,
+      total,
+      pageSize,
+      currentPage,
+
+      dateTime,
+      store,
+      list,
       handleSizeChange,
       handleCurrentChange,
       headClass,
@@ -238,7 +283,6 @@ export default defineComponent({
       editRow,
       closeDialog,
     }
-
   },
 })
 </script>