mhsnet
1 year ago
parent
0605a44386
commit
42973357f6
@ -0,0 +1,317 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, h } from 'vue'
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
import difference from 'lodash-es/difference';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import {
|
||||
SearchOutlined,
|
||||
UndoOutlined,
|
||||
ReloadOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
const valTime = ref<RangeValue>();
|
||||
// 左边
|
||||
const treeData: TreeProps['treeData'] = [
|
||||
{
|
||||
title: '济钢城市矿产',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{
|
||||
title: '日照济钢金属',
|
||||
key: '0-0-1'
|
||||
},
|
||||
{
|
||||
title: '城市矿产科技',
|
||||
key: '0-0-2',
|
||||
children: [
|
||||
{
|
||||
key: '0-0-2-1', title: ' 行政组'
|
||||
},
|
||||
{ key: '0-0-3-2', title: ' 领导组' },
|
||||
{ key: '0-0-3-3', title: ' 再生资源事业部' },
|
||||
{ key: '0-0-3-4', title: ' 采购组' },
|
||||
{ key: '0-0-3-5', title: ' 销售组' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '济钢愿景工业',
|
||||
key: '0-0-3'
|
||||
},
|
||||
{
|
||||
title: '城市矿产科技（佛山）',
|
||||
key: '0-0-4'
|
||||
}
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
const expandedKeys = ref<string[]>(['0-0']);
|
||||
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: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
|
||||
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>
|
||||
|
||||
<template>
|
||||
<a-row :wrap="false" class="branch-y1">
|
||||
<a-col flex="1 1 auto">
|
||||
<a-card title="组织信息" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
|
||||
<a-row>
|
||||
<a-col :span="4">
|
||||
<div style="padding: 0px 20px;"><a-input placeholder="企业/部门" /></div>
|
||||
<div style="padding: 0px 20px;"><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></div>
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
|
||||
<a-row>
|
||||
<a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
|
||||
<a-space :size="[8, 16]" wrap>
|
||||
<a-input placeholder="分支机构编号/名称/负责人" />
|
||||
<a-select allowClear placeholder="状态选项">
|
||||
<a-select-option value="enable">启用</a-select-option>
|
||||
<a-select-option value="disable">禁用</a-select-option>
|
||||
</a-select>
|
||||
<a-range-picker v-model:value="valTime" />
|
||||
<a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
|
||||
<a-button :icon="h(UndoOutlined)">重置</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
|
||||
<a-space :size="[8, 16]" wrap>
|
||||
<ReloadOutlined title="刷新列表" style="cursor: pointer;" />
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<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>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in new issue