441 lines
10 KiB
Vue
441 lines
10 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="content-top" :style="'height:'+statusBarHeight+'px'" >
|
||
|
|
<retuntop :isshow='true' :name='name' :style="'padding-top:'+(statusBarHeight-35)+'px'" />
|
||
|
|
</view>
|
||
|
|
<view :style="'height:'+statusBarHeight+'px'">
|
||
|
|
</view>
|
||
|
|
<view class="content-middle">
|
||
|
|
<form report-submit='true'>
|
||
|
|
<view class='merchantsSettled' >
|
||
|
|
<view class='list'style="padding-bottom: 30rpx;">
|
||
|
|
<view class="item" style="border-bottom: 1px solid #eee;">
|
||
|
|
<view class="uni-list">
|
||
|
|
<view class="uni-list-cell">
|
||
|
|
<view class="uni-list-cell-db acea-row row-middle">
|
||
|
|
<text class="item-name">请假类型</text>
|
||
|
|
|
||
|
|
<picker @change="bindPickerChange1" :value="index1" :range="storeTypeArr"
|
||
|
|
range-key="type_name">
|
||
|
|
<input placeholder="请选择请假类型" type="text" disabled readonly
|
||
|
|
v-model="mer_storeType">
|
||
|
|
<view v-if="mer_storeType" @tap.stop="mer_storeType=''"
|
||
|
|
class="iconfont icon-guanbi2"></view>
|
||
|
|
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="acea-row row-middle">
|
||
|
|
<text class="item-name">开始时间</text>
|
||
|
|
<input placeholder="请选择开始时间" type="text" disabled readonly v-model="mer_storeType">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="acea-row row-middle">
|
||
|
|
<text class="item-name">结束时间</text>
|
||
|
|
<input placeholder="请选择结束时间" type="text" disabled readonly v-model="mer_storeType">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item">
|
||
|
|
<view class="acea-row row-middle">
|
||
|
|
<text class="item-name">请假工时</text>
|
||
|
|
<input placeholder="请选择请假工时" type="text" disabled readonly v-model="mer_storeType">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="acea-row row-middle">
|
||
|
|
<text class="item-name">请假事由</text>
|
||
|
|
<input placeholder="请选择请假事由" type="text" disabled readonly v-model="mer_storeType">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item no-border" style="background: #F7F7F7;padding-left: 20rpx;padding-bottom: 50rpx;">
|
||
|
|
<view class='acea-row row-middle'>
|
||
|
|
<text class="item-name">上传附件</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</form>
|
||
|
|
<form report-submit='true' >
|
||
|
|
<view class='merchantsSettled' style="margin-top: 30rpx;">
|
||
|
|
<view class='list'style="padding-bottom: 30rpx;">
|
||
|
|
<view class="item" style="border-bottom: 1px solid #eee;">
|
||
|
|
<view class="uni-list">
|
||
|
|
<view class="uni-list-cell">
|
||
|
|
<view class="uni-list-cell-db acea-row row-middle">
|
||
|
|
<text class="item-name">选择审批流程:</text>
|
||
|
|
|
||
|
|
<picker @change="bindPickerChange1" :value="index1" :range="storeTypeArr"
|
||
|
|
range-key="type_name">
|
||
|
|
<input placeholder="请选择" type="text" disabled readonly style="width: 200rpx;"
|
||
|
|
v-model="mer_storeType">
|
||
|
|
<view v-if="mer_storeType" @tap.stop="mer_storeType=''"
|
||
|
|
class="iconfont icon-guanbi2"></view>
|
||
|
|
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" style="border-bottom: 1px solid #eee;">
|
||
|
|
<view class="uni-list">
|
||
|
|
<view class="uni-list-cell">
|
||
|
|
<view class="uni-list-cell-db acea-row row-middle">
|
||
|
|
<text class="item-name">审核人:</text>
|
||
|
|
|
||
|
|
<picker @change="bindPickerChange1" :value="index1" :range="storeTypeArr"
|
||
|
|
range-key="type_name">
|
||
|
|
<input placeholder="请选择审核人" type="text" disabled readonly style="width: 200rpx;"
|
||
|
|
v-model="mer_storeType">
|
||
|
|
<view v-if="mer_storeType" @tap.stop="mer_storeType=''"
|
||
|
|
class="iconfont icon-guanbi2"></view>
|
||
|
|
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" style="border-bottom: 1px solid #eee;">
|
||
|
|
<view class="uni-list">
|
||
|
|
<view class="uni-list-cell">
|
||
|
|
<view class="uni-list-cell-db acea-row row-middle">
|
||
|
|
<text class="item-name">抄送人:</text>
|
||
|
|
|
||
|
|
<picker @change="bindPickerChange1" :value="index1" :range="storeTypeArr"
|
||
|
|
range-key="type_name">
|
||
|
|
<input placeholder="请选择抄送人" type="text" disabled readonly style="width: 200rpx;"
|
||
|
|
v-model="mer_storeType">
|
||
|
|
<view v-if="mer_storeType" @tap.stop="mer_storeType=''"
|
||
|
|
class="iconfont icon-guanbi2"></view>
|
||
|
|
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<view class="content-bottom">
|
||
|
|
<view class="content-bottom-one">
|
||
|
|
重置
|
||
|
|
</view>
|
||
|
|
<view class="content-bottom-two">
|
||
|
|
立即提交
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<w-picker :visible.sync="visible" mode="date" startYear="2017" endYear="2099" value="2020-04-07" :current="true"
|
||
|
|
fields="day" @confirm="onConfirm($event,'date')" @cancel="onCancel" :disabled-after="false"
|
||
|
|
ref="date"></w-picker>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import retuntop from '@/components/return/index.vue'
|
||
|
|
import wPicker from "@/components/w-picker/w-picker.vue"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
retuntop,
|
||
|
|
wPicker
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
statusBarHeight: 0,
|
||
|
|
name: '请假申请',
|
||
|
|
merchantData: {
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 45;
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page{
|
||
|
|
padding-bottom: 88rpx;
|
||
|
|
}
|
||
|
|
.content-top {
|
||
|
|
width: 100%;
|
||
|
|
background: #3274F9;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 100;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-middle {
|
||
|
|
padding: 28rpx 28rpx;
|
||
|
|
|
||
|
|
.merchantsSettled .list {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 12px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.application-record {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
top: 240rpx;
|
||
|
|
right: 0;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 22rpx;
|
||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
||
|
|
padding: 8rpx 18rpx;
|
||
|
|
border-radius: 20px 0px 0px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .list .item {
|
||
|
|
padding: 50rpx 0 20rpx;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
margin: 0 20px;
|
||
|
|
|
||
|
|
&.no-border {
|
||
|
|
border-bottom: none;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-title {
|
||
|
|
color: #666666;
|
||
|
|
font-size: 28rpx;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-desc {
|
||
|
|
color: #B2B2B2;
|
||
|
|
font-size: 22rpx;
|
||
|
|
display: block;
|
||
|
|
margin-top: 9rpx;
|
||
|
|
line-height: 36rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-name {
|
||
|
|
margin-right: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acea-row,
|
||
|
|
.upload {
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-lines: multiple;
|
||
|
|
-moz-box-lines: multiple;
|
||
|
|
-o-box-lines: multiple;
|
||
|
|
-webkit-flex-wrap: wrap;
|
||
|
|
-ms-flex-wrap: wrap;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acea-row.row-middle {
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-moz-box-align: center;
|
||
|
|
-o-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
-webkit-align-items: center;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acea-row.row-column {
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-moz-box-orient: vertical;
|
||
|
|
-o-box-orient: vertical;
|
||
|
|
-webkit-flex-direction: column;
|
||
|
|
-ms-flex-direction: column;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acea-row.row-center-wrapper {
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-moz-box-align: center;
|
||
|
|
-o-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
-webkit-align-items: center;
|
||
|
|
align-items: center;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-moz-box-pack: center;
|
||
|
|
-o-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
-webkit-justify-content: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.uni-list-cell-db {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.merchantsSettled .list .item input {
|
||
|
|
width: 400rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .list .item .placeholder {
|
||
|
|
color: #b2b2b2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .default {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-top: 23rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .default checkbox {
|
||
|
|
margin-right: 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .acea-row uni-image {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .list .item .codeIput {
|
||
|
|
width: 125px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.uni-input-input {
|
||
|
|
display: block;
|
||
|
|
height: 100%;
|
||
|
|
background: none;
|
||
|
|
color: inherit;
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-text-fill-color: currentcolor;
|
||
|
|
font: inherit;
|
||
|
|
line-height: inherit;
|
||
|
|
letter-spacing: inherit;
|
||
|
|
text-align: inherit;
|
||
|
|
text-indent: inherit;
|
||
|
|
text-transform: inherit;
|
||
|
|
text-shadow: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .list .item .code {
|
||
|
|
position: absolute;
|
||
|
|
width: 93px;
|
||
|
|
line-height: 27px;
|
||
|
|
border: 1px solid var(--view-theme);
|
||
|
|
border-radius: 15px;
|
||
|
|
color: var(--view-theme);
|
||
|
|
text-align: center;
|
||
|
|
bottom: 8px;
|
||
|
|
right: 0;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .list .item .code.on {
|
||
|
|
background-color: #bbb;
|
||
|
|
color: #fff;
|
||
|
|
border-color: #bbb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .submitBtn {
|
||
|
|
width: 588rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
height: 86rpx;
|
||
|
|
border-radius: 25px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 86rpx;
|
||
|
|
font-size: 15px;
|
||
|
|
color: #fff;
|
||
|
|
background: #E3E3E3;
|
||
|
|
margin-top: 25px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled .submitBtn.on {
|
||
|
|
background: var(--view-theme);
|
||
|
|
pointer-events: all;
|
||
|
|
}
|
||
|
|
|
||
|
|
uni-checkbox-group,
|
||
|
|
.settleAgree {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
uni-checkbox-group {
|
||
|
|
color: #b2b2b2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.settleAgree {
|
||
|
|
color: var(--view-theme);
|
||
|
|
position: relative;
|
||
|
|
top: 2px;
|
||
|
|
left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
border: 2rpx solid #C3C3C3;
|
||
|
|
border-radius: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content-bottom{
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
position: fixed;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.content-bottom-one{
|
||
|
|
width: 50%;
|
||
|
|
height: 88rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999999;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.content-bottom-two{
|
||
|
|
width: 50%;
|
||
|
|
height: 88rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
background: #3274F9;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|