试验管理，实验室管理，人员档案

src/styles/app/element.scss

@@ -148,11 +148,13 @@
         display: flex;
         .el-form-item {
             flex: 1;
-            margin-right: 12px;
+            margin-right: 24px;
         }
         .el-form-item + .el-form-item {
+            margin-left: 24px;
+        }
+        .el-form-item:last-child {
             margin-right: 0;
-            margin-left: 12px;
         }
     }
     &.el-form--label-top .hc-form-item .el-form-item .el-form-item__label {

src/views/tentative/laboratory/user.vue

@@ -1,30 +1,297 @@
 <template>
-    <div class="hc-layout-box">
-        人员档案
+    <div class="hc-page-box">
+        <HcCard>
+            <template #header>
+                <div class="w-72">
+                    <el-input v-model="searchForm.queryValue" placeholder="请输入人员名称查询" clearable @keyup="keyUpEvent" size="large"/>
+                </div>
+                <div class="ml-2">
+                    <el-button type="primary" @click="searchClick" size="large">
+                        <HcIcon name="search-2"/>
+                        <span>搜索</span>
+                    </el-button>
+                </div>
+            </template>
+            <template #extra>
+                <HcTooltip keys="tentative_parameter_density_add">
+                    <el-button type="primary" hc-btn @click="addFormModalClick">
+                        <HcIcon name="add-circle"/>
+                        <span>新增</span>
+                    </el-button>
+                </HcTooltip>
+                <HcTooltip keys="tentative_parameter_density_edit">
+                    <el-button hc-btn @click="editFormModalClick">
+                        <HcIcon name="edit"/>
+                        <span>编辑</span>
+                    </el-button>
+                </HcTooltip>
+                <HcTooltip keys="tentative_parameter_density_del">
+                    <el-button hc-btn @click="delModalClick">
+                        <HcIcon name="delete-bin-2"/>
+                        <span>删除</span>
+                    </el-button>
+                </HcTooltip>
+            </template>
+            <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"></HcTable>
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange"/>
+            </template>
+        </HcCard>
+
+        <!--新增/编辑-->
+        <HcDialog :show="addEditFormModal" title="新增/编辑" widths="70rem" :isClose="false" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
+            <template #extra>
+                <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange"/>
+            </template>
+            <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large">
+                <template v-if="tabTypeKey === 'tab1'">
+                    <div class="hc-form-item">
+                        <el-form-item label="姓名" prop="key1">
+                            <el-input v-model="addEditFormModel.key1"/>
+                        </el-form-item>
+                        <el-form-item label="身份证" prop="key2">
+                            <el-input v-model="addEditFormModel.key2"/>
+                        </el-form-item>
+                        <el-form-item label="出生日期" prop="key3">
+                            <el-date-picker type="date" v-model="addEditFormModel.key3" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                    </div>
+                    <div class="hc-form-item">
+                        <el-form-item label="性别" prop="key4">
+                            <el-select v-model="addEditFormModel.key4" block>
+                                <el-option label="男" value="1"/>
+                                <el-option label="女" value="2"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="毕业院校" prop="key5">
+                            <el-input v-model="addEditFormModel.key5"/>
+                        </el-form-item>
+                        <el-form-item label="专业" prop="key6">
+                            <el-input v-model="addEditFormModel.key6"/>
+                        </el-form-item>
+                    </div>
+                    <div class="hc-form-item">
+                        <el-form-item label="学历">
+                            <el-select v-model="addEditFormModel.key7" block>
+                                <el-option label="小学" value="1"/>
+                                <el-option label="初中" value="2"/>
+                                <el-option label="大专" value="3"/>
+                                <el-option label="本科" value="4"/>
+                                <el-option label="研究生" value="5"/>
+                                <el-option label="硕士" value="6"/>
+                                <el-option label="博士" value="7"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="毕业日期">
+                            <el-date-picker type="date" v-model="addEditFormModel.key8" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                        <el-form-item label="入职时间">
+                            <el-date-picker type="date" v-model="addEditFormModel.key9" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                    </div>
+                    <div class="hc-form-item">
+                        <el-form-item label="就职状态">
+                            <el-select v-model="addEditFormModel.key10" block>
+                                <el-option label="在职" value="1"/>
+                                <el-option label="离职" value="2"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="职称" prop="key5">
+                            <el-input v-model="addEditFormModel.key11"/>
+                        </el-form-item>
+                        <el-form-item label="工作职务" prop="key6">
+                            <el-input v-model="addEditFormModel.key12"/>
+                        </el-form-item>
+                    </div>
+                    <div class="hc-form-item">
+                        <el-form-item label="进场时间">
+                            <el-date-picker type="date" v-model="addEditFormModel.key13" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                        <el-form-item label="部门">
+                            <el-input v-model="addEditFormModel.key14"/>
+                        </el-form-item>
+                        <el-form-item label="从事检测工作时间">
+                            <el-input v-model="addEditFormModel.key15"/>
+                        </el-form-item>
+                    </div>
+                    <div class="hc-form-item">
+                        <el-form-item label="退场时间">
+                            <el-date-picker type="date" v-model="addEditFormModel.key16" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                        <el-form-item label="劳动合同开始日期">
+                            <el-date-picker type="date" v-model="addEditFormModel.key17" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                        <el-form-item label="劳动合同终止日期">
+                            <el-date-picker type="date" v-model="addEditFormModel.key18" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                        </el-form-item>
+                    </div>
+                </template>
+                <template v-if="tabTypeKey === 'tab2'">
+                    <el-form-item label="证书编号" prop="key19">
+                        <el-input v-model="addEditFormModel.key19"/>
+                    </el-form-item>
+                    <el-form-item label="持证类型">
+                        <el-select v-model="addEditFormModel.key20" block>
+                            <el-option label="检测员" value="1"/>
+                            <el-option label="检测工程师" value="2"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="持证专业">
+                        <el-select v-model="addEditFormModel.key21" block>
+                            <el-option label="水运结构与地基" value="1"/>
+                            <el-option label="交通工具" value="2"/>
+                            <el-option label="水运材料" value="3"/>
+                            <el-option label="桥梁隧道工程" value="4"/>
+                            <el-option label="道路工程" value="5"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="证书文件">
+                        <div class="form-item-dashed hover">上传文件（待定，看后端接口后，再定）</div>
+                    </el-form-item>
+                </template>
+                <template v-if="tabTypeKey === 'tab3'">
+                    <el-form-item label="记录日期">
+                        <el-date-picker type="date" v-model="addEditFormModel.key22" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
+                    </el-form-item>
+                    <el-form-item label="内容">
+                        <el-input v-model="addEditFormModel.desc" type="textarea" :autosize="{ minRows: 8}"/>
+                    </el-form-item>
+                </template>
+            </el-form>
+        </HcDialog>
+
     </div>
 </template>
 
 <script setup>
-import {ref,watch,onMounted} from "vue";
-import {useRouter, useRoute} from 'vue-router'
+import {ref} from "vue";
 import {useAppStore} from "~src/store";
 
 //初始变量
-const router = useRouter()
-const useRoutes = useRoute()
 const useAppState = useAppStore()
-//const {getObjValue, getArrValue} = isType()
 
 //全局变量
 const projectId = ref(useAppState.getProjectId);
 const contractId = ref(useAppState.getContractId);
 
-</script>
+//搜索表单
+const searchForm = ref({queryValue: null, current: 1, size: 20, total: 0})
 
-<style lang="scss" scoped>
+//回车搜索
+const keyUpEvent = (e) => {
+    if (e.key === "Enter") {
+        searchForm.value.current = 1;
+        getTableData()
+    }
+}
 
-</style>
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表格数据
+const tableRef = ref(null)
+const tableColumn = ref([
+    {key:'key1', name: '姓名'},
+    {key:'key2', name: '部门'},
+    {key:'key3', name: '职称'},
+    {key:'key4', name: '就职状态'},
+    {key:'key5', name: '入职时间'},
+    {key:'key6', name: '从事检测工作年份'},
+    {key:'key7', name: '工作职务'},
+    {key:'key8', name: '身份证号码'},
+    {key:'key9', name: '出生日期'},
+    {key:'key10', name: '性别'},
+    {key:'key11', name: '毕业院校'},
+    {key:'key12', name: '学历'},
+    {key:'key13', name: '专业'},
+    {key:'key14', name: '毕业时间'},
+    {key:'key15', name: '劳动合同终止日期'},
+    {key:'key16', name: '进场时间'},
+    {key:'key17', name: '退场时间'},
+])
+
+//获取数据
+const tableLoading = ref(false)
+const tableData = ref([])
+const getTableData = async () => {
+
+}
+
+//多选
+const tableCheckedKeys = ref([]);
+const tableSelection = (rows) => {
+    tableCheckedKeys.value = rows.filter((item) => {
+        return (item??'') !== '';
+    })
+}
 
-<style lang="scss">
+//新增/编辑 材料进场
+const addEditFormModal = ref(false)
+const addFormModalClick = () => {
+    addEditFormModal.value = true
+}
+const editFormModalClick = () => {
+    addEditFormModal.value = true
+}
+const addEditFormModalClose = () => {
+    addEditFormModal.value = false
+}
+
+//类型tab数据和相关处理
+const tabTypeKey = ref('tab1')
+const tabTypeTab = ref([
+    {key:'tab1',  name: '基本信息'},
+    {key:'tab2', name: '证书信息'},
+    {key:'tab3', name: '工作记录'},
+]);
+const tabTypeChange = (item) => {
+    tabTypeKey.value = item?.key
+}
+
+//新增/编辑 表单
+const addEditFormRef = ref(null)
+const addEditFormModel = ref({})
+const addEditFormRules = {
+    key2: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入"
+    },
+}
+
+//新增/编辑 保存
+const addEditFormLoading = ref(false)
+const addEditFormClick = () => {
+
+}
+
+
+//删除
+const delModalClick = () => {
+    window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: (action) => {
+            if (action === 'confirm') {
+                //removeContractTreeNode()
+            }
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
 
 </style>