tianheng-ui 0.1.0 → 0.1.2

package/packages/Dialog/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-dialog
+    class="th-dialog"
+    :class="[customClass]"
+    :visible.sync="visible"
+    :width="width"
+    :top="top"
+    :fullscreen="dialogFullscreen"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :show-close="false"
+    :modal="modal"
+    :modal-append-to-body="modalAppendToBody"
+    :append-to-body="appendToBody"
+    :before-close="handleBeforeClose"
+    :destroy-on-close="destroyOnClose"
+  >
+    <div slot="title" class="th-dialog__header">
+      <div class="th-dialog__title">{{ title }}</div>
+      <div class="th-dialog__action">
+        <i
+          v-if="showFullscreen"
+          class="th-dialog__action_item"
+          :class="fullscreenIcon"
+          @click="handleFullscreenChange"
+        ></i>
+        <i
+          v-if="showClose"
+          class="th-dialog__action_item "
+          :class="closeIcon"
+          @click="handleBeforeClose"
+        ></i>
+      </div>
+    </div>
+    <slot />
+
+    <template v-if="$slots.footer" slot="footer">
+      <slot name="footer" />
+    </template>
+    <template v-else-if="showFooter" slot="footer">
+      <el-button
+        v-if="showAffirm"
+        type="primary"
+        :loading="affirmLoading"
+        @click="handleAffirm"
+        >{{ affirmText }}</el-button
+      >
+      <el-button v-if="showCancel" @click="handleClose">{{
+        cancelText
+      }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "ThDialog",
+  model: {
+    prop: "visible",
+    event: "input"
+  },
+  props: {
+    visible: Boolean,
+    title: { type: String, default: "" },
+    width: { type: String, default: "800px" },
+    fullscreen: { type: Boolean, default: false },
+    top: { type: String, default: "15vh" },
+    modal: { type: Boolean, default: true },
+    modalAppendToBody: { type: Boolean, default: true },
+    appendToBody: { type: Boolean, default: false },
+    customClass: String,
+    closeOnClickModal: { type: Boolean, default: false },
+    closeOnPressEscape: { type: Boolean, default: false },
+    beforeClose: Function,
+    destroyOnClose: { type: Boolean, default: false },
+
+    showAffirm: { type: Boolean, default: true },
+    affirmLoading: Boolean,
+    affirmText: { type: String, default: "确 认" },
+
+    showCancel: { type: Boolean, default: true },
+    cancelText: { type: String, default: "取 消" },
+
+    showClose: { type: Boolean, default: true },
+    closeIcon: { type: String, default: "el-icon-close" },
+
+    showFullscreen: { type: Boolean, default: true },
+    fullscreenIcon: { type: String, default: "el-icon-full-screen" },
+
+    showFooter: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      formRules: {},
+      dialogFullscreen: this.fullscreen
+    };
+  },
+  watch: {
+    fullscreen(value) {
+      this.dialogFullscreen = value;
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit("input", !this.visible);
+      this.$emit("on-close");
+    },
+    handleBeforeClose(done) {
+      if (this.beforeClose) {
+        const callback = () => {
+          this.handleClose();
+        };
+        this.beforeClose(callback);
+      } else {
+        this.handleClose();
+      }
+    },
+    handleAffirm() {
+      this.$emit("on-affirm");
+    },
+    handleFullscreenChange() {
+      this.dialogFullscreen = !this.dialogFullscreen;
+      this.$nextTick(() => {
+        this.$emit("on-fullscreen");
+      });
+    }
+  }
+};
+</script>

package/packages/Empty/index.js

@@ -0,0 +1,8 @@
+import Empty from "./index.vue";
+
+/* istanbul ignore next */
+Empty.install = function(Vue) {
+  Vue.component(Empty.name, Empty);
+};
+
+export default Empty;

package/packages/Empty/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="th-empty">
+    <img
+      v-if="image"
+      class="th-empty-img"
+      :style="imageStyle"
+      :src="image"
+      alt=""
+    />
+    <slot v-else name="image" />
+    <slot v-if="$slots.description" name="description" />
+    <p v-else class="th-empty-description">{{ description }}</p>
+    <div v-if="$slots.default" class="th-empty-bottom">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThEmpty",
+  props: {
+    image: { type: String, default: "" },
+    imageSize: { type: Number, default: 300 },
+    description: { type: String, default: "暂无数据" }
+  },
+  computed: {
+    imageStyle() {
+      return {
+        width: this.imageSize ? `${this.imageSize}px` : ""
+      };
+    }
+  }
+};
+</script>

package/packages/FormMaking/FormConfig.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="form-config-container">
+    <el-form label-position="top">
+      <el-form-item label="UI">
+        <el-radio-group v-model="data.ui">
+          <el-radio-button label="element">Element</el-radio-button>
+          <el-radio-button label="vant" disabled>Vant</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="表单标题" required>
+        <el-input
+          v-model="data.title"
+          placeholder="请输入"
+          clearable
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="表单宽度">
+        <el-input v-model="data.width"></el-input>
+      </el-form-item>
+
+      <el-form-item label="表单标签宽度">
+        <el-input-number
+          v-model="data.labelWidth"
+          :min="0"
+          :max="200"
+          :step="10"
+        ></el-input-number>
+      </el-form-item>
+
+      <el-form-item label="标签对齐方式">
+        <el-radio-group v-model="data.labelPosition">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+          <el-radio-button label="top">顶部对齐</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="组件尺寸">
+        <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-item label="操作属性">
+        <el-checkbox v-model="data.disabled">禁用 </el-checkbox>
+        <el-checkbox v-model="data.hideLabel">隐藏标签 </el-checkbox>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["data"]
+};
+</script>

package/packages/FormMaking/GenerateForm.vue

@@ -0,0 +1,308 @@
+<template>
+  <div v-if="formJson.config">
+    <el-form
+      class="generateForm"
+      :class="{ 'form-hideLabel': formJson.config.hideLabel }"
+      :style="{ width: formWidth }"
+      :label-suffix="formJson.config.labelSuffix"
+      :size="formJson.config.size"
+      :model="models"
+      :label-position="formJson.config.labelPosition"
+      :label-width="formJson.config.labelWidth + 'px'"
+      ref="generateForm"
+    >
+      <genetate-form-item
+        v-for="item in formJson.list"
+        :key="item.key"
+        :models.sync="models"
+        :widget="item"
+        :slotKeys="slotKeys"
+        :remote="remoteData"
+        :config="formJson.config"
+        :prop="item.type === 'grid' ? '' : item.model"
+        :componentsData="componentsData"
+        @input-change="onInputChange"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </genetate-form-item>
+    </el-form>
+    <!-- <van-form
+      v-else
+      class="generateForm"
+      :class="{ 'form-hideLabel': formJson.config.hideLabel }"
+      :style="{ width: formWidth }"
+      style="margin: 0 auto;"
+      :label-align="formJson.config.labelPosition"
+      :label-width="formJson.config.labelWidth + 'px'"
+      ref="generateForm"
+    >
+      <genetate-form-item-h5
+        v-for="item in formJson.list"
+        :key="item.key"
+        :models.sync="models"
+        :widget="item"
+        :slotKeys="slotKeys"
+        :remote="remoteData"
+        :config="formJson.config"
+        :prop="item.type === 'grid' ? '' : item.model"
+        :componentsData="componentsData"
+        @input-change="onInputChange"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </genetate-form-item-h5>
+    </van-form> -->
+  </div>
+</template>
+
+<script>
+import * as Axios from "lib/theme-chalk/js/axios";
+import GenetateFormItem from "./GenerateFormItem";
+
+export default {
+  name: "thFormGenerate",
+  components: { GenetateFormItem },
+  props: {
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    remoteData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    slotKeys: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    client: String
+  },
+  data() {
+    return {
+      formJson: this.data,
+      models: {},
+      componentsData: [],
+      axios: null
+    };
+  },
+  computed: {
+    formWidth() {
+      if (this.formJson.config.width) return this.formJson.config.width;
+      if (this.client === "mobile") return "375px";
+
+      return "";
+    }
+  },
+  watch: {
+    data(val) {
+      this.setJSON(val);
+    },
+    formJson: {
+      handler(val) {
+        this.$emit("update:data", val);
+      },
+      deep: true
+    },
+    value: {
+      deep: true,
+      handler(val) {
+        this.models = { ...this.models, ...val };
+      }
+    }
+  },
+  created() {
+    this.axios = Axios.init(this.oauthConfig);
+    this.generateModle(this.formJson.list);
+  },
+  mounted() {},
+  methods: {
+    generateModle(genList, modelObj) {
+      if (!genList) return;
+      genList.map(item => {
+        if (item.type === "grid") {
+          item.columns.forEach(item => {
+            this.generateModle(item.list, modelObj);
+          });
+        } else if (item.type === "tabs") {
+          if (modelObj) {
+            this.$set(modelObj, item.model, {});
+            item.tabs.forEach(item2 => {
+              this.$set(modelObj[item.model], item2.value, {});
+              this.generateModle(item2.list, modelObj[item.model][item2.value]);
+            });
+          } else {
+            this.$set(this.models, item.model, {});
+            item.tabs.forEach(item2 => {
+              this.$set(this.models[item.model], item2.value, {});
+              this.generateModle(
+                item2.list,
+                this.models[item.model][item2.value]
+              );
+            });
+          }
+        } else if (item.type === "table" || item.type === "table_h5") {
+          if (modelObj) {
+            this.$set(
+              modelObj,
+              item.model,
+              JSON.parse(item.options.defaultValue || "[]")
+            );
+            this.generateModle(item.list, modelObj[item.model]);
+          } else {
+            this.$set(
+              this.models,
+              item.model,
+              JSON.parse(item.options.defaultValue || "[]")
+            );
+            this.generateModle(item.list, this.models[item.model]);
+          }
+        } else if (modelObj) {
+          if (!modelObj[item.model]) {
+            this.$set(modelObj, item.model, item.options.defaultValue);
+          }
+
+          this.generateRules(item);
+        } else {
+          if (this.value && Object.keys(this.value).indexOf(item.model) >= 0) {
+            this.$set(this.models, item.model, this.value[item.model]);
+          } else {
+            if (item.type === "blank") {
+              this.$set(
+                this.models,
+                item.model,
+                item.options.defaultType === "String"
+                  ? ""
+                  : item.options.defaultType === "Object"
+                  ? {}
+                  : []
+              );
+            } else {
+              this.$set(
+                this.models,
+                item.model,
+                JSON.parse(JSON.stringify(item.options.defaultValue))
+              );
+            }
+          }
+
+          this.generateRules(item);
+        }
+      });
+    },
+    generateRules(item) {
+      if (!item.rules) item.rules = [];
+      item.rules.forEach(rule => {
+        if (rule.pattern) {
+          rule.pattern = new RegExp(rule.pattern);
+        }
+      });
+      this.hendleRemoteData(item);
+    },
+    hendleRemoteData(item) {
+      if (!item.options.remote) return;
+      if (item.type === "upload" || item.type === "button") return;
+
+      const remoteFunc = item.options.remoteFunc;
+      this.axios({
+        url: remoteFunc.api,
+        method: remoteFunc.method,
+        headers: remoteFunc.headers,
+        data: { ...remoteFunc.params }
+      }).then(res => {
+        const resultData = res.data.records;
+        item.options.remoteOptions = resultData.map(element => {
+          return {
+            value: element[item.options.props.value || "value"],
+            label: element[item.options.props.label || "label"],
+            children: element[item.options.props.children || "children"]
+          };
+        });
+      });
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.$refs.generateForm.validate(valid => {
+          if (valid) {
+            resolve(this.models);
+          } else {
+            reject(new Error("表单数据校验失败").message);
+          }
+        });
+      });
+    },
+    reset() {
+      this.$refs.generateForm.resetFields();
+    },
+    onInputChange(value, field) {
+      this.$emit("on-change", field, value, this.models);
+    },
+    setJSON(json) {
+      this.formJson = json;
+      this.generateModle(this.formJson.list);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.generateForm {
+  margin: 0 auto;
+  /deep/ .widget-form-list-table > .el-form-item__content {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .form-hideLabel {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .widget-form-list-filler {
+    margin-bottom: 0 !important;
+  }
+  .widget-form-list-image {
+    margin-bottom: 0 !important;
+  }
+
+  .tableH5 {
+    // 操作按钮布局
+    .tableH5-item > div {
+      display: flex;
+
+      .actions {
+        align-items: center;
+        justify-content: right;
+      }
+    }
+  }
+}
+</style>