yifengyide/src/views/system/menu.vue

<template>
  <lay-container style="padding: 20px">
    <lay-card>
      <div style="padding: 10px">
        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">菜单管理</span>
        <lay-button type="primary" @click="openNew()" size="sm">新增菜单</lay-button>
      </div>
      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
        :data-source="dataSource6">
        <template v-slot:status="{ data }">
          <span v-if="data.status == '1'">启用</span>
          <span v-if="data.status == '0'">禁用</span>
        </template>
        <template v-slot:operator="{ data }">
          <lay-space size="lg">
             <span style="color: #00A394;cursor: pointer" v-if="data.pid==0"
                   @click="addShowMsd(data, data.id)">子级新增</span>
            <span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
            <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
              <span style="color: #00A394;cursor: pointer">删除</span>
            </lay-popconfirm>
          </lay-space>
        </template>
      </lay-table>
    </lay-card>
    <lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增菜单' : '编辑菜单'" :type="4" :shade="true"
      :area="['950px', '100%']" :btn="addButton">
      <lay-container fluid="true" style="padding: 20px">
        <lay-form :model="addData">
          <lay-form-item required label="菜单名称" prop="title">
            <lay-input v-model="addData.title" placeholder="请输入菜单名称"></lay-input>
          </lay-form-item>
          <lay-form-item required label="菜单图标" prop="icon">
            <lay-input v-model="addData.icon" placeholder="请输入菜单图标"></lay-input>
          </lay-form-item>
          <lay-form-item required label="菜单URL" prop="url">
            <lay-input v-model="addData.url" placeholder="请输入菜单URL"></lay-input>
          </lay-form-item>
          <lay-form-item required label="状态" prop="status">
            <lay-select v-model="addData.status" placeholder="请选择">
              <lay-select-option :value="1" label="启用"></lay-select-option>
              <lay-select-option :value="0" label="禁用"></lay-select-option>
            </lay-select>
          </lay-form-item>
        </lay-form>
      </lay-container>
    </lay-layer>
  </lay-container>
</template>

<script setup lang="ts">
import {
  menuDataAdd,
  menuDataEdit,
  menuDataDel,
  menuData
} from '../../api/module/home' // 确保 API 路径正确
import { ref, watch, onMounted, reactive } from 'vue'
import { layer } from '@layui/layer-vue'

// 列表内容
const dataSource6 = ref([]);
const addShow = ref(false)
// 1 add  2 edit
const addIsEdit = ref(1)
const addData = reactive({
  title: '',
  icon: '',
  url: '',
  status: 1,
  pid: 0,
})
const addShowMsd = (data, pid) => {
  console.log(data);
  addShow.value = true;
  addData.id = 0;
  addData.pid = pid;
  addData.title = '';
  addData.icon = '';
  addData.url = '';
  addData.status = 1;
  addIsEdit.value = 1;
}
const columns6 = [
  {
    title: "菜单名称",
    width: "200px",
    key: "title"
  },
  {
    title: "菜单图标",
    width: "100px",
    key: "icon"
  },
  {
    title: "菜单URL",
    width: "300px",
    key: "url"
  },
  {
    title: "状态",
    width: "100px",
    customSlot: 'status',
    key: "status"
  },
  {
    title: '操作',
    width: '180px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]

onMounted(() => {
  getHierarchicalData()
})

const openNew = () => {
  addData.id = 0;
  addData.pid = 0;
  addIsEdit.value = 1;
  addData.title = '';
  addData.icon = '';
  addData.url = '';
  addData.status = 1;
  addShow.value = true;
}

const getHierarchicalData = () => {
  menuData({}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource6.value = res.data;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}

const editShowMsd = (data) => {
  console.log(data);
  addShow.value = true;
  addData.id = data.id;
  addData.title = data.title;
  addData.icon = data.icon;
  addData.url = data.url;
  addData.status = parseInt(data.status);
  addIsEdit.value = 2;
}

const delShowMsd = async (data) => {
  var res = await menuDataDel({ id: data.id });
  console.log(res)
  if (res.code == 1) {
    layer.msg('删除成功！', { icon: 1 })
    getHierarchicalData();
  } else {
    layer.msg(res.msg, { icon: 2 })
  }
}

const addButton = ref([
  {
    text: "确认",
    callback: async () => {
      console.log(addData);
      if (addData.title == '') {
        layer.msg('菜单名称不能为空！', { icon: 2 })
        return;
      }
      if (addIsEdit.value == 1) {
        var res = await menuDataAdd(addData);
      } else {
        var res = await menuDataEdit(addData);
      }
      console.log(res)
      if (res.code == 1) {
        layer.msg('提交成功！', { icon: 1 })
        addShow.value = false;
        getHierarchicalData();
      } else {
        layer.msg(res.msg, { icon: 2 })
      }
    }
  },
  {
    text: "取消",
    callback: () => {
      addShow.value = false;
    }
  }
])
</script>
<style scoped></style>