admin-fiveFollowing/src/views/systemManage/userManage/index.vue

<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div>
          <span class="" style="margin-right: 30px">用户管理列表</span>
          <el-button :disabled="store.state.authorities.indexOf('新增')==-1" 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"
               :disabled="store.state.authorities.indexOf('查询')==-1"
            ></el-input>
          </div>

          <div class="filter-item">
            账号状态:
            <el-select
              v-model="status"
              placeholder="请选择"
              style="width: 150px"
              clearable
               :disabled="store.state.authorities.indexOf('查询')==-1"
            >
              <el-option label="正常" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </div>

          <div class="filter-item planOutage">
            选择时间范围：
            <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: auto"
               :disabled="store.state.authorities.indexOf('查询')==-1"
            ></el-date-picker>
          </div>
          <el-button
          :disabled="store.state.authorities.indexOf('查询')==-1"
            type="primary"
            icon="el-icon-search"
            class="search-button"
            @click="list()"
          >
            查询
          </el-button>
        </div>
      </div>

      <!-- <div class="right">
        <el-button type="primary">导出</el-button>
      </div> -->
    </div>
    <!-- 筛选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="nickName" label="用户名"></el-table-column>
      <el-table-column prop="userName" label="账号"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100">
        <template #default="scope">
          <span>{{ scope.row.sex == 1 ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phonenumber" label="手机号码" min-width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
      <!-- <el-table-column
        prop="roles.roleName"
        label="角色名称"
       
      ></el-table-column> -->
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            @click="checkItem(scope.row)"
            type="text"
            size="small"
            class="delete-text"
          >
            查看
          </el-button>
          <el-button
          :disabled="store.state.authorities.indexOf('修改')==-1"
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页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"
        background
      ></el-pagination>
    </div>

    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :dialogTitle="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
      v-if="tableItem"
    ></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 DialogComponent from './dialogComponent'

export default defineComponent({
  components: { DialogComponent },
  setup() {
    const store = useStore()
    const total = ref(0)
    const pageSize = ref(10)
    const currentPage = ref(1)

    const dateTime = ref('')

    const userName = ref('')
    const phone = ref('')
    const status = ref('')
    const role = ref('')
    const currentPage4 = ref(4)
    const dialogTitle = ref('')
    const showDialog = ref(false)
    const tableData = ref([])
    const siteIdArr=ref([])

    // // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      list()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      list()
    }

    //用户列表
    function list() {
      store.commit('TimeAll_function', dateTime.value)
      const time = store.state.Time_Data
      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') {
            tableData.value = requset.data.rows
            total.value = requset.data.total
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    const tableItem = reactive([])
    // 添加操作
    const addItem = () => {
      tableItem.value = {
        nickName: '',
        userName: '',
        sex: '1',
        phonenumber: '',
        createTime: '',
        roleName: '',
        password: '',
      }
      dialogTitle.value = '新增'
      showDialog.value = true
    }

    // 查看
    const checkItem = (row) => {
      siteIdArr.value=[]
      console.log(row)
      api.authRole({}, row.userId).then((requset) => {
        if (requset.status === 'SUCCESS') {
          tableItem.value.roleId= requset.data.user.roles[0].roleId
          var newArray= requset.data.userSite
           newArray.forEach(function(item){
             siteIdArr.value.push(item.siteId)

           })
           tableItem.value.siteId= siteIdArr.value
        } else {
          ElMessage.error(requset.msg)
        }
      })
      tableItem.value = row
      dialogTitle.value = '查看'
      showDialog.value = true
    }

    // 编辑操作
    const editRow = (row) => {
      siteIdArr.value=[]
      console.log(row)
      api.authRole({}, row.userId).then((requset) => {
        if (requset.status === 'SUCCESS') {
          tableItem.value.roleId= requset.data.user.roles[0].roleId

           var newArray= requset.data.userSite
           newArray.forEach(function(item){
             siteIdArr.value.push(item.siteId)

           })
           tableItem.value.siteId= siteIdArr.value
            
        } else {
          ElMessage.error(requset.msg)
        }
      })


      // tableItem.value = row
      tableItem.value={
        nickName:row.nickName,
        userName:row.userName,
        sex:row.sex,
        phonenumber:row.phonenumber,
        password:row.password,
        createTime:row.createTime,
        roleId:row.roleId,
        userId:row.userId
      }

      dialogTitle.value = '编辑'
      showDialog.value = true
    }

    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
      
      list()
    }

    onMounted(() => {
      list()
    })

    return {
      userName,
      phone,
      status,
      role,
      tableItem,
      currentPage4,
      dialogTitle,
      showDialog,
      tableData,
      total,
      pageSize,
      currentPage,

      dateTime,
      store,
      siteIdArr,
      list,
      handleSizeChange,
      handleCurrentChange,
      headClass,
      checkItem,
      addItem,
      editRow,
      closeDialog,
    }
  },
})
</script>


<style lang="scss" scoped>
</style>