|
|
@@ -1,317 +1,504 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="requiredFieldOnly-head" v-if="requiredFieldOnly">
|
|
|
+ <view>
|
|
|
+ <view class="requiredFieldOnly-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">
|
|
|
+ <block v-if="item.isMust || !unShowAll">
|
|
|
+ <!-- 文本输入 -->
|
|
|
+ <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">
|
|
|
- 基本信息
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
</view>
|
|
|
- <view class="content">
|
|
|
- 仅显示必填信息<text style="padding: 0 2.5px;" /> <u-switch activeColor="#C40C24" v-model="unShowAll" />
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="content" style="flex: 1">
|
|
|
+ <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 ? tovw(220) : tovw(240) }"
|
|
|
+ @input="onInput($event, index)"
|
|
|
+ :maxlength="item.maxlength || '499'"
|
|
|
+ confirm-type="done"
|
|
|
+ />
|
|
|
+ <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 ? tovw(220) : tovw(240) }"
|
|
|
+ @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 ? tovw(220) : tovw(240) }"
|
|
|
+ @input="onInput($event, index)"
|
|
|
+ :maxlength="item.maxlength || '499'"
|
|
|
+ confirm-type="done"
|
|
|
+ />
|
|
|
+ <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">
|
|
|
+ <icon
|
|
|
+ class="icon"
|
|
|
+ color="#E3041F"
|
|
|
+ type="clear"
|
|
|
+ size="2.733vw"
|
|
|
+ />
|
|
|
+ {{ item.errText }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <slot name="head" />
|
|
|
- <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), opacity: item.disabled ? 0.7 : 1 }"
|
|
|
- @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" :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" />
|
|
|
- <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 && !item.disabled" 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 class="textarea-box" v-else-if="item.type == 'textarea'">
|
|
|
- <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" />
|
|
|
- </view>
|
|
|
- <!-- 文本域2 -->
|
|
|
- <view class="textarea-box2" v-else-if="item.type == 'textarea2'" :style="{ marginTop: tovw(item.marginTop || 0)}">
|
|
|
- <view class="label">
|
|
|
- <text class="must" v-if="item.isMust">*</text>
|
|
|
- {{ item.label }}:
|
|
|
- </view>
|
|
|
- <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" />
|
|
|
- </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" style="color: #E3041F;" 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>
|
|
|
- <!-- 选择所在地区 -->
|
|
|
- <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>
|
|
|
- </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 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>
|
|
|
- </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="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" :maxCount="item.maxCount || 99"
|
|
|
- :accept="item.accept" @uploadCallback="uploadCallback($event, index)"
|
|
|
- @onLoading="onUploadLoading($event, index)">
|
|
|
- <view class="upload-box"
|
|
|
- v-if="item.maxCount ? item.value.length != item.maxCount : item.value.length != 99"
|
|
|
- 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="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>
|
|
|
- </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 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.showValue.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>
|
|
|
- <!-- 标签 -->
|
|
|
- <view class="tag-box custom-class-box " v-else-if="item.type == 'tag'"
|
|
|
- :style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
|
- <text class="label">{{ item.label }}</text>
|
|
|
- <view class="tag-list">
|
|
|
- <view class="tag" v-for="tag in item.value" :key="tag">
|
|
|
- <text>{{ tag }}</text>
|
|
|
- <view @click="delTag(tag, index)" class="del">x</view>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <u-modal :title="item.label" :show="showTagModal" style="flex: 0 !important;"
|
|
|
- confirmColor='#C30D23' ref="uModal" showCancelButton :asyncClose="false"
|
|
|
- @confirm="addTagSend(index)" @cancel="showTagModal = false">
|
|
|
- <view class="slot-content">
|
|
|
- <view v-if="item.errText" class="err-text" style="margin-bottom: 10px;">
|
|
|
- <icon class="icon" color="#E3041F" type="clear" size="2.733vw" />
|
|
|
- {{ item.errText }}
|
|
|
- </view>
|
|
|
- <u--input :maxlength="item.maxlength?item.maxlength:'99999'" :focus="showUModal" @input="onTagInput($event, index)"
|
|
|
- :placeholder="item.placeholder || '请输入'" v-model="tagValue" border="bottom"
|
|
|
- clearable />
|
|
|
- </view>
|
|
|
- </u-modal>
|
|
|
- <view class="add-tag" @click="showTagModal = true">+ 添加</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
+ <!-- 文本域 -->
|
|
|
+ <view class="textarea-box" v-else-if="item.type == 'textarea'">
|
|
|
+ <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"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <!-- 显示标题文本域 参考意见反馈 -->
|
|
|
+ <view
|
|
|
+ class="textarea-box2"
|
|
|
+ v-else-if="item.type == 'textarea2'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0) }"
|
|
|
+ >
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
+ </view>
|
|
|
+ <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"
|
|
|
+ />
|
|
|
+ </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" style="color: #e3041f" 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>
|
|
|
+ <!-- 选择所在地区 -->
|
|
|
+ <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>
|
|
|
+ </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 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>
|
|
|
+ </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="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"
|
|
|
+ :maxCount="item.maxCount || 99"
|
|
|
+ :accept="item.accept"
|
|
|
+ @uploadCallback="uploadCallback($event, index)"
|
|
|
+ @onLoading="onUploadLoading($event, index)"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="upload-box"
|
|
|
+ v-if="
|
|
|
+ item.maxCount
|
|
|
+ ? item.value.length != item.maxCount
|
|
|
+ : item.value.length != 99
|
|
|
+ "
|
|
|
+ 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="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>
|
|
|
+ </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 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.showValue.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>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view
|
|
|
+ class="tag-box custom-class-box"
|
|
|
+ v-else-if="item.type == 'tag'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0) }"
|
|
|
+ >
|
|
|
+ <text class="label">{{ item.label }}</text>
|
|
|
+ <view class="tag-list">
|
|
|
+ <view class="tag" v-for="tag in item.value" :key="tag">
|
|
|
+ <text>{{ tag }}</text>
|
|
|
+ <view @click="delTag(tag, index)" class="del">x</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-modal
|
|
|
+ :title="item.label"
|
|
|
+ :show="showTagModal"
|
|
|
+ style="flex: 0 !important"
|
|
|
+ confirmColor="#C30D23"
|
|
|
+ ref="uModal"
|
|
|
+ showCancelButton
|
|
|
+ :asyncClose="false"
|
|
|
+ @confirm="addTagSend(index)"
|
|
|
+ @cancel="showTagModal = false"
|
|
|
+ >
|
|
|
+ <view class="slot-content">
|
|
|
+ <view
|
|
|
+ v-if="item.errText"
|
|
|
+ class="err-text"
|
|
|
+ style="margin-bottom: 10px"
|
|
|
+ >
|
|
|
+ <icon
|
|
|
+ class="icon"
|
|
|
+ color="#E3041F"
|
|
|
+ type="clear"
|
|
|
+ size="2.733vw"
|
|
|
+ />
|
|
|
+ {{ item.errText }}
|
|
|
+ </view>
|
|
|
+ <u--input
|
|
|
+ :maxlength="item.maxlength ? item.maxlength : '99999'"
|
|
|
+ :focus="showUModal"
|
|
|
+ @input="onTagInput($event, index)"
|
|
|
+ :placeholder="item.placeholder || '请输入'"
|
|
|
+ v-model="tagValue"
|
|
|
+ border="bottom"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
</view>
|
|
|
- </block>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ </u-modal>
|
|
|
+ <view class="add-tag" @click="showTagModal = true">+ 添加</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { formattedFiles, viewImage } from "../utils/settleFiles.js"
|
|
|
+import { formattedFiles, viewImage } from "../utils/settleFiles.js";
|
|
|
|
|
|
export default {
|
|
|
- name: "my_form",
|
|
|
- props: {
|
|
|
- form: {
|
|
|
- type: Array,
|
|
|
- default: []
|
|
|
- },
|
|
|
- isUncomplete: {
|
|
|
- type: Function
|
|
|
- },
|
|
|
- onUploading: {
|
|
|
- type: Function
|
|
|
- },
|
|
|
- requiredFieldOnly: {
|
|
|
- type: Boolean
|
|
|
- },
|
|
|
- isShowAll: {
|
|
|
- type: Function
|
|
|
- },
|
|
|
- interrupt: {
|
|
|
- type: Function
|
|
|
- }
|
|
|
+ name: "my_form",
|
|
|
+ props: {
|
|
|
+ form: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [],
|
|
|
- focusLabel: "",
|
|
|
- unShowAll: false,
|
|
|
- showTagModal: false,
|
|
|
- tagValue: ''
|
|
|
- }
|
|
|
+ isUncomplete: {
|
|
|
+ type: Function,
|
|
|
},
|
|
|
- watch: {
|
|
|
- form: {
|
|
|
- handler: function (newVal) {
|
|
|
- if (newVal) {
|
|
|
- this.list = JSON.parse(JSON.stringify(newVal));
|
|
|
- setTimeout(() => {
|
|
|
- this.verify()
|
|
|
- }, 200);
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
- unShowAll: function (newVal) {
|
|
|
- this.$emit("isShowAll", newVal)
|
|
|
+ onUploading: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+ requiredFieldOnly: {
|
|
|
+ type: Boolean,
|
|
|
+ },
|
|
|
+ isShowAll: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+ interrupt: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ focusLabel: "",
|
|
|
+ unShowAll: false,
|
|
|
+ showTagModal: false,
|
|
|
+ tagValue: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ form: {
|
|
|
+ handler: function (newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.list = JSON.parse(JSON.stringify(newVal));
|
|
|
+ setTimeout(() => {
|
|
|
+ this.verify();
|
|
|
+ }, 200);
|
|
|
}
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ unShowAll: function (newVal) {
|
|
|
+ this.$emit("isShowAll", newVal);
|
|
|
},
|
|
|
- async created() {
|
|
|
- /* let list = [{
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ /* let list = [{
|
|
|
key: "name",
|
|
|
type: "text",
|
|
|
label: "标题",
|
|
|
@@ -364,615 +551,628 @@ export default {
|
|
|
isNum: true,
|
|
|
unBorBot: true
|
|
|
}] */
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ delTag(tag, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ console.log(tag);
|
|
|
+ item.value.splice(item.value.indexOf(tag), 1);
|
|
|
+ this.$set(this.list[index], "value", item.value);
|
|
|
},
|
|
|
- methods: {
|
|
|
- delTag(tag, index) {
|
|
|
- let item = this.list[index];
|
|
|
- console.log(tag);
|
|
|
- item.value.splice(item.value.indexOf(tag), 1)
|
|
|
- this.$set(this.list[index], 'value', item.value)
|
|
|
- },
|
|
|
- addTagSend(index) {
|
|
|
- let item = this.list[index]
|
|
|
- if (!item.errText) {
|
|
|
- item.value.push(this.tagValue)
|
|
|
- this.$set(this.list[index], 'value', item.value)
|
|
|
- this.tagValue = ''
|
|
|
- this.showTagModal = false
|
|
|
- }
|
|
|
- },
|
|
|
- toRoute(item, index) {
|
|
|
- let url = item.path;
|
|
|
- if (item.showValue.length) {
|
|
|
- let obj = JSON.stringify({
|
|
|
- value: item.value,
|
|
|
- showValue: item.showValue
|
|
|
- })
|
|
|
- url += (url.indexOf("?") == -1 ? '?alreadySelecteds=' : '&alreadySelecteds=') + obj
|
|
|
+ addTagSend(index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ if (!item.errText) {
|
|
|
+ item.value.push(this.tagValue);
|
|
|
+ this.$set(this.list[index], "value", item.value);
|
|
|
+ this.tagValue = "";
|
|
|
+ this.showTagModal = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toRoute(item, index) {
|
|
|
+ let url = item.path;
|
|
|
+ if (item.showValue.length) {
|
|
|
+ let obj = JSON.stringify({
|
|
|
+ value: item.value,
|
|
|
+ showValue: item.showValue,
|
|
|
+ });
|
|
|
+ url +=
|
|
|
+ (url.indexOf("?") == -1
|
|
|
+ ? "?alreadySelecteds="
|
|
|
+ : "&alreadySelecteds=") + obj;
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url,
|
|
|
+ });
|
|
|
+ this.$Http.routeSelected = function (selected) {
|
|
|
+ this.$emit("interrupt", item, selected, index);
|
|
|
+ delete this.$Http.routeSelected;
|
|
|
+ }.bind(this);
|
|
|
+ },
|
|
|
+ onTagInput(e, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ item.errText = "";
|
|
|
+ if (item.verify && item.verify.length && this.tagValue != "") {
|
|
|
+ let err = item.verify.find(
|
|
|
+ (r) => !new RegExp(r.reg).test(this.tagValue)
|
|
|
+ );
|
|
|
+ if (err) this.$set(this.list[index], "errText", err.errText);
|
|
|
+ }
|
|
|
+ this.verify();
|
|
|
+ },
|
|
|
+ onInput(e, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ item.errText = "";
|
|
|
+ this.$set(this.list[index], "value", e.detail.value);
|
|
|
+ if (item.verify && item.verify.length && item.value != "") {
|
|
|
+ let err = item.verify.find((r) => !new RegExp(r.reg).test(item.value));
|
|
|
+ if (err) this.$set(this.list[index], "errText", err.errText);
|
|
|
+ }
|
|
|
+ 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 = "";
|
|
|
+ this.$set(this.list[index], "value", "");
|
|
|
+ this.verify();
|
|
|
+ },
|
|
|
+ switchChange(e, index) {
|
|
|
+ this.$set(this.list[index], "value", e);
|
|
|
+ this.verify();
|
|
|
+ },
|
|
|
+ changOptions(value, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ if (item.isMultipleChoice) {
|
|
|
+ let i = -1;
|
|
|
+ try {
|
|
|
+ i = item.value.findIndex((v) => v == value);
|
|
|
+ } catch (error) {}
|
|
|
+ if (i == -1) {
|
|
|
+ item.value.push(value);
|
|
|
+ } else {
|
|
|
+ item.value.splice(i, 1);
|
|
|
+ }
|
|
|
+ this.$set(this.list[index], "value", item.value);
|
|
|
+ } else {
|
|
|
+ this.$set(this.list[index], "value", value);
|
|
|
+ }
|
|
|
+ this.verify();
|
|
|
+ },
|
|
|
+ verify() {
|
|
|
+ let list = this.list.filter((v) => v.isMust);
|
|
|
+ let Uncomplete = false;
|
|
|
+ if (list.length)
|
|
|
+ Uncomplete = list.some((v) => {
|
|
|
+ let res = false;
|
|
|
+ if (v.type == "customClass") {
|
|
|
+ if (v.isMultipleChoice) {
|
|
|
+ res = v.value.length == 0;
|
|
|
+ } else {
|
|
|
+ res = v.value == "";
|
|
|
}
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- this.$Http.routeSelected = function (selected) {
|
|
|
- this.$emit('interrupt', item, selected, index)
|
|
|
- delete this.$Http.routeSelected;
|
|
|
- }.bind(this)
|
|
|
- },
|
|
|
- onTagInput(e, index) {
|
|
|
- let item = this.list[index];
|
|
|
- item.errText = "";
|
|
|
- if (item.verify && item.verify.length && this.tagValue != '') {
|
|
|
- let err = item.verify.find(r => !new RegExp(r.reg).test(this.tagValue));
|
|
|
- if (err) this.$set(this.list[index], 'errText', err.errText)
|
|
|
+ } else if (v.type == "upload") {
|
|
|
+ res = v.value.length == 0;
|
|
|
+ } else if (v.type == "text") {
|
|
|
+ res = v.value == "";
|
|
|
+ if (v.errText) res = true;
|
|
|
+ } else if (v.type == "route") {
|
|
|
+ res = v.showValue.length == 0;
|
|
|
+ } else {
|
|
|
+ res = v.value == "";
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ });
|
|
|
+ if (!Uncomplete)
|
|
|
+ Uncomplete = this.list.filter((v) => !v.isMust).some((v) => v.errText);
|
|
|
+ this.$emit("isUncomplete", Uncomplete);
|
|
|
+ },
|
|
|
+ previewImg(item) {
|
|
|
+ viewImage(item.url);
|
|
|
+ },
|
|
|
+ uploadCallback(attachmentids, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ classname: "system.attachment.Attachment",
|
|
|
+ method: "createFileLink",
|
|
|
+ content: {
|
|
|
+ ownertable: item.ownertable,
|
|
|
+ ownerid: item.ownerid,
|
|
|
+ usetype: item.usetype,
|
|
|
+ attachmentids,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("绑定附件", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ res.data = formattedFiles(res.data);
|
|
|
+ item.value.push(res.data[0]);
|
|
|
+
|
|
|
+ //临时文件
|
|
|
+ if (res.data[0].ownertable == "temporary")
|
|
|
+ try {
|
|
|
+ item.temporarys.push(attachmentids[0]);
|
|
|
+ } catch (error) {
|
|
|
+ item.temporarys = [attachmentids[0]];
|
|
|
}
|
|
|
- this.verify()
|
|
|
- },
|
|
|
- onInput(e, index) {
|
|
|
- let item = this.list[index];
|
|
|
- item.errText = "";
|
|
|
- this.$set(this.list[index], 'value', e.detail.value)
|
|
|
- if (item.verify && item.verify.length && item.value != '') {
|
|
|
- let err = item.verify.find(r => !new RegExp(r.reg).test(item.value));
|
|
|
- if (err) this.$set(this.list[index], 'errText', err.errText)
|
|
|
+
|
|
|
+ this.$set(this.list[index], "value", item.value);
|
|
|
+ this.verify();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteFiles() {
|
|
|
+ this.list.forEach((v) => {
|
|
|
+ if (v.type == "upload") {
|
|
|
+ let linksids = v.value
|
|
|
+ .filter((v) => v.ownertable == "temporary")
|
|
|
+ .map((v) => v.linksid);
|
|
|
+ if (linksids.length)
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ classname: "system.attachment.Attachment",
|
|
|
+ method: "deleteFileLink",
|
|
|
+ content: {
|
|
|
+ linksids,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("处理删除附件", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onUploadLoading(e, index) {
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ deleteFile(flie, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ item.value = item.value.filter(
|
|
|
+ (v) => v.attachmentid != flie.attachmentid
|
|
|
+ );
|
|
|
+ //临时文件
|
|
|
+ if (flie.ownertable == "temporary") {
|
|
|
+ item.temporarys = item.temporarys.filter((v) => v != flie.attachmentid);
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ classname: "system.attachment.Attachment",
|
|
|
+ method: "deleteFileLink",
|
|
|
+ content: {
|
|
|
+ linksids: [flie.linksid],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("处理删除附件", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ try {
|
|
|
+ item.linksids.push(flie.linksid);
|
|
|
+ } catch (error) {
|
|
|
+ item.linksids = [flie.linksid];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this.list[index], "value", item.value);
|
|
|
+ this.verify();
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let res = {};
|
|
|
+ this.list.forEach((v) => {
|
|
|
+ if (v.type == "upload") {
|
|
|
+ res.files = {
|
|
|
+ temporarys: [],
|
|
|
+ linksids: [],
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ res.files.temporarys = v.temporarys || [];
|
|
|
+ } catch (error) {}
|
|
|
+ try {
|
|
|
+ res.files.linksids = v.linksids || [];
|
|
|
+ } catch (error) {}
|
|
|
+ } else if (v.type == "region") {
|
|
|
+ if (v.value.length) {
|
|
|
+ res.province = v.value[0];
|
|
|
+ res.city = v.value[1];
|
|
|
+ res.county = v.value[2];
|
|
|
+ } else {
|
|
|
+ res.province = "";
|
|
|
+ res.city = "";
|
|
|
+ res.county = "";
|
|
|
}
|
|
|
- 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 = ''
|
|
|
- this.$set(this.list[index], 'value', '')
|
|
|
- this.verify()
|
|
|
- },
|
|
|
- switchChange(e, index) {
|
|
|
- this.$set(this.list[index], 'value', e)
|
|
|
- this.verify()
|
|
|
- },
|
|
|
- changOptions(value, index) {
|
|
|
- let item = this.list[index];
|
|
|
- if (item.isMultipleChoice) {
|
|
|
- let i = -1;
|
|
|
- try {
|
|
|
- i = item.value.findIndex(v => v == value)
|
|
|
- } catch (error) {
|
|
|
- }
|
|
|
- if (i == -1) {
|
|
|
- item.value.push(value)
|
|
|
- } else {
|
|
|
- item.value.splice(i, 1)
|
|
|
- }
|
|
|
- this.$set(this.list[index], 'value', item.value)
|
|
|
+ } else if (v.type == "switch") {
|
|
|
+ if (v.isNum) {
|
|
|
+ res[v.key] = v.value ? 1 : 0;
|
|
|
} else {
|
|
|
- this.$set(this.list[index], 'value', value)
|
|
|
+ res[v.key] = v.value;
|
|
|
}
|
|
|
- this.verify()
|
|
|
- },
|
|
|
- verify() {
|
|
|
- let list = this.list.filter(v => v.isMust);
|
|
|
- let Uncomplete = false;
|
|
|
- if (list.length) Uncomplete = list.some(v => {
|
|
|
- let res = false;
|
|
|
- if (v.type == 'customClass') {
|
|
|
- if (v.isMultipleChoice) {
|
|
|
- res = v.value.length == 0;
|
|
|
- } else {
|
|
|
- res = v.value == "";
|
|
|
- }
|
|
|
- } else if (v.type == 'upload') {
|
|
|
- res = v.value.length == 0;
|
|
|
- } else if (v.type == 'text') {
|
|
|
- res = v.value == "";
|
|
|
- if (v.errText) res = true;
|
|
|
- } else if (v.type == 'route') {
|
|
|
- res = v.showValue.length == 0;
|
|
|
- } else {
|
|
|
- res = v.value == "";
|
|
|
- }
|
|
|
- return res
|
|
|
- })
|
|
|
- if (!Uncomplete) Uncomplete = this.list.filter(v => !v.isMust).some(v => v.errText);
|
|
|
- this.$emit("isUncomplete", Uncomplete)
|
|
|
- },
|
|
|
- previewImg(item) {
|
|
|
- viewImage(item.url)
|
|
|
- },
|
|
|
- uploadCallback(attachmentids, index) {
|
|
|
- let item = this.list[index];
|
|
|
- this.$Http.basic({
|
|
|
- "classname": "system.attachment.Attachment",
|
|
|
- "method": "createFileLink",
|
|
|
- "content": {
|
|
|
- ownertable: item.ownertable,
|
|
|
- ownerid: item.ownerid,
|
|
|
- usetype: item.usetype,
|
|
|
- attachmentids
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log('绑定附件', res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- res.data = formattedFiles(res.data)
|
|
|
- item.value.push(res.data[0]);
|
|
|
-
|
|
|
- //临时文件
|
|
|
- if (res.data[0].ownertable == "temporary") try {
|
|
|
- item.temporarys.push(attachmentids[0])
|
|
|
- } catch (error) {
|
|
|
- item.temporarys = [attachmentids[0]]
|
|
|
- }
|
|
|
-
|
|
|
- this.$set(this.list[index], 'value', item.value)
|
|
|
- this.verify()
|
|
|
- })
|
|
|
- },
|
|
|
- deleteFiles() {
|
|
|
- this.list.forEach(v => {
|
|
|
- if (v.type == 'upload') {
|
|
|
- let linksids = v.value.filter(v => v.ownertable == "temporary").map(v => v.linksid)
|
|
|
- if (linksids.length) this.$Http.basic({
|
|
|
- "classname": "system.attachment.Attachment",
|
|
|
- "method": "deleteFileLink",
|
|
|
- "content": {
|
|
|
- linksids
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log("处理删除附件", res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- onUploadLoading(e, index) {
|
|
|
- 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()
|
|
|
- },
|
|
|
- deleteFile(flie, index) {
|
|
|
- let item = this.list[index];
|
|
|
- item.value = item.value.filter(v => v.attachmentid != flie.attachmentid)
|
|
|
- //临时文件
|
|
|
- if (flie.ownertable == "temporary") {
|
|
|
- item.temporarys = item.temporarys.filter(v => v != flie.attachmentid)
|
|
|
- this.$Http.basic({
|
|
|
- "classname": "system.attachment.Attachment",
|
|
|
- "method": "deleteFileLink",
|
|
|
- "content": {
|
|
|
- linksids: [flie.linksid]
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log("处理删除附件", res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
+ } else if (v.type == "route") {
|
|
|
+ if (v.isRadio) {
|
|
|
+ const routeValue =
|
|
|
+ typeof v.value.length == "number"
|
|
|
+ ? v.value.length
|
|
|
+ ? v.value[0]
|
|
|
+ : ""
|
|
|
+ : v.value || {};
|
|
|
+ if (v.keys) {
|
|
|
+ v.keys.forEach((e) => {
|
|
|
+ res[e] = routeValue ? routeValue[e] || "" : "";
|
|
|
});
|
|
|
+ } else {
|
|
|
+ res[v.key] = {
|
|
|
+ name: v.showValue[0] || "",
|
|
|
+ value: routeValue,
|
|
|
+ };
|
|
|
+ }
|
|
|
} else {
|
|
|
- try {
|
|
|
- item.linksids.push(flie.linksid)
|
|
|
- } catch (error) {
|
|
|
- item.linksids = [flie.linksid]
|
|
|
- }
|
|
|
+ res[v.key] = {
|
|
|
+ name: v.showValue || [],
|
|
|
+ value: v.value || [],
|
|
|
+ };
|
|
|
}
|
|
|
- this.$set(this.list[index], 'value', item.value)
|
|
|
- this.verify()
|
|
|
- },
|
|
|
- submit() {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- let res = {};
|
|
|
- this.list.forEach(v => {
|
|
|
- if (v.type == 'upload') {
|
|
|
- res.files = {
|
|
|
- temporarys: [],
|
|
|
- linksids: [],
|
|
|
- }
|
|
|
- try {
|
|
|
- res.files.temporarys = v.temporarys || []
|
|
|
- } catch (error) {
|
|
|
-
|
|
|
- }
|
|
|
- try {
|
|
|
- res.files.linksids = v.linksids || []
|
|
|
- } catch (error) {
|
|
|
-
|
|
|
- }
|
|
|
- } else if (v.type == 'region') {
|
|
|
- if (v.value.length) {
|
|
|
- res.province = v.value[0];
|
|
|
- res.city = v.value[1];
|
|
|
- res.county = v.value[2];
|
|
|
- } else {
|
|
|
- res.province = ''
|
|
|
- res.city = ''
|
|
|
- res.county = ''
|
|
|
- }
|
|
|
- } else if (v.type == 'switch') {
|
|
|
- if (v.isNum) {
|
|
|
- res[v.key] = v.value ? 1 : 0;
|
|
|
- } else {
|
|
|
- res[v.key] = v.value;
|
|
|
- }
|
|
|
- } else if (v.type == 'route') {
|
|
|
- if (v.isRadio) {
|
|
|
- const routeValue = typeof v.value.length == 'number' ? v.value.length ? v.value[0] : '' : v.value || {}
|
|
|
- if (v.keys) {
|
|
|
- v.keys.forEach(e => {
|
|
|
- res[e] = routeValue ? routeValue[e] || '' : ''
|
|
|
- })
|
|
|
- } else {
|
|
|
- res[v.key] = {
|
|
|
- name: v.showValue[0] || '',
|
|
|
- value: routeValue
|
|
|
- };
|
|
|
- }
|
|
|
- } else {
|
|
|
- res[v.key] = {
|
|
|
- name: v.showValue || [],
|
|
|
- value: v.value || []
|
|
|
- };;
|
|
|
- }
|
|
|
- } else {
|
|
|
- try {
|
|
|
- res[v.key] = v.value.trim();
|
|
|
- } catch (error) {
|
|
|
- res[v.key] = v.value;
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- resolve(res)
|
|
|
- })
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ try {
|
|
|
+ res[v.key] = v.value.trim();
|
|
|
+ } catch (error) {
|
|
|
+ res[v.key] = v.value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ resolve(res);
|
|
|
+ });
|
|
|
},
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
.requiredFieldOnly-head {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100vw;
|
|
|
- height: 45px;
|
|
|
- background: #F7F7F7;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .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;
|
|
|
- }
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.borBot {
|
|
|
- border-bottom: 1px #DDDDDD solid;
|
|
|
+ border-bottom: 1px #dddddd solid;
|
|
|
}
|
|
|
|
|
|
.custom-class-box {
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
- padding: 15px 0 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 0 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .head {
|
|
|
- width: 355px;
|
|
|
- height: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
-
|
|
|
- .label {
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
+ .head {
|
|
|
+ width: 355px;
|
|
|
+ height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
|
|
|
- .state {
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
|
|
|
- .options {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .option {
|
|
|
- padding: 6px 10px;
|
|
|
- text-align: center;
|
|
|
- min-width: 81px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- border-radius: 5px;
|
|
|
- background: #F2F2F2;
|
|
|
- margin-top: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ .state {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- background: #C30D23;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .options {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .option {
|
|
|
+ padding: 6px 10px;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 81px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
- .file-box {
|
|
|
- position: relative;
|
|
|
- width: 355px;
|
|
|
- height: 240px;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .video,
|
|
|
- .image {
|
|
|
- width: 355px;
|
|
|
- height: 240px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ background: #c30d23;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .delete {
|
|
|
- position: absolute;
|
|
|
- width: 30px;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+ .content {
|
|
|
+ .file-box {
|
|
|
+ position: relative;
|
|
|
+ width: 355px;
|
|
|
+ height: 240px;
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
- .upload-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 355px;
|
|
|
- height: 45px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px dashed #C30D23;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #C30D23;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+ .video,
|
|
|
+ .image {
|
|
|
+ width: 355px;
|
|
|
+ height: 240px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ position: absolute;
|
|
|
+ width: 30px;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .upload-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 355px;
|
|
|
+ height: 45px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px dashed #c30d23;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #c30d23;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.textarea-box {
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .textarea {
|
|
|
- width: 355px;
|
|
|
- height: 160px;
|
|
|
- padding: 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
+ .textarea {
|
|
|
+ width: 355px;
|
|
|
+ height: 160px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
}
|
|
|
.textarea-box2 {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: #ffffff;
|
|
|
- padding: 15px 0 15px 10px;
|
|
|
- .label {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- flex-shrink: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 15px 0 15px 10px;
|
|
|
+ .label {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
- .must {
|
|
|
- color: #E3041F;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .textarea {
|
|
|
- width: 355px;
|
|
|
- height: 160px;
|
|
|
- padding: 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 0 auto;
|
|
|
+ .must {
|
|
|
+ color: #e3041f;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
+ }
|
|
|
+ .textarea {
|
|
|
+ width: 355px;
|
|
|
+ height: 160px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.input-box {
|
|
|
- width: 100vw;
|
|
|
- background: #fff;
|
|
|
+ width: 100vw;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 54.4px;
|
|
|
+ padding: 15px 0;
|
|
|
box-sizing: border-box;
|
|
|
- padding-left: 10px;
|
|
|
-
|
|
|
- .box {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- min-height: 54.4px;
|
|
|
- padding: 15px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .label {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- flex-shrink: 0;
|
|
|
+ .label {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
- .must {
|
|
|
- color: #E3041F;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ .must {
|
|
|
+ color: #e3041f;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .content-box {
|
|
|
- padding-right: 10px;
|
|
|
-
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
-
|
|
|
+ .content-box {
|
|
|
+ padding-right: 10px;
|
|
|
|
|
|
- .icon {
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .err-text {
|
|
|
- font-size: 12px;
|
|
|
- color: #E3041F;
|
|
|
- margin-bottom: -12px;
|
|
|
+ .icon {
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .icon {
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .err-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #e3041f;
|
|
|
+ margin-bottom: -12px;
|
|
|
|
|
|
+ .icon {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.region {
|
|
|
- width: 100vw;
|
|
|
- background: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15px 0 0 10px;
|
|
|
-
|
|
|
- .box {
|
|
|
- display: flex;
|
|
|
- padding-bottom: 15px;
|
|
|
- padding-right: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .label {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .must {
|
|
|
- color: #E3041F;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100vw;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px 0 0 10px;
|
|
|
|
|
|
- .content-box {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
-
|
|
|
- .placeholder {
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #BBBBBB;
|
|
|
- }
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ padding-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
+ .label {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
- }
|
|
|
+ .must {
|
|
|
+ color: #e3041f;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-}
|
|
|
+ .content-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
|
|
|
-.tag-box {
|
|
|
- .label {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
- line-height: 20px;
|
|
|
+ .placeholder {
|
|
|
font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- flex-shrink: 0;
|
|
|
+ color: #bbbbbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .must {
|
|
|
- color: #E3041F;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+.tag-box {
|
|
|
+ .label {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .must {
|
|
|
+ color: #e3041f;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .tag-list {
|
|
|
- display: flex;
|
|
|
- align-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .err-text {
|
|
|
- font-size: 12px;
|
|
|
- color: #E3041F;
|
|
|
- margin-bottom: -12px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .tag-list {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
- .tag {
|
|
|
- padding: 6px 10px;
|
|
|
- background: #F2F2F2;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- align-content: center;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0 !important;
|
|
|
- }
|
|
|
+ .err-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #e3041f;
|
|
|
+ margin-bottom: -12px;
|
|
|
|
|
|
- .del {
|
|
|
- margin-left: 10px;
|
|
|
- padding: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .add-tag {
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- border: 1px dashed #C30D23;
|
|
|
- padding: 6px 20px;
|
|
|
- color: #C30D23;
|
|
|
- font-weight: 400;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ .tag {
|
|
|
+ padding: 6px 10px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del {
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-tag {
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ border: 1px dashed #c30d23;
|
|
|
+ padding: 6px 20px;
|
|
|
+ color: #c30d23;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
