@weitutech/by-components 1.0.31 → 1.1.1

package/package.json

@@ -1,13 +1,24 @@
 {
   "name": "@weitutech/by-components",
-  "version": "1.0.31",
+  "version": "1.1.1",
   "private": false,
-  "main": "src/index",
+  "main": "lib/by-components.umd.js",
+  "module": "lib/by-components.esm.js",
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "sideEffects": [
+    "*.vue",
+    "*.scss"
+  ],
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "npm run build:js && npm run build:css",
     "build:js": "vue-cli-service build --target lib --name by-components src/index.js",
-    "build:css": "sass src/style/index.scss lib/index.css --no-source-map --style=compressed"
+    "build:css": "sass src/style/index.scss lib/index.css --no-source-map --style=compressed",
+    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "format": "prettier --write \"src/**/*.{js,vue,json,scss}\""
   },
   "dependencies": {
     "axios": "^1.7.7",
@@ -18,15 +29,23 @@
     "moment": "^2.30.1",
     "vue": "^2.6.14",
     "vuedraggable": "^2.24.3",
-    "vxe-table": "3.8.24"
+    "vxe-table": "^3.8.24"
   },
   "devDependencies": {
+    "@babel/core": "^7.19.1",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.27.2",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "prettier": "^3.5.3",
     "sass": "^1.79.4",
     "sass-loader": "^16.0.2",
     "vue-template-compiler": "^2.6.14"
   }
-}
+}

package/CHANGELOG.md

@@ -1,44 +0,0 @@
-# 1.0.30 (2025-04-17)
-
-### feat
-
-- 增加表格列表的保存
-
-# 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/docs/extension.md

@@ -1,15 +0,0 @@
-### 如需要扩展
-
-  1. 应从 vex-table 第三方组件库查看是否有相应的功能
-  
-  2. 如需要加入通用实用的表单元素、应该先考虑在组件form中加入、其次是以custom插槽的形式插入
-
-### 第三方插件
-
-  [element-ui](https://element.eleme.cn/#/zh-CN)
-
-  [vuedraggable](https://www.npmjs.com/package/vuedraggable)
-
-  [vxe-table](https://vxetable.cn/pluginDocs/table3/#/demo/list)
-
-  [moment](https://momentjs.cn/)

package/docs/form.md

@@ -1,52 +0,0 @@
-### 类型(没有注册看 Element 的组件使用方法)
-
-```
-  | 'input'
-  | 'inputNumber'
-  | 'select'
-  | 'treeSelect'
-  | 'datepicker'
-  | 'cascader'
-  | 'switch'
-  | 'checkbox'
-  | 'radio'
-  | 'upload'
-  | 'customDatePicker' // 自定义的时间选择器
-  | 'search' // 搜索按钮区域
-  | 'custom' // 自定义
-```
-
-#### Event
-
-| 事件          | 参数                |
-| ------------- | ------------------- |
-| change        | context: IFormItems |
-| queryBtnClick | 无                  |
-
-完整案列见 [表单 by-form](../README.md)
-
-### 特殊说明
-
-#### 'customDatePicker'特别说明
-
-自定义时间选中器同时支持时间段方式绑定值 和 单独时间方式绑定值
-
-```
-// 时间段方式绑定值
-{
-  type: 'customDatePicker',
-  field: 'report_time',
-  label: '报表时间'
-}
-```
-
-```
-// 单独时间方式绑定值
-{
-  type: 'customDatePicker',
-  field: 'report_time',  // 仍然保留原来的字段，保证兼容性
-  startTimeField: 'start_time',  // 新增开始时间字段
-  endTimeField: 'end_time',  // 新增结束时间字段
-  label: '报表时间'
-}
-```

package/docs/table.md

@@ -1,26 +0,0 @@
-### table
-  #### 自定义列宽
-    注意📢： 一个项目中的name属性千万不能重名、一个项目中的name属性千万不能重名、一个项目中的name属性千万不能重名
-    给table组件设置name值属性、类型为String格式、表格会自动缓存用户拖拽之后的结果
-  #### 自定义列
-    给table组件设置以下对象
-    customColumnConfig: { // 自定义列  
-      showCustomColumn: true, // 是否显示自定义列
-      infoMethod: getCustomTableList,  // 回显用的接口
-      infoMethodParams: {}, // 回显用的接口参数
-      submitMethod: setCustomTableList, // 保存用的接口
-      submitMethodParams: {}, // 保存用的接口参数
-      slots: ["source_material_count"] // 需要使用插槽的字段集合
-    }
-    并通过事件Event @setColumn="handleSetColumn" 实现对列的设置
-    const 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" }}
-      ]
-    }
-  #### Event
-  见[第三方插件vxe-table](./extension.md)
-完整案列见 [表格 by-table](../README.md)

package/src/components/custom-column/index.vue

@@ -1,369 +0,0 @@
-<!-- 自定义表头 -->
-<template>
-  <div id="custom_column">
-    <el-dialog
-      :close-on-click-modal="false"
-      :visible="dialogVisible"
-      width="920px"
-      :append-to-body="true"
-      :show-close="false"
-      custom-class="custom_dialog_class"
-      @close="closeDialog"
-    >
-      <div class="el-dialog-box">
-        <!-- 数据指标 -->
-        <div class="left_box">
-          <div class="box_title">数据指标</div>
-          <div class="row" style="padding-right: 20px;">
-            <div class="cell">
-              <el-input
-                v-model="search"
-                style="width: 228px; margin-bottom: 10px"
-                placeholder="搜索指标"
-                size="medium"
-                prefix-icon="el-icon-search"
-              />
-            </div>
-            <el-button type="text" @click="selectNone">全不选</el-button>
-          </div>
-          <div class="left_box_body">
-            <div class="left_nav">
-              <ul>
-                <li
-                  v-for="(item, index) in checkBoxMenuBySearch"
-                  :key="index"
-                  :class="{ active: activeId === index }"
-                  @click="setHighlight(index)"
-                >
-                  {{ item.label }}
-                </li>
-              </ul>
-            </div>
-            <div class="left_menu">
-              <div v-for="(item, index) in checkBoxMenuBySearch" :key="index" ref="tagItem">
-                <div class="checkbox_title">
-                  {{ item.label }}
-                </div>
-                <el-row>
-                  <el-col
-                    v-for="(each, idx) in item.data"
-                    :key="idx"
-                    :span="12"
-                    style="margin-bottom:3px"
-                  >
-                    <el-checkbox
-                      v-model="each.type"
-                      @change="changeCheckbox(each.key,each.type)"
-                    >
-                      {{ each.label }}
-                    </el-checkbox>
-                  </el-col>
-                </el-row>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 已选指标 -->
-        <div class="right_box">
-          <div class="drag_box">
-            <el-row>
-              <div class="drag_text_box">
-                <span class="drag_title">{{`已选指标(${number})`}}</span>
-                <span class="recover" @click="recoverDefault">恢复默认</span>
-              </div>
-            </el-row>
-            <div class="drag_ul">
-              <draggable
-                v-model="draggableMenu"
-                chosen-class="chosen"
-                force-fallback="true"
-                animation="500"
-                @end="onEnd"
-              >
-                <transition-group>
-                  <div
-                    v-for="(col) in draggableMenu"
-                    v-show="col.type"
-                    :class="col.key === 'sort-cut-off' ? 'fixedClass' : 'drag_li_box'"
-                    :key="col.key"
-                  >
-                    <div v-if="col.key !== 'sort-cut-off'">
-                      <i class="el-icon-rank icon-box" />
-                      <span class="drag_li_text">{{ col.label }}</span>
-                    </div>
-                    <i
-                      v-if="col.key !== 'sort-cut-off'"
-                      class="el-icon-close remove"
-                      @click="changeCheckbox(col.key, false)"
-                    />
-                  </div>
-                </transition-group>
-              </draggable>
-            </div>
-          </div>
-        </div>
-      </div>
-      <template #footer>
-        <el-row style="margin-top: 7px">
-          <el-button
-            size="small"
-            style="width: 96px"
-            @click="closeDialog"
-          >取消</el-button>
-          <el-button
-            size="small"
-            style="width: 96px"
-            type="primary"
-            @click="submit"
-          >确定</el-button>
-        </el-row>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import draggable from "vuedraggable"
-import { deepClone } from "../../utils/index"
-export default {
-  name: "CustomColumn",
-  components: {
-    draggable
-  },
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    infoMethod: {
-      type: Function,
-      required: true,
-      default: () => {}
-    },
-    submitMethod: {
-      type: Function,
-      required: true,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      draggableMenu: [],
-      /** 勾选的主标题菜单 */
-      checkBoxMenu: [],
-      /** 选中高亮的菜单ID */
-      activeId: 0,
-      /** 表头id */
-      id: undefined,
-      /** 表格列接口路径 */
-      page: "",
-      /** 搜索字段 */
-      search: "",
-    }
-  },
-  computed: {
-    number() {
-      return this.draggableMenu.filter(item => item.type && item.key !== "sort-cut-off").length
-    },
-    checkBoxMenuBySearch() {
-      if (this.search) {
-        return this.checkBoxMenu.map(group => {
-          const filteredItems = group.data.filter(item => item.label.includes(this.search))
-            return {
-                label: group.label,
-                data: filteredItems
-            };
-        }).filter(group => group.data.length > 0)
-      } else {
-        return this.checkBoxMenu
-      }
-      
-    }
-  },
-  methods: {
-    deepClone,
-    /**
-     * @describe 获取自定义表头数据
-     * @param { string } page 表格列接口路径
-     * @param { object[] } column 列数据
-     */
-    async getCustomTableList(page, column) {
-      if (!page) {
-        throw new Error("缺少表格列接口路径");
-      } else {
-        // 克隆一份
-        this.columnList = this.deepClone(column)
-        this.page = page || ""
-        const bePreservedColumn = []
-        const res = await this.infoMethod({ page: page })
-        if (JSON.stringify(res.data) !== "[]") {
-          this.id = res.data.id || undefined
-          res.data.column.forEach(col => bePreservedColumn.push(...col.data))
-        }
-        this.initTableList(this.deepClone(column), bePreservedColumn)
-      }
-    },
-    /**
-     * @describe 第一次保存执行的函数（还未保存过的情况下）
-     * @param { object[] } initColumn 初始的列数据
-     * @param { object[] } bePreservedColumn 被保存过的列数据
-     */
-    initTableList(initColumn, bePreservedColumn = []) {
-      const setDraggableMenu = (arr) => {
-        const cols = []
-        arr.forEach(item => cols.push(...item.data))
-        cols.sort((a, b) => a.sort - b.sort)
-        if(cols.some(item=> item.fixed)) {
-          let cutOffIndex = 0
-          for(let index = 0; index <= cols.length; index++) {
-            const col = cols[index]
-            const nextCol = cols[index + 1]
-            if (col.fixed === "left" && (!nextCol || !nextCol.fixed)) {
-              cutOffIndex = index + 1
-              break
-            }
-          }
-          cols.splice(cutOffIndex, 0, {
-            type: true,
-            label: "",
-            key: "sort-cut-off",
-            parent: ""
-          })
-        }
-        return cols
-      }
-      if (bePreservedColumn && bePreservedColumn.length > 0) {
-        // 需要处理被保存过的进行回显
-        initColumn.forEach((cols) => {
-          cols.data.forEach((col) => {
-            const beSaveCol = bePreservedColumn.find(item => item.key === col.key) || {}
-            col.type = (beSaveCol.type === "true" || beSaveCol.type === true) ? true : false
-            col.sort = beSaveCol.sort
-            col.fixed = beSaveCol.fixed ? beSaveCol.fixed : col.fixed,
-            col.parent = { label: cols.label }
-          })
-        })
-        // 需要显示的列的数据
-        this.checkBoxMenu = this.deepClone(initColumn)
-        this.draggableMenu = setDraggableMenu(this.checkBoxMenu)
-      } else {
-        // 从未被保存过
-        let num = 0
-        initColumn.forEach((cols) => {
-          cols.data.forEach((col) => {
-            num++
-            col.type = true
-            col.width = col.width ? +col.width : 0,
-            col.sort = num
-            col.parent = { label: cols.label }
-          })
-        })
-        this.checkBoxMenu = this.deepClone(initColumn)
-        this.draggableMenu = setDraggableMenu(this.checkBoxMenu)
-      }
-      this.$emit("changeTable", this.draggableMenu.filter(item => item.key !== "sort-cut-off").sort((a, b) => a.sort - b.sort))
-      this.$emit("changeTableGroup", this.checkBoxMenu)
-    },
-    // 全不选
-    selectNone() {
-      this.checkBoxMenu.forEach(cols => cols.data.forEach(col => col.type = false))
-      this.draggableMenu.forEach(item => {
-        if (item.key === "sort-cut-off") {
-          item.type = true
-        } else {
-          item.type = false
-        }
-      })
-    },
-    /**
-     * @describe 点击高亮
-     * @param { number } index 索引
-     */
-    setHighlight(index) {
-      this.activeId = index
-      if (this.$refs.tagItem) {
-        this.$refs.tagItem[index].scrollIntoView({ behavior: "smooth" })
-      }
-    },
-    /**
-     * @describe 勾选、关闭
-     * @param { string } key 唯一标识
-     * @param { boolean } type 是否显示
-     */
-    changeCheckbox(key, type) {
-      this.draggableMenu.forEach(item => {
-        if (item.key === key) {
-          item.type = type
-        }
-      })
-      this.checkBoxMenu.forEach(item => {
-        item.data.forEach(each => {
-          if (each.key === key) {
-            each.type = type
-          }
-        })
-      })
-    },
-    // 恢复默认
-    recoverDefault() {
-      this.initTableList(this.deepClone(this.columnList))
-    },
-    // 拖拽结束事件
-    onEnd() {
-      let isFixed = true
-      this.draggableMenu.forEach((item, index) => {
-        if (item.key === "sort-cut-off") { isFixed = false }
-        if (isFixed) {
-          item.sort = index + 1
-          item.fixed = "left"
-        } else {
-          item.sort = index
-          delete item.fixed
-        }
-      })
-    },
-    // 点击保存
-    async submit() {
-      const params = {
-        column: [],
-        id: this.id,
-        page: this.page
-      }
-      this.draggableMenu.forEach(item => {
-        if (item.key !== "sort-cut-off") {
-          const { parent, ...other } = item
-          // 是否存在
-          const isExit = params.column.some(col => col.label === parent.label)
-          if (isExit) {
-            params.column.forEach(col => {
-              if (col.label === parent.label) {
-                col.data.push(other)
-              }
-            })
-          } else {
-            params.column.push({
-              label: parent.label,
-              data: [other]
-            })
-          }
-        }
-      })
-      await this.submitMethod(params)
-      const cols = []
-      params.column.forEach(item => {
-        cols.push(...item.data)
-      })
-      this.$emit("changeTable", cols.sort((a, b) => a.sort - b.sort))
-      this.$emit("changeTableGroup", params.column)
-      this.closeDialog()
-    },
-    // 关闭弹窗
-    closeDialog() {
-      // 重置数据
-      this.search = ""
-      this.activeId = 0
-      this.$emit("closeDialog")
-    }
-  }
-}
-</script>

package/src/components/fold-search/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="drawer_query_btn b-fold-search">
-    <div @click="drawer">
-      <template v-if="show == true">
-        <span style="color: #3aa1ff; vertical-align:middle;">收起</span>&nbsp;&nbsp;<img style="vertical-align:middle;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzVjYWRmZiIgZD0iTTg3Ny41IDU2NS45bC0zNjcuNi0zNDAtMzY3LjYgMzQwYy0yMi41IDE0LjUtNTIuNSAxNC41LTY3LjUgMC0xNS0yMS43LTE1LTUwLjcgMC02NS4xTDQ5NSAxMTcuNWMwLTcuMiA3LjUtNy4yIDE1LTcuMnM3LjUgMCAxNSA3LjJsNDIwLjIgMzgzLjNjMjIuNSAyMS43IDE1IDUwLjYgMCA2NS4xLTIyLjcgMTQuNS01Mi43IDE0LjUtNjcuNyAwek00OTQuOCA0NTAuMWMwLTcuMiA3LjUtNy4yIDE1LTcuMnMxNSAwIDE1IDcuMkw5NDUgODMzLjRjMjIuNSAyMS43IDE1IDUwLjYgMCA2NS4xLTIyLjUgMTQuNC01Mi41IDE0LjQtNjcuNSAwTDUwOS44IDU1OC42IDE0Mi4yIDkwNS44Yy0yMi41IDE0LjUtNTIuNSAxNC41LTY3LjUgMC0xNS0yMS43LTE1LTUwLjcgMC02NS4xbDQyMC4xLTM5MC42eiBtMCAwIiAvPjwvc3ZnPg==" alt="收起">
-      </template>
-      <template v-else>
-        <span style="color: #3aa1ff; vertical-align:middle;">展开更多</span>&nbsp;&nbsp;<img style="vertical-align:middle;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzVjYWRmZiIgZD0iTTE0NS40IDQ2MS4xbDM2Ny42IDM0MCAzNjcuNi0zNDBjMjIuNS0xNC41IDUyLjUtMTQuNSA2Ny41IDAgMTUgMjEuNyAxNSA1MC43IDAgNjUuMUw1MjcuOSA5MDkuNWMwIDcuMi03LjUgNy4yLTE1IDcuMnMtNy41IDAtMTUtNy4yTDc3LjcgNTI2LjJjLTIyLjUtMjEuNy0xNS01MC42IDAtNjUuMSAyMi42LTE0LjUgNTIuNi0xNC41IDY3LjcgMHpNNTI4IDU3Ni45YzAgNy4yLTcuNSA3LjItMTUgNy4ycy0xNSAwLTE1LTcuMkw3Ny44IDE5My42Yy0yMi41LTIxLjctMTUtNTAuNiAwLTY1LjEgMjIuNS0xNC40IDUyLjUtMTQuNCA2Ny41IDBMNTEzIDQ2OC40bDM2Ny42LTM0Ny4yYzIyLjUtMTQuNSA1Mi41LTE0LjUgNjcuNSAwIDE1IDIxLjcgMTUgNTAuNyAwIDY1LjFMNTI4IDU3Ni45eiBtMCAwIiAvPjwvc3ZnPg==" alt="展开更多">
-      </template>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      show: false
-    }
-  },
-  methods: {
-    drawer(value) {
-      this.show = !this.show
-      this.$emit("change", this.show)
-    }
-
-  }
-}
-</script>
-