|
|
|
|
@ -1,19 +1,27 @@
|
|
|
|
|
<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 { UnwrapRef, VueElement, nextTick } from 'vue'
|
|
|
|
|
import { createVNode, getCurrentInstance, h, onMounted, reactive, ref, watch } from 'vue'
|
|
|
|
|
import { ExclamationCircleOutlined, RedoOutlined, SearchOutlined, UserOutlined } from '@ant-design/icons-vue'
|
|
|
|
|
import type { FormProps, ItemType, MenuProps, SelectProps, TableColumnsType } from 'ant-design-vue'
|
|
|
|
|
|
|
|
|
|
import type { Dayjs } from 'dayjs'
|
|
|
|
|
import { Modal } from 'ant-design-vue'
|
|
|
|
|
|
|
|
|
|
// 创建this
|
|
|
|
|
// const { proxy }: any = getCurrentInstance
|
|
|
|
|
//当前选中的菜单项 key 数组
|
|
|
|
|
const selectedKeys = ref<string[]>(['1'])
|
|
|
|
|
|
|
|
|
|
//默认展开
|
|
|
|
|
const navopenKeys = ref<string[]>(['sub1'])
|
|
|
|
|
|
|
|
|
|
const title = ref<any>({
|
|
|
|
|
label:'',
|
|
|
|
|
key: '',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const items: any = reactive<ItemType[]>([
|
|
|
|
|
|
|
|
|
|
const items: any = reactive<ItemType[]>([])
|
|
|
|
|
])
|
|
|
|
|
function getItem(
|
|
|
|
|
label: VueElement | string,
|
|
|
|
|
key: string,
|
|
|
|
|
@ -70,10 +78,14 @@ async function fetchMenuItems() {
|
|
|
|
|
async function fetchData() {
|
|
|
|
|
try {
|
|
|
|
|
const data = await fetchMenuItems()
|
|
|
|
|
console.log(data)
|
|
|
|
|
|
|
|
|
|
// 使用响应式数据保存获取到的菜单项
|
|
|
|
|
// 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))
|
|
|
|
|
|
|
|
|
|
title.value.label = data[0].children[0].label
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
console.error('Error fetching menu items:', error)
|
|
|
|
|
@ -367,36 +379,41 @@ const dataSource: any = [
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
// //被选中时调
|
|
|
|
|
// 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)
|
|
|
|
|
//删除
|
|
|
|
|
const [modal, contextHolder] = Modal.useModal()
|
|
|
|
|
function showDeleteConfirm() {
|
|
|
|
|
modal.confirm({
|
|
|
|
|
title: '操作确认',
|
|
|
|
|
icon: h(ExclamationCircleOutlined),
|
|
|
|
|
content: '确认删除嘛',
|
|
|
|
|
okText: '确认',
|
|
|
|
|
okType: 'danger',
|
|
|
|
|
cancelText: '取消',
|
|
|
|
|
onOk() {
|
|
|
|
|
console.log('OK')
|
|
|
|
|
},
|
|
|
|
|
onCancel() {
|
|
|
|
|
console.log('Cancel')
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
fetchData()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const handleClick: MenuProps['onClick'] = (e) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
const menusubhandleClick: MenuProps['onClick'] = (e) => {
|
|
|
|
|
// console.log('click', JSON.parse(JSON.stringify(e.item.originItemValue)) )
|
|
|
|
|
// alert(`当前打开的是${e.key}`)
|
|
|
|
|
title.value = JSON.parse(JSON.stringify(e.item.originItemValue))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('click', e)
|
|
|
|
|
alert(`当前打开的是${e.key}`)
|
|
|
|
|
}
|
|
|
|
|
watch(navopenKeys, (val) => {
|
|
|
|
|
console.log('navopenKeys', val)
|
|
|
|
|
})
|
|
|
|
|
// watch(navopenKeys, (val) => {
|
|
|
|
|
// console.log('-----------')
|
|
|
|
|
// console.log('navopenKeys', val)
|
|
|
|
|
// })
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
@ -417,14 +434,14 @@ watch(navopenKeys, (val) => {
|
|
|
|
|
style="width: 256px;height: 900px;"
|
|
|
|
|
mode="inline"
|
|
|
|
|
:items="items"
|
|
|
|
|
@click="handleClick"
|
|
|
|
|
@click="menusubhandleClick"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="designation">
|
|
|
|
|
<p>
|
|
|
|
|
<span>▋</span>
|
|
|
|
|
{{ `车间名称` }}
|
|
|
|
|
{{ title.label }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 表单 -->
|
|
|
|
|
@ -513,6 +530,7 @@ watch(navopenKeys, (val) => {
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
<a-table
|
|
|
|
|
class="ant-table-striped" :data-source="dataSource" :row-selection="rowSelection"
|
|
|
|
|
style="width: 1000px;"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')" :scroll="{ x: 1500, y: 500 }"
|
|
|
|
|
>
|
|
|
|
|
@ -636,7 +654,10 @@ watch(navopenKeys, (val) => {
|
|
|
|
|
</a-row>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="column.key === 'key'">
|
|
|
|
|
<div><a>详情</a></div>
|
|
|
|
|
<div centered style="color: red;cursor:pointer" @click="showDeleteConfirm">
|
|
|
|
|
删除
|
|
|
|
|
</div>
|
|
|
|
|
<contextHolder />
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</a-table>
|
|
|
|
|
@ -650,7 +671,7 @@ watch(navopenKeys, (val) => {
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.card{
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 90%;
|
|
|
|
|
width: 1800px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
@ -658,9 +679,8 @@ watch(navopenKeys, (val) => {
|
|
|
|
|
.mainbody{
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1000px;
|
|
|
|
|
|
|
|
|
|
width: 1420px;
|
|
|
|
|
height: 942px;
|
|
|
|
|
|
|
|
|
|
.aside{
|
|
|
|
|
margin: 50px 0;
|
|
|
|
|
@ -678,7 +698,7 @@ watch(navopenKeys, (val) => {
|
|
|
|
|
margin: 10px 0 ;
|
|
|
|
|
|
|
|
|
|
p{
|
|
|
|
|
width: 110px;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
font-family: "AlibabaPuHuiTi_3_55_Regular-55 Regular";
|
|
|
|
|
|
qiuhongwu
1 year ago