Browse Source

【EDI前端】暂存

web
安虹睿 3 weeks ago
parent
commit
74325bfadc
  1. 216
      Web/src/components/setColumsPop/index.vue
  2. 6
      Web/src/utils/common/apiTableColumns.js

216
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>

6
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:'readState',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:'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},

Loading…
Cancel
Save