ezhizao_dms_vue/src/views/business/dayworkUpdate/person.vue

<template>
  <el-dialog title="员工选择" v-model="visible" :width="width" @close="close" append-to-body draggable>
    <el-form ref="dialogForm" class="list-search-container" :inline="true" :model="queryParams" >
      <el-form-item label="员工编码：" prop="userName">
        <el-input v-model.trim="queryParams.userName" type="text" placeholder="请输入员工编码" @keydown.enter.prevent @keyup.enter="handleSearch" style="width: 180px" clearable />
      </el-form-item>
      <el-form-item label="员工姓名：" prop="nickName">
        <el-input v-model.trim="queryParams.nickName" type="text" placeholder="请输入员工姓名" @keydown.enter.prevent @keyup.enter="handleSearch" style="width: 180px" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="dialogTable" :data="list" :row-key="getRowKey" v-loading="personLoading" height="440px"  align="center">
      <el-table-column v-if="multiple" type="selection" width="40" align="center"  />
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="员工编码" prop="userName" width="100" align="center" />
      <el-table-column label="员工姓名" prop="nickName" width="100" align="center" />
      <el-table-column label="手机号码" prop="phoneNumber" width="150" align="center" />
      <el-table-column label="性别" prop="sex" width="60" align="center" />
      <el-table-column label="使用单位" prop="usageCompanyName" width="220" align="center" />
      <el-table-column label="备注" prop="remark" align="center" />
      <el-table-column v-if="!multiple" label="操作" width="50" align="center">
        <template #default="scope">
          <el-button type="success" icon="finished" circle @click="handleSingleSelected(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="multiple" type="primary" :disabled="selections.length === 0" icon="Check" @click="handleMultipleSelected">
          确定
        </el-button>
        <el-button icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import { getUserList } from '@/api/system/user'


const { proxy } = getCurrentInstance()
const total = ref(0)
const props = defineProps({
  width: {
    type: String,
    default: '1000px'
  },
  multiple: {
    type: Boolean,
    default: false
  },
  singleSelected: {
    type: Function,
    default: null
  }
})
const { singleSelected } = toRefs(props)
const list = ref([])
const personLoading = ref(false)
const visible = ref(false)
const data = reactive({
  queryParams: {
    nickName: '',
    userName: '',
    pageSize: 10,
    pageNum: 1
  }
})
const { queryParams } = toRefs(data)
/**
 * 对话框打开 事件
 */
function open() {
  visible.value = true
  getList()
}
/** 获取行 id */
function getRowKey(row) {
  return row.userId
}

/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.dialogForm.resetFields()
  proxy.$refs.dialogTable.clearSelection()
  queryParams.value.pageNum = 1
  visible.value = false
}

/**
 * 加载数据
 */
function getList() {
  personLoading.value = true
  getUserList(queryParams.value).then(res =>{
    if(res.code == 200) {
      list.value = res.rows
      total.value = res.total
    }
  })
  personLoading.value = false
}


/**  搜索 事件 */
function handleSearch() {
  queryParams.value.pageNum = 1
  getList()

}

/** 单选事件 */
function handleSingleSelected(row) {
  if (singleSelected.value) {
    singleSelected.value(row)
  }
  close()
}

defineExpose({
  open
})
</script>