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