ci-plus 1.1.0 → 1.1.2

package/src/sortableTable/headerInput.vue

@@ -3,24 +3,26 @@
 <template>
   <div style="display: flex; align-items: center; justify-content: center">
     <span>{{ text }}</span>
-    <header-popover
-      :width="width"
-      :trigger="trigger"
-      @confirm="confirm"
-      @clear="clear"
-      @close="close"
-      @open="open"
-    >
-      <template #reference="{ toggle }">
-        <!-- <filter-icon-vue @click="toggle" :color="value ? 'cadetblue' : ''" /> -->
-        <svg-icon
-          name="mysearch"
-          size="15"
-          :color="value ? '#2C93FF' : ''"
-          @click="toggle"
-        ></svg-icon>
-      </template>
-      <template #default="{ closeF }">
+
+    <div class="myporpove" id="myinputs">
+      <!-- <el-button @click.stop="handleButtonClick"> </el-button> -->
+
+      <!-- <el-popover
+        ref="popover"
+        :title="text"
+        content="这是一段内容，这是一段内容。"
+        :visible="visible"
+      >
+        <template #reference>
+          <div style="width: 23px; height: 16px">
+            <svg-icon
+              name="mysearch"
+              size="15"
+              :color="value ? '#2C93FF' : ''"
+              @click="toggle"
+            />
+          </div>
+        </template>
         <el-select
           v-model="operator"
           class="m-2 input-select"
@@ -35,114 +37,621 @@
             :value="item.value"
           />
         </el-select>
-        <el-input
-          v-if="!type || type === 'text'"
-          v-model="value"
-          :placeholder="placeholder"
-          @keydown.enter="confirm(closeF)"
-          clearable
-        />
-        <el-input
-          v-else-if="type === 'number'"
-          v-model.number="value"
-          :placeholder="placeholder"
-          @keydown.enter="confirm(closeF)"
-          clearable
-        />
-      </template>
-    </header-popover>
+      </el-popover> -->
+
+      <header-popover
+        :popperStyle="PopperStyle"
+        :trigger="trigger"
+        :customAttribute="props.column"
+        @confirm="confirm"
+        @clear="clear"
+        @close="close"
+        @open="open"
+      >
+        <template #reference="{ toggle }">
+          <div style="width: 40px; height: 30px; line-height: 30px; display: flex">
+            <div
+              class="orders"
+              style="display: flex; flex-direction: column; width: 50%; height: 100%"
+              v-if="_ordersConfig.enableOrder"
+            >
+              <div style="cursor: pointer; height: 50%; line-height: 26px">
+                <svg-icon
+                  name="ordertop"
+                  size="15"
+                  :color="hasordersValueAsc ? '#2C93FF' : ''"
+                  :colorh="'#2C93FF'"
+                  @click="orderChangtop('asc')"
+                />
+              </div>
+              <div style="cursor: pointer; height: 50%; line-height: 20px">
+                <svg-icon
+                  name="orderbot"
+                  size="15"
+                  :color="hasordersValueDes ? '#2C93FF' : ''"
+                  :colorh="'#2C93FF'"
+                  @click="orderChangbot('des')"
+                />
+              </div>
+            </div>
+            <div
+              class="searchs"
+              style="cursor: pointer; width: 50%; height: 100%; line-height: 36px"
+              v-if="!props.disableFilter"
+            >
+              <svg-icon
+                name="mysearch"
+                size="15"
+                :color="hasValue ? '#2C93FF' : ''"
+                :colorh="'#2C93FF'"
+                @click="toggle"
+              />
+            </div>
+          </div>
+        </template>
+        <template #default="{ closeF }">
+          <el-select
+            v-if="props.type !== 'select'"
+            v-model="operator"
+            class="m-2 input-select"
+            placeholder="请选择查询类型"
+            size="default"
+          >
+            <!-- clearable -->
+            <el-option
+              v-for="item in operatorOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+
+          <el-input
+            v-if="props.type === 'number'"
+            v-model.number="value"
+            :placeholder="placeholder"
+            @keydown.enter="confirm(closeF)"
+            clearable
+          />
+          <el-input
+            v-else-if="!props.type || props.type === 'text'"
+            v-model.trim="value"
+            :placeholder="placeholder"
+            @keydown.enter="confirm(closeF)"
+            clearable
+          />
+          <el-select-v2
+            v-else-if="props.type === 'select'"
+            v-model="selectValue"
+            :placeholder="placeholder || _selectConfig.placeholder"
+            :size="_selectConfig.selectSize || 'default'"
+            :options="_selectConfig.options"
+            :clearable="_selectConfig.clearable"
+            :filterable="_selectConfig.filterable"
+            :multiple="_selectConfig.selectMultiple"
+            :collapse-tags-tooltip="_selectConfig.collapseTagsTooltip"
+            :collapse-tags="_selectConfig.collapseTags"
+            :allow-create="_selectConfig.allowCreate"
+            :default-first-option="_selectConfig.defaultFirstOption"
+            :popper-class="_selectConfig.popperClass"
+          />
+          <div class="date-picker" v-if="props.type === 'date'">
+            <el-date-picker
+              v-if="props.type === 'date' && operator === 'between'"
+              v-model="value"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :shortcuts="shortcuts"
+              size="default"
+              :style="{ width: '100%' }"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+            />
+            <el-date-picker
+              v-else-if="props.type === 'date' && operator !== 'between'"
+              v-model="value"
+              type="date"
+              :placeholder="placeholder"
+              :shortcuts="shortcutsDay"
+              size="default"
+              :style="{ width: '100%' }"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+            />
+          </div>
+        </template>
+      </header-popover>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+defineOptions({ name: 'ci-headerInput' })
 import SvgIcon from '@/components/SvgIcon.vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch, toRefs } from 'vue'
+import lodash from 'lodash'
 import headerPopover from './utils/headerPopover.vue'
-import filterIconVue from './utils/filterIcon.vue'
 import { TooltipTriggerType } from 'element-plus'
-import { useWeighingStore } from '@/store/Weighing'
-import { storeToRefs } from 'pinia'
-import { removeParamsFilters } from './utils/removeParamsFilters'
-const store = useWeighingStore()
+const popover = ref()
 
-const { params } = storeToRefs(store)
-
-const props = defineProps<{
-  text?: string
+// 定义 props 的类型
+interface SelectConfig {
+  options: any[]
   placeholder?: string
-  initValue?: string | number
-  type?: 'text' | 'number'
-  width?: number
-  trigger?: TooltipTriggerType
-  column?: string
-}>()
-const emits = defineEmits(['change', 'open'])
+  selectSize?: string
+  selectDisabled?: boolean
+  clearable?: boolean
+  filterable?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
+  selectMultiple?: boolean
+  allowCreate?: boolean
+  defaultFirstOption?: boolean
+  popperClass?: string
+  selectStyle?: string
+  selectAll?: boolean
+  selectAllLabel?: string
+  selectAllPlaceholder?: string
+  optionValue?: string
+  optionLabel?: string
+}
+// 定义排序的类型
+interface OrdersConfig {
+  enableOrder: boolean // 是否开启排序 默认false 关闭的
+  initOrder: 'true' | 'false' | '' // 默认是否升序排序 默认''
+}
+interface Props {
+  column: string // 当前列的key值
+  text: string // 表头列显示的文本
+  storePar: any // 缓存store中的params赛选参数
+  placeholder?: string // 提醒
+  initValue?: string | number // 初始值
+  disableFilter?: boolean // 是否禁用筛选功能 默认 false
+  type?: 'text' | 'number' | 'select' | 'date' // 输入框类型
+  popperStyle?: { width: string; height: string } // 弹出面板的自定义样式
+  trigger?: TooltipTriggerType // 触发方式
+  selectConfig?: SelectConfig // select下拉选项时的 配置项
+  ordersConfig?: OrdersConfig // 排序的配置项
+}
+
+// 使用 defineProps 和 withDefaults 来声明 props 并设置默认值
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  initValue: '',
+  disableFilter: false,
+  // storePar: () => {},
+  popperStyle: () => ({ width: '240px', height: '100px' }),
+  selectConfig: (): SelectConfig => ({
+    placeholder: '请选择', // 输入框的placeholder提示
+    selectSize: 'default', // 输入框的大小
+    selectDisabled: false, // 输入框的disabled属性
+    clearable: true, // 是否有清除按钮
+    filterable: true, // 是否可搜索
+    collapseTags: true, // 是否折叠tag
+    collapseTagsTooltip: true, // 是否显示tag的tooltip提示
+    selectMultiple: false, // 是否多选
+    allowCreate: false, // 是否允许创建新条目
+    defaultFirstOption: true, // 是否默认高亮第一个选项
+    popperClass: '', // popper的class类名
+    selectStyle: '', // 输入框的style样式
+    selectAll: false, // 是否显示全选按钮
+    selectAllLabel: '全选', // 全选按钮的文本
+    selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
+    options: [], //select下拉选项时的 列表数据
+    optionValue: 'value', // 选项的默认value值
+    optionLabel: 'label' // 选项的默认label值
+  })
+})
+
+// console.log('props表头', props)
+// 根据传参重置下拉列配置参数的默认值
+const _selectConfig = computed((): SelectConfig => {
+  let obj = {
+    placeholder: '请选择', // 输入框的placeholder提示
+    selectSize: 'default', // 输入框的大小
+    selectDisabled: false, // 输入框的disabled属性
+    clearable: true, // 是否有清除按钮
+    filterable: true, // 是否可搜索
+    collapseTags: true, // 是否折叠tag
+    collapseTagsTooltip: true, // 是否显示tag的tooltip提示
+    selectMultiple: false, // 是否多选
+    allowCreate: false, // 是否允许创建新条目
+    defaultFirstOption: true, // 是否默认高亮第一个选项
+    popperClass: '', // popper的class类名
+    selectStyle: '', // 输入框的style样式
+    selectAll: false, // 是否显示全选按钮
+    selectAllLabel: '全选', // 全选按钮的文本
+    selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
+    options: [], //select下拉选项时的 列表数据
+    optionValue: 'value', // 选项的默认value值
+    optionLabel: 'label' // 选项的默认label值
+  }
+  return lodash.assign(obj, props.selectConfig || {})
+})
+
+// 根据传参重置排序配置参数的默认值
+const _ordersConfig = computed((): OrdersConfig => {
+  let obj = {
+    enableOrder: false, // 是否开启排序 默认 false  关闭的
+    initOrder: '' // 默认是否升序排序 默认不排序''
+  }
+  return lodash.assign(obj, props.ordersConfig)
+})
+
+// sql语句中的比较运算符号列表 operator
+const operatorOptions = ref<
+  {
+    value: string
+    label: string
+    disabled?: boolean
+  }[]
+>([
+  {
+    value: 'like',
+    label: '包含'
+  },
+  {
+    value: '=',
+    label: '等于'
+  },
+  {
+    value: '>',
+    label: '大于'
+  },
+  {
+    value: '>=',
+    label: '大于等于'
+  },
+  {
+    value: '<',
+    label: '小于'
+  },
+  {
+    value: '<=',
+    label: '小于等于'
+  },
+  {
+    value: '<>',
+    label: '不等于'
+  },
+  {
+    value: 'between',
+    label: '介于'
+  }
+])
+
+// 定义 emits
+const emits = defineEmits(['change', 'open', 'getstore'])
+
 const initValue = computed(() => {
   if (props.type === 'text') return String(props.initValue) || void 0
   return Number(props.initValue) || void 0
 })
-const value = ref<string | number | undefined>(initValue.value)
+
+const internalPopperStyle = ref(props.popperStyle) // 创建一个响应式的样式对象
+const PopperStyle = computed(() => internalPopperStyle.value) // 创建计算属性，返回响应式的样式对象
+//  修改 PopperStyle 值的函数
+const updatePopperStyle = (newStyle: Partial<typeof internalPopperStyle.value>) => {
+  // 使用 Object.assign 来合并新样式和旧样式
+  Object.assign(internalPopperStyle.value, newStyle)
+}
+
+const hasValue = ref(false) // 判断store中对应列的value是否有值的参数
+const hasordersValueAsc = ref(false) // 判断升序按钮是否有值
+const hasordersValueDes = ref(false) // 判断降序按钮是否有值
+
+const value = ref<any>(initValue.value) // 定义筛选输入框的值
+const operator = ref('like') // 运算符默认值
+// 定义排序的值
+const ordersVal = ref<string | number | undefined>(_ordersConfig.value.initOrder || '')
+const selectValue = ref<any>(initValue.value) // 定义select的值
+
+// 1、判断：如果是select下拉列表，就隐藏比较运算符选项框，直接赋值'='
+if (props.type === 'select') {
+  operator.value = '='
+  // 如果单选，给出默认值
+  if (!props.selectConfig.selectMultiple && props.selectConfig.optionValue) {
+    value.value = props.selectConfig.optionValue
+  }
+  // 如果为多选将运算符默认值改成'in'，将多选的数组值转换成字符串
+  if (props.selectConfig.selectMultiple) {
+    operator.value = 'in'
+  }
+  // 将面板宽度调整宽一些
+  // 判断props.popperStyle的宽度是否为小于300px，如果是就修改为300px
+  if (props.popperStyle.width && parseInt(props.popperStyle.width.replace('px', '')) < 300) {
+    updatePopperStyle({ width: '300px' })
+  }
+}
+
+// console.log('PopperStyle.value', PopperStyle.value, props.popperStyle)
+
+// 2、 判断：如果是date日期，就隐藏比较运算符选项框，直接赋值'='
+const shortcuts = ref<{ text: string; value: any }[]>([])
+const shortcutsDay = ref<{ text: string; value: any }[]>([])
+if (props.type === 'date') {
+  operator.value = 'between'
+  // 将包含禁用
+  operatorOptions.value[0].disabled = true
+  // 判断是否是日期范围
+  shortcuts.value = [
+    {
+      text: '前一周',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        return [start, end]
+      }
+    },
+    {
+      text: '前一月',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        return [start, end]
+      }
+    },
+    {
+      text: '最近3个月',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        return [start, end]
+      }
+    }
+  ]
+  shortcutsDay.value = [
+    {
+      text: '今天',
+      value: new Date()
+    },
+    {
+      text: '昨天',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() - 3600 * 1000 * 24)
+        return date
+      }
+    },
+    {
+      text: '一周前',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+        return date
+      }
+    }
+  ]
+}
+// 不是日期筛选的时候将介于禁用
+if (props.type !== 'date') {
+  operatorOptions.value[7].disabled = true
+}
+
+// 监听operator.value的变化重置value的值
+watch(operator, (newVal, oldVal) => {
+  console.log('operator.value: ', newVal, oldVal)
+  if (newVal == 'between' || oldVal == 'between') {
+    value.value = ''
+  }
+})
 
 // 返回面板数据
 const confirm = (closeF?: Function) => {
-  console.log('当前的params', params)
-  // if (value.value) {
-  emits('change', {
+  if (props.selectConfig.selectMultiple) {
+    operator.value = 'in'
+    value.value = selectValue.value?.join(',') || ''
+  } else {
+    operator.value = '='
+    value.value = selectValue.value
+  }
+  // 将当前参数的值放到对象中
+  let obj = {
     value: value.value,
     operator: operator.value,
     column: props.column,
-  })
+    type: 'filter'
+  }
+
+  // 判断input输入框中的值是否为空
+
+  emits('change', obj)
   closeF && closeF()
 }
 
 // 清除按钮：清空输入框和发送请求
 const clear = () => {
-  console.log('执行清除')
-  const go =
-    initValue.value !== void 0 &&
-    initValue.value !== null &&
-    initValue.value !== ''
-  // 清除输入框数据
   value.value = void 0
-  operator.value = void 0
-  // 清除缓存的数据
-  removeParamsFilters(store.params.filters, props.column)
-  if (go) confirm()
+  confirm()
 }
 
 // 关闭面板
-const close = () => {
-  console.log('关闭面板123', value.value, initValue.value, store.params.filters)
-  // if (value.value !== initValue.value) {
-  //   value.value = initValue.value
-  // }
-}
+const close = () => {}
 const open = () => {
   emits('open')
 }
-const operator = ref('')
-const options = ref([
-  {
-    value: 'like',
-    label: '包含',
-  },
-  {
-    value: '=',
-    label: '等于',
-  },
-  {
-    value: '>',
-    label: '大于',
-  },
-  {
-    value: '<',
-    label: '小于',
+/*
+const handleShow = () => {
+  console.log('打开')
+  visible.value = true
+  document.addEventListener('mousedown', handleDocumentClick)
+}
+const handleHide = () => {
+  console.log('关闭')
+  visible.value = false
+  document.removeEventListener('mousedown', handleDocumentClick)
+}
+
+const handleDocumentClick = (e: any) => {
+  // 查找所有的class名称为 is-light 的元素
+  // const el1 = document.querySelector('.is-light')
+  // console.log('el1: ', el1)
+
+  const elements = document.querySelectorAll('[id^="el-popper-container-"]')
+  console.log('elements: ', elements)
+
+  if (elements && elements.length > 0) {
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i]
+      console.log('element: ', element)
+      if (element?.contains(e.target)) {
+        return
+      }
+    }
+  }
+
+  // 通过自定义属性 aria-label 查找元素
+  const el = document.querySelector(`[aria-label="${props.text}"]`)
+  console.dir('el: ', el)
+  // 获取 el 的class为.is-light的兄弟元素
+  const el2 = el?.parentElement?.querySelector('.el-select__popper')
+  console.dir('el2: ', el2)
+  console.log('是否包含: ', el?.contains(e.target))
+  // 获取class为 porpove的元素;
+
+  // 判断点击的元素是否是是e的子元素
+  if (el?.contains(e.target)) {
+    return
+  }
+  if (!popover.value.$el.contains(e.target)) {
+    console.log(22222)
+    handleHide()
+  }
+}
+
+const visible = ref(false)
+// const toggle = () => {
+//   console.log('visible', visible.value)
+//   if (visible.value) {
+//     // visible.value = false
+//   } else {
+//     visible.value = true
+//     document.addEventListener('mousedown', handleDocumentClick)
+//     lodash.debounce(() => handleShow(), 500)
+//   }
+// }
+*/
+// 排序
+const orderChangtop = (val: string) => {
+  console.log('升序', ordersVal.value)
+  if (ordersVal.value == '' || ordersVal.value == 'false') {
+    ordersVal.value = 'true'
+    return emits('change', {
+      column: props.column,
+      asc: ordersVal.value,
+      type: 'order'
+    })
+  }
+  if (ordersVal.value == 'true') {
+    ordersVal.value = ''
+    return emits('change', {
+      column: props.column,
+      asc: ordersVal.value,
+      type: 'order'
+    })
+  }
+}
+const orderChangbot = (val: string) => {
+  console.log('降序', ordersVal.value)
+  if (ordersVal.value == 'false') {
+    ordersVal.value = ''
+    return emits('change', {
+      column: props.column,
+      asc: ordersVal.value,
+      type: 'order'
+    })
+  }
+  if (ordersVal.value == '' || ordersVal.value == 'true') {
+    ordersVal.value = 'false'
+    return emits('change', {
+      column: props.column,
+      asc: ordersVal.value,
+      type: 'order'
+    })
+  }
+}
+
+// 监听 props.storePar 的filters 和 orders属性 然对应按钮颜色是否改变
+watch(
+  () => props.storePar,
+  (newVal, oldVal) => {
+    // console.log('监听props.storePar', newVal, oldVal)
+    if (newVal.filters) {
+      // 判断是否是当前列的筛选条件
+      const filter = newVal.filters.find((item: any) => item.column == props.column)
+      if (filter) {
+        // console.log('filter: ', filter.value)
+        // 判断是否是当前列的筛选条件
+        if (filter.value) {
+          hasValue.value = true
+        } else {
+          hasValue.value = false
+        }
+      } else {
+        hasValue.value = false
+      }
+    }
+    if (newVal.orders) {
+      // 判断是否是当前列的筛选条件
+      const order = newVal.orders.find((item: any) => item.column == props.column)
+      if (order) {
+        // console.log('order: ', order.asc)
+        // 判断是否是当前列的筛选条件
+        if (order.asc == 'true') {
+          hasordersValueAsc.value = true
+          hasordersValueDes.value = false
+        } else if (order.asc == 'false') {
+          hasordersValueAsc.value = false
+          hasordersValueDes.value = true
+        }
+      } else {
+        hasordersValueAsc.value = false
+        hasordersValueDes.value = false
+      }
+    }
   },
   {
-    value: '<>',
-    label: '不等于',
-  },
-])
+    deep: true,
+    immediate: true
+  }
+)
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.porpove {
+  position: relative;
+  .header-input-popover {
+    position: absolute;
+
+    height: 100px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+
+    top: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2081;
+    position: absolute;
+    inset: 159px auto auto 305px;
+    width: 230px;
+    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    // &::before {
+    //   content: '';
+    //   position: absolute;
+    //   top: -10px;
+    //   left: 50%;
+    //   transform: translateX(-50%);
+    //   border: 5px solid transparent;
+    // }
+  }
+}
+</style>