10-12lhj

src/components/Finance/Payroll.vue

@@ -0,0 +1,274 @@
+<template>
+    <div>
+        <div class="payroll-all">
+            <div class="payroll-head">
+                <div class="payroll-head-li">
+                    <label>团组名称:</label>
+                    <el-select @change="Receivables" v-model="value" filterable placeholder="请选择">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.id"
+                        :label="item.groupName"
+                        :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div class="payroll-head-li">
+                    <el-button type="primary">成都公司工资单</el-button>
+                    <el-button type="primary">四川公司工资单</el-button>
+                    <el-button type="primary">纽茵公司工资单</el-button>
+                </div>
+            </div>
+            <div class="payroll-table">
+                <template>
+                    <el-table
+                    :data="tableData"
+                    border
+                    style="width: 100%">
+                        <el-table-column
+                            prop="date"
+                            label="年月"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="员工"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="起止日期"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="应发合计	"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="扣款合计"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="税前合计	"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="代缴个税"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="税后合计"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="操 作">
+                            <el-button type="text" @click="dialogFormVisible = true">Dialog</el-button>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </div>
+            <el-dialog top="3.5vh" title="薪资详细信息" :visible.sync="dialogFormVisible">
+                <el-form :model="form">
+                    <div class="payroll-inif">
+                        <el-form-item label="年月" :label-width="formLabelWidth">
+                            <el-date-picker v-model="form.name" size="medium" type="month" placeholder="选择月"></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="工资日期起" :label-width="formLabelWidth">
+                            <el-date-picker v-model="form.region" size="medium" type="date" placeholder="选择日期"></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="工资日期止" :label-width="formLabelWidth">
+                            <el-date-picker v-model="form.region" size="medium" type="date" placeholder="选择日期"></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="基本工资" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="绩效工资" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="岗位津贴" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="服装洗理补贴" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="通讯补贴" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="交通补贴" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="保密费" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="操作奖金" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="其他补贴" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="部门集体团建费" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="过节费" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="代扣保险" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="代扣公积金" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="餐补" :label-width="formLabelWidth">
+                            <el-input-number :precision="2" size="medium" :controls="false" v-model="form.region"></el-input-number>
+                        </el-form-item>
+                    </div>
+                    <div class="leave-inif">
+                        <el-form-item label="事假" :label-width="formLabelWidth">
+                            <span>0.00 (共 0 小时)</span>
+                        </el-form-item>
+                        <el-form-item label="病假" :label-width="formLabelWidth">
+                            <span>0.00 (共 0 小时)</span>
+                        </el-form-item>
+                        <el-form-item label="迟到" :label-width="formLabelWidth">
+                            <span>0.00 (30分钟以下共次，30分钟以上共次，60分钟以上共次，2小时以上共次)</span>
+                        </el-form-item>
+                        <el-form-item label="早退" :label-width="formLabelWidth">
+                            <span>0.00 (10分钟以下共次，10-30分钟共次，30-60分钟共次，1小时以上共次)</span>
+                        </el-form-item>
+                        <el-form-item label="旷工" :label-width="formLabelWidth">
+                            <span>0.00 (共 0 小时)</span>
+                        </el-form-item>
+                        <el-form-item label="打卡" :label-width="formLabelWidth">
+                            <span>0.00 (未打卡共次)</span>
+                        </el-form-item>
+                    </div>
+                    <div class="salary-payments">
+                        <el-form-item label="其他扣款" :label-width="formLabelWidth">
+                            <span>0.00</span>
+                        </el-form-item>
+                        <el-form-item label="应发合计" :label-width="formLabelWidth">
+                            <span>0.00</span>
+                        </el-form-item>
+                        <el-form-item label="扣款合计" :label-width="formLabelWidth">
+                            <span>0.00</span>
+                        </el-form-item>
+                        <el-form-item label="税前合计" :label-width="formLabelWidth">
+                            <span>0.00</span>
+                        </el-form-item>
+                        <el-form-item label="税后合计" :label-width="formLabelWidth">
+                            <span>0.00</span>
+                        </el-form-item>
+                    </div>
+                    <div class="remark-box">
+                        <el-form-item label="备注" :label-width="formLabelWidth">
+                            <el-input :rows="1" type="textarea" v-model="form.region"></el-input>
+                        </el-form-item>
+                    </div>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+        },
+        formLabelWidth: '120px'
+      }
+    }
+}
+</script>
+<style>
+.payroll-all{
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 0 5px #0005;
+    border-radius: 10px;
+    height: 100%;
+    min-height: 840px;
+}
+.payroll-head-li label{
+    color: #606266;
+    font-size: 15px;
+    font-weight: 600;
+}
+.payroll-head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+.payroll-inif{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0 80px;
+}
+.payroll-inif .el-form-item{
+    width: 350px;
+}
+.payroll-inif .el-input-number--medium{
+    width: 218px;
+}
+.payroll-inif .el-form-item{
+    margin-bottom: 2px;
+}
+.payroll-inif .el-input--medium .el-input__inner{
+    text-align: left;
+}
+.leave-inif{
+    margin: 0 80px;
+}
+.leave-inif .el-form-item{
+    margin-bottom: 0px;
+}
+.salary-payments{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0 80px;
+}
+.salary-payments .el-form-item{
+    margin-bottom: 0px;
+    font-size: 17px;
+    font-weight: 600;
+}
+.payroll-all .el-dialog__body{
+    padding: 16px 20px;
+}
+.remark-box{
+    margin: 0 80px;
+}
+</style>

src/router/index.js

@@ -75,6 +75,8 @@ import invitationLetter from '@/components/Resource/invitationLetter'
 import EntryDetails from '@/components/OP/EntryDetails'
 import TicketBlackCode from '@/components/Resource/TicketBlackCode'
 import OpTicketBlackCode from '@/components/Resource/OpTicketBlackCode'
+import Payroll from '@/components/Finance/Payroll';
+
 
 Vue.use(Router)
 
@@ -438,12 +440,14 @@ export default new Router({
           name: 'EntryDetails',
           component: EntryDetails
         },
+        {
+          path: '/home/Payroll',
+          name: 'Payroll',
+          component: Payroll
+        },
       ]
     },
     {
-
-
-
       path: '/Enroll',
       name: 'Enroll',
       component: Enroll