|
|
@@ -1,10 +1,180 @@
|
|
|
|
|
|
<template>
|
|
|
- <div >111</div>
|
|
|
+ <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"/>
|
|
|
+ </el-select>
|
|
|
+ </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">
|
|
|
+ <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" >
|
|
|
+ <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>
|
|
|
+
|
|
|
+ </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="请输入"/>
|
|
|
+ </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>
|
|
|
+ <el-form-item label="离职原因:">
|
|
|
+ <el-input v-model="formModel.reason" placeholder="请输入"/>
|
|
|
+ </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>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </HcDialog>
|
|
|
+ </HcCard>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {ref, watch} from 'vue'
|
|
|
+
|
|
|
+import {useRouter} from 'vue-router'
|
|
|
+import {getTokenHeader} from "~src/api/request/header";
|
|
|
+import {getObjValue} from "js-fast-way"
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+
|
|
|
+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 tableData = ref([
|
|
|
+ {name: '名称1',id:1},
|
|
|
+ {name: '名称2', },
|
|
|
+ {name: '名称3', }
|
|
|
+])
|
|
|
+const searchForm = ref({
|
|
|
+ name: '',
|
|
|
+ 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 = () => {
|
|
|
+ searchForm.value.current = 1;
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//重置搜索表单
|
|
|
+const resetClick = () => {
|
|
|
+ searchForm.value = {current: 1, size: 20, total: 0}
|
|
|
+}
|
|
|
+//编辑档案信息
|
|
|
+const editRowClick = (row) => {
|
|
|
+ importModal.value=true
|
|
|
+ // router.push({
|
|
|
+ // name: 'people-archive-info',
|
|
|
+ // query: {
|
|
|
+ // id: row.id,
|
|
|
+ // type: 'edit'
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+}
|
|
|
+//入职登记弹窗
|
|
|
+const importModal=ref(false)
|
|
|
+const importModalClose=()=>{
|
|
|
+ importModal.value=false
|
|
|
+ infoData.value={}
|
|
|
+}
|
|
|
+const formModel=ref({})
|
|
|
+
|
|
|
+//上传配置
|
|
|
+const UploadFileOptions = {
|
|
|
+ //此处设置header
|
|
|
+ headers: getTokenHeader(),
|
|
|
+}
|
|
|
+
|
|
|
+// 文件上传进度
|
|
|
+const HcUploadFileProgress = (res) => {
|
|
|
+ console.log('文件上传进度', res)
|
|
|
+}
|
|
|
+const infoData=ref({})
|
|
|
+const HcUploadFileRef=ref(null)
|
|
|
+// 文件上传成功的回调
|
|
|
+const HcUploadFileSuccess = (res) => {
|
|
|
+ const { originalName } = getObjValue(res.resData)
|
|
|
+ infoData.value.originalName = originalName
|
|
|
+ HcUploadFileRef.value?.setModalShow(false);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 文件全部上传成功
|
|
|
+const HcUploadFileChange = () => {
|
|
|
+ console.log('文件全部上传成功')
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
</style>
|
