|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="head" v-if="requiredFieldOnly">
|
|
|
+ <view class="requiredFieldOnly-head" v-if="requiredFieldOnly">
|
|
|
<view class="label">
|
|
|
基本信息
|
|
|
</view>
|
|
@@ -12,7 +12,8 @@
|
|
|
<block v-for="(item, index) in list " :key="item.key">
|
|
|
<block v-if="item.isMust || !unShowAll">
|
|
|
<!-- 文本输入 -->
|
|
|
- <view class="input-box" v-if="item.type == 'text'" :style="{ marginTop: tovw(item.marginTop || 0) }"
|
|
|
+ <view class="input-box" v-if="item.type == 'text'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }"
|
|
|
@click="focusLabel = item.label">
|
|
|
<view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
<view class="label">
|
|
@@ -21,19 +22,25 @@
|
|
|
</view>
|
|
|
<view class="content-box">
|
|
|
<view class="content">
|
|
|
- <input v-if="item.inputmode == 'number'" type="number"
|
|
|
+ <input v-if="item.inputmode == 'number'" type="number" :disabled="item.disabled"
|
|
|
placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
|
|
|
:focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
|
|
|
:value="item.value" :style="{ width: item.value ? '220px' : '240px' }"
|
|
|
@input="onInput($event, index)" :maxlength="item.maxlength || '499'"
|
|
|
confirm-type="done" />
|
|
|
- <textarea v-else
|
|
|
+ <input v-else-if="item.inputmode == 'digit'" type="digit" :disabled="item.disabled"
|
|
|
+ placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
|
|
|
+ :focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
|
|
|
+ :value="item.value" :style="{ width: item.value ? '220px' : '240px' }"
|
|
|
+ @input="onInput($event, index)" :maxlength="item.maxlength || '499'"
|
|
|
+ confirm-type="done" />
|
|
|
+ <textarea v-else :disabled="item.disabled"
|
|
|
placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
|
|
|
auto-height type="text" :focus="focusLabel == item.label"
|
|
|
:placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
|
|
|
:style="{ width: item.value ? '220px' : '240px' }" @input="onInput($event, index)"
|
|
|
:maxlength="item.maxlength || '499'" confirm-type="done" />
|
|
|
- <icon v-if="item.value" class="icon" type="clear" size="3.733vw"
|
|
|
+ <icon v-if="item.value && !item.disabled" class="icon" type="clear" size="3.733vw"
|
|
|
@click="onClearInput(index)" />
|
|
|
</view>
|
|
|
<view v-if="item.errText" class="err-text">
|
|
@@ -45,7 +52,7 @@
|
|
|
</view>
|
|
|
<!-- 文本域 -->
|
|
|
<view class="textarea-box" v-else-if="item.type == 'textarea'">
|
|
|
- <textarea class="textarea" :class="item.unBorBot ? '' : 'borBot'"
|
|
|
+ <textarea class="textarea" :class="item.unBorBot ? '' : 'borBot'" :disabled="item.disabled"
|
|
|
placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;" type="text"
|
|
|
:placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
|
|
|
@input="onInput($event, index)" :maxlength="item.maxlength || '499'" confirm-type="done" />
|
|
@@ -55,7 +62,7 @@
|
|
|
:style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
|
<view class="head">
|
|
|
<view class="label">
|
|
|
- <text class="must" v-if="item.isMust">*</text>
|
|
|
+ <text class="must" style="color: #E3041F;" v-if="item.isMust">*</text>
|
|
|
{{ item.label }}
|
|
|
</view>
|
|
|
<view class="state">
|
|
@@ -170,6 +177,41 @@
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 单选 -->
|
|
|
+ <view class="region" v-else-if="item.type == 'radio'">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
+ </view>
|
|
|
+ <u-radio-group v-model="item.value" :placement="item.placement || 'row'"
|
|
|
+ @change="groupChange($event, index)">
|
|
|
+ <u-radio v-for="option in item.options"
|
|
|
+ :customStyle="{ marginRight: tovw(option.marginRight || item.marginRight || 0), marginTop: tovw(option.marginTop || item.marginTop || 0) }"
|
|
|
+ :key="option.label" :label="option.label" :name="option.name" />
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 路由选择器 -->
|
|
|
+ <view class="region" v-else-if="item.type == 'route'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }"
|
|
|
+ @click="item.disabled ? '' : toRoute(item, index)">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
+ </view>
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="value" v-if="item.value.length">
|
|
|
+ {{ item.showValue.join(",") }}
|
|
|
+ </view>
|
|
|
+ <view v-else class="placeholder" hover-class="none">
|
|
|
+ {{ item.placeholder || '请选择' + item.label }}
|
|
|
+ </view>
|
|
|
+ <view v-if="!item.disabled" class="iconfont icon-a-wodetiaozhuan" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
</block>
|
|
|
</view>
|
|
@@ -177,6 +219,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { formattedFiles, viewImage } from "../utils/settleFiles.js"
|
|
|
+
|
|
|
export default {
|
|
|
name: "my_form",
|
|
|
props: {
|
|
@@ -195,6 +238,9 @@ export default {
|
|
|
},
|
|
|
isShowAll: {
|
|
|
type: Function
|
|
|
+ },
|
|
|
+ interrupt: {
|
|
|
+ type: Function
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -204,7 +250,6 @@ export default {
|
|
|
unShowAll: false,
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
watch: {
|
|
|
form: {
|
|
|
handler: function (newVal) {
|
|
@@ -277,6 +322,15 @@ export default {
|
|
|
}] */
|
|
|
},
|
|
|
methods: {
|
|
|
+ toRoute(item, index) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.path
|
|
|
+ });
|
|
|
+ this.$Http.routeSelected = function (selected) {
|
|
|
+ this.$emit('interrupt', item, selected, index)
|
|
|
+ delete this.$Http.routeSelected;
|
|
|
+ }.bind(this)
|
|
|
+ },
|
|
|
onInput(e, index) {
|
|
|
let item = this.list[index];
|
|
|
item.errText = "";
|
|
@@ -287,6 +341,16 @@ export default {
|
|
|
}
|
|
|
this.verify()
|
|
|
},
|
|
|
+ setItem(index, item, back = false) {
|
|
|
+ this.$set(this.list, index, item)
|
|
|
+ this.verify()
|
|
|
+ if (back) uni.navigateBack();
|
|
|
+ },
|
|
|
+ setValue(index, value, back = false) {
|
|
|
+ this.$set(this.list[index], 'value', value)
|
|
|
+ this.verify()
|
|
|
+ if (back) uni.navigateBack();
|
|
|
+ },
|
|
|
onClearInput(index) {
|
|
|
let item = this.list[index];
|
|
|
item.errText = ''
|
|
@@ -478,7 +542,7 @@ export default {
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.head {
|
|
|
+.requiredFieldOnly-head {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
@@ -674,11 +738,13 @@ export default {
|
|
|
width: 100vw;
|
|
|
background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 15px 10px 0;
|
|
|
+ padding: 15px 0 0 10px;
|
|
|
|
|
|
.box {
|
|
|
display: flex;
|
|
|
padding-bottom: 15px;
|
|
|
+ padding-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
.label {
|
|
|
width: 100px;
|