Skip to content

frontend / qqxb-self-service

Go to a project
Commit 048dc434 by lishengfu
Options

update

parents 51045660 1b9aafa4
Expand all
Inline Side-by-side
Showing with 740 additions and 0 deletions
src/assets/js/echarts.min.js 0 → 100644
This diff could not be displayed because it is too large.
src/router/employee/employee-router.ts
......@@ -37,5 +37,47 @@ export default [
path: '/archives',
name: 'Archives',
component: () => import("@/views/Archives.vue")
},
{
// 劳务派遣-选择派遣公司
path: '/chooseCompany',
name: 'ChooseCompany',
component: () => import("@/views/ChooseCompany.vue")
},
{
// 劳务派遣个人首页
path: '/index',
name: 'Index',
component: () => import("@/views/Index.vue")
},
{
// 劳务派遣-我上传的资料
path: '/information',
name: 'Information',
component: () => import("@/views/Information.vue")
},
{
// 劳务派遣-我上传的资料
path: '/informationEdit',
name: 'InformationEdit',
component: () => import("@/views/InformationEdit.vue")
},
{
// 劳务派遣-我上传的资料预览
path: '/informationPreview',
name: 'InformationPreview',
component: () => import("@/views/InformationPreview.vue")
},
{
// 劳务派遣-我的工资条
path: '/paySlips',
name: 'PaySlips',
component: () => import("@/views/PaySlips.vue")
},
{
// 劳务派遣-我的工资条
path: '/paySlipsMonth',
name: 'PaySlipsMonth',
component: () => import("@/views/PaySlipsMonth.vue")
}
]
\ No newline at end of file
src/views/ChooseCompany.vue 0 → 100644
<template>
<div class="main main-company" id="main_company">
<div class="company-item-box">
<p class="company-name" coId="id">full_name</p>
<img src="../assets/images/right_arrow.png" alt="进入派遣公司" title="进入派遣公司" />
</div>
</div>
</template>
<script>
import "../assets/css/labor.css";
export default {};
</script>
<style lang="less">
</style>
\ No newline at end of file
src/views/Index.vue 0 → 100644
<template>
<div class="main main-index" id="main_index">
<div class="info-card-box">
<div class="info-card-top">
<div class="info-card-top-left">
<h4>ce_full_name</h4>
<p>birthday</p>
</div>
<div class="info-card-top-right">
<img src="../assets/images/agent/123.jpg" alt="头像" title="头像" />
</div>
</div>
<div class="info-card-bottom">
<p>
<label>用工单位</label>
<span>ce_full_name</span>
</p>
<p>
<label>工作地点</label>
<span>work_address</span>
</p>
<p>
<label>工作职位</label>
<span>position</span>
</p>
<p>
<label>入职时间</label>
<span>employee_entry_date</span>
</p>
</div>
</div>
<div class="index-bottom-box">
<div class="close-box">
<img src="../assets/images/ic_unfold@2x.png" />
</div>
<a class="entrance">
<img src="../assets/images/archives_icon.png" alt="我的档案" title="我的档案" />
<div>
<h4>我的档案</h4>
<p>档案已确认，如果需要更改信息请联系客服</p>
<p>你的信息不完整，请先补充信息</p>
</div>
<img class="arrow" src="../assets/images/right_arrow.png" alt="arrow" title="arrow" />
</a>
<a class="entrance entrance-border">
<img src="../assets/images/information_icon.png" alt="我的资料" title="我的资料" />
<div>
<h4>我提交的资料</h4>
<p>你可查询上传的附件信息</p>
</div>
<img class="arrow" src="../assets/images/right_arrow.png" alt="arrow" title="arrow" />
</a>
<a class="entrance">
<img src="../assets/images/slips_icon.png" alt="我的工资条" title="我的工资条" />
<div>
<h4>我的工资条</h4>
<p>你可查询发放成功的工资记录</p>
</div>
<img class="arrow" src="../assets/images/right_arrow.png" alt="arrow" title="arrow" />
</a>
</div>
</div>
</template>
<script>
import "../assets/css/labor.css";
export default {};
</script>
<style lang="less">
body{
background-color: #FFFFFF;
}
.main-index {
padding-top: 0;
}
.info-card-box {
width: 100%;
height: 256px;
background: linear-gradient(
180deg,
rgba(51, 205, 139, 1) 0%,
rgba(25, 179, 112, 1) 100%
);
padding: 16px 20px 0 20px;
}
.info-card-top {
height: 60px;
}
.info-card-top-left {
float: left;
}
.info-card-top-left h4 {
color: #ffffff;
font-size: 24px;
font-weight: 600;
line-height: 33px;
}
.info-card-top-left p {
color: #ffffff;
font-size: 14px;
line-height: 20px;
margin-top: 7px;
}
.info-card-top-right {
float: right;
}
.info-card-top-right img {
width: 60px;
height: 60px;
border-radius: 90%;
}
.info-card-bottom {
margin-top: 40px;
}
.info-card-bottom p {
color: #d3f1e4;
font-size: 13px;
line-height: 18px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
}
.index-bottom-box {
padding: 0 16px;
background-color: #ffffff;
border-radius: 12px 12px 0px 0px;
margin-top: -24px;
}
.entrance-border {
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
}
.close-box {
width: 100%;
height: 24px;
padding-top: 10px;
cursor: pointer;
}
.close-box img {
display: block;
width: 32px;
height: 4px;
margin: 0 auto;
}
</style>
\ No newline at end of file
src/views/Information.vue 0 → 100644
<template>
<div class="main main-information" id="main_information">
<div class="info-box">
<div class="info-item">
<div class="info-picture">
<img class="uploaded" />
</div>
<p>
<span>title</span>
</p>
</div>
</div>
</div>
</template>
<script>
import "../assets/css/labor.css";
export default {};
</script>
<style lang="less">
</style>
\ No newline at end of file
src/views/InformationEdit.vue 0 → 100644
<template>
<div class="main main-information main-information-edit" id="main_information_edit">
<p>
请先补充 我的档案 ，如已补充完成，请下载并打印
<a>入职登记表.pdf</a>，在打印文件上签字，然后拍照上传。
</p>
<div class="info-box">
<div class="info-item">
<div class="info-picture">
<!-- <img fileId="{{= value.edf_id}}" class="uploaded" src="{{= value.attachment}}" alt="{{= value.title}}" title="{{= value.title}}"> -->
<img class="edit" src="/resources/images/add_information.png" alt="上传资料" title="上传资料" />
<input fileType title class="file-input" type="file" />
</div>
<p>
<span>title</span>
<img
class="delete-file"
fileId="edf_id"
src="../assets/images/delete.png"
alt="删除"
title="删除"
/>
</p>
</div>
</div>
<a class="commit">提交信息</a>
</div>
</template>
<script>
import "../assets/css/labor.css";
export default {};
</script>
<style lang="less">
</style>
\ No newline at end of file
src/views/InformationPreview.vue 0 → 100644
<template>
<div class="main main-information" id="information_preview">
<div class="preview-box">
<img src alt title />
</div>
<a href class="commit donwload">下载图片</a>
<a class="commit reupload">重新上传</a>
<input fileId="fileId" type="file" style="display:none;" />
</div>
</template>
<script>
import "../assets/css/labor.css";
export default {};
</script>
<style lang="less">
</style>
\ No newline at end of file
src/views/PaySlips.vue 0 → 100644
<template>
<div class="main main-paySlips">
<div class="slips-top"></div>
<div class="slips-mid">
<ul id="select">
<li>
<div class="select-head">
<span class="select-head-cont"></span>
<span class="select-icon">
<img src="../assets/images/triangle.png" alt="option" title="option" />
</span>
</div>
</li>
</ul>
<ul class="option">
<li class="option-item" optionVal="2020">2020</li>
<li class="option-item" optionVal="2019">2019</li>
</ul>
<div id="chart" style="height: 20rem;width: 100%"></div>
</div>
<div class="slips-bottom">
<h3>收入记录</h3>
<hr />
<div class="box2" id="main-content">
<div class="child">
<span class="year font1">year</span>
<div class="data">
<div class="month-list">
<div class="month">
<span class="font1">month月</span>
<span></span>
<span class="font1">sum</span>
</div>
<div class="slary">
<a href class="detail">
<span class="font2">工资 | abbr_name</span>
<span></span>
<span class="font2">current_real_wage</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import "../assets/css/labor.css";
import "../assets/js/jquery.min.js";
import "../assets/js/echarts.min.js";
var myChart = echarts.init(document.getElementById("chart"));
var dataAxis = [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12"
];
var columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10000];
var yMax = 15000;
var dataShadow = [];
var date = new Date();
var cur_year = date.getFullYear();
for (var i = 0; i < columnData.length; i++) {
dataShadow.push(yMax);
}
option = {
xAxis: {
offset: 10,
name: "元",
nameLocation: "start",
nameTextStyle: {
padding: [45, -10, 0, 0]
},
data: dataAxis,
axisLabel: {
inside: false,
textStyle: {
color: "#BABFC2"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
name: "月/",
nameLocation: "start",
nameTextStyle: {
padding: [2, 55, 0, 0]
},
axisLine: {
show: false
},
splitLine: {
// grid 分割线设置
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#BABFC2"
}
}
},
grid: {
bottom: "30%",
top: "10%",
width: "82%",
left: "15%"
},
// dataZoom: [
// {
// type: 'inside'
// }
// ],
series: [
{
// For shadow
type: "bar",
itemStyle: {
normal: { color: "rgba(0,0,0,0.05)" }
},
barGap: "-100%",
barCategoryGap: "40%",
data: dataShadow,
animation: false
},
{
type: "bar",
barWidth: 8,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#33CD8B" },
{ offset: 0.5, color: "#22BD7A" },
{ offset: 1, color: "#22BD7A" }
])
},
emphasis: {
barBorderRadius: [50, 50, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#33CD8B" },
{ offset: 0.5, color: "#22BD7A" },
{ offset: 1, color: "#22BD7A" }
]),
label: {
show: true,
position: "top",
rich: {},
textStyle: {
// color: '#FC8936',
color: "#FFFFFF"
},
backgroundColor: {
image: "../assets/images/echart_backgorund.png"
},
padding: [10, 12, 12, 8]
}
}
},
data: columnData
}
]
};
function init() {
option.series[1].data = columnData;
myChart.setOption(option);
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 12
});
}
window.onresize = function() {
myChart.resize();
};
//select
//初始化赋值
$(".select-head .select-head-cont").html(
$(".option li")
.eq(0)
.html()
);
$(".option li")
.eq(0)
.addClass("click_bg")
.siblings()
.removeClass("click_bg");
//点击弹出下拉列表
$(".select-head").click(function(event) {
event.stopPropagation(); //阻止冒泡~必须条件！！
$(".option").slideToggle();
//箭头动画
if ($(".select-icon").hasClass("rotate")) {
$(".select-icon")
.addClass("rotate1")
.removeClass("rotate");
} else {
$(".select-icon")
.removeClass("rotate1")
.addClass("rotate");
}
});
//点击下拉菜单之外隐藏列表
$(document).click(function(event) {
$(".option").hide();
$(".select-icon")
.addClass("rotate1")
.removeClass("rotate");
});
function transData(data, cur_year) {
columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
let obj = [];
let yearList = [];
for (const item in data) {
if (data.hasOwnProperty(item)) {
const element = data[item];
if (element.pay_time) {
const year = element.pay_time.substr(0, 4);
if (year == cur_year) {
yearList.push(year);
}
}
}
}
yearList = [...new Set(yearList)];
if (yearList.length < 1) {
return;
}
for (const year of yearList) {
const o = { year: year, list: [] };
obj.push(o);
}
for (const yObj of obj) {
const oy = yObj.year;
const set = new Set();
for (const item of data) {
const iy = item.pay_time.substr(0, 4);
if (oy === iy) {
const month = item.pay_time.substr(5, 2);
set.add(month);
}
}
set.forEach(m => {
yObj.list.push({ month: m, sum: 0, list: [] });
});
}
for (const y of obj) {
const yl = y.list;
for (const m of yl) {
const month = m.month;
let sum = 0;
for (const item of data) {
if (item.pay_time.indexOf(month) > -1) {
m.list.push(item);
sum += item.current_real_wage;
}
}
let mon = parseInt(month);
columnData[mon] = sum;
m.sum = sum;
}
}
return obj;
}
export default {};
</script>
<style lang="less">
.pay-item-box2 {
width: 100%;
}
.pay-item-child {
width: 287px;
float: right;
padding: 20px 0;
border-bottom: 1px solid #95989e;
}
.pay-item-month {
position: relative;
display: flex;
justify-content: space-between;
}
.pay-item-month span {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.pay-item-year {
position: absolute;
top: 0;
left: -60px;
}
.pay-item-detail {
display: flex;
justify-content: space-between;
}
.pay-item-detail span {
color: #95989e;
font-size: 14px;
line-height: 14px;
margin-top: 16px;
}
.font1 {
font-size: 16px;
font-weight: 600;
color: #3d4047;
}
.font2 {
font-size: 14px;
color: #95989e;
}
.child {
display: grid;
grid-template-columns: 72px auto;
}
.month-list {
border-bottom: 1px #95989e dashed;
margin-bottom: 20px;
padding-bottom: 4px;
}
.month {
display: grid;
grid-template-columns: 162px auto 62px;
justify-items: left;
margin-bottom: 16px;
}
.slary a {
display: grid;
grid-template-columns: 162px auto 62px;
justify-items: left;
margin-bottom: 16px;
}
</style>
\ No newline at end of file
src/views/PaySlipsMonth.vue 0 → 100644
<template>
<div class="main main-paySlips main-paySlips-month" id="main_index">
<div class="slips-mid">
<div class="slips-mid-top">
<p>实发工资(元)</p>
<h3>
current_real_wage
<span>.00</span>
</h3>
</div>
<div class="slips-mid-bottom">
<p>
<label>收入来源</label>
<span>abbr_name</span>
</p>
<p>
<label>保存账户</label>
<span>bank_no</span>
</p>
<p>
<label>发放时间</label>
<span>pay_time</span>
</p>
</div>
</div>
<div class="slips-bottom">
<h3>工资明细</h3>
<hr />
<div class="pay-detail-box">
<p>
<label>本次收入</label>
<!-- <span>current_real_wage - current_base_old_insurance - current_base_health_insurance - current_unemployment_insurance - current_fund - current_tax_deduction</span> -->
<span>1000.00</span>
</p>
<p>
<label>养老保险</label>
<span>current_base_old_insurance</span>
</p>
<p>
<label>医疗保险</label>
<span>current_base_health_insurance</span>
</p>
<p>
<label>失业保险</label>
<span>current_unemployment_insurance</span>
</p>
<p>
<label>住房公积金</label>
<span>current_fund</span>
</p>
<p>
<label>代扣个税</label>
<span>current_tax_deduction</span>
</p>
<p class="wages">
<label>实发工资</label>
<span>current_real_wage</span>
</p>
</div>
</div>
</div>
</template>
<script>
import "../assets/css/labor.css";
export default {};
</script>
<style lang="less">
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment