mhsnet
1 year ago
parent
78f052b3ac
commit
dbc20379eb
@ -1,11 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="basic-information">
|
|
||||||
业务组织内容
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,11 +1,455 @@
|
|||||||
<script lang="ts" setup>
|
<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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '济钢愿景工业',
|
||||||
|
key: '0-0-3',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '废钢',
|
||||||
|
key: '0-0-3-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: '城市矿产科技（佛山）',
|
||||||
|
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',
|
||||||
|
sorter: true,
|
||||||
|
fixed: 'left',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户分类',
|
||||||
|
dataIndex: 'k2',
|
||||||
|
key: 'k2',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户类型',
|
||||||
|
dataIndex: 'k3',
|
||||||
|
key: 'k3',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '资金款项',
|
||||||
|
dataIndex: 'k4',
|
||||||
|
key: 'k4',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '合作模式',
|
||||||
|
dataIndex: 'k5a',
|
||||||
|
key: 'k5a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '隶属机构/业务线',
|
||||||
|
dataIndex: 'k6a',
|
||||||
|
key: 'k6a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'k7',
|
||||||
|
key: 'k7',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户分级',
|
||||||
|
dataIndex: 'k8',
|
||||||
|
key: 'k8',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '归属人员',
|
||||||
|
dataIndex: 'k9',
|
||||||
|
key: 'k9',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新增时间',
|
||||||
|
dataIndex: 'k10a',
|
||||||
|
key: 'k10a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
dataIndex: 'k11a',
|
||||||
|
key: 'k11a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const dataSource: any = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
k1a: '客户名称',
|
||||||
|
k1b: '20230910001',
|
||||||
|
k2: '一级',
|
||||||
|
k3: '钢厂',
|
||||||
|
k4: '垫资',
|
||||||
|
k5a: '联营',
|
||||||
|
k5b: '业绩返点',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '已关闭',
|
||||||
|
k8: '1',
|
||||||
|
k9: '康宁',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
}
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="basic-information">
|
<a-row :wrap="false" class="branch-y1">
|
||||||
客户信息内容
|
<a-col flex="1 1 auto">
|
||||||
</div>
|
<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="opt1">待确认</a-select-option>
|
||||||
|
<a-select-option value="opt2">待认证</a-select-option>
|
||||||
|
<a-select-option value="opt3">待审核</a-select-option>
|
||||||
|
<a-select-option value="opt4">待签署</a-select-option>
|
||||||
|
<a-select-option value="opt5">正常合作</a-select-option>
|
||||||
|
<a-select-option value="opt6">暂停合作</a-select-option>
|
||||||
|
<a-select-option value="opt7">已关闭</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-select allowClear placeholder="客户类型">
|
||||||
|
<a-select-option value="opt1">钢厂</a-select-option>
|
||||||
|
<a-select-option value="opt2">钢贸企业</a-select-option>
|
||||||
|
<a-select-option value="opt3">VIP大客户</a-select-option>
|
||||||
|
<a-select-option value="opt4">其他企业</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<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')"
|
||||||
|
:scroll="{ x: 1500, y: 500 }">
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'k1a'">
|
||||||
|
<a>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k1a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k1b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k5a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k5a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k5b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k6a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k6a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k6b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k4a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k4a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k4b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k5'">
|
||||||
|
<template v-if="record.k5 == true">
|
||||||
|
<div class="dot-true"></div>启用
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="dot-false"></div>禁用
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k7'">
|
||||||
|
<template v-if="record.k7 == 'opt1'">
|
||||||
|
<span class="dot-true"></span><span>已关闭</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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 === 'k8'">
|
||||||
|
<a-rate :value=record.k8 disabled />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k10a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k11a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'key'">
|
||||||
|
<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>
|
</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>
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="basic-information">
|
|
||||||
员工信息内容
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,11 +1,569 @@
|
|||||||
<script lang="ts" setup>
|
<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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '济钢愿景工业',
|
||||||
|
key: '0-0-3',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '废钢',
|
||||||
|
key: '0-0-3-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: '城市矿产科技（佛山）',
|
||||||
|
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',
|
||||||
|
sorter: true,
|
||||||
|
fixed: 'left',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '服务商分类',
|
||||||
|
dataIndex: 'k2',
|
||||||
|
key: 'k2',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '服务商类型',
|
||||||
|
dataIndex: 'k3',
|
||||||
|
key: 'k3',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '资金款项',
|
||||||
|
dataIndex: 'k4',
|
||||||
|
key: 'k4',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '合作模式',
|
||||||
|
dataIndex: 'k5a',
|
||||||
|
key: 'k5a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '隶属机构/业务线',
|
||||||
|
dataIndex: 'k6a',
|
||||||
|
key: 'k6a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'k7',
|
||||||
|
key: 'k7',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '供应商分级',
|
||||||
|
dataIndex: 'k8',
|
||||||
|
key: 'k8',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '归属人员',
|
||||||
|
dataIndex: 'k9',
|
||||||
|
key: 'k9',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新增时间',
|
||||||
|
dataIndex: 'k10a',
|
||||||
|
key: 'k10a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
dataIndex: 'k11a',
|
||||||
|
key: 'k11a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const dataSource: any = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910001',
|
||||||
|
k2: '一级',
|
||||||
|
k3: '仓储企业',
|
||||||
|
k4: '垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '资源服务',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '已关闭',
|
||||||
|
k8: '1',
|
||||||
|
k9: '康宁',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910002',
|
||||||
|
k2: '二级',
|
||||||
|
k3: '加工企业',
|
||||||
|
k4: '不垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '买断合作',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '待确认',
|
||||||
|
k8: '2',
|
||||||
|
k9: '开胜',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910003',
|
||||||
|
k2: '三级',
|
||||||
|
k3: '运输企业',
|
||||||
|
k4: '垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '买断合作',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '待认证',
|
||||||
|
k8: '3',
|
||||||
|
k9: '云鹏',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910004',
|
||||||
|
k2: '三级',
|
||||||
|
k3: '其他企业',
|
||||||
|
k4: '不垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '买断合作',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '待认证',
|
||||||
|
k8: '3',
|
||||||
|
k9: '云鹏',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '5',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910005',
|
||||||
|
k2: '一级',
|
||||||
|
k3: '仓储企业',
|
||||||
|
k4: '垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '资源服务',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '已关闭',
|
||||||
|
k8: '1',
|
||||||
|
k9: '康宁',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '6',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910006',
|
||||||
|
k2: '二级',
|
||||||
|
k3: '加工企业',
|
||||||
|
k4: '不垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '买断合作',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '待确认',
|
||||||
|
k8: '2',
|
||||||
|
k9: '开胜',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '7',
|
||||||
|
k1a: '服务商名称',
|
||||||
|
k1b: '20230910007',
|
||||||
|
k2: '三级',
|
||||||
|
k3: '运输企业',
|
||||||
|
k4: '不垫资',
|
||||||
|
k5a: '买断',
|
||||||
|
k5b: '买断合作',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '待认证',
|
||||||
|
k8: '3',
|
||||||
|
k9: '云鹏',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
}
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="basic-information">
|
<a-row :wrap="false" class="branch-y1">
|
||||||
服务商信息内容
|
<a-col flex="1 1 auto">
|
||||||
</div>
|
<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="opt1">待确认</a-select-option>
|
||||||
|
<a-select-option value="opt2">待认证</a-select-option>
|
||||||
|
<a-select-option value="opt3">待审核</a-select-option>
|
||||||
|
<a-select-option value="opt4">待签署</a-select-option>
|
||||||
|
<a-select-option value="opt5">正常合作</a-select-option>
|
||||||
|
<a-select-option value="opt6">暂停合作</a-select-option>
|
||||||
|
<a-select-option value="opt7">已关闭</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-select allowClear placeholder="客户类型">
|
||||||
|
<a-select-option value="opt1">钢厂</a-select-option>
|
||||||
|
<a-select-option value="opt2">钢贸企业</a-select-option>
|
||||||
|
<a-select-option value="opt3">VIP大客户</a-select-option>
|
||||||
|
<a-select-option value="opt4">其他企业</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<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')"
|
||||||
|
:scroll="{ x: 1500, y: 500 }">
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'k1a'">
|
||||||
|
<a>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k1a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k1b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k5a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k5a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k5b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k6a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k6a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k6b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k4a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k4a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k4b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k5'">
|
||||||
|
<template v-if="record.k5 == true">
|
||||||
|
<div class="dot-true"></div>启用
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="dot-false"></div>禁用
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k7'">
|
||||||
|
<template v-if="record.k7 == 'opt1'">
|
||||||
|
<span class="dot-true"></span><span>已关闭</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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 === 'k8'">
|
||||||
|
<a-rate :value=record.k8 disabled />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k10a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k11a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'key'">
|
||||||
|
<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>
|
</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>
|
||||||
@ -1,11 +1,455 @@
|
|||||||
<script lang="ts" setup>
|
<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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '济钢愿景工业',
|
||||||
|
key: '0-0-3',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '废钢',
|
||||||
|
key: '0-0-3-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: '城市矿产科技（佛山）',
|
||||||
|
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',
|
||||||
|
sorter: true,
|
||||||
|
fixed: 'left',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户分类',
|
||||||
|
dataIndex: 'k2',
|
||||||
|
key: 'k2',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户类型',
|
||||||
|
dataIndex: 'k3',
|
||||||
|
key: 'k3',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '资金款项',
|
||||||
|
dataIndex: 'k4',
|
||||||
|
key: 'k4',
|
||||||
|
sorter: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '合作模式',
|
||||||
|
dataIndex: 'k5a',
|
||||||
|
key: 'k5a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '隶属机构/业务线',
|
||||||
|
dataIndex: 'k6a',
|
||||||
|
key: 'k6a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'k7',
|
||||||
|
key: 'k7',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户分级',
|
||||||
|
dataIndex: 'k8',
|
||||||
|
key: 'k8',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '归属人员',
|
||||||
|
dataIndex: 'k9',
|
||||||
|
key: 'k9',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新增时间',
|
||||||
|
dataIndex: 'k10a',
|
||||||
|
key: 'k10a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
dataIndex: 'k11a',
|
||||||
|
key: 'k11a',
|
||||||
|
sorter: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const dataSource: any = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
k1a: '客户名称',
|
||||||
|
k1b: '20230910001',
|
||||||
|
k2: '一级',
|
||||||
|
k3: '钢厂',
|
||||||
|
k4: '垫资',
|
||||||
|
k5a: '联营',
|
||||||
|
k5b: '业绩返点',
|
||||||
|
k6a: '济钢城市矿产',
|
||||||
|
k6b: '废钢',
|
||||||
|
k7: '已关闭',
|
||||||
|
k8: '1',
|
||||||
|
k9: '康宁',
|
||||||
|
k10a: '康宁',
|
||||||
|
k10b: '2023-09-03 23:26:08',
|
||||||
|
k11a: '康宁',
|
||||||
|
k11b: '2023-09-03 23:26:08',
|
||||||
|
}
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="basic-information">
|
<a-row :wrap="false" class="branch-y1">
|
||||||
供应商信息内容
|
<a-col flex="1 1 auto">
|
||||||
</div>
|
<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="opt1">待确认</a-select-option>
|
||||||
|
<a-select-option value="opt2">待认证</a-select-option>
|
||||||
|
<a-select-option value="opt3">待审核</a-select-option>
|
||||||
|
<a-select-option value="opt4">待签署</a-select-option>
|
||||||
|
<a-select-option value="opt5">正常合作</a-select-option>
|
||||||
|
<a-select-option value="opt6">暂停合作</a-select-option>
|
||||||
|
<a-select-option value="opt7">已关闭</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-select allowClear placeholder="客户类型">
|
||||||
|
<a-select-option value="opt1">钢厂</a-select-option>
|
||||||
|
<a-select-option value="opt2">钢贸企业</a-select-option>
|
||||||
|
<a-select-option value="opt3">VIP大客户</a-select-option>
|
||||||
|
<a-select-option value="opt4">其他企业</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<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')"
|
||||||
|
:scroll="{ x: 1500, y: 500 }">
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'k1a'">
|
||||||
|
<a>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k1a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k1b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k5a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k5a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k5b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k6a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k6a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k6b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k4a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k4a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k4b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k5'">
|
||||||
|
<template v-if="record.k5 == true">
|
||||||
|
<div class="dot-true"></div>启用
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="dot-false"></div>禁用
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k7'">
|
||||||
|
<template v-if="record.k7 == 'opt1'">
|
||||||
|
<span class="dot-true"></span><span>已关闭</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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-if="record.k7 == 'opt1'">
|
||||||
|
<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 === 'k8'">
|
||||||
|
<a-rate :value=record.k8 disabled />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k10a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'k11a'">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10a }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div>{{ record.k10b }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'key'">
|
||||||
|
<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>
|
</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