hbte-saas-ui 0.0.2 → 1.0.2

package/examples/router/index.js

@@ -1,111 +0,0 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import HBNavMenu from "../views/HBNavMenu.vue";
-import TopBar from "../views/HBTopBar.vue";
-import HBFullTable from "../views/HBFullTable.vue";
-import HBAdvQuery from "../views/HBAdvQuery.vue";
-import HBPagination from "../views/HBPagination.vue";
-import HBFilterDrop from "../views/HBFilterDrop.vue";
-import HBDialog from "../views/HBDialog.vue";
-import ElementCpTest from "../views/ElementCpTest.vue";
-import Fragement from "../views/Fragment.vue";
-import HBEditarea from "../views/HBEditarea.vue";
-import HBToolgroup from "../views/HBToolgroup.vue";
-import HBOrganizeDialog from "../views/HBOrganizeDialog.vue";
-import HBAuthority from "../views/HBAuthority.vue";
-import HBFloatFooter from "../views/HBFloatFooter.vue";
-import HBSelectVague from "../views/HBSelectVague.vue";
-import HBImageViewer from "../views/HBImageViewer.vue";
-
-Vue.use(VueRouter);
-
-const routes = [
-  {
-    path: "/HBFragment",
-    name: "HBFragment",
-    component: Fragement,
-  },
-  {
-    path: "/ElementCpTest",
-    name: "ElementCpTest",
-    component: ElementCpTest,
-  },
-  {
-    path: "/HBNavMenu",
-    name: "HBNavMenu",
-    component: HBNavMenu,
-  },
-  {
-    path: "/HBTopBar",
-    name: "HBTopBar",
-    component: TopBar,
-  },
-  {
-    path: "/HBFullTable",
-    name: "HBFullTable",
-    component: HBFullTable,
-  },
-  {
-    path: "/HBAdvQuery",
-    name: "HBAdvQuery",
-    component: HBAdvQuery,
-  },
-  {
-    path: "/HBPagination",
-    name: "HBPagination",
-    component: HBPagination,
-  },
-  {
-    path: "/HBFilterDrop",
-    name: "HBFilterDrop",
-    component: HBFilterDrop,
-  },
-  {
-    path: "/HBDialog",
-    name: "HBDialog",
-    component: HBDialog,
-  },
-  {
-    path: "/HBEditarea",
-    name: "HBEditarea",
-    component: HBEditarea,
-  },
-  {
-    path: "/HBToolgroup",
-    name: "HBToolgroup",
-    component: HBToolgroup,
-  },
-  {
-    path: "/HBOrganizeDialog",
-    name: "HBOrganizeDialog",
-    component: HBOrganizeDialog,
-  },
-  {
-    path: "/HBAuthority",
-    name: "HBAuthority",
-    component: HBAuthority,
-  },
-  {
-    path: "/HBFloatFooter",
-    name: "HBFloatFooter",
-    component: HBFloatFooter,
-  },
-  {
-    path: "/HBSelectVague",
-    name: "HBSelectVague",
-    component: HBSelectVague,
-  },
-  {
-    path: "/HBImageViewer",
-    name: "HBImageViewer",
-    component: HBImageViewer,
-  },
-];
-
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes,
-});
-
-export default router;

package/examples/views/ElementCpTest.vue

@@ -1,299 +0,0 @@
-<template>
-  <div
-    class="elementCptest"
-    style="
-      height: 100vh;
-      padding: 50px;
-      overflow-y: scroll;
-      box-sizing: border-box;
-    "
-  >
-    <p class="pl10 mb10">基础按钮--mini</p>
-    <br />
-
-    <div class="flex mb10 pl10">
-      <el-button size="mini">默认按钮</el-button>
-      <el-button type="primary" size="mini">主要按钮</el-button>
-      <el-button type="success" size="mini">成功按钮</el-button>
-      <el-button type="warning" size="mini">警告按钮</el-button>
-      <el-button type="danger" size="mini">危险按钮</el-button>
-      <el-button size="mini" disabled>禁用按钮</el-button>
-    </div>
-    <br />
-    <p class="pl10 mb10">朴素（plain）按钮--mini</p>
-    <br />
-
-    <div class="flex mb10 pl10">
-      <el-button size="mini" plain>默认按钮</el-button>
-      <el-button type="primary" size="mini" plain>主要按钮</el-button>
-      <el-button type="success" size="mini" plain>成功按钮</el-button>
-      <el-button type="warning" size="mini" plain>警告按钮</el-button>
-      <el-button type="danger" size="mini" plain>危险按钮</el-button>
-      <el-button size="mini" plain disabled>禁用按钮</el-button>
-    </div>
-    <br />
-
-    <p class="pl10 mb10">基础按钮--正常大小</p>
-    <br />
-
-    <div class="flex mb10 pl10">
-      <el-button>默认按钮</el-button>
-      <el-button type="primary">主要按钮</el-button>
-      <el-button type="success">成功按钮</el-button>
-      <el-button type="warning">警告按钮</el-button>
-      <el-button type="danger">危险按钮</el-button>
-      <el-button type="danger" disabled>禁用按钮</el-button>
-    </div>
-    <br /><br />
-    <p class="pl10 mb10">带图标的按钮</p>
-    <br />
-    <el-button icon="el-icon-search" type="primary">按钮</el-button>
-    <el-button icon="el-icon-search" size="mini" type="primary">按钮</el-button>
-
-    <br />
-    <br />
-    <p class="pl10 mb10">switch</p>
-    <br />
-
-    <el-switch
-      v-model="switchValue"
-      active-text="按月付费"
-      inactive-text="按年付费"
-    >
-    </el-switch>
-    <br />
-    <br />
-
-    <!-- 输入框大小 -->
-    <div class="input-wrapper">
-      <el-input v-model="value" clearable placeholder="正常 30px"></el-input>
-      <el-input
-        clearable
-        v-model="value"
-        placeholder="small 小 28px"
-        size="small"
-      ></el-input>
-      <el-input
-        clearable
-        v-model="value"
-        placeholder="mini 迷你 24px"
-        size="mini"
-      ></el-input>
-    </div>
-    <br />
-    <br />
-
-    <p class="pl10 mb10">messageBox</p>
-    <el-button type="text" @click="open">点击打开 Message Box</el-button>
-    <br />
-    <br />
-    <br />
-
-    <p class="pl10 mb10">HBDialog</p>
-    <el-button type="text" @click="$refs.testDialog.open()">
-      点击打开 Dialog
-    </el-button>
-    <hb-dialog
-      ref="testDialog"
-      width="740px"
-      labelPosition="top"
-      :formData="formData"
-      :rules="rules"
-      :title="title"
-    >
-      <div slot="form">
-        <el-row :gutter="40">
-          <el-col :span="12">
-            <el-form-item label="名称" prop="userName">
-              <el-input
-                placeholder="请输入名称"
-                v-model="formData.userName"
-                ref="noBlur"
-                clearable
-              ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="日期" prop="date">
-              <el-date-picker
-                type="datetime"
-                placeholder="选择日期"
-                align="right"
-                v-model="formData.date"
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="时间" prop="time">
-              <el-time-select
-                v-model="formData.time"
-                :picker-options="{
-                  start: '08:30',
-                  step: '00:15',
-                  end: '18:30',
-                }"
-                placeholder="选择时间"
-              >
-              </el-time-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="类型">
-              <el-select v-model="formData.type" clearable placeholder="请选择">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="地区" prop="area">
-              <hb-area-select v-model="formData.area"></hb-area-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="备注" prop="area">
-              <el-input type="textarea" v-model="formData.remark"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-    </hb-dialog>
-    <p class="pl10 mb10">el-table 带序号</p>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column
-        type="index"
-        label="序号"
-        width="44"
-        class-name="el-table-index"
-      >
-      </el-table-column>
-      <el-table-column prop="data1" label="数据1" width="180">
-      </el-table-column>
-      <el-table-column prop="data2" label="数据2" width="180">
-      </el-table-column>
-      <el-table-column prop="data3" label="数据3" width="180">
-      </el-table-column>
-      <el-table-column prop="data4" label="数据4" width="180">
-      </el-table-column>
-      <el-table-column prop="data5" label="数据5" align="center">
-      </el-table-column>
-    </el-table>
-    <p class="pl10 mb10">el-table 无数据</p>
-    <el-table :data="tableEmptyData" style="width: 100%">
-      <el-table-column prop="data1" label="数据1" width="180">
-      </el-table-column>
-      <el-table-column prop="data2" label="数据2" width="180">
-      </el-table-column>
-      <el-table-column prop="data3" label="数据3" width="180">
-      </el-table-column>
-      <el-table-column prop="data4" label="数据4" width="180">
-      </el-table-column>
-      <el-table-column prop="data5" label="数据5" align="center">
-      </el-table-column>
-      <template slot="empty">
-        <div class="el-table-nodata"></div>
-        <div class="el-table-nodata-text">暂无数据</div>
-      </template>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      switchValue: true,
-      value: "",
-      title: "修改项目目标",
-      formData: {
-        userName: "",
-        date: "",
-        time: "",
-        type: "",
-        area: "",
-        remark: "",
-      },
-      rules: {
-        userName: [{ required: true, message: "请输入名称", trigger: "blur" }],
-        time: [{ required: true, message: "请选择时间", trigger: "change" }],
-      },
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
-      tableData: [
-        {
-          data1: "123456",
-          data2: "123456",
-          data3: "123456",
-          data4: "123456",
-          data5: "123456",
-        },
-        {
-          data1: "123456",
-          data2: "123456",
-          data3: "123456",
-          data4: "123456",
-          data5: "123456",
-        },
-      ],
-      tableEmptyData: [],
-    };
-  },
-  methods: {
-    open() {
-      this.$confirm("刘青指派了你一条安灯消息，请及时查看。", "安灯消息", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-      })
-        .then(() => {
-          this.$message({
-            type: "success",
-            message: "删除成功!",
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.input-wrapper {
-  width: 800px;
-  display: flex;
-  justify-content: space-between;
-  .el-input {
-    width: 220px;
-  }
-}
-</style>

package/examples/views/Fragment.vue

@@ -1,196 +0,0 @@
-<template>
-  <div>
-    <hb-fragment :detailData="arr"></hb-fragment>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HbFragMent",
-  componentName: "HbFragMent",
-  props: {
-    //传入的接口数据，需要处理为统一字段格式
-    detailData: {
-      type: Array,
-      default: () => [],
-    },
-    //布局下padding
-    paddingBottom: {
-      type: String,
-      default: "20px",
-    },
-    hyperLink: {
-      type: Boolean,
-      default: false,
-    },
-    entireLine: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      optList: [
-        {
-          label: "小红",
-          value: "1",
-        },
-        {
-          label: "小白",
-          value: "2",
-        },
-        {
-          label: "小黑",
-          value: "3",
-        },
-      ],
-      arr: [
-        {
-          name: "输入框",
-          type: "input",
-          key: "productName",
-          value: "产品名称产品名称产",
-        },
-        {
-          name: "网站",
-          type: "input",
-          key: "web",
-          value: "www.baidu.com",
-        },
-        { name: "禁止编辑", key: "cantEdit", value: "cant edit", edit: true },
-        {
-          name: "下拉框普通",
-          type: "select",
-          key: "personName",
-          value: "小白",
-          optList: [
-            {
-              label: "小红",
-              value: "1",
-            },
-            {
-              label: "小白",
-              value: "2",
-            },
-            {
-              label: "小黑",
-              value: "3",
-            },
-          ],
-          insert: (data) => {
-            return this.optList.find((v) => v.label == data)?.value;
-          },
-          change: (next, value) => {
-            console.log(value);
-            setTimeout(() => {
-              this.$set(
-                this.arr[3],
-                "value",
-                this.optList.find((v) => v.value == value)?.label
-              );
-              next();
-            }, 300);
-          },
-        },
-        {
-          name: "多选框",
-          type: "select",
-          key: "groupName",
-          value: "小红,小黑",
-          multiple: true,
-          optList: [
-            {
-              label: "小红",
-              value: "1",
-            },
-            {
-              label: "小白",
-              value: "2",
-            },
-            {
-              label: "小黑",
-              value: "3",
-            },
-          ],
-          insert: (data) => {
-            let valueArr = [];
-            data.split(",").forEach((item) => {
-              this.optList.forEach((v) => {
-                console.log(item, v.label);
-                if (item == v.label) {
-                  valueArr.push(v.value);
-                }
-              });
-            });
-            return valueArr;
-          },
-          change: (next, value) => {
-            const currentWords = this.optList.filter(
-              (item) => value.indexOf(item.value) !== -1
-            );
-            setTimeout(() => {
-              if (value.length) {
-                this.$set(
-                  this.arr[4],
-                  "value",
-                  currentWords.map((item) => item.label).join(",")
-                );
-              } else {
-                this.$set(this.arr[3], "value", "");
-              }
-              next();
-            }, 800);
-          },
-        },
-        {
-          name: "开关",
-          type: "switch",
-          key: "switch",
-          value: true,
-          optList: ["开", "关"],
-        },
-        {
-          name: "时间",
-          type: "date",
-          key: "sendTime",
-          value: "2020-10-10",
-          change: (next, value) => {
-            setTimeout(() => {
-              this.$set(this.arr[6], "value", value);
-              next();
-            }, 800);
-          },
-        },
-        {
-          name: "时间范围",
-          type: "daterange",
-          key: "sendTime",
-          value: "2020-10-10,2021-12-01",
-          insert: (value) => {
-            return value ? value.split(",") : [];
-          },
-          change: (next, value) => {
-            setTimeout(() => {
-              this.$set(this.arr[7], "value", value ? value.join(",") : "");
-              next();
-            }, 300);
-          },
-        },
-        {
-          name: "备注框",
-          type: "input",
-          key: "remark",
-          entireLine: true,
-          value:
-            "备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注",
-        },
-      ],
-    };
-  },
-  methods: {},
-  mounted() {},
-};
-</script>
-
-<style lang="scss">
-</style>