tianheng-ui 0.0.44 → 0.0.45

package/packages/formMaking/WidgetFormItem.vue

@@ -1,284 +1,466 @@
-<template>
-  <el-form-item class="widget-view "
-      v-if="element && element.key"
-      :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
-      :label="element.name"
-      @click.native.stop="handleSelectWidget(index)"
-    >
-        <template v-if="element.type == 'input'">
-          <el-input
-            v-model="element.options.defaultValue"
-            :style="{width: element.options.width}"
-            :placeholder="element.options.placeholder"
-            :disabled="element.options.disabled"
-			      :maxlength="element.options.maxlength"
-			      :show-word-limit="element.options.showWordLimit"
-          ></el-input>
-        </template>
-
-        <template v-if="element.type == 'textarea'">
-          <el-input type="textarea" :rows="5"
-            v-model="element.options.defaultValue"
-            :style="{width: element.options.width}"
-            :disabled="element.options.disabled"
-            :placeholder="element.options.placeholder"
-			      :maxlength="element.options.maxlength"
-			      :show-word-limit="element.options.showWordLimit"
-          ></el-input>
-        </template>
-
-        <template v-if="element.type == 'number'">
-          <el-input-number
-            v-model="element.options.defaultValue"
-            :disabled="element.options.disabled"
-            :controls-position="element.options.controlsPosition"
-            :style="{width: element.options.width}"
-          ></el-input-number>
-        </template>
-
-        <template v-if="element.type == 'radio'">
-          <el-radio-group v-model="element.options.defaultValue"
-            :style="{width: element.options.width}"
-            :disabled="element.options.disabled"
-          >
-            <el-radio
-              :style="{display: element.options.inline ? 'inline-block' : 'block'}"
-              :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index"
-
-            >
-              {{element.options.showLabel ? item.label : item.value}}
-            </el-radio>
-          </el-radio-group>
-        </template>
-
-        <template v-if="element.type == 'checkbox'">
-          <el-checkbox-group v-model="element.options.defaultValue"
-            :style="{width: element.options.width}"
-            :disabled="element.options.disabled"
-          >
-            <el-checkbox
-              :style="{display: element.options.inline ? 'inline-block' : 'block'}"
-              :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index"
-            >
-              {{element.options.showLabel ? item.label : item.value}}
-            </el-checkbox>
-          </el-checkbox-group>
-        </template>
-
-        <template v-if="element.type == 'time'">
-          <el-time-picker
-            v-model="element.options.defaultValue"
-            :is-range="element.options.isRange"
-            :placeholder="element.options.placeholder"
-            :start-placeholder="element.options.startPlaceholder"
-            :end-placeholder="element.options.endPlaceholder"
-            :readonly="element.options.readonly"
-            :disabled="element.options.disabled"
-            :editable="element.options.editable"
-            :clearable="element.options.clearable"
-            :arrowControl="element.options.arrowControl"
-            :style="{width: element.options.width}"
-          >
-          </el-time-picker>
-        </template>
-
-        <template v-if="element.type == 'date'">
-          <el-date-picker
-            v-model="element.options.defaultValue"
-            :type="element.options.type"
-            :is-range="element.options.isRange"
-            :placeholder="element.options.placeholder"
-            :start-placeholder="element.options.startPlaceholder"
-            :end-placeholder="element.options.endPlaceholder"
-            :readonly="element.options.readonly"
-            :disabled="element.options.disabled"
-            :editable="element.options.editable"
-            :clearable="element.options.clearable"
-            :style="{width: element.options.width}"
-          >
-          </el-date-picker>
-        </template>
-
-        <template v-if="element.type == 'rate'">
-          <el-rate v-model="element.options.defaultValue"
-            :max="element.options.max"
-            :disabled="element.options.disabled"
-            :allow-half="element.options.allowHalf"
-          ></el-rate>
-        </template>
-
-        <template v-if="element.type == 'color'">
-          <el-color-picker
-            v-model="element.options.defaultValue"
-            :disabled="element.options.disabled"
-            :show-alpha="element.options.showAlpha"
-          ></el-color-picker>
-        </template>
-
-        <template v-if="element.type == 'select'">
-          <el-select
-            v-model="element.options.defaultValue"
-            :disabled="element.options.disabled"
-            :multiple="element.options.multiple"
-            :clearable="element.options.clearable"
-            :placeholder="element.options.placeholder"
-            :style="{width: element.options.width}"
-          >
-            <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value"></el-option>
-          </el-select>
-        </template>
-
-        <template v-if="element.type=='switch'">
-          <el-switch
-            v-model="element.options.defaultValue"
-            :disabled="element.options.disabled"
-          >
-          </el-switch>
-        </template>
-
-        <template v-if="element.type=='slider'">
-          <el-slider
-            v-model="element.options.defaultValue"
-            :min="element.options.min"
-            :max="element.options.max"
-            :disabled="element.options.disabled"
-            :step="element.options.step"
-            :show-input="element.options.showInput"
-            :range="element.options.range"
-            :style="{width: element.options.width}"
-          ></el-slider>
-        </template>
-
-        <template v-if="element.type=='imgupload'">
-          <fm-upload
-            v-model="element.options.defaultValue"
-            :disabled="element.options.disabled"
-            :style="{'width': element.options.width}"
-            :width="element.options.size.width"
-            :height="element.options.size.height"
-            token="xxx"
-            domain="xxx"
-          >
-
-          </fm-upload>
-        </template>
-
-        <template v-if="element.type == 'cascader'">
-          <el-cascader
-            v-model="element.options.defaultValue"
-            :disabled="element.options.disabled"
-            :clearable="element.options.clearable"
-            :placeholder="element.options.placeholder"
-            :style="{width: element.options.width}"
-            :options="element.options.remoteOptions"
-          >
-
-          </el-cascader>
-        </template>
-
-        <template v-if="element.type == 'editor'">
-          <vue-editor
-            v-model="element.options.defaultValue"
-            :style="{width: element.options.width}"
-          >
-          </vue-editor>
-        </template>
-
-        <template v-if="element.type=='blank'">
-          <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">自定义区域</div>
-        </template>
-
-        <template v-if="element.type == 'text'">
-          <span>{{element.options.defaultValue}}</span>
-        </template>
-
-        <div class="widget-view-action" v-if="selectWidget.key == element.key">
-          <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)"></i>
-          <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)"></i>
-        </div>
-
-        <div class="widget-view-drag" v-if="selectWidget.key == element.key">
-          <i class="iconfont icon-drag drag-widget"></i>
-        </div>
-
-    </el-form-item>
-</template>
-
-<script>
-import FmUpload from './Upload'
-export default {
-  props: ['element', 'select', 'index', 'data'],
-  components: {
-    FmUpload,
-  },
-  data () {
-    return {
-      selectWidget: this.select
-    }
-  },
-  mounted () {
-
-  },
-  methods: {
-    handleSelectWidget (index) {
-      this.selectWidget = this.data.list[index]
-    },
-    handleWidgetDelete (index) {
-      if (this.data.list.length - 1 === index) {
-        if (index === 0) {
-          this.selectWidget = {}
-        } else {
-          this.selectWidget = this.data.list[index - 1]
-        }
-      } else {
-        this.selectWidget = this.data.list[index + 1]
-      }
-
-      this.$nextTick(() => {
-        this.data.list.splice(index, 1)
-      })
-    },
-    handleWidgetClone (index) {
-      const key = Date.parse(new Date().toString()) + '_' + Math.ceil(Math.random() * 99999)
-      let cloneData = {
-        ...this.data.list[index],
-        options: {
-          ...this.data.list[index].options,
-          remoteFunc: 'func_' + key
-        },
-        key,
-        model: this.data.list[index].type + '_' + key,
-        rules: this.data.list[index].rules || []
-      }
-
-      if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox' || this.data.list[index].type === 'select') {
-
-        cloneData = {
-          ...cloneData,
-          options: {
-            ...cloneData.options,
-            options: cloneData.options.options.map(item => ({...item}))
-          }
-        }
-      }
-
-      this.data.list.splice(index, 0, cloneData)
-
-      this.$nextTick(() => {
-        this.selectWidget = this.data.list[index + 1]
-      })
-    },
-  },
-  watch: {
-    select (val) {
-      this.selectWidget = val
-    },
-    selectWidget: {
-      handler (val) {
-        this.$emit('update:select', val)
-      },
-      deep: true
-    }
-  }
-}
-</script>
+<template>
+  <el-form-item
+    class="widget-view "
+    v-if="element && element.key"
+    :class="{
+      active: selectWidget.key == element.key,
+      is_req: element.options.required
+    }"
+    :label="element.name"
+    @click.native.stop="handleSelectWidget(index)"
+  >
+    <template v-if="element.type == 'input'">
+      <el-input
+        v-model="element.options.defaultValue"
+        :style="{ width: element.options.width }"
+        :placeholder="element.options.placeholder"
+        :disabled="element.options.disabled"
+        :maxlength="element.options.maxlength"
+        :show-word-limit="element.options.showWordLimit"
+        :show-password="element.options.showPassword"
+        :clearable="element.options.clearable"
+        :suffix-icon="element.options.suffixIcon"
+        :prefix-icon="element.options.prefixIcon"
+      >
+        <template v-if="element.options.prepend" slot="prepend">
+          <span v-html="element.options.prepend"></span>
+        </template>
+        <template v-if="element.options.append" slot="append">
+          <span v-html="element.options.append"></span>
+        </template>
+      </el-input>
+    </template>
+
+    <template v-if="element.type == 'textarea'">
+      <el-input
+        type="textarea"
+        v-model="element.options.defaultValue"
+        :style="{ width: element.options.width }"
+        :disabled="element.options.disabled"
+        :placeholder="element.options.placeholder"
+        :maxlength="element.options.maxlength"
+        :show-word-limit="element.options.showWordLimit"
+        :clearable="element.options.clearable"
+        :autosize="{ minRows: element.options.minRows, maxRows: element.options.maxRows }"
+      ></el-input>
+    </template>
+
+    <template v-if="element.type == 'number'">
+      <el-input-number
+        v-model="element.options.defaultValue"
+        :disabled="element.options.disabled"
+        :controls-position="element.options.controlsPosition?'right':''"
+        :style="{ width: element.options.width }"
+        :min="element.options.min"
+        :max="element.options.max"
+        :step="element.options.step"
+        :precision="element.options.precision"
+      ></el-input-number>
+    </template>
+
+    <template v-if="element.type == 'radio'">
+      <el-radio-group
+        v-model="element.options.defaultValue"
+        :style="{ width: element.options.width }"
+        :disabled="element.options.disabled"
+      >
+        <template v-if="element.options.buttonType">
+          <el-radio-button
+            :style="{
+              display: element.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="element.options.border"
+            v-for="(item, index) in element.options.options"
+            :key="item.value + index"
+          >
+            {{ element.options.showLabel ? item.label : item.value }}
+          </el-radio-button>
+        </template>
+        <template v-else>
+          <el-radio
+            :style="{
+              display: element.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="element.options.border"
+            v-for="(item, index) in element.options.options"
+            :key="item.value + index"
+          >
+            {{ element.options.showLabel ? item.label : item.value }}
+          </el-radio>
+        </template>
+      </el-radio-group>
+    </template>
+
+    <template v-if="element.type == 'checkbox'">
+      <el-checkbox-group
+        v-model="element.options.defaultValue"
+        :style="{ width: element.options.width }"
+        :disabled="element.options.disabled"
+        :min="element.options.min"
+        :max="element.options.max"
+      >
+        <template v-if="element.options.buttonType">
+          <el-checkbox-button
+            :style="{
+              display: element.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="element.options.border"
+            v-for="(item, index) in element.options.options"
+            :key="item.value + index"
+          >
+            {{ element.options.showLabel ? item.label : item.value }}
+          </el-checkbox-button>
+        </template>
+        <template v-else>
+          <el-checkbox
+            :style="{
+              display: element.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="element.options.border"
+            v-for="(item, index) in element.options.options"
+            :key="item.value + index"
+          >
+            {{ element.options.showLabel ? item.label : item.value }}
+          </el-checkbox>
+        </template>
+      </el-checkbox-group>
+    </template>
+
+    <template v-if="element.type == 'time'">
+      <el-time-picker
+        v-if="element.options.timeType"
+        v-model="element.options.defaultValue"
+        :is-range="element.options.isRange"
+        :placeholder="element.options.placeholder"
+        :start-placeholder="element.options.startPlaceholder"
+        :end-placeholder="element.options.endPlaceholder"
+        :readonly="element.options.readonly"
+        :disabled="element.options.disabled"
+        :editable="element.options.editable"
+        :clearable="element.options.clearable"
+        :arrowControl="element.options.arrowControl"
+        :style="{ width: element.options.width }"
+      >
+      </el-time-picker>
+      <template v-else>
+        <el-time-select
+          v-model="element.options.selectStartTime"
+          :is-range="element.options.isRange"
+          :placeholder="element.options.selectRange?element.options.startPlaceholder:element.options.placeholder"
+          :readonly="element.options.readonly"
+          :disabled="element.options.disabled"
+          :editable="element.options.editable"
+          :clearable="element.options.clearable"
+          :arrowControl="element.options.arrowControl"
+          :style="{ width: element.options.width }"
+          :picker-options="element.options.stretTimePickerOptions"
+        >
+        </el-time-select>
+        <el-time-select
+          v-if="element.options.selectRange"
+          v-model="element.options.selectEndTime"
+          :is-range="element.options.isRange"
+          :placeholder="element.options.endPlaceholder"
+          :readonly="element.options.readonly"
+          :disabled="element.options.disabled"
+          :editable="element.options.editable"
+          :clearable="element.options.clearable"
+          :arrowControl="element.options.arrowControl"
+          :style="{ width: element.options.width }"
+          :picker-options="element.options.endTimePickerOptions"
+        >
+        </el-time-select>
+      </template>
+    </template>
+
+    <template v-if="element.type == 'date'">
+      <el-date-picker
+        v-model="element.options.defaultValue"
+        :type="element.options.type"
+        :is-range="element.options.isRange"
+        :placeholder="element.options.placeholder"
+        :start-placeholder="element.options.startPlaceholder"
+        :end-placeholder="element.options.endPlaceholder"
+        :readonly="element.options.readonly"
+        :disabled="element.options.disabled"
+        :editable="element.options.editable"
+        :clearable="element.options.clearable"
+        :style="{ width: element.options.width }"
+      >
+      </el-date-picker>
+    </template>
+
+    <template v-if="element.type == 'rate'">
+      <el-rate
+        v-model="element.options.defaultValue"
+        :max="element.options.max"
+        :disabled="element.options.disabled"
+        :allow-half="element.options.allowHalf"
+        :show-text="element.options.showText"
+        :texts="element.options.auxiliaryValue"
+      ></el-rate>
+    </template>
+
+    <template v-if="element.type == 'color'">
+      <el-color-picker
+        v-model="element.options.defaultValue"
+        :disabled="element.options.disabled"
+        :show-alpha="element.options.showAlpha"
+      ></el-color-picker>
+    </template>
+
+    <template v-if="element.type == 'select'">
+      <el-select
+        v-model="element.options.defaultValue"
+        :disabled="element.options.disabled"
+        :multiple="element.options.multiple"
+        :collapseTags="element.options.collapseTags"
+        :allowCreate="element.options.allowCreate"
+        :clearable="element.options.clearable"
+        :placeholder="element.options.placeholder"
+        :style="{ width: element.options.width }"
+        :filterable="element.options.allowCreate?true:element.options.filterable"
+      >
+        <el-option
+          v-for="item in element.options.options"
+          :key="item.value"
+          :value="item.value"
+          :label="element.options.showLabel ? item.label : item.value"
+        ></el-option>
+      </el-select>
+    </template>
+
+    <template v-if="element.type == 'switch'">
+      <el-switch
+        v-model="element.options.defaultValue"
+        :disabled="element.options.disabled"
+        :inactive-text="element.options.switchInactiveText"
+        :active-text="element.options.switchActiveText"
+        :inactive-color="element.options.switchInactiveColor"
+        :active-color="element.options.switchActiveColor"
+      >
+      </el-switch>
+    </template>
+
+    <template v-if="element.type == 'slider'">
+      <el-slider
+        v-model="element.options.defaultValue"
+        :min="element.options.min"
+        :max="element.options.max"
+        :disabled="element.options.disabled"
+        :step="element.options.step"
+        :show-input="element.options.showInput"
+        :range="element.options.range"
+        :style="{ width: element.options.width, height: element.options.height }"
+        :show-tooltip="element.options.showTooltip"
+        :format-tooltip="(val) => formatTooltip(val,element.options.formatTooltip)"
+        :show-stops="element.options.showStops"
+        :vertical="element.options.vertical"
+      ></el-slider>
+    </template>
+
+    <template v-if="element.type == 'imgupload'">
+      <!-- <fm-upload
+        v-model="element.options.defaultValue"
+        :disabled="element.options.disabled"
+        :style="{ width: element.options.width }"
+        :width="element.options.size.width"
+        :height="element.options.size.height"
+        token="xxx"
+        domain="xxx"
+      >
+      </fm-upload> -->
+
+      <el-upload
+        class="upload-demo"
+        :action="element.options.remoteFunc"
+        :on-preview="(file) => handlePictureCardPreview(file, element.options.listType)"
+        :on-remove="handleRemove"
+        :multiple="element.options.multiple"
+        :limit="element.options.length"
+        :width="element.options.size.width"
+        :height="element.options.size.height"
+        :list-type="element.options.listType"
+        :file-list="element.options.defaultValue"
+        :drag="element.options.drag"
+        :on-change="handleAvatar"
+        :on-error="handleAvatarError"
+        :disabled="element.options.disabled">
+        <el-button size="small" type="primary" :disabled="element.options.disabled" v-if="['default', 'picture'].includes(element.options.listType) && !element.options.drag">点击上传</el-button>
+        <i slot="default" class="el-icon-plus" v-if="element.options.listType === 'picture-card' && !element.options.drag"></i>
+        <i class="el-icon-upload" v-if="element.options.drag"></i>
+        <div class="el-upload__text" v-if="element.options.drag">将文件拖到此处，或<em>点击上传</em></div>
+        <div slot="tip" class="el-upload__tip" v-html="element.options.elUploadTip"></div>
+      </el-upload>
+    </template>
+
+    <template v-if="element.type == 'cascader'">
+      <el-cascader
+        v-model="element.options.defaultValue"
+        :disabled="element.options.disabled"
+        :clearable="element.options.clearable"
+        :placeholder="element.options.placeholder"
+        :style="{ width: element.options.width }"
+        :options="element.options.remoteOptions"
+        :props="element.options.props"
+        :show-all-levels="element.options.showAllLevels?false:true"
+        :collapse-tags="element.options.collapseTags"
+      >
+        <template slot-scope="{ data }">
+          <span v-html="element.options.prepend"></span>
+          <span>{{ data.label }}</span>
+          <span v-html="element.options.append"></span>
+        </template>
+      </el-cascader>
+    </template>
+
+    <template v-if="element.type == 'editor'">
+      <vue-editor
+        v-model="element.options.defaultValue"
+        :style="{ width: element.options.width, height: element.options.height }"
+        :disabled="element.options.disabled"
+      >
+      </vue-editor>
+    </template>
+
+    <template v-if="element.type == 'blank'">
+      <div
+        style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;"
+      >
+        自定义区域
+      </div>
+    </template>
+
+    <template v-if="element.type == 'text'">
+      <span>{{ element.options.defaultValue }}</span>
+    </template>
+
+    <div class="widget-view-action" v-if="selectWidget.key == element.key">
+      <i
+        class="iconfont icon-icon_clone"
+        @click.stop="handleWidgetClone(index)"
+      ></i>
+      <i
+        class="iconfont icon-trash"
+        @click.stop="handleWidgetDelete(index)"
+      ></i>
+    </div>
+
+    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
+      <i class="iconfont icon-drag drag-widget"></i>
+    </div>
+
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </el-form-item>
+</template>
+
+<script>
+import FmUpload from "./Upload";
+import { VueEditor} from "vue2-editor";
+export default {
+  props: ["element", "select", "index", "data"],
+  components: {
+    FmUpload,
+    VueEditor
+  },
+  data() {
+    return {
+      selectWidget: this.select,
+      dialogVisible: false,
+      dialogImageUrl: '',
+    };
+  },
+  mounted() {},
+  methods: {
+    handleSelectWidget(index) {
+      this.selectWidget = this.data.list[index];
+    },
+    handleWidgetDelete(index) {
+      if (this.data.list.length - 1 === index) {
+        if (index === 0) {
+          this.selectWidget = {};
+        } else {
+          this.selectWidget = this.data.list[index - 1];
+        }
+      } else {
+        this.selectWidget = this.data.list[index + 1];
+      }
+
+      this.$nextTick(() => {
+        this.data.list.splice(index, 1);
+      });
+    },
+    formatTooltip(val, num) {
+      return val / num;
+    },
+    handleWidgetClone(index) {
+      const key =
+        Date.parse(new Date().toString()) +
+        "_" +
+        Math.ceil(Math.random() * 99999);
+      let cloneData = {
+        ...this.data.list[index],
+        options: {
+          ...this.data.list[index].options,
+          remoteFunc: "func_" + key
+        },
+        key,
+        model: this.data.list[index].type + "_" + key,
+        rules: this.data.list[index].rules || []
+      };
+
+      if (
+        this.data.list[index].type === "radio" ||
+        this.data.list[index].type === "checkbox" ||
+        this.data.list[index].type === "select"
+      ) {
+        cloneData = {
+          ...cloneData,
+          options: {
+            ...cloneData.options,
+            options: cloneData.options.options.map(item => ({ ...item }))
+          }
+        };
+      }
+
+      this.data.list.splice(index, 0, cloneData);
+
+      this.$nextTick(() => {
+        this.selectWidget = this.data.list[index + 1];
+      });
+    },
+     handlePictureCardPreview(file, listType) {
+      if(listType === "picture-card"){
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    },
+    handleRemove(file, fileList) {
+      this.data.options.defaultValue = fileList
+    },
+    handleAvatar(res, file) {
+      this.data.options.defaultValue = file
+    },
+    handleAvatarError() {
+      console.log("上传失败！")
+    },
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  }
+};
+</script>