优化回显

src/request/api.js

@@ -348,7 +348,7 @@ export const  apisystemdzbcPathSchedulinglist = query => {
     return service({
         url: '/api/system/dzbcPathScheduling/list',
         method: 'GET',
-		data:query
+		params:query
     });
 };
 
@@ -386,4 +386,83 @@ export const apisystemdzbcPathSchedulingUpdate = query => {
         method: 'PUT',
         data:query
     });
-};
+};
+
+
+
+//获取用户列表https://khy.xiaole.vip/api/system/user/list
+
+export const  apisystemuserlist = query => {
+    return service({
+        url: '/api/system/user/list',
+        method: 'GET',
+		params:query
+    });
+};
+
+//修改用户https://khy.xiaole.vip/api/system/user
+export const  apisystemuserUpdate = query => {
+    return service({
+        url: '/api/system/user',
+        method: 'PUT',
+		data:query
+    });
+};
+
+//新增用户https://khy.xiaole.vip/api/system/user
+export const  apisystemuserAdd = query => {
+    return service({
+        url: `/api/system/user`,
+        method: 'POST',
+        data:query
+    });
+};
+
+//删除用户https://khy.xiaole.vip/api/system/user/{userIds}
+export const  apisystemuserDel = query => {
+    return service({
+        url: `/api/system/user/${query.id}`,
+        method: 'DELETE'
+    });
+};
+
+//重置密码https://khy.xiaole.vip/api/system/user/resetPwd
+export const apisystemuserresetPwd = query => {
+    return service({
+        url: `/api/system/user/resetPwd`,
+        method: 'PUT',
+        data:query
+    });
+};
+//状态修改https://khy.xiaole.vip/api/system/user/changeStatus
+export const apisystemuserchangeStatus = query => {
+    return service({
+        url: `/api/system/user/changeStatus`,
+        method: 'PUT',
+        data:query
+    });
+};
+//用户授权角色https://khy.xiaole.vip/api/system/user/authRole
+export const apisystemuserauthRole = query => {
+    return service({
+        url: `/api/system/user/authRole`,
+        method: 'PUT',
+        params:query
+    });
+};
+
+
+//获取角色信息列表https://khy.xiaole.vip/api/system/role/list
+
+export const  apisystemrolelist = query => {
+    return service({
+        url: '/api/system/role/list',
+        method: 'GET',
+		params:query
+    });
+};
+
+
+
+
+

src/request/index.ts

@@ -49,7 +49,7 @@ service.interceptors.response.use(
         break;
         case 401:
         ElMessage({
-          message: ''+res.msg,
+          message: '登录失效,请重新登陆',
           type: 'error',
           duration: 5 * 1000
         });

src/router/index.ts

@@ -58,6 +58,11 @@ const router = createRouter({
           component: () => import("../views/bannerman/index.vue"),
           meta: { title: "用户信息",parent:'wdxx' },
         },
+        {
+          path: "/roleman",
+          component: () => import("../views/roleman/index.vue"),
+          meta: { title: "用户信息",parent:'wdxx' },
+        },
         
         {
           path: "/passengerstation",

src/views/HomeView.vue

@@ -51,6 +51,9 @@ let filterName=computed(()=>{
     case '/passengerstation':
       res='客运站管理'
       break;
+    case '/roleman':
+      res='角色管理'
+      break;
     case '/bannerman':
       res='小程序宣传图管理'
       break;
@@ -189,6 +192,15 @@ watch(() => route, (newRoute, oldRoute) => {
             <el-icon><ArrowRightBold /></el-icon>
           </div>
         </el-menu-item>
+        <!-- <el-menu-item index="roleman">
+          <div class="ima-icon">
+            <img style="width:12px;height:auto" src="../../public/imgs/orderman.png" alt="">
+          </div>
+          <span style="flex:1">角色管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
+        </el-menu-item> -->
         <el-menu-item index="bannerman">
           <div class="ima-icon">
             <img style="width:12px;height:auto" src="../../public/imgs/orderman.png" alt="">

src/views/areaman/index.vue

@@ -140,7 +140,21 @@ const getTableData=()=>{
   }).then(res=>{
     if(res.code==200){
       total.value=res.total
-      tableData.value=res.rows
+      tableData.value=res.rows.map(item=>{
+        let data=passengerstation.value.filter(kyz=>{
+          return item.kyzId==kyz.id
+          
+        })[0]
+
+       
+
+        if(data){
+          item.kyzName=data.name
+        }
+
+        return item
+        
+      })
     }
     loading.value=false
     
@@ -163,9 +177,10 @@ const deleteItem=(id)=>{
 }
 let passengerstation=ref([])
 onMounted(()=>{
-  getTableData()
+ 
   apisystemdzbcKyzlist({}).then((res:any)=>{
     passengerstation.value=res.rows
+    getTableData()
   }).catch((err:any)=>{
     console.log(err)
   })
@@ -219,10 +234,8 @@ onMounted(()=>{
                         <el-table-column prop="num" label="包含站点数">
                         
                         </el-table-column>
-                        <el-table-column prop="date" label="创建时间">
-                          
-                        </el-table-column>
-                        <el-table-column prop="by" label="所属客运站" />
+                       
+                        <el-table-column prop="kyzName" label="所属客运站" />
                         <el-table-column fixed="right" label="操作" min-width="120">
                           <template #default="scope">
                             <el-button link type="primary" @click="addItem(scope.row)" size="small">

src/views/roleman/index.vue

@@ -0,0 +1,433 @@
+<script setup lang="ts">
+import { apisystemdzbcArealist,apisystemdzbcPathlist,apisystemdzbcPathexport,apisystemdzbcPathDel,apisystemdzbcPathAdd,apisystemdzbcPathUpdate } from '../../request/api.js'
+import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+interface RuleForm {
+  id: any,
+  name: string,
+  startArea: any,
+  endArea: any,
+  mtime: string,
+  remark: string,
+  price: any
+}
+const initData={
+  id:'',
+  name: "",
+  startArea: "",
+  endArea: "",
+  mtime: "",
+  remark: "",
+  price: ""
+}
+const formSize = ref<ComponentSize>('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+  id:'',
+  name: "",
+  startArea: "",
+  endArea: "",
+  mtime: "",
+  remark: "",
+  price: ""
+})
+
+
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: '必填项', trigger: 'blur' }
+  ]
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) {
+    ElMessage({
+          message: '缺少必填项',
+          type: 'warning',
+          duration: 3 * 1000
+    });
+    return
+  }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if(ruleForm.id){
+        
+        apisystemdzbcPathUpdate(ruleForm).then((res:any)=>{
+          getTableData()
+          ElMessage({
+                message: '操作成功',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          dialogVisible.value=false
+        }).catch((err:any)=>{
+          console.log(err)
+        })
+      }else{
+        apisystemdzbcPathAdd(ruleForm).then((res:any)=>{
+          getTableData()
+          ElMessage({
+                message: '操作成功',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          dialogVisible.value=false
+        }).catch((err:any)=>{
+          console.log(err)
+        })
+      }
+      
+    } else {
+      ElMessage({
+            message: '缺少必填项',
+            type: 'warning',
+            duration: 3 * 1000
+      });
+    }
+  })
+}
+
+
+import { ref,onMounted,reactive } from 'vue'
+import { Search,Download,Tools,Plus,Check,Close } from "@element-plus/icons-vue";
+let searchWord=ref('')
+let total=ref(0)
+let pageNum=ref(1)
+let dialogVisible=ref(false)
+let logtitle=ref('新增定制班车-角色')
+let loading=ref(true)
+let excellloading=ref(false)
+const tableData = ref([])
+//v-loading="excellloading" @click="downExcell"
+let activeName=ref('first')
+
+const addItem=data=>{
+  if(data.id){
+    for(let key in data){
+      ruleForm[key]=data[key]
+    }
+    logtitle.value='编辑定制班车-角色'
+  }else{
+    for(let key in initData){
+      ruleForm[key]=initData[key]
+    }
+    logtitle.value='新增定制班车-角色'
+  }
+  dialogVisible.value=true
+}
+const downExcell=()=>{
+  excellloading.value=true
+  apisystemdzbcPathexport({}).then((res:any)=>{
+
+     // 这里 data 是返回来的二进制数据
+     let blob = new Blob([res], {
+        type: "application/x-msdownload;charset=UTF-8",
+    });
+    // 创建一个blob的对象链接
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    // 把获得的blob的对象链接赋值给新创建的这个 a 链接
+    link.setAttribute('download', '数据管理列表.xls'); // 设置下载文件名
+    document.body.appendChild(link);
+    // 使用js点击这个链接
+    link.click();
+    document.body.removeChild(link) // 下载完成移除元素
+    window.URL.revokeObjectURL(url) // 释放blob对象
+    excellloading.value=false
+  }).catch((err:any)=>{
+    console.log(err)
+  })
+}
+const getTableData=()=>{
+  apisystemdzbcPathlist({
+    
+  }).then(res=>{
+    if(res.code==200){
+      total.value=res.total
+      tableData.value=res.rows
+    }
+    loading.value=false
+    
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+//
+const deleteItem=(id)=>{
+  apisystemdzbcPathDel({id}).then((res:any)=>{
+    getTableData()
+    ElMessage({
+          message: '操作成功',
+          type: 'success',
+          duration: 3 * 1000
+    });
+  }).catch((err:any)=>{
+    console.log(err)
+  })
+}
+
+let areaList=ref([])
+
+onMounted(()=>{
+  getTableData()
+  apisystemdzbcArealist({}).then((res:any)=>{
+    areaList.value=res.rows
+  }).catch((err:any)=>{
+    console.log(err)
+  })
+})
+
+
+</script>
+<template>
+    <div>
+       <div class="common-top">
+        <div class="left-part">
+          <div class="title">
+            角色管理
+          </div>
+          <div class="sub-title">
+            管理系统角色信息
+          </div>
+        </div>
+        <div class="right-part">
+          <el-button type="primary" :icon="Plus"  @click="addItem({})">新增角色 </el-button>
+        </div>
+       </div>
+
+       <div class="common-content">
+                <div class="common-search-box">
+                    <div class="left-part">
+                    <el-input
+                        v-model="searchWord"
+                        
+                        placeholder="搜索用户"
+                        style="width:260px"
+                    >
+                    
+                        <template #append>
+                        <el-button :icon="Search" />
+                        </template>
+                    </el-input>
+                    <el-button style="margin-left:10px">筛选</el-button>
+                    </div>
+                    <div class="right-part">
+                    
+                      <el-button :loading="excellloading" @click="downExcell" :icon="Download">{{ excellloading?'正在导出':'导出' }}</el-button>
+                    <el-button :icon="Tools">设置</el-button>
+                    </div>
+                </div>
+                    <el-table element-loading-text='加载中' header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%" v-loading="loading">
+                        <el-table-column prop="name" label="角色编号">
+                         
+                        </el-table-column>
+                        <el-table-column prop="startArea" label="出发区域" />
+                        <el-table-column prop="endArea" label="目的区域">
+                        
+                        </el-table-column>
+                        <el-table-column prop="mtime" label="出发时间">
+                        
+                    </el-table-column>
+                    <el-table-column prop="role" label="基础票价(元)">
+                        
+                    </el-table-column>
+                    <el-table-column prop="role" label="浮动范围">
+                        
+                    </el-table-column>
+                        <el-table-column prop="status" label="排班状态">
+                          <template #default>
+                           <!-- <div style="background:#DCFCE7;width:64px;height:20px;border-radius:9999px;display:flex;align-items: center;justify-content: center;">
+                            已排班
+                           </div> -->
+                          </template>
+                        </el-table-column>
+                        <el-table-column prop="ypl" label="余票量" />
+                        <el-table-column fixed="right" label="操作" min-width="120">
+                          <template #default="scope">
+                            <el-button link type="primary" @click="addItem(scope.row)" size="small">
+                              编辑
+                            </el-button>
+                            <el-popconfirm @confirm="deleteItem(scope.row.id)" title="确定删除?">
+                              <template #reference>
+                                <el-button  link type="danger" size="small">删除</el-button>
+                              </template>
+                            </el-popconfirm>
+                            
+                          </template>
+                        </el-table-column>
+                    </el-table>
+
+                    <div class="common-page-wrap">
+                      <div class="left-part">
+                        <span>显示第 </span>
+                        <span>{{ pageNum }}</span>
+                        <span>至 </span>
+                        <span>10 </span>
+                        <span>条, </span>
+                        <span>共{{ total }}条记录 </span>
+                      </div>
+                      <div class="right-part">
+                        <el-pagination background layout="prev, pager, next" :total="total" />
+                      </div>
+                    </div>
+                  </div> 
+
+
+
+
+        <el-dialog
+          v-model="dialogVisible"
+          :title="logtitle"
+          width="600"
+        >
+
+
+
+
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          label-position="top"
+          :rules="rules"
+          label-width="auto"
+          :size="formSize"
+          status-icon
+        >
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="名称" prop="name">
+                <el-input placeholder="名称" v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="出发区域">
+               
+                <el-select
+                  v-model="ruleForm.startArea"
+                  placeholder="出发区域"
+                  
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in areaList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="结束区域">
+               
+                <el-select
+                  v-model="ruleForm.endArea"
+                  placeholder="结束区域"
+                  
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in areaList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开始时间">
+                <el-input placeholder="开始时间" v-model="ruleForm.mtime" />
+              </el-form-item>
+            </el-col>
+           
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input placeholder="备注" v-model="ruleForm.remark" type="textarea" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+         
+    
+         
+         
+         
+        </el-form>
+
+
+
+          
+       
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button @click="dialogVisible = false" :icon="Close">取消</el-button>
+              <el-button type="primary" :icon="Check" @click="submitForm(ruleFormRef)">
+                确认创建
+              </el-button>
+            </div>
+          </template>
+        </el-dialog>
+      
+
+       
+    </div>
+</template>
+
+<style lang="scss">
+
+    .reset-gray-head{
+      background:#f3f4f6;
+      .el-table__cell,th{
+        background:#f3f4f6!important;
+      }
+      
+    }
+    
+
+</style>
+
+<style lang="scss" scoped>
+   
+    .table-user-wrap{
+      display:flex;
+      align-items: center;
+      .left-part{
+        width:30px;
+        height:30px;
+        background:red;
+        border-radius: 50%;
+        margin-right:6px;
+      }
+    }
+    .common-top{
+      display:flex;
+      justify-content: space-between;
+    }
+    .common-page-wrap{
+      padding:10px 10px 10px 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .sub-title{
+        color:#4B5563;
+        font-size:16px;
+        margin-bottom:24px;
+    }
+    .title{
+        color:#1F2937;
+        font-size:24px;
+        font-weight:600;
+    }
+
+    .common-content{
+        background:#fff;
+        .common-search-box{
+          padding:10px 10px 10px 10px;
+          display:flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+    }
+   
+</style>

src/views/routeman/index.vue

@@ -145,7 +145,29 @@ const getTableData=()=>{
   }).then(res=>{
     if(res.code==200){
       total.value=res.total
-      tableData.value=res.rows
+      tableData.value=res.rows.map(item=>{
+        let enddata=areaList.value.filter(area=>{
+          return item.endArea==area.id
+          
+        })[0]
+        let satrtdata=areaList.value.filter(area=>{
+          return item.startArea==area.id
+          
+        })[0]
+
+        if(satrtdata){
+          //item.startAreaName=data.name
+          item.startAreaName=satrtdata.name
+        }
+
+        if(enddata){
+          //item.startAreaName=data.name
+          item.endAreaName=enddata.name
+        }
+
+        return item
+        
+      })
     }
     loading.value=false
     
@@ -170,9 +192,10 @@ const deleteItem=(id)=>{
 let areaList=ref([])
 
 onMounted(()=>{
-  getTableData()
+  
   apisystemdzbcArealist({}).then((res:any)=>{
     areaList.value=res.rows
+    getTableData()
   }).catch((err:any)=>{
     console.log(err)
   })
@@ -222,8 +245,8 @@ onMounted(()=>{
                         <el-table-column prop="name" label="路线编号">
                          
                         </el-table-column>
-                        <el-table-column prop="startArea" label="出发区域" />
-                        <el-table-column prop="endArea" label="目的区域">
+                        <el-table-column prop="startAreaName" label="出发区域" />
+                        <el-table-column prop="endAreaName" label="目的区域">
                         
                         </el-table-column>
                         <el-table-column prop="mtime" label="出发时间">

src/views/stationman/index.vue

@@ -141,7 +141,21 @@ const getTableData=()=>{
   }).then(res=>{
     if(res.code==200){
       total.value=res.total
-      tableData.value=res.rows
+      tableData.value=res.rows.map(item=>{
+        let data=areaList.value.filter(area=>{
+          return item.areaId==area.id
+          
+        })[0]
+
+       
+
+        if(data){
+          item.areaName=data.name
+        }
+
+        return item
+        
+      })
     }
     loading.value=false
     
@@ -164,9 +178,10 @@ const deleteItem=(id)=>{
 }
 let areaList=ref([])
 onMounted(()=>{
-  getTableData()
+ 
   apisystemdzbcArealist({}).then((res:any)=>{
     areaList.value=res.rows
+    getTableData()
   }).catch((err:any)=>{
     console.log(err)
   })
@@ -217,13 +232,13 @@ onMounted(()=>{
                         
                         </el-table-column>
                         <el-table-column prop="latlon" label="经纬度" />
-                        <el-table-column prop="by" label="所属区域">
+                        <el-table-column prop="areaName" label="所属区域">
                           
                         </el-table-column>
                         <el-table-column prop="desc" label="描述">
                          
                         </el-table-column>
-                        <el-table-column prop="date" label="创建时间" />
+                       
                         <el-table-column fixed="right" label="操作" min-width="120">
                           <template #default="scope">
                             <el-button link type="primary" @click="addItem(scope.row)" size="small">

src/views/userman/index.vue

@@ -1,104 +1,107 @@
 <script setup lang="ts">
+import { apisystemrolelist,apisystemuserauthRole,apisystemuserlist,apisystemuserchangeStatus,apisystemuserresetPwd,apisystemuserDel,apisystemuserAdd,apisystemuserUpdate } from '../../request/api.js'
 import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
-
+import { ElMessage } from 'element-plus'
 interface RuleForm {
-  name: string
-  region: string
-  count: string
-  date1: string
-  date2: string
-  delivery: boolean
-  location: string
-  type: string[]
-  resource: string
-  desc: string
+  userId: string,
+  userName: string,
+  nickName: string,
+  userType: string,
+  email: string,
+  phonenumber: string,
+  sex: string,
+  password: string,
+  status: any,
+  remark: string,
+  roleIds:any
+}
+const initData={
+  userId: '',
+  userName: '',
+  nickName: '',
+  userType: '',
+  email: '',
+  phonenumber: '',
+  sex: '',
+  password: '',
+  status: '0',
+  remark: '',
+  roleIds:[]
 }
-
 const formSize = ref<ComponentSize>('default')
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive<RuleForm>({
-  name: 'Hello',
-  region: '',
-  count: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  location: '',
-  type: [],
-  resource: '',
-  desc: '',
+  userId: '',
+  userName: '',
+  nickName: '',
+  userType: '',
+  email: '',
+  phonenumber: '',
+  sex: '',
+  password: '',
+  status: '0',
+  remark: '',
+  roleIds:[]
 })
 
 
 const rules = reactive<FormRules<RuleForm>>({
-  name: [
-    { required: true, message: 'Please input Activity name', trigger: 'blur' },
-    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
-  ],
-  region: [
-    {
-      required: true,
-      message: 'Please select Activity zone',
-      trigger: 'change',
-    },
-  ],
-  count: [
-    {
-      required: true,
-      message: 'Please select Activity count',
-      trigger: 'change',
-    },
-  ],
-  date1: [
-    {
-      type: 'date',
-      required: true,
-      message: 'Please pick a date',
-      trigger: 'change',
-    },
-  ],
-  date2: [
-    {
-      type: 'date',
-      required: true,
-      message: 'Please pick a time',
-      trigger: 'change',
-    },
+  userName: [
+    { required: true, message: '必填项', trigger: 'blur' }
   ],
-  location: [
-    {
-      required: true,
-      message: 'Please select a location',
-      trigger: 'change',
-    },
-  ],
-  type: [
-    {
-      type: 'array',
-      required: true,
-      message: 'Please select at least one activity type',
-      trigger: 'change',
-    },
-  ],
-  resource: [
-    {
-      required: true,
-      message: 'Please select activity resource',
-      trigger: 'change',
-    },
-  ],
-  desc: [
-    { required: true, message: 'Please input activity form', trigger: 'blur' },
+  nickName: [
+    { required: true, message: '必填项', trigger: 'blur' }
   ],
+  password: [
+    { required: true, message: '必填项', trigger: 'blur' }
+  ]
 })
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
+  if (!formEl) {
+    ElMessage({
+          message: '缺少必填项',
+          type: 'warning',
+          duration: 3 * 1000
+    });
+    return
+  }
   await formEl.validate((valid, fields) => {
     if (valid) {
-      console.log('submit!')
+      if(ruleForm.userId){
+        
+        apisystemuserUpdate(ruleForm).then((res:any)=>{
+          getTableData()
+          ElMessage({
+                message: '操作成功',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          dialogVisible.value=false
+        }).catch((err:any)=>{
+          console.log(err)
+        })
+      }else{
+       
+        apisystemuserAdd(ruleForm).then((res:any)=>{
+          getTableData()
+          ElMessage({
+                message: '操作成功',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          dialogVisible.value=false
+        }).catch((err:any)=>{
+          console.log(err)
+        })
+      }
+      
     } else {
-      console.log('error submit!', fields)
+      ElMessage({
+            message: '缺少必填项',
+            type: 'warning',
+            duration: 3 * 1000
+      });
     }
   })
 }
@@ -107,51 +110,123 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 import { ref,onMounted,reactive } from 'vue'
 import { Search,Download,Tools,Plus,Check,Close } from "@element-plus/icons-vue";
 let searchWord=ref('')
+let total=ref(0)
+let pageNum=ref(1)
 let dialogVisible=ref(false)
-let logtitle=ref('新增用户')
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    link:'18679056174',
-    role:'普通用户',
-    status:'活跃'
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    link:'13247781993',
-    role:'普通用户',
-    status:'活跃'
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    link:'15179162828',
-    role:'普通用户',
-    status:'活跃'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    link:'18679056174',
-    role:'普通用户',
-    status:'活跃'
-  },
-]
-
+let logtitle=ref('新增用户信息')
+let loading=ref(true)
+let excellloading=ref(false)
+const tableData = ref([])
+//v-loading="excellloading" @click="downExcell"
 let activeName=ref('first')
 
-const addUser=val=>{
-  dialogVisible.value=val
+const addItem=data=>{
+  if(data.userId){
+    for(let key in data){
+      ruleForm[key]=data[key]
+    }
+    if(ruleForm.roles){
+      ruleForm.roleIds=ruleForm.roles.map(item=>{
+        return item.roleId})
+    }
+    
+    logtitle.value='编辑用户信息'
+  }else{
+    for(let key in initData){
+      ruleForm[key]=initData[key]
+    }
+    logtitle.value='新增用户信息'
+  }
+  dialogVisible.value=true
+}
+
+const statusChange=val=>{
+  apisystemuserchangeStatus(val).then(res=>{
+    if(res.code==200){
+      ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 3 * 1000
+      });
+    }
+  }).catch(err=>{
+    console.log(err)
+  })
 }
 
+const getTableData=()=>{
+  apisystemuserlist({
+    pageSize:10,
+    pageNum:pageNum.value
+  }).then(res=>{
+    if(res.code==200){
+      total.value=res.total
+      tableData.value=res.rows.map(items=>{
+       
+
+        if(items.roles){
+          items.roleIds=items.roles.map(item=>{
+            return item.roleId})
+        }else{
+          items.roleIds=[]
+        }
+        return items
+      })
+    }
+    loading.value=false
+    
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+//
+const resetPassword=val=>{
+  apisystemuserresetPwd(val).then(res=>{
+    if(res.code==200){
+      ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 3 * 1000
+      });
+    }
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+const roleChange=val=>{
+  apisystemuserauthRole({userId:val.userId,roleIds:val.roleIds.join(',')}).then(res=>{
+    if(res.code==200){
+      ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 3 * 1000
+      });
+    }
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+const deleteItem=(userId)=>{
+ 
+  apisystemuserDel({id:userId}).then((res:any)=>{
+    getTableData()
+    ElMessage({
+          message: '操作成功',
+          type: 'success',
+          duration: 3 * 1000
+    });
+  }).catch((err:any)=>{
+    console.log(err)
+  })
+}
+let roleList=ref([])
 onMounted(()=>{
-  
+  getTableData()
+  apisystemrolelist({}).then((res:any)=>{
+    roleList.value=res.rows
+  }).catch((err:any)=>{
+    console.log(err)
+  })
 })
 
 
@@ -168,13 +243,11 @@ onMounted(()=>{
           </div>
         </div>
         <div class="right-part">
-          <el-button type="primary" :icon="Plus" @click="addUser(true)">新增用户</el-button>
+          <el-button type="primary" :icon="Plus" @click="addItem({})">新增用户</el-button>
         </div>
        </div>
 
-        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane label="普通用户" name="first">
-                  <div class="common-content">
+       <div class="common-content">
                     <div class="common-search-box">
                       <div class="left-part">
                         <el-input
@@ -192,44 +265,74 @@ onMounted(()=>{
                       </div>
                       <div class="right-part">
                       
-                        <el-button :icon="Download">导出</el-button>
-                        <el-button :icon="Tools">设置</el-button>
+                        <!-- <el-button :icon="Download">导出</el-button>
+                        <el-button :icon="Tools">设置</el-button> -->
                       </div>
                     </div>
-                    <el-table header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                    <el-table element-loading-text='加载中' header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%" v-loading="loading">
                         <el-table-column prop="info" label="用户信息">
-                          <div class="table-user-wrap">
-                            <div class="left-part">
+                          <template #default="scope">
+                            <div class="table-user-wrap">
+                            <!-- <div class="left-part">
 
-                            </div>
+                            </div> -->
                             <div class="right-part">
-                              <div style="color:#000">林诗雨</div>
-                              <div style="color: #6B7280;">ID:100002</div>
+                              <div style="color:#000">{{ scope.row.nickName }}</div>
+                              <div style="color: #6B7280;">ID:{{ scope.row.userName }}</div>
                             </div>
                           </div>
+                          </template>
+                          
                         </el-table-column>
-                        <el-table-column prop="link" label="联系方式" />
-                        <el-table-column prop="role" label="角色">
-                          <template #default>
-                           <div style="background:#FEF9C3;width:64px;height:20px;border-radius:9999px;display:flex;align-items: center;justify-content: center;">
-                            普通用户
-                           </div>
+                        <el-table-column prop="phonenumber" label="联系方式" />
+                        <el-table-column prop="roleNames" min-width="160" label="角色">
+                          <template #default="scope">
+                            <el-select
+                            @change="roleChange(scope.row)"
+                              v-model="scope.row.roleIds" placeholder=""
+                                style="width: 100%"
+
+                                multiple
+                              >
+                                <el-option
+                                  v-for="item in roleList"
+                                  :key="item.roleId"
+                                  :label="item.roleName"
+                                  :value="item.roleId"
+                                />
+                              </el-select>
                           </template>
                         </el-table-column>
                         <el-table-column prop="status" label="状态">
-                          <template #default>
-                           <div style="background:#DCFCE7;width:64px;height:20px;border-radius:9999px;display:flex;align-items: center;justify-content: center;">
-                            活跃
-                           </div>
+                          <template #default="scope">
+                         
+                           <el-switch
+                           active-value="0"
+                           inactive-value="1"
+                           @change="statusChange(scope.row)"
+                            v-model="scope.row.status"
+                            inline-prompt
+                            active-text="正常"
+                            inactive-text="停用"
+                          />
                           </template>
                         </el-table-column>
                         <el-table-column prop="date" label="注册时间" />
                         <el-table-column fixed="right" label="操作" min-width="120">
-                          <template #default>
-                            <el-button link type="primary" size="small" @click="handleClick">
+                          <template #default="scope">
+                            <el-button link type="primary" @click="addItem(scope.row)" size="small">
                               编辑
                             </el-button>
-                            <el-button link type="danger" size="small">删除</el-button>
+                            <el-popconfirm @confirm="deleteItem(scope.row.userId)" title="确定删除?">
+                              <template #reference>
+                                <el-button  link type="danger" size="small">删除</el-button>
+                              </template>
+                            </el-popconfirm>
+                            <el-popconfirm @confirm="resetPassword(scope.row)" title="确定重置密码?">
+                              <template #reference>
+                                <el-button  link type="warning" size="small">重置密码</el-button>
+                              </template>
+                            </el-popconfirm>
                           </template>
                         </el-table-column>
                     </el-table>
@@ -237,27 +340,18 @@ onMounted(()=>{
                     <div class="common-page-wrap">
                       <div class="left-part">
                         <span>显示第 </span>
-                        <span>1 </span>
+                        <span>{{pageNum}}</span>
                         <span>至 </span>
                         <span>10 </span>
                         <span>条, </span>
-                        <span>共1000条记录 </span>
+                        <span>共{{total}}条记录 </span>
                       </div>
                       <div class="right-part">
-                        <el-pagination background layout="prev, pager, next" :total="1000" />
+                        <el-pagination v-model:current-page="pageNum" @current-change="getTableData" background layout="prev, pager, next" :total="total" />
                       </div>
                     </div>
                   </div> 
 
-            </el-tab-pane>
-            <el-tab-pane label="司机用户" name="second">
-                <div class="common-content">
-                    
-                </div> 
-            </el-tab-pane>
-           
-        </el-tabs>
-
 
 
 
@@ -281,33 +375,103 @@ onMounted(()=>{
         >
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="用户名称" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="用户名称" prop="userName">
+                <el-input v-model="ruleForm.userName" placeholder="用户名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" v-if="!ruleForm.userId">
+              <el-form-item label="密码" prop="password">
+                <el-input v-model="ruleForm.password" placeholder="密码" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="用户邮箱">
+                <el-input v-model="ruleForm.email" placeholder="用户邮箱" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="用户昵称" prop="nickName">
+                <el-input v-model="ruleForm.nickName" placeholder="用户昵称" />
               </el-form-item>
             </el-col>
+           
             <el-col :span="12">
-              <el-form-item label="手机号码" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="手机号码">
+                <el-input v-model="ruleForm.phonenumber" placeholder="手机号码" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="身份证号" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="用户性别">
+                
+                <el-select
+                 v-model="ruleForm.sex" placeholder="用户性别"
+                  style="width: 100%"
+                  
+                >
+                  <el-option
+                   
+                    label="男"
+                    value="0"
+                  />
+                  <el-option
+                   
+                   label="女"
+                   value="1"
+                 />
+                 <el-option
+                   
+                   label="未知"
+                   value="2"
+                 />
+                </el-select>
               </el-form-item>
             </el-col>
+
+
+            
             <el-col :span="12">
-              <el-form-item label="用户角色" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="账号状态">
+                
+                <el-select
+                 v-model="ruleForm.status" placeholder="账号状态"
+                  style="width: 100%"
+                  
+                >
+                  <el-option
+                   
+                    label="正常"
+                    value="0"
+                  />
+                  <el-option
+                   
+                   label="停用"
+                   value="1"
+                 />
+                 
+                </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="24">
-              <el-form-item label="用户状态" prop="name">
-                <el-input v-model="ruleForm.name" />
+            <el-col :span="12">
+              <el-form-item label="角色">
+                
+              
+                <el-select
+                 v-model="ruleForm.roleIds" placeholder="角色"
+                  style="width: 100%"
+                  multiple
+                >
+                  <el-option
+                    v-for="item in roleList"
+                    :key="item.roleId"
+                    :label="item.roleName"
+                    :value="item.roleId"
+                  />
+                </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="24">
+            <el-col :span="12">
               <el-form-item label="备注信息" prop="name">
-                <el-input v-model="ruleForm.name" type="textarea" />
+                <el-input v-model="ruleForm.remark"  placeholder="备注信息" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -325,7 +489,7 @@ onMounted(()=>{
           <template #footer>
             <div class="dialog-footer">
               <el-button @click="dialogVisible = false" :icon="Close">取消</el-button>
-              <el-button type="primary" :icon="Check" @click="addUser(false)">
+              <el-button type="primary" :icon="Check" @click="submitForm(ruleFormRef)">
                 确认创建
               </el-button>
             </div>