342 lines
9.2 KiB
Vue
342 lines
9.2 KiB
Vue
<template>
|
||
<!-- 当班工作人员 -->
|
||
<view class="content">
|
||
<view class="container">
|
||
<view class="form-sub">
|
||
<u-form :model="model" ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
|
||
<view style="position: relative;">
|
||
<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
|
||
</view>
|
||
<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">组织信息</view>
|
||
<u-form-item label="组织名称" prop="NAME" borderBottom ref="item1">
|
||
<u--input v-model="model.NAME" border="none"
|
||
customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="员工数" prop="COUNT" borderBottom @click="showSex = true;" ref="item1">
|
||
<u--input v-model="model.COUNT" disabled disabledColor="#ffffff" placeholder="员工数量"
|
||
border="none" suffixIcon="arrow-right" fontSize="14px"
|
||
customStyle="margin:0px;display:flex;padding:3px 9px"
|
||
suffixIconStyle="font-size:12px"></u--input>
|
||
</u-form-item>
|
||
</u-form>
|
||
|
||
|
||
<!-- 动态加载用户信息 -->
|
||
<u-sticky offset-top="20">
|
||
<view class="sub-form">
|
||
<view class="sub-form-wrap">
|
||
<u--form labelPosition="left" labelWidth="auto" labelAlign="center"
|
||
errorType="border-bottom" ref="sForm">
|
||
<uni-collapse :border="false" accordion>
|
||
<uni-card style="margin-bottom: 16px;" margin="0" spacing="0" :is-shadow="false"
|
||
v-for="(item, index) in model.Nav_ListUser.filter(i => !i.IS_DELETED)">
|
||
<uni-collapse-item :title="(index+1) + '. ' + item.NAME" name="1">
|
||
<u-form-item label="姓名" prop="NAME" borderBottom>
|
||
<u--input disabled disabledColor="#fff" v-model="item.NAME"
|
||
border="none" inputAlign="right"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="性别" prop="SEX" borderBottom>
|
||
<u--input disabled disabledColor="#fff" v-model="item.NAME"
|
||
border="none" inputAlign="right"></u--input>
|
||
</u-form-item>
|
||
</uni-collapse-item>
|
||
</uni-card>
|
||
</uni-collapse>
|
||
</u--form>
|
||
|
||
</view>
|
||
</view>
|
||
</u-sticky>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<view style="display: flex;flex-direction: row;" class="bottom-button">
|
||
<u-button type="primary" @click="reset" color="#3d4b70" :plain="true"
|
||
style="margin-right: 5px;">重置</u-button>
|
||
<u-button type="primary" @click="submit" color="#3d4b70" style="margin-left: 5px;"
|
||
v-if="loading == false">提交</u-button>
|
||
<u-button type="primary" loading loadingText="加载中" color="#3d4b70" style="margin-left: 5px;"
|
||
v-if="loading == true">提交</u-button>
|
||
</view>
|
||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
|
||
@select="sexSelect">
|
||
</u-action-sheet>
|
||
<u-datetime-picker :show="dateTimePickerInfo.showCheckDate" mode="date"
|
||
v-model='dateTimePickerInfo.defaultDateTime' :formatter="formatter" @confirm="handleCheckDate"
|
||
@close="dateTimePickerInfo.showCheckDate = false;"
|
||
@cancel="dateTimePickerInfo.showCheckDate = false;"></u-datetime-picker>
|
||
<u-picker :show="pickerShow" :columns="pickerColumns" @confirm="pickerConfirm"
|
||
@cancel="pickerCancel"></u-picker>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
RegisterUser
|
||
} from '../../services/apply.js'
|
||
import config from '../../config/common.js'
|
||
import {
|
||
isChinaMobilePhone,
|
||
easyCheckID,
|
||
getNowFormatDate
|
||
} from '../../utils/common.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showSex: false,
|
||
appurl: config.uni_app_url,
|
||
formatter: null,
|
||
pickerShow: false,
|
||
loading: false,
|
||
pickerColumns: [Array(60).fill(null).map((_, i) => i)],
|
||
model: {
|
||
NAME:'组织名称',
|
||
COUNT:'员工数量',
|
||
Nav_ListUser: [{
|
||
NAME: '姓名显示',
|
||
SEX: '性别显示'
|
||
|
||
}]
|
||
},
|
||
dateTimePickerInfo: {
|
||
showCheckDate: false,
|
||
defaultDateTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
|
||
value: '',
|
||
},
|
||
actions: [{
|
||
name: '男',
|
||
},
|
||
{
|
||
name: '女',
|
||
},
|
||
],
|
||
rules: {
|
||
'NAME': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'COUNT': {
|
||
type: 'string',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择男或女',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
},
|
||
radio: '',
|
||
switchVal: false
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
sexSelect(e) {
|
||
this.model.userInfo.Sex = e.name
|
||
this.$refs.uForm.validateField('userInfo.Sex')
|
||
},
|
||
showCheckDate() {
|
||
if (this.model.userInfo.InTime == null) {
|
||
this.model.userInfo.InTime = uni.$u.timeFormat(new Date(),
|
||
'yyyy-mm-dd')
|
||
}
|
||
this.dateTimePickerInfo = {
|
||
showCheckDate: true,
|
||
defaultDateTime: this.model.userInfo.InTime,
|
||
}
|
||
},
|
||
handleCheckDate(e) {
|
||
// let v = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
||
this.model.userInfo.InTime = uni.$u.timeFormat(e.value,
|
||
'yyyy-mm-dd')
|
||
this.dateTimePickerInfo.showCheckDate = false
|
||
},
|
||
pickerConfirm(e) {
|
||
this.model.userInfo.WORKINGYEAR = e.value.toString()
|
||
this.pickerShow = false
|
||
},
|
||
pickerCancel(e) {
|
||
this.pickerShow = false
|
||
},
|
||
reset() {
|
||
this.model.userInfo = {
|
||
Name: '',
|
||
Sex: '',
|
||
Phone: '',
|
||
ID_CARD: '',
|
||
InTime: '',
|
||
WORKINGYEAR: '',
|
||
}
|
||
},
|
||
submit() {
|
||
|
||
// if (this.model.userInfo.Name == '' ||
|
||
// this.model.userInfo.Sex == '' ||
|
||
// this.model.userInfo.Phone == '' ||
|
||
// this.model.userInfo.ID_CARD == '' ||
|
||
// this.model.userInfo.InTime == '') {
|
||
// uni.showToast({
|
||
// icon: 'error',
|
||
// title: '信息不能为空'
|
||
// })
|
||
// return
|
||
// }
|
||
// if (isChinaMobilePhone(this.model.userInfo.Phone) == false) {
|
||
// uni.showToast({
|
||
// icon: 'error',
|
||
// title: '手机号码格式不正确'
|
||
// })
|
||
// return
|
||
// }
|
||
// if (easyCheckID(this.model.userInfo.ID_CARD) == false) {
|
||
// uni.showToast({
|
||
// icon: 'error',
|
||
// title: '身份证号码格式不正确'
|
||
// })
|
||
// return
|
||
// }
|
||
// this.loading = true
|
||
// const json = {
|
||
// Name: this.model.userInfo.Name,
|
||
// Sex: this.model.userInfo.Sex == '男' ? '1' : '0',
|
||
// Phone: this.model.userInfo.Phone,
|
||
// ID_CARD: this.model.userInfo.ID_CARD,
|
||
// InTime: this.model.userInfo.InTime,
|
||
// WORKINGYEAR: this.model.userInfo.WORKINGYEAR,
|
||
// }
|
||
// // const json = {
|
||
// // Name: '云',
|
||
// // Sex: '0',
|
||
// // Phone: '18480141719',
|
||
// // ID_CARD: '230182200000000000',
|
||
// // InTime: '2024-07-25',
|
||
// // WORKINGYEAR: '0',
|
||
// // }
|
||
// RegisterUser(json).then((res) => {
|
||
// if (res.code == 200) {
|
||
// this.loading = false
|
||
// uni.showToast({
|
||
// title: '注册成功！',
|
||
// icon: 'none'
|
||
// })
|
||
// setTimeout(() => {
|
||
// uni.hideToast();
|
||
// location.href = this.appurl
|
||
// // uni.redirectTo({
|
||
// // url: '/pages/webview/webview?url=' + this.appurl
|
||
// // })
|
||
// }, 1500)
|
||
// // uni.navigateTo({
|
||
// // url: '/pages/apply/complete?type=success'
|
||
// // })
|
||
// } else {
|
||
// this.loading = false
|
||
// uni.showToast({
|
||
// title: res.msg,
|
||
// icon: 'none'
|
||
// })
|
||
// // uni.navigateTo({
|
||
// // url: `/pages/apply/complete?type=failed&title=${res.msg}`
|
||
// // })
|
||
// }
|
||
// }).catch((err) => {
|
||
// this.loading = false
|
||
// uni.navigateTo({
|
||
// url: `/pages/apply/complete?type=failed&title=${err.msg}`
|
||
// })
|
||
// })
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
background-color: #f4f7ff;
|
||
width: 100%;
|
||
/* #ifndef APP-PLUS */
|
||
height: calc(100vh - 44px - 50px); // 非APP平台下生效
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS */
|
||
height: calc(100vh); // APP平台下生效
|
||
/* #endif */
|
||
}
|
||
|
||
.container {
|
||
padding: 20px 16px 10px 16px;
|
||
}
|
||
|
||
.form-sub {
|
||
/* margin: 20px 16px 10px 16px; */
|
||
/* border: 1px solid #EBEEF5; */
|
||
padding: 20px 30px 10px 30px;
|
||
/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-form-item__body__left__content__label {
|
||
font-size: 14px;
|
||
color: #8e8b9c;
|
||
/* justify-content: flex-start; */
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-form-item__body__left__content__ {
|
||
left: -11px;
|
||
top: 0px
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-textarea__field {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-cell__title-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-textarea {
|
||
padding: 9px 9px 25px 9px;
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
|
||
font-size: 14px;
|
||
color: #8e8b9c;
|
||
/* justify-content: flex-start; */
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
|
||
left: -11px;
|
||
top: 0px
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-textarea__field {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-cell__title-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.bottom-button {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 10px 16px;
|
||
box-sizing: border-box;
|
||
background: #f4f7ff;
|
||
z-index: 999;
|
||
}
|
||
</style> |