|
@@ -0,0 +1,155 @@
|
|
|
+<template>
|
|
|
+ <div class="oa-sys-list-view">
|
|
|
+ <div class="title">薪资管理</div>
|
|
|
+ <div class="searchBox">
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">月份:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.date"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ :clearable="false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="dept-and-user">
|
|
|
+ <DeptAndUserSelect :deptOnChange="deptOnChange" :userOnChange="userOnChange" />
|
|
|
+ </div>
|
|
|
+ <div class="from">
|
|
|
+ <div class="btnBox">
|
|
|
+ <el-button type="primary" style="background: #3485ff" @click="onSearchHandle">
|
|
|
+ <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
|
|
|
+ 查询</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" style="background: #3485ff" @click="openModel">
|
|
|
+ 导入工资表</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" style="background: #3485ff" @click="() => {}">
|
|
|
+ 模版下载</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <TemplateImport />
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in infoList" :key="index" class="mr-40px">
|
|
|
+ <p>{{ item.name }}:</p>
|
|
|
+ <h4 class="font-size-18px">{{ item.num.toFixed(2) }}</h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tableBox">
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="[]" style="width: 100%">
|
|
|
+ <el-table-column label="序号" width="60">
|
|
|
+ <template #default="scope">{{ scope.$index + 1 }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="dept" label="部门" />
|
|
|
+ <el-table-column prop="name" label="姓名" />
|
|
|
+ <el-table-column prop="JBGZ" label="基本工资 单位:元" width="100" />
|
|
|
+ <el-table-column prop="JXGZ" label="绩效工资 单位:元" width="100" />
|
|
|
+ <el-table-column prop="YDJX" label="绩效考核 单位:元" width="100" />
|
|
|
+ <el-table-column prop="CT" label="餐贴 单位:元" />
|
|
|
+ <el-table-column prop="GWBT" label="高温补贴 单位:元" width="100" />
|
|
|
+ <el-table-column prop="other" label="其他(含加班费)" />
|
|
|
+ <el-table-column prop="KQKK" label="考勤扣款 单位:元" width="100" />
|
|
|
+ <el-table-column prop="YFGG" label="应发工资 单位:元" width="100" />
|
|
|
+ <el-table-column prop="SBJS" label="社保代扣基数 单位:元" />
|
|
|
+ <el-table-column prop="GJJJS" label="公积金代扣基数 单位:元" />
|
|
|
+ <el-table-column prop="YLJ" label="养老险 单位:元" />
|
|
|
+ <el-table-column prop="YLY" label="医疗险 单位:元" />
|
|
|
+ <el-table-column prop="SYX" label="失业险 单位:元" />
|
|
|
+ <el-table-column prop="GJJ" label="公积金 单位:元" />
|
|
|
+ <el-table-column prop="YXKC" label="允许扣除 单位:元" width="100" />
|
|
|
+ <el-table-column prop="YJGS" label="应缴个税 单位:元" width="100" />
|
|
|
+ <el-table-column prop="SFGZ" label="实发工资 单位:元" width="100" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pageBox">
|
|
|
+ <el-pagination
|
|
|
+ :page-size="20"
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="pageTotal"
|
|
|
+ :current-page="pageNo"
|
|
|
+ @current-change="currentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import moment from 'moment'
|
|
|
+import DeptAndUserSelect from '@/components/DeptAndUserSelect/index.vue'
|
|
|
+import TemplateImport from '../components/TemplateImport.vue'
|
|
|
+import PubsubService from '@/utils/PubsubService'
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 薪资管理
|
|
|
+ */
|
|
|
+const queryParams = reactive<any>({
|
|
|
+ date: moment().format('YYYY-MM'),
|
|
|
+ dept: '',
|
|
|
+ user: ''
|
|
|
+})
|
|
|
+const openModel = () => {
|
|
|
+ PubsubService.publish('TemplateImport-showDialog', () => {})
|
|
|
+}
|
|
|
+const pageNo = ref(1)
|
|
|
+const pageTotal = ref(0)
|
|
|
+const infoList: any = ref([
|
|
|
+ {
|
|
|
+ name: '应发总人数',
|
|
|
+ num: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '应发总金额',
|
|
|
+ num: 0
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 部门及人员变化时触发
|
|
|
+const deptOnChange = (val: any) => {
|
|
|
+ console.log('deptOnChange', val)
|
|
|
+ queryParams.dept = val
|
|
|
+}
|
|
|
+const userOnChange = (val: any) => {
|
|
|
+ console.log('deptOnChange', val)
|
|
|
+ queryParams.user = val
|
|
|
+}
|
|
|
+
|
|
|
+// 查询
|
|
|
+const onSearchHandle: () => void = () => {
|
|
|
+ console.log('queryParams', queryParams)
|
|
|
+}
|
|
|
+
|
|
|
+// 切换页面
|
|
|
+const currentChange = (page) => {
|
|
|
+ pageNo.value = page
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.oa-sys-list-view {
|
|
|
+ .title {
|
|
|
+ height: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #121518;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .formSpan {
|
|
|
+ width: auto !important;
|
|
|
+ }
|
|
|
+ .dept-and-user {
|
|
|
+ width: 560px;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ :deep(.el-form-item) {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|