89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<!-- 使用审批的UI -->
|
||
<template>
|
||
<view class="check-action">
|
||
<view class="btn-wrap">
|
||
<u-form-item label="参会情况" label-width="80px">
|
||
<u-radio-group v-model="joinTypeDef" @change="groupChange">
|
||
<u-radio :customStyle="{margin: ' 0 20px 0 0' }" v-for="(item, index) in joinType" :key="index"
|
||
:label="item.name" :name="item.name" @change="radioChange">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</u-form-item>
|
||
|
||
<!-- 参会情况：-->
|
||
<!-- <view>
|
||
<u-radio-group v-model="joinTypeDef" @change="groupChange">
|
||
<u-radio :customStyle="{margin: ' 0 20px 6px 0' }" v-for="(item, index) in joinType" :key="index"
|
||
:label="item.name" :name="item.name" @change="radioChange">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view> -->
|
||
<view v-if="!isJoin">
|
||
<u--textarea v-model="opinions" placeholder="请输入请假原因"></u--textarea>
|
||
</view>
|
||
<view class="buttons">
|
||
<u-button @click="handleCheck" class="btn first-btn" type="primary" text="确认"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {},
|
||
data() {
|
||
return {
|
||
opinions: '',
|
||
isJoin: true,
|
||
joinType: [{
|
||
name: '参加',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '请假',
|
||
disabled: false
|
||
}
|
||
],
|
||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||
joinTypeDef: '参加',
|
||
};
|
||
},
|
||
methods: {
|
||
radioChange() {
|
||
this.isJoin = !this.isJoin
|
||
},
|
||
handleCheck() {
|
||
if (!this.isJoin && this.opinions.length < 1) {
|
||
uni.$showErrorInfo('请输入请假原因！')
|
||
return false
|
||
} else if (this.isJoin && this.opinions.length > 1) {
|
||
this.opinions = ''
|
||
}
|
||
this.$emit('chilCheck', {
|
||
opinions: this.opinions,
|
||
isJoin: this.isJoin
|
||
}, function(res) {})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.btn-wrap {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
z-index: 1000;
|
||
background: #fff;
|
||
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
|
||
}
|
||
|
||
.buttons {
|
||
display: flex;
|
||
margin-top: 6px;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |