ccongli-dev-1010
杨世强 1 year ago
commit f19083e8a7

@ -7,14 +7,14 @@ VITE_PUBLIC_PATH = /
# 本地开发代理,可以解决跨域及多地址代理
# 如果接口地址匹配到则会转发到http://localhost:3000防止本地出现跨域问题
# 可以有多个,注意多个不能换行,否则代理将会失效
VITE_PROXY = [["/dev-api","http://127.0.0.1:8091/admin-api"],["/upload","http://127.0.0.1:8091/admin-api/infra/file/upload"]]
VITE_PROXY = [["/dev-api","http://192.168.0.162:8091/admin-api"],["/upload","http://192.168.0.162:8091/admin-api/infra/file/upload"]]
# VITE_PROXY=[["/api","http://vben.xingyuv.com/test"]]
# 是否删除Console.log
VITE_DROP_CONSOLE = false
# 基础页面地址,例如 swagger 等页面
VITE_GLOB_BASE_URL = "http://127.0.0.1:8091"
VITE_GLOB_BASE_URL = "http://192.168.0.162:8091"
# 接口地址,如果没有跨域问题,直接在这里配置即可
VITE_GLOB_API_URL = /dev-api

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import BasicInfo from './src/BasicInfo.vue'
import AuthInfo from './src/AuthInfo.vue'
import Branch from './src/Branch.vue'
@ -10,9 +11,8 @@ import SupplierInfo from './src/SupplierInfo.vue'
import ProviderInfo from './src/ProviderInfo.vue'
import OperateRecords from './src/OperateRecords.vue'
import headerImg from '@/assets/images/test/w100h100.png'
import { DownOutlined } from '@ant-design/icons-vue';
const activeKey = ref('1');
const activeKey = ref('1')
</script>
<template>
@ -52,40 +52,72 @@ const activeKey = ref('1');
<DownOutlined />
</a-button>
</a-dropdown>
<a-button class="xy-right-one">编辑</a-button>
<a-button class="xy-right-one">打印</a-button>
<a-button class="xy-right-one">
编辑
</a-button>
<a-button class="xy-right-one">
打印
</a-button>
</div>
</a-col>
</a-row>
<a-row :wrap="false" class="y1y2">
<a-col flex="1 1 100px" class="y1y2x1">
<a-row :wrap="false" class="y1y2x1y1">
<a-col flex="85px"><span class="xy-label">商户代码</span></a-col>
<a-col flex="200px"><span class="xy-cnt">CO2023099999877</span></a-col>
<a-col flex="85px"><span class="xy-label">行业类型</span></a-col>
<a-col flex="200px"><span class="xy-cnt">资源</span></a-col>
<a-col flex="85px"><span class="xy-label">首联系人</span></a-col>
<a-col flex="200px"><span class="xy-cnt">徐守量2683902877255</span></a-col>
<a-col flex="85px">
<span class="xy-label">商户代码</span>
</a-col>
<a-col flex="200px">
<span class="xy-cnt">CO2023099999877</span>
</a-col>
<a-col flex="85px">
<span class="xy-label">行业类型</span>
</a-col>
<a-col flex="200px">
<span class="xy-cnt">资源</span>
</a-col>
<a-col flex="85px">
<span class="xy-label">首联系人</span>
</a-col>
<a-col flex="200px">
<span class="xy-cnt">徐守量2683902877255</span>
</a-col>
</a-row>
<a-row :wrap="false" class="y1y2x1y2">
<a-col flex="85px"><span class="xy-label">平台对接人</span></a-col>
<a-col flex="200px"><span class="xy-cnt">雪豹19340873890</span></a-col>
<a-col flex="85px"><span class="xy-label">创建时间</span></a-col>
<a-col flex="200px"><span class="xy-cnt">2023/09/03 2323:00</span></a-col>
<a-col flex="85px">
<span class="xy-label">平台对接人</span>
</a-col>
<a-col flex="200px">
<span class="xy-cnt">雪豹19340873890</span>
</a-col>
<a-col flex="85px">
<span class="xy-label">创建时间</span>
</a-col>
<a-col flex="200px">
<span class="xy-cnt">2023/09/03 2323:00</span>
</a-col>
</a-row>
</a-col>
<a-col flex="0 0 220px" class="y1y2x2">
<a-row :wrap="false" class="y1y2x2y1">
<a-col flex="1 1 auto"><span class="xy-label">合约状态</span></a-col>
<a-col flex="1 1 auto"><span class="xy-label">商户状态</span></a-col>
<a-col flex="1 1 auto">
<span class="xy-label">合约状态</span>
</a-col>
<a-col flex="1 1 auto">
<span class="xy-label">商户状态</span>
</a-col>
</a-row>
<a-row :wrap="false" class="y1y2x2y2">
<a-col flex="1 1 auto"><span class="xy-yes">
<div class="xy-dot-true"></div>生效中
</span></a-col>
<a-col flex="1 1 auto"><span class="xy-no">
<div class="xy-dot-false"></div>未开通
</span></a-col>
<a-col flex="1 1 auto">
<span class="xy-yes">
<div class="xy-dot-true" />生效中
</span>
</a-col>
<a-col flex="1 1 auto">
<span class="xy-no">
<div class="xy-dot-false" />未开通
</span>
</a-col>
</a-row>
</a-col>
</a-row>
@ -194,18 +226,18 @@ const activeKey = ref('1');
float: left;
width: 10px;
height: 10px;
margin: 10px 2px;
background-color: #15AD31;
border-radius: 100%;
margin: 10px 2px;
}
.xy-dot-false {
float: left;
width: 10px;
height: 10px;
margin: 10px 2px;
background-color: #EE3A3D;
border-radius: 100%;
margin: 10px 2px;
}
.xy-right {
@ -218,38 +250,38 @@ const activeKey = ref('1');
.y1 {
margin: 24px;
border-radius: 3px;
font-size: 14px;
background-color: #FFFFFF;
background-color: #FFF;
border-radius: 3px;
.y1y1 {
margin: 24px;
.y1y1x2 {
padding: 34px 18px;
line-height: 28px;
font-size: 18px;
line-height: 28px;
}
.y1y1x3 {
padding: 34px 0px;
padding: 34px 0;
}
}
.y1y2 {
margin: 24px;
height: 106px;
padding: 24px;
margin: 24px;
line-height: 29px;
height: 106px;
background-color: #F7F8FA;
}
}
.y2 {
margin: 24px;
border-radius: 3px;
font-size: 14px;
background-color: #FFFFFF;
background-color: #FFF;
border-radius: 3px;
.y2y1 {
margin: 24px;

@ -1,17 +1,17 @@
<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 { h, ref, watch } from 'vue'
import type { TreeProps } from 'ant-design-vue'
import difference from 'lodash-es/difference'
import type { Dayjs } from 'dayjs'
import {
ReloadOutlined,
SearchOutlined,
UndoOutlined,
ReloadOutlined
} from '@ant-design/icons-vue';
} from '@ant-design/icons-vue'
type RangeValue = [Dayjs, Dayjs];
const valTime = ref<RangeValue>();
type RangeValue = [Dayjs, Dayjs]
const valTime = ref<RangeValue>()
//
const treeData: TreeProps['treeData'] = [
{
@ -20,11 +20,11 @@ const treeData: TreeProps['treeData'] = [
children: [
{
title: '城市矿产科技',
key: '0-0-1'
key: '0-0-1',
},
{
title: '日照济钢金属',
key: '0-0-2'
key: '0-0-2',
},
{
title: '济钢愿景工业',
@ -32,69 +32,70 @@ const treeData: TreeProps['treeData'] = [
children: [
{
title: '废钢',
key: '0-0-3-1'
key: '0-0-3-1',
},
{
title: '废铁',
key: '0-0-3-2'
key: '0-0-3-2',
},
{
title: '废铝',
key: '0-0-3-3'
key: '0-0-3-3',
},
{
title: '废纸',
key: '0-0-3-4'
key: '0-0-3-4',
},
{
title: '煤炭',
key: '0-0-3-5'
}
]
key: '0-0-3-5',
},
],
},
{
title: '城市矿产科技(佛山)',
key: '0-0-4'
}
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']);
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);
});
console.log('expandedKeys', expandedKeys)
})
watch(selectedKeys, () => {
console.log('selectedKeys', selectedKeys);
});
console.log('selectedKeys', selectedKeys)
})
watch(checkedKeys, () => {
console.log('checkedKeys', checkedKeys);
});
const handleExpand = (keys: string[], { expanded, node }) => {
console.log('checkedKeys', checkedKeys)
})
function 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 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 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);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
},
onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
console.log(record, selected, selectedRows);
console.log(record, selected, selectedRows)
},
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
console.log(selected, selectedRows, changeRows);
console.log(selected, selectedRows, changeRows)
},
});
})
const columns: any = [
{
title: '客户名称',
@ -102,85 +103,85 @@ const columns: any = [
key: 'k1a',
sorter: true,
fixed: 'left',
width: 150
width: 150,
},
{
title: '客户分类',
dataIndex: 'k2',
key: 'k2',
sorter: true,
width: 120
width: 120,
},
{
title: '客户类型',
dataIndex: 'k3',
key: 'k3',
sorter: true,
width: 120
width: 120,
},
{
title: '资金款项',
dataIndex: 'k4',
key: 'k4',
sorter: true,
width: 120
width: 120,
},
{
title: '合作模式',
dataIndex: 'k5a',
key: 'k5a',
sorter: true,
width: 200
width: 200,
},
{
title: '隶属机构/业务线',
dataIndex: 'k6a',
key: 'k6a',
sorter: true,
width: 200
width: 200,
},
{
title: '状态',
dataIndex: 'k7',
key: 'k7',
sorter: true,
width: 200
width: 200,
},
{
title: '客户分级',
dataIndex: 'k8',
key: 'k8',
sorter: true,
width: 200
width: 200,
},
{
title: '归属人员',
dataIndex: 'k9',
key: 'k9',
sorter: true,
width: 200
width: 200,
},
{
title: '新增时间',
dataIndex: 'k10a',
key: 'k10a',
sorter: true,
width: 200
width: 200,
},
{
title: '更新时间',
dataIndex: 'k11a',
key: 'k11a',
sorter: true,
width: 200
width: 200,
},
{
title: '操作',
dataIndex: 'key',
key: 'key',
fixed: 'right',
width: 100
}
width: 100,
},
]
const dataSource: any = [
{
@ -201,51 +202,85 @@ const dataSource: any = [
k10b: '2023-09-03 23:26:08',
k11a: '康宁',
k11b: '2023-09-03 23:26:08',
}
];
},
]
</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-card title="客户信息" :bordered="false" style="border-radius: 3px;" :head-style="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">
<div style="padding: 0 20px;">
<a-input placeholder="公司/业务线" />
</div>
<div style="padding: 0 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 v-else>
{{ title }}
</template>
</template>
</a-tree></div>
</a-tree>
</div>
</a-col>
<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-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-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 allow-clear 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 allow-clear 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-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-col flex="0 0 20px" style="padding: 10px 0 16px;">
<a-space :size="[8, 16]" wrap>
<ReloadOutlined title="刷新列表" style="cursor: pointer;" />
</a-space>
@ -253,10 +288,12 @@ const dataSource: any = [
</a-row>
<a-row>
<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"
: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 v-if="column.key === 'k1a'">
<a>
@ -310,20 +347,20 @@ const dataSource: any = [
</template>
<template v-else-if="column.key === 'k5'">
<template v-if="record.k5 == true">
<div class="dot-true"></div>启用
<div class="dot-true" />启用
</template>
<template v-else>
<div class="dot-false"></div>禁用
<div class="dot-false" />禁用
</template>
</template>
<template v-else-if="column.key === 'k7'">
<template v-if="record.k7 == 'opt1'">
<span class="dot-true"></span><span>已关闭</span>
<span class="dot-true" /><span>已关闭</span>
</template>
<template v-if="record.k7 == 'opt1'">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>已关闭</div>
@ -333,7 +370,7 @@ const dataSource: any = [
<template v-if="record.k7 == 'opt1'">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>已关闭</div>
@ -343,7 +380,7 @@ const dataSource: any = [
<template v-if="record.k7 == 'opt1'">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>已关闭</div>
@ -353,7 +390,7 @@ const dataSource: any = [
<template v-if="record.k7 == 'opt1'">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>已关闭</div>
@ -363,7 +400,7 @@ const dataSource: any = [
<template v-if="record.k7 == 'opt1'">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>已关闭</div>
@ -373,7 +410,7 @@ const dataSource: any = [
<template v-else>
<a-row>
<a-col :span="6">
<div class="dot-false"></div>
<div class="dot-false" />
</a-col>
<a-col :span="18">
<div>离线</div>
@ -382,7 +419,7 @@ const dataSource: any = [
</template>
</template>
<template v-else-if="column.key === 'k8'">
<a-rate :value=record.k8 disabled />
<a-rate :value="record.k8" disabled />
</template>
<template v-else-if="column.key === 'k10a'">
<a-row>
@ -425,31 +462,31 @@ const dataSource: any = [
<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);
color: rgb(102 102 102);
background-color: rgb(245 245 245);
}
: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) {
background-color: rgb(245, 245, 245);
background-color: rgb(245 245 245);
}
.dot-true {
width: 10px;
height: 10px;
margin: 7px 0;
background-color: green;
border-radius: 100%;
margin: 7px 0px;
}
.dot-false {
width: 10px;
height: 10px;
margin: 7px 0;
background-color: red;
border-radius: 100%;
margin: 7px 0px;
}
</style>

@ -1,17 +1,17 @@
<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 { h, ref, watch } from 'vue'
import type { TreeProps } from 'ant-design-vue'
import difference from 'lodash-es/difference'
import type { Dayjs } from 'dayjs'
import {
ReloadOutlined,
SearchOutlined,
UndoOutlined,
ReloadOutlined
} from '@ant-design/icons-vue';
} from '@ant-design/icons-vue'
type RangeValue = [Dayjs, Dayjs];
const valTime = ref<RangeValue>();
type RangeValue = [Dayjs, Dayjs]
const valTime = ref<RangeValue>()
//
const treeData: TreeProps['treeData'] = [
{
@ -20,59 +20,60 @@ const treeData: TreeProps['treeData'] = [
children: [
{
title: '城市矿产科技',
key: '0-0-1'
key: '0-0-1',
},
{
title: '日照济钢金属',
key: '0-0-2'
key: '0-0-2',
},
{
title: '济钢愿景工业',
key: '0-0-3'
key: '0-0-3',
},
{
title: '城市矿产科技(佛山)',
key: '0-0-4'
}
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']);
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);
});
console.log('expandedKeys', expandedKeys)
})
watch(selectedKeys, () => {
console.log('selectedKeys', selectedKeys);
});
console.log('selectedKeys', selectedKeys)
})
watch(checkedKeys, () => {
console.log('checkedKeys', checkedKeys);
});
const handleExpand = (keys: string[], { expanded, node }) => {
console.log('checkedKeys', checkedKeys)
})
function 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 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 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);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
},
onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
console.log(record, selected, selectedRows);
console.log(record, selected, selectedRows)
},
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
console.log(selected, selectedRows, changeRows);
console.log(selected, selectedRows, changeRows)
},
});
})
const columns: any = [
{
title: '姓名',
@ -80,76 +81,76 @@ const columns: any = [
key: 'k1a',
sorter: true,
fixed: 'left',
width: 150
width: 150,
},
{
title: '职务',
dataIndex: 'k2a',
key: 'k2a',
sorter: true,
width: 200
width: 200,
},
{
title: '组织部门',
dataIndex: 'k3a',
key: 'k3a',
sorter: true,
width: 200
width: 200,
},
{
title: '关联业务',
dataIndex: 'k4a',
key: 'k4a',
sorter: true,
width: 200
width: 200,
},
{
title: '账号状态',
dataIndex: 'k5',
key: 'k5',
width: 200
width: 200,
},
{
title: '手机',
dataIndex: 'k6',
key: 'k6',
width: 200
width: 200,
},
{
title: '在线状态',
dataIndex: 'k7',
key: 'k7',
sorter: true,
width: 200
width: 200,
},
{
title: '最后登录',
dataIndex: 'k8',
key: 'k8',
sorter: true,
width: 200
width: 200,
},
{
title: '添加时间',
dataIndex: 'k9a',
key: 'k9a',
sorter: true,
width: 200
width: 200,
},
{
title: '更新时间',
dataIndex: 'k10a',
key: 'k10a',
sorter: true,
width: 200
width: 200,
},
{
title: '操作',
dataIndex: 'k1a',
key: 'key',
fixed: 'right',
width: 100
}
width: 100,
},
]
const dataSource: any = [
{
@ -303,48 +304,74 @@ const dataSource: any = [
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
}
];
},
]
</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-card title="员工信息" :bordered="false" style="border-radius: 3px;" :head-style="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">
<div style="padding: 0 20px;">
<a-input placeholder="公司名称" />
</div>
<div style="padding: 0 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 v-else>
{{ title }}
</template>
</template>
</a-tree></div>
</a-tree>
</div>
</a-col>
<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-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-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 allow-clear 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>
<a-select allowClear placeholder="状态选项">
<a-select-option value="enable">启用</a-select-option>
<a-select-option value="disable">禁用</a-select-option>
<a-select allow-clear 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-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-col flex="0 0 20px" style="padding: 10px 0 16px;">
<a-space :size="[8, 16]" wrap>
<ReloadOutlined title="刷新列表" style="cursor: pointer;" />
</a-space>
@ -352,9 +379,11 @@ const dataSource: any = [
</a-row>
<a-row>
<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"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')" :scroll="{ x: 1500, y: 500 }">
: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>
@ -410,7 +439,7 @@ const dataSource: any = [
<template v-if="record.k5 == true">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>启用</div>
@ -420,7 +449,7 @@ const dataSource: any = [
<template v-else>
<a-row>
<a-col :span="6">
<div class="dot-false"></div>
<div class="dot-false" />
</a-col>
<a-col :span="18">
<div>禁用</div>
@ -432,7 +461,7 @@ const dataSource: any = [
<template v-if="record.k7 == true">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
<div class="dot-true" />
</a-col>
<a-col :span="18">
<div>在线</div>
@ -442,7 +471,7 @@ const dataSource: any = [
<template v-else>
<a-row>
<a-col :span="6">
<div class="dot-false"></div>
<div class="dot-false" />
</a-col>
<a-col :span="18">
<div>离线</div>
@ -491,31 +520,31 @@ const dataSource: any = [
<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);
color: rgb(102 102 102);
background-color: rgb(245 245 245);
}
: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) {
background-color: rgb(245, 245, 245);
background-color: rgb(245 245 245);
}
.dot-true {
width: 10px;
height: 10px;
margin: 7px 0;
background-color: green;
border-radius: 100%;
margin: 7px 0px;
}
.dot-false {
width: 10px;
height: 10px;
margin: 7px 0;
background-color: red;
border-radius: 100%;
margin: 7px 0px;
}
</style>

@ -122,42 +122,250 @@ function filterOption(input: string, option: any) {
const department = ref<string | undefined>(undefined)
//
const columns: TableColumnsType = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
{ title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
{ title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
{ title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
{ title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
{ title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
{ title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
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: 'k2a',
key: 'k2a',
sorter: true,
width: 200,
},
{
title: '组织部门',
dataIndex: 'k3a',
key: 'k3a',
sorter: true,
width: 200,
},
{
title: '关联业务',
dataIndex: 'k4a',
key: 'k4a',
sorter: true,
width: 200,
},
{
title: '账号状态',
dataIndex: 'k5',
key: 'k5',
width: 200,
},
{
title: '手机',
dataIndex: 'k6',
key: 'k6',
width: 200,
},
{
title: 'Action',
key: 'operation',
title: '在线状态',
dataIndex: 'k7',
key: 'k7',
sorter: true,
width: 200,
},
{
title: '最后登录',
dataIndex: 'k8',
key: 'k8',
sorter: true,
width: 200,
},
{
title: '添加时间',
dataIndex: 'k9a',
key: 'k9a',
sorter: true,
width: 200,
},
{
title: '更新时间',
dataIndex: 'k10a',
key: 'k10a',
sorter: true,
width: 200,
},
{
title: '操作',
dataIndex: 'k1a',
key: 'key',
fixed: 'right',
width: 100,
},
]
interface DataItem {
key: number
name: string
age: number
address: string
}
const data: DataItem[] = []
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
})
}
const dataSource: any = [
{
key: '1',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '2',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '3',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '4',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '5',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '6',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: false,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '7',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: false,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
{
key: '8',
k1a: '康宁',
k1b: '202309080001',
k2a: '商品经理',
k2b: '商品部',
k3a: '再生资源事业部-销售组',
k3b: '济钢城市矿产',
k4a: '废钢、废铝',
k4b: '济钢城市矿产',
k5: true,
k6: '18088889999',
k7: true,
k8: '2023-09-03 23:26:08',
k9a: '康宁',
k9b: '2023-09-03 23:26:08',
k10a: '康宁',
k10b: '2023-09-03 23:26:08',
},
]
// //
// function myFunction({ item, key, selectedKeys }) {
@ -301,15 +509,139 @@ watch(navopenKeys, (val) => {
</a-button>
</div>
<!-- 表格 -->
<div class="tablestyle">
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
<template #bodyCell="{ column }">
<template v-if="column.key === 'operation'">
<a>action</a>
<a-row>
<a-col :span="24">
<a-table
class="ant-table-striped" :data-source="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 === 'k2a'">
<a-row>
<a-col :span="24">
<div>{{ record.k2a }}</div>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<div>{{ record.k2b }}</div>
</a-col>
</a-row>
</template>
<template v-else-if="column.key === 'k3a'">
<a-row>
<a-col :span="24">
<div>{{ record.k3a }}</div>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<div>{{ record.k3b }}</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">
<a-row>
<a-col :span="6">
<div class="dot-true" />
</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" />
</a-col>
<a-col :span="18">
<div>禁用</div>
</a-col>
</a-row>
</template>
</template>
<template v-else-if="column.key === 'k7'">
<template v-if="record.k7 == true">
<a-row>
<a-col :span="6">
<div class="dot-true" />
</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" />
</a-col>
<a-col :span="18">
<div>离线</div>
</a-col>
</a-row>
</template>
</template>
<template v-else-if="column.key === 'k9a'">
<a-row>
<a-col :span="24">
<div>{{ record.k9a }}</div>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<div>{{ record.k9b }}</div>
</a-col>
</a-row>
</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 === 'key'">
<div><a>详情</a></div>
</template>
</template>
</a-table>
</div>
</a-col>
</a-row>
</div>
</div>
</a-card>
@ -364,13 +696,29 @@ watch(navopenKeys, (val) => {
.inquiry{
display: flex;
justify-content: space-around;
justify-content:left;
width: 100%;
}
.relevance{
margin: 30px 0;
}
.dot-true {
width: 10px;
height: 10px;
margin: 7px 0;
background-color: green;
border-radius: 100%;
}
.dot-false {
width: 10px;
height: 10px;
margin: 7px 0;
background-color: red;
border-radius: 100%;
}
}
}
}

@ -1,8 +1,8 @@
<script lang="ts" setup>
import {onMounted, reactive, ref, toRefs, getCurrentInstanc, getCurrentInstance} from 'vue'
import { getCurrentInstanc, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue'
import type { UnwrapRef } from 'vue'
// let {proxy}=getCurrentInstanc
// let {proxy}=getCurrentInstanc
import {
FieldTimeOutlined,
LeftOutlined, ManOutlined,
@ -12,9 +12,9 @@ import {
} from '@ant-design/icons-vue'
import { getUserProfileApi, updateUserProfileApi, uploadAvatarApi } from '@/api/base/profile'
import { exportLoginLog, getLoginLogPage } from '@/api/system/loginLog'
import { deleteNotice, getNoticePage } from '@/api/system/notice'
import { getUserProfileApi, updateUserProfileApi, uploadAvatarApi } from '@/api/base/profile'
import { exportLoginLog, getLoginLogPage } from '@/api/system/loginLog'
import { deleteNotice, getNoticePage } from '@/api/system/notice'
/* let userInfo = reactive({
@ -62,12 +62,12 @@ function handleOk() {
}
const state = reactive({
checked1: true,
userInfo: {}
userInfo: {},
})
onMounted( async () => {
debugger
state.userInfo = await getUserProfileApi()
console.log("55555555" + state.userInfo);
console.log(`55555555${ state.userInfo}`)
debugger
})

Loading…
Cancel
Save