hbte-saas-ui 0.0.2 → 1.0.2

package/packages/custom-query/src/main.vue

@@ -1,80 +0,0 @@
-<template>
-  <hb-dialog
-    title="新建筛选"
-    width="60%"
-    ref="customQuery"
-    class="hb-customquery"
-    @submit="sumbit"
-  >
-    <el-form
-      ref="queryForm"
-      :model="qryFormData"
-      size="small"
-      label-position="top"
-      slot="normal"
-    >
-      <el-row :gutter="40">
-        <el-col v-for="(i, index) in qryFormProps" :span="12" :key="index">
-          <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
-            <hb-query-form
-              :formProp="i"
-              :qryFormData="qryFormData"
-            ></hb-query-form>
-          </el-form-item>
-        </el-col>
-
-        <p class="hb-customquery-text">谁可以查看此列表视图？</p>
-
-        <el-col :span="12">
-          <el-radio v-model="radio" label="1"
-            >只有我可以查看此列表视图</el-radio
-          >
-        </el-col>
-        <el-col :span="12">
-          <el-radio v-model="radio" label="2"
-            >所有用户均可以查看此列表视图</el-radio
-          >
-        </el-col>
-      </el-row>
-    </el-form>
-    <!-- <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false" size="small">取消</el-button>
-      <el-button type="primary" @click="sumbit" size="small">保存</el-button>
-    </span> -->
-  </hb-dialog>
-</template>
-<script>
-export default {
-  name: "HbCustomQuery",
-  componentName: "HbCustomQuery",
-  props: {
-    qryFormProps: {
-      type: Array,
-      default: () => [],
-    },
-    qryFormData: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      radio: "1",
-      type: "",
-    };
-  },
-  methods: {
-    open(type, data) {
-      this.type = type;
-      if (type == "edit") {
-        Object.assign(this.qryFormData, data);
-      }
-      this.$refs.customQuery.open();
-    },
-    sumbit() {
-      this.$emit("customQuerySave", this.type, this.qryFormData);
-      this.$refs.customQuery.close();
-    },
-  },
-};
-</script>

package/packages/dialog/index.js

@@ -1,7 +0,0 @@
-import HbDialog from "./src/main.vue";
-
-HbDialog.install = function (Vue) {
-  Vue.component(HbDialog.name, HbDialog);
-};
-
-export default HbDialog;

package/packages/dialog/src/main.vue

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

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

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

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

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