提交

src/views/Clue/Set/Comp/ClueSend.vue

@@ -2,22 +2,33 @@
   <div class="flex">
     <div class="mr-20px" style="width: 500px">
       <el-input
-        v-model="searchForm.keyword"
+        v-model="searchForm.nickname"
         placeholder="请输入关键字查询"
         clearable
         class="mb-10px"
         @keyup.enter="getUserList"
       />
 
-      <el-table :data="userList" @cell-click="selectUser">
-        <el-table-column prop="name" label="员工姓名" />
-        <el-table-column prop="phone" label="电话" />
-        <el-table-column prop="workNum" label="工号" />
+      <el-table
+        v-loading="loading"
+        :data="userList"
+        :row-class-name="setRowClass"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="nickname" label="员工姓名" />
+        <el-table-column prop="mobile" label="电话" />
+        <el-table-column prop="status" label="状态">
+          <template #default="{ row }">
+            {{ ['在职', '离职'][row.status] }}
+          </template>
+        </el-table-column>
       </el-table>
       <!-- 分页 -->
       <Pagination
         v-model:limit="searchForm.pageSize"
-        v-model:page="searchForm.pageNum"
+        v-model:page="searchForm.pageNo"
+        small
+        layout="total, prev, pager, next, jumper"
         :total="total"
         @pagination="getUserList"
       />
@@ -65,16 +76,27 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="ClueSend">
+import { getUserPage } from '@/api/system/user'
+
+// const message = useMessage() // 消息弹窗
+// const { t } = useI18n() // 国际化
+
 const searchForm = ref({
-  keyword: '',
+  nickname: '',
   pageSize: 20,
-  pageNum: 1
+  pageNo: 1
 })
 
 const total = ref(0)
+const loading = ref(false)
+const userList = ref([])
 
-const userList = ref([{ name: '张三', phone: '1888888888', workNum: '202101030001' }])
+function setRowClass({ row }) {
+  return row.field == currentRowId.value ? 'current-row' : ''
+}
+
+const currentRowId = ref('')
 
 const form = ref({
   isAuto: 1,
@@ -84,8 +106,18 @@ const form = ref({
 })
 const rules = ref({})
 
-function getUserList() {
-  console.log('获取列表')
+async function getUserList() {
+  loading.value = true
+  try {
+    const data = await getUserPage(searchForm.value)
+    userList.value = data.list
+    if (userList.value.length) {
+      handleRowClick(userList.value[0])
+    }
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
 function onSubmit() {
@@ -111,9 +143,14 @@ function resourceCheckedChange(val) {
   resourceIndeterminate.value = checkedCount > 0 && checkedCount < resourceOptions.value.length
 }
 
-function selectUser(row) {
-  console.log(row)
+function handleRowClick(row) {
+  currentRowId.value = row.ruleId
+  form.value = { ...row }
 }
+
+onMounted(() => {
+  getUserList()
+})
 </script>
 
 <style lang="scss" scoped></style>