@weitutech/by-components 1.1.1 → 1.1.2

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "@weitutech/by-components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": false,
-  "main": "lib/by-components.umd.js",
-  "module": "lib/by-components.esm.js",
-  "files": [
-    "lib",
-    "dist"
-  ],
+  "main": "src/index",
   "sideEffects": [
     "*.vue",
     "*.scss"

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

@@ -0,0 +1,394 @@
+<!-- 自定义表头 -->
+<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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,171 @@
+<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: ''
+      })
+    },
+    startTimeField: {
+      type: String,
+      default: ''
+    },
+    endTimeField: {
+      type: String,
+      default: ''
+    }
+  },
+
+  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', [])
+        if (this.startTimeField && this.endTimeField) {
+          this.$emit('range-change', { startTime: '', endTime: '' })
+        }
+      } else {
+        const formattedDates = e.map(item => moment(item).format('YYYY-MM-DD'))
+        this.$emit('input', formattedDates)
+
+        if (this.startTimeField && this.endTimeField) {
+          this.$emit('range-change', {
+            startTime: formattedDates[0],
+            endTime: formattedDates[1]
+          })
+        }
+      }
+      this.active = ''
+    },
+    handleClick(item) {
+      this.active = item.key
+      this.$emit('input', [item.start_time, item.end_time])
+
+      if (this.startTimeField && this.endTimeField) {
+        this.$emit('range-change', {
+          startTime: item.start_time,
+          endTime: item.end_time
+        })
+      }
+    }
+  }
+}
+</script>