|
|
|
|
@ -0,0 +1,379 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import type { UnwrapRef, VueElement } from 'vue'
|
|
|
|
|
import { onMounted, reactive, ref, watch } from 'vue'
|
|
|
|
|
import { RedoOutlined, SearchOutlined, UserOutlined } from '@ant-design/icons-vue'
|
|
|
|
|
import type { FormProps, ItemType, MenuProps, SelectProps, TableColumnsType } from 'ant-design-vue'
|
|
|
|
|
|
|
|
|
|
import type { Dayjs } from 'dayjs'
|
|
|
|
|
|
|
|
|
|
//当前选中的菜单项 key 数组
|
|
|
|
|
const selectedKeys = ref<string[]>(['1'])
|
|
|
|
|
|
|
|
|
|
//默认展开
|
|
|
|
|
const navopenKeys = ref<string[]>(['sub1'])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const items: any = reactive<ItemType[]>([])
|
|
|
|
|
function getItem(
|
|
|
|
|
label: VueElement | string,
|
|
|
|
|
key: string,
|
|
|
|
|
icon?: any,
|
|
|
|
|
children?: ItemType[],
|
|
|
|
|
type?: 'group',
|
|
|
|
|
): ItemType {
|
|
|
|
|
return {
|
|
|
|
|
key,
|
|
|
|
|
icon,
|
|
|
|
|
children,
|
|
|
|
|
label,
|
|
|
|
|
type,
|
|
|
|
|
} as ItemType
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟异步请求获取菜单项数据的函数
|
|
|
|
|
async function fetchMenuItems() {
|
|
|
|
|
// 模拟异步请求延迟
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
|
|
|
|
|
|
|
|
// 模拟接口返回的菜单项数据
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
label: '废铁',
|
|
|
|
|
key: 'sub1',
|
|
|
|
|
icon:'',
|
|
|
|
|
children: [
|
|
|
|
|
{ label: '车间名称', key: '1' },
|
|
|
|
|
{ label: '仓库名称', key: '模拟名称2' },
|
|
|
|
|
{ label: '车间名称', key: '模拟名称3' },
|
|
|
|
|
{ label: '车间名称', key: '模拟名称4' },
|
|
|
|
|
{ label: '车间名称', key: '5' },
|
|
|
|
|
{ label: '车间名称', key: '6' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '废铝',
|
|
|
|
|
key: 'sub2',
|
|
|
|
|
icon:'',
|
|
|
|
|
children: [
|
|
|
|
|
{ label: '车间名称7', key: '7' },
|
|
|
|
|
{ label: '车间名称8', key: '8' },
|
|
|
|
|
{ label: '车间名称9', key: '9' },
|
|
|
|
|
{ label: '车间名称10', key: '10' },
|
|
|
|
|
{ label: '车间名称11', key: '11' },
|
|
|
|
|
{ label: '车间名称12', key: '12' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
// 在组件中使用异步函数获取菜单项数据
|
|
|
|
|
async function fetchData() {
|
|
|
|
|
try {
|
|
|
|
|
const data = await fetchMenuItems()
|
|
|
|
|
// 使用响应式数据保存获取到的菜单项
|
|
|
|
|
// items变量通过reactive函数创建为响应式数据。在fetchData函数中，使用splice方法来替换items数组的内容，确保新的数据被响应式地更新。这样，当fetchData异步请求完成后，items数组中的数据将被更新为获取到的菜单项数据
|
|
|
|
|
items.splice(0, items.length, ...data.map(item => getItem(item.label, item.key, null, item.children)))
|
|
|
|
|
// items.value = data.map(item => getItem(item.label, item.key, null, item.children))
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
console.error('Error fetching menu items:', error)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/////////////////////////////////////////////////////////////
|
|
|
|
|
// 右边内容
|
|
|
|
|
|
|
|
|
|
//表单验证校验
|
|
|
|
|
interface FormState {
|
|
|
|
|
username: string
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
const formState: UnwrapRef<FormState> = reactive({
|
|
|
|
|
username: '',
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onFinish: FormProps['onFinish'] = (values) => {
|
|
|
|
|
console.log(values, formState)
|
|
|
|
|
}
|
|
|
|
|
const onFinishFailed: FormProps['onFinishFailed'] = (errors) => {
|
|
|
|
|
console.log(errors)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//选择器
|
|
|
|
|
const options = ref<SelectProps['options']>([
|
|
|
|
|
{ value: 'jack', label: 'Jack' },
|
|
|
|
|
{ value: 'lucy', label: 'Lucy' },
|
|
|
|
|
{ value: 'tom', label: 'Tom' },
|
|
|
|
|
])
|
|
|
|
|
function handleChange(value: string) {
|
|
|
|
|
console.log(`selected ${value}`)
|
|
|
|
|
}
|
|
|
|
|
function handleBlur() {
|
|
|
|
|
console.log('blur')
|
|
|
|
|
}
|
|
|
|
|
function handleFocus() {
|
|
|
|
|
console.log('focus')
|
|
|
|
|
}
|
|
|
|
|
function filterOption(input: string, option: any) {
|
|
|
|
|
return option.value.toLowerCase().includes(input.toLowerCase())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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' },
|
|
|
|
|
{
|
|
|
|
|
title: 'Action',
|
|
|
|
|
key: 'operation',
|
|
|
|
|
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}`,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// //被选中时调
|
|
|
|
|
// function myFunction({ item, key, selectedKeys }) {
|
|
|
|
|
// // 在这里可以使用 item、key 和 selectedKeys
|
|
|
|
|
// console.log(item)
|
|
|
|
|
// console.log(key)
|
|
|
|
|
// console.log(selectedKeys)
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// // 调用函数时传递一个包含 item、key 和 selectedKeys 属性的对象
|
|
|
|
|
// const data = {
|
|
|
|
|
// item: '仓库名称',
|
|
|
|
|
// key: 'someKey',
|
|
|
|
|
// selectedKeys: ['key1', 'key2'],
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// myFunction(data)
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
fetchData()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const handleClick: MenuProps['onClick'] = (e) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
|
|
|
|
|
console.log('click', e)
|
|
|
|
|
alert(`当前打开的是${e.key}`)
|
|
|
|
|
}
|
|
|
|
|
watch(navopenKeys, (val) => {
|
|
|
|
|
console.log('navopenKeys', val)
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<a-card class="card">
|
|
|
|
|
<div class="mainbody">
|
|
|
|
|
<div class="aside">
|
|
|
|
|
<div class="search">
|
|
|
|
|
<a-input placeholder="请输入搜索内容">
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<SearchOutlined />
|
|
|
|
|
</template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
<a-menu
|
|
|
|
|
id="dddddd"
|
|
|
|
|
v-model:openKeys="navopenKeys"
|
|
|
|
|
v-model:selectedKeys="selectedKeys"
|
|
|
|
|
style="width: 256px;height: 900px;"
|
|
|
|
|
mode="inline"
|
|
|
|
|
:items="items"
|
|
|
|
|
@click="handleClick"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="designation">
|
|
|
|
|
<p>
|
|
|
|
|
<span>▋</span>
|
|
|
|
|
{{ `车间名称` }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 表单 -->
|
|
|
|
|
<div class="inquiry">
|
|
|
|
|
<a-form
|
|
|
|
|
:model="formState"
|
|
|
|
|
name="horizontal_login"
|
|
|
|
|
layout="inline"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
style="display: flex;"
|
|
|
|
|
@finish="onFinish"
|
|
|
|
|
@finishFailed="onFinishFailed"
|
|
|
|
|
>
|
|
|
|
|
<a-form-item
|
|
|
|
|
name="username"
|
|
|
|
|
style="width: 240px;"
|
|
|
|
|
:rules="[{ required: true, message: '输入姓名/工号/手机号/邮箱!' }]"
|
|
|
|
|
>
|
|
|
|
|
<a-input v-model:value="formState.username" placeholder="输入姓名/工号/手机号/邮箱">
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<UserOutlined class="site-form-item-icon" />
|
|
|
|
|
</template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
|
|
|
|
name="username"
|
|
|
|
|
:rules="[{ required: true, message: '请选择部门！' }]"
|
|
|
|
|
>
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="department"
|
|
|
|
|
placeholder="选择部门"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
:options="options"
|
|
|
|
|
:filter-option="filterOption"
|
|
|
|
|
@focus="handleFocus"
|
|
|
|
|
@blur="handleBlur"
|
|
|
|
|
@change="handleChange"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option value="jack">
|
|
|
|
|
Jack
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="lucy">
|
|
|
|
|
Lucy
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="disabled" disabled>
|
|
|
|
|
Disabled
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="Yiminghe">
|
|
|
|
|
yiminghe
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item
|
|
|
|
|
name="username"
|
|
|
|
|
style="width: 240px;"
|
|
|
|
|
:rules="[{ required: true, message: '选择时间!' }]"
|
|
|
|
|
>
|
|
|
|
|
<a-range-picker v-model:value="value1" style="margin-right:10px;" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<a-button type="primary" html-type="submit" style="margin-right:10px;">
|
|
|
|
|
<SearchOutlined />
|
|
|
|
|
查询
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button html-type="submit">
|
|
|
|
|
<RedoOutlined />
|
|
|
|
|
重置
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 关联 导入 -->
|
|
|
|
|
<div class="relevance">
|
|
|
|
|
<a-button type="primary" html-type="submit" style="margin-right:10px;">
|
|
|
|
|
<SearchOutlined />
|
|
|
|
|
关联员工
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button html-type="submit">
|
|
|
|
|
<RedoOutlined />
|
|
|
|
|
导入数据
|
|
|
|
|
</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>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</a-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-card>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.card{
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 90%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
|
|
|
|
.mainbody{
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1000px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.aside{
|
|
|
|
|
margin: 50px 0;
|
|
|
|
|
|
|
|
|
|
.search{
|
|
|
|
|
margin: 10px ;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main{
|
|
|
|
|
margin: 20px;
|
|
|
|
|
|
|
|
|
|
.designation{
|
|
|
|
|
padding-bottom: 16px;
|
|
|
|
|
margin: 10px 0 ;
|
|
|
|
|
|
|
|
|
|
p{
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
font-family: "AlibabaPuHuiTi_3_55_Regular-55 Regular";
|
|
|
|
|
font-size:22px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
color: #262626;
|
|
|
|
|
background: linear-gradient(90deg, #9EF9FF 0%, #FFF 100%);
|
|
|
|
|
|
|
|
|
|
span{
|
|
|
|
|
font-size:20px;
|
|
|
|
|
color:#409EFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inquiry{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.relevance{
|
|
|
|
|
margin: 30px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
qiuhongwu
1 year ago