暂存

package.json

@@ -44,6 +44,7 @@
     "pinia": "^2.1.6",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
+    "sortablejs": "^1.15.0",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
     "video.js": "^7.21.5",
@@ -70,8 +71,8 @@
     "@types/qs": "^6.9.8",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "@unocss/transformer-variant-group": "^0.56.1",
     "@unocss/eslint-config": "^0.56.1",
+    "@unocss/transformer-variant-group": "^0.56.1",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",

src/api/redis/index.ts

@@ -0,0 +1,21 @@
+import request from '@/config/axios'
+
+export interface RedisVO {
+  key: string
+  value: string
+}
+
+// 加入缓存
+export const addRedis = async (data:RedisVO) => {
+  return await request.post({ url: `/infra/redis/set`, data })
+}
+
+// 获取缓存
+export const getRedis = async (key) => {
+  return await request.get({ url: `/infra/redis/get?key=` + key})
+}
+
+// 删除物料清单
+export const deleteRedis = async (key) => {
+  return await request.delete({ url: `/infra/redis/delete?key=` + key})
+}

src/components/TableHead/src/TableHead.vue

@@ -23,10 +23,18 @@
     </div>
     <slot></slot>
   </div>
+  <!-- 字段设置弹窗 -->
+  <rowDrop 
+    ref="rowDropRef"
+    :tableColumns="tableColumns" 
+    :routeName="routeName"
+    @updataTableColumns="updataTableColumns"
+  />
 </template>
 <script setup>
 import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
+import rowDrop from "@/components/rowDrop/index.vue"
 // import SearchNormal from '@/components/SearchNormal/index.vue'
 // import * as highSearch from '@/utils/search/highSearch'
 // import * as primarySearch from '@/utils/search/primarySearch'
@@ -38,11 +46,17 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
         return []
       }
     },
-    // vue文件的name值
+    tableColumns: {
-    // vueName:{
+      type: Array,
-    //   type: String,
+      default: () => {
-    //   default: ''
+        return []
-    // },
+      }
+    },
+    // 主组件name值
+    routeName: {
+      type: String,
+      default: ''
+    }
     // 快速搜索条件（业务线特殊搜索条件--非utils/search/quicklySearch.ts）
     // quicklySearchOption:{
     //   type: Object,
@@ -54,6 +68,11 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
   const buttonsRight = ref([])
   const tableNavBtnsContent_Ref = ref()
 
+  // 更新主列表字段
+  const updataTableColumns = (val) => {
+    emit('updataTableColumns', val)
+  }
+
   // const defaultButtons = inject('global').defaultButtons
   // 创建左右按钮数据
   const buttonsLeftOrRight = () => {
@@ -64,12 +83,7 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
     //   buttonsRight.value.push(defaultButtons.defaultFilterBtn())
     // }
     // 父级传参处理左右
-    const buttonData = ref([])
+    props.HeadButttondata.forEach(item=>{
-    // 默认按钮 刷新 和 设置
-    buttonData.value.push(defaultButtons.defaultFreshBtn(null))
-    buttonData.value.push(defaultButtons.defaultSetBtn(null))
-    buttonData.value = [...buttonData.value,...props.HeadButttondata]
-    buttonData.value.forEach(item=>{
       if(item.float && item.float == 'right'){
         buttonsRight.value.push(item)
       }else{
@@ -84,11 +98,20 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
   const emit = defineEmits([
     'buttonBaseClick',
     'quicklySearchClick',
-    'quicklySearchClear'
+    'quicklySearchClear',
+    'updataTableColumns'
   ])
 
+  // 设置显示隐藏变量
+  const rowDropRef = ref()
+
   const buttonBaseClick = (val, item) => {
-    emit('buttonBaseClick', val, item)
+    // 设置按钮 
+    if (val == 'set') {
+      rowDropRef.value.popoverVisible = true
+    } else {
+      emit('buttonBaseClick', val, item)
+    }
   }
 
   // 快速搜索事件

src/components/rowDrop/index.vue

@@ -0,0 +1,323 @@
+<template>
+  <Dialog title="字段设置"  width="270" v-model="popoverVisible">
+    <div class="test_wrapper" @dragover="dragover($event)">
+      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handlecheckallchange">全部</el-checkbox>
+        <el-checkbox-group v-model="checkedDataList" @change="handlecheckedchange">
+          <draggable :list="allData" :force-fallback="true" chosen-class="chosen" animation="300" @end="dragend" @update="dragenter" >
+            <template #item="{element}">
+              <div><el-checkbox :key="element" :label="element">{{element}}</el-checkbox></div>
+            </template>
+          </draggable>
+        </el-checkbox-group>
+    </div>
+    <div class="buttonsBox">
+      <el-button size="mini" @click="reset">重置</el-button>
+      <el-button size="mini" @click="closeRowDrop">关闭</el-button>
+    </div>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import * as tableColumnsFun from '@/utils/disposition/tableColumns'
+import * as RedisApi from '@/api/redis'
+import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
+import draggable from "vuedraggable";
+
+defineOptions({ name: 'RowDrop' })
+
+const props = defineProps({
+  HeadButttondata: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  routeName: {
+    type: String,
+    default: null
+  },
+  tableColumns: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+const oldData = ref()
+const newData = ref()
+const dataList = ref([])
+const allSeletType = ref('NoSelect')
+const buttonsData = ref([defaultButtons.defaultSetBtn(null)])
+const popoverVisible = ref(false)
+
+const isIndeterminate = ref(true)
+const allData = ref([]) // 字段设置列表展现字段 除操作外
+const checkedDataList = ref([])
+const checkAll = ref(true)
+const handlecheckallchange = (val: boolean) => {
+  checkedDataList.value = val ? allData.value : []
+  isIndeterminate.value = false
+  save()
+}
+const handlecheckedchange = (value: string[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === allData.value.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < allData.value.length
+  save()
+}
+
+const reset = () => {
+  ElMessageBox.confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    RedisApi.deleteRedis(props.routeName).then(res => {
+      initSelectSta()
+      closeRowDrop()
+    }).catch(err => {
+      console.log(err)
+    })
+  })
+}
+
+// 关闭页面
+const closeRowDrop = () => {
+  popoverVisible.value = false
+}
+  
+// 格式化表头数据
+const formatData = (val) => {
+  dataList.value = JSON.parse(JSON.stringify(val))
+}
+
+// 保存
+const save = () => {
+  let saveDate = tableColumnsFun[props.routeName].allSchemas.tableColumns
+  sort(saveDate, allData)
+  console.log(99, saveDate)
+  
+  // // 默认列表第一列（弹出详情用）
+  // saveDate.push(tableColumnsFun[props.routeName].allSchemas.tableColumns[0])
+  // // 默认列表最后一列（操作）
+  // saveDate.push(tableColumnsFun[props.routeName].allSchemas.tableColumns[tableColumnsFun[props.routeName].allSchemas.tableColumns.length-1])
+  // checkedDataList.value.forEach((item,index) => {
+  //   item.isTable = false
+  //   if (tableColumnsFun[props.routeName].allSchemas.tableColumns.indexOf(item) > 0) {
+  //     item.isTable = true
+  //     saveDate.push(item)
+  //   } else {
+
+  //   }
+  // })
+  // tableColumnsFun[props.routeName].allSchemas.tableColumns.forEach((item,index) => {
+  //   if (index == 0) {
+  //     saveDate.push(item)
+  //   }
+  //   if ((tableColumnsFun[props.routeName].allSchemas.tableColumns.length - 1) == index) {
+  //     saveDate.push(item)
+  //   } else {
+  //     item.isTable = false
+  //     if (checkedDataList.value.indexOf(item.label) > 0) {
+  //       item.isTable = true
+  //       saveDate.push(item)
+  //     }
+  //   }
+  // })
+
+  // updataTableColumns(saveDate)
+  // RedisApi.addRedis({key: props.routeName,value: JSON.stringify(saveDate)}).then(res => {
+  // }).catch(err => {
+  //   console.log(err)
+  // })
+}
+
+// 记录移动过程中信息
+const dragenter = (value, e) => {
+  // this.newData = value
+  console.log('2222222',value)
+  
+  e.preventDefault()
+}
+
+// 拖拽最终操作
+const dragend = (value, e) => {
+  
+  console.log('3333333',allData)
+  sort(checkedDataList.value,allData.value)
+  console.log(143,checkedDataList )
+  save()
+  // if (this.oldData !== this.newData) {
+  //   let oldIndex = this.dataList.indexOf(this.oldData)
+  //   let newIndex = this.dataList.indexOf(this.newData)
+  //   let newItems = [...this.dataList]
+  //   // 删除老的节点
+  //   newItems.splice(oldIndex, 1)
+  //   // 在列表中目标位置增加新的节点
+  //   newItems.splice(newIndex, 0, this.oldData)
+  //   this.dataList = [...newItems]
+  //   this.save()
+  // }
+}
+
+// 数组排序 arr1 按照 arr2 排序
+const sort = (arr1,arr2) => {
+  arr1.sort((a,b) => arr2.indexOf(a)-arr2.indexOf(b))
+}
+
+// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
+const dragover = (e) => {
+  e.preventDefault()
+}
+
+// 初始化当前全选状态
+const initSelectSta = () => {
+  RedisApi.getRedis(props.routeName).then(res => {
+    if (res) {
+      checkedDataList.value = []
+      allData.value = []
+      updataTableColumns(JSON.parse(res))
+      // 显示缓存中的字段
+      JSON.parse(res).forEach((item, index) => {
+        // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
+        if (index != 0) {
+          if (item.field != 'action') {
+            checkedDataList.value.push(item.label)
+          }
+        }
+      })
+      // 字段设置 显示全部字段
+      dataList.value.forEach((item, index) => {
+        // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
+        if (index != 0) {
+          if (item.field != 'action') {
+            allData.value.push(item.label)
+          }
+        }
+      })
+    } else {
+      checkedDataList.value = []
+      allData.value = []
+      dataList.value.forEach((item, index) => {
+        // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
+        if (index != 0) {
+          if (item.field != 'action') {
+            checkedDataList.value.push(item.label)
+            allData.value.push(item.label)
+          }
+        }
+      })
+      checkAll.value = true
+      updataTableColumns(dataList.value)
+    }
+  }).catch(err => {
+    console.log(err)
+  })
+  
+}
+
+// 更新主列表字段
+const updataTableColumns = (val) => {
+  emit('updataTableColumns', val)
+}
+
+// 传递给父类
+const emit = defineEmits([
+  'updataTableColumns'
+])
+
+/** 初始化 **/
+onMounted(() => {
+  formatData(props.tableColumns)
+  initSelectSta()
+})
+
+defineExpose({
+  popoverVisible
+})
+
+</script>
+<style lang="scss" scoped>
+
+.rowDropContain {
+ 
+
+  .el-popover {
+    position: fixed !important;
+    right: 30px !important;
+    padding: 0 !important;
+    .el-popper {
+      left: 85% !important;
+    }
+    
+  }
+  
+
+  .transition-wrapper {
+    display: block;
+    max-height: calc(90vh - 280px);
+    overflow: auto;
+    padding: 0 0 20px 20px;
+
+    .sort-item {
+      margin-bottom: 6px;
+      display: flex;
+      cursor: grab;
+      align-items: center;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .lable {
+        padding: 0 15px 0 10px;
+      }
+    }
+  }
+
+  .el-divider--horizontal {
+    margin: 20px;
+    width: calc(100% - 40px);
+  }
+
+  .text {
+    color: #333;
+    font-weight: bold;
+    padding: 20px 0 0 20px;
+  }
+
+  .allSelectContent {
+    user-select: none;
+    cursor: pointer;
+    padding: 0 0 10px 20px;
+
+    .icon {
+      font-size: 18px;
+      vertical-align: middle;
+      color: #409EFF;
+      margin-right: 5px;
+    }
+  }
+
+  .buttonsBox {
+    text-align: center;
+    margin: 0;
+    padding: 15px;
+    border-top: #eee solid 1px;
+  }
+
+  .checkbox-svg {
+    width: 20px;
+    flex-shrink: 0;
+    fill: currentColor;
+    color: #999;
+    font-size: 18px;
+    cursor: pointer;
+
+    &.show {
+      color: #409EFF;
+    }
+  }
+}
+</style>

src/utils/disposition/tableColumns.ts

@@ -517,7 +517,7 @@ export const Itempackaging = useCrudSchemas(reactive<CrudSchema[]>([
     }
   },
   {
-    label: '替代包装单位',
+    label: '替代包装单位1',
     field: 'altPackUnit1',
     sort: 'custom',
     dictType: DICT_TYPE.PACK_UNIT,
@@ -528,40 +528,29 @@ export const Itempackaging = useCrudSchemas(reactive<CrudSchema[]>([
     } 
   },
   { 
-    label: '替代包装量', 
+    label: '替代包装量1', 
     field: 'altPackQty1',
     sort: 'custom',
     table: {
-      width: 120
+      width: 130
     },
     form: {
       component: 'InputNumber',
     }
   },
-  {
-    label: '替代包装单位',
-    field: 'altPackUnit1',
-    sort: 'custom',
-    dictType: DICT_TYPE.PACK_UNIT,
-    dictClass: 'string',
-    isTable: true,
-    table: {
-      width: 150
-    } 
-  },
   { 
-    label: '替代包装量', 
+    label: '替代包装量2', 
     field: 'altPackQty2',
     sort: 'custom',
     table: {
-      width: 120
+      width: 130
     },
     form: {
       component: 'InputNumber',
     }
   },
   {
-    label: '替代包装单位',
+    label: '替代包装单位3',
     field: 'altPackUnit3',
     sort: 'custom',
     dictType: DICT_TYPE.PACK_UNIT,
@@ -572,18 +561,18 @@ export const Itempackaging = useCrudSchemas(reactive<CrudSchema[]>([
     } 
   },
   { 
-    label: '替代包装量', 
+    label: '替代包装量3', 
     field: 'altPackQty3',
     sort: 'custom',
     table: {
-      width: 120
+      width: 130
     },
     form: {
       component: 'InputNumber',
     }
   },
   {
-    label: '替代包装单位',
+    label: '替代包装单位4',
     field: 'altPackUnit4',
     sort: 'custom',
     dictType: DICT_TYPE.PACK_UNIT,
@@ -593,11 +582,11 @@ export const Itempackaging = useCrudSchemas(reactive<CrudSchema[]>([
     } 
   },
   { 
-    label: '替代包装量', 
+    label: '替代包装量4', 
     field: 'altPackQty4',
     sort: 'custom',
     table: {
-      width: 120
+      width: 130
     },
     form: {
       component: 'InputNumber',

src/views/wms/itembasic/index.vue

@@ -112,7 +112,7 @@ const butttondata = [
 // 列表-操作按钮事件 
 const buttonTableClick = (val, row) => {
   if (val == 'edit') { // 编辑
-    openForm('update', row.id)
+    openForm('update', row)
   } else if (val == 'delete') { // 删除
     handleDelete(row.id)
   }

src/views/wms/itempackaging/index.vue

@@ -5,12 +5,18 @@
   </ContentWrap>
 
   <!-- 列表头部 -->
-  <TableHead :HeadButttondata="HeadButttondata" @button-base-click="buttonBaseClick" :tableColumns="Itempackaging.allSchemas.tableColumns"/>
+  <TableHead 
+    :HeadButttondata="HeadButttondata" 
+    @button-base-click="buttonBaseClick" 
+    :tableColumns="tableColumns"
+    :routeName="routeName"
+    @updataTableColumns="updataTableColumns"
+  />
 
   <!-- 列表 -->
   <ContentWrap>
     <Table
-      :columns="Itempackaging.allSchemas.tableColumns"
+      :columns="tableColumns"
       :data="tableObject.tableList"
       :loading="tableObject.loading"
       :pagination="{
@@ -61,12 +67,25 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import TableHead from '@/components/TableHead/src/TableHead.vue' 
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import Detail from '@/components/Detail/src/Detail.vue'
+import * as RedisApi from '@/api/redis'
 
 defineOptions({ name: 'Itempackaging' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+const route = useRoute() // 路由信息
+const routeName = ref()
+routeName.value = route.name
+const tableColumns = ref(Itempackaging.allSchemas.tableColumns)
+
+
+// 字段设置 更新主列表字段
+const updataTableColumns = (val) => {
+  console.log(84, val)
+  tableColumns.value = val
+}
+
 // 查询列表参数设置 
 const searchTableParams = ref([{
   formField: 'itemCode',