【EDI前端】暂存

Web/src/components/setColumsPop/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <el-dropdown :hide-on-click="false">
+    <el-button :icon="'Setting'" plain :type="hasChange ? 'primary' : null">字段设置</el-button>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>
+          <el-checkbox 
+            v-model="checkAll" 
+            @change="handleCheckAllChange"
+            :indeterminate="isIndeterminate"
+          ><span style="color:#333">全选</span></el-checkbox>
+        </el-dropdown-item>
+        <el-checkbox-group
+          class="columsList"
+          v-model="checkedItems"
+        >
+          <el-dropdown-item 
+            v-for="(colum,index) in columsList" 
+            :key="index"
+            :draggable="true"
+            @dragstart="dragstart(colum)"
+            @dragenter="dragenter(colum,$event)"
+            @dragend="dragend(colum,$event)"
+            @dragover="dragover($event)"
+          >
+            <el-checkbox @change="(data)=>{handleCheckedItemChange(data,colum)}" :label="colum.title" :value="colum.prop"></el-checkbox>
+          </el-dropdown-item>
+        </el-checkbox-group>
+      </el-dropdown-menu>
+      <el-button class="restBtn" @click="reset">重置</el-button>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup>
+  defineOptions({ name: 'setColumsPop' })
+  import { reactive, ref, onMounted } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  const props = defineProps({
+    // table表头
+    tableColumns: {
+      type: Object,
+      default: null
+    },
+    //初始化表头，未从缓存获取之前
+    initTableColums: {
+      type: Object,
+      default: null
+    },
+    localTableColumnsName: {
+      type: String,
+      default: null
+    },
+  })
+
+  const checkAll = ref(false)//是否全选
+  const isIndeterminate = ref(false)//半选样式
+  const checkedItems = ref([])
+  const columsList = ref([])
+  const hasChange = ref(false)//是否有变化
+
+  // 判断是否有变化
+  const getHasChange = () => {
+    hasChange.value =  false
+    let _noShow = columsList.value.filter(item=>item.setNoShow == true)
+    // 显示发生变化
+    if(_noShow && _noShow.length > 0){
+      hasChange.value =  true
+    }
+    // 顺序发生变化
+    else{
+      let _initIndex = []
+      props.initTableColums.forEach(item=>{_initIndex.push(item.prop)})
+      let _nowIndex = []
+      columsList.value.forEach(item=>{ _nowIndex.push(item.prop)})
+      hasChange.value = _initIndex.join(",") != _nowIndex.join(",")
+    }
+  }
+
+  // 初始化数据
+  const getLocalColumsList = () => {
+    // 设置字段列表
+    columsList.value = props.tableColumns
+    checkedItems.value = []
+    // 设置已选字段
+    columsList.value.forEach(item=>{ if(!item.setNoShow)checkedItems.value.push(item.prop) })
+    // 设置全选是否全选
+    setCheckAllSta()
+    // 判断是否有变化
+    getHasChange()
+  }
+
+  // 配置全选状态
+  const setCheckAllSta = () => {
+    checkAll.value = checkedItems.value.length === columsList.value.length
+    isIndeterminate.value = (checkedItems.value.length < columsList.value.length) && checkedItems.value.length != 0
+  }
+
+  // 全选/全不选
+  const handleCheckAllChange = (val) => {
+    // 全选
+    if(val){
+      hasChange.value = false
+      checkedItems.value = []
+      columsList.value.forEach(item=>{ 
+        checkedItems.value.push(item.prop)
+        item.setNoShow = false
+      })
+      save()
+    }
+    // 全不选
+    else{
+      hasChange.value = true
+      checkedItems.value =  []
+      columsList.value.forEach(item=>{ item.setNoShow = true})
+      save()
+    }
+  }
+
+  // 更改
+  const handleCheckedItemChange = (isCheck,colum) => {
+    let _prop = colum.prop
+    checkedItems.value =  []
+    columsList.value.forEach(item=>{ 
+      if(item.prop == _prop){item.setNoShow = !isCheck} 
+      if(!item.setNoShow)checkedItems.value.push(item.prop)
+    })
+    setCheckAllSta()
+    getHasChange()
+    save()
+  }
+
+  // 重置
+  const reset = () => {
+    hasChange.value = false
+    checkedItems.value = []
+    columsList.value = JSON.parse(JSON.stringify(props.initTableColums))
+    columsList.value.forEach(item=>{ checkedItems.value.push(item.prop) })
+    setCheckAllSta()
+    save()
+  }
+
+  // 存入缓存
+  const save = () => {
+    localStorage.setItem(props.localTableColumnsName,JSON.stringify(columsList.value))
+    //判断是否有变化
+    getHasChange()
+    // 判断全选按钮状态
+    setCheckAllSta()
+  }
+
+  const dragOldData = ref(null)
+  const dragNewData = ref(null)
+  // 拖拽相关功能
+  const dragstart = (value) => {
+    dragOldData.value = value
+  }
+  // 记录移动过程中信息
+  const dragenter = (value, e) => {
+    dragNewData.value = value
+    e.preventDefault()
+  }
+  const dragend = (value, e) => {
+  // 拖拽最终操作
+    if (dragOldData.value !== dragNewData.value) {
+      let oldIndex = columsList.value.indexOf(dragOldData.value)
+      let newIndex = columsList.value.indexOf(dragNewData.value)
+      let newItems = [...columsList.value]
+      // 删除老的节点
+      newItems.splice(oldIndex, 1)
+      // 在列表中目标位置增加新的节点
+      newItems.splice(newIndex, 0, dragOldData.value)
+      columsList.value = [...newItems]
+      save()
+    }
+  }
+  const dragover = (e) => {
+  // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
+    e.preventDefault()
+  }
+
+  onMounted(() => {
+    getLocalColumsList()
+  })
+
+</script>
+  
+<style scoped lang="scss">
+.columsList{
+  height:calc(100vh - 400px) !important;
+  overflow:auto !important;
+  padding:10 20px !important;
+}
+::v-deep .el-checkbox{
+  min-width:200px !important;
+}
+.restBtn{
+  width:calc(100% - 20px);
+  margin:10px;
+  text-align:center
+}
+::-webkit-scrollbar{
+  width:6px;
+  height:6px;
+}
+::-webkit-scrollbar-track{
+  border-radius: 10px;
+  background-color: #F5F5F5;
+}
+::-webkit-scrollbar-thumb {
+  border-radius:10px;
+  background-color:#ddd;
+}
+</style>
+  

Web/src/utils/common/apiTableColumns.js

@@ -8,8 +8,8 @@ const apiTableColumns = {
         {prop:'api',title:'api',align:'left',width:200},
         {prop:'url',title:'url',align:'left',width:300},
         {prop:'corn',title:'corn'},
-        {prop:'writeState',title:'是否传出',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
+        // {prop:'writeState',title:'是否传出',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
-        {prop:'readState',title:'是否已确认',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
+        // {prop:'readState',title:'是否已确认',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
         {prop:'isAuto',title:'是否自动执行',type:'tagFilter',options:EnumList.whetherBoolean},
         {prop:'remark',title:'remark',align:'left',width:300},
         {prop:'creationTime',title:'创建时间',width:180,type:'datetime',noEdit:true},
@@ -23,7 +23,7 @@ const apiTableColumns = {
         {prop:'taskName',title:'任务名称',align:'left',width:200,disabled:true},
         {prop:'dataCount',title:'同步总数量',type:'number'},
         {prop:'writeState',title:'是否传出',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
-        {prop:'readState',title:'是否已确认',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
+        // {prop:'readState',title:'是否已确认',type:'tagFilter',options:EnumList.whetherBoolean,width:120,noEdit:true},
         {prop:'subscriber',title:'客户名'},
         {prop:'failedCount',title:'失败条数',type:'number'},
         {prop:'failedInfo',title:'失败信息',tooltip:true,width:180},