lw-cdp-ui 1.0.19 → 1.0.21

package/dist/components/lwSearch/dates/dates.vue

@@ -1,366 +1,366 @@
-<template>
-  <div class="dates-container">
-    <!-- 输入框 -->
-    <el-input
-      class="default-input"
-      size="small"
-      type="text"
-      :disabled="item.disabled"
-      :placeholder="item.placeholder || '请选择'"
-      clearable
-      :model-value="displayValue"
-      @clear="handleClear"
-      @click="togglePanel"
-      style="width: 100%"
-    >
-      <template #suffix>
-        <el-icon><el-icon-calendar /></el-icon>
-      </template>
-    </el-input>
-
-    <!-- 日期选择面板 -->
-    <div v-show="isPanelShow" class="dates-panel">
-      <el-tabs v-model="activeName" class="dates-panel-tabs" @tab-click="handleTabClick">
-        <!-- 单日选择 -->
-        <el-tab-pane label="单日" name="single">
-          <div class="panel-label">
-            <span>单日</span>
-            <el-date-picker
-              size="small"
-              :type="item.singleType || 'date'"
-              :disabled="item.disabled"
-              :format="item.format || 'yyyy-MM-dd'"
-              :value-format="item.valueFormat || 'yyyy-MM-dd'"
-              :placeholder="item.placeholder || $t('lwSearch.please_select')"
-              :shortcuts="shortcuts"
-              v-model="value"
-              :clearable="false"
-              @blur="pickerBlur"
-              @change="pickerChange"
-              ref="singlePicker"
-              :popper-class="'single-picker single-picker-' + item.prop"
-            />
-            <teleport v-if="isSidebarShow && activeName === 'single'" :to="'.single-picker-' + item.prop + ' .el-picker-panel__sidebar'">
-              <div class="dates-side">
-                <div class="sidebar-title">所选时间列表</div>
-                <div class="sidebar-list">
-                  <div class="item" v-for="(date, index) in value" :key="index">
-                    <div class="text">{{ date }}</div>
-                    <div class="button" @click="deleteSingleDate(index)">
-                      <el-icon><Close /></el-icon>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </teleport>
-          </div>
-        </el-tab-pane>
-
-        <!-- 日期范围选择 -->
-        <el-tab-pane label="日期范围" name="range">
-          <div class="panel-label">
-            <span>日期范围</span>
-            <el-date-picker
-              size="small"
-              :type="item.rangeType || 'daterange'"
-              :disabled="item.disabled"
-              :format="item.format || 'yyyy-MM-dd'"
-              :value-format="item.valueFormat || 'yyyy-MM-dd'"
-              :placeholder="item.placeholder || $t('lwSearch.please_select')"
-              :unlink-panels="item.unlinkPanels ?? false"
-              :shortcuts="shortcuts"
-              v-model="value"
-              :clearable="false"
-              @blur="pickerBlur"
-              @change="pickerChange"
-              ref="rangePicker"
-              :popper-class="'range-picker range-picker-' + item.prop"
-            />
-            <teleport v-if="isSidebarShow && activeName === 'range'" :to="'.range-picker-' + item.prop + ' .el-picker-panel__sidebar'">
-              <div class="dates-side-top">
-                <div class="sidebar-list">
-                  <div class="item" v-show="value.length === 2">
-                    <div class="text">{{ value[0] }}~{{ value[1] }}</div>
-                    <div class="button" @click="handleClear">
-                      <el-icon><el-icon-close /></el-icon>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </teleport>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'
-
-export default {
-  emits: ["update:modelValue", "change"],
-  name: "Date",
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    modelValue: {
-      type: [String, Array],
-      default: ""
-    },
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-  },
-  setup(props, context) {
-    const state = reactive({
-      isSidebarShow: false,
-      activeName: "single",
-      isPanelShow: false,
-      value: [],
-      shortcuts: [{ text: "", value: "" }]
-    })
-
-    // 监听 modelValue 变化
-    watch(
-      () => props.modelValue,
-      (newVal) => {
-        if (newVal) {
-          state.activeName = Array.isArray(newVal) ? "range" : "single"
-          state.value = Array.isArray(newVal) ? newVal : newVal.split(",")
-        } else {
-          state.value = []
-        }
-      },
-      { deep: true }
-    )
-
-    // 监听 value 变化并更新父组件
-    watch(
-      () => state.value,
-      (newVal) => {
-        const formattedValue = state.activeName === 'single' ? newVal.join(",") : newVal
-        if (formattedValue !== props.modelValue) {
-          context.emit("update:modelValue", formattedValue)
-          context.emit("change", formattedValue)
-        }
-      },
-      { deep: true, immediate: true }
-    )
-
-    const displayValue = computed(() => state.value.join(","))
-
-    const togglePanel = () => {
-      state.isPanelShow = !state.isPanelShow
-    }
-
-    const handleTabClick = () => {
-      nextTick(() => {
-        state.isSidebarShow = true
-      })
-    }
-
-    const pickerChange = () => {
-      nextTick(() => {
-        state.isPanelShow = false
-      })
-    }
-
-    const deleteSingleDate = (index) => {
-      state.value.splice(index, 1)
-    }
-
-    const pickerBlur = () => {
-      state.isSidebarShow = false
-      nextTick(() => {
-        state.isPanelShow = false
-      })
-    }
-
-    const handleClear = () => {
-      state.value = []
-    }
-    
-    return {
-      ...toRefs(state),
-      togglePanel,
-      handleTabClick,
-      pickerChange,
-      deleteSingleDate,
-      pickerBlur,
-      handleClear,
-      displayValue
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.dates-container {
-  position: relative;
-  .default-input {
-    cursor: pointer;
-    .el-input__inner {
-      cursor: pointer;
-    }
-  }
-  .dates-panel {
-    position: absolute;
-    top: 35px;
-    background: #ffffff;
-    width: 100%;
-    min-width: max-content;
-    z-index: 9;
-    .panel-label {
-      width: 60px;
-      height: 40px;
-      position: relative;
-      & > span {
-        width: 100%;
-        height: 40px;
-        display: inline-block;
-        text-align: center;
-      }
-      .el-date-editor {
-        width: 100%;
-        height: 40px;
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0;
-        cursor: pointer;
-        .el-input__inner {
-          width: 100%;
-          height: 40px;
-          cursor: pointer;
-        }
-        .el-input__prefix {
-          display: none;
-        }
-      }
-    }
-  }
-}
-.single-picker {
-  .el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body {
-    margin: 0 160px 0 0;
-  }
-  .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
-    right: 0;
-    border-left: 1px solid var(--el-datepicker-inner-border-color);
-    width: 160px;
-  }
-  .el-date-picker.has-sidebar {
-    width: 488px;
-  }
-  .dates-side {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 100%;
-    .sidebar-title {
-      font-size: 14px;
-      color: var(--el-text-color-regular);
-      margin-bottom: 5px;
-    }
-    .sidebar-list {
-      width: 100%;
-      .item {
-        width: 100%;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        box-sizing: border-box;
-        padding: 2px 10px;
-        background: #155752;
-        margin-bottom: 2px;
-        .text {
-          font-size: 12px;
-          color: #ffffff;
-        }
-        .button {
-          width: 16px;
-          height: 16px;
-          border: 1px solid #cccccc;
-          border-radius: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          &:hover {
-            border-color: #ffffff;
-            .el-icon--close {
-              color: #ffffff;
-            }
-          }
-          .el-icon--close {
-            font-size: 12px;
-            color: #cccccc;
-          }
-        }
-      }
-    }
-  }
-}
-.range-picker {
-  .el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body {
-    margin: 40px 0 0 0;
-  }
-  .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
-    bottom: unset;
-    border-bottom: 1px solid var(--el-datepicker-inner-border-color);
-    width: 100%;
-    height: 40px;
-  }
-  .el-date-range-picker.has-sidebar {
-    width: 646px;
-  }
-  .dates-side-top {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: max-content;
-    .sidebar-list {
-      width: 100%;
-      .item {
-        width: 100%;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        box-sizing: border-box;
-        padding: 2px 10px;
-        background: #155752;
-        margin-bottom: 2px;
-        .text {
-          font-size: 12px;
-          color: #ffffff;
-          padding-right: 10px;
-        }
-        .button {
-          width: 16px;
-          height: 16px;
-          border: 1px solid #cccccc;
-          border-radius: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          &:hover {
-            border-color: #ffffff;
-            .el-icon--close {
-              color: #ffffff;
-            }
-          }
-          .el-icon--close {
-            font-size: 12px;
-            color: #cccccc;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="dates-container">
+    <!-- 输入框 -->
+    <el-input
+      class="default-input"
+      size="small"
+      type="text"
+      :disabled="item.disabled"
+      :placeholder="item.placeholder || '请选择'"
+      clearable
+      :model-value="displayValue"
+      @clear="handleClear"
+      @click="togglePanel"
+      style="width: 100%"
+    >
+      <template #suffix>
+        <el-icon><el-icon-calendar /></el-icon>
+      </template>
+    </el-input>
+
+    <!-- 日期选择面板 -->
+    <div v-show="isPanelShow" class="dates-panel">
+      <el-tabs v-model="activeName" class="dates-panel-tabs" @tab-click="handleTabClick">
+        <!-- 单日选择 -->
+        <el-tab-pane label="单日" name="single">
+          <div class="panel-label">
+            <span>单日</span>
+            <el-date-picker
+              size="small"
+              :type="item.singleType || 'date'"
+              :disabled="item.disabled"
+              :format="item.format || 'yyyy-MM-dd'"
+              :value-format="item.valueFormat || 'yyyy-MM-dd'"
+              :placeholder="item.placeholder || $t('lwSearch.please_select')"
+              :shortcuts="shortcuts"
+              v-model="value"
+              :clearable="false"
+              @blur="pickerBlur"
+              @change="pickerChange"
+              ref="singlePicker"
+              :popper-class="'single-picker single-picker-' + item.prop"
+            />
+            <teleport v-if="isSidebarShow && activeName === 'single'" :to="'.single-picker-' + item.prop + ' .el-picker-panel__sidebar'">
+              <div class="dates-side">
+                <div class="sidebar-title">所选时间列表</div>
+                <div class="sidebar-list">
+                  <div class="item" v-for="(date, index) in value" :key="index">
+                    <div class="text">{{ date }}</div>
+                    <div class="button" @click="deleteSingleDate(index)">
+                      <el-icon><Close /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </teleport>
+          </div>
+        </el-tab-pane>
+
+        <!-- 日期范围选择 -->
+        <el-tab-pane label="日期范围" name="range">
+          <div class="panel-label">
+            <span>日期范围</span>
+            <el-date-picker
+              size="small"
+              :type="item.rangeType || 'daterange'"
+              :disabled="item.disabled"
+              :format="item.format || 'yyyy-MM-dd'"
+              :value-format="item.valueFormat || 'yyyy-MM-dd'"
+              :placeholder="item.placeholder || $t('lwSearch.please_select')"
+              :unlink-panels="item.unlinkPanels ?? false"
+              :shortcuts="shortcuts"
+              v-model="value"
+              :clearable="false"
+              @blur="pickerBlur"
+              @change="pickerChange"
+              ref="rangePicker"
+              :popper-class="'range-picker range-picker-' + item.prop"
+            />
+            <teleport v-if="isSidebarShow && activeName === 'range'" :to="'.range-picker-' + item.prop + ' .el-picker-panel__sidebar'">
+              <div class="dates-side-top">
+                <div class="sidebar-list">
+                  <div class="item" v-show="value.length === 2">
+                    <div class="text">{{ value[0] }}~{{ value[1] }}</div>
+                    <div class="button" @click="handleClear">
+                      <el-icon><el-icon-close /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </teleport>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'
+
+export default {
+  emits: ["update:modelValue", "change"],
+  name: "Date",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: [String, Array],
+      default: ""
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
+      isSidebarShow: false,
+      activeName: "single",
+      isPanelShow: false,
+      value: [],
+      shortcuts: [{ text: "", value: "" }]
+    })
+
+    // 监听 modelValue 变化
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal) {
+          state.activeName = Array.isArray(newVal) ? "range" : "single"
+          state.value = Array.isArray(newVal) ? newVal : newVal.split(",")
+        } else {
+          state.value = []
+        }
+      },
+      { deep: true }
+    )
+
+    // 监听 value 变化并更新父组件
+    watch(
+      () => state.value,
+      (newVal) => {
+        const formattedValue = state.activeName === 'single' ? newVal.join(",") : newVal
+        if (formattedValue !== props.modelValue) {
+          context.emit("update:modelValue", formattedValue)
+          context.emit("change", formattedValue)
+        }
+      },
+      { deep: true, immediate: true }
+    )
+
+    const displayValue = computed(() => state.value.join(","))
+
+    const togglePanel = () => {
+      state.isPanelShow = !state.isPanelShow
+    }
+
+    const handleTabClick = () => {
+      nextTick(() => {
+        state.isSidebarShow = true
+      })
+    }
+
+    const pickerChange = () => {
+      nextTick(() => {
+        state.isPanelShow = false
+      })
+    }
+
+    const deleteSingleDate = (index) => {
+      state.value.splice(index, 1)
+    }
+
+    const pickerBlur = () => {
+      state.isSidebarShow = false
+      nextTick(() => {
+        state.isPanelShow = false
+      })
+    }
+
+    const handleClear = () => {
+      state.value = []
+    }
+    
+    return {
+      ...toRefs(state),
+      togglePanel,
+      handleTabClick,
+      pickerChange,
+      deleteSingleDate,
+      pickerBlur,
+      handleClear,
+      displayValue
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.dates-container {
+  position: relative;
+  .default-input {
+    cursor: pointer;
+    .el-input__inner {
+      cursor: pointer;
+    }
+  }
+  .dates-panel {
+    position: absolute;
+    top: 35px;
+    background: #ffffff;
+    width: 100%;
+    min-width: max-content;
+    z-index: 9;
+    .panel-label {
+      width: 60px;
+      height: 40px;
+      position: relative;
+      & > span {
+        width: 100%;
+        height: 40px;
+        display: inline-block;
+        text-align: center;
+      }
+      .el-date-editor {
+        width: 100%;
+        height: 40px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        cursor: pointer;
+        .el-input__inner {
+          width: 100%;
+          height: 40px;
+          cursor: pointer;
+        }
+        .el-input__prefix {
+          display: none;
+        }
+      }
+    }
+  }
+}
+.single-picker {
+  .el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body {
+    margin: 0 160px 0 0;
+  }
+  .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
+    right: 0;
+    border-left: 1px solid var(--el-datepicker-inner-border-color);
+    width: 160px;
+  }
+  .el-date-picker.has-sidebar {
+    width: 488px;
+  }
+  .dates-side {
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 100%;
+    .sidebar-title {
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+      margin-bottom: 5px;
+    }
+    .sidebar-list {
+      width: 100%;
+      .item {
+        width: 100%;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 2px 10px;
+        background: #155752;
+        margin-bottom: 2px;
+        .text {
+          font-size: 12px;
+          color: #ffffff;
+        }
+        .button {
+          width: 16px;
+          height: 16px;
+          border: 1px solid #cccccc;
+          border-radius: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          &:hover {
+            border-color: #ffffff;
+            .el-icon--close {
+              color: #ffffff;
+            }
+          }
+          .el-icon--close {
+            font-size: 12px;
+            color: #cccccc;
+          }
+        }
+      }
+    }
+  }
+}
+.range-picker {
+  .el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body {
+    margin: 40px 0 0 0;
+  }
+  .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
+    bottom: unset;
+    border-bottom: 1px solid var(--el-datepicker-inner-border-color);
+    width: 100%;
+    height: 40px;
+  }
+  .el-date-range-picker.has-sidebar {
+    width: 646px;
+  }
+  .dates-side-top {
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: max-content;
+    .sidebar-list {
+      width: 100%;
+      .item {
+        width: 100%;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 2px 10px;
+        background: #155752;
+        margin-bottom: 2px;
+        .text {
+          font-size: 12px;
+          color: #ffffff;
+          padding-right: 10px;
+        }
+        .button {
+          width: 16px;
+          height: 16px;
+          border: 1px solid #cccccc;
+          border-radius: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          &:hover {
+            border-color: #ffffff;
+            .el-icon--close {
+              color: #ffffff;
+            }
+          }
+          .el-icon--close {
+            font-size: 12px;
+            color: #cccccc;
+          }
+        }
+      }
+    }
+  }
+}
+</style>