ezhizao_dms_supplier_vue/src/views/dialog/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" @selection-change="handleSelectionChange" align="center">
      <el-table-column v-if="multiple" type="selection" width="40" align="center" :reserve-selection="true" :selectable="handleSelected" />
      <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 { listEmployee } from '@/api/system/user'
import { listUser,listByLikeNickNameOrUserName, getUsersByDeptId, getUsersItemByDeptId } from '@/api/system/user'


const { proxy } = getCurrentInstance()
const total = ref(0)
const props = defineProps({
  width: {
    type: String,
    default: '1000px'
  },
  multiple: {
    type: Boolean,
    default: false
  },
  selected: {
    type: Array,
    defalut: []
  },
  singleSelected: {
    type: Function,
    default: null
  },
  multipleSelected: {
    type: Function,
    default: null
  }
})
const { singleSelected, multipleSelected, selected } = toRefs(props)
const list = ref([])
const userIds = ref([])
const personLoading = ref(false)
const visible = ref(false)
const identifying = ref(false)
const data = reactive({
  queryParams: {
    nickName: '',
    userName: '',
    pageSize: 10,
    pageNum: 1
  }
})
const selections = ref([])
const { queryParams } = toRefs(data)
/**
 * 对话框打开 事件
 */
function open(userInfo) {
  //部门管理新增
  if (userInfo.identifying) {
    identifying.value = userInfo.identifying
    //queryParams.value.deptId = userInfo.deptId;
  } else {
    queryParams.value.deptId = userInfo.deptId
  }
  if (userInfo.userIds) {
    userIds.value = userInfo.userIds
  }
  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
  console.log(identifying.value)
  //如果identifying为true，则是部门管理添加员工弹窗数据；如果为false，则是在资源分配添加员工弹窗
  if (identifying.value) {
    listByLikeNickNameOrUserName(queryParams.value).then(response => {
    if (response.code == 200) {
      list.value = response.rows
      total.value = response.total
      personLoading.value = false
    }
  })
  } else {
  listUser(queryParams.value).then((response) => {
    if (response.code == 200) {
      list.value = response.rows
      total.value = response.total
      personLoading.value = false
    }
  })
  }
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection
}

function handleSelected(row) {
  return !userIds.value.includes(row.userName)
}

/**  搜索 事件 */
function handleSearch(type) {
  if (type && type === 'clear') {
    queryParams.value = {
      subject: '',
      nickName: '',
      userName: '',
      total: 0,
      pageSize: 10,
      pageNum: 1
    }
  }
  else {
  if (identifying.value) {
    listByLikeNickNameOrUserName(queryParams.value).then(response => {
    if (response.code == 200) {
      list.value = response.rows
      total.value = response.total
      personLoading.value = false
    }
  })
  } else {
  listUser(queryParams.value).then((response) => {
    if (response.code == 200) {
      list.value = response.rows
      total.value = response.total
      personLoading.value = false
    }
  })
  }
}

}

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

/** 多选事件 */
function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selections.value)
  }
  close()
}

defineExpose({
  open
})
</script>