弹框样式修改

src/assets/styles/yxk-admin.scss

@@ -214,7 +214,7 @@
     // margin-left: 0 !important;
   }
   .el-button--mini{
-    padding: 7px 12px;
+    padding: 7px 10px;
   }
   .el-button.is-disabled, 
   .el-button.is-disabled:hover, 
@@ -232,9 +232,6 @@
   min-height: auto;
 }
 
-// 无左右分区时
-.container-wrap{}
-
 .right-top-line,
 .left-bottom-line{
   display: block;
@@ -416,3 +413,169 @@
     color: #fff;
   }
 }
+
+//
+.el-dialog{
+  position: relative;
+  width: 620px;
+  padding: 2px;
+  background: linear-gradient(135deg, transparent 10px, #339CFF 0) top left, 
+              linear-gradient(-135deg, transparent 10px, #339CFF 0) top right, 
+              linear-gradient(-45deg, transparent 10px, #339CFF 0) bottom right, 
+              linear-gradient(45deg, transparent 10px, #339CFF 0) bottom left;
+  background-size: 50% 50%;
+  background-repeat: no-repeat;
+  box-shadow: none;
+  &::before,
+  &::after,
+  .dialog-right-top,
+  .dialog-left-bottom{
+    position: absolute;
+    content: "";
+    width: 134px;
+    height: 63px;
+    z-index: -1;
+  }
+  &::before{
+    left: -10px;
+    top: -28px;
+    background: url(~@/assets/images/left_top.png) no-repeat;
+  }
+  &::after{
+    right: -20px;
+    bottom: -10px;
+    background: url(~@/assets/images/right_bottom.png) no-repeat;
+  }
+  .dialog-right-top{
+    right: -20px;
+    top: -28px;
+    background: url(~@/assets/images/right_top.png) no-repeat;
+  }
+  .dialog-left-bottom{
+    left: -10px;
+    bottom: -10px;
+    background: url(~@/assets/images/left_bottom.png) no-repeat;
+  }
+  .el-dialog__header{
+    position: relative;
+    margin: -60px auto 0 auto;
+    width: 360px;
+    padding: 0;
+    &::before{
+      position: absolute;
+      left: -23px;
+      top: 0;
+      content: "";
+      width: 23px;
+      height: 42px;
+      background: url(~@/assets/images/dialog_left.png) no-repeat;
+      background-size: cover;
+    }
+    &::after{
+      position: absolute;
+      right: -23px;
+      top: 0;
+      content: "";
+      width: 23px;
+      height: 42px;
+      background: url(~@/assets/images/dialog_right.png) no-repeat;
+      background-size: cover;
+    }
+    .el-dialog__title{
+      display: block;
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 38px;
+      color: #fff;
+      text-align: center;
+      background-color: #031435;
+      border-top: 2px solid #339CFF;
+      border-bottom: 2px solid #339CFF;
+    }
+    .el-dialog__headerbtn{
+      top: 4px;
+      right: -160px;
+    }
+    .el-dialog__close{
+      font-family: "iconfont" !important;
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      
+      font-size: 24px;
+      color: #339CFF;
+      &::before{
+        content: "\e60c";
+      }
+    }
+  }
+  .el-dialog__body{
+    width: 100%;
+    // min-height: 400px;
+    background: linear-gradient(135deg, transparent 12px, #031435 0) top left, 
+              linear-gradient(-135deg, transparent 12px, #031435 0) top right, 
+              linear-gradient(-45deg, transparent 12px, #031435 0) bottom right, 
+              linear-gradient(45deg, transparent 12px, #031435 0) bottom left;
+    background-size: 50% 50%;
+    background-repeat: no-repeat;
+    box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
+  }
+
+  .el-form{
+    .el-form-item__label{
+      line-height: 36px;
+      color: $subMenuActiveText;
+    }
+    .el-input__inner{
+      height: 36px;
+      line-height: 36px;
+      color: #fff;
+      border: 1px solid $subMenuActiveText;
+      background-color: transparent;
+    }
+    .vue-treeselect__control, 
+    .vue-treeselect__placeholder,
+    .vue-treeselect__single-value{
+      height: 36px;
+      line-height: 36px;
+      color: #fff;      
+    }
+    .vue-treeselect__control{
+      border: 1px solid $subMenuActiveText;
+      background-color: transparent;
+    }
+    .el-radio{
+      color: #fff;
+    }
+    .el-textarea__inner{
+      color: #fff;
+      border: 1px solid $subMenuActiveText;
+      background-color: transparent;
+    }
+    .el-input-number.is-controls-right[class*=small] [class*=increase], 
+    .el-input-number.is-controls-right[class*=small] [class*=decrease]{
+      background-color: transparent;
+    }
+    .el-input-number__decrease,
+    .el-input-number__increase{
+      border-left-color: $subMenuActiveText;
+      &>i{
+        color: #fff;
+      }
+    }
+    .el-input-number__increase{
+      border-bottom-color: $subMenuActiveText;
+    }
+    .el-select .el-input .el-select__caret{
+      color: #fff;
+    }
+  }
+  .dialog-footer{
+    margin: 30px auto 0 auto;
+    text-align: center;
+    .el-button{
+      font-size: 16px;
+      padding: 8px 28px;
+    }
+  }
+}

src/views/archivesConfig/commonFields/index.vue

@@ -29,16 +29,20 @@
     <!--表单渲染-->
     <eForm />
     <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" width="35%" :before-close="handleClose">
-      <p><span>这里为技术人员维护系统时使用，用户无需设置</span></p>
-      <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
-      <el-form :model="form">
-        <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
-          <el-input v-model="form.verifyCode" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
-      </span>
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">这里为技术人员维护系统时使用，用户无需设置</span></p>
+        <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+        <el-form :model="form">
+          <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
+            <el-input v-model="form.verifyCode" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>

src/views/archivesConfig/commonFields/module/form.vue

@@ -1,31 +1,35 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
-    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-      <el-form-item label="中文名称" prop="field_cn_name">
-        <el-input v-model="form.field_cn_name" style="width: 370px;" />
-      </el-form-item>
-      <el-form-item label="字段标识" prop="field_name">
-        <el-input v-model="form.field_name" style="width: 370px;" />
-      </el-form-item>
-      <el-form-item label="数据类型" prop="is_data_type">
-        <el-select v-model="form.is_data_type" placeholder="请选择">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="字段长度" prop="is_column_length">
-        <el-input-number v-model="form.is_column_length" controls-position="right" style="width: 370px;" />
-      </el-form-item>
-      <el-form-item label="默认值" prop="is_default_value">
-        <el-input v-model="form.is_default_value" style="width: 370px;" />
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="crud.cancelCU">
-        取消
-      </el-button>
-      <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">
-        确认
-      </el-button>
+  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="中文名称" prop="field_cn_name">
+          <el-input v-model="form.field_cn_name" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="字段标识" prop="field_name">
+          <el-input v-model="form.field_name" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="数据类型" prop="is_data_type">
+          <el-select v-model="form.is_data_type" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="字段长度" prop="is_column_length">
+          <el-input-number v-model="form.is_column_length" controls-position="right" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="默认值" prop="is_default_value">
+          <el-input v-model="form.is_default_value" style="width: 370px;" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">
+          取消
+        </el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">
+          确认
+        </el-button>
+      </div>
     </div>
   </el-dialog>
 </template>

src/views/archivesConfig/dict/dictDetail.vue

@@ -10,21 +10,25 @@
         </crudOperation>
       </div>
       <!--表单组件-->
-      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-          <el-form-item label="字典名称" prop="dic_name">
-            <el-input v-model="form.dic_name" style="width: 370px;" />
-          </el-form-item>
-          <el-form-item label="字典代码" prop="dic_code">
-            <el-input v-model="form.dic_code" style="width: 370px;" />
-          </el-form-item>
-          <el-form-item label="内容说明" prop="dic_explain">
-            <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="2" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="text" @click="crud.cancelCU">取消</el-button>
-          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+            <el-form-item label="字典名称" prop="dic_name">
+              <el-input v-model="form.dic_name" style="width: 370px;" />
+            </el-form-item>
+            <el-form-item label="字典代码" prop="dic_code">
+              <el-input v-model="form.dic_code" style="width: 370px;" />
+            </el-form-item>
+            <el-form-item label="内容说明" prop="dic_explain">
+              <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="4" />
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="crud.cancelCU">取消</el-button>
+            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+          </div>
         </div>
       </el-dialog>
       <!--表格渲染-->

src/views/archivesConfig/dict/index.vue

@@ -1,26 +1,30 @@
 <template>
   <div class="app-container">
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="字典名称" prop="dic_name">
-          <el-input v-model="form.dic_name" style="width: 370px;" />
-        </el-form-item>
-        <el-form-item label="字典代码" prop="dic_code">
-          <el-input v-model="form.dic_code" style="width: 370px;" />
-        </el-form-item>
-        <el-form-item label="内容说明">
-          <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="2" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="字典名称" prop="dic_name">
+            <el-input v-model="form.dic_name" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="字典代码" prop="dic_code">
+            <el-input v-model="form.dic_code" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="内容说明">
+            <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="4" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
       </div>
     </el-dialog>
     <!-- 字典列表 -->
     <el-row class="container-main" :gutter="10">
-      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="5">
+      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
         <el-card class="box-card">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
@@ -131,11 +135,11 @@ export default {
 <style lang="scss" scoped>
 .el-card{
   min-height: calc(100vh - 210px);
+  .crud-opts{
+    padding: 20px 0;
+  }
 }
 
-.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  /* background-color: rgb(158, 213, 250) !important; */
-}
 .el-card__body .crud-opts {
   justify-content: space-around;
 }

src/views/system/dept/index.vue

@@ -16,42 +16,46 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
-      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="部门名称" prop="name">
-          <el-input v-model="form.name" style="width: 370px;" />
-        </el-form-item>
-        <el-form-item label="部门排序" prop="deptSort">
-          <el-input-number
-            v-model.number="form.deptSort"
-            :min="0"
-            :max="999"
-            controls-position="right"
-            style="width: 370px;"
-          />
-        </el-form-item>
-        <el-form-item label="顶级部门">
-          <el-radio-group v-model="form.isTop" style="width: 140px">
-            <el-radio label="1">是</el-radio>
-            <el-radio label="0">否</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="状态" prop="enabled">
-          <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
-        </el-form-item>
-        <el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid">
-          <treeselect
-            v-model="form.pid"
-            :load-options="loadDepts"
-            :options="depts"
-            style="width: 370px;"
-            placeholder="选择上级类目"
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="部门名称" prop="name">
+            <el-input v-model="form.name" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="部门排序" prop="deptSort">
+            <el-input-number
+              v-model.number="form.deptSort"
+              :min="0"
+              :max="999"
+              controls-position="right"
+              style="width: 370px;"
+            />
+          </el-form-item>
+          <el-form-item label="顶级部门">
+            <el-radio-group v-model="form.isTop" style="width: 140px">
+              <el-radio label="1">是</el-radio>
+              <el-radio label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="状态" prop="enabled">
+            <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
+          </el-form-item>
+          <el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid">
+            <treeselect
+              v-model="form.pid"
+              :load-options="loadDepts"
+              :options="depts"
+              style="width: 370px;"
+              placeholder="选择上级类目"
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
       </div>
     </el-dialog>
     <!--表格渲染-->

src/views/system/job/module/form.vue

@@ -5,68 +5,71 @@
     :before-close="crud.cancelCU"
     :visible="crud.status.cu > 0"
     :title="crud.status.title"
-    width="500px"
   >
-    <el-form
-      ref="form"
-      :model="form"
-      :rules="rules"
-      size="small"
-      label-width="80px"
-    >
-      <el-form-item
-        label="名称"
-        prop="name"
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="80px"
       >
-        <el-input
-          v-model="form.name"
-          style="width: 370px;"
-        />
-      </el-form-item>
-      <el-form-item
-        label="排序"
-        prop="jobSort"
-      >
-        <el-input-number
-          v-model.number="form.jobSort"
-          :min="0"
-          :max="999"
-          controls-position="right"
-          style="width: 370px;"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="form.pid !== 0"
-        label="状态"
-        prop="enabled"
-      >
-        <el-radio
-          v-for="item in jobStatus"
-          :key="item.id"
-          v-model="form.enabled"
-          :label="item.value === 'true'"
+        <el-form-item
+          label="名称"
+          prop="name"
         >
-          {{ item.label }}
-        </el-radio>
-      </el-form-item>
-    </el-form>
-    <div
-      slot="footer"
-      class="dialog-footer"
-    >
-      <el-button
-        type="text"
-        @click="crud.cancelCU"
-      >
-        取消
-      </el-button>
-      <el-button
-        :loading="crud.status.cu === 2"
-        type="primary"
-        @click="crud.submitCU"
+          <el-input
+            v-model="form.name"
+            style="width: 370px;"
+          />
+        </el-form-item>
+        <el-form-item
+          label="排序"
+          prop="jobSort"
+        >
+          <el-input-number
+            v-model.number="form.jobSort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            style="width: 370px;"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="form.pid !== 0"
+          label="状态"
+          prop="enabled"
+        >
+          <el-radio
+            v-for="item in jobStatus"
+            :key="item.id"
+            v-model="form.enabled"
+            :label="item.value === 'true'"
+          >
+            {{ item.label }}
+          </el-radio>
+        </el-form-item>
+      </el-form>
+      <div
+        slot="footer"
+        class="dialog-footer"
       >
-        确认
-      </el-button>
+        <el-button
+          type="text"
+          @click="crud.cancelCU"
+        >
+          取消
+        </el-button>
+        <el-button
+          :loading="crud.status.cu === 2"
+          type="primary"
+          @click="crud.submitCU"
+        >
+          确认
+        </el-button>
+      </div>
     </div>
   </el-dialog>
 </template>

src/views/system/menu/index.vue

@@ -13,81 +13,85 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="form.type" size="mini" style="width: 178px">
-            <el-radio-button label="0">目录</el-radio-button>
-            <el-radio-button label="1">菜单</el-radio-button>
-            <el-radio-button label="2">按钮</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
-          <el-popover
-            placement="bottom-start"
-            width="450"
-            trigger="click"
-            @show="$refs['iconSelect'].reset()"
-          >
-            <IconSelect ref="iconSelect" @selected="selected" />
-            <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
-              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
-              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-            </el-input>
-          </el-popover>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame">
-          <el-radio-group v-model="form.iFrame" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
-          <el-radio-group v-model="form.cache" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
-          <el-radio-group v-model="form.hidden" size="mini">
-            <el-radio-button label="false">是</el-radio-button>
-            <el-radio-button label="true">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
-          <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
-        </el-form-item>
-        <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
-          <el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" style="width: 178px;" />
-        </el-form-item>
-        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
-          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
-        </el-form-item>
-        <el-form-item label="菜单排序" prop="menuSort">
-          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
-        </el-form-item>
-        <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName">
-          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
-        </el-form-item>
-        <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component">
-          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
-        </el-form-item>
-        <el-form-item label="上级类目" prop="pid">
-          <treeselect
-            v-model="form.pid"
-            :options="menus"
-            :load-options="loadMenus"
-            style="width: 450px;"
-            placeholder="选择上级类目"
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="菜单类型" prop="type">
+            <el-radio-group v-model="form.type" size="mini" style="width: 178px">
+              <el-radio-button label="0">目录</el-radio-button>
+              <el-radio-button label="1">菜单</el-radio-button>
+              <el-radio-button label="2">按钮</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
+            <el-popover
+              placement="bottom-start"
+              width="450"
+              trigger="click"
+              @show="$refs['iconSelect'].reset()"
+            >
+              <IconSelect ref="iconSelect" @selected="selected" />
+              <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
+                <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+              </el-input>
+            </el-popover>
+          </el-form-item>
+          <el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame">
+            <el-radio-group v-model="form.iFrame" size="mini">
+              <el-radio-button label="true">是</el-radio-button>
+              <el-radio-button label="false">否</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
+            <el-radio-group v-model="form.cache" size="mini">
+              <el-radio-button label="true">是</el-radio-button>
+              <el-radio-button label="false">否</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
+            <el-radio-group v-model="form.hidden" size="mini">
+              <el-radio-button label="false">是</el-radio-button>
+              <el-radio-button label="true">否</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
+            <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
+          </el-form-item>
+          <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
+            <el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
+          </el-form-item>
+          <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
+            <el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" style="width: 178px;" />
+          </el-form-item>
+          <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
+            <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
+          </el-form-item>
+          <el-form-item label="菜单排序" prop="menuSort">
+            <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
+          </el-form-item>
+          <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName">
+            <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
+          </el-form-item>
+          <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component">
+            <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
+          </el-form-item>
+          <el-form-item label="上级类目" prop="pid">
+            <treeselect
+              v-model="form.pid"
+              :options="menus"
+              :load-options="loadMenus"
+              style="width: 450px;"
+              placeholder="选择上级类目"
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
       </div>
     </el-dialog>
     <!--表格渲染-->

src/views/system/role/index.vue

@@ -11,41 +11,45 @@
       <crudOperation :permission="permission" />
     </div>
     <!-- 表单渲染 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="form.name" style="width: 380px;" />
-        </el-form-item>
-        <el-form-item label="角色级别" prop="level">
-          <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
-        </el-form-item>
-        <el-form-item label="数据范围" prop="dataScope">
-          <el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope">
-            <el-option
-              v-for="item in dateScopes"
-              :key="item"
-              :label="item"
-              :value="item"
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="角色名称" prop="name">
+            <el-input v-model="form.name" style="width: 380px;" />
+          </el-form-item>
+          <el-form-item label="角色级别" prop="level">
+            <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
+          </el-form-item>
+          <el-form-item label="数据范围" prop="dataScope">
+            <el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope">
+              <el-option
+                v-for="item in dateScopes"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
+            <treeselect
+              v-model="deptDatas"
+              :load-options="loadDepts"
+              :options="depts"
+              multiple
+              style="width: 380px"
+              placeholder="请选择"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
-          <treeselect
-            v-model="deptDatas"
-            :load-options="loadDepts"
-            :options="depts"
-            multiple
-            style="width: 380px"
-            placeholder="请选择"
-          />
-        </el-form-item>
-        <el-form-item label="描述信息" prop="description">
-          <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+          </el-form-item>
+          <el-form-item label="描述信息" prop="description">
+            <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
       </div>
     </el-dialog>
     <el-row :gutter="15">

src/views/system/user/index.vue

@@ -64,83 +64,87 @@
           <crudOperation show="" :permission="permission" />
         </div>
         <!--表单渲染-->
-        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
-          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
-            <el-form-item label="用户名" prop="username">
-              <el-input v-model="form.username" @keydown.native="keydown($event)" />
-            </el-form-item>
-            <el-form-item label="电话" prop="phone">
-              <el-input v-model.number="form.phone" />
-            </el-form-item>
-            <el-form-item label="昵称" prop="nickName">
-              <el-input v-model="form.nickName" @keydown.native="keydown($event)" />
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" />
-            </el-form-item>
-            <el-form-item label="部门" prop="dept.id">
-              <treeselect
-                v-model="form.dept.id"
-                :options="depts"
-                :load-options="loadDepts"
-                style="width: 178px"
-                placeholder="选择部门"
-              />
-            </el-form-item>
-            <el-form-item label="岗位" prop="jobs">
-              <el-select
-                v-model="jobDatas"
-                style="width: 178px"
-                multiple
-                placeholder="请选择"
-                @remove-tag="deleteTag"
-                @change="changeJob"
-              >
-                <el-option
-                  v-for="item in jobs"
-                  :key="item.name"
-                  :label="item.name"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="性别">
-              <el-radio-group v-model="form.gender" style="width: 178px">
-                <el-radio label="男">男</el-radio>
-                <el-radio label="女">女</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
-                <el-radio
-                  v-for="item in dict.user_status"
-                  :key="item.id"
-                  :label="item.value"
-                >{{ item.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
-              <el-select
-                v-model="roleDatas"
-                style="width: 437px"
-                multiple
-                placeholder="请选择"
-                @remove-tag="deleteTag"
-                @change="changeRole"
-              >
-                <el-option
-                  v-for="item in roles"
-                  :key="item.name"
-                  :disabled="level !== 1 && item.level <= level"
-                  :label="item.name"
-                  :value="item.id"
+        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+          <span class="dialog-right-top" />
+          <span class="dialog-left-bottom" />
+          <div class="setting-dialog">
+            <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
+              <el-form-item label="用户名" prop="username">
+                <el-input v-model="form.username" @keydown.native="keydown($event)" />
+              </el-form-item>
+              <el-form-item label="电话" prop="phone">
+                <el-input v-model.number="form.phone" />
+              </el-form-item>
+              <el-form-item label="昵称" prop="nickName">
+                <el-input v-model="form.nickName" @keydown.native="keydown($event)" />
+              </el-form-item>
+              <el-form-item label="邮箱" prop="email">
+                <el-input v-model="form.email" />
+              </el-form-item>
+              <el-form-item label="部门" prop="dept.id">
+                <treeselect
+                  v-model="form.dept.id"
+                  :options="depts"
+                  :load-options="loadDepts"
+                  style="width: 184px"
+                  placeholder="选择部门"
                 />
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button type="text" @click="crud.cancelCU">取消</el-button>
-            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+              </el-form-item>
+              <el-form-item label="岗位" prop="jobs">
+                <el-select
+                  v-model="jobDatas"
+                  style="width: 184px"
+                  multiple
+                  placeholder="请选择"
+                  @remove-tag="deleteTag"
+                  @change="changeJob"
+                >
+                  <el-option
+                    v-for="item in jobs"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="性别">
+                <el-radio-group v-model="form.gender" style="width: 184px">
+                  <el-radio label="男">男</el-radio>
+                  <el-radio label="女">女</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="状态">
+                <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
+                  <el-radio
+                    v-for="item in dict.user_status"
+                    :key="item.id"
+                    :label="item.value"
+                  >{{ item.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
+                <el-select
+                  v-model="roleDatas"
+                  style="width: 437px"
+                  multiple
+                  placeholder="请选择"
+                  @remove-tag="deleteTag"
+                  @change="changeRole"
+                >
+                  <el-option
+                    v-for="item in roles"
+                    :key="item.name"
+                    :disabled="level !== 1 && item.level <= level"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="text" @click="crud.cancelCU">取消</el-button>
+              <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+            </div>
           </div>
         </el-dialog>
         <!--表格渲染-->