tianheng-ui 0.0.44 → 0.0.45

package/packages/formMaking/GenerateFormItem.vue

@@ -1,266 +1,516 @@
-<template>
-  <el-form-item :label="widget.name" :prop="widget.model">
-    <template v-if="widget.type == 'input'" >
-      <el-input
-        v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
-        type="number"
-        v-model.number="dataModel"
-        :placeholder="widget.options.placeholder"
-        :style="{width: widget.options.width}"
-        :disabled="widget.options.disabled"
-      ></el-input>
-      <el-input
-        v-else
-        type="text"
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-        :placeholder="widget.options.placeholder"
-        :style="{width: widget.options.width}"
-        :maxlength="widget.options.maxlength"
-        :show-word-limit="widget.options.showWordLimit"
-      ></el-input>
-    </template>
-
-    <template v-if="widget.type == 'textarea'">
-      <el-input type="textarea" :rows="5"
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-        :placeholder="widget.options.placeholder"
-        :style="{width: widget.options.width}"
-        :maxlength="widget.options.maxlength"
-        :show-word-limit="widget.options.showWordLimit"
-      ></el-input>
-    </template>
-
-    <template v-if="widget.type == 'number'">
-      <el-input-number
-        v-model="dataModel"
-        :style="{width: widget.options.width}"
-        :step="widget.options.step"
-        controls-position="right"
-        :disabled="widget.options.disabled"
-        :min="widget.options.min"
-        :max="widget.options.max"
-      ></el-input-number>
-    </template>
-
-    <template v-if="widget.type == 'radio'">
-      <el-radio-group v-model="dataModel"
-        :style="{width: widget.options.width}"
-        :disabled="widget.options.disabled"
-      >
-        <el-radio
-          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
-          :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
-        >
-          <template v-if="widget.options.remote">{{item.label}}</template>
-          <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
-        </el-radio>
-      </el-radio-group>
-    </template>
-
-    <template v-if="widget.type == 'checkbox'">
-      <el-checkbox-group v-model="dataModel"
-        :style="{width: widget.options.width}"
-        :disabled="widget.options.disabled"
-      >
-        <el-checkbox
-
-          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
-          :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
-        >
-          <template v-if="widget.options.remote">{{item.label}}</template>
-          <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
-        </el-checkbox>
-      </el-checkbox-group>
-    </template>
-
-    <template v-if="widget.type == 'time'">
-      <el-time-picker
-        v-model="dataModel"
-        :is-range="widget.options.isRange"
-        :placeholder="widget.options.placeholder"
-        :start-placeholder="widget.options.startPlaceholder"
-        :end-placeholder="widget.options.endPlaceholder"
-        :readonly="widget.options.readonly"
-        :disabled="widget.options.disabled"
-        :editable="widget.options.editable"
-        :clearable="widget.options.clearable"
-        :arrowControl="widget.options.arrowControl"
-        :value-format="widget.options.format"
-        :style="{width: widget.options.width}"
-      >
-      </el-time-picker>
-    </template>
-
-    <template v-if="widget.type=='date'">
-      <el-date-picker
-        v-model="dataModel"
-        :type="widget.options.type"
-        :placeholder="widget.options.placeholder"
-        :start-placeholder="widget.options.startPlaceholder"
-        :end-placeholder="widget.options.endPlaceholder"
-        :readonly="widget.options.readonly"
-        :disabled="widget.options.disabled"
-        :editable="widget.options.editable"
-        :clearable="widget.options.clearable"
-        :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
-        :format="widget.options.format"
-        :style="{width: widget.options.width}"
-      >
-      </el-date-picker>
-    </template>
-
-    <template v-if="widget.type =='rate'">
-      <el-rate v-model="dataModel"
-        :max="widget.options.max"
-        :disabled="widget.options.disabled"
-        :allow-half="widget.options.allowHalf"
-      ></el-rate>
-    </template>
-
-    <template v-if="widget.type == 'color'">
-      <el-color-picker
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-        :show-alpha="widget.options.showAlpha"
-      ></el-color-picker>
-    </template>
-
-    <template v-if="widget.type == 'select'">
-      <el-select
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-        :multiple="widget.options.multiple"
-        :clearable="widget.options.clearable"
-        :placeholder="widget.options.placeholder"
-        :style="{width: widget.options.width}"
-        :filterable="widget.options.filterable"
-      >
-        <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"></el-option>
-      </el-select>
-    </template>
-
-    <template v-if="widget.type=='switch'">
-      <el-switch
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-      >
-      </el-switch>
-    </template>
-
-    <template v-if="widget.type=='slider'">
-      <el-slider
-        v-model="dataModel"
-        :min="widget.options.min"
-        :max="widget.options.max"
-        :disabled="widget.options.disabled"
-        :step="widget.options.step"
-        :show-input="widget.options.showInput"
-        :range="widget.options.range"
-        :style="{width: widget.options.width}"
-      ></el-slider>
-    </template>
-
-    <template v-if="widget.type=='imgupload'">
-      <fm-upload
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-        :style="{'width': widget.options.width}"
-        :width="widget.options.size.width"
-        :height="widget.options.size.height"
-        :token="widget.options.token"
-        :domain="widget.options.domain"
-        :multiple="widget.options.multiple"
-        :length="widget.options.length"
-        :is-qiniu="widget.options.isQiniu"
-        :is-delete="widget.options.isDelete"
-        :min="widget.options.min"
-        :is-edit="widget.options.isEdit"
-        :action="widget.options.action"
-      >
-      </fm-upload>
-    </template>
-
-    <template v-if="widget.type == 'editor'">
-      <vue-editor
-        v-model="dataModel"
-        :style="{width: widget.options.width}"
-      >
-      </vue-editor>
-    </template>
-
-    <template v-if="widget.type == 'cascader'">
-      <el-cascader
-        v-model="dataModel"
-        :disabled="widget.options.disabled"
-        :clearable="widget.options.clearable"
-        :placeholder="widget.options.placeholder"
-        :style="{width: widget.options.width}"
-        :options="widget.options.remoteOptions"
-      >
-
-      </el-cascader>
-    </template>
-
-    <template v-if="widget.type == 'text'">
-      <span>{{dataModel}}</span>
-    </template>
-  </el-form-item>
-</template>
-
-<script>
-import FmUpload from './Upload'
-
-export default {
-  props: ['widget', 'models', 'rules', 'remote'],
-  components: {
-    FmUpload
-  },
-  data () {
-    return {
-      dataModel: this.models[this.widget.model]
-    }
-  },
-  created () {
-    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
-      this.remote[this.widget.options.remoteFunc]((data) => {
-        this.widget.options.remoteOptions = data.map(item => {
-          return {
-            value: item[this.widget.options.props.value],
-            label: item[this.widget.options.props.label],
-            children: item[this.widget.options.props.children]
-          }
-        })
-      })
-    }
-
-    if (this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
-      this.remote[this.widget.options.tokenFunc]((data) => {
-        this.widget.options.token = data
-      })
-    }
-  },
-  methods: {
-  },
-  watch: {
-    dataModel: {
-      deep: true,
-      handler (val) {
-        this.models[this.widget.model] = val
-        this.$emit('update:models', {
-          ...this.models,
-          [this.widget.model]: val
-        })
-        this.$emit('input-change', val, this.widget.model)
-      }
-    },
-    models: {
-      deep: true,
-      handler (val) {
-        this.dataModel = val[this.widget.model]
-      }
-    }
-  }
-}
-</script>
+<template>
+  <el-form-item :label="widget.name" :prop="widget.model">
+    <template v-if="widget.type == 'input'">
+      <el-input
+        v-if="
+          widget.options.dataType == 'number' ||
+            widget.options.dataType == 'integer' ||
+            widget.options.dataType == 'float'
+        "
+        type="number"
+        v-model.number="dataModel"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :readonly="widget.options.readonly"
+        :clearable="widget.options.clearable"
+        :maxlength="widget.options.maxlength"
+        :show-word-limit="widget.options.showWordLimit"
+        :show-password="widget.options.showPassword"
+      >
+      </el-input>
+      <el-input
+        v-else
+        type="text"
+        v-model="dataModel"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :readonly="widget.options.readonly"
+        :clearable="widget.options.clearable"
+        :maxlength="widget.options.maxlength"
+        :show-word-limit="widget.options.showWordLimit"
+        :show-password="widget.options.showPassword"
+        :suffix-icon="widget.options.suffixIcon"
+        :prefix-icon="widget.options.prefixIcon"
+      >
+        <template v-if="widget.options.prepend" slot="prepend">{{
+          widget.options.prepend
+        }}</template>
+        <template v-if="widget.options.append" slot="append">{{
+          widget.options.append
+        }}</template>
+      </el-input>
+    </template>
+
+    <template v-if="widget.type == 'textarea'">
+      <el-input
+        type="textarea"
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width }"
+        :maxlength="widget.options.maxlength"
+        :clearable="widget.options.clearable"
+        :show-word-limit="widget.options.showWordLimit"
+        :autosize="{
+          minRows: widget.options.minRows,
+          maxRows: widget.options.maxRows
+        }"
+      ></el-input>
+    </template>
+
+    <template v-if="widget.type == 'number'">
+      <el-input-number
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :step="widget.options.step"
+        :controls-position="widget.options.controlsPosition ? 'right' : ''"
+        :disabled="widget.options.disabled"
+        :min="widget.options.min"
+        :max="widget.options.max"
+        :precision="widget.options.precision"
+      ></el-input-number>
+    </template>
+
+    <template v-if="widget.type == 'radio'">
+      <el-radio-group
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+      >
+        <template v-if="widget.options.buttonType">
+          <el-radio-button
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-radio-button>
+        </template>
+        <template v-else>
+          <el-radio
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-radio>
+        </template>
+      </el-radio-group>
+    </template>
+
+    <template v-if="widget.type == 'checkbox'">
+      <el-checkbox-group
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :min="widget.options.min"
+        :max="widget.options.max"
+      >
+        <template v-if="widget.options.buttonType">
+          <el-checkbox-button
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-checkbox-button>
+        </template>
+        <template v-else>
+          <el-checkbox
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-checkbox>
+        </template>
+      </el-checkbox-group>
+    </template>
+
+    <template v-if="widget.type == 'time'">
+      <el-time-picker
+        v-if="widget.options.timeType"
+        v-model="dataModel"
+        :is-range="widget.options.isRange"
+        :placeholder="widget.options.placeholder"
+        :start-placeholder="widget.options.startPlaceholder"
+        :end-placeholder="widget.options.endPlaceholder"
+        :readonly="widget.options.readonly"
+        :disabled="widget.options.disabled"
+        :editable="widget.options.editable"
+        :clearable="widget.options.clearable"
+        :arrowControl="widget.options.arrowControl"
+        :value-format="widget.options.format"
+        :style="{ width: widget.options.width }"
+      >
+      </el-time-picker>
+      <template v-else>
+        <el-time-select
+          v-model="dataModel[0]"
+          :placeholder="
+            widget.options.selectRange
+              ? widget.options.startPlaceholder
+              : widget.options.placeholder
+          "
+          :readonly="widget.options.readonly"
+          :disabled="widget.options.disabled"
+          :editable="widget.options.editable"
+          :clearable="widget.options.clearable"
+          :arrowControl="widget.options.arrowControl"
+          :style="{ width: widget.options.width }"
+          :picker-options="widget.options.stretTimePickerOptions"
+          @change="e => handleTimePicker(e)"
+        >
+        </el-time-select>
+        <el-time-select
+          v-model="dataModel[1]"
+          v-if="widget.options.selectRange"
+          :placeholder="widget.options.endPlaceholder"
+          :readonly="widget.options.readonly"
+          :disabled="widget.options.disabled"
+          :editable="widget.options.editable"
+          :clearable="widget.options.clearable"
+          :arrowControl="widget.options.arrowControl"
+          :style="{ width: widget.options.width }"
+          :picker-options="widget.options.endTimePickerOptions"
+        >
+        </el-time-select>
+      </template>
+    </template>
+
+    <template v-if="widget.type == 'date'">
+      <el-date-picker
+        v-model="dataModel"
+        :type="widget.options.type"
+        :is-range="widget.options.isRange"
+        :placeholder="widget.options.placeholder"
+        :start-placeholder="widget.options.startPlaceholder"
+        :end-placeholder="widget.options.endPlaceholder"
+        :readonly="widget.options.readonly"
+        :disabled="widget.options.disabled"
+        :editable="widget.options.editable"
+        :clearable="widget.options.clearable"
+        :style="{ width: widget.options.width }"
+      >
+      </el-date-picker>
+    </template>
+
+    <template v-if="widget.type == 'rate'">
+      <el-rate
+        v-model="dataModel"
+        :max="widget.options.max"
+        :disabled="widget.options.disabled"
+        :allow-half="widget.options.allowHalf"
+        :show-text="widget.options.showText"
+        :texts="widget.options.auxiliaryValue"
+      ></el-rate>
+    </template>
+
+    <template v-if="widget.type == 'color'">
+      <el-color-picker
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :show-alpha="widget.options.showAlpha"
+      ></el-color-picker>
+    </template>
+
+    <template v-if="widget.type == 'select'">
+      <el-select
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :multiple="widget.options.multiple"
+        :clearable="widget.options.clearable"
+        :placeholder="widget.options.placeholder"
+        :collapseTags="widget.options.collapseTags"
+        :allowCreate="widget.options.allowCreate"
+        :filterable="
+          widget.options.allowCreate ? true : widget.options.filterable
+        "
+        :style="{ width: widget.options.width }"
+      >
+        <el-option
+          v-for="item in widget.options.remote
+            ? widget.options.remoteOptions
+            : widget.options.options"
+          :key="item.value"
+          :value="item.value"
+          :label="
+            widget.options.showLabel || widget.options.remote
+              ? item.label
+              : item.value
+          "
+        ></el-option>
+      </el-select>
+    </template>
+
+    <template v-if="widget.type == 'switch'">
+      <el-switch
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :inactive-text="widget.options.switchInactiveText"
+        :active-text="widget.options.switchActiveText"
+        :inactive-color="widget.options.switchInactiveColor"
+        :active-color="widget.options.switchActiveColor"
+      >
+      </el-switch>
+    </template>
+
+    <template v-if="widget.type == 'slider'">
+      <el-slider
+        v-model="dataModel"
+        :min="widget.options.min"
+        :max="widget.options.max"
+        :disabled="widget.options.disabled"
+        :step="widget.options.step"
+        :show-input="widget.options.showInput"
+        :range="widget.options.range"
+        :style="{ width: widget.options.width, height: widget.options.height }"
+        :show-tooltip="widget.options.showTooltip"
+        :format-tooltip="
+          val => formatTooltip(val, widget.options.formatTooltip)
+        "
+        :show-stops="widget.options.showStops"
+        :vertical="widget.options.vertical"
+      ></el-slider>
+    </template>
+
+    <template v-if="widget.type == 'imgupload'">
+      <!-- <fm-upload
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :style="{ width: widget.options.width }"
+        :width="widget.options.size.width"
+        :height="widget.options.size.height"
+        :token="widget.options.token"
+        :domain="widget.options.domain"
+        :multiple="widget.options.multiple"
+        :length="widget.options.length"
+        :is-qiniu="widget.options.isQiniu"
+        :is-delete="widget.options.isDelete"
+        :min="widget.options.min"
+        :is-edit="widget.options.isEdit"
+        :action="widget.options.action"
+      >
+      </fm-upload> -->
+
+      <el-upload
+        class="upload-demo"
+        :action="widget.options.remoteFunc"
+        :on-preview="
+          file => handlePictureCardPreview(file, widget.options.listType)
+        "
+        :on-remove="handleRemove"
+        :multiple="widget.options.multiple"
+        :limit="widget.options.length"
+        :width="widget.options.size.width"
+        :height="widget.options.size.height"
+        :list-type="widget.options.listType"
+        :on-change="handleAvatar"
+        :on-error="handleAvatarError"
+        :drag="widget.options.drag"
+        :disabled="widget.options.disabled"
+        :auto-upload="false"
+      >
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="widget.options.disabled"
+          v-if="
+            ['default', 'picture'].includes(widget.options.listType) &&
+              !widget.options.drag
+          "
+          >点击上传</el-button
+        >
+        <i
+          slot="default"
+          class="el-icon-plus"
+          v-if="
+            widget.options.listType === 'picture-card' && !widget.options.drag
+          "
+        ></i>
+        <i class="el-icon-upload" v-if="widget.options.drag"></i>
+        <div class="el-upload__text" v-if="widget.options.drag">
+          将文件拖到此处，或<em>点击上传</em>
+        </div>
+        <div
+          slot="tip"
+          class="el-upload__tip"
+          v-html="widget.options.elUploadTip"
+        ></div>
+      </el-upload>
+    </template>
+
+    <template v-if="widget.type == 'editor'">
+      <vue-editor
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+      >
+      </vue-editor>
+    </template>
+
+    <template v-if="widget.type == 'cascader'">
+      <el-cascader
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :clearable="widget.options.clearable"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width, height: widget.options.height }"
+        :options="widget.options.remoteOptions"
+        :props="widget.options.props"
+        :show-all-levels="widget.options.showAllLevels ? false : true"
+        :collapse-tags="widget.options.collapseTags"
+        :filterable="widget.options.filterable"
+      >
+        <template slot-scope="{ data }">
+          <span v-html="widget.options.prepend"></span>
+          <span>{{ data.label }}</span>
+          <span v-html="widget.options.append"></span>
+        </template>
+      </el-cascader>
+    </template>
+
+    <template v-if="widget.type == 'text'">
+      <span>{{ dataModel }}</span>
+    </template>
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <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: ["widget", "models", "rules", "remote"],
+  components: {
+    FmUpload,
+    VueEditor
+  },
+  data() {
+    return {
+      dataModel: this.models[this.widget.model],
+      dialogVisible: false,
+      dialogImageUrl: ""
+    };
+  },
+  created() {
+    if (
+      this.widget.options.remote &&
+      this.remote[this.widget.options.remoteFunc]
+    ) {
+      this.remote[this.widget.options.remoteFunc](data => {
+        this.widget.options.remoteOptions = data.map(item => {
+          return {
+            value: item[this.widget.options.props.value],
+            label: item[this.widget.options.props.label],
+            children: item[this.widget.options.props.children]
+          };
+        });
+      });
+    }
+
+    if (
+      this.widget.type === "imgupload" &&
+      this.remote[this.widget.options.remoteFunc]
+    ) {
+      this.remote[this.widget.options.remoteFunc](data => {
+        this.widget.options.remoteApi = data;
+      });
+    }
+
+    if (this.widget.type === "time" && !this.widget.options.timeType) {
+      this.dataModel = [];
+    }
+  },
+  methods: {
+    handleTimePicker(vals) {
+      this.dataModel = [];
+      this.dataModel[0] = vals;
+      this.widget.options.endTimePickerOptions.minTime = vals;
+    },
+    formatTooltip(val, num) {
+      return val / num;
+    },
+    handlePictureCardPreview(file, listType) {
+      if (listType === "picture-card") {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    },
+    handleRemove(file, fileList) {
+      this.dataModel = {
+        data: fileList,
+        remoteApi: this.widget.options.remoteApi
+      };
+    },
+    handleAvatar(res, file) {
+      this.dataModel = {
+        data: file,
+        remoteApi: this.widget.options.remoteApi
+      };
+    },
+    handleAvatarError() {
+      console.log("上传失败！");
+    }
+  },
+  watch: {
+    dataModel: {
+      deep: true,
+      handler(val) {
+        this.models[this.widget.model] = val;
+        this.$emit("update:models", {
+          ...this.models,
+          [this.widget.model]: val
+        });
+        this.$emit("input-change", val, this.widget.model);
+      }
+    },
+    models: {
+      deep: true,
+      handler(val) {
+        this.dataModel = val[this.widget.model];
+      }
+    }
+  }
+};
+</script>