hbte-saas-ui 0.0.1

package/examples/views/HBEditarea.vue

@@ -0,0 +1,350 @@
+<template>
+  <div>
+    <ul class="editarea-ul">
+      <li class="editarea-li">
+        <h3>文本输入(无提交)</h3>
+        <p>
+          <hb-editarea type="input" :value.sync="baseData.code"></hb-editarea>
+        </p>
+      </li>
+      <li class="editarea-li">
+        <h3>文本输入(无提交,有异步校验)</h3>
+        <hb-editarea
+          type="input"
+          :value.sync="baseData.code"
+          :validate="validate.asyncCode"
+        ></hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>文本输入(无提交,有同步校验)</h3>
+        <hb-editarea
+          type="input"
+          :value.sync="baseData.code"
+          :validate="validate.code"
+        ></hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>文本输入(有提交)</h3>
+        <hb-editarea
+          type="input"
+          :value.sync="baseData.code"
+          :change="changeEdit('code')"
+        ></hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>单选下拉(无提交)</h3>
+        <hb-editarea
+          type="select"
+          :insert="(value) => value"
+          :value.sync="baseData.name"
+          :optList="optList.nameText"
+        >
+        </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>单选下拉(有提交)</h3>
+        <hb-editarea
+          type="select"
+          :value.sync="baseData.name"
+          :insert="insertEdit('name')"
+          :change="changeEdit('name')"
+          :optList="optList.name"
+        >
+        </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>多选下拉(有提交)</h3>
+        <hb-editarea
+          type="select"
+          :multiple="true"
+          :value.sync="baseData.word"
+          :insert="insertEdit('word')"
+          :change="changeEdit('word')"
+          :optList="optList.word"
+        >
+        </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>开关(无提交)</h3>
+        <hb-editarea
+          type="switch"
+          :value.sync="baseData.open"
+          :optList="optList.open"
+        >
+        </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>单选(无提交)</h3>
+        <hb-editarea
+          type="radio"
+          :value.sync="baseData.size"
+          :optList="optList.size"
+          :insert="insertEdit('size')"
+          :change="changeEdit('size')"
+        >
+        </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>多选(无提交)</h3>
+        <hb-editarea
+          type="checkbox"
+          :value.sync="baseData.color"
+          :optList="optList.color"
+          :insert="insertEdit('color')"
+          :change="changeEdit('color')"
+        >
+        </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>时间(无提交)</h3>
+        <hb-editarea type="date" :value.sync="baseData.date"> </hb-editarea>
+      </li>
+      <li class="editarea-li">
+        <h3>时间范围(无提交)</h3>
+        <hb-editarea
+          type="daterange"
+          :value.sync="baseData.dateRange"
+          :insert="insertEdit('dateRange')"
+          :change="changeEdit('dateRange')"
+        >
+        </hb-editarea>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 基本数据
+      baseData: {
+        code: "123456",
+        name: "小红",
+        word: "A,B,C",
+        open: true,
+        size: "小",
+        color: "红,绿",
+        date: "2020-10-10",
+        dateRange: "2020-10-10,2021-12-01",
+      },
+      // insert配置
+      // 注意，以下示例代码都是label无重复的情况下的演示，如果存在重复的label，需要另外去find/filter对应数据
+      insertConfig: {
+        // 从list找到当前name的value填充而非label
+        name: (value) => {
+          const currentName = this.optList.name.find(
+            (item) => item.label === value
+          ); //
+          return currentName ? currentName.value : "";
+        },
+        // 填充多个value而非label
+        word: (value) => {
+          const currentWords = this.optList.word.filter(
+            (item) => value.split(",").indexOf(item.label) !== -1
+          );
+          return currentWords.length
+            ? currentWords.map((item) => item.value)
+            : [];
+        },
+        // 从list找到当前size的value传入
+        size: (value) => {
+          const currentSize = this.optList.size.find(
+            (item) => item.label === value
+          );
+          return currentSize ? currentSize.value : "";
+        },
+        // 从list找到当前color的value传入
+        color: (value) => {
+          const currentColor = this.optList.color.filter(
+            (item) => value.split(",").indexOf(item.label) !== -1
+          );
+          return currentColor ? currentColor.map((item) => item.value) : [];
+        },
+        //
+        dateRange: (value) => {
+          return value ? value.split(",") : [];
+        },
+      },
+      // change配置
+      changeConfig: {
+        // 模拟提交code修改
+        code: (next, value) => {
+          console.log("code", value);
+          setTimeout(() => {
+            this.$set(this.baseData, "code", value);
+            next();
+          }, 800);
+        },
+        // 模拟提交name的id
+        name: (next, value) => {
+          const currentName = this.optList.name.find(
+            (item) => item.value === value
+          ); // 从list找到当前name
+          setTimeout(() => {
+            if (currentName) {
+              this.$set(this.baseData, "name", currentName.label);
+            }
+            next();
+          }, 800);
+        },
+        // 模拟提交word的多个id
+        word: (next, value) => {
+          console.log("value", value);
+          const currentWords = this.optList.word.filter(
+            (item) => value.indexOf(item.value) !== -1
+          );
+          setTimeout(() => {
+            if (value.length) {
+              this.$set(
+                this.baseData,
+                "word",
+                currentWords.map((item) => item.label).join(",")
+              );
+            }
+            next();
+          }, 800);
+        },
+        // 切换大小
+        size: (next, value) => {
+          const currentSize = this.optList.size.find(
+            (item) => item.value === value
+          ); // 从list找到当前size
+          this.$set(this.baseData, "size", currentSize.label);
+          next();
+        },
+        // 切换颜色
+        color: (next, value) => {
+          const currentColor = this.optList.color.filter(
+            (item) => value.indexOf(item.value) !== -1
+          );
+          this.$set(
+            this.baseData,
+            "color",
+            currentColor.map((item) => item.label).join(",")
+          );
+          next();
+        },
+        dateRange: (next, value) => {
+          this.$set(this.baseData, "dateRange", value ? value.join(",") : "");
+          next();
+        },
+      },
+      // 校验
+      validate: {
+        asyncCode: (next, value) => {
+          setTimeout(() => {
+            next(value.length < 5 ? null : new Error("最多不能超过4个字"));
+          }, 500);
+        },
+        code: (next, value) => {
+          next(value.length < 5 ? null : new Error("最多不能超过4个字"));
+        },
+      },
+      // 数据依赖
+      optList: {
+        nameText: [
+          {
+            label: "小红",
+            value: "小红",
+          },
+          {
+            label: "小白",
+            value: "小白",
+          },
+          {
+            label: "小黑",
+            value: "小黑",
+          },
+        ],
+        name: [
+          {
+            label: "小红",
+            value: "1",
+          },
+          {
+            label: "小白",
+            value: "2",
+          },
+          {
+            label: "小黑",
+            value: "3",
+          },
+        ],
+        word: [
+          {
+            label: "A",
+            value: "a",
+          },
+          {
+            label: "B",
+            value: "b",
+          },
+          {
+            label: "C",
+            value: "c",
+          },
+        ],
+        open: ["开", "关"],
+        size: [
+          { value: "small", label: "小" },
+          { value: "middle", label: "中" },
+          { value: "big", label: "大" },
+        ],
+        color: [
+          {
+            label: "红",
+            value: "red",
+          },
+          {
+            label: "蓝",
+            value: "blue",
+          },
+          {
+            label: "绿",
+            value: "green",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    /**
+     * @function insertEdit 手动填充编辑区域
+     * @param {String} key 关键字
+     */
+    insertEdit(key) {
+      return this.insertConfig[key];
+    },
+    /**
+     * @function insertEdit 手动处理编辑结果
+     * @param {String} key 关键字
+     */
+    changeEdit(key) {
+      return this.changeConfig[key];
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss">
+.editarea-ul {
+  .editarea-li {
+    float: left;
+    box-sizing: border-box;
+    margin-right: 10%;
+    padding: 12px 24px 0 24px;
+    width: 15%;
+    h3 {
+      height: 24px;
+      line-height: 24px;
+    }
+    p {
+      height: 28px;
+      line-height: 28px;
+      // background-color: #e6e6e6;
+    }
+  }
+}
+</style>

package/examples/views/HBFilterDrop.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <hb-filterdrop :columns="columns" @changeColumn="handleChangeColumn">
+      <i slot="dropdown" class="fd-icon el-icon-s-operation"></i>
+    </hb-filterdrop>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          prop: "name",
+          label: "名称",
+          currentSelect: true,
+        },
+        {
+          prop: "code",
+          label: "编码",
+          currentSelect: true,
+        },
+        {
+          prop: "company",
+          label: "公司",
+          currentSelect: true,
+        },
+        {
+          prop: "addr",
+          label: "地址",
+          currentSelect: true,
+        },
+        {
+          prop: "desc",
+          label: "简介",
+          currentSelect: true,
+        },
+        {
+          prop: "remark",
+          label: "说明",
+          currentSelect: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    /**
+     * @function handleChangeColumn 列改变
+     */
+    handleChangeColumn(newColumns) {
+      this.$message.success("列改变");
+      this.columns = newColumns;
+      console.log(newColumns);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss">
+.fd-icon {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  line-height: 24px !important;
+  text-align: center;
+  background: #fff;
+}
+</style>

package/examples/views/HBFloatFooter.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="wrapper">
+    <hb-float-footer
+      @confirm="confirm"
+      @exist="exist"
+      :label="label"
+      :zIndex="zIndex"
+    ></hb-float-footer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      zIndex: 200, //组件内默认100
+      label: {
+        confirm: "保存",
+        exist: "重置",
+      },
+    };
+  },
+  methods: {
+    confirm() {
+      console.log("点击了确定按钮");
+    },
+    exist() {
+      console.log("点击了取消按钮");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  background: #999;
+  width: 800px;
+  height: 300px;
+  position: relative;
+  margin: auto;
+  top: 100px;
+}
+</style>