@weitutech/by-components 1.0.28 → 1.0.30

package/package.json

@@ -1,31 +1,31 @@
-{
-  "name": "@weitutech/by-components",
-  "version": "1.0.28",
-  "private": false,
-  "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",
-    "build:css": "sass src/style/index.scss lib/index.css --no-source-map --style=compressed"
-  },
-  "dependencies": {
-    "axios": "^1.7.7",
-    "core-js": "^3.8.3",
-    "dom-zindex": "^1.0.6",
-    "element-ui": "^2.15.14",
-    "js-cookie": "^3.0.5",
-    "moment": "^2.30.1",
-    "vue": "^2.6.14",
-    "vuedraggable": "^2.24.3",
-    "vxe-table": "3.8.24"
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "sass": "^1.79.4",
-    "sass-loader": "^16.0.2",
-    "vue-template-compiler": "^2.6.14"
-  }
+{
+  "name": "@weitutech/by-components",
+  "version": "1.0.30",
+  "private": false,
+  "main": "src/index",
+  "scripts": {
+    "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"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "core-js": "^3.8.3",
+    "dom-zindex": "^1.0.6",
+    "element-ui": "^2.15.14",
+    "js-cookie": "^3.0.5",
+    "moment": "^2.30.1",
+    "vue": "^2.6.14",
+    "vuedraggable": "^2.24.3",
+    "vxe-table": "3.8.24"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "sass": "^1.79.4",
+    "sass-loader": "^16.0.2",
+    "vue-template-compiler": "^2.6.14"
+  }
 }

package/postcss.config.js

@@ -1,7 +1,7 @@
-module.exports = {
-  plugins: {
-    // 可以根据您的需求添加具体的 PostCSS 插件
-    // 例如 autoprefixer 用于添加浏览器前缀
-    'autoprefixer': {}
-  }
+module.exports = {
+  plugins: {
+    // 可以根据您的需求添加具体的 PostCSS 插件
+    // 例如 autoprefixer 用于添加浏览器前缀
+    'autoprefixer': {}
+  }
 }

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

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

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