|
@@ -1,140 +1,184 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <view class="head" v-if="requiredFieldOnly">
|
|
|
+ <view class="label">
|
|
|
+ 基本信息
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ 仅显示必填信息<text style="padding: 0 2.5px;" /> <u-switch activeColor="#C40C24" v-model="unShowAll" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <slot name="head" />
|
|
|
<block v-for="(item, index) in list " :key="item.key">
|
|
|
- <!-- 文本输入 -->
|
|
|
- <view class="input-box" v-if="item.type == 'text'" :style="{ marginTop: tovw(item.marginTop || 0) }"
|
|
|
- @click="focusLabel = item.label">
|
|
|
- <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="content">
|
|
|
- <input v-if="item.inputmode == 'number'" type="number"
|
|
|
- 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
|
|
|
- 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" @click="onClearInput(index)" />
|
|
|
+ <block v-if="item.isMust || !unShowAll">
|
|
|
+ <!-- 文本输入 -->
|
|
|
+ <view class="input-box" v-if="item.type == 'text'" :style="{ marginTop: tovw(item.marginTop || 0) }"
|
|
|
+ @click="focusLabel = item.label">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
</view>
|
|
|
- <view v-if="item.errText" class="err-text">
|
|
|
- <icon class="icon" color="#E3041F" type="clear" size="2.733vw" />
|
|
|
- {{ item.errText }}
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="content">
|
|
|
+ <input v-if="item.inputmode == 'number'" type="number"
|
|
|
+ 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
|
|
|
+ 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"
|
|
|
+ @click="onClearInput(index)" />
|
|
|
+ </view>
|
|
|
+ <view v-if="item.errText" class="err-text">
|
|
|
+ <icon class="icon" color="#E3041F" type="clear" size="2.733vw" />
|
|
|
+ {{ item.errText }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 文本域 -->
|
|
|
- <view class="textarea-box" v-else-if="item.type == 'textarea'">
|
|
|
- <textarea class="textarea" :class="item.unBorBot ? '' : 'borBot'"
|
|
|
- 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" />
|
|
|
- </view>
|
|
|
- <!-- 自定义选项分类 -->
|
|
|
- <view class="custom-class-box" v-else-if="item.type == 'customClass'"
|
|
|
- :style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
|
- <view class="head">
|
|
|
- <view class="label">
|
|
|
- <text class="must" v-if="item.isMust">*</text>
|
|
|
- {{ item.label }}
|
|
|
- </view>
|
|
|
- <view class="state">
|
|
|
- {{ item.isMultipleChoice ? '可多选' : '仅单选' }}
|
|
|
- </view>
|
|
|
+ <!-- 文本域 -->
|
|
|
+ <view class="textarea-box" v-else-if="item.type == 'textarea'">
|
|
|
+ <textarea class="textarea" :class="item.unBorBot ? '' : 'borBot'"
|
|
|
+ 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" />
|
|
|
</view>
|
|
|
- <view class="options">
|
|
|
- <view class="option"
|
|
|
- :class="item.isMultipleChoice ? (item.value.includes(option.value) ? 'active' : '') : (item.value == option.value ? 'active' : '')"
|
|
|
- v-for=" option in item.list " :key="option.value" hover-class="navigator-hover"
|
|
|
- @click="changOptions(option.value, index)">
|
|
|
- {{ option.remarks }}
|
|
|
+ <!-- 自定义选项分类 -->
|
|
|
+ <view class="custom-class-box" v-else-if="item.type == 'customClass'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
|
+ <view class="head">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ {{ item.isMultipleChoice ? '可多选' : '仅单选' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="options">
|
|
|
+ <view class="option"
|
|
|
+ :class="item.isMultipleChoice ? (item.value.includes(option.value) ? 'active' : '') : (item.value == option.value ? 'active' : '')"
|
|
|
+ v-for=" option in item.list " :key="option.value" hover-class="navigator-hover"
|
|
|
+ @click="changOptions(option.value, index)">
|
|
|
+ {{ option.remarks }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 选择所在地区 -->
|
|
|
- <picker class="region" @change="selectRegion($event, index)" mode='region' :disabled="item.disabled"
|
|
|
- :value="item.value" v-else-if="item.type == 'region'"
|
|
|
- :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }">
|
|
|
- <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
- <view class="label">
|
|
|
- <text class="must" v-if="item.isMust">*</text>
|
|
|
- {{ item.label }}:
|
|
|
+ <!-- 选择所在地区 -->
|
|
|
+ <picker class="region" @change="selectRegion($event, index)" mode='region' :disabled="item.disabled"
|
|
|
+ :value="item.value" v-else-if="item.type == 'region'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }">
|
|
|
+ <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.value.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 class="content-box">
|
|
|
- <view class="value" v-if="item.value.length">
|
|
|
- {{ item.value.join(",") }}
|
|
|
+ </picker>
|
|
|
+ <!-- 日期 -->
|
|
|
+ <picker class="region" @change="selectRegion($event, index)" mode='date' :disabled="item.disabled"
|
|
|
+ :value="item.value" v-else-if="item.type == 'date'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
</view>
|
|
|
- <view v-else class="placeholder" hover-class="none">
|
|
|
- {{ item.placeholder || '请选择' + item.label }}
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="value" v-if="item.value">
|
|
|
+ {{ item.value }}
|
|
|
+ </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 v-if="!item.disabled" class="iconfont icon-a-wodetiaozhuan" />
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </picker>
|
|
|
- <!-- 上传附件 -->
|
|
|
- <view class="custom-class-box" v-else-if="item.type == 'upload'"
|
|
|
- :style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
|
- <view class="head">
|
|
|
- <view class="label">
|
|
|
- <text class="must" v-if="item.isMust">*</text>
|
|
|
- {{ item.label }}
|
|
|
+ </picker>
|
|
|
+ <!-- 上传附件 -->
|
|
|
+ <view class="custom-class-box" v-else-if="item.type == 'upload'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
|
+ <view class="head">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ {{ item.placeholder }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="state">
|
|
|
- {{ item.placeholder }}
|
|
|
+ <view class="content">
|
|
|
+ <view class="file-box" v-for="file in item.value" :key="file.attachmentid">
|
|
|
+ <image class="image" v-if="file.fileType == 'image'" :src="file.url" mode="aspectFill"
|
|
|
+ lazy-load="true" @click="previewImg(file)" />
|
|
|
+ <video v-else-if="file.fileType == 'video'" class="video" :poster="file.subfiles[0].url"
|
|
|
+ :src="file.url" />
|
|
|
+ <image class="delete" @click.stop="deleteFile(file, index)"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404241713944430197B47af9b2f.png"
|
|
|
+ mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <My_upload v-if="item.allowUpload" :showLoading="false" :accept="item.accept"
|
|
|
+ @uploadCallback="uploadCallback($event, index)" @onLoading="onUploadLoading($event, index)">
|
|
|
+ <view class="upload-box" hover-class="navigator-hover">
|
|
|
+ <u-loading-icon v-if="item.loading" />
|
|
|
+ <text v-else class="iconfont icon-xiazai" />
|
|
|
+ <text style="margin-left: 5px;">上传</text>
|
|
|
+ </view>
|
|
|
+ </My_upload>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="content">
|
|
|
- <view class="file-box" v-for="file in item.value" :key="file.attachmentid">
|
|
|
- <image class="image" v-if="file.fileType == 'image'" :src="file.url" mode="aspectFill"
|
|
|
- lazy-load="true" @click="previewImg(file)" />
|
|
|
- <video v-else-if="file.fileType == 'video'" class="video" :poster="file.subfiles[0].url"
|
|
|
- :src="file.url" />
|
|
|
- <image class="delete" @click.stop="deleteFile(file, index)"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404241713944430197B47af9b2f.png"
|
|
|
- mode="widthFix" />
|
|
|
- </view>
|
|
|
- <my-upload v-if="item.allowUpload" :showLoading="false" :accept="item.accept"
|
|
|
- @uploadCallback="uploadCallback($event, index)" @onLoading="onUploadLoading($event, index)">
|
|
|
- <view class="upload-box" hover-class="navigator-hover">
|
|
|
- <u-loading-icon v-if="item.loading" />
|
|
|
- <text v-else class="iconfont icon-xiazai" />
|
|
|
- <text style="margin-left: 5px;">上传</text>
|
|
|
+ <!-- 开关 -->
|
|
|
+ <view class="region" v-else-if="item.type == 'switch'">
|
|
|
+ <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 />
|
|
|
+ <u-switch activeColor="#70D95D" v-model="item.value" :disabled="item.disabled"
|
|
|
+ @change="switchChange($event, index)" />
|
|
|
</view>
|
|
|
- </my-upload>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 开关 -->
|
|
|
- <view class="region" v-else-if="item.type == 'switch'">
|
|
|
- <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 />
|
|
|
- <u-switch activeColor="#70D95D" v-model="item.value" :disabled="item.disabled"
|
|
|
- @change="switchChange($event, index)" />
|
|
|
+ </view>
|
|
|
+ <!-- 性别 -->
|
|
|
+ <view class="region" v-else-if="item.type == 'sex'">
|
|
|
+ <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="row" @change="groupChange($event, index)">
|
|
|
+ <u-radio :customStyle="{ marginRight: tovw(60) }" label="男" name="男" />
|
|
|
+ <u-radio label="女" name="女" />
|
|
|
+ </u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </block>
|
|
|
</block>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import myUpload from "./my-upload.vue";
|
|
|
import { formattedFiles, viewImage } from "../utils/settleFiles.js"
|
|
|
export default {
|
|
|
name: "my_form",
|
|
|
- components: { myUpload },
|
|
|
props: {
|
|
|
form: {
|
|
|
type: Array,
|
|
@@ -145,14 +189,22 @@ export default {
|
|
|
},
|
|
|
onUploading: {
|
|
|
type: Function
|
|
|
+ },
|
|
|
+ requiredFieldOnly: {
|
|
|
+ type: Boolean
|
|
|
+ },
|
|
|
+ isShowAll: {
|
|
|
+ type: Function
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
list: [],
|
|
|
- focusLabel: ""
|
|
|
+ focusLabel: "",
|
|
|
+ unShowAll: false,
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
watch: {
|
|
|
form: {
|
|
|
handler: function (newVal) {
|
|
@@ -164,6 +216,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
immediate: true,
|
|
|
+ },
|
|
|
+ unShowAll: function (newVal) {
|
|
|
+ this.$emit("isShowAll", newVal)
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
@@ -337,6 +392,10 @@ export default {
|
|
|
this.$set(this.list[index], 'loading', e)
|
|
|
this.$emit("onUploading", e)
|
|
|
},
|
|
|
+ groupChange(e, index) {
|
|
|
+ this.$set(this.list[index], 'loading', e)
|
|
|
+ this.verify()
|
|
|
+ },
|
|
|
selectRegion({ detail }, index) {
|
|
|
this.$set(this.list[index], 'value', detail.value)
|
|
|
this.verify()
|
|
@@ -419,6 +478,33 @@ export default {
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
+.head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100vw;
|
|
|
+ height: 45px;
|
|
|
+ background: #F7F7F7;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.borBot {
|
|
|
border-bottom: 1px #DDDDDD solid;
|
|
|
}
|