mhsnet
1 year ago
parent
4e818b8be1
commit
321e4fb688
@ -1,11 +1,290 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import type { TreeProps } from 'ant-design-vue';
|
||||||
|
import difference from 'lodash-es/difference';
|
||||||
|
// 左边
|
||||||
|
const treeData: TreeProps['treeData'] = [
|
||||||
|
{
|
||||||
|
title: '济钢城市矿产',
|
||||||
|
key: '0-0',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '城市矿产科技',
|
||||||
|
key: '0-0-1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '日照济钢金属',
|
||||||
|
key: '0-0-2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '济钢愿景工业',
|
||||||
|
key: '0-0-3',
|
||||||
|
children: [
|
||||||
|
{ key: '0-0-3-1', title: ' 废钢' },
|
||||||
|
{ key: '0-0-3-2', title: ' 废铝' },
|
||||||
|
{ key: '0-0-3-3', title: ' 废铁' },
|
||||||
|
{
|
||||||
|
key: '0-0-3-4', title: ' 废铜',
|
||||||
|
children: [
|
||||||
|
{ key: '0-0-3-4-1', title: ' 仓库名称A' },
|
||||||
|
{ key: '0-0-3-4-2', title: ' 仓库名称B' },
|
||||||
|
{ key: '0-0-3-4-3', title: ' 仓库名称C' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ key: '0-0-3-5', title: ' 煤炭' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '城市矿产科技（佛山）',
|
||||||
|
key: '0-0-4'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const expandedKeys = ref<string[]>([]);
|
||||||
|
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||||
|
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||||
|
watch(expandedKeys, () => {
|
||||||
|
console.log('expandedKeys', expandedKeys);
|
||||||
|
});
|
||||||
|
watch(selectedKeys, () => {
|
||||||
|
console.log('selectedKeys', selectedKeys);
|
||||||
|
});
|
||||||
|
watch(checkedKeys, () => {
|
||||||
|
console.log('checkedKeys', checkedKeys);
|
||||||
|
});
|
||||||
|
const handleExpand = (keys: string[], { expanded, node }) => {
|
||||||
|
// node.parent add from 3.0.0-alpha.10
|
||||||
|
const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);
|
||||||
|
if (expanded) {
|
||||||
|
expandedKeys.value = difference(keys, tempKeys).concat(node.key);
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = keys;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 右边
|
||||||
|
const headStyleV: any = { color: 'rgb(102, 102, 102)', 'background-color': 'rgb(249, 249, 249)', 'margin': '0px' }
|
||||||
|
const rowSelection = ref({
|
||||||
|
checkStrictly: false,
|
||||||
|
onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
|
||||||
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||||
|
},
|
||||||
|
onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
|
||||||
|
console.log(record, selected, selectedRows);
|
||||||
|
},
|
||||||
|
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
|
||||||
|
console.log(selected, selectedRows, changeRows);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const columns: any = [
|
||||||
|
{
|
||||||
|
title: '分支机构名称',
|
||||||
|
dataIndex: 'k1a',
|
||||||
|
key: 'k1a',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '负责人',
|
||||||
|
dataIndex: 'k2',
|
||||||
|
key: 'k2',
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '联系电话',
|
||||||
|
dataIndex: 'k3',
|
||||||
|
key: 'k3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '邮箱',
|
||||||
|
dataIndex: 'k4',
|
||||||
|
key: 'k4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '包含仓库',
|
||||||
|
dataIndex: 'k5',
|
||||||
|
key: 'k5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '关联员工',
|
||||||
|
dataIndex: 'k6',
|
||||||
|
key: 'k6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'k7',
|
||||||
|
key: 'k7',
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最后更新时间',
|
||||||
|
dataIndex: 'k8',
|
||||||
|
key: 'k8',
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'k9',
|
||||||
|
key: 'k9',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const dataSource: any = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
k1a: '济钢城市矿产科技有限公司',
|
||||||
|
k1b: 'JGCSKC202309030001',
|
||||||
|
k1c: 'JGCSKC202309030001',
|
||||||
|
k2: '徐守亮',
|
||||||
|
k3: '18612345678',
|
||||||
|
k4: '12345678@126.com',
|
||||||
|
k5: 100,
|
||||||
|
k6: 100,
|
||||||
|
k7: true,
|
||||||
|
k8: '2023-09-03 23:26:08',
|
||||||
|
k9: '详情',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
k1a: '日照济钢金属科技有限公司',
|
||||||
|
k1b: 'JGCSKC202309030002',
|
||||||
|
k1c: 'JGCSKC202309030001',
|
||||||
|
k2: '高鹏',
|
||||||
|
k3: '18612344321',
|
||||||
|
k4: '12345678@126.com',
|
||||||
|
k5: 50,
|
||||||
|
k6: 200,
|
||||||
|
k7: true,
|
||||||
|
k8: '2023-09-03 23:26:08',
|
||||||
|
k9: '详情',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
k1a: '济钢城市矿产科技（佛山）有限公司',
|
||||||
|
k1b: 'JGCSKC202309030003',
|
||||||
|
k1c: 'JGCSKC202309030001',
|
||||||
|
k2: '王恒山',
|
||||||
|
k3: '18612344321',
|
||||||
|
k4: '12345678@126.com',
|
||||||
|
k5: 20,
|
||||||
|
k6: 300,
|
||||||
|
k7: false,
|
||||||
|
k8: '2023-09-03 23:26:08',
|
||||||
|
k9: '详情',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
k1a: '山东济钢愿景工业科技有限公司',
|
||||||
|
k1b: 'JGCSKC202309030004',
|
||||||
|
k1c: 'JGCSKC202309030001',
|
||||||
|
k2: '邹慧丽',
|
||||||
|
k3: '18612344321',
|
||||||
|
k4: '12345678@126.com',
|
||||||
|
k5: 30,
|
||||||
|
k6: 400,
|
||||||
|
k7: true,
|
||||||
|
k8: '2023-09-03 23:26:08',
|
||||||
|
k9: '详情',
|
||||||
|
}
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="basic-information">
|
<div class="branch">
|
||||||
分支机构内容
|
<a-card title="分支机构" :bordered="false" style="width: 1520px" :headStyle="headStyleV">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="4">
|
||||||
|
<a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys" :tree-data="treeData"
|
||||||
|
@expand="handleExpand">
|
||||||
|
<template #title="{ title, key }">
|
||||||
|
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
||||||
|
<template v-else>{{ title }}</template>
|
||||||
|
</template>
|
||||||
|
</a-tree>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="20">
|
||||||
|
<a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" :headStyle="headStyleV">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
|
||||||
|
:columns="columns"
|
||||||
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'k1a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="5">
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a-image :width="40"
|
||||||
|
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="19">
|
||||||
|
<div>{{ record.k1a }}</div>
|
||||||
|
<div>{{ record.k1b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k7'">
|
||||||
|
<template v-if="record.k7 == true">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div class="dot-true"></div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18">
|
||||||
|
<div>启用</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div class="dot-false"></div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18">
|
||||||
|
<div>禁用</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k9'">
|
||||||
|
<div><a>详情</a></div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
|
||||||
|
background-color: rgb(245, 245, 245);
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
|
||||||
|
background-color: rgb(245, 245, 245);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot-true {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: green;
|
||||||
|
border-radius: 100%;
|
||||||
|
margin: 7px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot-false {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: red;
|
||||||
|
border-radius: 100%;
|
||||||
|
margin: 7px 0px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in new issue