人资管理，员工合同

src/api/modules/other.js

@@ -45,7 +45,7 @@ export const getdepartmentList = (form, msg = true) => httpApi({
     params: form
 }, msg);
 //获取用户列表
-export const getuserList = (form, msg = true) => httpApi({
+export const getuserList = (form= {}, msg = true) => httpApi({
     url: '/api/blade-user/user-list',
     method: 'get',
     params: form

src/api/modules/people/contract.js

@@ -0,0 +1,12 @@
+import {httpApi} from "../../request/httpApi";
+
+export default {
+    //员工合同、入职、离职的分页
+    async page(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-control/usercontractinfo/page',
+            method: 'get',
+            params: form
+        }, msg);
+    },
+}

src/views/people/contract/index.vue

@@ -1,87 +1,67 @@
-
 <template>
-  <HcCard>
-    <template #header>
-      <div class="w-36 ml-2">
-                <el-select v-model="searchForm.peoplename" block clearable placeholder="员工姓名" size="large">
-                    <el-option v-for="item in peopleoption" :label="item.name" :value="item.key"/>
+    <HcCard>
+        <template #header>
+            <div class="w-36 ml-2">
+                <el-select v-model="searchForm.userId" block clearable filterable placeholder="员工姓名" size="large">
+                    <el-option v-for="item in userList" :label="item.name" :value="item.id" />
                 </el-select>
-      </div>
-      <div class="ml-4">
+            </div>
+            <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
                     <span>搜索</span>
                 </el-button>
-       </div>
-      <div class="ml-2">
+            </div>
+            <div class="ml-2">
                 <el-button size="large" @click="resetClick">
                     <HcIcon name="close-circle"/>
                     <span>重置</span>
                 </el-button>
-        </div>
-    </template>
-    <template  #extra>
-        <el-button type="primary" @click="editRowClick" size="large">
-                    <HcIcon name="add"/>
-                    <span>新增合同信息</span>
-         </el-button>
-    </template>
-    <HcTable :column="tableColumn" :datas="tableData" >
+            </div>
+        </template>
+        <template #extra>
+            <el-button type="primary" @click="editRowClick" size="large">
+                <HcIcon name="add"/>
+                <span>新增合同信息</span>
+            </el-button>
+        </template>
+        <HcTable :loading="tableLoading" :column="tableColumn" :datas="tableData">
             <template #action="{row, index}">
-       
-                  <el-button hc-btn type="primary" size="small"  @click="editRowClick(row)">编辑</el-button>
-                  <el-button hc-btn type="primary" size="small">删除</el-button>
-           
+                <el-button hc-btn type="primary" size="small" @click="editRowClick(row)">编辑</el-button>
+                <el-button hc-btn type="primary" size="small">删除</el-button>
             </template>
-      </HcTable>
-      <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
-      </template>
-  </HcCard>
+        </HcTable>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+    </HcCard>
 </template>
 
 <script setup>
-import {ref, watch} from  'vue'
-
+import {onActivated, ref} from 'vue'
+import mainApi from "~api/people/contract";
 import {useRouter} from 'vue-router'
+import {getuserList} from "~api/other";
+import {getArrValue} from "js-fast-way";
 
 const router = useRouter()
 
+onActivated(() => {
+    getuserListApi()
+    getTableData()
+})
 
-const tableColumn = [
-    {key: 'name', name: '姓名'},
-    {key: 'department', name: '部门'},
-    {key: 'key4', name: '合同开始时间'},
-    {key: 'key5', name: '合同结束时间'},
-    {key: 'key6', name: '合同类型'},
-    {key: 'key7', name: '合同附件'},
-    {key: 'action', name: '操作', align: 'center', fixed: 'right'},
-
+//获取用户下拉数据
+const userList = ref([])
+const getuserListApi = async () => {
+    const {data} = await getuserList()
+    userList.value = getArrValue(data)
+}
 
-]
-const tableData = ref([
-    {name: '名称1',id:1},
-    {name: '名称2', },
-    {name: '名称3', }
-])
 const searchForm = ref({
-    name: '',
+    type: 1, userId: null,
     current: 1, size: 20, total: 0
 })
-const peopleoption=ref([
-    {name: '张三', key: '1'},
-    {name: '李四', key: '2'},
-])
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
-
-const getTableData = () => {
-
-}
 
 //搜索
 const searchClick = () => {
@@ -93,6 +73,37 @@ const searchClick = () => {
 const resetClick = () => {
     searchForm.value = {current: 1, size: 20, total: 0}
 }
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表格参数
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'userId', name: '姓名'},
+    {key: 'createDept', name: '部门'},
+    {key: 'startDate', name: '合同开始时间'},
+    {key: 'endDate', name: '合同结束时间'},
+    {key: 'conType', name: '合同类型'},
+    {key: 'fileUrl', name: '合同附件'},
+    {key: 'action', name: '操作', align: 'center', fixed: 'right'},
+]
+
+//获取表格数据
+const tableData = ref([])
+const getTableData = async () => {
+    tableLoading.value = true
+    const {data} = await mainApi.page(searchForm.value)
+    tableData.value = getArrValue(data['records'])
+    searchForm.value.total = data['total'] || 0
+    tableLoading.value = false
+}
+
+
 //编辑档案信息
 const editRowClick = (row) => {
     router.push({
@@ -106,4 +117,4 @@ const editRowClick = (row) => {
 
 </script>
 <style lang='scss' scoped>
-</style>
+</style>