lw-cdp-ui 1.2.47 → 1.2.49

package/dist/components/lwSearch/dateRange/dateRange.vue

@@ -1,118 +0,0 @@
-<template>
-  <div>
-    <el-date-picker
-      :showTime="item.showTime"
-      :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
-      :value-format="item.valueFormat"
-      clearable
-      v-model="value"
-      style="width: 100%"
-      type="datetimerange"
-      :start-placeholder="$t('lwSearch.dateRange.startPlaceholder')"
-      :end-placeholder="$t('lwSearch.dateRange.endPlaceholder')"
-      :default-time="item.defaultTime || defaultTime(0)"
-      size=""
-    >
-    </el-date-picker>
-  </div>
-</template>
-
-<script>
-import { computed, reactive, toRefs, watch } from 'vue'
-
-export default {
-  emits: ["update:modelValue", "change"],
-  name: "dateRange",
-  props: {
-    disabled: { // 是否禁止操作
-      type: Boolean,
-      default() {
-        return false;
-      }
-    },
-    modelValue: { // 绑定的结果
-      default() {
-        return [];
-      }
-    },
-    item: { // 配置项
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    disabledDate: { // 禁止日期
-      type: Function,
-      default() {
-        return null;
-      }
-    },
-    propValueFormat: { // 格式化日期
-      type: String,
-      default() {
-        return null;
-      }
-    },
-  },
-  setup(props, context) {
-    const state = reactive({});
-
-    // 最新的结果推送到父组件
-    // watch(
-    //   () => props.modelValue,
-    //   (newVal, prevVal) => {
-    //     context.emit("update:modelValue",  newVal);
-    //     context.emit("change", newVal);
-    //   },
-    //   { deep: true, immediate: true }
-    // );
-
-    const valueFormat = computed(() => {
-      if (props.propValueFormat) {
-        return props.propValueFormat;
-      }
-      if (props.item.valueFormat) {
-        return props.item.valueFormat;
-      }
-      if (props.item.dateSection) {
-        return "YYYY-MM-DD 00:00:00";
-      }
-      if (props.item.withZero) {
-        return "YYYY-MM-DD 00:00:00";
-      }
-      if (props.item.withLast) {
-        return "YYYY-MM-DD 23:59:59";
-      }
-      return "YYYY-MM-DD";
-    });
-
-    const value = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        context.emit('update:modelValue', value);
-        context.emit('change', value);
-      },
-    });
-
-    // 禁止选择日期
-    const disabledDate = (date) => {
-      return date.getTime() < Date.now();
-    };
-    const defaultTime = (a) => {
-      const now = new Date(); 
-      now.setHours(a); 
-      now.setMinutes(0);
-      now.setSeconds(0);
-      return now
-    }
-    return {
-      ...toRefs(state),
-      defaultTime,
-      valueFormat,
-      value
-    };
-  },
-};
-</script>

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

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