tianheng-ui 0.0.39 → 0.0.40

package/packages/formMaking/CusDialog.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    class="cus-dialog-container"
+    :title="title"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    append-to-body
+    center
+    :width="width"
+    ref="elDialog"
+    :id="id"
+    >
+    <span v-if="show">
+      <slot></slot>
+    </span>
+
+    <span v-if="action" slot="footer" class="dialog-footer" v-loading="loading"
+      :element-loading-text="loadingText">
+      <slot name="action">
+        <el-button @click="close">{{$t('fm.actions.cancel')}}</el-button>
+        <el-button type="primary" @click="submit" >{{$t('fm.actions.confirm')}}</el-button>
+      </slot>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: Boolean,
+    loadingText: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '600px'
+    },
+    form: {
+      type: Boolean,
+      default: true
+    },
+    action: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    show () {
+      if (this.form) {
+        return this.showForm
+      } else {
+        return true
+      }
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      dialogVisible: this.visible,
+      id: 'dialog_' + new Date().getTime(),
+      showForm: false
+    }
+  },
+  methods: {
+    close () {
+      this.dialogVisible = false
+    },
+    submit () {
+      this.loading = true
+
+      this.$emit('on-submit')
+    },
+    end () {
+      this.loading = false
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    dialogVisible (val) {
+      if (!val) {
+        this.loading = false
+        this.$emit('on-close')
+        setTimeout(() => {
+          this.showForm = false
+        }, 300)
+      } else {
+        this.showForm = true
+      }
+    },
+    visible (val) {
+      this.dialogVisible = val
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.cus-dialog-container{
+  .el-dialog__footer{
+    margin: 0 20px;
+    // border-top: 1px dashed #ccc;
+    padding: 15px 0 16px;
+    text-align: center;
+    position: relative;
+
+    .dialog-footer{
+      display: block;
+
+      .circular{
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 5px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .el-loading-text{
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .el-loading-spinner{
+        margin-top: -12px;
+      }
+    }
+  }
+}
+</style>

package/packages/formMaking/FormConfig.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="form-config-container">
+    <el-form label-position="top">
+      <el-form-item :label="$t('fm.config.form.labelPosition.title')">
+        <el-radio-group v-model="data.labelPosition">
+          <el-radio-button label="left">{{$t('fm.config.form.labelPosition.left')}}</el-radio-button>
+          <el-radio-button label="right">{{$t('fm.config.form.labelPosition.right')}}</el-radio-button>
+          <el-radio-button label="top">{{$t('fm.config.form.labelPosition.top')}}</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item :label="$t('fm.config.form.labelWidth')">
+        <el-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
+      </el-form-item>
+
+      <el-form-item :label="$t('fm.config.form.size')">
+        <el-radio-group v-model="data.size">
+          <el-radio-button label="medium">medium</el-radio-button>
+          <el-radio-button label="small">small</el-radio-button>
+          <el-radio-button label="mini">mini</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['data']
+}
+</script>

package/packages/formMaking/GenerateForm.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="fm-style">
+    <el-form
+      ref="generateForm"
+      label-suffix=":"
+      :size="data.config.size"
+      :model="models"
+      :rules="rules"
+      :label-position="data.config.labelPosition"
+      :label-width="data.config.labelWidth + 'px'"
+    >
+      <template v-for="item in data.list">
+        <template v-if="item.type == 'grid'">
+          <el-row
+            :key="item.key"
+            type="flex"
+            :gutter="item.options.gutter ? item.options.gutter : 0"
+            :justify="item.options.justify"
+            :align="item.options.align"
+          >
+            <el-col
+              v-for="(col, colIndex) in item.columns"
+              :key="colIndex"
+              :span="col.span"
+            >
+              <template v-for="citem in col.list">
+                <el-form-item
+                  v-if="citem.type == 'blank'"
+                  :label="citem.name"
+                  :prop="citem.model"
+                  :key="citem.key"
+                >
+                  <slot :name="citem.model" :model="models"></slot>
+                </el-form-item>
+                <genetate-form-item
+                  v-else
+                  :key="citem.key"
+                  :models.sync="models"
+                  :remote="remote"
+                  :rules="rules"
+                  :widget="citem"
+                  @input-change="onInputChange"
+                >
+                </genetate-form-item>
+              </template>
+            </el-col>
+          </el-row>
+        </template>
+
+        <template v-else-if="item.type == 'blank'">
+          <el-form-item :label="item.name" :prop="item.model" :key="item.key">
+            <slot :name="item.model" :model="models"></slot>
+          </el-form-item>
+        </template>
+
+        <template v-else>
+          <genetate-form-item
+            :key="item.key"
+            :models.sync="models"
+            :rules="rules"
+            :widget="item"
+            @input-change="onInputChange"
+            :remote="remote"
+          >
+          </genetate-form-item>
+        </template>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import GenetateFormItem from "./GenerateFormItem";
+
+export default {
+  name: "fm-generate-form",
+  components: {
+    GenetateFormItem,
+  },
+  props: ["data", "remote", "value", "insite"],
+  data() {
+    return {
+      models: {},
+      rules: {},
+    };
+  },
+  created() {
+    this.generateModle(this.data.list);
+  },
+  mounted() {},
+  methods: {
+    generateModle(genList) {
+      for (let i = 0; i < genList.length; i++) {
+        if (genList[i].type === "grid") {
+          genList[i].columns.forEach((item) => {
+            this.generateModle(item.list);
+          });
+        } else {
+          if (
+            this.value &&
+            Object.keys(this.value).indexOf(genList[i].model) >= 0
+          ) {
+            this.models[genList[i].model] = this.value[genList[i].model];
+          } else {
+            if (genList[i].type === "blank") {
+              this.$set(
+                this.models,
+                genList[i].model,
+                genList[i].options.defaultType === "String"
+                  ? ""
+                  : genList[i].options.defaultType === "Object"
+                  ? {}
+                  : []
+              );
+            } else {
+              this.models[genList[i].model] = genList[i].options.defaultValue;
+            }
+          }
+
+          if (this.rules[genList[i].model]) {
+            this.rules[genList[i].model] = [
+              ...this.rules[genList[i].model],
+              ...genList[i].rules.map((item) => {
+                if (item.pattern) {
+                  return { ...item, pattern: new RegExp(item.pattern) };
+                } else {
+                  return { ...item };
+                }
+              }),
+            ];
+          } else {
+            this.rules[genList[i].model] = [
+              ...genList[i].rules.map((item) => {
+                if (item.pattern) {
+                  return { ...item, pattern: new RegExp(item.pattern) };
+                } else {
+                  return { ...item };
+                }
+              }),
+            ];
+          }
+        }
+      }
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.$refs.generateForm.validate((valid) => {
+          if (valid) {
+            resolve(this.models);
+          } else {
+            reject(new Error(this.$t("fm.message.validError")).message);
+          }
+        });
+      });
+    },
+    reset() {
+      this.$refs.generateForm.resetFields();
+    },
+    onInputChange(value, field) {
+      this.$emit("on-change", field, value, this.models);
+    },
+    refresh() {},
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler(val) {
+        this.generateModle(val.list);
+      },
+    },
+    value: {
+      deep: true,
+      handler(val) {
+        console.log(JSON.stringify(val));
+        this.models = { ...this.models, ...val };
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+// @import '../styles/cover.scss';
+</style>

package/packages/formMaking/GenerateFormItem.vue

@@ -0,0 +1,266 @@
+<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>