hbte-saas-ui 0.0.1

package/packages/dialog/src/main.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="hb-dialog">
+    <el-dialog
+      v-bind="$attrs"
+      v-on="$listeners"
+      :title="title"
+      :visible.sync="visible"
+      :close-on-click-modal="closeOnClick"
+      :close-on-press-escape="closeOnEsc"
+      :destroy-on-close="true"
+      @close="onClose"
+      @closed="onClosed"
+    >
+      <!-- 弹窗主体内容插槽,before和after插槽只是为了普通内容和表单内容的布局考虑 -->
+      <div class="content hb-dialog__wrapper">
+        <slot name="before"></slot>
+        <!-- 表单内容插槽 -->
+        <el-form
+          class="form-wrapper"
+          ref="ruleForm"
+          size="small"
+          v-if="formData"
+          :model="formData"
+          :rules="rules"
+          :label-width="labelWidth"
+          :label-position="labelPosition"
+        >
+          <slot name="form"></slot>
+        </el-form>
+        <!-- 普通内容插槽 -->
+        <slot name="normal"></slot>
+        <slot name="after"></slot>
+      </div>
+      <slot name="bottom"></slot>
+      <!-- 底部按钮插槽 -->
+
+      <!-- 默认底部按钮组，父组件传自定义按钮组件则默认的不显示 -->
+      <div
+        class="default-footer-btn-wrapper flex-end hb-dialog__footer-btn"
+        slot="footer"
+        v-if="showFooter"
+      >
+        <slot name="dialogFooter" :submit="submit" :loading="loading">
+          <el-button
+            class="exist-btn"
+            size="small"
+            @click="close(false, $event)"
+            v-show="footerText.exist"
+            >{{ footerText.exist }}</el-button
+          >
+          <el-button
+            type="primary"
+            class="confirm-btn"
+            size="small"
+            @click="submit"
+            :loading="loading"
+            v-show="footerText.confirm"
+            >{{ footerText.confirm }}</el-button
+          >
+        </slot>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "HbDialog",
+  componentName: "HbDialog",
+  data() {
+    return {
+      visible: false,
+      loading: false,
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    labelPosition: {
+      type: String,
+      default: "top",
+    },
+    labelWidth: {
+      type: String,
+      default: "80px",
+    },
+    closeOnClick: {
+      default: () => false,
+    },
+    closeOnEsc: {
+      default: () => false,
+    },
+    footerText: {
+      default: () => {
+        // 默认底部按钮组文案
+        return {
+          confirm: "确定",
+          exist: "取消",
+        };
+      },
+    },
+    formData: {
+      default: () => null,
+    },
+    rules: {
+      default: () => {},
+    },
+    appendBody: {
+      default: false,
+    },
+    modalAppendBody: {
+      default: true,
+    },
+    // 是否显示底部按钮区域
+    showFooter: {
+      default: true,
+    },
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    submit(arg) {
+      // 发起请求前进行表单值校验
+      if (this.formData) {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            this.$emit("submit", arg);
+          } else {
+            return false;
+          }
+        });
+      } else {
+        this.loading = true;
+        this.$emit("submit", arg);
+      }
+    },
+    onClose() {
+      this.resetRuleForm();
+      this.$emit("close");
+    },
+    onClosed() {
+      this.resetLoading(); // 防止弹窗动画结束前暴力点击确认按钮
+      this.$emit("closed");
+    },
+    resetLoading() {
+      // 常用于父组件请求失败后关闭按钮的loading状态
+      this.loading = false;
+    },
+    resetRuleForm() {
+      // 对话框关闭，还原表单值
+      this.formData && this.$refs.ruleForm.resetFields(); // 如果有表单则还原表单的值
+    },
+    // 重新触发验证
+    validate() {
+      this.$refs.ruleForm.validate();
+    },
+    // 清空验证
+    clearValidate() {
+      this.$nextTick(() => {
+        this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
+      });
+    },
+    // 单独触发某一项的验证
+    validateSomeField(fielidName) {
+      this.$refs.ruleForm.validateField(fielidName);
+    },
+  },
+};
+</script>
+

package/packages/edit-area/index.js

@@ -0,0 +1,13 @@
+import HbEditarea from "./src/main.vue";
+import config from "./src/config.js"
+
+HbEditarea.install = function (Vue) {
+  Vue.component(HbEditarea.name, HbEditarea);
+};
+HbEditarea.config = function (params) {
+  // 空值处理策略
+  config.emptyClear = !!params.emptyClear
+
+};
+
+export default HbEditarea;

package/packages/edit-area/src/config.js

@@ -0,0 +1,3 @@
+export default {
+  emptyClear: false, // 输入置空时失焦是否清空值
+}

package/packages/edit-area/src/main.vue

@@ -0,0 +1,304 @@
+<template>
+  <!-- 常驻编辑 -->
+  <p v-if="keepEdit" class="hb-editarea">
+    <i v-if="loading" class="el-icon-loading hb-editarea__loading"></i>
+    <span v-else class="hb-editarea__form">
+      <hb-query-form
+        :formProp="{
+          prop: 'cache',
+          type: type,
+          optList: optList,
+          multiple: multiple,
+          placeholder: placeholder,
+        }"
+        :qryFormData="cache"
+        size="mini"
+        class="hb-editarea__form-item"
+        @[passType[type].event]="handleSave(false)"
+        @focus="handleFocus"
+      ></hb-query-form>
+      <el-tooltip
+        v-if="error"
+        effect="dark"
+        :content="error"
+        placement="bottom"
+      >
+        <i class="el-icon-warning hb-editarea-error hb-editarea-icon"></i>
+      </el-tooltip>
+    </span>
+  </p>
+  <!-- 双击编辑 -->
+  <p v-else class="hb-editarea">
+    <span v-if="!editing" @dblclick="handleEdit" class="hb-editarea__text"
+      >{{ value }}
+      <i class="el-icon-edit hb-editarea-icon" @click="handleEdit"></i
+    ></span>
+    <span v-else-if="!loading" class="hb-editarea__edit">
+      <hb-query-form
+        :formProp="{
+          prop: 'cache',
+          type: type,
+          optList: optList,
+          multiple: multiple,
+        }"
+        :qryFormData="cache"
+        size="mini"
+        class="hb-editarea__edit-input"
+        @[passType[type].event]="handleSave(false)"
+        @focus="handleFocus"
+      ></hb-query-form>
+      <el-tooltip
+        v-if="error"
+        effect="dark"
+        :content="error"
+        placement="bottom"
+      >
+        <i class="el-icon-warning hb-editarea-error hb-editarea-icon"></i>
+      </el-tooltip>
+      <div v-if="border" class="hb-editarea__bg hb-editarea__bg--border"></div>
+      <div v-else class="hb-editarea__bg"></div>
+    </span>
+    <i v-if="loading" class="el-icon-loading hb-editarea__loading"></i>
+  </p>
+</template>
+
+<script>
+import CONFIG from "./config.js";
+import { bindFocus, unBindFocus } from "./simulateEvent.js";
+export default {
+  name: "HbEditarea",
+  componentName: "HbEditarea",
+  props: {
+    keepEdit: {
+      type: Boolean,
+      default: () => false,
+    },
+    /** 传递给queryForm控件的事件 */
+    type: {
+      type: String,
+      default: () => "input",
+    },
+    optList: {
+      type: Array,
+      default: () => [],
+    },
+    multiple: {
+      type: Boolean,
+      default: () => false,
+    },
+    value: {
+      default: () => "",
+    },
+    placeholder: {
+      default: () => "请编辑内容",
+    },
+    /** 编辑时值为空时是否保存，传入true将会在清空时保存空值 */
+    emptyClear: {
+      default: () => false,
+    },
+    /** 编辑时是否显示边框 */
+    border: {
+      type: Boolean,
+      default: () => false,
+    },
+    /** 回填、保存等回调 */
+    insert: {
+      type: Function,
+      default: null,
+    },
+    change: {
+      type: Function,
+      default: null,
+    },
+    /** 校验 */
+    validate: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      /** 状态 */
+      loading: false,
+      error: false,
+      editing: false,
+      /** 缓存值 */
+      cache: { cache: null },
+      /** 编辑可用的控件类型及对应的失焦事件、初始值 */
+      passType: {
+        input: { event: "blur", empty: "" },
+        select: { event: "change", empty: [] },
+        date: { event: "blur", empty: "" },
+        daterange: { event: "blur", empty: [] },
+        switch: { event: null, empty: null },
+        checkbox: { event: "change", empty: [] },
+        radio: { event: "change", empty: "" },
+      },
+      /** 即使不传入insert的类型，用值自动填充，除此之外会置空 */
+      insertType: ["input", "select", "switch", "radio", "date"],
+    };
+  },
+  computed: {
+    empty() {
+      const passTypeData = this.passType[this.type];
+      return passTypeData ? passTypeData.empty : null;
+    },
+  },
+  methods: {
+    /** api */
+    /**
+     * @function validateEdit 对外提供一个校验方法，仅在keepEdit=true时有效，会使用validate传参校验控件的输入
+     * @param {Function} callback 失败时传入错误
+     */
+    validateEdit(callback) {
+      if (this.keepEdit) {
+        this.cacheValidate(typeof callback === "function" ? callback : null);
+      } else {
+        typeof callback === "function" &&
+          callback(new Error("当前控件不支持手动校验"));
+      }
+    },
+    /** methods */
+    /**
+     * @function reset 重置控件，回到初始状态
+     */
+    reset() {
+      this.$set(this.cache, "cache", null);
+      this.editing = false;
+      this.loading = false;
+      this.error = "";
+    },
+    /**
+     * @function cacheValidate 校验cache,并显示错误
+     * @param {Function} callback 校验成功回调,失败时传入错误
+     */
+    cacheValidate(callback) {
+      const cache = this.cache.cache;
+      if (typeof this.validate === "function") {
+        this.loading = true;
+        this.validate((error) => {
+          this.loading = false;
+          if (Object.prototype.toString.call(error) === "[object Error]") {
+            this.error = String(error.message);
+            typeof callback === "function" && callback(error);
+          } else {
+            this.error = "";
+            typeof callback === "function" && callback();
+          }
+        }, cache);
+      } else {
+        typeof callback === "function" && callback();
+      }
+    },
+    /** events */
+    /**
+     * @event handleEdit 开始编辑单元格
+     */
+    handleEdit() {
+      // 进入编辑状态,清空上次的cache
+      if (this.editing) {
+        return;
+      }
+      this.reset();
+      this.editing = true;
+      // 回填值处理
+      if (typeof this.insert === "function") {
+        // 优先采用传入的insert回填值
+        this.$set(this.cache, "cache", this.insert(this.value));
+      } else if (this.insertType.indexOf(this.type) !== -1) {
+        // 部分类型回填value
+        this.$set(this.cache, "cache", this.value);
+      } else {
+        // 其他情况置空
+        this.$set(this.cache, "cache", this.empty);
+      }
+    },
+    /**
+     * @event handleFocus 获得焦点时清空error
+     */
+    handleFocus() {
+      this.error = "";
+    },
+    /**
+     * @event handleSave 编辑单元格完成
+     * @param {Boolean} simulation 模拟标记，模拟失焦触发时传入true，避免多选等控件持续触发change造成错误的保存时机
+     */
+    handleSave(simulation) {
+      const cache = this.cache.cache;
+      if (this.keepEdit) {
+        // keepEdit状态，true直接进行保存并同时校验
+        if (simulation || this.loading) {
+          // 不处理：全局失焦或loading状态不处理
+          return;
+        }
+        // 多选控件change时保存不影响
+        // if (this.multiple && !simulation) {
+        //   return;
+        // }
+        this.cacheValidate(() => {
+          // 无论成功失败都改变值
+          this.$emit("update:value", cache);
+        });
+      } else {
+        // 非keepEdit状态完全由组件接管校验
+        if (!this.editing || this.loading) {
+          // 不处理：未处于编辑状态或loading状态不处理
+          return;
+        }
+        if (this.multiple && !simulation) {
+          // 多选类型控件仅全局失焦时处理
+          return;
+        }
+        // 失焦保存处理
+        const handler = (er) => {
+          if (er) {
+            return;
+          }
+          // 1.如果值没有变化不触发事件
+          if (cache === this.value) {
+            this.editing = false;
+            return;
+          }
+          // 2.值为空根据传参决定是否保存空值
+          if (cache === this.empty) {
+            if (CONFIG.emptyClear || this.emptyClear) {
+              this.$emit("update:value", this.empty);
+            }
+            this.editing = false;
+            return;
+          }
+          // 3.进行保存
+          if (typeof this.change === "function") {
+            // 3.1如果传入了change函数，将会由change接管处理，不再对value赋值
+            this.loading = true;
+            this.change(() => {
+              this.reset();
+            }, cache);
+          } else {
+            // 3.2未传入change将直接对value进行赋值;注意外面需要使用.sync修饰符绑定value
+            this.$emit("update:value", cache);
+            this.editing = false;
+          }
+        };
+        // 校验成功进行保存，失败进入error状态
+        this.cacheValidate(handler);
+      }
+    },
+  },
+  mounted() {
+    // 配置点击hb-editarea以外的区域触发focus
+    // configFocus("hb-editarea__wrap");
+    // if (this.$el.parentNode.className.indexOf("hb-editarea__wrap") === -1) {
+    //   this.$el.parentNode.className += " hb-editarea__wrap";
+    // }
+    // 测试
+    unBindFocus(this.$el);
+    bindFocus(this.$el, () => {
+      this.handleSave(true);
+    });
+    if (this.keepEdit) {
+      this.$set(this.cache, "cache", this.value);
+    }
+  },
+};
+</script>