build

src/api/system/menuOperator/index.ts

@@ -8,7 +8,10 @@ interface ResponseType extends Promise<any> {
   code?: number;
   msg?: string;
 }
-
+// 菜单列表
+export const httpAdd = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}menuadd`, { data });
+};
 // 菜单列表
 export const httpList = (data: object): ResponseType => {
   return http.request("post", `${yewuApi}menulist`, { data });
@@ -21,6 +24,10 @@ export const httpUpdate = (data: object): ResponseType => {
 export const httpStatus = (data: object): ResponseType => {
   return http.request("post", `${yewuApi}menustatus`, { data });
 };
+// 菜单删除
+export const httpDelete = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}menustatus`, { data });
+};
 
 // 按钮列表
 export const httpActionList = (data: object): ResponseType => {

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -85,6 +85,7 @@ import Dept from "@iconify-icons/ri/git-branch-line";
 import Password from "@iconify-icons/ri/lock-password-line";
 import Ppt from "@iconify-icons/ri/file-ppt-2-line";
 import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import View from "@iconify-icons/ep/view";
 import User from "@iconify-icons/ri/user-3-fill";
 import Lock from "@iconify-icons/ri/lock-fill";
 addIcon("arrow-right-s-line", ArrowRightSLine);
@@ -100,6 +101,7 @@ addIcon("arrow-up-line", ArrowUpLine);
 addIcon("arrow-down-line", ArrowDownLine);
 addIcon("bookmark-2-line", Bookmark2Line);
 addIcon("add", AddFill);
+addIcon("eye-view", View);
 addIcon("list-check", ListCheck);
 addIcon("more-vertical", More2Fill);
 addIcon("database", Database);

src/utils/status.ts

@@ -4,8 +4,8 @@ const statusList = [
 ];
 const menuTypeList = [
   { value: "1", label: "菜单", type: "primary" },
-  { value: "2", label: "页面", type: "success" },
-  { value: "3", label: "按钮", type: "warning" }
+  { value: "2", label: "页面", type: "success" }
+  // { value: "3", label: "按钮", type: "warning" }
 ];
 const menuPrivateList = [
   { value: "1", label: "显示", type: "primary" },

src/views/system/menuOperator/addEdit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { httpList } from "/@/api/system/menuOperator";
+import { httpAdd, httpUpdate } from "/@/api/system/menuOperator";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
 import { reactive, ref, watch } from "vue";
 import menuType from "./types";
@@ -12,12 +12,16 @@ const ruleFormRef = ref<FormInstance>();
 const props = defineProps({
   itemId: {
     type: String,
-    default: "add"
+    default: ""
   },
   showModel: {
     type: Boolean,
     default: false
   },
+  isDetails: {
+    type: String,
+    default: "add"
+  },
   sitem: {
     type: Object as PropType<menuType>
   }
@@ -28,14 +32,11 @@ const emit = defineEmits<{
   (e: "refresh"): void;
 }>();
 const id = ref("");
-
-const ruleForm = reactive({
-  addtime: "",
-  child: [],
+const editType = ref("add");
+const formModel = {
   id: "",
-  is_private: 0,
+  is_private: "0",
   is_show: "",
-  menu_code: "",
   menu_img: "",
   menu_name: "",
   menu_route: "",
@@ -43,9 +44,12 @@ const ruleForm = reactive({
   menu_url: "",
   pid: "",
   status: "",
-  updatetime: "",
-  weight: 0
-});
+  weight: "0"
+};
+const ruleForm = reactive<menuType>(formModel);
+// for (let key in formModel) {
+//   ruleForm[key] = formModel[key];
+// }
 
 const rules = reactive<FormRules>({
   menu_name: [
@@ -106,67 +110,116 @@ const rules = reactive<FormRules>({
 });
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
-      emit("refresh");
-      console.log("submit!");
+      if (loading.value === true) return;
+      loading.value = true;
+      const model = Object.assign({}, ruleForm);
+      console.log(model);
+      const { code, data, message } =
+        titleType.value === "add"
+          ? await httpAdd(model)
+          : await httpUpdate(model);
+      if (code === 0) {
+        emit("refresh");
+      } else if (code > 100 && code < 140) {
+        logout();
+      } else {
+        ElMessage.error(message);
+      }
+      console.log(code);
+      console.log(data);
+      console.log(message);
+      loading.value = false;
+      // console.log("submit!");
     } else {
       console.log("error submit!", fields);
     }
   });
 };
-
-const resetForm = (formEl: FormInstance | undefined) => {
+const resetForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
+  formEl.clearValidate();
   formEl.resetFields();
 };
+const closeDialog = () => {
+  showModelThis.value = false;
+  emit("cancel");
+  resetForm(ruleFormRef.value);
+};
 
 const loading = ref(true);
 const titleType = ref("");
-const initForm = () => {
+const initForm = async (item: Object) => {
   loading.value = true;
-  if (id.value === "add") {
-    titleType.value = "新建菜单";
-  } else {
-    titleType.value = "菜单详情";
+  switch (editType.value) {
+    case "add":
+      titleType.value = "新建菜单";
+      break;
+    case "edit":
+      titleType.value = "编辑菜单";
+      break;
+    case "view":
+      titleType.value = "菜单详情";
+      break;
+    default:
+      titleType.value = "新建菜单";
+  }
+  resetForm(ruleFormRef.value);
+  for (let key in ruleForm) {
+    ruleForm[key] = item[key];
   }
 
-  // resetForm(undefined);
-  console.log(id.value, showModelThis.value);
+  console.log(editType.value);
   console.log(ruleForm);
+
+  menu_type_change();
+  // this.$refs["activityForm"].resetFields();
   loading.value = false;
 };
 const handleChange = (value: number) => {
-  console.log(value);
+  // console.log(value);
+};
+const menu_type_change = () => {
+  const { menu_type } = ruleForm;
+  rules.menu_url[0].required = menu_type === "2";
 };
 watch(
   () => {
     return props.showModel;
   },
   () => {
-    showModelThis.value = props.showModel;
-
+    const { showModel, itemId, isDetails, sitem } = props;
+    showModelThis.value = showModel;
     if (showModelThis.value) {
-      id.value = props.itemId;
-      for (const key in props.sitem) {
-        ruleForm[key] = props.sitem[key];
+      id.value = itemId;
+      editType.value = isDetails;
+      if (isDetails !== "add") {
+        initForm(sitem);
+      } else {
+        initForm(formModel);
       }
-
-      initForm();
-    } else {
-      emit("cancel");
     }
   }
 );
 </script>
 
 <template>
-  <el-dialog v-model="showModelThis" :title="titleType" v-loading="loading">
+  <el-dialog
+    :close-on-press-escape="false"
+    v-model="showModelThis"
+    append-to-body
+    :width="'700px'"
+    :title="titleType"
+    v-loading="loading"
+    @close="closeDialog"
+  >
     <el-form
       ref="ruleFormRef"
       :model="ruleForm"
       :rules="rules"
       label-width="90px"
+      style="margin-top: -10px"
       class="demo-ruleForm"
       :size="formSize"
       status-icon
@@ -176,6 +229,7 @@ watch(
           <el-form-item label="菜单名称" prop="menu_name">
             <el-input
               v-model="ruleForm.menu_name"
+              :disabled="editType === 'view'"
               placeholder="菜单名称"
             /> </el-form-item
         ></el-col>
@@ -184,6 +238,8 @@ watch(
             <el-select
               v-model="ruleForm.menu_type"
               style="width: 100%"
+              @change="menu_type_change"
+              :disabled="editType === 'view'"
               placeholder="菜单类型"
             >
               <el-option
@@ -199,6 +255,7 @@ watch(
             <el-select
               v-model="ruleForm.menu_img"
               style="width: 100%"
+              :disabled="editType === 'view'"
               placeholder="菜单图标"
             >
               <el-option label="Zone one" value="shanghai" />
@@ -209,11 +266,15 @@ watch(
           <el-form-item label="菜单路由" prop="menu_route">
             <el-input
               v-model="ruleForm.menu_route"
+              :disabled="editType === 'view'"
               placeholder="菜单路由" /></el-form-item
         ></el-col>
         <el-col :span="12">
           <el-form-item label="状态" prop="status">
-            <el-radio-group v-model="ruleForm.status">
+            <el-radio-group
+              v-model="ruleForm.status"
+              :disabled="editType === 'view'"
+            >
               <el-radio
                 v-for="(si, sii) in statusList"
                 :key="si.value + sii"
@@ -224,9 +285,13 @@ watch(
             </el-radio-group>
           </el-form-item></el-col
         >
-        <el-col :span="24">
+        <el-col :span="24" v-show="ruleForm.menu_type === '2'">
           <el-form-item label="页面地址" prop="menu_url">
-            <el-input v-model="ruleForm.menu_url" placeholder="页面地址">
+            <el-input
+              v-model="ruleForm.menu_url"
+              placeholder="页面地址"
+              :disabled="editType === 'view'"
+            >
               <template #prepend>views/</template>
               <template #append>.vue</template></el-input
             >
@@ -241,12 +306,16 @@ watch(
               style="width: 100%"
               :min="1"
               :max="999"
+              :disabled="editType === 'view'"
               @change="handleChange"
             /> </el-form-item
         ></el-col>
         <el-col :span="12">
           <el-form-item label="页面显示" prop="is_private">
-            <el-radio-group v-model="ruleForm.is_private">
+            <el-radio-group
+              v-model="ruleForm.is_private"
+              :disabled="editType === 'view'"
+            >
               <el-radio
                 v-for="(si, sii) in menuPrivateList"
                 :key="si.value + sii"

src/views/system/menuOperator/columns.tsx

@@ -33,6 +33,20 @@ export function useColumns() {
       prop: "weight",
       minWidth: 60
     },
+    {
+      label: "菜单类型",
+      prop: "menu_type",
+      minWidth: 80,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.menu_type + "" === "1" ? "success" : "danger"}
+          effect="plain"
+        >
+          {row.menu_type + "" === "1" ? "菜单" : "页面"}
+        </el-tag>
+      )
+    },
     {
       label: "状态",
       prop: "status",

src/views/system/menuOperator/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
 import { handleTree } from "@pureadmin/utils";
-import { httpList } from "/@/api/system/menuOperator";
+import { httpList, httpStatus } from "/@/api/system/menuOperator";
 import { ElMessage } from "element-plus";
 import { reactive, ref, onMounted } from "vue";
 import { TableProBar } from "/@/components/ReTable";
@@ -28,27 +28,42 @@ const sitem = reactive<menuType>({
   updatetime: "",
   weight: 0
 });
-let dataList = ref([]);
-let loading = ref(true);
-let showModel = ref(false);
-let itemId = ref("add");
+const dataList = ref([]);
+const loading = ref(true);
+const showModel = ref(false);
+const itemId = ref("");
+const isDetails = ref("add");
 const { columns } = useColumns();
 
 const tableRef = ref();
 
-function handleUpdate(row) {
-  console.log(row);
-}
+const handleUpdate = async row => {
+  console.log(1111);
+  const { id, status } = row;
+  const { code, data, message } = await httpStatus({
+    id,
+    status: status + "" === "1" ? "0" : "1"
+  });
+  if (code === 0) {
+    onSearch();
+  } else if (code > 100 && code < 140) {
+    logout();
+  } else {
+    ElMessage.error(message);
+  }
+};
 
 function handleDelete(row) {
   console.log(row);
+  console.log("暂无删除接口");
 }
 
 function handleSelectionChange(val) {
   console.log("handleSelectionChange", val);
 }
-function addItem(id, item) {
+function editItem(id, type, item) {
   itemId.value = id;
+  isDetails.value = type;
   for (let key in item) {
     sitem[key] = item[key];
   }
@@ -65,7 +80,7 @@ const submitCancel = () => {
 
 async function onSearch() {
   loading.value = true;
-  let { code, data, message } = await httpList({});
+  const { code, data, message } = await httpList({});
   if (code === 0) {
     dataList.value = handleTree(data);
   } else if (code > 100 && code < 140) {
@@ -98,9 +113,9 @@ onMounted(() => {
         <el-button
           type="primary"
           :icon="useRenderIcon('add')"
-          @click="addItem('add', {})"
+          @click="editItem('', 'add', {})"
         >
-          新增菜单
+          新增
         </el-button>
         <el-button
           type="primary"
@@ -118,7 +133,7 @@ onMounted(() => {
         <PureTable
           ref="tableRef"
           border
-          align="center"
+          align="left"
           row-key="id"
           table-layout="auto"
           default-expand-all
@@ -126,6 +141,7 @@ onMounted(() => {
           :data="dataList"
           :columns="columns"
           :checkList="checkList"
+          :tree-props="{ hasChildren: 'hasChildren', children: 'child' }"
           :header-cell-style="{ background: '#fafafa', color: '#606266' }"
           @selection-change="handleSelectionChange"
         >
@@ -135,10 +151,37 @@ onMounted(() => {
               link
               type="primary"
               :size="size"
-              @click="handleUpdate(row)"
+              @click="editItem(row.id, 'view', row)"
+              :icon="useRenderIcon('eye-view')"
+            />
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="editItem(row.id, 'edit', row)"
               :icon="useRenderIcon('edits')"
             />
-            <el-popconfirm title="是否确认删除?">
+            <el-popconfirm
+              :title="row.status === '1' ? '改为禁用？' : '改为启用？'"
+              @confirm="handleUpdate(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="
+                    useRenderIcon(
+                      row.status === '1'
+                        ? 'close-circle-line'
+                        : 'checkbox-circle-line'
+                    )
+                  "
+                /> </template
+            ></el-popconfirm>
+            <!-- <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
               <template #reference>
                 <el-button
                   class="reset-margin"
@@ -146,16 +189,25 @@ onMounted(() => {
                   type="primary"
                   :size="size"
                   :icon="useRenderIcon('delete')"
-                  @click="handleDelete(row)"
                 />
               </template>
-            </el-popconfirm>
+            </el-popconfirm> -->
+            <el-button
+              v-if="row.menu_type + '' === '1'"
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="editItem(row.id, 'add', row)"
+              :icon="useRenderIcon('add')"
+            />
           </template>
         </PureTable>
       </template>
     </TableProBar>
     <addEdit
       :itemId="itemId"
+      :isDetails="isDetails"
       :show-model="showModel"
       @refresh="submitRefresh"
       @cancel="submitCancel"

src/views/system/menuOperator/types.ts

@@ -1,4 +1,4 @@
-export default interface menuType {
+export interface menuType {
   addtime?: string;
   child?: any[];
   id?: string;