人资管理，入职管理、离职管理

src/views/people/contract/info.vue

@@ -23,9 +23,7 @@
                     <HcFormUpload :src="formModel.fileUrl" @upload="formItemUpload"/>
                 </el-form-item>
                 <el-form-item label="合同附件:" v-show="!formModel.fileUrl">
-                    <HcUploadFile ref="uploadFileRef" drop :options="uploadOptions" @success="uploadFileSuccess" class="w-full">
-                        <div class="accept-tip">支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)</div>
-                    </HcUploadFile>
+                    <HcUploadFile ref="uploadFileRef" drop :options="uploadOptions" @success="uploadFileSuccess" class="w-full"/>
                 </el-form-item>
             </el-form>
         </div>
@@ -150,9 +148,4 @@ const formSaveClick = async () => {
     text-align: center;
     margin: 0 auto;
 }
-.accept-tip {
-    font-size: 14px;
-    color: #7a7979;
-    margin-bottom: 40px;
-}
 </style>

src/views/people/dimission.vue

@@ -1,116 +1,104 @@
-
 <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="addRowClick" 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 type="primary" size="small" @click="editRowClick(row)">编辑</el-button>
+                <el-button type="danger" size="small" @click="delRowClick(row)">删除</el-button>
             </template>
-      </HcTable>
-      <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
-      </template>
-        <!--离职登记弹窗-->
-        <HcDialog bgColor="#ffffff" widths="42rem" isToBody  :show="importModal" title="离职登记" @close="importModalClose" footer >
-              <el-form label-position="left" label-width="auto" :model="formModel" size="large">
-                <el-form-item label="姓名:">
-                  <el-input v-model="formModel.name" placeholder="请输入"/>
+        </HcTable>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+
+        <!--入职登记弹窗-->
+        <HcDialog bgColor="#ffffff" isToBody widths="42rem" :show="formModal" title="入职登记"
+                  :loading="formModalLoading" loadingText="保存中，请稍等" @close="formModalClose" @save="formModalSave"
+        >
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                <el-form-item label="员工姓名：" prop="userId">
+                    <el-select v-model="formModel.userId" block filterable>
+                        <el-option v-for="item in userList" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="离职时间：" prop="endDate">
+                    <el-date-picker v-model="formModel.endDate" type="date" class="block" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                 </el-form-item>
-                  <el-form-item label="离职时间" >
-                    <el-date-picker
-                    style="width: 100%;"
-                      v-model="formModel.time"
-                      type="date"
-                      placeholder="选择时间"
-                      size="large"
-                    />
+                <el-form-item label="离职原因：" prop="desc">
+                    <el-input type="textarea" v-model="formModel.desc" :autosize="{ minRows: 4, maxRows: 6 }"/>
                 </el-form-item>
-                <el-form-item label="离职原因:">
-                  <el-input v-model="formModel.reason" placeholder="请输入"/>
+                <el-form-item label="离职登记表：" v-if="formModel.fileUrl">
+                    <HcFormUpload :src="formModel.fileUrl" @upload="formItemUpload"/>
                 </el-form-item>
-                <el-form-item label="离职登记表:">
-                  <HcUploadFile
-                            ref="HcUploadFileRef"
-                                :options="UploadFileOptions"
-                                @progress="HcUploadFileProgress"
-                                @success="HcUploadFileSuccess"
-                                @change="HcUploadFileChange"
-                                drop
-                                style="width: 100%;"
-                            >
-                            <div class="accept-tip">支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)</div>
-                            <div class=" text-bold" v-show="infoData?.originalName">
-                               附件名称： {{ infoData?.originalName }}
-                            </div>
-                            
-                     </HcUploadFile>
+                <el-form-item label="离职登记表：" v-show="!formModel.fileUrl">
+                    <HcUploadFile ref="uploadFileRef" drop :options="uploadOptions" @success="uploadFileSuccess" class="w-full"/>
                 </el-form-item>
-              </el-form>
-   
-    </HcDialog>
-  </HcCard>
+            </el-form>
+        </HcDialog>
+
+    </HcCard>
 </template>
 
 <script setup>
-import {ref, watch} from  'vue'
-
-import {useRouter} from 'vue-router'
+import {ref, onActivated} from 'vue'
+import mainApi from "~api/people/contract";
 import {getTokenHeader} from "~src/api/request/header";
-import {getObjValue} from "js-fast-way"
-
-const router = useRouter()
+import {getuserList} from "~api/other";
+import {getObjValue, getArrValue, formValidate} from "js-fast-way"
+import {delMessage} from "~uti/tools";
 
+onActivated(() => {
+    getuserListApi()
+    getTableData()
+})
 
-const tableColumn = [
-    {key: 'name', name: '姓名'},
-    {key: 'key2', name: '部门'},
-    {key: 'key3', name: '职位'},
-    {key: 'key4', name: '离职日期'},
-    {key: 'key5', name: '离职原因'},
-    {key: 'key5', name: '离职登记表'},
-    {key: 'action', name: '操作',width:'150'}
+//获取用户下拉数据
+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: 3, userId: null,
     current: 1, size: 20, total: 0
 })
-const peopleoption=ref([
-    {name: '张三', key: '1'},
-    {name: '李四', key: '2'},
-])
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//重置搜索表单
+const resetClick = () => {
+    searchForm.value = {current: 1, size: 20, total: 0}
+}
+
 //分页被点击
 const pageChange = ({current, size}) => {
     searchForm.value.current = current
@@ -118,63 +106,115 @@ const pageChange = ({current, size}) => {
     getTableData()
 }
 
-const getTableData = () => {
+//表格参数
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'userId', name: '姓名'},
+    {key: 'createDept', name: '部门'},
+    {key: 'key1', name: '职位'},
+    {key: 'endDate', name: '离职日期'},
+    {key: 'desc', name: '离职原因'},
+    {key: 'fileUrl', name: '离职登记表'},
+    {key: 'action', name: '操作', width: '150'}
+]
 
+//获取表格数据
+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 searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//删除
+const delRowClick = (row) => {
+    delMessage(async () => {
+        const {error, code, msg} = await mainApi.remove({ids: row.id})
+        if (!error && code === 200) {
+            window.$message?.success(msg)
+            getTableData().then()
+        } else {
+            window.$message?.error(msg)
+        }
+    })
 }
 
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+//表单弹窗
+const formModal = ref(false)
+const formModalLoading = ref(false)
+
+//表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    userId: [{required: true, message: '请选择员工', trigger: 'change'}],
+    endDate: [{required: true, message: '请选择离职日期', trigger: 'change'}],
+    desc: [{required: true, message: '请输入离职原因', trigger: 'blur'}],
 }
-//编辑档案信息
-const editRowClick = (row) => {
-  importModal.value=true
-    // router.push({
-    //     name: 'people-archive-info',
-    //     query: {
-    //         id: row.id,
-    //         type: 'edit'
-    //     }
-    // })
+
+//新增
+const addRowClick = () => {
+    formModalLoading.value = false
+    formModel.value = {type: 3}
+    formModal.value = true
 }
-//入职登记弹窗
-const importModal=ref(false)
-const importModalClose=()=>{
-  importModal.value=false
-  infoData.value={}
+
+//编辑
+const editRowClick = (row) => {
+    formModalLoading.value = false
+    formModel.value = row
+    formModal.value = true
 }
-const formModel=ref({})
 
 //上传配置
-const UploadFileOptions = {
-    //此处设置header
+const uploadFileRef = ref(null)
+const uploadOptions = {
     headers: getTokenHeader(),
+    multiple: false,
 }
 
-// 文件上传进度
-const HcUploadFileProgress = (res) => {
-    console.log('文件上传进度', res)
+//上传文件
+const formItemUpload = () => {
+    uploadFileRef.value?.selectFile();
 }
-const infoData=ref({})
-const HcUploadFileRef=ref(null)
+
 // 文件上传成功的回调
-const HcUploadFileSuccess = (res) => {
-    const { originalName } = getObjValue(res.resData)
-    infoData.value.originalName = originalName
-    HcUploadFileRef.value?.setModalShow(false);
-   
+const uploadFileSuccess = ({resData}) => {
+    const { pdfUrl } = getObjValue(resData)
+    formModel.value.fileUrl = pdfUrl
+    uploadFileRef.value?.setModalShow(false);
+}
+
+
+//提交保存
+const formModalSave = async () => {
+    formModalLoading.value = true
+    const isForm = await formValidate(formRef.value)
+    if (!isForm) {
+        formModalLoading.value = false
+        return false
+    }
+    //发起请求
+    const {error, code, msg} = await mainApi.submit({
+        ...formModel.value,
+        type: 3 //合同类型
+    })
+    //判断状态
+    formModalLoading.value = false
+    if (!error && code === 200) {
+        window.$message?.success('提交成功')
+        formModalClose()
+        getTableData().then()
+    } else {
+        window.$message?.error(msg)
+    }
 }
 
-// 文件全部上传成功
-const HcUploadFileChange = () => {
-    console.log('文件全部上传成功')
+//关闭弹窗
+const formModalClose = () => {
+    formModal.value = false
+    formModalLoading.value = false
 }
 </script>
-<style lang='scss' scoped>
-</style>

src/views/people/entry.vue

@@ -36,42 +36,27 @@
         </template>
 
         <!--入职登记弹窗-->
-        <HcDialog bgColor="#ffffff" widths="42rem" isToBody :show="importModal" title="入职登记"
-                  @close="importModalClose" footer>
-            <el-form label-position="left" label-width="auto" :model="formModel" size="large">
-                <el-form-item label="姓名:">
-                    <el-input v-model="formModel.name" placeholder=""/>
+        <HcDialog bgColor="#ffffff" isToBody widths="42rem" :show="formModal" title="入职登记"
+                  :loading="formModalLoading" loadingText="保存中，请稍等" @close="formModalClose" @save="formModalSave"
+        >
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                <el-form-item label="员工姓名:" prop="userId">
+                    <el-select v-model="formModel.userId" block filterable>
+                        <el-option v-for="item in userList" :label="item.name" :value="item.id" />
+                    </el-select>
                 </el-form-item>
-                <el-form-item label="入职时间">
-                    <el-date-picker
-                        style="width: 100%;"
-                        v-model="formModel.time"
-                        type="date"
-                        placeholder="选择时间"
-                        size="large"
-                    />
+                <el-form-item label="入职时间" prop="startDate">
+                    <el-date-picker v-model="formModel.startDate" type="date" class="block" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                 </el-form-item>
-                <el-form-item label="入职登记表:">
-                    <HcUploadFile
-                        ref="HcUploadFileRef"
-                        :options="UploadFileOptions"
-                        @progress="HcUploadFileProgress"
-                        @success="HcUploadFileSuccess"
-                        @change="HcUploadFileChange"
-                        drop
-                        style="width: 100%;"
-                    >
-                        <div class="accept-tip">支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)
-                        </div>
-                        <div class=" text-bold" v-show="infoData?.originalName">
-                            附件名称： {{ infoData?.originalName }}
-                        </div>
-
-                    </HcUploadFile>
+                <el-form-item label="入职登记表:" v-if="formModel.fileUrl">
+                    <HcFormUpload :src="formModel.fileUrl" @upload="formItemUpload"/>
+                </el-form-item>
+                <el-form-item label="入职登记表:" v-show="!formModel.fileUrl">
+                    <HcUploadFile ref="uploadFileRef" drop :options="uploadOptions" @success="uploadFileSuccess" class="w-full"/>
                 </el-form-item>
             </el-form>
-
         </HcDialog>
+
     </HcCard>
 </template>
 
@@ -80,7 +65,7 @@ import {ref, onActivated} from 'vue'
 import mainApi from "~api/people/contract";
 import {getTokenHeader} from "~src/api/request/header";
 import {getuserList} from "~api/other";
-import {getObjValue, getArrValue} from "js-fast-way"
+import {getObjValue, getArrValue, formValidate} from "js-fast-way"
 import {delMessage} from "~uti/tools";
 
 onActivated(() => {
@@ -150,53 +135,79 @@ const delRowClick = (row) => {
     })
 }
 
+//表单弹窗
+const formModal = ref(false)
+const formModalLoading = ref(false)
+
+//表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    userId: [{required: true, message: '请选择员工', trigger: 'change'}],
+    startDate: [{required: true, message: '请选择入职时间', trigger: 'change'}],
+}
+
 //新增
 const addRowClick = () => {
-    importModal.value = true
+    formModalLoading.value = false
+    formModel.value = {type: 2}
+    formModal.value = true
 }
 
 //编辑
 const editRowClick = (row) => {
-    importModal.value = true
+    formModalLoading.value = false
+    formModel.value = row
+    formModal.value = true
 }
 
-
-
-
-
-
-//入职登记弹窗
-const importModal = ref(false)
-const importModalClose = () => {
-    importModal.value = false
-    infoData.value = {}
-}
-const formModel = ref({})
-
 //上传配置
-const UploadFileOptions = {
-    //此处设置header
+const uploadFileRef = ref(null)
+const uploadOptions = {
     headers: getTokenHeader(),
+    multiple: false,
 }
 
-// 文件上传进度
-const HcUploadFileProgress = (res) => {
-    console.log('文件上传进度', res)
+//上传文件
+const formItemUpload = () => {
+    uploadFileRef.value?.selectFile();
 }
-const infoData = ref({})
-const HcUploadFileRef = ref(null)
+
 // 文件上传成功的回调
-const HcUploadFileSuccess = (res) => {
-    const {originalName} = getObjValue(res.resData)
-    infoData.value.originalName = originalName
-    HcUploadFileRef.value?.setModalShow(false);
+const uploadFileSuccess = ({resData}) => {
+    const { pdfUrl } = getObjValue(resData)
+    formModel.value.fileUrl = pdfUrl
+    uploadFileRef.value?.setModalShow(false);
+}
 
+
+//提交保存
+const formModalSave = async () => {
+    formModalLoading.value = true
+    const isForm = await formValidate(formRef.value)
+    if (!isForm) {
+        formModalLoading.value = false
+        return false
+    }
+    //发起请求
+    const {error, code, msg} = await mainApi.submit({
+        ...formModel.value,
+        type: 2 //合同类型
+    })
+    //判断状态
+    formModalLoading.value = false
+    if (!error && code === 200) {
+        window.$message?.success('提交成功')
+        formModalClose()
+        getTableData().then()
+    } else {
+        window.$message?.error(msg)
+    }
 }
 
-// 文件全部上传成功
-const HcUploadFileChange = () => {
-    console.log('文件全部上传成功')
+//关闭弹窗
+const formModalClose = () => {
+    formModal.value = false
+    formModalLoading.value = false
 }
 </script>
-<style lang='scss' scoped>
-</style>