|
|
|
@ -1,17 +1,17 @@
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { ref, watch, h } from 'vue'
|
|
|
|
import { h, ref, watch } from 'vue'
|
|
|
|
import type { TreeProps } from 'ant-design-vue';
|
|
|
|
import type { TreeProps } from 'ant-design-vue'
|
|
|
|
import difference from 'lodash-es/difference';
|
|
|
|
import difference from 'lodash-es/difference'
|
|
|
|
import type { Dayjs } from 'dayjs';
|
|
|
|
import type { Dayjs } from 'dayjs'
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
|
|
|
|
ReloadOutlined,
|
|
|
|
SearchOutlined,
|
|
|
|
SearchOutlined,
|
|
|
|
UndoOutlined,
|
|
|
|
UndoOutlined,
|
|
|
|
ReloadOutlined
|
|
|
|
} from '@ant-design/icons-vue'
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type RangeValue = [Dayjs, Dayjs];
|
|
|
|
type RangeValue = [Dayjs, Dayjs]
|
|
|
|
const valTime = ref<RangeValue>();
|
|
|
|
const valTime = ref<RangeValue>()
|
|
|
|
// 左边
|
|
|
|
// 左边
|
|
|
|
const treeData: TreeProps['treeData'] = [
|
|
|
|
const treeData: TreeProps['treeData'] = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
@ -20,11 +20,11 @@ const treeData: TreeProps['treeData'] = [
|
|
|
|
children: [
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '城市矿产科技',
|
|
|
|
title: '城市矿产科技',
|
|
|
|
key: '0-0-1'
|
|
|
|
key: '0-0-1',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '日照济钢金属',
|
|
|
|
title: '日照济钢金属',
|
|
|
|
key: '0-0-2'
|
|
|
|
key: '0-0-2',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '济钢愿景工业',
|
|
|
|
title: '济钢愿景工业',
|
|
|
|
@ -32,69 +32,70 @@ const treeData: TreeProps['treeData'] = [
|
|
|
|
children: [
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '废钢',
|
|
|
|
title: '废钢',
|
|
|
|
key: '0-0-3-1'
|
|
|
|
key: '0-0-3-1',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '废铁',
|
|
|
|
title: '废铁',
|
|
|
|
key: '0-0-3-2'
|
|
|
|
key: '0-0-3-2',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '废铝',
|
|
|
|
title: '废铝',
|
|
|
|
key: '0-0-3-3'
|
|
|
|
key: '0-0-3-3',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '废纸',
|
|
|
|
title: '废纸',
|
|
|
|
key: '0-0-3-4'
|
|
|
|
key: '0-0-3-4',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '煤炭',
|
|
|
|
title: '煤炭',
|
|
|
|
key: '0-0-3-5'
|
|
|
|
key: '0-0-3-5',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
]
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '城市矿产科技（佛山）',
|
|
|
|
title: '城市矿产科技（佛山）',
|
|
|
|
key: '0-0-4'
|
|
|
|
key: '0-0-4',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
];
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
const expandedKeys = ref<string[]>(['0-0']);
|
|
|
|
const expandedKeys = ref<string[]>(['0-0'])
|
|
|
|
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
|
|
|
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1'])
|
|
|
|
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
|
|
|
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1'])
|
|
|
|
watch(expandedKeys, () => {
|
|
|
|
watch(expandedKeys, () => {
|
|
|
|
console.log('expandedKeys', expandedKeys);
|
|
|
|
console.log('expandedKeys', expandedKeys)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
watch(selectedKeys, () => {
|
|
|
|
watch(selectedKeys, () => {
|
|
|
|
console.log('selectedKeys', selectedKeys);
|
|
|
|
console.log('selectedKeys', selectedKeys)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
watch(checkedKeys, () => {
|
|
|
|
watch(checkedKeys, () => {
|
|
|
|
console.log('checkedKeys', checkedKeys);
|
|
|
|
console.log('checkedKeys', checkedKeys)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
const handleExpand = (keys: string[], { expanded, node }) => {
|
|
|
|
function handleExpand(keys: string[], { expanded, node }) {
|
|
|
|
// node.parent add from 3.0.0-alpha.10
|
|
|
|
// node.parent add from 3.0.0-alpha.10
|
|
|
|
const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);
|
|
|
|
const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key)
|
|
|
|
if (expanded) {
|
|
|
|
if (expanded)
|
|
|
|
expandedKeys.value = difference(keys, tempKeys).concat(node.key);
|
|
|
|
expandedKeys.value = difference(keys, tempKeys).concat(node.key)
|
|
|
|
} else {
|
|
|
|
|
|
|
|
expandedKeys.value = keys;
|
|
|
|
else
|
|
|
|
}
|
|
|
|
expandedKeys.value = keys
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
// 右边
|
|
|
|
// 右边
|
|
|
|
const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
|
|
|
|
const headStyleV: any = { 'color': '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
|
|
|
|
const rowSelection = ref({
|
|
|
|
const rowSelection = ref({
|
|
|
|
checkStrictly: false,
|
|
|
|
checkStrictly: false,
|
|
|
|
onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
|
|
|
|
onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
|
|
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
|
|
|
|
onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
|
|
|
|
console.log(record, selected, selectedRows);
|
|
|
|
console.log(record, selected, selectedRows)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
|
|
|
|
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
|
|
|
|
console.log(selected, selectedRows, changeRows);
|
|
|
|
console.log(selected, selectedRows, changeRows)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
})
|
|
|
|
const columns: any = [
|
|
|
|
const columns: any = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '客户名称',
|
|
|
|
title: '客户名称',
|
|
|
|
@ -102,85 +103,85 @@ const columns: any = [
|
|
|
|
key: 'k1a',
|
|
|
|
key: 'k1a',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
fixed: 'left',
|
|
|
|
fixed: 'left',
|
|
|
|
width: 150
|
|
|
|
width: 150,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '客户分类',
|
|
|
|
title: '客户分类',
|
|
|
|
dataIndex: 'k2',
|
|
|
|
dataIndex: 'k2',
|
|
|
|
key: 'k2',
|
|
|
|
key: 'k2',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 120
|
|
|
|
width: 120,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '客户类型',
|
|
|
|
title: '客户类型',
|
|
|
|
dataIndex: 'k3',
|
|
|
|
dataIndex: 'k3',
|
|
|
|
key: 'k3',
|
|
|
|
key: 'k3',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 120
|
|
|
|
width: 120,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '资金款项',
|
|
|
|
title: '资金款项',
|
|
|
|
dataIndex: 'k4',
|
|
|
|
dataIndex: 'k4',
|
|
|
|
key: 'k4',
|
|
|
|
key: 'k4',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 120
|
|
|
|
width: 120,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '合作模式',
|
|
|
|
title: '合作模式',
|
|
|
|
dataIndex: 'k5a',
|
|
|
|
dataIndex: 'k5a',
|
|
|
|
key: 'k5a',
|
|
|
|
key: 'k5a',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '隶属机构/业务线',
|
|
|
|
title: '隶属机构/业务线',
|
|
|
|
dataIndex: 'k6a',
|
|
|
|
dataIndex: 'k6a',
|
|
|
|
key: 'k6a',
|
|
|
|
key: 'k6a',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '状态',
|
|
|
|
title: '状态',
|
|
|
|
dataIndex: 'k7',
|
|
|
|
dataIndex: 'k7',
|
|
|
|
key: 'k7',
|
|
|
|
key: 'k7',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '客户分级',
|
|
|
|
title: '客户分级',
|
|
|
|
dataIndex: 'k8',
|
|
|
|
dataIndex: 'k8',
|
|
|
|
key: 'k8',
|
|
|
|
key: 'k8',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '归属人员',
|
|
|
|
title: '归属人员',
|
|
|
|
dataIndex: 'k9',
|
|
|
|
dataIndex: 'k9',
|
|
|
|
key: 'k9',
|
|
|
|
key: 'k9',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '新增时间',
|
|
|
|
title: '新增时间',
|
|
|
|
dataIndex: 'k10a',
|
|
|
|
dataIndex: 'k10a',
|
|
|
|
key: 'k10a',
|
|
|
|
key: 'k10a',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '更新时间',
|
|
|
|
title: '更新时间',
|
|
|
|
dataIndex: 'k11a',
|
|
|
|
dataIndex: 'k11a',
|
|
|
|
key: 'k11a',
|
|
|
|
key: 'k11a',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
width: 200
|
|
|
|
width: 200,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '操作',
|
|
|
|
title: '操作',
|
|
|
|
dataIndex: 'key',
|
|
|
|
dataIndex: 'key',
|
|
|
|
key: 'key',
|
|
|
|
key: 'key',
|
|
|
|
fixed: 'right',
|
|
|
|
fixed: 'right',
|
|
|
|
width: 100
|
|
|
|
width: 100,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
]
|
|
|
|
]
|
|
|
|
const dataSource: any = [
|
|
|
|
const dataSource: any = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
@ -201,51 +202,85 @@ const dataSource: any = [
|
|
|
|
k10b: '2023-09-03 23:26:08',
|
|
|
|
k10b: '2023-09-03 23:26:08',
|
|
|
|
k11a: '康宁',
|
|
|
|
k11a: '康宁',
|
|
|
|
k11b: '2023-09-03 23:26:08',
|
|
|
|
k11b: '2023-09-03 23:26:08',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
];
|
|
|
|
]
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<a-row :wrap="false" class="branch-y1">
|
|
|
|
<a-row :wrap="false" class="branch-y1">
|
|
|
|
<a-col flex="1 1 auto">
|
|
|
|
<a-col flex="1 1 auto">
|
|
|
|
<a-card title="客户信息" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
|
|
|
|
<a-card title="客户信息" :bordered="false" style="border-radius: 3px;" :head-style="headStyleV">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="4">
|
|
|
|
<a-col :span="4">
|
|
|
|
<div style="padding: 0px 20px;"><a-input placeholder="公司/业务线" /></div>
|
|
|
|
<div style="padding: 0 20px;">
|
|
|
|
<div style="padding: 0px 20px;"><a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
|
|
|
|
<a-input placeholder="公司/业务线" />
|
|
|
|
:tree-data="treeData" @expand="handleExpand">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style="padding: 0 20px;">
|
|
|
|
|
|
|
|
<a-tree
|
|
|
|
|
|
|
|
v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
|
|
|
|
|
|
|
|
:tree-data="treeData" @expand="handleExpand"
|
|
|
|
|
|
|
|
>
|
|
|
|
<template #title="{ title, key }">
|
|
|
|
<template #title="{ title, key }">
|
|
|
|
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
|
|
|
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
|
|
|
<template v-else>{{ title }}</template>
|
|
|
|
<template v-else>
|
|
|
|
|
|
|
|
{{ title }}
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</a-tree></div>
|
|
|
|
</a-tree>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="20">
|
|
|
|
<a-col :span="20">
|
|
|
|
<a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
|
|
|
|
<a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :head-style="headStyleV">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
|
|
|
|
<a-col flex="1 1 auto" style="padding: 0 0 16px;">
|
|
|
|
<a-space :size="[8, 16]" wrap>
|
|
|
|
<a-space :size="[8, 16]" wrap>
|
|
|
|
<a-input placeholder="客户名称或编号" />
|
|
|
|
<a-input placeholder="客户名称或编号" />
|
|
|
|
<a-select allowClear placeholder="客户状态">
|
|
|
|
<a-select allow-clear placeholder="客户状态">
|
|
|
|
<a-select-option value="opt1">待确认</a-select-option>
|
|
|
|
<a-select-option value="opt1">
|
|
|
|
<a-select-option value="opt2">待认证</a-select-option>
|
|
|
|
待确认
|
|
|
|
<a-select-option value="opt3">待审核</a-select-option>
|
|
|
|
</a-select-option>
|
|
|
|
<a-select-option value="opt4">待签署</a-select-option>
|
|
|
|
<a-select-option value="opt2">
|
|
|
|
<a-select-option value="opt5">正常合作</a-select-option>
|
|
|
|
待认证
|
|
|
|
<a-select-option value="opt6">暂停合作</a-select-option>
|
|
|
|
</a-select-option>
|
|
|
|
<a-select-option value="opt7">已关闭</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>
|
|
|
|
<a-select allowClear placeholder="客户类型">
|
|
|
|
<a-select allow-clear placeholder="客户类型">
|
|
|
|
<a-select-option value="opt1">钢厂</a-select-option>
|
|
|
|
<a-select-option value="opt1">
|
|
|
|
<a-select-option value="opt2">钢贸企业</a-select-option>
|
|
|
|
钢厂
|
|
|
|
<a-select-option value="opt3">VIP大客户</a-select-option>
|
|
|
|
</a-select-option>
|
|
|
|
<a-select-option value="opt4">其他企业</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-select>
|
|
|
|
<a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
|
|
|
|
<a-button type="primary" :icon="h(SearchOutlined)">
|
|
|
|
<a-button :icon="h(UndoOutlined)">重置</a-button>
|
|
|
|
查询
|
|
|
|
|
|
|
|
</a-button>
|
|
|
|
|
|
|
|
<a-button :icon="h(UndoOutlined)">
|
|
|
|
|
|
|
|
重置
|
|
|
|
|
|
|
|
</a-button>
|
|
|
|
</a-space>
|
|
|
|
</a-space>
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
|
|
|
|
<a-col flex="0 0 20px" style="padding: 10px 0 16px;">
|
|
|
|
<a-space :size="[8, 16]" wrap>
|
|
|
|
<a-space :size="[8, 16]" wrap>
|
|
|
|
<ReloadOutlined title="刷新列表" style="cursor: pointer;" />
|
|
|
|
<ReloadOutlined title="刷新列表" style="cursor: pointer;" />
|
|
|
|
</a-space>
|
|
|
|
</a-space>
|
|
|
|
@ -253,10 +288,12 @@ const dataSource: any = [
|
|
|
|
</a-row>
|
|
|
|
</a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="24">
|
|
|
|
<a-col :span="24">
|
|
|
|
<a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
|
|
|
|
<a-table
|
|
|
|
|
|
|
|
class="ant-table-striped" :data-source="dataSource" :row-selection="rowSelection"
|
|
|
|
:columns="columns"
|
|
|
|
:columns="columns"
|
|
|
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')"
|
|
|
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')"
|
|
|
|
:scroll="{ x: 1500, y: 500 }">
|
|
|
|
:scroll="{ x: 1500, y: 500 }"
|
|
|
|
|
|
|
|
>
|
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
|
<template v-if="column.key === 'k1a'">
|
|
|
|
<template v-if="column.key === 'k1a'">
|
|
|
|
<a>
|
|
|
|
<a>
|
|
|
|
@ -310,20 +347,20 @@ const dataSource: any = [
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'k5'">
|
|
|
|
<template v-else-if="column.key === 'k5'">
|
|
|
|
<template v-if="record.k5 == true">
|
|
|
|
<template v-if="record.k5 == true">
|
|
|
|
<div class="dot-true"></div>启用
|
|
|
|
<div class="dot-true" />启用
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<template v-else>
|
|
|
|
<div class="dot-false"></div>禁用
|
|
|
|
<div class="dot-false" />禁用
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'k7'">
|
|
|
|
<template v-else-if="column.key === 'k7'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<span class="dot-true"></span><span>已关闭</span>
|
|
|
|
<span class="dot-true" /><span>已关闭</span>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<div class="dot-true"></div>
|
|
|
|
<div class="dot-true" />
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="18">
|
|
|
|
<a-col :span="18">
|
|
|
|
<div>已关闭</div>
|
|
|
|
<div>已关闭</div>
|
|
|
|
@ -333,7 +370,7 @@ const dataSource: any = [
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<div class="dot-true"></div>
|
|
|
|
<div class="dot-true" />
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="18">
|
|
|
|
<a-col :span="18">
|
|
|
|
<div>已关闭</div>
|
|
|
|
<div>已关闭</div>
|
|
|
|
@ -343,7 +380,7 @@ const dataSource: any = [
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<div class="dot-true"></div>
|
|
|
|
<div class="dot-true" />
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="18">
|
|
|
|
<a-col :span="18">
|
|
|
|
<div>已关闭</div>
|
|
|
|
<div>已关闭</div>
|
|
|
|
@ -353,7 +390,7 @@ const dataSource: any = [
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<div class="dot-true"></div>
|
|
|
|
<div class="dot-true" />
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="18">
|
|
|
|
<a-col :span="18">
|
|
|
|
<div>已关闭</div>
|
|
|
|
<div>已关闭</div>
|
|
|
|
@ -363,7 +400,7 @@ const dataSource: any = [
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<template v-if="record.k7 == 'opt1'">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<div class="dot-true"></div>
|
|
|
|
<div class="dot-true" />
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="18">
|
|
|
|
<a-col :span="18">
|
|
|
|
<div>已关闭</div>
|
|
|
|
<div>已关闭</div>
|
|
|
|
@ -373,7 +410,7 @@ const dataSource: any = [
|
|
|
|
<template v-else>
|
|
|
|
<template v-else>
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<div class="dot-false"></div>
|
|
|
|
<div class="dot-false" />
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="18">
|
|
|
|
<a-col :span="18">
|
|
|
|
<div>离线</div>
|
|
|
|
<div>离线</div>
|
|
|
|
@ -382,7 +419,7 @@ const dataSource: any = [
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'k8'">
|
|
|
|
<template v-else-if="column.key === 'k8'">
|
|
|
|
<a-rate :value=record.k8 disabled />
|
|
|
|
<a-rate :value="record.k8" disabled />
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'k10a'">
|
|
|
|
<template v-else-if="column.key === 'k10a'">
|
|
|
|
<a-row>
|
|
|
|
<a-row>
|
|
|
|
@ -425,31 +462,31 @@ const dataSource: any = [
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
|
|
|
|
: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);
|
|
|
|
color: rgb(102, 102, 102);
|
|
|
|
background-color: rgb(245 245 245);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
|
|
|
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
|
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
|
background-color: rgb(255 255 255);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
|
|
|
|
:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
|
|
|
|
background-color: rgb(245, 245, 245);
|
|
|
|
background-color: rgb(245 245 245);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dot-true {
|
|
|
|
.dot-true {
|
|
|
|
width: 10px;
|
|
|
|
width: 10px;
|
|
|
|
height: 10px;
|
|
|
|
height: 10px;
|
|
|
|
|
|
|
|
margin: 7px 0;
|
|
|
|
background-color: green;
|
|
|
|
background-color: green;
|
|
|
|
border-radius: 100%;
|
|
|
|
border-radius: 100%;
|
|
|
|
margin: 7px 0px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dot-false {
|
|
|
|
.dot-false {
|
|
|
|
width: 10px;
|
|
|
|
width: 10px;
|
|
|
|
height: 10px;
|
|
|
|
height: 10px;
|
|
|
|
|
|
|
|
margin: 7px 0;
|
|
|
|
background-color: red;
|
|
|
|
background-color: red;
|
|
|
|
border-radius: 100%;
|
|
|
|
border-radius: 100%;
|
|
|
|
margin: 7px 0px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
