|
|
@@ -4,12 +4,10 @@
|
|
|
<form @submit="formSubmit">
|
|
|
<view class="module-com input-line-wrap">
|
|
|
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
- <view class="tui-title">类型</view>
|
|
|
- <view class="tui-input" @click="changeType">
|
|
|
- <text v-if="form.type == -1" style="color:#CCCCCC;">请选择</text>
|
|
|
- <text v-else>{{ form.typeName }}</text>
|
|
|
- </view>
|
|
|
+ <tui-list-cell class="line-cell" :arrow="true">
|
|
|
+ <div class="tui-title">类型</div>
|
|
|
+ <view class="uni-input" v-if="form.type==-1" style="color:#CCCCCC;width:400upx;" @click="changeType()">请选择</view>
|
|
|
+ <view class="uni-input" v-else @click="changeType()" style="width:400upx;">{{ form.typeName ? form.typeName : '请选择' }}</view>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
@@ -41,17 +39,25 @@
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">报销</div>
|
|
|
- <radio-group class="tui-input" @change="bxChange">
|
|
|
- <label class="list" for="fixedLink">
|
|
|
- <radio id="fixedLink" value="0" :checked="form.bx == 0" style="transform: scale(0.7,0.7);" />
|
|
|
- <span class="checkbox-text" style="font-size:30upx;">未报销</span>
|
|
|
- </label>
|
|
|
- <label class="list" for="dimLink">
|
|
|
- <radio id="dimLink" value="1" :checked="form.bx == 1" style="transform: scale(0.7,0.7);" />
|
|
|
- <span class="checkbox-text" style="font-size:30upx;">已报销</span>
|
|
|
- </label>
|
|
|
- </radio-group>
|
|
|
+ <div class="tui-title">报销状态</div>
|
|
|
+ <view class="tui-input">
|
|
|
+ <view class="bx-btn-group">
|
|
|
+ <button
|
|
|
+ class="bx-btn"
|
|
|
+ :class="{'selected': form.bx == 0}"
|
|
|
+ @click="selectBx(0)"
|
|
|
+ >
|
|
|
+ 未报销
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="bx-btn"
|
|
|
+ :class="{'selected': form.bx == 1}"
|
|
|
+ @click="selectBx(1)"
|
|
|
+ >
|
|
|
+ 已报销
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
@@ -68,14 +74,23 @@
|
|
|
</form>
|
|
|
</view>
|
|
|
|
|
|
- <uni-popup ref="typeShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
|
|
|
- <view style="display:flex;width:100vw;padding:20upx 20upx 40upx 20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
|
|
|
- <view v-for="(item, index) in typeList" :key="index" style="width:100vw;margin-top:8upx;">
|
|
|
- <button @click="getType(item)">{{ item.name }}</button>
|
|
|
- </view>
|
|
|
- <view style="width:100vw;margin-top:30upx;margin-bottom:70upx;"><button @click="closeTypeShow()">取消</button></view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
+ <uni-popup ref="typeShowMore" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
+ <view style="max-height:80vh;overflow: scroll;">
|
|
|
+ <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择:</view>
|
|
|
+ <view style="display:flex;padding:20upx;height:auto;justify-content: flex-start;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
|
|
|
+ <view v-for="(item, index) in typeList" :key="index" style="margin-bottom:20upx;margin-left:3upx;">
|
|
|
+ <button
|
|
|
+ class="admin-button-com staff-btn"
|
|
|
+ @click.stop="getType(item)"
|
|
|
+ :class="{'selected': form.type === item.id}"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="text-align:center;padding:10upx 0 10upx 0;"><button class="admin-button-com big blue" @click="closeTypeShow()">取消选择</button></view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
|
|
|
<mx-date-picker :show="showPicker" format="yyyy-mm-dd" type="date" :value="defaultPickerDate" :show-tips="true" @confirm="confirmPicker" @cancel="showPicker = false" />
|
|
|
|
|
|
@@ -148,8 +163,8 @@ export default {
|
|
|
changeType(){
|
|
|
this.$refs.typeShowMore.open('top')
|
|
|
},
|
|
|
- bxChange(e) {
|
|
|
- this.form.bx = e.detail.value;
|
|
|
+ selectBx(value) {
|
|
|
+ this.form.bx = value;
|
|
|
},
|
|
|
init(){
|
|
|
let that = this
|
|
|
@@ -238,4 +253,59 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.staff-btn {
|
|
|
+ min-width: 160upx;
|
|
|
+ padding: 0 27upx;
|
|
|
+ height: 80upx;
|
|
|
+ font-size: 40upx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 8upx 8upx 0 0;
|
|
|
+ border-radius: 16upx;
|
|
|
+ background: #f0f2f6;
|
|
|
+ color: #333;
|
|
|
+ border: 2upx solid #e0e0e0;
|
|
|
+ transition: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ background-color: #007aff !important;
|
|
|
+ color: #fff !important;
|
|
|
+ border-color: #007aff !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bx-btn-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 8upx;
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.bx-btn {
|
|
|
+ width: 200upx;
|
|
|
+ height: 90upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ background: #f0f2f6;
|
|
|
+ color: #333;
|
|
|
+ border: 2upx solid #e0e0e0;
|
|
|
+ transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 20upx;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ background-color: #007aff !important;
|
|
|
+ color: #fff !important;
|
|
|
+ border-color: #007aff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|