|
|
@@ -0,0 +1,243 @@
|
|
|
+<template>
|
|
|
+ <view class="p-form">
|
|
|
+ <view v-for='item,index in extForm' class="p-form-item" :key="index">
|
|
|
+ <view class="p-label ddflex" style="justify-content: space-between;">
|
|
|
+ {{item.chineseName}}
|
|
|
+ <view class="ddflex" style="font-size: 24rpx;">
|
|
|
+ <text style="color: blue;" @click="editItem(index)">编辑</text>
|
|
|
+ <text style="margin-left: 20rpx;color: red;" @click="removeItem(index)">删除</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <view v-if="item.type==1" class="p-input">
|
|
|
+ <input :placeholder="'请输入'+item.chineseName" placeholder-class="p-placeholder" />
|
|
|
+ </view>
|
|
|
+ <!-- 单选 -->
|
|
|
+ <view v-if="item.type==2" class="p-select">
|
|
|
+ <view class="ddflex">
|
|
|
+ <view class="ddflex p-select-item" v-for="it in item.selectValues">
|
|
|
+ <image src="/static/images/select.png"></image>
|
|
|
+ <view>{{it.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 多选 -->
|
|
|
+ <view v-if="item.type==3" class="p-select-group">
|
|
|
+ <view class="ddflex">
|
|
|
+ <view class="ddflex p-select-group-item" v-for="it in item.selectValues">
|
|
|
+ <view>{{it.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <view v-if="item.type==4">
|
|
|
+ <view class="ddflex" style="margin-top: 30rpx;">
|
|
|
+ <view class="upload-photo ddflex">
|
|
|
+ <image src="../static/images/photo.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 多图片 -->
|
|
|
+ <view v-if="item.type==5">
|
|
|
+ <view class="ddflex" style="margin-top: 30rpx;">
|
|
|
+ <view class="upload-photo ddflex">
|
|
|
+ <image src="../static/images/photo.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="extForm.length==0" style="text-align: center;margin: 30rpx 0;color: #999;">添加报名字段</view>
|
|
|
+ <view class="add-btn" @click="showPop">
|
|
|
+ <image src="../static/images/add.png"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="next-btn" @click="save">
|
|
|
+ <view>确定</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="ceng" v-if="isShowPop" @click="hidePop()"></view>
|
|
|
+ <view class="hx-pop" :style="'bottom:' + popBottom">
|
|
|
+ <view class="pop-tit">添加报名信息</view>
|
|
|
+ <view class="pop-list">
|
|
|
+ <view class="form">
|
|
|
+ <view class="form-item-title">名称</view>
|
|
|
+ <view class="form-input-box">
|
|
|
+ <input v-model="addObj.chineseName" placeholder-class="form-input-placeholder"
|
|
|
+ placeholder="请输入名称(如 姓名)" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item-title">字段名</view>
|
|
|
+ <view class="form-input-box">
|
|
|
+ <input v-model="addObj.englishName" placeholder-class="form-input-placeholder"
|
|
|
+ placeholder="请输入字段名(如 name)" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item-title">字段类型</view>
|
|
|
+ <view class="form-input-box form-input-placeholder">
|
|
|
+ <picker :range="formTypeOptions" range-key="label" v-model="formTypeIndex" @change="changeType" style="color: #333;">
|
|
|
+ {{formTypeOptions[formTypeIndex].label}}
|
|
|
+ <view class="more ddflex">
|
|
|
+ <image src="/static/pages/images/more.png"></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ <view v-if="formTypeOptions[formTypeIndex].value==2||formTypeOptions[formTypeIndex].value==3">
|
|
|
+ <view class="ddflex option-input" v-for="it,idx in addObj.selectValues">
|
|
|
+ <input v-model="it.name" class="fflex" placeholder-class="option-input-placeholder" placeholder="请输入选项值"/>
|
|
|
+ <view class="option-input-delete" @click="removeOption(idx)">删除</view>
|
|
|
+ </view>
|
|
|
+ <view class="add-option-btn" @click="addOption">添加选项</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-item-title ddflex" style="justify-content: space-between;">
|
|
|
+ 是否必填
|
|
|
+ <switch v-model="addObj.required" :checked="addObj.required==1" style="transform:scale(0.7)" color="var(--main)"
|
|
|
+ @change="requiredChange"></switch>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pop-cancel" @click="confirmPop()">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const app = getApp();
|
|
|
+ const req = require("../../utils/request.js");
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowPop: false,
|
|
|
+ popBottom: '-100%',
|
|
|
+ addObj: {
|
|
|
+ englishName: '',
|
|
|
+ chineseName: '',
|
|
|
+ type: 1,
|
|
|
+ selectValues: null,
|
|
|
+ required: 1,
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ extForm: [],
|
|
|
+ formTypeOptions: [{
|
|
|
+ value: '1',
|
|
|
+ label: '输入框'
|
|
|
+ }, {
|
|
|
+ value: '2',
|
|
|
+ label: '单选框'
|
|
|
+ }, {
|
|
|
+ value: '3',
|
|
|
+ label: '多选框'
|
|
|
+ }, {
|
|
|
+ value: '4',
|
|
|
+ label: '单图片'
|
|
|
+ }, {
|
|
|
+ value: '5',
|
|
|
+ label: '多图片'
|
|
|
+ }],
|
|
|
+ formTypeIndex:0,
|
|
|
+ editIndex:-1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ let pages = getCurrentPages(); //获取所有页面栈实例列表
|
|
|
+ let prevPage = pages[pages.length - 2]; //上一页页面实例
|
|
|
+ if(prevPage.$vm.extForm){
|
|
|
+ this.extForm = JSON.parse(prevPage.$vm.extForm);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showPop() {
|
|
|
+ this.isShowPop = true;
|
|
|
+ this.popBottom = 0;
|
|
|
+ },
|
|
|
+ hidePop() {
|
|
|
+ this.editIndex = -1
|
|
|
+ this.isShowPop = false;
|
|
|
+ this.popBottom = '-100%';
|
|
|
+ this.clearPop()
|
|
|
+ },
|
|
|
+ clearPop(){
|
|
|
+ this.editIndex = -1
|
|
|
+ this.formTypeIndex = 0
|
|
|
+ this.addObj = {
|
|
|
+ englishName: '',
|
|
|
+ chineseName: '',
|
|
|
+ type: 1,
|
|
|
+ selectValues: null,
|
|
|
+ required: 1,
|
|
|
+ value: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmPop(){
|
|
|
+ if(!this.addObj.chineseName) return req.msg('请输入名称')
|
|
|
+ if(!this.addObj.englishName) return req.msg('请输入字段名')
|
|
|
+ if(!this.addObj.type) return req.msg('请选择字段类型')
|
|
|
+ if(this.addObj.selectValues) {
|
|
|
+ for(let i=0;i<this.addObj.selectValues.length;i++){
|
|
|
+ if(!this.addObj.selectValues[i].name) return req.msg('请输入选项值')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.addObj)
|
|
|
+ if(this.editIndex>-1){
|
|
|
+ this.extForm[this.editIndex] = this.addObj
|
|
|
+ }else{
|
|
|
+ this.extForm.push(this.addObj)
|
|
|
+ }
|
|
|
+ console.log(this.addObj)
|
|
|
+ this.hidePop()
|
|
|
+ },
|
|
|
+ editItem(index){
|
|
|
+ this.editIndex = index
|
|
|
+ this.addObj = this.extForm[index]
|
|
|
+ this.formTypeIndex = this.formTypeOptions.findIndex(item=>item.value==this.extForm[index].type)
|
|
|
+ this.showPop()
|
|
|
+ },
|
|
|
+ removeItem(index){
|
|
|
+ this.extForm.splice(index,1)
|
|
|
+ },
|
|
|
+ changeType(e) {
|
|
|
+ console.log(e)
|
|
|
+ let index = e.detail.value
|
|
|
+ this.formTypeIndex = index
|
|
|
+ this.addObj.type = this.formTypeOptions[index].value
|
|
|
+ if (this.formTypeOptions[index].value == 2 || this.formTypeOptions[index].value == 3) {
|
|
|
+ this.addObj.selectValues = [{name:''}]
|
|
|
+ } else {
|
|
|
+ this.addObj.selectValues = null
|
|
|
+ }
|
|
|
+ console.log(this.addObj)
|
|
|
+ this.addObj = JSON.parse(JSON.stringify(this.addObj))
|
|
|
+ },
|
|
|
+ addOption(){
|
|
|
+ this.addObj.selectValues.push({name:''})
|
|
|
+ this.addObj = JSON.parse(JSON.stringify(this.addObj))
|
|
|
+ },
|
|
|
+ removeOption(index){
|
|
|
+ console.log(this.addObj.selectValues,index)
|
|
|
+ this.addObj.selectValues.splice(index,1)
|
|
|
+ },
|
|
|
+ requiredChange(e){
|
|
|
+ this.addObj.required = e.detail.value?1:0
|
|
|
+ },
|
|
|
+ save(){
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[pages.length - 2];
|
|
|
+ prevPage.$vm.extForm = JSON.stringify(this.extForm);
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ @import "./addForm.css";
|
|
|
+</style>
|
xhj
