QRAPI/Web/src/views/system/components/userSelectDialog.vue

<template>
  <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="1024px">
    <template #header>
      <div>
        <el-icon class="el-custom-dialog-icon">
          <Edit />
        </el-icon>
        <span>用户信息</span>
      </div>
    </template>
    <div class="app-container" v-loading="state.loading" style="height: 50vh">
      <el-card class="search-container">
        <el-form :inline="true">
          <el-form-item label="账号">
            <el-input v-model="state.queryParams.name" placeholder="账号/姓名" clearable />
          </el-form-item>
          <el-form-item label="机构部门">
            <OrgCascader v-model="state.orgIds" clearable :check-strictly="true" />
          </el-form-item>
          <el-form-item>
            <!-- v-auth="'menuView'" -->
            <el-button @click="handleQuery" icon="Search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <!-- v-auth="'menuView'" -->
            <el-button type="primary" @click="handleSelected" icon="Plus">确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="paged-table-container">
        <el-table
          ref="tableRef"
          row-key="id"
          :data="state.tableData"
          border
          @selection-change="(val)=>state.multipleSelection=val"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" width="50">
            <template #default="scope">
              {{ scope.$index + 1 + (state.pageParams.Page - 1) * state.pageParams.PageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="账号"></el-table-column>
          <el-table-column prop="realName" label="姓名"></el-table-column>
          <el-table-column prop="orgName" label="机构部门" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 1" type="success" disable-transitions>正常</el-tag>
              <el-tag v-else type="danger" disable-transitions>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
        <el-pagination
          style="margin-top: 10px"
          v-model:currentPage="state.pageParams.Page"
          v-model:page-size="state.pageParams.PageSize"
          :total="state.pageParams.Total"
          background
          layout="total, sizes,prev, pager, next"
          @size-change="handleQuery"
          @current-change="handleQuery"
          :page-sizes="[10, 20, 50, 100]"
        />
      </el-card>
    </div>
  </el-dialog>
</template>
<script setup>
import { reactive,defineExpose } from 'vue'
import { getPaged } from '@/api/system/userApi'
import { ElMessageBox, ElMessage } from 'element-plus'
import OrgCascader from '@/views/system/components/orgCascader.vue'

const emits = defineEmits(['selected'])

const state = reactive({
  isShowDialog: false,
  loading: false,
  queryParams: {
    name: '',
    orgId: null
  },
  pageParams: {
    Page: 1,
    PageSize: 10,
    Total: 0
  },
  multipleSelection:[],
  tableData: [],
  orgIds: null
})

function handleQuery() {
  state.loading = true
  if (state.orgIds && state.orgIds.length > 0) {
    state.queryParams.orgId = state.orgIds[state.orgIds.length - 1]
  } else {
    state.queryParams.orgId = null
  }

  getPaged(Object.assign({}, state.queryParams, state.pageParams))
    .then((resp) => {
      state.tableData = resp.data.data
      state.pageParams.Total = resp.data.total
    })
    .finally(() => (state.loading = false))
}

function openDialog() {
  state.orgIds = null
  state.queryParams = {
    name: '',
    orgId: null
  }
  handleQuery()
  state.isShowDialog = true
}

function handleSelected() {
  emits('selected', state.multipleSelection)
  state.isShowDialog = false
}

defineExpose({
  openDialog
})
</script>