sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

字段设置组件修改

master
陈薪名 11 months ago
parent
5fae5b6d5f
commit
4dde7663ad
2 changed files with 44 additions and 177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/components/TableHead/src/TableHead.vue
  2. 214
      src/components/rowDrop/index.vue

7
src/components/TableHead/src/TableHead.vue
View File

@ -26,7 +26,6 @@
<!-- 字段设置弹窗 -->
<rowDrop
ref="rowDropRef"
:tableColumns="tableColumns"
:routeName="routeName"
@updataTableColumns="updataTableColumns"
/>
@ -46,12 +45,6 @@ import rowDrop from "@/components/rowDrop/index.vue"
return []
}
},
tableColumns: {
type: Array,
default: () => {
return []
}
},
// 主组件name值
routeName: {
type: String,

214
src/components/rowDrop/index.vue
View File

@ -1,5 +1,5 @@
<template>
<Dialog title="字段设置" width="270" v-model="popoverVisible">
<Dialog title="字段设置" width="270" v-model="popoverVisible" :scroll="true" :maxHeight="500">
<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">
@ -10,18 +10,16 @@
</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>
<template #footer>
<el-button size="small" @click="reset">重置</el-button>
<el-button size="small" @click="closeRowDrop">关闭</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { 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' })
@ -36,19 +34,8 @@ const props = defineProps({
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)
@ -73,7 +60,7 @@ const reset = () => {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
RedisApi.deleteRedis(props.routeName).then(res => {
RedisApi.deleteRedis(props.routeName).then(() => {
initSelectSta()
closeRowDrop()
}).catch(err => {
@ -86,77 +73,40 @@ const reset = () => {
const closeRowDrop = () => {
popoverVisible.value = false
}
// 格式化表头数据
const formatData = (val) => {
dataList.value = JSON.parse(JSON.stringify(val))
}
// 保存
const save = () => {
let saveDate = []
let saveDate:any[] = []
// 默认列表第一列（弹出详情用）
saveDate.push(tableColumnsFun[props.routeName].allSchemas.tableColumns[0])
console.log(101, allData.value)
allData.value.forEach((item,index) => {
const _item = tableColumnsFun[props.routeName].allSchemas.tableColumns.find(itemColumns => (itemColumns.label == item ))
allData.value.forEach((item) => {
const _item:any = tableColumnsFun[props.routeName].allSchemas.tableColumns.find(itemColumns => (itemColumns.label == item ))
_item.isTable = false
if (checkedDataList.value.indexOf(_item.label) > 0) {
if (checkedDataList.value.indexOf(_item.label) > -1) {
_item.isTable = true
saveDate.push(_item)
}
saveDate.push(_item)
})
// 默认操作列
saveDate.push(tableColumnsFun[props.routeName].allSchemas.tableColumns[tableColumnsFun[props.routeName].allSchemas.tableColumns.length-1])
console.log(115,saveDate)
// 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 => {
console.log(99, saveDate)
RedisApi.addRedis({key: props.routeName,value: JSON.stringify(saveDate)}).then(() => {
}).catch(err => {
console.log(err)
})
}
// 记录移动过程中信息
const dragenter = (value, e) => {
// this.newData = value
console.log('2222222',value)
const dragenter = (e) => {
e.preventDefault()
}
// 拖拽最终操作
const dragend = (value, e) => {
console.log('3333333',allData)
const dragend = ( e) => {
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()
// }
e.preventDefault()
}
// 数组排序 arr1 按照 arr2 排序
@ -172,33 +122,47 @@ const dragover = (e) => {
// 初始化当前全选状态
const initSelectSta = () => {
RedisApi.getRedis(props.routeName).then(res => {
const _myTableColumns = tableColumnsFun[props.routeName].allSchemas.tableColumns
// 有缓存
if (res) {
checkedDataList.value = []
allData.value = []
updataTableColumns(JSON.parse(res))
// 缓存回显临时变量
const _showTableColumns = []
_showTableColumns.push(_myTableColumns[0])
// 显示缓存中的字段
JSON.parse(res).forEach((item, index) => {
// 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
// 列表字段操作列不能参与排序及显隐操作
if (index != 0) {
if (item.field != 'action') {
checkedDataList.value.push(item.label)
_showTableColumns.push(_myTableColumns.find(myItem => (myItem.label == item.label)))
allData.value.push(item.label)
}
}
})
// 字段设置 显示全部字段
dataList.value.forEach((item, index) => {
_myTableColumns.forEach((myTableItem, index) => {
// 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
// 列表字段操作列不能参与排序及显隐操作
if (index != 0) {
if (item.field != 'action') {
allData.value.push(item.label)
if (myTableItem.field != 'action') {
if (allData.value.indexOf(myTableItem.label) == -1) {
allData.value.push(myTableItem.label)
}
}
}
})
} else {
_showTableColumns.push(_myTableColumns[_myTableColumns.length-1])
updataTableColumns(_showTableColumns)
} else { // 无缓存
checkedDataList.value = []
allData.value = []
dataList.value.forEach((item, index) => {
_myTableColumns.forEach((item, index) => {
// 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
// 列表字段操作列不能参与排序及显隐操作
if (index != 0) {
if (item.field != 'action') {
checkedDataList.value.push(item.label)
@ -207,25 +171,11 @@ const initSelectSta = () => {
}
})
checkAll.value = true
updataTableColumns(dataList.value)
updataTableColumns(_myTableColumns)
}
}).catch(err => {
console.log(err)
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)
})
}
// 更新主列表字段
@ -240,7 +190,6 @@ const emit = defineEmits([
/** 初始化 **/
onMounted(() => {
formatData(props.tableColumns)
initSelectSta()
})
@ -250,85 +199,10 @@ defineExpose({
</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;
}
}
}
// .buttonsBox {
// text-align: center;
// margin: 0;
// padding: 15px;
// border-top: #eee solid 1px;
// }
</style>
Write Preview
Loading…
Cancel
Save