创建项目

src/views/project/info/user.vue

@@ -2,16 +2,29 @@
     <div class="hc-project-wbs-user relative h-full">
         <hc-card>
             <template #header>
-                自定义标题栏
+                <div class="w-200px">
+                    <el-select v-model="contractId" filterable clearable block placeholder="选择合同段" @change="contractClick">
+                        <el-option v-for="item in contractList" :key="item.id" :label="item.contractName" :value="item.id" />
+                    </el-select>
+                </div>
+                <div class="ml-14px w-200px">
+                    选择维护人员角色
+                </div>
             </template>
             <template #extra>
-                自定义标题栏右边
+                <el-button hc-btn type="primary">创建新用户</el-button>
+                <el-button hc-btn type="danger">全部删除</el-button>
             </template>
-
-            内容区域
-
+            <template #search>
+                自定义搜索区域
+            </template>
+            <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false">
+                <template #action="{ row }">
+                    <el-link type="danger">删除</el-link>
+                </template>
+            </hc-table>
             <template #action>
-                自定义底部
+                <hc-pages :pages="searchForm" @change="pageChange" />
             </template>
         </hc-card>
     </div>
@@ -35,6 +48,53 @@ watch(() => modelData.value, (data) => {
 onMounted(() => {
 
 })
+
+//合同段列表
+const contractId = ref('')
+const contractList = ref([])
+const contractClick = () => {
+
+}
+
+//搜索表单
+const searchForm = ref({ current: 1, size: 30, total: 0 })
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1
+    getTableData()
+}
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表格数据
+const tableColumn = ref([
+    { key: 'name', name: '姓名', width: 120, align: 'center' },
+    { key: 'phone', name: '电话', width: 120, align: 'center' },
+    { key: 'postName', name: '岗位', width: 120, align: 'center' },
+    { key: 'contractName', name: '合同段名称', align: 'center' },
+    { key: 'action', name: '操作', width: 80, align: 'center' },
+])
+const tableData = ref([])
+
+//获取表格数据
+const tableLoading = ref(false)
+const getTableData = async () => {
+    /*tableData.value = []
+    tableLoading.value = true
+    const { data } = await mainApi.page({
+        ...searchForm.value,
+        total: null,
+    })
+    tableLoading.value = false
+    tableData.value = getArrValue(data?.records)
+    searchForm.value.total = data?.total || 0*/
+}
 </script>
 
 <style lang="scss">