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.
348 lines
10 KiB
348 lines
10 KiB
<template>
|
|
<view class="applyform">
|
|
<u-form :model="submitForm" ref="submitForms" label-position="top" :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'">
|
|
<!-- <block v-if="item.field==='introduce'
|
|
|| item.field==='company_product' || item.field==='company_introduce'">
|
|
<u-input type="textarea" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
|
|
</block> -->
|
|
<u-input :type="item.field==='introduce'||
|
|
item.field==='company_fund'|| item.field==='company_product'||
|
|
item.field==='company_introduce'?'textarea':'text'" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
|
|
</block>
|
|
<block v-if="item.edit_input==='textarea'">
|
|
<!-- <block v-if="item.field==='introduce'
|
|
|| item.field==='company_product' || item.field==='company_introduce'">
|
|
<u-input type="textarea" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
|
|
</block> -->
|
|
<u-input :type="'textarea'" :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" :checked="checkboxitem.checked" />
|
|
{{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="item.fileListArr"
|
|
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 = []
|
|
console.log("lists---", lists, item)
|
|
if(lists.length>0){
|
|
this.course_forms.map(item1 => {
|
|
if (item1.field === item.field) {
|
|
this.$set(item1,'fileListArr',lists)
|
|
}
|
|
})
|
|
}else{
|
|
this.course_forms.map(item1 => {
|
|
if (item1.field === item.field) {
|
|
this.$set(item1,'fileListArr',[])
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onRemove(index, lists, name, item) {
|
|
let arr = []
|
|
let arrid = []
|
|
if(lists.length>0){
|
|
// item.fileListArr = lists
|
|
|
|
this.course_forms.map(item1 => {
|
|
if (item1.field === item.field) {
|
|
this.$set(item1,'fileListArr',lists)
|
|
}
|
|
})
|
|
}else{
|
|
this.course_forms.map(item1 => {
|
|
if (item1.field === item.field) {
|
|
this.$set(item1,'fileListArr',[])
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 提交
|
|
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(item.edit_input==='files'){
|
|
let valueArr = []
|
|
let fileListArr = []
|
|
console.log("item.fileListArr",item.fileListArr)
|
|
if(item.fileListArr && item.fileListArr.length>0){
|
|
item.fileListArr.map(f=>{
|
|
if(f.response){
|
|
valueArr.push(f.response.url.replace(baseUrl, ''))
|
|
fileListArr.push(f.response)
|
|
}else{
|
|
valueArr.push(f.url.replace(baseUrl, ''))
|
|
fileListArr.push(f)
|
|
}
|
|
})
|
|
}else{
|
|
item.fileListArr = []
|
|
}
|
|
item.value = valueArr.join(",")
|
|
item.fileList = fileListArr
|
|
console.log("submit---",valueArr,fileListArr)
|
|
}
|
|
})
|
|
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') {
|
|
// 修改有值的时候 先split
|
|
let _arr = []
|
|
if (!this.base.isNull(item.value)) {
|
|
_arr = item.value.split(",")
|
|
console.log("_arr", _arr)
|
|
item.select_item.forEach(item1 => {
|
|
// 检查 item.value 是否存在于数组 b 中
|
|
const exists = _arr.includes(item1.value);
|
|
// 根据检查结果设置 checked 属性
|
|
console.log("exists", exists)
|
|
item1.checked = exists;
|
|
});
|
|
}
|
|
}
|
|
if (item.edit_input === 'files') {
|
|
item.fileListArr = this.base.deepCopy(item.fileList)
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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> |