@weitutech/by-components 1.0.27

package/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# 1.0.27 (2024-12-04)
+
+### 🍏 Perf
+
+- 多级表头分组之间增加间隔
+
+# 1.0.26 (2024-12-04)
+
+### 🐞 Bug fixes
+
+- 修复自定义列中,没有列设置 fixed 时的报错
+
+# 1.0.25 (2024-12-04)
+
+### 🍏 Perf
+
+- 自定义列支持多级表头展示
+
+# 1.0.24 (2024-11-30)
+
+### 🐞 Bug fixes
+
+- 修复表单中通过插槽的组件数据被清空问题导致卡顿问题
+
+### 🍏 Perf
+
+- 优化选择器组件移除 input 事件、防止选择器选择的时候执行两次
+
+# 1.0.23 (2024-11-25)
+
+### 🐞 Bug fixes
+
+- 修复日期选择器组件在 form 表格组件中使用时对多个不同的时间配置设置初始时间没有生效问题
+
+### 🍏 Perf
+
+- 优化日期选择器手动设置自定义值的时候自动匹配高亮出现有的时间选项
+- 优化表格组件中对最大宽度和最小宽度的设置

package/README.md

@@ -0,0 +1,470 @@
+# @weitutech/by-components
+
+### npm 安装
+
+```
+安装时切换淘宝源比较快
+npm config set registry https://registry.npmmirror.com/
+
+npm install @weitutech/by-components
+```
+
+### 引入
+
+由于对 vxeTable 进行了再次处理，所以需要复制 plugin 文件夹到项目中
+并手动引入 vxeTable  
+plugin 目录可从组件库中复制到项目
+
+```
+import '@/plugin/vxeTable.js';
+import '@weitutech/by-components/lib/index.css'
+import BYComponents from '@weitutech/by-components'
+Vue.use(BYComponents)
+```
+
+### npm 发布
+
+```
+第一次发布
+npm login
+
+发布时需要确保npm的源是官方 npm
+npm config set registry https://registry.npmjs.org/
+
+
+出现功能修改后，需更新package的版本号
+清除缓存
+npm cache clean --force
+发布
+npm publish --access public
+```
+
+### 注意事项
+
+1. 组件开发中 css 样式单独放在 style 目录下, 整体打包成一个 css 样式引入
+2. 打包后会在 lib 目录下生成 js 和 css 文件
+3. 本地开发时可采用 npm link 方式关联依赖，package 入口配置为 src/index.js
+
+### npm link
+
+```
+组件库中运行 npm link
+项目中运行 npm link by-components
+```
+
+### 关于新组件开发
+
+1. 采用 by 为前缀命名方式
+2. 避免过度耦合，考虑不同项目的复用性，尽量避免组件内调取接口
+
+### 表单 by-page-search
+
+```
+<template>
+  <by-page-search
+      ref="pageSearchRef"
+      v-model="searchQuery"
+      :search-form-config="formConfig"
+      @queryBtnClick="handleQueryClick"
+      @change="handleChangePageSearch"
+    >
+      <template #custom>
+        我是外部自定义内容
+      </template>
+    </by-page-search>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchQuery: {
+        // 对应formConfig对象中formItems中的每个field
+      },
+      formConfig: {
+        labelWidth: "80px",
+        itemStyle: {
+          padding: "0px 0px"
+        },
+        // 需要折叠的字段、不分顺序、写在里面的字段都会被隐藏 --- 仅在isFlexible = true 才可用
+        flexible: {
+          // 这里模拟写一些
+          foldField: ["area_id", "department_id", "team_id", "user_id", "favourite_id", "category_id", "brand_id"]
+        },
+        // 是否开启折叠功能
+        isFlexible: true,
+        colLayout: {
+          xs: 24,
+          sm: 12,
+          md: 12,
+          lg: 6,
+          xl: 4
+        },
+        elSize: "mini",
+        // 对应表单单独的显隐权限 可设置isHidden来控制
+        formItems: [
+          // 输入框
+          {
+            id: 1, // 作为可选的唯一标识，如果field有重复可以设置id作为唯一标识
+            field: "input",
+            type: "input",
+            label: "输入框",
+            placeholder: "请输入",
+            labelWidth: "70px",
+            isHidden: false, // 是否隐藏 false || true
+            otherOptions: {
+              // 其他选项配置、参考Element的输入框配置
+            }
+          },
+          // 密码输入框
+          {
+            field: "password",
+            type: "password",
+            label: "密码输入框",
+            placeholder: "请输入密码",
+            labelWidth: "70px",
+            otherOptions: {
+              // 其他选项配置、参考Element的输入框配置
+            }
+          },
+          // 选择器
+          {
+            field: "select",
+            type: "select",
+            label: "选择器",
+            placeholder: "请选择",
+            labelWidth: "100px",
+            mode: "", // 可选  "group" || false 默认 不传不用配置  group为分组模式
+            options: [
+              // 必须按照label、value的键值对传入
+              { label: "全选", value: undefined },
+              { label: "选项一", value: "one" },
+              { label: "选项二", value: "two" }
+            ],
+            otherOptions: {
+              // 其他配置、参考Element的选择器配置
+            },
+            colLayout: {
+              xs: 24,
+              sm: 8,
+              md: 8,
+              lg: 4,
+              xl: 4
+            }
+          },
+          // 日期选择器
+          {
+            field: "datepicker",
+            type: "datepicker",
+            label: "日期选择器",
+            placeholder: "请选择日期",
+            labelWidth: "70px",
+            otherOptions: {
+              // 其他选项配置、参考Element的配置
+            }
+          },
+          // 级联
+          {
+            field: "cascader",
+            type: "cascader",
+            label: "级联",
+            placeholder: "请选择",
+            labelWidth: "70px",
+            options: [], // 于Element保持一致
+            otherOptions: {
+              // 其他选项配置、参考Element的配置
+            }
+          },
+          // 开关
+          {
+            field: "switch",
+            type: "switch",
+            label: "开关",
+            labelWidth: "70px",
+            otherOptions: {
+              // 其他选项配置、参考Element的配置
+            }
+          },
+          // 单选框
+          {
+            field: "radioGroup",
+            type: "radioGroup",
+            label: "单选框",
+            labelWidth: "70px",
+            otherOptions: {
+              // 其他选项配置、参考Element的配置
+            },
+            cGOptions: {
+              type: "button", // "button" || "checkbox"
+              options: [] // 按照label、value的键值对传入
+            }
+          },
+          // 多选框
+          {
+            field: "checkboxGroup",
+            type: "checkboxGroup",
+            label: "多选框",
+            labelWidth: "70px",
+            otherOptions: {
+              // 其他选项配置、参考Element的配置
+            },
+            cGOptions: {
+              type: "button", // "button" || "checkbox"
+              options: [] // 按照label、value的键值对传入
+            }
+          },
+          // 文本类型
+          {
+            field: "text",
+            type: "text",
+            label: "文本类型",
+            labelWidth: "70px",
+            defaultValue: "需要显示的文本"
+          },
+          // 数字范围输入框
+          {
+            field: "pairNumberInput",
+            type: "pairNumberInput",
+            label: "数字范围输入框",
+            labelWidth: "70px",
+            earliestPlaceholder: "前面输入框的Placeholder",
+            latestPlaceholder: "后面输入框的Placeholder"
+          },
+          {
+            field: "custom",
+            type: "custom",
+            label: "自定义",
+            labelWidth: "70px",
+          },
+      }
+    }
+  },
+  methods: {
+    // 查询
+    handleQueryClick() {},
+    /**
+     * @describe 表单回调、以下对推广人员四级和标签于推广账户组件交互是进行一些传参的改变、逻辑依据原老组件需要的参数进行复制处理
+     * @param { Object } value 为对象字段名和所赋予的值
+     */
+    handleChangePageSearch({ field, value }) {
+      if (["area_id", "department_id", "team_id", "user_id", "favourite_id"].includes(field)) {
+        if (field === "area_id") {
+          this.formConfig.formItems.forEach(item => {
+            if (item.field === "department_id" || item.field === "team_id" || item.field === "user_id") {
+              item.otherOptions.areaId = value
+            }
+          })
+        } else if (field === "department_id") {
+          this.formConfig.formItems.forEach(item => {
+            if (item.field === "team_id" || item.field === "user_id") {
+              item.otherOptions.departmentId = value
+            }
+          })
+        } else if (field === "team_id") {
+          this.formConfig.formItems.forEach(item => {
+            if (item.field === "user_id") {
+              item.otherOptions.teamId = value
+            }
+          })
+        } else if (field === "user_id") {
+          this.formConfig.formItems.forEach(item => {
+            if (item.field === "favourite_id" || item.field === "advertiser_id") {
+              item.otherOptions.userId = value
+            }
+          })
+        } else if (field === "favourite_id") {
+          if (value.length) {
+            this.formConfig.formItems.forEach(item => {
+              if (item.field === "advertiser_id") {
+                item.otherOptions.options.favouriteId = value
+                item.isHidden = false
+              }
+            })
+          } else {
+            this.formConfig.formItems.forEach(item => {
+              if (item.field === "advertiser_id") {
+                console.log(item, "item")
+                item.otherOptions.options.favouriteId = []
+                item.isHidden = true
+              }
+            })
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+```
+
+### 表格 by-table
+
+[vxe-table 文档](https://vxetable.cn/v3.8/#/table/start/install)
+
+###### 通用配置
+```
+<template>
+  <by-table
+    ref="BTableRef"
+    :grid-options="gridOptions"
+    @checkbox-change="({records}) => handleCheckboxChange(records)"
+    @checkbox-all="({records}) => handleCheckboxChange(records)"
+    @page-change="handlePageChange"
+    @sort-change="handleSortChange"
+  >
+    <template #switch="{ row }">
+      <el-switch
+        v-if="row.id"
+        size="mini"
+        :value="row.opt_status==='ENABLE'"
+      />
+    </template>
+    <template #status_text="{ row }">
+      <span class="text_pointer_primary">{{ row.status_text }}</span>
+    </template>
+    <template #operate>
+      <el-button type="text">编辑</el-button>
+      <el-button style="color:red" type="text">删除</el-button>
+    </template>
+  </by-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      /**
+       * @see https://vxetable.cn/v3.8/#/grid/api
+       * @description 其他配置想看vxe-table文档（除 pagerConfig 和 copyFields 外）
+       * @param { false | Object } pagerConfig 分页配置、如果不想设置分页的话则设置false值即可、如果为对象的话则只接受pageSize、currentPage、total字段
+       * @param { Array } copyFields 需要用户点击单元格复制的字段标识数组集合
+       */
+      gridOptions: {
+        height: 700,
+        pagerConfig: {
+          // 默认每页大小
+          pageSize: 15,
+          // 当前页码
+          currentPage: 1,
+          // 总条数
+          total: 25
+        },
+        checkboxConfig: {
+          checkMethod: ({ row }) => {
+            return !!row.id
+          },
+          visibleMethod: ({ row }) => {
+            return !!row.id
+          }
+        },
+        seqConfig: {
+          seqMethod: ({ row, rowIndex }) => {
+            return row.id ? rowIndex : "汇总"
+          }
+        },
+        copyFields: ["status_text"],
+        // 默认显示的排序
+        sortConfig: {
+          defaultSort: {
+            // 默认消耗倒序
+            field: "cost", order: "desc"
+          }
+        },
+
+        customColumnConfig: { // 自定义列  
+          showCustomColumn: true, // 是否显示自定义列
+          infoMethod: getCustomTableList,  // 回显用的接口
+          submitMethod: setCustomTableList, // 保存用的接口
+          slots: ["source_material_count"] // 需要使用插槽的字段集合
+        },
+        columns: [
+          { type: "checkbox", width: 50, fixed: "left" },
+          { type: "seq", width: 50, fixed: "left", title: "序号" },
+          { field: "switch", title: "开关", width: 70, fixed: "left", slots: { default: "switch" }},
+          { field: "status_text", title: "状态", width: 70, fixed: "left", slots: { default: "status_text" }},
+          { field: "cost", title: "消耗", width: 70 },
+          { field: "operate", title: "操作", width: 70, fixed: "left", slots: { default: "operate" }}
+        ],
+        data: []
+      }
+    }
+  },
+  methods: {
+    // 多选回调
+    handleCheckboxChange(records) {
+      console.log(records, "records")
+    },
+    // 排序回调
+    handleSortChange(context) {
+      this.searchQuery.order = `${context.field} ${context.order}`
+      // 以下执行列表接口.....
+    },
+    // 分页回调
+    handlePageChange({ page, limit }) {
+      this.gridOptions.pagerConfig.currentPage = page
+      this.gridOptions.pagerConfig.pageSize = limit
+      // 以下执行列表接口.....
+    }
+  }
+}
+</script>
+
+```
+###### 自定义列支持多级表头
+```
+<template>
+  <by-table
+    :grid-options="gridOptions"
+    @setColumn="handleSetColumn"
+    @setGroupColumn="handleSetColumn"
+  >
+  </by-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      gridOptions: {
+        border: true,
+        stripe: true,
+        resizable: true,
+        height: 500,
+        // 非自定义列的情况下的多级表头配置方式
+        columns: [
+          { type: 'seq', width: 50 },
+          {
+            title: '基本信息',
+            children: [
+              { field: 'name', title: 'Name' },
+              {
+                title: '其他信息',
+                children: [
+                  { field: 'nickname', title: 'Nickname' },
+                  { field: 'age', title: 'Age', sortable: true }
+                ]
+              },
+              { field: 'sex', title: 'Sex' }
+            ]
+          },
+          { field: 'address', title: 'Address', sortable: true, showOverflow: true }
+        ],
+      }  
+    }
+  },
+  methods: {
+   // setColumn 返回只有一级的表头
+   // setGroupColumn 返回多级表头数据
+   handleSetColumn(columns) {
+      this.gridOptions.columns = [
+        { type: "checkbox", width: 50, fixed: "left" },
+        { type: "seq", width: 50, fixed: "left", title: "序号" },
+        ...columns,
+        { title: "操作", width: 80, fixed: "right", slots: { default: "operate" }}
+      ]
+    },
+  }
+}
+</script>
+```

package/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
+}

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}