修改菜单管理添加菜单弹框样式

chuanyi-admin/src/views/system/menu/index.vue

@@ -3,38 +3,125 @@
     <el-row>
       <el-col :span="24">
         <!-- 表单查询 -->
-        <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
-          <el-form-item label="菜单名称" prop="menuName">
-            <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clear />
+        <el-form
+          ref="queryForm"
+          :model="queryParams"
+          :inline="true"
+          size="small"
+        >
+          <el-form-item
+            label="菜单名称"
+            prop="menuName"
+          >
+            <el-input
+              v-model="queryParams.menuName"
+              placeholder="请输入菜单名称"
+              clear
+            />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handelSearch">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="handelReset">重置</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handelSearch"
+            >搜索</el-button>
+            <el-button
+              icon="el-icon-refresh"
+              size="mini"
+              @click="handelReset"
+            >重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-button size="mini" icon="el-icon-plus" type="primary" plain @click="handelAdd">新增</el-button>
+        <el-button
+          size="mini"
+          icon="el-icon-plus"
+          type="primary"
+          plain
+          @click="handelAdd"
+        >新增</el-button>
 
         <!-- 表格数据信息 -->
-        <el-table v-loading="loading" :data="menuList" row-key="id">
-          <el-table-column type="index" width="50" align="center" />
-          <el-table-column key="menuName" label="菜单名称" align="center" prop="menuName" />
-          <el-table-column key="menuIcon" label="菜单图标" align="center" prop="menuIcon" />
-          <el-table-column key="menuUrl" label="路由地址" align="center" prop="menuUrl" />
-          <el-table-column key="sortNum" label="排序号" align="center" prop="sortNum" />
-          <el-table-column key="createTime" label="创建时间" align="center" prop="createTime" width="160" />
-          <el-table-column key="updateTime" label="更新时间" align="center" prop="updateTime" width="160">
+        <el-table
+          v-loading="loading"
+          :data="menuList"
+          row-key="id"
+        >
+          <el-table-column
+            type="index"
+            width="50"
+            align="center"
+          />
+          <el-table-column
+            key="menuName"
+            label="菜单名称"
+            align="center"
+            prop="menuName"
+          />
+          <el-table-column
+            key="menuIcon"
+            label="菜单图标"
+            align="center"
+            prop="menuIcon"
+          />
+          <el-table-column
+            key="menuUrl"
+            label="路由地址"
+            align="center"
+            prop="menuUrl"
+          />
+          <el-table-column
+            key="sortNum"
+            label="排序号"
+            align="center"
+            prop="sortNum"
+          />
+          <el-table-column
+            key="createTime"
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            width="160"
+          />
+          <el-table-column
+            key="updateTime"
+            label="更新时间"
+            align="center"
+            prop="updateTime"
+            width="160"
+          >
             <template slot-scope="scope">
               {{ scope.row.updateTime === null ? scope.row.createTime : scope.row.updateTime }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            align="center"
+            width="250"
+            class-name="small-padding fixed-width"
+          >
             <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handelEdit(scope.row.id)">修改
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handelEdit(scope.row.id)"
+              >修改
               </el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handelDel(scope.row.id)">删除
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handelDel(scope.row.id)"
+              >删除
               </el-button>
-              <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="handelAuth(scope.row.id)">分配接口
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-zoom-in"
+                @click="handelAuth(scope.row.id)"
+              >分配接口
               </el-button>
             </template>
           </el-table-column>
@@ -53,44 +140,94 @@
     </el-row>
 
     <!-- 弹出框 -->
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="35%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="800px"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
         <el-row>
           <el-col :span="24">
-            <el-form-item label="上级菜单" prop="parentId">
-              <selectTree v-model="form.parentId" :options="options" placeholder="请选择菜单" key-name="menuName" />
+            <el-form-item
+              label="上级菜单"
+              prop="parentId"
+            >
+              <selectTree
+                v-model="form.parentId"
+                :options="options"
+                placeholder="请选择菜单"
+                key-name="menuName"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="菜单图标" prop="menuIcon">
-              <el-input v-model="form.menuIcon" placeholder="请输入图标名称" />
+            <el-form-item
+              label="菜单图标"
+              prop="menuIcon"
+            >
+              <el-input
+                v-model="form.menuIcon"
+                placeholder="请输入图标名称"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="菜单名称" prop="menuName">
-              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+            <el-form-item
+              label="菜单名称"
+              prop="menuName"
+            >
+              <el-input
+                v-model="form.menuName"
+                placeholder="请输入菜单名称"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="显示排序" prop="sortNum">
-              <el-input-number v-model="form.sortNum" placeholder="0" controls-position="right" :min="1" :max="10" />
+            <el-form-item
+              label="显示排序"
+              prop="sortNum"
+            >
+              <el-input-number
+                v-model="form.sortNum"
+                placeholder="0"
+                controls-position="right"
+                :min="1"
+                :max="10"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="路由地址" prop="menuUrl">
-              <el-input v-model="form.menuUrl" placeholder="请输入路由地址" />
+            <el-form-item
+              label="路由地址"
+              prop="menuUrl"
+            >
+              <el-input
+                v-model="form.menuUrl"
+                placeholder="请输入路由地址"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handelSubmit('form')">确 定</el-button>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          type="primary"
+          @click="handelSubmit('form')"
+        >确 定</el-button>
         <el-button @click="handelCancel('form')">取 消</el-button>
       </span>
     </el-dialog>
@@ -267,5 +404,4 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-
 </style>