You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
9.4 KiB
341 lines
9.4 KiB
<template>
|
|
<view class="applyform">
|
|
<u-form :model="submitForm" ref="submitForms" :label-width="140" :label-align="'left'" :error-type="['message']">
|
|
<block v-for="(item,index) in course_forms">
|
|
<u-form-item :label="item.name" :prop="item.field"
|
|
:required="item.rule?item.rule.indexOf('required')!==-1:false">
|
|
<block v-if="item.edit_input==='text'">
|
|
<u-input :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
|
|
</block>
|
|
<block v-else-if="item.edit_input==='radio'">
|
|
<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
|
|
@click="showSelect(item,index)" />
|
|
</block>
|
|
<block v-else-if="item.edit_input==='checkbox'">
|
|
<checkbox-group style="display: flex;flex-wrap: wrap;" @change="(e)=>{checkboxGroupChange(e,item)}">
|
|
<label style="flex-basis: 100%;" v-for="(checkboxitem, checkboxindex) in item.select_item">
|
|
<checkbox :value="checkboxitem.value" />{{checkboxitem.value}}
|
|
</label>
|
|
</checkbox-group>
|
|
</block>
|
|
<block v-else-if="item.edit_input==='date'">
|
|
<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
|
|
@click="showDate(item,index)" />
|
|
</block>
|
|
<block v-else-if="item.edit_input==='datetime'">
|
|
<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
|
|
@click="showDateTime(item,index)" />
|
|
</block>
|
|
<block v-else-if="item.edit_input==='files'">
|
|
<u-upload @on-remove="(index, lists, name)=>{onRemove(index, lists, name,item)}"
|
|
@on-success="(data, index, lists, name)=>{onSuccess(data, index, lists, name,item)}"
|
|
@on-uploaded="(lists, name)=>{onUploaded(lists, name,item)}" :form-data="formData"
|
|
:action="action" :show-progress="false" :file-list="fileList" max-count="9"></u-upload>
|
|
</block>
|
|
</u-form-item>
|
|
</block>
|
|
</u-form>
|
|
<view class="form-btn">
|
|
<view @click="submit" type="primary">提交</view>
|
|
</view>
|
|
<!-- 单选 -->
|
|
<u-picker @confirm="selectConfirm" v-model="selectShow" :range="selectList" range-key="value"
|
|
mode="selector"></u-picker>
|
|
<!-- 日期 -->
|
|
<u-picker @confirm="dateConfirm" mode="time" v-model="dateShow" :params="dateParams"></u-picker>
|
|
<!-- 日期时间 -->
|
|
<u-picker @confirm="dateTimeConfirm" mode="time" v-model="dateTimeShow" :params="dateTimeParams"></u-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import { watch } from "vue"
|
|
import {
|
|
ROOTPATH as baseUrl
|
|
} from "@/common/config.js"
|
|
export default {
|
|
props: {
|
|
course_forms: {
|
|
type: Array,
|
|
default () {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
submitForm: {},
|
|
now_fileld: 0, // 当前所操作的 filed index值
|
|
// 单选
|
|
selectShow: false,
|
|
selectList: [],
|
|
// 多选
|
|
checkbox_list: [],
|
|
// 日期
|
|
dateShow: false,
|
|
dateParams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
// 日期时间
|
|
dateTimeShow: false,
|
|
dateTimeParams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
// 文件上传
|
|
action: `${baseUrl}/api/mobile/upload-file`,
|
|
fileList: [],
|
|
formData: {},
|
|
rules: {},
|
|
|
|
|
|
}
|
|
},
|
|
onReady() {
|
|
// this.$refs.uForm.setRules(this.rules);
|
|
let token = uni.getStorageSync("stbc1_lifeData").vuex_token
|
|
console.log("token", token)
|
|
this.formData = {
|
|
token: token
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
// 单选
|
|
showSelect(item, index) {
|
|
this.selectList = item.select_item
|
|
this.now_fileld = index
|
|
this.selectShow = true
|
|
},
|
|
selectConfirm(e) {
|
|
this.course_forms[this.now_fileld]['value'] = this.selectList[e[0]].value
|
|
},
|
|
// 多选
|
|
checkboxGroupChange(e, item) {
|
|
if (e.detail.value.length > 0) {
|
|
item.value = e.detail.value.join(",")
|
|
}
|
|
},
|
|
// 日期
|
|
showDate(item, index) {
|
|
this.now_fileld = index
|
|
this.dateShow = true
|
|
},
|
|
dateConfirm(e) {
|
|
console.log("date", e)
|
|
this.course_forms[this.now_fileld]['value'] = e.year + '-' + e.month + '-' + e.day
|
|
},
|
|
// 日期时间
|
|
showDateTime(item, index) {
|
|
this.now_fileld = index
|
|
this.dateTimeShow = true
|
|
},
|
|
dateTimeConfirm(e) {
|
|
console.log("date", e)
|
|
this.course_forms[this.now_fileld]['value'] = e.year + '-' + e.month + '-' + e.day +
|
|
' ' + e.hour + ':' + e.minute + ':' + e.second
|
|
},
|
|
onSuccess(data, index, lists, name, item) {
|
|
console.log("success", data, index, lists, name, item)
|
|
},
|
|
onUploaded(lists, name, item) {
|
|
let arr = []
|
|
let arrid = []
|
|
if (lists.length > 0) {
|
|
this.base.toast("全部上传成功")
|
|
lists.map(item => {
|
|
arr.push(item.response.url.replace(baseUrl, ''))
|
|
arrid.push(item.response)
|
|
})
|
|
}
|
|
this.course_forms.map(item1 => {
|
|
if (item1.field === item.field) {
|
|
this.$set(item1, 'value', arr.join(","))
|
|
this.$set(item1, 'fileList', arrid)
|
|
}
|
|
})
|
|
},
|
|
onRemove(index, lists, name, item) {
|
|
let arr = []
|
|
let arrid = []
|
|
if (lists.length > 0) {
|
|
lists.map(item => {
|
|
arr.push(item.response.url.replace(baseUrl, ''))
|
|
arrid.push(item.response)
|
|
})
|
|
}
|
|
this.course_forms.map(item1 => {
|
|
if (item1.field === item.field) {
|
|
this.$set(item1, 'value', arr.join(","))
|
|
this.$set(item1, 'fileList', arrid)
|
|
}
|
|
})
|
|
},
|
|
// 提交
|
|
submit() {
|
|
console.log("course_forms", this.course_forms)
|
|
let errorCount = 0
|
|
this.course_forms.map(item=>{
|
|
if(item.rule){
|
|
// 不能为空
|
|
if (item.rule.indexOf('required') !== -1) {
|
|
if(this.base.isNull(item.value)){
|
|
this.base.toast(`${item.name}不能为空`)
|
|
errorCount++
|
|
return
|
|
}
|
|
}
|
|
// 手机号
|
|
if (!this.base.isNull(item.value) && item.rule.indexOf('mobile') !== -1) {
|
|
if(!this.base.isMobile(item.value)){
|
|
this.base.toast(`${item.name}不正确`)
|
|
errorCount++
|
|
return
|
|
}
|
|
}
|
|
// 身份证
|
|
if (!this.base.isNull(item.value) && item.rule.indexOf('idcard') !== -1) {
|
|
if(!this.$u.test.idCard(item.value)){
|
|
this.base.toast(`${item.name}不正确`)
|
|
errorCount++
|
|
return
|
|
}
|
|
}
|
|
// 邮箱
|
|
if (item.rule.indexOf('email') !== -1) {
|
|
if(!this.base.isNull(item.value) && !this.base.isMail(item.value)){
|
|
this.base.toast(`${item.name}不正确`)
|
|
errorCount++
|
|
return
|
|
}
|
|
}
|
|
// 整数
|
|
if (item.rule.indexOf('integer') !== -1) {
|
|
if(!this.base.isNull(item.value) && !this.base.isInteger(item.value)){
|
|
this.base.toast(`${item.name}必须为整数`)
|
|
errorCount++
|
|
return
|
|
}
|
|
}
|
|
// 数字
|
|
if (item.rule.indexOf('numeric') !== -1) {
|
|
if(!this.base.isNull(item.value) && !this.base.isNumber(item.value)){
|
|
this.base.toast(`${item.name}必须为数字`)
|
|
errorCount++
|
|
return
|
|
}
|
|
}
|
|
|
|
}
|
|
})
|
|
|
|
if(errorCount>0){
|
|
return
|
|
}else{
|
|
// return
|
|
this.$emit("backForm",this.course_forms)
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
course_forms(newval) {
|
|
if (newval) {
|
|
// 验证规则
|
|
let that = this
|
|
let _rule = {}
|
|
newval.map(item => {
|
|
if (item.edit_input === 'checkbox') {
|
|
item.select_item.map(s => {
|
|
s.checked = false
|
|
})
|
|
console.log("item.select_item", item.select_item)
|
|
}
|
|
if (item.rule) {
|
|
_rule[item.field] = []
|
|
// 必填
|
|
if (item.rule.indexOf('required') !== -1) {
|
|
_rule[item.field].push({
|
|
required: true,
|
|
message: `请输入${item.name}`,
|
|
trigger: ['blur'],
|
|
})
|
|
}
|
|
// // idcard
|
|
// if (item.rule.indexOf('idcard') !== -1) {
|
|
// _rule[item.field].push({
|
|
// validator: (rule, value, callback) => {
|
|
// return this.$u.test.idCard(value);
|
|
// },
|
|
// message: `${item.name}不正确`,
|
|
// trigger: ['blur'],
|
|
// })
|
|
// }
|
|
// // email
|
|
// if (item.rule.indexOf('email') !== -1) {
|
|
// _rule[item.field].push({
|
|
// validator: (rule, value, callback) => {
|
|
// return this.$u.test.email(value);
|
|
// },
|
|
// message: `${item.name}不正确`,
|
|
// trigger: ['blur'],
|
|
// })
|
|
// }
|
|
// // mobile
|
|
// if (item.rule.indexOf('mobile') !== -1) {
|
|
// _rule[item.field].push({
|
|
// validator: (rule, value, callback) => {
|
|
// return that.$u.test.mobile(value);
|
|
// },
|
|
// message: `${item.name}不正确`,
|
|
// trigger: ['blur'],
|
|
// })
|
|
// }
|
|
//
|
|
|
|
}
|
|
})
|
|
this.rules = _rule
|
|
// this.$refs.submitForms.setRules(this.rules);
|
|
console.log("this.rules", this.rules)
|
|
// this.$refs.uForm.setRules(this.rules)
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.applyform {
|
|
position: relative;
|
|
z-index: 99
|
|
}
|
|
|
|
.form-btn {
|
|
width: 100%;
|
|
position: relative;
|
|
padding: 60rpx 0;
|
|
|
|
&>view {
|
|
width: 70%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
border-radius: 30rpx;
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
</style> |