gxd-vue-library

<template> <div class="xd-base-field"> <el-form v-if="formStatus" class="xd-base-field-warpper" :ref="refID" :model="form" :rules="rules" :label-width="labelWidth" @submit.native.prevent > <template v-for="(item) in uiList"> <div class="el-title" :class="[getClass(item),item.extendClass]" v-if="item.ele === 'title'" v-show="item.label" @click="handleGroup(item)" > <div v-html="item.label"></div> <div class="el-title-icon" v-if="isGroupHide"> <i v-if="groupStatus[`group_id_${item.group_id}`]" class="el-icon-arrow-up"></i> <i v-else class="el-icon-arrow-down"></i> </div> </div> <slot v-else-if="item.ele === 'slot'" :name="item.slot" :form="form" :width="labelWidth"></slot> <el-form-item v-else :label="item.ele === 'line'?'':item.label" :prop="getProp(item)" :class="[ getCustomClass(item), (groupStatus[`group_id_${item.group_id}`] === undefined ? '': (groupStatus[`group_id_${item.group_id}`]?'':'jfb-icon-hidden')), item.extendClass]" > <div class="xd-base-field__box" :class="{ is_inline: getInline(item),is_block: !getInline(item)}" > <template v-if="item.ele === 'el-input'"> <el-input v-model="form[item.valueKey]" :type="item['type']" :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input40'" :placeholder="item['placeholder']" :disabled="item['disabled'] === undefined ? false: item['disabled']" :autosize="item['type'] === 'textarea' ? textareaSize: false" :maxlength="item['max']" :minlength="item['min']" @input="handleElInout(item.valueKey)" clearable ></el-input> </template> <template v-if="item.ele === 'el-html'"> <div v-html="item.value"></div> </template> <div v-else-if="item.ele === 'line'" class="line-x" :class="{'cus-indent': item.indent}" ><span v-html="item.label"></span></div>  {{each files}} <template v-else-if="item.ele === '{{$value.value}}'"> <{{$value.value}} v-model="form[item['valueKey']]" :disabled="item['disabled'] === undefined ? false: item['disabled']" :placeholder="item['placeholder']" :default-value="item['value']" :setting="item['setting']" :size="item['size']" :maps="item['maps']" :key="item['isKey'] ? item['key'] : item['valueKey']" :cus-refresh="item['refresh'] || 'refresh'" :use-custom-rule="item['useCustomRules']" :required="getRequire(item['rules'])" :handle-custom="item['handleCustom']" :list="item['list']" {{if $value.value === 'xd-cascade'}} :class="((item['className'] && !isPC) ?'input100' : item['className']) || ''" {{else}} :class="item['className'] || ''" {{/if}} ></{{$value.value}}> </template> {{/each}}   {{each privateFiles}} <template v-else-if="item.ele === '{{$value.value}}'"> <{{$value.value}} v-model="form[item['valueKey']]" :disabled="item['disabled'] === undefined ? false: item['disabled']" :placeholder="item['placeholder']" :default-value="item['value']" :setting="item['setting']" :size="item['size']" :cus-refresh="item['refresh'] || 'refresh'" :maps="item['maps']" :key="item['isKey'] ? item['key'] : item['valueKey']" :use-custom-rule="item['useCustomRules']" :required="getRequire(item['rules'])" :handle-custom="item['handleCustom']" :list="item['list']" {{if $value.value === 'xd-cascade'}} :class="((item['className'] && !isPC) ?'input100' : item['className']) || ''" {{else}} :class="item['className'] || ''" {{/if}} ></{{$value.value}}> </template> {{/each}}  <template v-else-if="item.ele === 'xd-remote-select'"> <xd-remote-input :placeholder="item['placeholder']" :width="item['width'] || '30%'" :default-value="item['value']" :multiple="item['multiple']" :remote-search="item['remoteSearch']" :disabled="item['disabled'] === undefined ? false: item['disabled']" :collapse-tags="item['collapseTags']" :class="item['className'] || ''" :mode="item['mode'] || false" v-model="form[item['valueKey']]" ></xd-remote-input> </template> <template v-else-if="item.ele === 'xd-select-list'"> <xd-select-list :clearable="true" v-model="form[item['valueKey']]" :placeholder="item['placeholder']" :default-value="item['value']" :size="size" :list="item['list']" :multiple="item['multiple']" :collapse-tags="item['collapseTags'] !== undefined ? item['collapseTags']: true" :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input20'" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-select-list> </template> <template v-else-if="item.ele === 'xd-select-status'"> <xd-select-status :default-value="item['value']" v-model="form[item['valueKey']]" :placeholder="item['placeholder']" :type-value="item['backValueType'] || 1" :type="item['list']" :is-all="item['isAll']||item['isall']" :size="size" :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input20'" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-select-status> </template> <template v-else-if="item.ele === 'xd-radio-status'"> <xd-radio-status :key="item['isKey'] ? item['key'] : item['valueKey']" :default-value="item['value']" v-model="form[item['valueKey']]" :placeholder="item['placeholder']" :type="item['list']" :type-value="item['backValueType'] || 1" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-radio-status> </template> <template v-else-if="item.ele === 'xd-radio'"> <xd-radio-list :key="item['isKey'] ? item['key'] : item['valueKey']" :default-value="item['value']" v-model="form[item['valueKey']]" :placeholder="item['placeholder']" :list="item['list']" :border="item['border'] || false" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-radio-list> </template> <template v-else-if="item.ele === 'xd-switch'"> <xd-switch :default-value="item['value']" v-model="form[item['valueKey']]" :showTips="item['showTips']" :list="item['list']" :type-value="item['backValueType']" :color="item['color']" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-switch> </template> <template v-else-if="item.ele === 'xd-check'"> <xd-check-list :key="item['isKey'] ? item['key'] : item['valueKey']" :default-value="item['value']" v-model="form[item['valueKey']]" :list="item['list']" :size="size" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-check-list> </template> <template v-else-if="item.ele === 'xd-range'"> <xd-range v-model="form[`xdRange__${item['valueKey'].join('__')}`]" :placeholder="item['placeholder']" :size="size" :width="item['width']" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-range> </template> <template v-else-if="item.ele === 'xd-time-picker'"> <el-time-picker is-range v-model="form[item['valueKey']]" range-separator="至" :start-placeholder="item['placeholder'][0]" :end-placeholder="item['placeholder'][1]" :value-format="item['formatValue']" :format="item['format']" :selectableRange="item['selectableRange'] ? item['selectableRange']: []" ></el-time-picker> </template> <template v-else-if="item.ele === 'xd-date-range'"> <el-date-picker v-model="form[`xdDate__${item['valueKey'].join('__')}`]" type="datetimerange" class="xd-search__datetimerange" :picker-options="getTimeOptions(item)" range-separator="至" :start-placeholder="item['placeholder'][0]" :end-placeholder="item['placeholder'][1]" :value-format="item['formatValue']" :format="item['format']" align="right" :disabled="item['disabled'] === undefined ? false: item['disabled']" > </el-date-picker> </template> <template v-else-if="item.ele === 'xd-date'"> <el-date-picker v-model="form[item['valueKey']]" type="datetime" :placeholder="item['placeholder']" :value-format="item['formatValue']" :format="item['format']" :disabled="item['disabled'] === undefined ? false: item['disabled']" :picker-options="getTimeOptions(item, false)" > </el-date-picker> </template> <template v-else-if="item.ele === 'xd-transfer'"> <xd-transfer :default-value="item['value']" :left-default-value="item['left']" :right-default-value="item['right']" v-model="form[item['valueKey']]" :title="item['title']" :placeholder="item['placeholder']" :list="item['list']" ></xd-transfer> </template> <template v-else-if="item.ele === 'xd-upload'"> <div v-if="item['styleType'] === 'one'" style="width: 100%"> <el-input v-if="!item['slot']" class="xd-base-field__upload-input" disabled :class="item['elinputClassName']" v-model="form[item['valueKey']]['url']" ></el-input> <xd-upload :disabled="item['disabled'] || false" v-if="item.styleType === 'one'" style-type="one" v-model="form[item['valueKey']]" :default-value="item['defaultValue']" :action="item['action']" :qiniu-cdn="item['qiniuCdn']" :size="item['size']" :type="item['type']" :radius="0.5" :pixel-size="item['pixelSize']||''" :upload-type="item['uploadType']" :tips="item['tipsformet']" :showtype="true" :item="item" @success="handleSuccess" @onApiSuccessUrl="handleApiSuccessUrl" @onGetParamsAndHeader="handleGetParamsAndHeader" > <template v-if="item['slot']" slot-scope="scope" > <slot :name="`upload_${item['valueKey']}`"> <div class="xd-base-field__upload" :class="{has:scope.image.path}" :style="{width: getWH(item, true),height: getWH(item, false)}" > <xd-font-icon class="xd-base-field__upload-icon" icon="iconjia" :size="getWHIcon(item)" :color="!scope.image.path?'#999': 'rgba(0,0,0,0)'" ></xd-font-icon> <img :src="scope.image.path"/> </div> </slot> </template> </xd-upload> </div> <xd-upload :disabled="item['disabled'] || false" v-if="item.styleType === 'auth'" style-type="auth" v-model="form[item['valueKey']]" :default-value="item['defaultValue']" :action="item['action']" :qiniu-cdn="item['qiniuCdn']" :size="item['size']" :pixel-size="item['pixelSize']||''" :type="item['type']" :radius="5" :upload-type="item['uploadType']" :showtype="true" :tips="item['tipsformet']" @success="handleSuccess" @onApiSuccessUrl="handleApiSuccessUrl" @onGetParamsAndHeader="handleGetParamsAndHeader" > </xd-upload> <xd-upload :disabled="item['disabled'] || false" v-if="item.styleType === 'list'" style-type="list" v-model="form[item['valueKey']]" :default-value="item['defaultValue']" :action="item['action']" :qiniu-cdn="item['qiniuCdn']" :size="item['size']" :pixel-size="item['pixelSize']||''" :type="item['type']" :radius="5" :upload-type="item['uploadType']" :showtype="true" :tips="item['tipsformet']" :sort="item['sort'] || false" :maxlen="item['maxlen']" @success="handleSuccess" @onApiSuccessUrl="handleApiSuccessUrl" @onGetParamsAndHeader="handleGetParamsAndHeader" > </xd-upload> </template> <template v-else-if="item.ele === 'xd-over-add-price'"> <xd-over-add-price :size="size" :default-value="item['defaultValue']" :keys="item['valueKey']" :list="item['list']" :unit="item['unit']" :disabled="item['disabled'] === undefined ? false: item['disabled']" v-model="form[getItemToFormKey(item, 'xdOverAddPrice')]" ></xd-over-add-price> </template> <template v-else-if="item.ele === 'xd-select-week-time'"> <xd-select-week-time :size="size" :default-value="item['defaultValue']" :keys="item['valueKey']" :list="item['list']" :collapse="true" :time-type="timeType" :disabled="item['disabled'] === undefined ? false: item['disabled']" v-model="form[getItemToFormKey(item, 'xdSelectWeekTime')]" ></xd-select-week-time> </template> <template v-else-if="item.ele === 'xd-remote-cascader'"> <xd-remote-cascader :placeholder="item['placeholder']" v-model="form[item['valueKey']]" :default-value="item['value']" :disabled="item['disabled'] === undefined ? false: item['disabled']" :remote-search="item['handleChildren']" :multiple="item['multiple']" :notice="item['tips']" :required="getRequire(item['rules'])" ></xd-remote-cascader> </template> <template v-else-if="item.ele === 'xd-cascade-select'"> <xd-cascade-select v-model="form[item['valueKey']]" @loadChildren="item['handleChildren']" :default-value="item['value']" :disabled="item['disabled'] === undefined ? false: item['disabled']" :multiple="item['multiple']" :required="getRequire(item['rules'])" > </xd-cascade-select> </template> <template v-else-if="item.ele === 'xd-tinymce'"> <xd-tinymce :disabled="item['disabled'] === undefined ? false: item['disabled']" v-model="form[item['valueKey']]" :image-config="item['imageConfig'] || null" :height="item['height'] || 400" @success="handleSuccess" @onApiSuccessUrl="handleApiSuccessUrl" @onGetParamsAndHeader="handleGetParamsAndHeader" ></xd-tinymce> </template> <template v-else-if="item.ele === 'xd-range-group'"> <xd-range-group :size="size" :keys="item.keys" :placeholder="item['placeholder']" :default-value="item['defaultValue']" :tip="item['tips']" v-model="form[item['valueKey']]" :disabled="item['disabled'] === undefined ? false: item['disabled']" ></xd-range-group> </template> <template v-else-if="item.ele === 'xd-set-label'"> <xd-set-label :disabled="item['disabled'] === undefined ? false: item['disabled']" :keys="item.keys" :list="item['list']" :defaultValue="item.defaultValue" v-model="form[item['valueKey']]" ></xd-set-label> </template> <template v-if="item['unit'] || item['notice']"> <div class="xd-form-notice" v-html="item.unit || item.notice"></div> </template> </div> </el-form-item> </template> </el-form> </div> </template>