ci-plus 1.8.8 → 1.9.0

package/README.md

@@ -1,6 +1,11 @@
 ## 历史更新
 
 ```js
+1.9.0
+  1、uploadV4.vue组件基础上，新增uploadV5.vue组件(新增功能：配置默认选中归属公司选项)
+1.8.9
+  1、更新uploadV4.vue组件命名重复
+  2、优化一些其他bug
 1.8.7
   1、删除旧标识卡用到的两个函数导出
   2、添加表头设置表单的翻译

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {

package/src/components.d.ts

@@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
     CiUploadV2: typeof components.UploadV2
     CiUploadV3: typeof components.UploadV3
     CiUploadV4: typeof components.UploadV4
+    CiUploadV5: typeof components.UploadV5
 
     CiSelect: typeof components.Select
     CiSelectTable: typeof components.SelectTable

package/src/fileRelated/index/ciuploadV5.ts

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

package/src/fileRelated/uploadV4.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'ci-uploadV3' })
+defineOptions({ name: 'ci-uploadV4' })
 
 // 定义一个函数，用于处理字符串
 

package/src/fileRelated/uploadV5.vue

@@ -0,0 +1,450 @@
+<!-- /**
+* @module uploadV4
+* @author : 卖女孩的小火柴
+* !description : 其它入库 导入组件
+* @version : 1.0.0
+* @since : 创建时间 2025-08-14 14:36:38
+*/ -->
+
+<template>
+  <el-popover
+    placement="bottom"
+    :width="300"
+    :trigger="props.otherConfig?.trigger || 'hover'"
+    :visible="visible"
+  >
+    <el-upload
+      ref="upload"
+      class="upload-demo"
+      :action="uploadUrl"
+      :limit="mylimit || 1"
+      :on-exceed="handleExceed"
+      :auto-upload="false"
+      :on-success="onSuccess"
+      :on-error="onError"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
+      :data="datas"
+      :multiple="mymultiple || false"
+      v-model:file-list="fileList"
+    >
+      <template #trigger>
+        <el-button size="small" type="primary" style="width: 100%" plain>
+          {{ t('fileRelated.selectFile') }}
+        </el-button>
+      </template>
+      <el-button
+        size="small"
+        @click="formwork"
+        style="float: left; margin: 0 12px 0 0; width: 95px"
+        v-if="url"
+      >
+        {{ t('fileRelated.downloadTemplate') }}
+      </el-button>
+    </el-upload>
+
+    <div class="slot" style="display: flex; flex-direction: column; align-items: flex-end">
+      <div style="width: 100%; margin: 4px 2px" v-if="ifShowAffiliation">
+        <el-select-v2
+          size="small"
+          v-model="affiliationAll"
+          filterable
+          :options="affiliationOptions"
+          :placeholder="t('fileRelated.selectCompany')"
+          style="width: 100%; margin-right: 5px"
+          clearable
+          @change="changeAll"
+        />
+      </div>
+      <div style="width: 100%; margin: 4px 2px" v-if="ifShowWarehouse">
+        <el-select-v2
+          size="small"
+          v-model="warehouseAll"
+          filterable
+          :options="warehouseOptions"
+          :placeholder="t('fileRelated.selectWarehouse')"
+          style="width: 100%; margin-right: 5px"
+          clearable
+          @change="changeWarehouseAll"
+        />
+      </div>
+      <!-- 添加一个插槽 -->
+      <slot></slot>
+      <div>
+        <el-button size="small" type="primary" @click="submitUpload" style="flex: 2">
+          {{ t('fileRelated.upload') }}
+        </el-button>
+      </div>
+    </div>
+
+    <template #reference>
+      <el-button
+        :type="exporLoading ? 'danger' : 'success'"
+        @click="visible = !visible"
+        :size="props.otherConfig?.size || 'small'"
+        :loading="exporLoading"
+      >
+        {{ props.title || t('fileRelated.attachmentUpload') }}
+      </el-button>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ci-uploadV5' })
+
+// 定义一个函数，用于处理字符串
+
+const setFilePath = (arr: string[], url?: string) => {
+  // console.log('重新渲染数据', arr);
+  if (arr && arr.length > 0) {
+    let newArr: { name: string; oldName: string }[] = []
+    arr.forEach((item, i) => {
+      let segments = item.split('.')
+      let parts = segments[0].split('/') // 获取每名称
+      let name = parts[parts.length - 1] + '.' + segments[segments.length - 1]
+      let oldName = url ? url + item : item //原来的名称
+      // let url = segments[0] + '.' + segments[segments.length - 1]
+      newArr.push({ name, oldName })
+    })
+    return newArr
+  } else {
+    return [] // 如果数组为空，则返回空数组
+  }
+}
+
+// 将路径处理成附件的参数
+const fileArr = (url: string, pathArr: string[]) => {
+  if (pathArr && pathArr.length > 0) {
+    let objArr: any = []
+    if (pathArr.length > 0) {
+      pathArr.map((item: any) => {
+        objArr.push({
+          name: item.name,
+          oldName: item.oldName,
+          url: url + item.oldName
+        })
+      })
+      return objArr
+    } else {
+      return []
+    }
+  }
+}
+import t from '../utils/lang/index'
+import ajaxBox from '../utils/ajaxBox'
+import { getAffiliationOptions, getWarehouseList, axios } from '../utils/getAffiliationOptions.ts'
+import type { AxiosRequestConfig } from 'axios'
+import { computed, onMounted, ref } from 'vue'
+// import t from '@/views/MaterialWarehouse/lang'
+// import ajaxBox from '@/views/MaterialWarehouse/utils/ajaxBox'
+// import { getAffiliationOptions, getWarehouseList, axios } from '@/views/MaterialWarehouse/utils/getAffiliationOptions.ts'
+
+import type {
+  UploadFile,
+  UploadFiles,
+  UploadInstance,
+  UploadProps,
+  UploadUserFile
+} from 'element-plus'
+import {
+  ElButton,
+  ElLoading,
+  ElMessage,
+  ElPopover,
+  ElSelectV2,
+  ElUpload,
+  genFileId,
+  UploadRawFile
+} from 'element-plus'
+
+const upload = ref<UploadInstance>()
+const exporLoading = ref(false)
+const visible = ref(false)
+const affiliationAll = ref() // 选择的归属公司
+const warehouseAll = ref() // 选择的仓库
+const affiliationOptions = ref<any[]>([]) // 获取归属公司列表数据
+const warehouseOptions = ref<any[]>([]) // 获取仓库列表数据
+
+interface Props {
+  url?: string // 上传和下载模板的接口(当需要将附件传递回父组件时不需要传递此属性)
+  uploadUrl?: string // 上传附件的接口
+  parameter?: Object // 模板下载的时候请求需要携带的参数：{state: 1}
+  data?: any //上传携带的其他数据对象:{userId: 1, userName: '张三'}
+  title?: string // 上传按钮的名称
+  multiple?: boolean // 是否支持多文件
+  limit?: number // 最大文件数量
+  ifShowAffiliation?: boolean // 是否显示归属公司
+  requiredAffiliation?: boolean // 是否必选归属公司
+  ifShowWarehouse?: boolean // 是否显示仓库
+  requiredWarehouse?: boolean // 是否必选仓库
+  ifDefaultAffiliation?: boolean // 是否默认选中归属工厂默认值true
+  defaultAffiliationOrgid?: string // 默认选中归属工厂的 orgid(默认值当前登陆账号的单位)
+  filePath?: UploadFile[] //UploadRawFile[] // 父组件传递的附件数据，用于显示附件列表和上传附件后传递给父组件附件数据
+  RowIndex?: number // 父组件传递的行索引，用于父组件中删除了附件找到对应的行(用于表格表单中上传附件)
+  templateName?: string //模板名称
+  timeOn?: boolean // 是否开启耗时任务 默认不开启
+  // 其他的一些配置:请求的baseurl地址,有耗时任务的时候耗时任务的配置,模板下载的一些配置等
+  otherConfig: {
+    size?: 'large' | 'default' | 'small' // 按钮大小
+    trigger?: 'click' | 'focus' | 'hover' | 'contextmenu' // 按钮触发方式 默认 hover
+    baseUrl?: string // 上请求的baseurl地址
+    datakey: string // 耗时请求的参数key值
+    // 耗时任务的配置
+    timeConfig: {
+      url: string // 查询耗时任务地址
+      method: 'put' | 'post' | 'get' | 'PUT' | 'POST' | 'GET'
+      data?: object // 可选属性
+      params?: object // 可选属性
+    }
+  }
+}
+const props = defineProps<Props>()
+
+// 默认值：是否显示归属公司
+const ifShowAffiliation = computed(() => {
+  return props.ifShowAffiliation || true
+})
+// 默认值：是否显示仓库
+const ifShowWarehouse = computed(() => {
+  return props.ifShowWarehouse || false
+})
+// 默认值：是否必选归属公司
+const requiredAffiliation = computed(() => {
+  return props.requiredAffiliation || false
+})
+// 默认值：是否必选仓库
+const requiredWarehouse = computed(() => {
+  return props.requiredWarehouse || false
+})
+
+// 是否默认选中归属工厂(默认值true)
+const ifDefaultAffiliation = computed(() => {
+  return props.ifDefaultAffiliation || true
+})
+
+// 获取本地缓存中当前登陆账号的公司
+const raw = localStorage.getItem('UserData')
+const UserData = raw ? JSON.parse(raw) : {}
+const defaultAffiliationOrgid = computed(() => {
+  return props.defaultAffiliationOrgid || UserData?.resOrgId // 默认登陆账号的单位
+})
+
+const emits = defineEmits<{
+  (e: 'reloadTable'): void // 组件中上传附件后刷新父组件表格数据方法
+  (e: 'getFile', files: UploadFiles, file?: UploadFile, rowindex?: number): void // 编辑表单的时候回显附件用到
+  (e: 'update:file', files: UploadFiles): void // 编辑表单的时候回显附件用到
+}>()
+console.log('附件props: ', props)
+const datas: any = ref(props.data)
+const mymultiple = ref<boolean>(props.multiple)
+const mylimit = ref<number>((props.limit as number) || 1)
+const myfilePath = ref<any>(props.filePath || [])
+console.log('myfilePath: ', props.filePath)
+
+const changeAll = (val: string) => {
+  datas.value.factory_affiliation_id = val
+  datas.value.factory_affiliation_name = affiliationOptions.value.find(
+    (item: any) => item.value === val
+  )?.label
+}
+
+const changeWarehouseAll = (val: string) => {
+  datas.value.warehouse_id = val
+  datas.value.warehouse_name = warehouseOptions.value.find((item: any) => item.value === val)?.label
+
+  console.log('%c Line:236 🍐 datas.value', 'color:#ea7e5c', datas.value)
+}
+
+// 对数组中的每个字符串应用处理函数
+let pathArr = setFilePath(myfilePath.value)
+
+// 打印处理后的数组
+// 将父组件中传递过来的名称，处理成el-upload需要的格式
+let pathUrlArr = fileArr(import.meta.env.VITE_BASE_URL9999, pathArr)
+console.log('fileObj(): ', pathUrlArr)
+const fileList = ref<UploadUserFile[]>(pathUrlArr)
+console.log('fileList: ', fileList.value)
+
+//当超出限制时，执行的钩子函数
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  console.log('%c Line:177 🥝 files', 'color:#e41a6a', files)
+
+  if (mylimit?.value === 1) {
+    upload.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    upload.value!.handleStart(file)
+  }
+  if (mylimit?.value > 1) {
+    console.log('超出限制: ', files)
+    ElMessage.warning(
+      `${t('fileRelated.exceedFiles')} ${mylimit?.value} ${t('fileRelated.reselect')}`
+    )
+  }
+}
+
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const handleChange = (file: any, fileLists: any) => {
+  if (!props.url) {
+    emits('getFile', fileLists) //将选中的文件传递回父组件
+    emits('update:file', fileLists) //同步父组件绑定的附件字段，以便父组件提交表单的时候一起将附件提交
+  }
+}
+// 文件列表删除时
+const handleRemove: UploadProps['onRemove'] = (file, fileList) => {
+  console.log('file: ', file)
+  console.log('fileList: ', fileList)
+  // 如果没有url时 在删除的时候将文件流同步回父组件
+  if (!props.url) {
+    emits('getFile', fileList, file, props.RowIndex)
+    emits('update:file', fileList)
+  }
+}
+//上传文件
+const submitUpload = () => {
+  if (!fileList.value || !fileList.value.length) {
+    return ElMessage.warning(t('fileRelated.pleaseFile'))
+  }
+  console.log(fileList.value.length)
+  if (!datas.value.warehouse_id && requiredWarehouse.value) {
+    return ElMessage.warning(t('fileRelated.pleaseSelectWarehouse'))
+  }
+  if (!datas.value.factory_affiliation_id && requiredAffiliation.value) {
+    return ElMessage.warning(t('fileRelated.selectCompany'))
+  }
+  // exporLoading.value = ElLoading.service({ text: t('fileRelated.importing') })
+  exporLoading.value = true
+  console.log('upload.value', upload.value)
+  upload.value!.submit()
+  visible.value = false
+}
+//文件上传成功回调
+const onSuccess = async (res: any, file: any, fileList: any) => {
+  console.log('fileList: ', fileList)
+  console.log('file: ', file)
+  console.log('上传成功回调: ', res)
+  // exporLoading.value.close() // 关闭加载动画
+  if (res.code !== 200) {
+    upload.value!.clearFiles() // 清空文件列表
+    // exporLoading.value.close() // 关闭加载动画
+    exporLoading.value = false
+    return ElMessage.warning(res.msg)
+  }
+
+  // 判断是否要走耗时逻辑
+  if (!props.timeOn || !res.data) {
+    upload.value!.clearFiles() // 清空文件列表
+    visible.value = false // 关闭上传面板
+    // exporLoading.value.close() // 关闭加载动画
+    exporLoading.value = false
+    ElMessage.success(res.msg)
+    emits('reloadTable')
+    return
+  }
+
+  // 处理耗时请求的参数
+  let datas = {}
+  datas[props.otherConfig?.datakey] = res.data.task_id
+  // 耗时轮训
+  const data = await askForTask(datas)
+  console.log('data: ', data)
+  if (data.code === 200) {
+    // fileList.value.length = 0 // 清空文件列表
+    upload.value!.clearFiles() // 清空文件列表
+    visible.value = false // 关闭上传面板
+    // exporLoading.value.close() // 关闭加载动画
+    exporLoading.value = false
+    ElMessage.success(data.msg)
+    emits('reloadTable')
+  } else if (data.code === 0) {
+    upload.value!.clearFiles() // 清空文件列表
+    exporLoading.value = false
+    ElMessage.error(data.msg || '导入失败')
+    // exporLoading.value.close() // 关闭加载动画
+  } else {
+    ElMessage.error(data.msg || '请求超时或者其他错误,请联系管理员.')
+  }
+}
+//文件上传失败回调
+const onError = (response: any, file: any, fileList: any) => {
+  console.log('上传失败回调: ', response)
+  ElMessage.error(file.name + t('fileRelated.uploadFailed'))
+  // fileList.value.length = 0 // 清空文件列表
+  upload.value!.clearFiles() // 清空文件列表
+  visible.value = false // 关闭上传面板
+  // exporLoading.value.close() // 关闭加载动画
+  exporLoading.value = false
+}
+
+// 耗时请求函数
+const askForTask: (task_info: any) => Promise<any> = async (task_info: any) => {
+  // 处理父组件传递的配置
+  const axiosConfig: AxiosRequestConfig = {
+    ...props.otherConfig?.timeConfig
+  }
+  // 处理请求的参数
+  if (
+    props.otherConfig?.timeConfig?.method === 'get' ||
+    props.otherConfig?.timeConfig?.method === 'GET'
+  ) {
+    axiosConfig.params = {
+      ...props.otherConfig?.timeConfig.params,
+      ...task_info
+    }
+  } else {
+    axiosConfig.data = {
+      ...props.otherConfig?.timeConfig.data,
+      ...task_info
+    }
+  }
+  try {
+    const res = await axios(axiosConfig)
+    // 如果返回的code是50001 就继续轮询，直到返回的code不是50001
+    if (res.data.code === 50001)
+      return await new Promise((resolve) => {
+        setTimeout(() => resolve(askForTask(task_info)), 2000)
+      })
+    return res.data
+  } catch (error) {
+    console.error('Error fetching task:', error)
+    throw error
+  }
+}
+
+//下载模板
+const formwork = () => {
+  const url = props.url as string
+  const params = props.parameter
+  ajaxBox.downFileFetchV2(url, params, {
+    method: 'GET',
+    fileName: props.templateName || t('fileRelated.template')
+  })
+}
+
+//选择框
+onMounted(async () => {
+  if (props.url && ifShowAffiliation.value) {
+    affiliationOptions.value = await getAffiliationOptions()
+    if (props.data && ifShowWarehouse.value) {
+      warehouseOptions.value = await getWarehouseList({
+        storage_type: props.data?.storage_type || 'CAILIAO'
+      })
+    }
+  } else {
+    affiliationOptions.value = []
+    warehouseOptions.value = []
+  }
+
+  // 判断是否默认选中归属公司
+  if (ifDefaultAffiliation.value) {
+    affiliationAll.value = defaultAffiliationOrgid.value
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-upload) {
+  width: calc(100% - 110px);
+}
+</style>

package/src/index.ts

@@ -19,6 +19,7 @@ export * from './fileRelated/index/ciupload' // 导出附件上传组件
 export * from './fileRelated/index/ciuploadV2' // 导出附件上传v2组件
 export * from './fileRelated/index/ciuploadV3' // 导出附件上传v3组件
 export * from './fileRelated/index/ciuploadV4' // 导出附件上传v4组件
+export * from './fileRelated/index/ciuploadV5' // 导出附件上传v5组件
 
 export * from './select' // 导出select组件
 export * from './selectTable' // 导出selectTable组件

package/src/sortableTable/README.md

@@ -1,287 +1,275 @@
 ## 使用示例
 
 ```ts
-const useBackStoreM = defineStore(
-  'MaterialWarehouse-MaterialsPreparationNotice-index',
-  () => {
-    const ifshow = ref(true)
+const useBackStoreM = defineStore('MaterialWarehouse-MaterialsPreparationNotice-index', () => {
+  const ifshow = ref(true)
 
-    type Scoped = Scope<MPNRes>
-    const store: ReturnType<
-      ReturnType<typeof getOptStore<MPNRes, any, any, any, { ids: number[] }>>
-    > = getOptStore<MPNRes, any, any, any, { ids: number[] }>({
-      model: 'material_preparation_notice_list', // 请求地址：material_preparation_notice_list_post
-      id: 'MaterialWarehouse-MaterialsPreparationNotice-index', // 配置存储的id（约定项目名称-模块名称-页面名称）
-      name: '材料库_备料通知',
-      storage_type: '', //CHUKU
-      params: { limit: 20, storage_type: 'CAILIAO' },
-      baseUrl: storageModule,
-      setId: true,
-      ifInitData: false, // 是否初始请求表格数据
-      sortColumn: [
-        { col: { width: 60, label: '序号', type: 'index', fixed: 'left' } },
-        {
-          col: { width: 130, label: '计划开始时间', prop: 'plan_start_date' }, 
-          // 示例1：日期格式
-          header(createVNode: any) {
-            return createVNode(HeaderInput, {
-              text: '计划开始时间',
-              column: 'plan_start_date',
-              storePar: store.params.value,
-              type: 'date',
-              placeholder: '请选择...',
-              popperStyle: { width: '450px', height: '300px' },
-              onChange(val: any) {
-                console.log('val: ', val)
-                store.HEADERSEARCH(val)
-                console.log('当前的参数: ', store.params.value)
-              },
-              ordersConfig: { enableOrder: true },
-            })
-          },
-        },
-         {
-          col: { width: 330, label: '物料编码', prop: 'material_info', },
-          // 示例2：输入框(简写)
-          header(createVNode: any) {
-            return createVNode(HeaderInput, {
-              text: '物料编码|物料名称|物料型号',
-              column: 'material_info',
-              storePar: store.params.value,
-              placeholder: '请输入关键字...',
-              onChange(val: any) {
-                store.HEADERSEARCH(val)
-              },
-            })
-          },          
-        },
-        {
-          col: { width: 150, label: '产线', prop: 'line_name' },
-          // 示例3：输入框
-          header(createVNode: any) {
-            return createVNode(HeaderInput, {
-              text: '产线',
-              column: 'line_name',
-              storePar: store.params.value,
-              type: 'text',
-              disableFilter: false,// 关闭筛选功能true
-              selectConfig: {},
-              placeholder: '请输入关键字...',
-              onChange(val: any) {
-                console.log('val: ', val)
-                store.HEADERSEARCH(val)
-                console.log('当前的参数: ', store.params.value)
-              },
-              onGetstore(val: any) {
-                console.log('val: ', val)
-                console.log('当前的参数: ', store.params.value)
-              },
-              ordersConfig: { enableOrder: false }, // 开启排序功能true
-            })
-          },
-        }, 
-        {
-          col: {
-            width: 100,
-            label: '通用件库存',
-            prop: 'common_parts_inventory_count',
-          },
-          component(createVNode, { row }: Scoped) {
-            return createVNode(
-              'div',
-              {
-                style: {
-                  color: `${row.common_parts_inventory_count < row.count
-                    ? 'red'
-                    : 'black'
-                    }`,
-                }, // 行内样式
-                class: 'flex-a-c', // 添加一个flex-a-c的class名称
-              },
-              row.common_parts_inventory_count,
-            )
-          },
-          
-        },
-        {
-          col: { width: 100, label: '状态', prop: 'state', fixed: 'right' },
-          component(createVNode, { row }: Scoped) {
-            let { type, val } = setLibraryName(row.state)
-            if (val) {
-              return createVNode(ElTag, { type, class: 'ml-2' }, () => val)
-            } else {
-              return createVNode('div', [val])
+  type Scoped = Scope<MPNRes>
+  const store: ReturnType<
+    ReturnType<typeof getOptStore<MPNRes, any, any, any, { ids: number[] }>>
+  > = getOptStore<MPNRes, any, any, any, { ids: number[] }>({
+    model: 'material_preparation_notice_list', // 请求地址：material_preparation_notice_list_post
+    id: 'MaterialWarehouse-MaterialsPreparationNotice-index', // 配置存储的id（约定项目名称-模块名称-页面名称）
+    name: '材料库_备料通知',
+    storage_type: '', //CHUKU
+    params: { limit: 20, storage_type: 'CAILIAO' },
+    baseUrl: storageModule,
+    setId: true,
+    ifInitData: false, // 是否初始请求表格数据
+    sortColumn: [
+      { col: { width: 60, label: '序号', type: 'index', fixed: 'left' } },
+      {
+        col: { width: 130, label: '计划开始时间', prop: 'plan_start_date' },
+        // 示例1：日期格式
+        header(createVNode: any) {
+          return createVNode(HeaderInput, {
+            text: '计划开始时间',
+            column: 'plan_start_date',
+            storePar: store.params.value,
+            type: 'date',
+            placeholder: '请选择...',
+            popperStyle: { width: '450px', height: '300px' },
+            onChange(val: any) {
+              console.log('val: ', val)
+              store.HEADERSEARCH(val)
+              console.log('当前的参数: ', store.params.value)
+            },
+            ordersConfig: { enableOrder: true }
+          })
+        }
+      },
+      {
+        col: { width: 330, label: '物料编码', prop: 'material_info' },
+        // 示例2：输入框(简写)
+        header(createVNode: any) {
+          return createVNode(HeaderInput, {
+            text: '物料编码|物料名称|物料型号',
+            column: 'material_info',
+            storePar: store.params.value,
+            placeholder: '请输入关键字...',
+            onChange(val: any) {
+              store.HEADERSEARCH(val)
             }
-          },
-          // 示例4：下拉选择框(多选)
-          header(createVNode: any) {
-            return createVNode(HeaderInput, {
-              text: '状态',
-              column: 'state',
-              storePar: store.params.value,
-              type: 'select',
-              selectConfig: {
-                options: [
-                  { value: '0', label: '备货中' },
-                  { value: '1', label: '已备货' },
-                ],
-                selectMultiple: true, // 是否多选
-              },
-              placeholder: '请选择...',
-              onChange(val: any) {
-                console.log('val: ', val)
-                store.HEADERSEARCH(val)
-                console.log('当前的参数: ', store.params.value)
-              },
-            })
-          },
+          })
+        }
+      },
+      {
+        col: { width: 150, label: '产线', prop: 'line_name' },
+        // 示例3：输入框
+        header(createVNode: any) {
+          return createVNode(HeaderInput, {
+            text: '产线',
+            column: 'line_name',
+            storePar: store.params.value,
+            type: 'text',
+            disableFilter: false, // 关闭筛选功能true
+            selectConfig: {},
+            placeholder: '请输入关键字...',
+            onChange(val: any) {
+              console.log('val: ', val)
+              store.HEADERSEARCH(val)
+              console.log('当前的参数: ', store.params.value)
+            },
+            onGetstore(val: any) {
+              console.log('val: ', val)
+              console.log('当前的参数: ', store.params.value)
+            },
+            ordersConfig: { enableOrder: false } // 开启排序功能true
+          })
+        }
+      },
+      {
+        col: {
+          width: 100,
+          label: '通用件库存',
+          prop: 'common_parts_inventory_count'
         },
-        {
-          col: {
-            width: 100,
-            label: '操作',
-            prop: 'state',
-            fixed: 'right',
-          },
-          component(createVNode: any, { row }: Scoped) {
-            // 单元格内容为一个开关 ElSwitch 组件
-            return createVNode(ElSwitch, {
+        component(createVNode, { row }: Scoped) {
+          return createVNode(
+            'div',
+            {
               style: {
-                '--el-switch-on-color': '#13ce66',
-                '--el-switch-off-color': '#e6a23c',
-              },
-              modelValue: row.state === 0 ? false : true, //ifshow.value,
-              inlinePrompt: true,
-              activeText: '备货完成',
-              inactiveText: '备货中', 
-              'onUpdate:modelValue': (newValue: any) => {
-                console.log('newValue: ', newValue)
-                // ifshow.value = newValue
-                row.state = newValue ? 1 : 0
-                materialPreparationCompleted(
-                  [row],
-                  store.loading,
-                  store.UPDATEPOST,
-                )
-              },
-              // 点击事件
-              onClick: (event: MouseEvent) => {
-                event.stopPropagation() // 阻止事件冒泡
-              },
-              // 禁用状态
-              disabled:
-                Number(row.material_preparation_count) >= Number(row.count)
-                  ? true
-                  : false,
-            })
-          },
-          header(createVNode: any) {
-            return createVNode(HeaderInput, {
-              text: '操作',
-              column: 'state',
-              storePar: store.params.value,
-              type: 'select',
-              initValue: '0',
-              popperStyle: { width: '300px', height: '150px' },
-              selectConfig: {
-                options: [
-                  { value: '0', label: '备货中' },
-                  { value: '1', label: '已备货' },
-                ],
-                selectMultiple: true, // 是否多选
-              },
-              placeholder: '请选择...',
-              onChange(val: any) {
-                console.log('val: ', val)
-                store.HEADERSEARCH(val)
-                console.log('当前的参数: ', store.params.value)
-              },
-            })
-          },
+                color: `${row.common_parts_inventory_count < row.count ? 'red' : 'black'}`
+              }, // 行内样式
+              class: 'flex-a-c' // 添加一个flex-a-c的class名称
+            },
+            row.common_parts_inventory_count
+          )
+        }
+      },
+      {
+        col: { width: 100, label: '状态', prop: 'state', fixed: 'right' },
+        component(createVNode, { row }: Scoped) {
+          let { type, val } = setLibraryName(row.state)
+          if (val) {
+            return createVNode(ElTag, { type, class: 'ml-2' }, () => val)
+          } else {
+            return createVNode('div', [val])
+          }
         },
-
-        {
-          col: { label: '操作', prop: '', width: 240 },
-          // 单元格中渲染2个普通按钮组件
-          component(createVNode, { row }: Scoped) {
-            return createVNode('div', [
-              createVNode(
-                ElButton,
-                {
-                  size: 'small',
-                  type: 'warning',
-                  color: '#2193b0',
-                  onClick(evt) {
-                    evt.stopPropagation() // 阻止冒泡事件
-                    console.log('修改', row) 
-                  },
-                },
-                () => '公司详情记录',
-              ),
-              createVNode(
-                ElButton,
-                {
-                  size: 'small',
-                  color: '#2c56a0',
-                  onClick(evt) {
-                    evt.stopPropagation() // 阻止冒泡事件
-                    console.log('编辑', row) 
-                  },
-                },
-                () => '条款详情记录',
-              ),
-            ])
-          },
+        // 示例4：下拉选择框(多选)
+        header(createVNode: any) {
+          return createVNode(HeaderInput, {
+            text: '状态',
+            column: 'state',
+            storePar: store.params.value,
+            type: 'select',
+            selectConfig: {
+              options: [
+                { value: '0', label: '备货中' },
+                { value: '1', label: '已备货' }
+              ],
+              selectMultiple: true // 是否多选
+            },
+            placeholder: '请选择...',
+            onChange(val: any) {
+              console.log('val: ', val)
+              store.HEADERSEARCH(val)
+              console.log('当前的参数: ', store.params.value)
+            }
+          })
+        }
+      },
+      {
+        col: {
+          width: 100,
+          label: '操作',
+          prop: 'state',
+          fixed: 'right'
+        },
+        component(createVNode: any, { row }: Scoped) {
+          // 单元格内容为一个开关 ElSwitch 组件
+          return createVNode(ElSwitch, {
+            style: {
+              '--el-switch-on-color': '#13ce66',
+              '--el-switch-off-color': '#e6a23c'
+            },
+            modelValue: row.state === 0 ? false : true, //ifshow.value,
+            inlinePrompt: true,
+            activeText: '备货完成',
+            inactiveText: '备货中',
+            'onUpdate:modelValue': (newValue: any) => {
+              console.log('newValue: ', newValue)
+              // ifshow.value = newValue
+              row.state = newValue ? 1 : 0
+              materialPreparationCompleted([row], store.loading, store.UPDATEPOST)
+            },
+            // 点击事件
+            onClick: (event: MouseEvent) => {
+              event.stopPropagation() // 阻止事件冒泡
+            },
+            // 禁用状态
+            disabled: Number(row.material_preparation_count) >= Number(row.count) ? true : false
+          })
         },
+        header(createVNode: any) {
+          return createVNode(HeaderInput, {
+            text: '操作',
+            column: 'state',
+            storePar: store.params.value,
+            type: 'select',
+            initValue: '0',
+            popperStyle: { width: '300px', height: '150px' },
+            selectConfig: {
+              options: [
+                { value: '0', label: '备货中' },
+                { value: '1', label: '已备货' }
+              ],
+              selectMultiple: true // 是否多选
+            },
+            placeholder: '请选择...',
+            onChange(val: any) {
+              console.log('val: ', val)
+              store.HEADERSEARCH(val)
+              console.log('当前的参数: ', store.params.value)
+            }
+          })
+        }
+      },
 
-        {
-          col: { width: 180, label: '操作', prop: '' },
-          component(createVNode, { row }: Scoped) {
-            // 单元格中渲染3个图标按钮组件
-            return createVNode('div', [
-              createVNode(ElButton, {
+      {
+        col: { label: '操作', prop: '', width: 240 },
+        // 单元格中渲染2个普通按钮组件
+        component(createVNode, { row }: Scoped) {
+          return createVNode('div', [
+            createVNode(
+              ElButton,
+              {
                 size: 'small',
                 type: 'warning',
-                icon: View, // 查看
                 color: '#2193b0',
                 onClick(evt) {
                   evt.stopPropagation() // 阻止冒泡事件
-                  console.log('查看', row)
-                  console.log('detailsRef', detailsRef.value)
-                  // detailsRef.value?.showMydia()
-                  onSeeDetails(detailsRef.value, row)
-                },
-              }),
-              createVNode(
-                ElButton,
-                {
-                  size: 'small',
-                  icon: EditPen,
-                  onClick(evt) {
-                    evt.stopPropagation() // 阻止冒泡事件
-                    onAdd(true, addRef.value, row)
-                  },
-                }, //, () => '修改'
-              ),
-              createVNode(ElButton, {
+                  console.log('修改', row)
+                }
+              },
+              () => '公司详情记录'
+            ),
+            createVNode(
+              ElButton,
+              {
                 size: 'small',
-                type: 'danger',
-                icon: Delete,
+                color: '#2c56a0',
                 onClick(evt) {
                   evt.stopPropagation() // 阻止冒泡事件
-                  console.log('修改', row)
-                  deleteOpen([row.id], store.UPDATEPOST)
-                },
-              }),
-            ])
-          },
-        },
+                  console.log('编辑', row)
+                }
+              },
+              () => '条款详情记录'
+            )
+          ])
+        }
+      },
 
+      {
+        col: { width: 180, label: '操作', prop: '' },
+        component(createVNode, { row }: Scoped) {
+          // 单元格中渲染3个图标按钮组件
+          return createVNode('div', [
+            createVNode(ElButton, {
+              size: 'small',
+              type: 'warning',
+              icon: View, // 查看
+              color: '#2193b0',
+              onClick(evt) {
+                evt.stopPropagation() // 阻止冒泡事件
+                console.log('查看', row)
+                console.log('detailsRef', detailsRef.value)
+                // detailsRef.value?.showMydia()
+                onSeeDetails(detailsRef.value, row)
+              }
+            }),
+            createVNode(
+              ElButton,
+              {
+                size: 'small',
+                icon: EditPen,
+                onClick(evt) {
+                  evt.stopPropagation() // 阻止冒泡事件
+                  onAdd(true, addRef.value, row)
+                }
+              } //, () => '修改'
+            ),
+            createVNode(ElButton, {
+              size: 'small',
+              type: 'danger',
+              icon: Delete,
+              onClick(evt) {
+                evt.stopPropagation() // 阻止冒泡事件
+                console.log('修改', row)
+                deleteOpen([row.id], store.UPDATEPOST)
+              }
+            })
+          ])
+        }
+      }
+    ]
+  })()
+  return store
+})
+```
 
+## 说明
 
-      ],
-    })()
-    return store
-  },
-)
-```
+- showConnector: false, // 不使用连接符输入框的时候需要传入 initValue 属性，否则无法监听到筛选按钮的颜色变化
+- 因为 不显示连接符输入框的时候， storePar属性中就可能没有 filter属性和 orders属性， 就无法监听到筛选按钮的颜色变化， 所以需要传入 initValue 属性， 使得 storePar中即使没有 filter属性和 orders属性， 也能能监听到筛选按钮的颜色变化。

package/src/sortableTable/headerInput.vue

@@ -510,7 +510,12 @@ if (props.type === 'date') {
 }
 // 不是日期筛选的时候将介于禁用
 if (props.type !== 'date') {
-  operatorOptions.value[7].disabled = true
+  // 查找 operatorOptions.value 中value为between的项
+  // operatorOptions.value[7].disabled = true
+  const betweenItem = operatorOptions.value.find((item) => item.value === 'between')
+  if (betweenItem) {
+    betweenItem.disabled = true
+  }
 }
 
 // 监听operator.value的变化重置value的值
@@ -680,6 +685,7 @@ watch(
       hasValue.value = true
     } else {
       hasValue.value = false
+      value.value = '' // 重置value的值
     }
     if (newVal?.filters) {
       // 判断是否是当前列的筛选条件
@@ -691,9 +697,11 @@ watch(
           hasValue.value = true
         } else {
           hasValue.value = false
+          value.value = '' // 重置value的值
         }
       } else {
         hasValue.value = false
+        value.value = '' // 重置value的值
       }
     }
     if (newVal?.orders) {
@@ -720,6 +728,9 @@ watch(
     immediate: true
   }
 )
+
+// 监听 props.initValue 的变化：当不显示条件连接符下拉选择框的时候，监听props.initValue 的变化
+// showConnector: false, // 不使用连接符输入框的时候需要传入 initValue 属性，否则无法监听到筛选按钮的颜色变化
 watch(
   () => props.initValue,
   (newVal, oldVal) => {
@@ -729,6 +740,7 @@ watch(
       hasValue.value = true
     } else {
       hasValue.value = false
+      value.value = '' // 重置value的值
     }
   },
   {