修改按钮设置页面

src/styles/index.scss

@@ -290,6 +290,12 @@ aside {
   // height: 0px;
   // display: block;
   clear: both;
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  // clear: both;
+  height: 0;
 }
 
 // .el-steps--simple {
@@ -839,7 +845,7 @@ aside {
     }
   }
 }
-.el-menu-item{
-  height: 40px!important;
-  line-height: 40px!important;
-}
+// .el-menu-item{
+//   height: 40px!important;
+//   line-height: 40px!important;
+// }

src/views/system/menuOperator/addEdit.vue

@@ -70,11 +70,7 @@
                       </div>
                     </el-col>
                     <el-col v-if="!ruleForm.img" :span="7">
-                      <el-button
-                        type="warning"
-                        size="mini"
-                        @click="showIconModel = true"
-                      >
+                      <el-button type="warning" size="mini" @click="showIconModel = true">
                         选择图标
                       </el-button>
                     </el-col>
@@ -87,11 +83,7 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-form-item
-              v-if="level === 2"
-              label="页面路径："
-              prop="component"
-            >
+            <el-form-item v-if="level === 2" label="页面路径：" prop="component">
               <el-input
                 v-model="ruleForm.component"
                 :disabled="isDetail"
@@ -104,28 +96,16 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="状态：" prop="is_show">
-                  <el-radio
-                    v-model="ruleForm.is_show"
-                    :label="'1'"
-                    :disabled="isDetail"
-                  >
+                  <el-radio v-model="ruleForm.is_show" :label="'1'" :disabled="isDetail">
                     启用
                   </el-radio>
-                  <el-radio
-                    v-model="ruleForm.is_show"
-                    :label="'0'"
-                    :disabled="isDetail"
-                  >
+                  <el-radio v-model="ruleForm.is_show" :label="'0'" :disabled="isDetail">
                     禁用
                   </el-radio>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  v-if="level < 3"
-                  label="页面状态："
-                  prop="is_display"
-                >
+                <el-form-item v-if="level < 3" label="页面状态：" prop="is_display">
                   <el-radio
                     v-model="ruleForm.is_display"
                     :label="'1'"
@@ -161,22 +141,23 @@
             </el-form-item>
 
             <el-form-item v-if="level < 3" label="菜单等级" prop="level">
-              <el-select v-model="ruleForm.level">
+              <el-select
+                v-model="ruleForm.level"
+                :disabled="isDetail"
+                style="width: 100%"
+              >
                 <el-option label="公共" value="0" />
                 <el-option label="超管" value="1" />
                 <el-option label="业务公司" value="2" />
                 <el-option label="供应商" value="3" />
               </el-select>
             </el-form-item>
-
           </el-col>
         </el-row>
       </el-form>
 
       <el-col :span="24" style="text-align: right; padding: 0 0 10px 0">
-        <el-button v-if="!isDetail" type="primary" @click="submitForm">
-          保 存
-        </el-button>
+        <el-button v-if="!isDetail" type="primary" @click="submitForm"> 保 存 </el-button>
         <el-button @click="showModelThis = false">{{
           isDetail ? "关 闭" : "取 消"
         }}</el-button>
@@ -186,30 +167,30 @@
 </template>
 
 <script>
-import asyncRequest from '@/apis/service/system/menu'
-import btnList from '@/assets/js/btnList'
-import iconDialog from '@/views/system/menuOperator/iconDialog'
-import resToken from '@/mixins/resToken'
+import asyncRequest from "@/apis/service/system/menu";
+import btnList from "@/assets/js/btnList";
+import iconDialog from "@/views/system/menuOperator/iconDialog";
+import resToken from "@/mixins/resToken";
 export default {
   components: {
-    iconDialog
+    iconDialog,
   },
   mixins: [resToken],
   props: [
-    'showModel',
-    'id',
-    'isDetail',
-    'parentIds',
-    'level',
-    'isAdd',
-    'type',
-    'formData'
+    "showModel",
+    "id",
+    "isDetail",
+    "parentIds",
+    "level",
+    "isAdd",
+    "type",
+    "formData",
   ],
   data() {
     return {
       loading: false,
       showIconModel: false,
-      title: '',
+      title: "",
       btnList,
       showModelThis: this.showModel,
       ruleForm: {},
@@ -218,159 +199,169 @@ export default {
         name: [
           {
             required: true,
-            message: '请输入名称',
-            trigger: 'blur'
+            message: "请输入名称",
+            trigger: "blur",
           },
           {
             min: 1,
             max: 50,
-            message: '长度在 1 到 50 个字符',
-            trigger: 'blur'
-          }
+            message: "长度在 1 到 50 个字符",
+            trigger: "blur",
+          },
         ],
         code: [
           {
             required: true,
-            message: '请输入按钮标识编码（用于判断按钮是否显示）',
-            trigger: 'change'
-          }
+            message: "请输入按钮标识编码（用于判断按钮是否显示）",
+            trigger: "change",
+          },
         ],
         level: [
           {
             required: true,
-            message: '请选择菜单等级',
-            trigger: 'change'
-          }
+            message: "请选择菜单等级",
+            trigger: "change",
+          },
         ],
         img: [
           {
             required: true,
-            message: '请选择图标',
-            trigger: 'blur'
-          }
+            message: "请选择图标",
+            trigger: "blur",
+          },
         ],
         route: [
           {
             required: true,
-            message: '请输入路由',
-            trigger: 'blur'
+            message: "请输入路由",
+            trigger: "blur",
           },
           {
             min: 1,
             max: 50,
-            message: '长度在 1 到 50 个字符',
-            trigger: 'blur'
-          }
+            message: "长度在 1 到 50 个字符",
+            trigger: "blur",
+          },
         ],
         component: [
           {
             required: true,
-            message: '请输入页面组件路径',
-            trigger: 'blur'
+            message: "请输入页面组件路径",
+            trigger: "blur",
           },
           {
             min: 1,
             max: 100,
-            message: '长度在 1 到 100 个字符',
-            trigger: 'blur'
-          }
+            message: "长度在 1 到 100 个字符",
+            trigger: "blur",
+          },
         ],
         weight: [
           {
             required: true,
-            message: '请输入权重，数值越大排名越靠前',
-            trigger: 'blur'
-          }
+            message: "请输入权重，数值越大排名越靠前",
+            trigger: "blur",
+          },
         ],
         is_show: [
           {
             required: true,
-            message: '请选择状态',
-            trigger: 'change'
-          }
+            message: "请选择状态",
+            trigger: "change",
+          },
         ],
         is_display: [
           {
             required: true,
-            message: '请选择页面状态',
-            trigger: 'change'
-          }
-        ]
-      }
-    }
+            message: "请选择页面状态",
+            trigger: "change",
+          },
+        ],
+      },
+    };
   },
   watch: {
-    showModel: function(val) {
-      this.showModelThis = val
+    showModel: function (val) {
+      this.showModelThis = val;
       if (val) {
-        this.initForm()
+        this.initForm();
       }
     },
     showModelThis(val) {
       if (!val) {
-        this.$emit('cancel')
+        this.$emit("cancel");
       }
-    }
+    },
   },
   methods: {
     codeChange(code) {
       for (let i = 0; i < this.btnList.length; i++) {
         if (this.btnList[i].code === code) {
-          this.ruleForm.name = this.btnList[i].name
-          break
+          this.ruleForm.name = this.btnList[i].name;
+          break;
         }
       }
     },
     setVal(val) {
-      this.ruleForm.img = val
-      this.$refs.ruleForm.validateField('img')
+      this.ruleForm.img = val;
+      this.$refs.ruleForm.validateField("img");
     },
     async initForm() {
+      console.log(
+        this.showModel,
+        this.id,
+        this.isDetail,
+        this.parentIds,
+        this.level,
+        this.isAdd,
+        this.type,
+        this.formData
+      );
       if (this.isAdd) {
         if (this.level === 1) {
-          this.title = '添加一级菜单'
+          this.title = "添加一级菜单";
         } else if (this.level === 2) {
-          this.title = '添加二级菜单'
+          this.title = "添加二级菜单";
         } else {
-          this.title = '添加按钮'
+          this.title = "添加按钮";
         }
-        this.loading = false
-        this.rulesThis = this.rules
-        await this.resetForm()
+        this.loading = false;
+        this.rulesThis = this.rules;
+        await this.resetForm();
       } else {
         if (this.isDetail) {
           if (this.level === 1) {
-            this.title = '一级菜单详情'
+            this.title = "一级菜单详情";
           } else if (this.level === 2) {
-            this.title = '二级菜单详情'
+            this.title = "二级菜单详情";
           } else {
-            this.title = '按钮详情'
+            this.title = "按钮详情";
           }
-          this.rulesThis = {}
+          this.rulesThis = {};
         } else {
           if (this.level === 1) {
-            this.title = '修改一级菜单'
+            this.title = "修改一级菜单";
           } else if (this.level === 2) {
-            this.title = '修改二级菜单'
+            this.title = "修改二级菜单";
           } else {
-            this.title = '修改按钮'
+            this.title = "修改按钮";
           }
-          this.rulesThis = this.rules
+          this.rulesThis = this.rules;
         }
-        await this.initData()
+        await this.initData();
       }
     },
     async initData() {
-      this.loading = true
-      let parentIds = ''
+      this.loading = true;
+      let parentIds = "";
       if (this.isAdd) {
         if (this.id === 0) {
-          parentIds = '0'
+          parentIds = "0";
         } else {
-          parentIds = this.parentIds
+          parentIds = this.parentIds;
         }
       } else {
-        parentIds = this.parentIds
+        parentIds = this.parentIds;
       }
       const {
         menu_name,
@@ -384,94 +375,94 @@ export default {
         action_name,
         action_code,
         is_display,
-        level
-      } = this.formData
+        level,
+      } = this.formData;
 
       if (this.level !== 3) {
         // 重置
         this.ruleForm = {
-          parentId: this.id + '', // 父级ID（一级为0）
-          parentIds: parentIds + '', // 所有父级编号（用逗号分隔）
-          name: menu_name + '', // 名称
-          code: '', // 编码（用于按钮是否显示）
-          img: menu_img + '', // 图标（导航图标）
-          route: menu_route + '', // 路由
-          component: this.level === 1 ? '' : menu_url + '', // 页面组件
-          menuCategory: 1 + '', // 菜单类别（1.导航菜单 2.按钮）
-          type: this.type + '', // 类型（1.运营菜单 2.物业菜单）
-          is_show: is_show + '', // 状态（1启用 0禁用）
-          is_display: is_display + '',
-          weight: parseInt(weight + ''), // 权重，越大越靠前
-          level: String(level)
-        }
+          parentId: this.id + "", // 父级ID（一级为0）
+          parentIds: parentIds + "", // 所有父级编号（用逗号分隔）
+          name: menu_name + "", // 名称
+          code: "", // 编码（用于按钮是否显示）
+          img: menu_img + "", // 图标（导航图标）
+          route: menu_route + "", // 路由
+          component: this.level === 1 ? "" : menu_url + "", // 页面组件
+          menuCategory: 1 + "", // 菜单类别（1.导航菜单 2.按钮）
+          type: this.type + "", // 类型（1.运营菜单 2.物业菜单）
+          is_show: is_show + "", // 状态（1启用 0禁用）
+          is_display: is_display + "",
+          weight: parseInt(weight + ""), // 权重，越大越靠前
+          level: String(level),
+        };
         if (this.level === 1) {
-          delete this.ruleForm['parentIds']
+          delete this.ruleForm["parentIds"];
         }
       } else {
         this.ruleForm = {
-          parentId: this.id + '', // 父级ID（一级为0）
-          parentIds: menuid + '', // 所有父级编号（用逗号分隔）
-          name: action_name + '', // 名称
-          code: action_code + '', // 编码（用于按钮是否显示）
-          img: '', // 图标（导航图标）
-          route: '', // 路由
-          component: '', // 页面组件
-          menuCategory: 2 + '', // 菜单类别（1.导航菜单 2.按钮）
-          type: this.type + '', // 类型（1.运营菜单 2.物业菜单）
-          is_show: status + '', // 状态（1启用 0禁用）
-          weight: 1 + '' // 权重，越大越靠前
-        }
+          parentId: this.id + "", // 父级ID（一级为0）
+          parentIds: menuid + "", // 所有父级编号（用逗号分隔）
+          name: action_name + "", // 名称
+          code: action_code + "", // 编码（用于按钮是否显示）
+          img: "", // 图标（导航图标）
+          route: "", // 路由
+          component: "", // 页面组件
+          menuCategory: 2 + "", // 菜单类别（1.导航菜单 2.按钮）
+          type: this.type + "", // 类型（1.运营菜单 2.物业菜单）
+          is_show: status + "", // 状态（1启用 0禁用）
+          weight: 1 + "", // 权重，越大越靠前
+        };
       }
-      this.loading = false
+      this.loading = false;
       await this.$nextTick(() => {
         if (this.$refs.ruleForm) {
-          this.$refs.ruleForm.clearValidate()
+          this.$refs.ruleForm.clearValidate();
         }
-      })
+      });
     },
     async resetForm() {
-      let parentIds = ''
+      let parentIds = "";
       if (this.isAdd) {
         if (this.id === 0) {
-          parentIds = '0'
+          parentIds = "0";
         } else {
-          parentIds = this.parentIds
+          parentIds = this.parentIds;
         }
       } else {
-        parentIds = this.parentIds
+        parentIds = this.parentIds;
       }
 
       // 重置
       this.ruleForm = {
         parentId: this.id, // 父级ID（一级为0）
         parentIds, // 所有父级编号（用逗号分隔）
-        name: '', // 名称
-        code: '', // 编码（用于按钮是否显示）
-        img: '', // 图标（导航图标）
-        route: '', // 路由
-        component: '', // 页面组件
+        name: "", // 名称
+        code: "", // 编码（用于按钮是否显示）
+        img: "", // 图标（导航图标）
+        route: "", // 路由
+        component: "", // 页面组件
         menuCategory: this.level < 3 ? 1 : 2, // 菜单类别（1.导航菜单 2.按钮）
-        type: this.type + '', // 类型（1.运营菜单 2.物业菜单）
-        is_show: '1', // 状态（1启用 0禁用）
-        is_display: '1', // 页面状态（1显示 0隐藏）
-        weight: 1 // 权重，越大越靠前
-      }
+        type: this.type + "", // 类型（1.运营菜单 2.物业菜单）
+        is_show: "1", // 状态（1启用 0禁用）
+        is_display: "1", // 页面状态（1显示 0隐藏）
+        weight: 1, // 权重，越大越靠前
+      };
       await this.$nextTick(() => {
         if (this.$refs.ruleForm) {
-          this.$refs.ruleForm.clearValidate()
+          this.$refs.ruleForm.clearValidate();
         }
-      })
+      });
     },
     async submitForm() {
       if (this.loading) {
-        return false
+        return false;
       }
-      this.loading = true
+      this.loading = true;
 
-      await this.$refs.ruleForm.validate(async(valid) => {
+      await this.$refs.ruleForm.validate(async (valid) => {
         if (valid) {
-          let model = {}
-          let res = {}
+          let model = {};
+          let res = {};
           const {
             name,
             img,
@@ -481,8 +472,8 @@ export default {
             weight,
             component,
             code,
-            level
-          } = this.ruleForm
+            level,
+          } = this.ruleForm;
 
           model = {
             id: this.id,
@@ -498,72 +489,72 @@ export default {
             url: component,
             action_code: code,
             status: is_show,
-            level
-          }
+            level,
+          };
 
           if (this.level === 1) {
-            delete model['pid']
-            delete model['menuid']
-            delete model['url']
-            delete model['action_code']
-            delete model['action_name']
-            delete model['status']
+            delete model["pid"];
+            delete model["menuid"];
+            delete model["url"];
+            delete model["action_code"];
+            delete model["action_name"];
+            delete model["status"];
           } else if (this.level === 2) {
-            delete model['menuid']
-            delete model['action_code']
-            delete model['action_name']
-            delete model['status']
+            delete model["menuid"];
+            delete model["action_code"];
+            delete model["action_name"];
+            delete model["status"];
           } else {
-            delete model['pid']
-            delete model['img']
-            delete model['is_show']
-            delete model['weight']
-            delete model['route']
-            delete model['is_display']
-            delete model['url']
-            delete model['name']
+            delete model["pid"];
+            delete model["img"];
+            delete model["is_show"];
+            delete model["weight"];
+            delete model["route"];
+            delete model["is_display"];
+            delete model["url"];
+            delete model["name"];
           }
 
           if (this.isAdd) {
-            delete model['id']
+            delete model["id"];
           }
 
           if (this.level < 3) {
-            res = await asyncRequest.update(model)
+            res = await asyncRequest.update(model);
           } else {
             if (this.isAdd) {
-              res = await asyncRequest.actionadd(model)
+              res = await asyncRequest.actionadd(model);
             } else {
-              res = await asyncRequest.actionedit(model)
+              res = await asyncRequest.actionedit(model);
             }
           }
-          this.loading = false
+          this.loading = false;
           if (res && res.code === 0) {
-            this.ruleForm = {}
-            const title = this.isAdd ? '添加成功' : '修改成功'
+            this.ruleForm = {};
+            const title = this.isAdd ? "添加成功" : "修改成功";
             this.$notify.success({
               title,
-              message: ''
-            })
-            this.showModelThis = false
-            let pids = this.parentIds
+              message: "",
+            });
+            this.showModelThis = false;
+            let pids = this.parentIds;
             if (this.id === 0) {
-              pids = '0'
+              pids = "0";
             }
-            this.$emit('refresh', this.id, pids, this.level)
+            this.$emit("refresh", this.id, pids, this.level);
           } else if (res && res.code >= 100 && res.code <= 104) {
-            await this.logout()
+            await this.logout();
           } else {
-            this.$message.warning(res.message)
+            this.$message.warning(res.message);
           }
         } else {
-          this.loading = false
-          return false
+          this.loading = false;
+          return false;
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/system/menuOperator/index.vue

@@ -1,45 +1,186 @@
 <template>
   <div class="box pagePadding MenuOperator">
-    <div
-      class="MenuOperator-main"
-      v-if=" powers.some((i) => i == '001')"
-    >
-      <el-row class="MenuOperator-search">
-        <el-col :span="24" style="padding: 5px">
-          <el-col :span="3" style="width: 195px; float: right">
-            <el-button
-              type="primary"
-              :size="searchSize"
-              style="float: right; margin-left: 5px"
-              @click="searchList"
-            >
-              刷新
-            </el-button>
-            <el-button
-              v-if="powers.some((i) => i == '003')"
-              type="success"
-              :size="searchSize"
-              style="float: right"
-              @click="addEditFn(0, '0', 1, false, true, {})"
-            >
-              添加
-            </el-button>
-          </el-col>
+    <div class="MenuOperator-main" v-if="powers.some((i) => i == '001')">
+      <el-row class="MenuOperator-search clear" style="padding: 10px 0">
+        <el-col :span="24" style="width: 66px; float: right">
+          <el-button
+            v-if="powers.some((i) => i == '003')"
+            type="success"
+            :size="searchSize"
+            style="float: right"
+            @click="openModal(0, '0', 1, false, true, {})"
+          >
+            添加
+          </el-button>
         </el-col>
-      </el-row>
-
-      <el-row  class="MenuOperator-show">
-        <el-col :span="24" v-loading="loading">
-          <shy-tree
-            :value="tableData"
-            :level="1"
-            @addEdit="addEditFn"
-            @openChildren="openChildren"
-            @remove="remove"
-            @deleteMenu="deleteMenu"
-          />
+        <el-col :span="3" style="width: 66px; float: right">
+          <el-button
+            type="primary"
+            :size="searchSize"
+            style="float: right; margin-left: 5px"
+            @click="searchList"
+          >
+            刷新
+          </el-button>
         </el-col>
       </el-row>
+      <div style="padding: 50px 0 0 0">
+        <el-table
+          :data="tableData"
+          style="width: 100%; margin-bottom: 20px"
+          row-key="id"
+          v-loading="loading"
+          border
+          :default-expand-all="false"
+          size="mini"
+          :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
+        >
+          <el-table-column prop="menu_name" label="菜单名称" width="180" />
+          <el-table-column prop="name" label="图标" width="50">
+            <template slot-scope="scope"> <i :class="scope.row.menu_img" /></template
+          ></el-table-column>
+          <el-table-column prop="menu_route" label="path" width="180" />
+          <el-table-column prop="weight" label="权重" width="80" />
+          <el-table-column prop="address" label="类型" width="100">
+            <template slot-scope="scope">
+              <el-tag
+                :size="tablebtnSize"
+                :type="Number(scope.row.pid) == 0 ? 'success' : ''"
+                v-text="Number(scope.row.pid) == 0 ? '菜单' : '页面'"
+              ></el-tag> </template
+          ></el-table-column>
+          <el-table-column prop="status" label="状态" width="100">
+            <template slot-scope="scope">
+              <el-tag
+                :size="tablebtnSize"
+                :type="Number(scope.row.status) == 0 ? 'warning' : ''"
+                v-text="
+                  (
+                    statusOptions.find((item) => item.id == Number(scope.row.status)) ||
+                    {}
+                  ).label || '--'
+                "
+              ></el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="menu_url" label="文件路径" />
+          <el-table-column prop="address" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-tooltip
+                v-if="powers.some((i) => i == '007')"
+                effect="dark"
+                content="详情"
+                placement="top"
+              >
+                <i
+                  class="el-icon-view tb-icon"
+                  size="mini"
+                  @click="
+                    openModal(
+                      scope.row.id,
+                      scope.row.pid,
+                      Number(scope.row.pid) === 0 ? 1 : 2,
+                      true,
+                      false,
+                      scope.row
+                    )
+                  "
+                ></i>
+              </el-tooltip>
+              <el-tooltip
+                v-if="powers.some((i) => i == '005')"
+                effect="dark"
+                content="修改"
+                placement="top"
+              >
+                <i
+                  class="el-icon-edit tb-icon"
+                  size="mini"
+                  @click="
+                    openModal(
+                      scope.row.id,
+                      scope.row.pid,
+                      Number(scope.row.pid) === 0 ? 1 : 2,
+                      false,
+                      false,
+                      scope.row
+                    )
+                  "
+                ></i>
+              </el-tooltip>
+              <el-tooltip
+                v-if="powers.some((i) => i == '004') && scope.row.status + '' === '1'"
+                effect="dark"
+                content="禁用"
+                placement="top"
+              >
+                <i
+                  class="el-icon-video-pause tb-icon"
+                  size="mini"
+                  @click="
+                    changeStatus(
+                      scope.row.id,
+                      scope.row.pid,
+                      scope.row.level,
+                      scope.row.status
+                    )
+                  "
+                ></i>
+              </el-tooltip>
+              <el-tooltip
+                v-if="powers.some((i) => i == '004') && scope.row.status + '' === '0'"
+                effect="dark"
+                content="启用"
+                placement="top"
+              >
+                <i
+                  class="el-icon-video-play tb-icon"
+                  size="mini"
+                  @click="
+                    changeStatus(
+                      scope.row.id,
+                      scope.row.pid,
+                      scope.row.level,
+                      scope.row.status
+                    )
+                  "
+                ></i>
+              </el-tooltip>
+              <el-tooltip
+                v-if="powers.some((i) => i == '006')"
+                effect="dark"
+                content="删除"
+                placement="top"
+              >
+                <i
+                  class="el-icon-delete tb-icon"
+                  size="mini"
+                  @click="
+                    deleteItem(
+                      scope.row.id,
+                      scope.row.pid,
+                      scope.row.level,
+                      scope.row.status
+                    )
+                  "
+                ></i>
+              </el-tooltip>
+              <el-tooltip
+                v-if="powers.some((i) => i == '003') && Number(scope.row.pid) === 0"
+                effect="dark"
+                content="添加"
+                placement="top"
+              >
+                <i
+                  class="el-icon-circle-plus-outline tb-icon"
+                  size="mini"
+                  @click="openModal(0, scope.row.id, 2, false, true, {})"
+                ></i>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
       <add-edit
         :id="modelId"
@@ -84,6 +225,11 @@ export default {
   },
   data() {
     return {
+      // 状态
+      statusOptions: [
+        { id: 0, label: "禁用" },
+        { id: 1, label: "启用" },
+      ],
       loading: true,
       showModel: false,
       showInterface: false,
@@ -102,14 +248,14 @@ export default {
         current: 1, // 页码
         size: 15, // 每页显示条数
       },
-      tableData: []
+      tableData: [],
     };
   },
   mounted() {
     this.searchList();
   },
   methods: {
-    addEditFn(id, parentIds, level, isDetail, isAdd, formData) {
+    openModal(id, parentIds, level, isDetail, isAdd, formData) {
       this.showModel = true;
       this.modelId = id;
       this.level = level;
@@ -125,8 +271,8 @@ export default {
         this.getchildList(parentIds);
       }
     },
-    async remove(id, parentIds, level, status) {
-      await this.$confirm(`确定要${status + '' === "0" ? "启用" : "禁用"}？`, {
+    async changeStatus(id, parentIds, level, status) {
+      await this.$confirm(`确定要${status + "" === "0" ? "启用" : "禁用"}？`, {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -134,7 +280,7 @@ export default {
         .then(async () => {
           const model = {
             id: id,
-            status: status + '' === "1" ? "0" : "1",
+            status: status + "" === "1" ? "0" : "1",
           };
           let res = {};
           if (level === 3) {
@@ -163,7 +309,7 @@ export default {
           console.log("取消");
         });
     },
-    async deleteMenu(id, parentIds, level, status) {
+    async deleteItem(id, parentIds, level, status) {
       await this.$confirm(`确定要删除？`, {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -203,14 +349,14 @@ export default {
       if (isOpen) {
         if (level === 1) {
           this.tableData = this.tableData.map((v) => {
-            if (v.id + '' === id + '') {
+            if (v.id + "" === id + "") {
               v.child = [];
             }
             return v;
           });
         } else {
           this.tableData = this.tableData.map((v) => {
-            if (v.id + '' === parentIds + '') {
+            if (v.id + "" === parentIds + "") {
               v.child = v.child.map((val) => {
                 if (val.id === id) val.child = [];
                 return val;
@@ -273,7 +419,7 @@ export default {
       }
       let arr = JSON.parse(JSON.stringify(this.tableData));
       arr = arr.map((val, index) => {
-        if (level === 1 ? id : parentIds + '' === val.id + '') {
+        if (level === 1 ? id : parentIds + "" === val.id + "") {
           val.child = tableData[index].child;
         }
         return val;
@@ -310,16 +456,16 @@ export default {
     height: 100%;
     width: 100%;
     box-sizing: border-box;
-    .MenuOperator-search{
+    .MenuOperator-search {
       position: absolute;
-      top:0;
-      left:0;
+      top: 0;
+      left: 0;
       width: 100%;
       z-index: 2;
       background: #fff;
     }
 
-    .MenuOperator-show{
+    .MenuOperator-show {
       position: relative;
       height: 100%;
       padding: 40px 0 0 0;

src/views/system/setBtn/addEdit.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-dialog
+    v-loading="loading"
+    :title="title"
+    :center="true"
+    align="left"
+    top="10vh"
+    width="750px"
+    :close-on-click-modal="false"
+    :visible.sync="showModelThis"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    append-to-body
+    @close="showModelThis = false"
+  >
+    <el-card style="margin-top: -20px">
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        status-icon
+        :rules="rulesThis"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="按钮标识：" prop="action_code">
+          <el-select
+            style="width: 100%"
+            v-model="ruleForm.action_code"
+            placeholder="请选择按钮标识"
+            clearable
+            filterable
+            :disabled="type === 'view'"
+            @change="codeChange"
+          >
+            <el-option
+              v-for="item in btnList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态：" prop="status">
+          <el-radio v-model="ruleForm.status" :label="'1'" :disabled="type === 'view'">
+            启用
+          </el-radio>
+          <el-radio v-model="ruleForm.status" :label="'0'" :disabled="type === 'view'">
+            禁用
+          </el-radio>
+        </el-form-item>
+      </el-form>
+
+      <el-col :span="24" style="text-align: right; padding: 0 0 10px 0">
+        <el-button v-if="type !== 'view'" type="primary" @click="submitForm">
+          保 存
+        </el-button>
+        <el-button @click="showModelThis = false">{{
+          type === "view" ? "关 闭" : "取 消"
+        }}</el-button>
+      </el-col>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script>
+import asyncRequest from "@/apis/service/system/menu";
+import btnList from "@/assets/js/btnList";
+import resToken from "@/mixins/resToken";
+export default {
+  mixins: [resToken],
+  props: ["showModel", "type", "formData"],
+  data() {
+    return {
+      loading: false,
+      showIconModel: false,
+      title: "",
+      btnList,
+      showModelThis: this.showModel,
+      ruleForm: {},
+      rulesThis: this.rules,
+      rules: {
+        action_code: [
+          {
+            required: true,
+            message: "请选择按钮",
+            trigger: "change",
+          },
+        ],
+
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    showModel: function (val) {
+      this.showModelThis = val;
+      if (val) {
+        this.initForm();
+      }
+    },
+    showModelThis(val) {
+      if (!val) {
+        this.$emit("cancel");
+      }
+    },
+  },
+  methods: {
+    codeChange(code) {
+      for (let i = 0; i < this.btnList.length; i++) {
+        if (this.btnList[i].code === code) {
+          this.ruleForm.action_name = this.btnList[i].name;
+          break;
+        }
+      }
+    },
+    setVal(val) {
+      this.ruleForm.status = val;
+      this.$refs.ruleForm.validateField("status");
+    },
+    async initForm() {
+      this.loading = false;
+      // console.log(this.showModel, this.type, this.formData);
+      switch (this.type) {
+        case "view":
+          this.title = "按钮详情";
+          this.rulesThis = {};
+          await this.initData();
+          break;
+        case "edit":
+          this.title = "修改按钮";
+          this.rulesThis = this.rules;
+          await this.initData();
+          break;
+
+        default:
+          this.title = "添加按钮";
+          this.rulesThis = this.rules;
+          await this.initData();
+          break;
+      }
+    },
+    async initData() {
+      this.loading = true;
+      const { id, status, menuid, action_code, action_name } = this.formData;
+      console.log(this.formData);
+      this.ruleForm = {
+        id: String(id ?? ""), // 父级ID（一级为0）
+        menuid: String(menuid ?? ""), // 所有父级编号（用逗号分隔）
+        action_code: String(action_code ?? ""), // 编码（用于按钮是否显示）
+        action_name: String(action_name ?? ""), // 编码（用于按钮是否显示）
+        status: String(status ?? ""), // 图标（导航图标）
+      };
+      this.loading = false;
+      await this.$nextTick(() => {
+        if (this.$refs.ruleForm) {
+          this.$refs.ruleForm.clearValidate();
+        }
+      });
+    },
+    async submitForm() {
+      if (this.loading) {
+        return false;
+      }
+      this.loading = true;
+
+      await this.$refs.ruleForm.validate(async (valid) => {
+        if (valid) {
+          // let model = {};
+          let res = {};
+          // const {
+          //   name,
+          //   status,
+          //   route,
+          //   status,
+          //   is_display,
+          //   weight,
+          //   component,
+          //   code,
+          //   level,
+          // } = this.ruleForm;
+
+          // if (this.type=='add') {
+          //   delete model["id"];
+          // }
+
+          if (this.type == "add") {
+            res = await asyncRequest.actionadd(this.ruleForm);
+          } else {
+            res = await asyncRequest.actionedit(this.ruleForm);
+          }
+          this.loading = false;
+          const { code: mcode, message } = res;
+          if (mcode === 0) {
+            this.ruleForm = {};
+            const title = this.type == "add" ? "添加成功" : "修改成功";
+            this.$notify.success({
+              title,
+              message: "",
+            });
+            this.showModelThis = false;
+            this.$emit("refresh");
+          } else if (mcode >= 100 && mcode <= 104) {
+            await this.logout();
+          } else {
+            this.$message.warning(message);
+          }
+        } else {
+          this.loading = false;
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.g-block {
+  display: inline-block;
+  padding: 10px 5px;
+  text-align: center;
+  border: 1px #ccc dashed;
+  margin: 1px;
+  font-size: 0px;
+  cursor: pointer;
+  i {
+    font-size: 30px;
+    line-height: 30px;
+    display: block;
+    margin: 0 auto;
+    width: 30px;
+  }
+}
+</style>

src/views/system/setBtn/index.vue

@@ -0,0 +1,502 @@
+<template>
+  <div class="setBtn">
+    <div class="processPermission_show_box" v-if="powers.some((i) => i == '001')">
+      <ul class="role-list fl" v-loading="menuLoading">
+        <p class="role-list__title">菜单列表</p>
+        <p
+          v-if="menuTableData.length == 0"
+          style="line-height: 60px; text-align: center; color: #909399"
+        >
+          暂无数据
+        </p>
+
+        <el-tree
+          :data="menuTableData"
+          accordion
+          :props="defaultProps"
+          :current-node-key="keyId"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </ul>
+      <div class="rule-view fr">
+        <ex-table
+          v-loading="loading"
+          v-if="powers.some((i) => i == '001')"
+          :table="table"
+          :data="tableData"
+          :columns="columns"
+          :page="pageInfo"
+          :size="size"
+          @page-curr-change="handlePageChange"
+          @page-size-change="handleSizeChange"
+          @screen-reset="
+            pageInfo.curr = 1;
+            searchList();
+          "
+          @screen-submit="
+            pageInfo.curr = 1;
+            searchList();
+          "
+        >
+          <template #table-header="{}">
+            <div style="width: 100%; padding: 0 0 0 80px">
+              <el-row>
+                <el-col :span="24">
+                  <el-col :span="3" style="width: 66px; float: right">
+                    <el-button
+                      type="primary"
+                      :size="searchSize"
+                      style="float: right"
+                      @click="searchList"
+                    >
+                      刷新
+                    </el-button>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="width: 66px; float: right"
+                    v-if="powers.some((i) => i == '003')"
+                  >
+                    <el-button
+                      :size="searchSize"
+                      type="success"
+                      style="float: right"
+                      @click="openModal('add', {})"
+                    >
+                      添加
+                    </el-button>
+                  </el-col>
+                </el-col>
+              </el-row>
+            </div>
+          </template>
+          <template #status="{ scope }">
+            <el-tag
+              :size="tablebtnSize"
+              :type="scope.row.status == '0' ? 'warning' : ''"
+              v-text="
+                (statusOptions.find((item) => item.id == scope.row.status) || {}).label ||
+                '--'
+              "
+            ></el-tag>
+          </template>
+
+          <template #operation="{ scope }">
+            <el-tooltip
+              v-if="powers.some((i) => i == '007')"
+              effect="dark"
+              content="详情"
+              placement="top"
+            >
+              <i class="el-icon-view tb-icon" @click="openModal('view', scope.row)"></i>
+            </el-tooltip>
+            <el-tooltip
+              v-if="powers.some((i) => i == '005')"
+              effect="dark"
+              content="修改"
+              placement="top"
+            >
+              <i class="el-icon-edit tb-icon" @click="openModal('edit', scope.row)"></i>
+            </el-tooltip>
+            <el-tooltip
+              v-if="powers.some((i) => i == '004') && scope.row.status + '' === '1'"
+              effect="dark"
+              content="禁用"
+              placement="top"
+            >
+              <i
+                class="el-icon-video-pause tb-icon"
+                @click="changeStatus(scope.row.id, scope.row.status)"
+              ></i>
+            </el-tooltip>
+            <el-tooltip
+              v-if="powers.some((i) => i == '004') && scope.row.status + '' === '0'"
+              effect="dark"
+              content="启用"
+              placement="top"
+            >
+              <i
+                class="el-icon-video-play tb-icon"
+                @click="changeStatus(scope.row.id, scope.row.status)"
+              ></i>
+            </el-tooltip>
+            <el-tooltip
+              v-if="powers.some((i) => i == '006')"
+              effect="dark"
+              content="删除"
+              placement="top"
+            >
+              <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
+            </el-tooltip>
+          </template>
+        </ex-table>
+      </div>
+      <add-edit
+        :show-model="showModel"
+        :form-data="formData"
+        :type="modelType"
+        @refresh="searchList"
+        @cancel="showModel = false"
+      />
+    </div>
+    <div v-else>
+      <no-auth></no-auth>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixinPage from "@/mixins/elPaginationHandle";
+import asyncRequest from "@/apis/service/system/menu";
+import addEdit from "@/views/system/setBtn/addEdit";
+import resToken from "@/mixins/resToken";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "setBtn",
+  components: {
+    addEdit,
+  },
+  mixins: [mixinPage, resToken],
+  computed: {
+    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
+    powers() {
+      const { btnList } = this.$store.getters;
+      const tran = btnList.find((item) => item.menu_route == "setBtn") || {};
+      const { action } = tran ?? {};
+      return action ?? [];
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: "child",
+        label: "menu_name",
+      },
+      keyId: "",
+
+      // 状态
+      statusOptions: [
+        { id: 0, label: "禁用" },
+        { id: 1, label: "启用" },
+      ],
+      menuLoading: true,
+      loading: true,
+      showModel: false,
+      showInterface: false,
+      isDetail: false,
+      isAdd: true,
+      level: 1,
+      modelType: 0,
+      formData: {},
+      parentIds: "",
+      parmValue: {
+        parentId: 0, // 父级Id
+        code: "", // 编码
+        status: "", // 状态（1启用 2禁用）
+        type: 1, // 类型（1.运营菜单 2.物业菜单）
+        menuCategory: "", // 菜单类别（1.导航菜单 2.按钮）
+        current: 1, // 页码
+        size: 15, // 每页显示条数
+      },
+      menuTableData: [],
+      tableData: [],
+      // 表格 - 参数
+      table: {
+        stripe: true,
+        border: true,
+        _defaultHeader_: ["setcol"],
+      },
+      pageInfo: {
+        size: 15,
+        curr: 1,
+        total: 0,
+      },
+      // 表格 - 列参数
+      columns: [
+        {
+          prop: "id",
+          label: "ID",
+        },
+        {
+          prop: "action_name",
+          label: "按钮名称",
+        },
+        {
+          prop: "action_code",
+          label: "按钮编号",
+        },
+
+        {
+          prop: "status",
+          label: "状态",
+          _slot_: "status",
+        },
+
+        {
+          prop: "addtime",
+          label: "创建时间",
+        },
+
+        {
+          prop: "",
+          label: "操作",
+          fixed: "right",
+          width: "160px",
+          _slot_: "operation",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.getMenuList();
+  },
+  methods: {
+    async getMenuList() {
+      this.menuLoading = true;
+      const { code, data } = await asyncRequest.list({});
+      this.menuTableData = [];
+      if (code === 0) {
+        this.menuTableData = data;
+      } else if (code >= 100 && code <= 104) {
+        await this.logout();
+      } else {
+        this.menuTableData = [];
+      }
+      this.menuLoading = false;
+      if (this.menuTableData.length > 0) {
+        this.handleNodeClick(this.menuTableData[0], 1);
+      } else {
+        this.tableData = [];
+        this.loading = false;
+      }
+    },
+    async handleNodeClick(data, type) {
+      const { id, pid, child } = data;
+      if (Number(pid) !== 0) {
+        this.keyId = id;
+        await this.searchList();
+      } else {
+        if (type === 1 && child.length > 0) {
+          this.keyId = child[0].id;
+          await this.searchList();
+        }
+      }
+    },
+
+    openModal(type, formData) {
+      if (type == "add") {
+        this.formData = { menuid: this.keyId };
+      } else {
+        this.formData = formData;
+      }
+      this.modelType = type;
+      this.showModel = true;
+    },
+
+    async changeStatus(id, status) {
+      await this.$confirm(`确定要${status + "" === "0" ? "启用" : "禁用"}？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const model = {
+            id: String(id ?? ""),
+            status: String(status ?? "") === "1" ? "0" : "1",
+          };
+          const { code, message } = await asyncRequest.actionstatus(model);
+
+          if (code === 0) {
+            this.$notify.success({
+              title: "修改成功！",
+              message: "",
+            });
+            await this.searchList();
+          } else if (code >= 100 && code <= 104) {
+            await this.logout();
+          } else {
+            this.$message.warning(message);
+          }
+        })
+        .catch(() => {
+          console.log("取消");
+        });
+    },
+    async deleteItem(id, parentIds, level, status) {
+      await this.$confirm(`确定要删除？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const model = {
+            id: id,
+          };
+          let res = await asyncRequest.actiondel(model);
+          if (res && res.code === 0) {
+            this.$notify.success({
+              title: "删除成功！",
+              message: "",
+            });
+            await this.searchList();
+          } else if (res && res.code >= 100 && res.code <= 104) {
+            await this.logout();
+          }
+        })
+        .catch(() => {
+          console.log("取消");
+        });
+    },
+
+    async searchList() {
+      this.loading = true;
+      const res = await asyncRequest.actionList({ id: this.keyId });
+      this.tableData = [];
+      if (res && res.code === 0 && res.data) {
+        this.tableData = res.data;
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      } else {
+        this.tableData = [];
+      }
+      this.loading = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+.setBtn {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  .processPermission_show_box {
+    // position: relative;
+    // height: calc(100% - 50px);
+    // min-height: calc(100% - 50px);
+
+    display: relative;
+    width: 100%;
+    height: calc(100vh - 50px);
+    overflow: hidden;
+    text-align: left;
+    //左侧
+    .role-list {
+      height: 100%;
+      overflow-y: auto;
+      width: 300px;
+      padding: 8px 16px;
+      min-height: 100%;
+      flex-shrink: 0;
+      border-right: 2px solid #dfe6ec;
+      @include scrollBar();
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: 2px;
+        background-color: #e4e7ed;
+        z-index: 1;
+      }
+      .role-list__title {
+        color: #b4b6c0;
+        line-height: 32px;
+      }
+      .role-list__item {
+        position: relative;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 32px;
+        line-height: 32px;
+        padding-left: 8px;
+        color: rgb(48, 49, 51);
+        cursor: pointer;
+        i {
+          position: absolute;
+          right: 0;
+          line-height: 32px;
+        }
+      }
+      .role-list__item.active {
+        color: #6954f0;
+        background: #f7f7f7;
+      }
+    }
+    //右侧
+    .rule-view {
+      height: 100%;
+      //calc(100% - 50px);
+      width: calc(100% - 300px);
+      overflow-y: auto;
+      padding: 0 16px;
+      @include scrollBar();
+      .rule-list {
+        border-right: 1px solid #dfe6ec;
+        .title {
+          padding: 18px 18px 12px 18px;
+          border-bottom: 1px dashed #dfe6ec;
+          font-size: 15px;
+          color: #000;
+        }
+        .main {
+          padding: 18px 18px 12px 18px;
+          border-bottom: 1px solid #dfe6ec;
+        }
+        .main-title {
+          width: 80px;
+        }
+        .main-item {
+          width: calc(100% - 80px);
+        }
+      }
+    }
+    .rule-bottom {
+      padding: 10px 18px 8px 0;
+      background: #fff;
+      width: calc(100% - 200px);
+      position: absolute;
+      text-align: right;
+      bottom: 0;
+      right: 0;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 2px;
+        width: 100%;
+        background-color: #e4e7ed;
+        z-index: 1;
+      }
+    }
+  }
+
+  .setBtn-main {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    .setBtn-search {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 2;
+      background: #fff;
+    }
+
+    .setBtn-show {
+      position: relative;
+      height: 100%;
+      padding: 40px 0 0 0;
+      overflow-y: scroll;
+    }
+  }
+}
+</style>