@weitutech/by-components 1.0.27 → 1.0.28

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.0.28 (2024-12-05)
+
+### 🐞 Bug fixes
+
+- 修复 main 入口设置错误
+
 # 1.0.27 (2024-12-04)
 
 ### 🍏 Perf

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@weitutech/by-components",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "private": false,
-  "main": "src/index",
+  "main": "lib/by-components.umd.min.js",
   "scripts": {
     "build": "npm run build:js && npm run build:css",
     "build:js": "vue-cli-service build --target lib --name by-components src/index.js",

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>
-

package/src/components/form/comps/custom-date-picker.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="b-picker wrapper">
-    <el-date-picker
-      style="width: 70%"
-      :value="value"
-      v-bind="dateOptions"
-      @input="handleChange"
-    />
-    <div class="btn">
-      <span
-        v-for="item in shortcuts"
-        :key="item.key"
-        class="item"
-        :class="{ item_active: item.key === active }"
-        @click="handleClick(item)"
-      >
-        {{ item.label }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from "moment"
-export default {
-  props: {
-    value: {
-      type: [Array, String],
-      required: true,
-      default: () => []
-    },
-    otherOption: {
-      type: Object,
-      default: () => ({
-        startPlaceholder: "开始时间",
-        endPlaceholder: "结束时间",
-        type: "daterange",
-        rangeSeparator: "-",
-        size: "mini",
-        active: ""
-      })
-    }
-  },
-
-  data() {
-    return {
-      shortcuts: [
-        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
-        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
-        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
-        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
-        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
-      ],
-      active: ""
-    }
-  },
-
-  computed: {
-    dateOptions() {
-      return {
-        startPlaceholder: "开始时间",
-        endPlaceholder: "结束时间",
-        type: "daterange",
-        rangeSeparator: "至",
-        size: "mini",
-        active: "",
-        ...this.otherOption
-      }
-    }
-  },
-
-  watch: {
-    value: {
-      handler(newValue, oldValue) {
-        if (newValue && newValue.length) {
-          this.active = ""
-          this.shortcuts.forEach(item => {
-            if (item.start_time === newValue[0] && item.end_time === newValue[1]) {
-              this.active = item.key
-            }
-          })
-        } else {
-          this.active = this.dateOptions.active
-          const item = this.shortcuts.find(item => item.key === this.dateOptions.active) || {}
-          if (item.start_time && item.end_time) {
-            this.handleClick(item)
-          }
-        }
-      },
-      immediate: true
-    }
-  },
-  
-  methods: {
-    handleChange(e) {
-      if (!e) {
-        this.$emit("input", [])
-      } else {
-        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
-      }
-      this.active = ""
-    },
-    handleClick(item) {
-      this.active = item.key
-      this.$emit("input", [item.start_time, item.end_time])
-    }
-  }
-}
-</script>

package/src/components/form/comps/date-picker-range.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="b-picker wrapper">
-    <el-date-picker
-      style="width: 70%"
-      v-model="value[config.field]"
-      :start-placeholder="config.startPlaceholder || '开始时间'"
-      :end-placeholder="config.endPlaceholder || '结束时间'"
-      :range-separator="config.rangeSeparator || '-'"
-      :size="config.size || 'mini'"
-      type= "daterange"
-      @input="handleChange"
-    />
-    <div class="btn">
-      <span
-        v-for="item in shortcuts"
-        :key="item.key"
-        class="item"
-        :class="{ item_active: item.key === active }"
-        @click="handleClick(item)"
-      >
-        {{ item.label }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from "moment"
-export default {
-  name: 'ByDatePickerRange',
-  props: {
-     //绑定的表单数据
-    value: {
-      type: Object,
-      default: null
-    },
-    //当前配置
-    config: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      shortcuts: [
-        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
-        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
-        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
-        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
-        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
-      ],
-      active: ""
-    }
-  },
-  mounted() {
-    this.active = this.config.active || 'today'
-    const item = this.shortcuts.find(item => item.key === this.active) || {}
-    if (item.start_time && item.end_time) {
-      this.handleClick(item)
-    }
-  },
-  methods: {
-    handleChange(e) {
-      if (!e) {
-        this.$emit("input", [])
-      } else {
-        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
-      }
-      this.active = ""
-    },
-    handleClick(item) {
-      this.active = item.key
-      this.value[this.config.field] = [item.start_time, item.end_time]
-      this.$emit("input", [item.start_time, item.end_time])
-    }
-  }
-}
-</script>

package/src/components/form/comps/pair-number-input.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="w-full flex">
-    <el-input class="w-1/2" :value="value[0]" :placeholder="earliestPlaceholder" @input="(value) => handleInput(value, 'min')" @blur="(e) => handleBlur(+e.target.value, 'min')" />
-    <span>~</span>
-    <el-input class="w-1/2" :value="value[1]" :placeholder="latestPlaceholder" @input="(value) => handleInput(value, 'max')" @blur="(e) => handleBlur(+e.target.value, 'max')" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Array,
-      required: true,
-      default: () => ["", 0]
-    },
-    earliestPlaceholder: {
-      type: String,
-      default: ""
-    },
-    latestPlaceholder: {
-      type: String,
-      default: ""
-    }
-  },
-
-  methods: {
-    /**
-     * 输入框输入回调，将其转换为数字，并反馈到父组件
-     * @param { string } val 输入框的value值
-     * @param { string } type 输入框的类型 min | max
-     */
-    handleInput(val, type) {
-      if (type === "min") {
-        const values = [val.replace(/\D+/, ""), this.value[1]]
-
-        this.$emit("input", values)
-      } else if (type === "max") {
-        const values = [this.value[0], val.replace(/\D+/, "")]
-
-        this.$emit("input", values)
-      }
-    },
-
-    /**
-     * 输入框失去焦点回调，判断最小输入框是否大于最大输入框和最大输入框小于最小输入框，并反馈到父组件
-     * @param { number } val 输入框的value值
-     * @param { string } type 输入框的类型 min | max
-     */
-    handleBlur(val, type) {
-      if (type === "min") {
-        if (val > this.value[1]) {
-          const values = [this.value[1], this.value[1]]
-
-          this.$emit("input", values)
-        }
-      } else if (type === "max") {
-        if (val < this.value[0]) {
-          const values = [this.value[0], this.value[0]]
-
-          this.$emit("input", values)
-        }
-      }
-    }
-  }
-}
-</script>