tui

smart-office-manager-ui/admin/src/views/system/menu/dialogshow.vue

@@ -14,16 +14,40 @@
           </el-form-item>
         </el-col>
         <!--<Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled />-->
-        <Field label="名称" prop="name" v-model="form.name"/>
-        <Field label="权限类型"  prop="authType" v-model="form.authType" :enumData='dict.authType' type='select' />
+        <Field label="名称" prop="name" v-model="form.name" />
+        <Field
+          label="权限类型"
+          prop="authType"
+          v-model="form.authType"
+          :enumData="dict.authType"
+          type="select"
+        />
         <Field label="访问地址" prop="url" v-model="form.url" />
-        <Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' />
-        <Field class="radio-group-container" label="图标" prop="imgPath" :span='24'>
-          <el-radio-group v-model="form.imgPath" class='form-el-radio-group'>
-            <el-radio-button style="width: 180px" label="">不需要图标</el-radio-button>
-            <el-radio-button style="width: 180px" v-for='(icon, index) in icons' :key='index' :label="icon">
-              <i :class="'el-icon-'+icon" style="font-size: 20px"></i>
-              {{icon}}
+        <Field
+          label="状态"
+          prop="status"
+          v-model="form.status"
+          :enumData="dict.status"
+          type="radio"
+        />
+        <Field
+          class="radio-group-container"
+          label="图标"
+          prop="imgPath"
+          :span="24"
+        >
+          <el-radio-group v-model="form.imgPath" class="form-el-radio-group">
+            <el-radio-button style="width: 180px" label=""
+              >不需要图标</el-radio-button
+            >
+            <el-radio-button
+              style="width: 180px"
+              v-for="(icon, index) in icons"
+              :key="index"
+              :label="icon"
+            >
+              <i :class="'el-icon-' + icon" style="font-size: 20px"></i>
+              {{ icon }}
             </el-radio-button>
           </el-radio-group>
         </Field>
@@ -40,7 +64,7 @@
 import form from "@/assets/mixins/formdialog";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import axios from 'axios'
+import axios from "axios";
 export default {
   mixins: [form],
   components: {
@@ -48,16 +72,43 @@ export default {
   },
   data() {
     return {
-      fileContent:"",
-      id:null,
+      fileContent: "",
+      id: null,
       icons: [
-        'info', 'error', 'success', 'warning', 'question',
-        'tickets', 'document', 'goods', 'sold-out', 'news',
-        'message', 'date', 'printer', 'time', 'bell',
-        'mobile-phone', 'service', 'view', 'menu', 'star-on',
-        'location', 'phone', 'picture', 'delete', 'search',
-        'edit', 'rank', 'refresh', 'share', 'setting',
-        'upload', 'upload2', 'download', 'loading',
+        "info",
+        "error",
+        "success",
+        "warning",
+        "question",
+        "tickets",
+        "document",
+        "goods",
+        "sold-out",
+        "news",
+        "message",
+        "date",
+        "printer",
+        "time",
+        "bell",
+        "mobile-phone",
+        "service",
+        "view",
+        "menu",
+        "star-on",
+        "location",
+        "phone",
+        "picture",
+        "delete",
+        "search",
+        "edit",
+        "rank",
+        "refresh",
+        "share",
+        "setting",
+        "upload",
+        "upload2",
+        "download",
+        "loading",
       ],
       menuOptions: [],
       // 遮罩层
@@ -66,44 +117,36 @@ export default {
       title: "菜单信息",
       // 是否显示弹出层
       open: false,
-      toString:[
-        "status",
-        "linkType",
-        "commMenu",
-        "menuType",
-        "authType",
-      ],
+      toString: ["status", "linkType", "commMenu", "menuType", "authType"],
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
   created() {
-    axios.get('/icon.txt')
-        .then(response => {
-          this.fileContent = response.data
-          this.icons = this.fileContent.split('\n')
-        })
+    axios.get("/icon.txt").then((response) => {
+      this.fileContent = response.data;
+      this.icons = this.fileContent.split("\n");
+    });
   },
   methods: {
     /** 编辑 */
     edit(row, menuOptions) {
-      this.reset()
+      this.reset();
       this.query = { id: row.id };
-      this.urls.currUrl =this.pageInfo.editUrl;;
+      this.urls.currUrl = this.pageInfo.editUrl;
       this.getData();
       this.menuOptions = menuOptions;
       this.title = "修改菜单信息";
     },
     /** 新增 */
     add(row, menuOptions) {
-      this.reset()
+      this.reset();
       this.query = { id: row.id };
       this.urls.currUrl = this.pageInfo.addUrl;
       this.getData();
-      if(row.id){
-        this.id=row.id
-        this.form.parentId=row.id
+      if (row.id) {
+        this.id = row.id;
+        this.form.parentId = row.id;
       }
       this.menuOptions = menuOptions;
       this.title = "新增菜单信息";
@@ -111,7 +154,7 @@ export default {
     /** 查看*/
     view(row, menuOptions) {
       this.query = { id: row.id };
-      this.urls.currUrl =this.pageInfo.viewUrl;;
+      this.urls.currUrl = this.pageInfo.viewUrl;
       this.getData();
       this.menuOptions = menuOptions;
       this.title = "菜单信息详细";
@@ -122,8 +165,8 @@ export default {
     },
     /**获取数据后弹框 */
     afterRender(data) {
-      if(this.id){
-        this.form.parentId=this.id
+      if (this.id) {
+        this.form.parentId = this.id;
       }
       this.open = true;
     },
@@ -147,28 +190,27 @@ export default {
     reset() {
       this.resetForm("form");
       this.form = {
-        name : "",
-        url : null,
-        ancestors : null,
-        parentId : null,
-        orderId : null,
-        status : 1,
-        linkType : 0,
-        groupId : 1,
-        groupName : null,
-        imgPath : null,
-        buttonImgPath : null,
-        imgCommPath : null,
-        commMenu : 0,
-        menuType : 0,
-        authType : 3,
-        createUserName : null,
+        name: "",
+        url: null,
+        ancestors: null,
+        parentId: null,
+        orderId: null,
+        status: 1,
+        linkType: 0,
+        groupId: 1,
+        groupName: null,
+        imgPath: null,
+        buttonImgPath: null,
+        imgCommPath: null,
+        commMenu: 0,
+        menuType: 0,
+        authType: 3,
+        createUserName: null,
       };
-
     },
     resetForm(refName) {
       if (this.$refs[refName]) {
-        console.log("重置表单")
+        console.log("重置表单");
         this.$refs[refName].resetFields();
       }
     },
@@ -196,10 +238,10 @@ export default {
   box-shadow: none;
 }
 
-.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
   background: rgba(0, 0, 0, 0);
-  border: 1px solid #3E7BFA !important;
-  color: #3E7BFA;
+  border: 1px solid #3e7bfa !important;
+  color: #3e7bfa;
   line-height: 14px;
   outline: none;
   box-shadow: none;

smart-office-manager-ui/admin/src/views/system/menu/list.vue

 <template>
-  <div className="page">
+  <div
+    class="page"
+    style="padding: 0 !important;height: 81% !important; min-height: 81% !important;"
+  >
     <el-card>
-     <LayoutTable notPagination ref="layoutTable" :data="tableData" :config="tableConfig"/>
+      <LayoutTable
+        notPagination
+        ref="layoutTable"
+        :data="tableData"
+        :config="tableConfig"
+      />
     </el-card>
-    <dialog-show ref="dialogform" @ok="getData"/>
+    <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-import {handleTree} from "@/assets/utils/table";
+import { handleTree } from "@/assets/utils/table";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import table from "@/assets/mixins/table";
@@ -17,15 +25,15 @@ import dialogShow from "./dialogshow";
 export default {
   name: "Menu",
   mixins: [table],
-  components: {Treeselect, dialogShow},
+  components: { Treeselect, dialogShow },
   created() {
-    this.query={"page":1,"size":-1}
+    this.query = { page: 1, size: -1 };
   },
   methods: {
     afterRender(data) {
       data.data = handleTree(data.data, "id", "parentId");
       this.menuOptions = data.data;
-      this.$refs.layoutTable.showType = "treetable"
+      this.$refs.layoutTable.showType = "treetable";
     },
 
     handleUp(data) {
@@ -48,7 +56,7 @@ export default {
       })
         .then((res) => {
           if (res && res.code && res.code == 1) {
-              this.getData()
+            this.getData();
             this.loading = false;
             this.$message.success("更新排序成功！");
           }
@@ -70,7 +78,7 @@ export default {
     /** 重写编辑方法 */
     toEdit(row) {
       this.loading = true;
-      this.$post(this.pageInfo.exclude, {id: row.id})
+      this.$post(this.pageInfo.exclude, { id: row.id })
         .then((res) => {
           if (res && res.code && res.code == 1) {
             this.menuOptions = handleTree(res.data.data);
@@ -80,7 +88,7 @@ export default {
         })
         .catch((error) => {
           this.$message.error(error.message);
-          })
+        });
     },
     /** 重写查看方法 */
     toView(row) {
@@ -89,101 +97,101 @@ export default {
 
     // 展示菜单图标
     showIcon(row, column) {
-      return <i class={'el-icon-'+row.imgPath}></i>
+      return <i class={"el-icon-" + row.imgPath}></i>;
     },
 
-    handleStatus(row){
-      if(row.status==1){
-        this.$post("/menu/change/status", {id:row.id,status:0})
-            .then(res => {
-              if(res.code==1){
-                row.status=0;
+    handleStatus(row) {
+      if (row.status == 1) {
+        this.$post("/menu/change/status", { id: row.id, status: 0 })
+          .then((res) => {
+            if (res.code == 1) {
+              row.status = 0;
             }
           })
-            .catch(error => {
+          .catch((error) => {
             this.$message.error(error.message);
-            })
-      }else{
-        this.$post("/menu/change/status", {id:row.id,status:1})
-            .then(res => {
-              if(res.code==1){
-                row.status=1;
+          });
+      } else {
+        this.$post("/menu/change/status", { id: row.id, status: 1 })
+          .then((res) => {
+            if (res.code == 1) {
+              row.status = 1;
             }
           })
-            .catch(error => {
+          .catch((error) => {
             this.$message.error(error.message);
-            })
+          });
       }
     },
   },
   data() {
     return {
-      value: '1',
+      value: "1",
       config: {
-        isshowTabPane:true,
+        isshowTabPane: true,
         /** 树表是否默认展开 */
         expand: false,
         showType: "treetable",
         search: [],
         columns: [
           {
-            type: 'selection',
+            type: "selection",
             width: 60,
           },
           {
-            prop: 'id',
-            label: 'ID',
+            prop: "id",
+            label: "ID",
             width: 120,
           },
           {
-            prop: 'name',
-            label: '名称',
+            prop: "name",
+            label: "名称",
             width: 160,
           },
           {
-            prop: 'imgPath',
-            label: '图标',
+            prop: "imgPath",
+            label: "图标",
             width: 50,
             formatter: this.showIcon,
           },
           {
-            prop: 'authType',
-            label: '权限类型',
+            prop: "authType",
+            label: "权限类型",
             formatter: this.formatter,
           },
           {
-            prop: 'parentId',
-            label: '父ID',
+            prop: "parentId",
+            label: "父ID",
+            width: 160,
           },
           {
-            prop: 'url',
-            label: '地址',
+            prop: "url",
+            label: "地址",
+            width: 160,
           },
           {
-            prop: 'status',
-            label: '状态',
+            prop: "status",
+            label: "状态",
             width: 100,
-            formatter: row => {
+            formatter: (row) => {
               return (
                 <el-switch
-                        value={row.status+""}
+                  value={row.status + ""}
                   active-color="#13ce66"
                   inactive-color="#ff4949"
-                        active-value='1'
-                        inactive-value='0'
+                  active-value="1"
+                  inactive-value="0"
                   onChange={() => {
                     this.handleStatus(row);
                   }}
-                    >
-                    </el-switch>
+                ></el-switch>
               );
-            }
-
+            },
           },
           {
             label: "操作",
             width: 280,
-            formatter: row => {
+            formatter: (row) => {
               return (
                 <div>
                   <el-link
@@ -200,7 +208,6 @@ export default {
                     onClick={() => {
                       this.handleDown(row);
                     }}
-
                   ></el-link>
 
                   <el-button
@@ -223,11 +230,11 @@ export default {
                   />
                 </div>
               );
-            }
-          }
-        ]
-      }
+            },
+          },
+        ],
+      },
     };
-  }
+  },
 };
 </script>