parent
aab3a5be5e
commit
01571bffd1
@ -0,0 +1,45 @@ |
|||||||
|
<script setup name="TableColumChoose"> |
||||||
|
import { h, ref, watch } from 'vue'; |
||||||
|
import { BgColorsOutlined } from '@ant-design/icons-vue'; |
||||||
|
defineOptions({ |
||||||
|
name: 'TableColumChoose', |
||||||
|
}); |
||||||
|
const props = defineProps({ |
||||||
|
columnList: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}); |
||||||
|
const status = ref(false); |
||||||
|
const checkedKeys = ref(props.columnList.filter((item) => item.status === true).map((item) => item.key)); |
||||||
|
|
||||||
|
const handleClose = () => { |
||||||
|
}; |
||||||
|
watch(checkedKeys, (newVal) => { |
||||||
|
props.columnList.forEach((item) => { |
||||||
|
if (checkedKeys.value.includes(item.key)) { |
||||||
|
item.status = true; |
||||||
|
} else { |
||||||
|
item.status = false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
const onDrop = (info) => { |
||||||
|
const before = info.dragNode.pos.split('-').slice(-1)[0]; |
||||||
|
const after = info.node.pos.split('-').slice(-1)[0]; |
||||||
|
const target = props.columnList.splice(before, 1)[0]; |
||||||
|
props.columnList.splice(after, 0, target); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<AButton shape="circle" :icon="h(BgColorsOutlined)" @click="status = true" /> |
||||||
|
<a-drawer v-model:open="status" title="表格列选择" placement="right" :fieldNames="{ title: 'name' }" @close="handleClose"> |
||||||
|
<a-tree class="draggable-tree" draggable block-node checkable v-model:checkedKeys="checkedKeys" :tree-data="props.columnList" @drop="onDrop" /> |
||||||
|
<!-- @dragenter="onDragEnter"--> |
||||||
|
</a-drawer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
@ -0,0 +1,147 @@ |
|||||||
|
<script setup> |
||||||
|
import { h, onMounted, ref, watch } from 'vue'; |
||||||
|
import { useBaseDataStore } from '@/stores/baseData.js'; |
||||||
|
import { DeleteTwotone, EditTwotone } from '@vicons/antd'; |
||||||
|
import { IconPool } from '@/components/AntDesignVue/Icon/index.js'; |
||||||
|
|
||||||
|
const baseDataStore = useBaseDataStore(); |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
dataSource: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
default: () => ({ |
||||||
|
handleTableChange: () => {}, |
||||||
|
}), |
||||||
|
}, |
||||||
|
columnList: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
}); |
||||||
|
const tableColumnObject = { |
||||||
|
index: { |
||||||
|
title: '序号', |
||||||
|
key: 'index', |
||||||
|
width: 70, // 你可以根据需要设置列宽 |
||||||
|
customRender: ({ text, record, index, column }) => `${index + 1}`, // 使用索引 + 1 来显示序号 |
||||||
|
}, |
||||||
|
dictKey: { |
||||||
|
title: '字典标识', |
||||||
|
dataIndex: 'dictKey', |
||||||
|
key: 'dictKey', |
||||||
|
resizable: true, |
||||||
|
width: 200 |
||||||
|
}, |
||||||
|
dictName: { |
||||||
|
title: '字典名称', |
||||||
|
dataIndex: 'dictName', |
||||||
|
key: 'dictName', |
||||||
|
resizable: true, |
||||||
|
width: 200 |
||||||
|
}, |
||||||
|
dictIcon: { |
||||||
|
title: '字典图标', |
||||||
|
dataIndex: 'dictIcon', |
||||||
|
customRender: ({ text, record, index, column }) => (text ? h(IconPool[text], { style: { fontSize: '20px' } }) : null), |
||||||
|
key: 'dictIcon', |
||||||
|
}, |
||||||
|
dictType: { |
||||||
|
title: '字典类型', |
||||||
|
dataIndex: 'dictType', |
||||||
|
key: 'dictType', |
||||||
|
customRender: ({ text, record, index, column }) => baseDataStore.state.dictTypeList.find((item) => item.value == text)?.label, |
||||||
|
}, |
||||||
|
serviceKey: { |
||||||
|
title: '所属服务', |
||||||
|
dataIndex: 'serviceKey', |
||||||
|
key: 'serviceKey', |
||||||
|
}, |
||||||
|
haveChildren: { |
||||||
|
title: '子项', |
||||||
|
dataIndex: 'haveChildren', |
||||||
|
key: 'haveChildren', |
||||||
|
width: '50px', |
||||||
|
}, |
||||||
|
createtime: { |
||||||
|
title: '创建时间', |
||||||
|
dataIndex: 'createtime', |
||||||
|
key: 'createtime', |
||||||
|
width: '140px', |
||||||
|
}, |
||||||
|
createName: { |
||||||
|
title: '创建人', |
||||||
|
dataIndex: 'createName', |
||||||
|
key: 'createName', |
||||||
|
}, |
||||||
|
updatetime: { |
||||||
|
title: '更新时间', |
||||||
|
dataIndex: 'updatetime', |
||||||
|
key: 'updatetime', |
||||||
|
width: '140px', |
||||||
|
}, |
||||||
|
updateName: { |
||||||
|
title: '更新人', |
||||||
|
dataIndex: 'updateName', |
||||||
|
key: 'updateName', |
||||||
|
}, |
||||||
|
action: { |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
key: 'action', |
||||||
|
width: 100, |
||||||
|
align: 'center', |
||||||
|
}, |
||||||
|
}; |
||||||
|
const tableColumns = ref([]); |
||||||
|
watch(props.columnList, (columnList) => { |
||||||
|
makeColumn(); |
||||||
|
}); |
||||||
|
onMounted(() => { |
||||||
|
window.pino.info('DictTable Mounted'); |
||||||
|
makeColumn(); |
||||||
|
}); |
||||||
|
// ! 生成表格列定义 |
||||||
|
function makeColumn() { |
||||||
|
if (props.columnList && props.columnList.length > 0) { |
||||||
|
const existColumn = props.columnList.filter((i) => i.status === true); |
||||||
|
if (existColumn.length == 0) { |
||||||
|
tableColumns.value = Object.keys(tableColumnObject).map((column) => tableColumnObject[column]); |
||||||
|
} else { |
||||||
|
tableColumns.value = existColumn.map((column) => tableColumnObject[column.key]); |
||||||
|
} |
||||||
|
} else { |
||||||
|
tableColumns.value = Object.keys(tableColumnObject).map((column) => tableColumnObject[column]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function handleResizeColumn(w, col) { |
||||||
|
col.width = w; |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ATable |
||||||
|
style="height: 100%" |
||||||
|
:dataSource="props.dataSource" |
||||||
|
:columns="tableColumns" |
||||||
|
@change="props.methods.handleTableChange" |
||||||
|
:pagination="false" |
||||||
|
sticky |
||||||
|
@resizeColumn="handleResizeColumn" |
||||||
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" |
||||||
|
:scroll="{ scrollToFirstRowOnChange: true }" |
||||||
|
> |
||||||
|
<template #bodyCell="{ column, record }"> |
||||||
|
<template v-if="column?.key === 'action'"></template> |
||||||
|
</template> |
||||||
|
</ATable> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
@ -0,0 +1,40 @@ |
|||||||
|
<script setup> |
||||||
|
import { useBaseDataStore } from '@/stores/baseData.js'; |
||||||
|
import {DownOutlined, SmileOutlined} from '@vicons/antd'; |
||||||
|
import { onMounted, reactive, ref, watch } from 'vue'; |
||||||
|
import { IconPool } from '@/components/AntDesignVue/Icon/index.js'; |
||||||
|
const baseDataStore = useBaseDataStore(); |
||||||
|
|
||||||
|
// ! 树字段重置 |
||||||
|
const fieldNames = reactive({ |
||||||
|
children:'children', title:'label', key:'id' |
||||||
|
}); |
||||||
|
|
||||||
|
// 当页面加载时 |
||||||
|
onMounted(() => { |
||||||
|
window.pino.info('DictTree Mounted'); |
||||||
|
// ! 检测获取字典列表 |
||||||
|
if (baseDataStore.state.dictList?.length == 0) { |
||||||
|
baseDataStore.getDictList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ATree |
||||||
|
:treeData="baseDataStore.state.dictTree" |
||||||
|
:show-line="true" |
||||||
|
show-icon |
||||||
|
:fieldNames="fieldNames" |
||||||
|
> |
||||||
|
<!-- <template #switcherIcon="{ switcherCls, status }"><down-outlined style="width: 16px;color: red" :class="switcherCls" /></template>--> |
||||||
|
<template #icon="all"> |
||||||
|
<!-- <div v-if="all.label == 'test'">{{all}}</div>--> |
||||||
|
<span v-if="!all.meta.dictIcon">N</span> |
||||||
|
<component v-else :is="IconPool[all.meta.dictIcon]" /> |
||||||
|
</template> |
||||||
|
<!-- <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>--> |
||||||
|
</ATree> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
Loading…
Reference in new issue