npm - byt-ui - Versions diffs - 0.0.5 - Mend

byt-ui 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +79 -0
package/jsconfig.json +19 -0
package/lib/byt-ui.common.js +125772 -0
package/lib/byt-ui.css +1 -0
package/lib/byt-ui.umd.js +125783 -0
package/lib/byt-ui.umd.min.js +288 -0
package/lib/demo.html +1 -0
package/lib/fonts/element-icons.f1a45d74.ttf +0 -0
package/lib/fonts/element-icons.ff18efd1.woff +0 -0
package/package.json +69 -0
package/packages/common/index.js +10 -0
package/packages/components/basic-view/BaseView.md +49 -0
package/packages/components/basic-view/demo.vue +83 -0
package/packages/components/basic-view/index.vue +331 -0
package/packages/components/form-view/index.vue +195 -0
package/packages/components.js +16 -0
package/packages/index.js +38 -0

package/lib/demo.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <!doctype html><meta charset="utf-8"><title>byt-ui demo</title><script src="./byt-ui.umd.js"></script><link rel="stylesheet" href="./byt-ui.css"><script>console.log(byt-ui)</script>

package/lib/fonts/element-icons.f1a45d74.ttf ADDED Viewed

Binary file

package/lib/fonts/element-icons.ff18efd1.woff ADDED Viewed

Binary file

package/package.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "name": "byt-ui",
+  "version": "0.0.5",
+  "private": false,
+  "description": "byt组件库",
+  "author": {
+    "name": "wgh"
+  },
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name byt-ui --dest lib packages/index.js",
+    "styleguide": "vue-cli-service styleguidist",
+    "styleguide:build": "vue-cli-service styleguidist:build"
+  },
+  "main": "lib/byt-ui.umd.min.js",
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.10",
+    "moment": "^2.29.4",
+    "vue": "^2.6.14",
+    "vxe-table": "^3.6.6",
+    "xe-utils": "^3.5.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "node-sass": "4.14.1",
+    "sass-loader": "10.0.4",
+    "vue-cli-plugin-styleguidist": "~4.45.1",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "keywords": [
+    "byt",
+    "byt-ui",
+    "@byt",
+    "@byt/base"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/packages/common/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+/*
+ * @Description:
+ * @Author: 王国火
+ * @Date: 2022-09-19 10:17:14
+ * @LastEditTime: 2022-09-19 10:17:22
+ * @LastEditors: 王国火
+ */
+export default{
+}

package/packages/components/basic-view/BaseView.md ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+ * @Description:
+ * @Author: 王国火
+ * @Date: 2022-09-14 16:24:51
+ * @LastEditTime: 2022-09-15 10:33:25
+ * @LastEditors: 王国火
+-->
+### columns项配置
+|  字段   |字段类型| 说明  |默认值|可选参数|
+|  ----  |----| ----  |----|----|
+| minWidth  |number| 最小宽度 |--|--|
+| fixed  |string| 列固定定位 |--|left/right|
+| sortable  |boolean| 排序 |false|true/false|
+| showOverflow  |boolean/string| 溢出显示类型 |false|ellipsis/title/tooltip|
+| type  |string| 类型 |--|seq/checkbox|
+| key  |string| 字段名 |--|--|
+| width  |number| 宽度 |--|--|
+| label  |string| 显示表头 |--|--|
+| align  |string| 对齐方式 |--|left/center/right|
+| slot  |string| 使用自定义插槽 |--|--|
+### pagination配置
+|  字段   |字段类型| 说明  |默认值|可选参数|
+|  ---  |----| ----  |----|----|
+| page  |number| 分页页码 |1|--|
+| pageSize  |number| 分页展示条数 |20|--|
+| total  |number| 总条数 |0|--|
+| pageSizes  |array| 分页页码条数选择 |[20, 50, 100, 200, 500]|--|
+### searchList项配置
+|  字段   |字段类型| 说明  |默认值|可选参数|
+|  ---  |----| ----  |----|----|
+| type  |string| 组件类型 |input|input/cascader/select/datepicker/daterange|
+| label  |string| 搜索条件展示文字 |--|--|
+| key  |string| 搜索字段 |--|--|
+| options  |array| select、cascader数据源 |[]|--|
+| props  |object|[cascader配置项，详见官方文档](https://element.eleme.cn/#/zh-CN/component/cascader) |--|--|
+| fields  |string|datepicker对应颗粒度 |date|date/year/month/week|
+<br><br>
+### 组件示例
+```[import](./demo.vue)
+引入示例代码
+```

package/packages/components/basic-view/demo.vue ADDED Viewed

@@ -0,0 +1,83 @@
+<template>
+  <div class="demo" v-loading="loading">
+    <basic-view
+      :search-list="searchList"
+      :fetch="getTableData"
+      :table-data="tableData"
+      :columns="columns"
+      :pagination="pagination"
+      ref="baseView"
+    >
+      <template #btns>
+        <el-button type="primary" icon="el-icon-plus">新增</el-button>
+      </template>
+      <template #actions>
+        <el-button type="text" icon="el-icon-edit">编辑</el-button>
+        <el-button type="text" class="el-button-delete" icon="el-icon-delete">删除</el-button>
+      </template>
+    </basic-view>
+  </div>
+</template>
+<script>
+export default {
+  name: 'demo',
+  components: {},
+  data() {
+    return {
+      searchList: [
+        {
+          label: '用户名',
+          key: 'username',
+          type: 'input'
+        }
+      ],
+      tableData: [],
+      columns: [
+        { label: '头像', slot: 'avatar', fixed: 'left' },
+        { label: '用户名', key: 'username', fixed: 'left' },
+        { label: '姓名', key: 'name' },
+        { label: '手机号', key: 'phone' },
+        { label: '昵称', key: 'nickname' },
+        { label: '邮箱', key: 'email' },
+        { label: '状态', slot: 'lockFlag' },
+        { label: '创建时间', key: 'createTime' },
+        { label: '操作', key: 'actions', slot: 'actions', width: 160, fixed: 'right' }
+      ],
+      loading: false,
+      pagination: {
+        total: 0
+      }
+    }
+  },
+  created() {},
+  methods: {
+    // 主动调用组件刷新
+    onRefresh() {
+      this.$refs.baseView.refresh();
+    },
+    // 主动调用组件搜索
+    onSearch() {
+      this.$refs.baseView.onSearch();
+    },
+    getTableData({ params, pagination }) {
+      const {
+        page,
+        pageSize
+      } = pagination;
+      console.log(page, pageSize)
+      // 实际请求业务逻辑
+    },
+    refreshChange() {
+      this.$refs.baseView.refresh();
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.demo{
+  height: 600px;
+}
+</style>

package/packages/components/basic-view/index.vue ADDED Viewed

@@ -0,0 +1,331 @@
+<!--
+ * @Description:
+ * @Author: 王国火
+ * @Date: 2022-07-12 17:47:20
+ * @LastEditTime: 2022-09-19 10:23:41
+ * @LastEditors: 王国火
+-->
+<template>
+  <div class="basic-view">
+    <div class="search-view" v-if="searchList.length">
+      <!-- 搜索表单列表 -->
+      <FormView
+        ref="search"
+        inline
+        :search-list="searchList"
+        @search="onSearch"
+        @reset="onReset"
+        v-model="searchForm"
+      ></FormView>
+    </div>
+    <div class="action-view">
+      <!-- @slot 预留按钮插槽 -->
+      <slot name="btns"></slot>
+    </div>
+    <!-- 表格主体部分，使用第三方vxe-table -->
+    <div class="table-view" style="width: 100%;overflow: hidden;">
+      <vxe-table
+        border
+        stripe
+        max-height="100%"
+        :data="tableData"
+        @checkbox-all="onSelectAllEvent"
+        @checkbox-change="onSelectChangeEvent"
+        :column-config="{resizable: true}"
+        :row-config="{isCurrent: true, isHover: true}"
+        :show-overflow="showOverflow"
+      >
+        <template v-for="(column,index) in columns">
+          <vxe-column
+            :fixed="column.fixed"
+            v-if="column.type=='seq'"
+            type="seq"
+            width="60"
+            :align="column.align||'center'"
+            :key="index"
+          ></vxe-column>
+          <vxe-column
+            v-else-if="column.type=='checkbox'"
+            type="checkbox"
+            width="60"
+            :align="column.align||'center'"
+            :key="index"
+          ></vxe-column>
+          <vxe-column
+            :fixed="column.fixed"
+            v-else-if="column.slot"
+            :width="column.width||'auto'"
+            :title="column.label"
+            :align="column.align||'center'"
+            :key="index"
+          >
+            <template #default="scope">
+              <!--
+                @slot 表格列 column 预留按钮插槽
+                @binding {string} name 插槽名
+                @binding {object} scope 表格行数据
+                @binding {object} column 表格列配置
+                -->
+              <slot :name="column.slot" :scope="scope" :column="column">
+                <span>{{ scope.row[column.key] }}</span>
+              </slot>
+            </template>
+          </vxe-column>
+          <!-- 列主要配置 -->
+          <vxe-column
+            :min-width="column.minWidth"
+            :fixed="column.fixed"
+            :sortable="column.sortable"
+            :show-overflow="column.showOverflow"
+            :type="column.type"
+            v-else
+            :field="column.key"
+            :width="column.width||'auto'"
+            :title="column.label"
+            :align="column.align||'center'"
+            :key="index"
+          ></vxe-column>
+        </template>
+        <template #empty>
+          <el-empty description="暂无数据！">
+            <el-button type="primary" @click="onSearch">重试</el-button>
+          </el-empty>
+        </template>
+      </vxe-table>
+    </div>
+    <!-- 分页配置 -->
+    <div class="pagination" v-if="pagination">
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onPageChange"
+        :current-page="pageOpt.page"
+        :page-sizes="pageOpt.pageSizes"
+        :page-size="pageOpt.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageOpt.total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import FormView from '../form-view/index.vue'
+/**
+ * 通用表格组件
+ * @displayName BaseView
+ * @example ./BaseView.md
+ * @see {@link https://vxetable.cn/v3/#/table/base/basic}
+ * @see {@link https://element.eleme.cn/#/zh-CN/component/installation}
+ */
+export default {
+  name: 'BaseView',
+  props: {
+    /** 搜索行内表单配置*/
+    searchList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /** 调用表格数据请求的方法*/
+    fetch: {
+      type: Function,
+      default: () => {}
+    },
+    /** 是否自动调用fetch请求，部分场景下不需要自动调用*/
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    /** 表格数据*/
+    tableData: {
+      type: Array,
+      required: true,
+      default() {
+        return []
+      }
+    },
+    /** 表格列配置*/
+    columns: {
+      type: Array,
+      required: true,
+      default() {
+        return []
+      }
+    },
+    /** 分页配置，默认没有分页*/
+    pagination: {
+      type: [Boolean, Object],
+      default: false
+    },
+    /**
+     * 整体配置是否单元格溢出显示省略号
+     * @values ellipsis, title, tooltip
+     */
+    showOverflow: {
+      type: [String, Boolean],
+      default: false
+    }
+  },
+  components: {
+    FormView
+  },
+  data() {
+    return {
+      searchForm: {},
+      pageOpt: {
+        page: 1,
+        pageSize: 20,
+        total: 0,
+        pageSizes: [20, 50, 100, 200, 500]
+      }
+    }
+  },
+  mounted() {
+    // 有些特殊情况需要手动请求列表数据
+    if (this.autoLoad) this.fetchData();
+  },
+  methods: {
+    onSelectAllEvent(list) {
+      /** 多选框全选触发
+			 * @event checkbox-all
+			 * @type {Change}
+       * @property {array} list 选中的列表项
+			 */
+      this.$emit('checkbox-all', list)
+    },
+    onSelectChangeEvent(list) {
+      /** 多选框选择项变化触发
+			 * @event checkbox-change
+			 * @type {Change}
+       * @property {array} list 选中的列表项
+			 */
+      this.$emit('checkbox-change', list)
+    },
+    /**
+     * 初始化请求列表数据
+     * @param {params,pagination}
+     * @public
+     */
+    fetchData() {
+      const { page, pageSize } = this.pageOpt;
+      const params = {
+        params: this.searchForm,
+        pagination: {
+          page,
+          pageSize
+        }
+      }
+      this.fetch(params)
+    },
+    /**
+     * 搜索
+     * @param {params}
+     * @public
+     */
+    onSearch() {
+      this.fetchData();
+    },
+    /**
+     * 刷新列表
+     * @param {params}
+     * @public
+     */
+    refresh() {
+      this.pageOpt.page = 1;
+      this.fetchData();
+    },
+    /**
+     * 重置搜索条件
+     * @param {params}
+     * @public
+     */
+    onReset() {
+      this.pageOpt.page = 1;
+      this.searchForm = {};
+      this.fetchData();
+    },
+    onSizeChange(size) {
+      this.pageOpt.pageSize = size;
+      this.pageOpt.page = 1;
+      this.$nextTick(() => {
+        this.fetchData();
+      })
+    },
+    onPageChange(page) {
+      this.pageOpt.page = page;
+      this.$nextTick(() => {
+        this.fetchData();
+      })
+    },
+    initForm(list) {
+      list.map(v => {
+        if (v.value || v.value == 0) {
+          this.$set(this.searchForm, v.key, v.value)
+        }
+      })
+    }
+  },
+  watch: {
+    pagination: {
+      handler(val) {
+        if (val) {
+          this.pageOpt = Object.assign(this.pageOpt, val)
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    searchList: {
+      handler(val) {
+        this.initForm(val)
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.basic-view{
+    height: 100%;
+    overflow: hidden;
+    padding:10px;
+    background-color: #fff;
+    border-radius: 6px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .action-view{
+        &>*{
+            margin-bottom: 10px;
+        }
+    }
+    .table-view{
+        flex:1;
+        overflow: hidden;
+        ::v-deep{
+            .vxe-custom--option .vxe-checkbox--icon:before, .vxe-export--panel-column-option .vxe-checkbox--icon:before, .vxe-table--filter-option .vxe-checkbox--icon:before, .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before{
+                border-width: 1px;
+            }
+            .vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column{
+              padding:6px 0;
+            }
+        }
+    }
+    .pagination{
+        text-align: right;
+        margin-top: 10px;
+    }
+}
+</style>