ci-plus 1.0.1

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './button';
+export * from './icon';
+export * from './buttons';
+export * from './dailog';
+export * from './ccapp';

package/src/sortableTable/headButtons.vue

@@ -0,0 +1,25 @@
+<!-- /*
+* @module headButtons
+* @author : 卖女孩的小火柴
+* @description : 表头按钮组件
+* @version : 1.0.0
+* @since : 创建时间 2023-12-26 14:18:14
+*/ -->
+
+<template>
+  <div class="cl-buttons">
+    <div>
+      <slot name="left"></slot>
+    </div>
+    <div>
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.cl-buttons {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px;
+}
+</style>

package/src/sortableTable/headerCheckBox.vue

@@ -0,0 +1,74 @@
+<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' : ''"
+        />
+      </template>
+      <el-checkbox-group v-model="value">
+        <el-checkbox
+          v-for="v in choices"
+          :key="v.value"
+          :label="v.label"
+          :disable="v.disable"
+        />
+      </el-checkbox-group>
+    </header-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import headerPopover from './utils/headerPopover.vue'
+import filterIconVue from './utils/filterIcon.vue'
+import { TooltipTriggerType } from 'element-plus'
+const props = defineProps<{
+  text?: string
+  initValue?: string
+  choices?: { label: string; value: any; disable?: boolean }[]
+  width?: number
+  trigger?: TooltipTriggerType
+}>()
+const emits = defineEmits(['change', 'open'])
+const initValue = computed(() => {
+  return props.initValue ? JSON.parse(props.initValue) : []
+})
+const value = ref<string[]>(initValue.value)
+const choice = computed(() => {
+  const tem = {} as Record<string, any>
+  if (props.choices) props.choices.forEach((v) => (tem[v.label] = v.value))
+  return tem
+})
+const confirm = () => {
+  const ret = [] as any[]
+  value.value.forEach((v) => {
+    if (choice.value.hasOwnProperty(v)) ret.push(choice.value[v])
+  })
+  emits('change', JSON.stringify(ret))
+}
+const clear = () => {
+  const go = initValue.value.length
+  value.value = []
+  if (go) confirm()
+}
+const close = () => {
+  if (value.value !== initValue.value) {
+    value.value = initValue.value
+  }
+}
+const open = () => {
+  emits('open')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/src/sortableTable/headerInput.vue

@@ -0,0 +1,148 @@
+<!-- @format -->
+
+<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 }">
+        <el-select
+          v-model="operator"
+          class="m-2 input-select"
+          placeholder="请选择查询类型"
+          size="default"
+          clearable
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import { computed, ref } from 'vue'
+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 { params } = storeToRefs(store)
+
+const props = defineProps<{
+  text?: string
+  placeholder?: string
+  initValue?: string | number
+  type?: 'text' | 'number'
+  width?: number
+  trigger?: TooltipTriggerType
+  column?: string
+}>()
+const emits = defineEmits(['change', 'open'])
+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 confirm = (closeF?: Function) => {
+  console.log('当前的params', params)
+  // if (value.value) {
+  emits('change', {
+    value: value.value,
+    operator: operator.value,
+    column: props.column,
+  })
+  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()
+}
+
+// 关闭面板
+const close = () => {
+  console.log('关闭面板123', value.value, initValue.value, store.params.filters)
+  // if (value.value !== initValue.value) {
+  //   value.value = initValue.value
+  // }
+}
+const open = () => {
+  emits('open')
+}
+const operator = ref('')
+const options = ref([
+  {
+    value: 'like',
+    label: '包含',
+  },
+  {
+    value: '=',
+    label: '等于',
+  },
+  {
+    value: '>',
+    label: '大于',
+  },
+  {
+    value: '<',
+    label: '小于',
+  },
+  {
+    value: '<>',
+    label: '不等于',
+  },
+])
+</script>
+
+<style scoped lang="scss"></style>

package/src/sortableTable/headerRange.vue

@@ -0,0 +1,108 @@
+<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="left || right ? 'cadetblue' : ''"
+        />
+      </template>
+      <template v-if="!type || type === 'default'">
+        <el-input
+          style="width: 100%"
+          v-model="left"
+          :placeholder="placeholder"
+          @keydown.enter="confirm"
+          clearable
+        />
+        ~
+        <el-input
+          style="width: 100%"
+          v-model="right"
+          :placeholder="rightProp?.placeholder ?? placeholder"
+          @keydown.enter="confirm"
+          clearable
+        />
+      </template>
+      <template v-else-if="type === 'date'">
+        <el-date-picker
+          style="width: 100%"
+          v-model="left"
+          type="date"
+          :placeholder="placeholder"
+          :shortcuts="shortcuts as any"
+          :value-format="valueFormat || 'YYYY-MM-DD'"
+        />
+        ~
+        <el-date-picker
+          style="width: 100%"
+          v-model="right"
+          type="date"
+          :placeholder="rightProp?.placeholder ?? placeholder"
+          :shortcuts="(rightProp?.shortcuts ?? shortcuts) as any"
+          :value-format="rightProp?.valueFormat || valueFormat || 'YYYY-MM-DD'"
+        />
+      </template>
+    </header-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import headerPopover from './utils/headerPopover.vue'
+import filterIconVue from './utils/filterIcon.vue'
+import { TooltipTriggerType } from 'element-plus'
+import { Shortcuts } from './utils/dateShortcuts'
+type InputConfig = {
+  placeholder?: string
+  shortcuts?: Shortcuts
+  valueFormat?: string
+}
+const prop = defineProps<{
+  text?: string
+  rightProp?: InputConfig
+  placeholder?: InputConfig['placeholder']
+  shortcuts?: InputConfig['shortcuts']
+  valueFormat?: InputConfig['valueFormat']
+  initValue?: string
+  type?: 'default' | 'date' | 'dateTime'
+  width?: number
+  trigger?: TooltipTriggerType
+}>()
+const emits = defineEmits(['change', 'open'])
+const initValue = computed(() => {
+  return prop.initValue ? JSON.parse(prop.initValue) : []
+})
+const left = ref<string | undefined>(initValue.value[0])
+const right = ref<string | undefined>(initValue.value[1])
+const confirm = () => {
+  emits('change', JSON.stringify([left.value ?? '', right.value ?? '']))
+}
+const clear = () => {
+  const go = initValue.value.length && (left.value || right.value)
+  left.value = void 0
+  right.value = void 0
+  if (go) confirm()
+}
+const close = () => {
+  if (left.value !== initValue.value[0]) {
+    left.value = initValue.value[0]
+  }
+  if (right.value !== initValue.value[1]) {
+    right.value = initValue.value[1]
+  }
+}
+const open = () => {
+  emits('open')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/src/sortableTable/headerSelectV2.vue

@@ -0,0 +1,178 @@
+<!-- @format -->
+
+<template>
+  <div style="display: flex; align-items: center; justify-content: center">
+    <span>{{ text }}</span>
+    <header-popover
+      :width="width"
+      :trigger="trigger"
+      :loading="loading"
+      @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>
+        <el-select-v2
+          v-model="value"
+          :placeholder="placeholder"
+          :options="options"
+          filterable
+          clearable
+          :multiple="multiple"
+          :collapse-tags-tooltip="multiple"
+          :collapse-tags="multiple"
+          :props="props"
+          :style="{ width: '95%' }"
+        >
+          <slot></slot>
+        </el-select-v2>
+      </template>
+    </header-popover>
+  </div>
+</template>
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import { computed, ref } from 'vue'
+import headerPopover from './utils/headerPopover.vue'
+import filterIconVue from './utils/filterIcon.vue'
+import { Props } from 'element-plus/es/components/select-v2/src/useProps'
+import { TooltipTriggerType } from 'element-plus'
+import { useWeighingStore } from '@/store/Weighing'
+import { removeParamsFilters } from './utils/removeParamsFilters'
+const store = useWeighingStore()
+
+type SelectType = string | number | undefined | (number | string)[]
+const prop = defineProps<{
+  text?: string
+  placeholder?: string
+  initValue?: string | number
+  width?: number
+  trigger?: TooltipTriggerType
+  valueNumber?: boolean
+  // 如果使用内置获取数据方法
+  retData?: () => Promise<any[]>
+  error?: (msg: any) => void
+  finally?: () => void
+  props?: Props
+  multiple?: boolean
+  column: string // 列名称
+}>()
+const emits = defineEmits(['change', 'open'])
+const initValue = computed<SelectType>(() => {
+  if (prop.multiple) {
+    const tem = prop.initValue ? JSON.parse(prop.initValue as string) : []
+    if (prop.valueNumber) tem.map(Number)
+    return tem
+  }
+  if (prop.valueNumber) return Number(prop.initValue)
+  return prop.initValue
+})
+console.log('888initValue', initValue)
+const value = ref<SelectType>(initValue.value)
+const loading = ref(false)
+const options = ref<any[]>([])
+const operator = ref<string>('=')
+// @ts-nocheck
+const confirm = () => {
+  let filters = {
+    value: prop.multiple
+      ? // @ts-expect-error
+        value.value && value.value.length > 0
+        ? JSON.stringify(value.value)
+        : null
+      : value.value,
+    operator: prop.multiple ? 'in' : '=', // 查询类型:单选为=,多选为in
+    column: prop.column, // 列名称
+  }
+  // 有值才执行确定函数
+  console.log('value.value', value.value)
+  // @ts-expect-error
+  if (prop.multiple && value.value.length > 0) {
+    emits('change', filters)
+  } else {
+    console.log('请选择数据')
+  }
+  if (!prop.multiple && value.value) {
+    emits('change', filters)
+  } else {
+    console.log('请选择数据')
+  }
+}
+
+// 清除函数：清空value 和发送空请求
+const clear = () => {
+  let go =
+    initValue.value !== void 0 &&
+    initValue.value !== null &&
+    initValue.value !== ''
+  if (prop.multiple) go = go && (initValue.value as any[]).length > 0
+  value.value = initValue as any
+  emits('change', {
+    value: prop.multiple ? [] : '',
+    operator: prop.multiple ? 'in' : '=', // 查询类型:单选为=,多选为in
+    column: prop.column, // 列名称
+  })
+
+  // 清除缓存的数据
+  removeParamsFilters(store.params.filters, prop.column)
+  if (go) confirm()
+
+  // value.value = initValue as any
+  // emits('change', {
+  //   value: prop.multiple ? [] : '',
+  //   operator: prop.multiple ? 'in' : '=', // 查询类型:单选为=,多选为in
+  //   column: prop.column, // 列名称
+  // })
+
+  // console.log('清除后的值', value.value)
+}
+const close = () => {
+  // if (prop.multiple) {
+  //   if ((value.value as any[]).length !== (initValue.value as any[]).length) {
+  //     value.value = initValue.value
+  //   } else {
+  //     for (let i = 0; i < (value.value as any[]).length; i++) {
+  //       const v = (value.value as any[])[i]
+  //       if (!(initValue.value as any[]).includes(v)) {
+  //         value.value = initValue.value
+  //         break
+  //       }
+  //     }
+  //   }
+  // } else {
+  //   if (value.value !== initValue.value) {
+  //     value.value = initValue.value
+  //   }
+  // }
+  // console.log('关闭面板V2', value.value, initValue.value, store.params.filters)
+  console.log('关闭面板V2', store.params.filters)
+}
+const open = () => {
+  if (prop.retData) {
+    loading.value = true
+    prop
+      .retData()
+      .then((val) => {
+        options.value = val
+      })
+      .catch(prop.error)
+      .finally(() => {
+        prop.finally?.()
+        loading.value = false
+      })
+  }
+  emits('open')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/src/sortableTable/sortableTable.ts

@@ -0,0 +1,4 @@
+import _sortableTable from './sortableTable.vue';
+import { withInstall } from '../utils/index';
+export const sortableTable = withInstall(_sortableTable);
+export default sortableTable;