hbte-saas-ui 0.0.2 → 1.0.2

package/examples/views/HBEditarea.vue

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

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

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