ci-plus 1.8.7 → 1.8.9

package/README.md

@@ -1,6 +1,9 @@
 ## 历史更新
 
 ```js
+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.7",
+  "version": "1.8.9",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {

package/src/fileRelated/uploadV4.vue

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

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的值
     }
   },
   {

package/src/sortableTable/utils/sortableTableDragItem.vue

@@ -33,11 +33,15 @@
       </div>
       <div class="ifshow">
         <el-button :type="element.hide ? 'primary' : ''" @click="handleShow(element)" size="small">
-          {{ element.hide ? t('sortableTable.sortableTableDialog.show') : t('sortableTable.sortableTableDialog.hide') }}
+          {{
+            element.hide
+              ? t('sortableTable.sortableTableDialog.show')
+              : t('sortableTable.sortableTableDialog.hide')
+          }}
         </el-button>
       </div>
       <div class="widths">
-        {{t('sortableTable.sortableTableDialog.width')}}：
+        {{ t('sortableTable.sortableTableDialog.width') }}：
         <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
       </div>
       <sortable-table-drag-item v-if="element.children" v-model="element.children" />
@@ -47,8 +51,8 @@
 <script setup lang="ts">
 import SvgIcon from '../../svgIcon/index'
 import { computed } from 'vue'
-import { ElInput, ElButton , ElIcon} from 'element-plus'
-import t from '../utils/lang/index'
+import { ElInput, ElButton, ElIcon } from 'element-plus'
+import t from '../../utils/lang/index'
 import { VueDraggable } from 'vue-draggable-plus'
 import { SortColumn, SortableTableIns } from './interface'
 import { Rank } from '@element-plus/icons-vue'