薪酬管理

src/api/modules/people/salary.js

@@ -18,11 +18,11 @@ export default {
         }, msg);
     },
     //导出模板
-    async exportTemplate(form, msg = true) {
+    async exportTemplate() {
         return httpApi({
             url: '/api/blade-control/userpayinfo/export-template',
             method: 'get',
-            params: form
-        }, msg);
+            params: {}
+        }, false);
     },
 }

src/api/request/httpApi.js

@@ -18,10 +18,16 @@ export const httpApi = async (obj, message = true) => {
 const getResData = async (response, error = false) => {
     return new Promise((resolve) => {
         const {headers, data, config} = response
-        const headersx = getObjValue(headers), resData = getObjValue(data);
+        const resData = getObjValue(data)
         const httpData = {
-            response, res: resData, data: resData?.data, code: resData?.code, msg: resData?.msg, status: response?.status,
-            disposition: headersx['content-disposition'], message: getMsgVal(response), error: error
+            response,
+            res: data,
+            data: resData?.data,
+            code: resData?.code,
+            msg: resData?.msg,
+            status: response?.status,
+            disposition: headers['content-disposition'],
+            message: getMsgVal(response), error: error
         }
         //处理延迟响应
         if (!error) {

src/views/people/salary.vue

@@ -2,12 +2,12 @@
     <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 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="w-36 ml-2">
-                <el-date-picker v-model="searchForm.month" class="block" size="large" type="month" @change="datePickerChange" placeholder="选择月份"/>
+                <el-date-picker v-model="searchForm.month" class="block" size="large" type="month" format="YYYY-MM" value-format="YYYY-MM"/>
             </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
@@ -32,11 +32,9 @@
                 <span>导入数据</span>
             </el-button>
         </template>
-        <HcTable :column="tableColumn" :datas="tableData">
-
-        </HcTable>
+        <HcTable border :isIndex="false" :loading="tableLoading" :column="tableColumn" :datas="tableData"/>
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+            <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
         <!--导入数据弹窗-->
         <HcDialog bgColor="#ffffff" widths="34rem" isToBody :show="importModal" title="导入数据"
@@ -79,59 +77,41 @@
 </template>
 
 <script setup>
-import {ref, watch} from 'vue'
-import dayjs from "dayjs"
-import 'dayjs/locale/zh-cn'
-import {useRouter} from 'vue-router'
+import {onActivated, ref, watch} from 'vue'
+import {getuserList} from "~api/other";
+import mainApi from "~api/people/salary";
 import {getTokenHeader} from "~src/api/request/header";
+import {downloadBlob, getArrValue} from "js-fast-way";
 
-const router = useRouter()
-
-//下拉日期选择
-const datePickerChange = (val) => {
-    console.log(val, 'val');
-    const toDayJs = dayjs(val);
-    searchForm.value.month = toDayJs.format('YYYY-MM')
+onActivated(() => {
+    getuserListApi()
+    getTableData()
+})
 
+//获取用户下拉数据
+const userList = ref([])
+const getuserListApi = async () => {
+    const {data} = await getuserList()
+    userList.value = getArrValue(data)
 }
-const tableColumn = [
-    {key: 'name', name: '姓名'},
-    {key: 'key2', 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: '其他扣款'},
-    {key: 'key18', name: '应发工资'},
-    {key: 'key19', name: '代扣个人应交社保'},
-    {key: 'key20', name: '代扣代缴个税'},
-    {key: 'key21', name: '实发工资'},
-    {key: 'key22', name: '备注'},
 
 
-]
-const tableData = ref([
-    {name: '名称1', id: 1},
-    {name: '名称2',},
-    {name: '名称3',}
-])
 const searchForm = ref({
-    name: '',
+    userId: null, month: 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
@@ -139,20 +119,53 @@ const pageChange = ({current, size}) => {
     getTableData()
 }
 
-const getTableData = () => {
+//表格参数
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'userName', name: '姓名', width: 100, align: 'center'},
+    {key: 'key2', name: '应出勤天数', width: 100, align: 'center'},
+    {key: 'key4', name: '实际出勤天数', width: 110, align: 'center'},
+    {key: 'yearDays', name: '年假', width: 80, align: 'center'},
+    {key: 'key6', name: '调休假', width: 80, align: 'center'},
+    {key: 'sickLeaveDays', name: '病假', width: 80, align: 'center'},
+    {key: 'absenceDays', name: '事假', width: 80, align: 'center'},
+    {key: 'basicSalary', name: '基本工资', width: 100, align: 'center'},
+    {key: 'postSalary', name: '岗位工资', width: 100, align: 'center'},
+    {key: 'meritSalary', name: '绩效工资', width: 100, align: 'center'},
+    {key: 'bonusSalary', name: '奖励', width: 100, align: 'center'},
+    {key: 'mealWance', name: '伙食补贴', width: 100, align: 'center'},
+    {key: 'otherWance', name: '其他补贴', width: 100, align: 'center'},
+    {key: 'attendDuction', name: '考勤扣款', width: 100, align: 'center'},
+    {key: 'key16', name: '事假扣款', width: 100, align: 'center'},
+    {key: 'otherDuction', name: '其他扣款', width: 100, align: 'center'},
+    {key: 'grossPay', name: '应发工资', width: 100, align: 'center'},
+    {key: 'personalTax', name: '代扣个人应交社保', width: 140, align: 'center'},
+    {key: 'socialSec', name: '代扣代缴个税', width: 120, align: 'center'},
+    {key: 'netSalary', name: '实发工资', width: 100, align: 'center'},
+    {key: 'desc', name: '备注', minWidth: 140, align: 'center'},
+]
 
+//获取表格数据
+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 downloadXlsx = async () => {
+    const {error, disposition, res} = await mainApi.exportTemplate()
+    if (!error && disposition) {
+        downloadBlob(res, disposition)
+    } else {
+        window.$message?.error('数据异常')
+    }
 }
 
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
-}
+
 const defaultTime = ref([
     new Date(2000, 1, 1, 0, 0, 0),
     new Date(2000, 2, 1, 23, 59, 59),
@@ -163,10 +176,7 @@ const importModalClose = () => {
     importModal.value = false
 }
 const formModel = ref({})
-//下载模板
-const downloadXlsx = () => {
 
-}
 const toImportTempClick = () => {
     importModal.value = true