|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<!-- 自定义slot -->
|
|
|
<div class="c-item" :class="{br: br}" v-if="$slots.default && type != 'fast-btn'">
|
|
|
- <label class="c-label" v-if="name && name.length > 0">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}" v-if="name && name.length > 0">{{name}}:</label>
|
|
|
<span v-else-if="name === undefined"></span>
|
|
|
<label class="c-label" v-else></label>
|
|
|
<span v-else></span>
|
|
@@ -9,65 +9,65 @@
|
|
|
</div>
|
|
|
<!-- 普通input -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'text' || type == 'link'">
|
|
|
- <label class="c-label" :style="{width:width}"><span style="color: red;" v-if="need">*</span>{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label> <!-- <span style="color: red;" v-if="need">*</span> -->
|
|
|
<el-input type="text" :value="value" @input="onInput" :placeholder="'请输入'+name" :disabled="disabled"></el-input>
|
|
|
</div>
|
|
|
<!-- 数字input -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'num'">
|
|
|
- <label class="c-label"><span style="color: red;" v-if="need">*</span>{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label> <!-- <span style="color: red;" v-if="need">*</span> -->
|
|
|
<el-input type="number" :value="value" @input="onInput" placeholder="请输入" :disabled="disabled"></el-input>
|
|
|
</div>
|
|
|
<!-- 密码input -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'password'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-input type="password" :value="value" @input="onInput" :placeholder="placeholder" :disabled="disabled"></el-input>
|
|
|
</div>
|
|
|
<!-- 多行文本域 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'textarea'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<div style="display: inline-block;">
|
|
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" :value="value" @input="onInput" :placeholder="placeholder" :disabled="disabled"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 钱 money (单位 元) -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'money'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-input type="text" :value="value" @input="onInput" :placeholder="placeholder" :disabled="disabled"></el-input>
|
|
|
<span>元</span>
|
|
|
</div>
|
|
|
<!-- 钱 price-f (单位 分) -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'money-f'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-input type="text" v-model="valueReal" @input="$emit('input', $event * 100)" :placeholder="placeholder" :disabled="disabled"></el-input>
|
|
|
<span>元</span>
|
|
|
</div>
|
|
|
<!-- img -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'img'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<img :src="value" class="info-img" @click="sa.showImage(value, '400px', '400px')" v-if="!sa.isNull(value)">
|
|
|
<el-link type="primary" @click="sa.uploadImage(src => {$emit('input', src); sa.ok2('上传成功');})">上传</el-link>
|
|
|
</div>
|
|
|
<!-- audio -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'audio'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-link type="info" :href="value" target="_blank" v-if="!sa.isNull(value)">{{value}}</el-link>
|
|
|
<el-link type="primary" @click="sa.uploadAudio(src => {$emit('input', src); sa.ok2('上传成功');})">上传</el-link>
|
|
|
</div>
|
|
|
<!-- video -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'video'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-link type="info" :href="value" target="_blank" v-if="!sa.isNull(value)">{{value}}</el-link>
|
|
|
<el-link type="primary" @click="sa.uploadVideo(src => {$emit('input', src); sa.ok2('上传成功');})">上传</el-link>
|
|
|
</div>
|
|
|
<!-- file -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'file'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-link type="info" :href="value" target="_blank" v-if="!sa.isNull(value)">{{value}}</el-link>
|
|
|
<el-link type="primary" @click="sa.uploadFile(src => {$emit('input', src); sa.ok2('上传成功');})">上传</el-link>
|
|
|
</div>
|
|
|
<!-- img-list -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'img-list'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}</label>
|
|
|
<div class="c-item-mline image-box">
|
|
|
<div class="image-box-2" v-for="item in value_arr">
|
|
|
<img :src="item" @click="sa.showImage(item, '500px', '400px')" />
|
|
@@ -84,7 +84,7 @@
|
|
|
</div>
|
|
|
<!-- audio-list、video-list、file-list、img-video-list -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'audio-list' || type == 'video-list' || type == 'file-list' || type == 'img-video-list'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<div class="c-item-mline">
|
|
|
<div v-for="item in value_arr">
|
|
|
<el-link type="info" :href="item" target="_blank">{{item}}</el-link>
|
|
@@ -102,7 +102,7 @@
|
|
|
</div>
|
|
|
<!-- 富文本 richtext f -->
|
|
|
<div class="c-item" style="margin-top: 10px;" :class="{br: br}" v-else-if="type == 'richtext' || type == 'f'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<div class="editor-box c-item-mline">
|
|
|
<div :id="'editor-' + editor_id"></div>
|
|
|
</div>
|
|
@@ -110,7 +110,7 @@
|
|
|
</div>
|
|
|
<!-- enum 枚举 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'enum' || type == 'j' || type == 'switch'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-radio-group v-if="jtype == 1 || jtype == 2" :class="{'s-radio-text': jtype == 2}" :value="value" @input="onInput">
|
|
|
<el-radio label="" v-if="def">{{def}}</el-radio>
|
|
|
<el-radio v-for="j in jvList" :key="j.key" :label="j.key">{{j.value}}</el-radio>
|
|
@@ -126,22 +126,22 @@
|
|
|
</div>
|
|
|
<!-- 日期选择器 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'date'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-date-picker type="date" value-format="yyyy-MM-dd" :value="value" @input="onInput" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
|
|
|
</div>
|
|
|
<!-- 日期时间选择器 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'datetime'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :value="value" @input="onInput" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
|
|
|
</div>
|
|
|
<!-- 时间选择器 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'time'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-time-picker value-format="HH:mm:ss" :value="value" @input="onInput" :placeholder="placeholder" :disabled="disabled"></el-time-picker>
|
|
|
</div>
|
|
|
<!-- 日期范围选择 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'date-range'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-date-picker
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
@@ -156,25 +156,25 @@
|
|
|
</div>
|
|
|
<!-- 滑块 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'slider'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<div style="display: inline-block; height: 0px; vertical-align: top; width: 250px;">
|
|
|
<el-slider :value="value" @input="onInput" style="position: relative; top: -5px;" :disabled="disabled"></el-slider>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 级联输入 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'cascader'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-cascader :value="value" @input="onInput" :options="options" :props="{expandTrigger: 'hover'}" :placeholder="placeholder" :disabled="disabled"></el-cascader>
|
|
|
</div>
|
|
|
<!-- 颜色输入 -->
|
|
|
<div class="c-item" :class="{br: br}" style="height: 0px;" v-else-if="type == 'color'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<el-color-picker :value="value" @input="onInput" :disabled="disabled"></el-color-picker>
|
|
|
<span class="c-remark" style="vertical-align: top;">{{value}}</span>
|
|
|
</div>
|
|
|
<!-- 评分组件 -->
|
|
|
<div class="c-item" :class="{br: br}" v-else-if="type == 'rate'">
|
|
|
- <label class="c-label">{{name}}:</label>
|
|
|
+ <label class="c-label" :style="{width:width}">{{name}}:</label>
|
|
|
<div style="display: inline-block;">
|
|
|
<el-rate :value="value" @input="onInput" show-text :disabled="disabled"></el-rate>
|
|
|
</div>
|