el-dialog-确认取消按钮

el-tree滚动条
消息提示按钮 确认在左 取消在右

src/assets/scss/_base.scss

@@ -5,7 +5,7 @@
 }
 body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1.15;
   color: #303133;
   background-color: #fff;

src/assets/scss/global.scss

@@ -146,4 +146,22 @@
 }
 
 
+/*按钮*/
+.el-dialog__footer {
+  padding: 10px 20px 20px;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+
+/*提示消息  按钮   确认在右 取消仔左*/
+.el-message-box__btns {
+  padding: 5px 15px 0;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 10px;
+}
+
+
 

src/views/modules/sys/config-add-or-update.vue

@@ -1,99 +1,109 @@
 <template>
   <el-dialog
+    width="285px"
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+             label-width="80px">
       <el-form-item label="参数名" prop="paramKey">
-        <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
+        <el-input v-model="dataForm.paramKey" style="width: 150px;" placeholder="参数名"></el-input>
       </el-form-item>
       <el-form-item label="参数值" prop="paramValue">
-        <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
+        <el-input v-model="dataForm.paramValue" style="width: 150px;" placeholder="参数值"></el-input>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+        <el-input v-model="dataForm.remark" style="width: 150px;" placeholder="备注"></el-input>
+      </el-form-item>
+      <el-form-item label="状态" size="mini" prop="status">
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="0">禁用</el-radio>
+          <el-radio :label="1">正常</el-radio>
+        </el-radio-group>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+         <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+         <el-button @click="visible = false">取消</el-button>
     </span>
   </el-dialog>
 </template>
 
 <script>
-  export default {
-    data () {
-      return {
-        visible: false,
-        dataForm: {
-          id: 0,
-          paramKey: '',
-          paramValue: '',
-          remark: ''
-        },
-        dataRule: {
-          paramKey: [
-            { required: true, message: '参数名不能为空', trigger: 'blur' }
-          ],
-          paramValue: [
-            { required: true, message: '参数值不能为空', trigger: 'blur' }
-          ]
-        }
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        paramKey: '',
+        paramValue: '',
+        remark: '',
+        status: 1
+      },
+      dataRule: {
+        paramKey: [
+          {required: true, message: '参数名不能为空', trigger: 'blur'}
+        ],
+        paramValue: [
+          {required: true, message: '参数值不能为空', trigger: 'blur'}
+        ]
       }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.dataForm.paramKey = data.config.paramKey
+              this.dataForm.paramValue = data.config.paramValue
+              this.dataForm.remark = data.config.remark
+            }
+          })
+        }
+      })
     },
-    methods: {
-      init (id) {
-        this.dataForm.id = id || 0
-        this.visible = true
-        this.$nextTick(() => {
-          this.$refs['dataForm'].resetFields()
-          if (this.dataForm.id) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
-              method: 'get',
-              params: this.$http.adornParams()
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.dataForm.paramKey = data.config.paramKey
-                this.dataForm.paramValue = data.config.paramValue
-                this.dataForm.remark = data.config.remark
-              }
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
+            method: 'post',
+            data: this.$http.adornData({
+              'id': this.dataForm.id || undefined,
+              'paramKey': this.dataForm.paramKey,
+              'paramValue': this.dataForm.paramValue,
+              'remark': this.dataForm.remark,
+              'status': this.dataForm.status
             })
-          }
-        })
-      },
-      // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
-              method: 'post',
-              data: this.$http.adornData({
-                'id': this.dataForm.id || undefined,
-                'paramKey': this.dataForm.paramKey,
-                'paramValue': this.dataForm.paramValue,
-                'remark': this.dataForm.remark
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
               })
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(data.msg)
-              }
-            })
-          }
-        })
-      }
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
     }
   }
+}
 </script>

src/views/modules/sys/menu-add-or-update.vue

@@ -1,5 +1,6 @@
 <template>
   <el-dialog
+    width="465px"
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible">
@@ -10,12 +11,14 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
-        <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
+        <el-input style="width: 349px;" v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
       </el-form-item>
       <el-form-item label="上级菜单" prop="parentName">
         <el-popover
           ref="menuListPopover"
           placement="bottom-start"
+          v-model="treeVisible"
+          onclick="treeVisible=true"
           trigger="click">
           <el-tree
             :data="menuList"
@@ -28,13 +31,13 @@
             :expand-on-click-node="false">
           </el-tree>
         </el-popover>
-        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
+        <el-input style="width: 349px;"  v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
       </el-form-item>
       <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
-        <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
+        <el-input style="width: 349px;"  v-model="dataForm.url" placeholder="菜单路由"></el-input>
       </el-form-item>
       <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
-        <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
+        <el-input style="width: 349px;"  v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
       </el-form-item>
       <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
         <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
@@ -65,20 +68,14 @@
                 </div>
               </div>
             </el-popover>
-            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
-          </el-col>
-          <el-col :span="2" class="icon-list__tips">
-            <el-tooltip placement="top" effect="light">
-              <div slot="content">全站推荐使用SVG Sprite, 详细请参考:<a href="//github.com/daxiongYang/gaotao-fast-vue/blob/master/src/icons/index.js" target="_blank">icons/index.js</a>描述</div>
-              <i class="el-icon-warning"></i>
-            </el-tooltip>
+            <el-input style="width: 349px;"  v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
           </el-col>
         </el-row>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      <el-button @click="visible = false">取消</el-button>
     </span>
   </el-dialog>
 </template>
@@ -97,6 +94,7 @@
       }
       return {
         visible: false,
+        treeVisible: false,
         dataForm: {
           id: 0,
           type: 1,
@@ -176,11 +174,13 @@
       menuListTreeCurrentChangeHandle (data, node) {
         this.dataForm.parentId = data.menuId
         this.dataForm.parentName = data.name
+        this.treeVisible = false
       },
       // 菜单树设置当前选中节点
       menuListTreeSetCurrentNode () {
         this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
         this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
+
       },
       // 图标选中
       iconActiveHandle (iconName) {
@@ -226,7 +226,7 @@
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" >
   .mod-menu {
     .menu-list__input,
     .icon-list__input {
@@ -267,4 +267,11 @@
       cursor: pointer;
     }
   }
+  .el-popover {
+    height: 50%;
+    width: 350px;
+    overflow:auto;
+
+  }
+
 </style>

src/views/modules/sys/menu.vue

@@ -7,6 +7,7 @@
     </el-form>
 
     <el-table
+      :height="height"
       :data="dataList"
       row-key="menuId"
       border
@@ -38,9 +39,10 @@
         align="center"
         label="类型">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
-          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
-          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
+
+          <el-link v-if="scope.row.type === 0" type="success">目录</el-link>
+          <el-link v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-link>
+          <el-link v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-link>
         </template>
       </el-table-column>
       <el-table-column
@@ -91,6 +93,7 @@
   export default {
     data () {
       return {
+        height: 450,
         dataForm: {},
         dataList: [],
         dataListLoading: false,
@@ -105,6 +108,11 @@
     activated () {
       this.getDataList()
     },
+    mounted() {
+      this.$nextTick(()=>{
+        this.height = window.innerHeight - 220;
+      })
+    },
     methods: {
       // 获取数据列表
       getDataList () {

src/views/modules/sys/role-add-or-update.vue

@@ -1,14 +1,15 @@
 <template>
   <el-dialog
+    width="349px"
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
       <el-form-item label="角色名称" prop="roleName">
-        <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
+        <el-input style="width: 150px" v-model="dataForm.roleName" placeholder="角色名称"></el-input>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+        <el-input style="width: 150px" v-model="dataForm.remark" placeholder="备注"></el-input>
       </el-form-item>
       <el-form-item size="mini" label="授权">
         <el-tree
@@ -16,14 +17,14 @@
           :props="menuListTreeProps"
           node-key="menuId"
           ref="menuListTree"
-          :default-expand-all="true"
+          :default-expand-all="false"
           show-checkbox>
         </el-tree>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      <el-button @click="visible = false">取消</el-button>
     </span>
   </el-dialog>
 </template>
@@ -121,3 +122,6 @@
     }
   }
 </script>
+<style lang="scss" >
+
+</style>

src/views/modules/sys/role.vue

@@ -16,19 +16,6 @@
       v-loading="dataListLoading"
       @selection-change="selectionChangeHandle"
       style="width: 100%;">
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <el-table-column
-        prop="roleId"
-        header-align="center"
-        align="center"
-        width="80"
-        label="ID">
-      </el-table-column>
       <el-table-column
         prop="roleName"
         header-align="center"
@@ -147,7 +134,7 @@
         var ids = id ? [id] : this.dataListSelections.map(item => {
           return item.roleId
         })
-        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        this.$confirm(`确定删除当前记录?`, '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'

src/views/modules/sys/user-add-or-update.vue

@@ -10,7 +10,7 @@
                @keyup.enter.native="dataFormSubmit()"
                label-width="80px">
         <el-form>
-          <el-form-item label="用户名" prop="userName">
+          <el-form-item label="用户账号" prop="userName">
             <el-input v-model="dataForm.userName" style="width: 150px;" placeholder="登录帐号"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
@@ -22,20 +22,23 @@
           </el-form-item>
         </el-form>
         <el-form>
+          <el-form-item label="用户名" prop="email">
+            <el-input v-model="dataForm.userDisplay" style="width: 150px;" placeholder="用户昵称"></el-input>
+          </el-form-item>
           <el-form-item label="邮箱" prop="email">
             <el-input v-model="dataForm.email" style="width: 150px;" placeholder="邮箱"></el-input>
           </el-form-item>
           <el-form-item label="手机号" prop="mobile">
             <el-input v-model="dataForm.mobile" style="width: 150px;" placeholder="手机号"></el-input>
           </el-form-item>
+        </el-form>
+        <el-form>
           <el-form-item label="工厂" size="mini" prop="site">
-            <el-select v-model="dataForm.site" style="width: 150px;">
-              <el-option v-for="(item,index) in factorys" :key="index" :label="item.baseDesc"
-                         :value="item.baseData"></el-option>
+            <el-select filterable v-model="dataForm.site" style="width: 150px;">
+              <el-option :value="item.site" :label="item.baseDesc" v-for="(item,index) in factorys" :key="index"
+              ></el-option>
             </el-select>
           </el-form-item>
-        </el-form>
-        <el-form>
           <el-form-item label="语言" prop="languageDefault">
             <el-select filterable v-model="dataForm.languageDefault" clearable style="width: 150px;">
               <el-option :label="item.languageName" :value="item.languageCode" v-for="(item,index) in languageList "
@@ -62,9 +65,9 @@
           </el-form-item>
         </el-form>
       </el-form>
-      <span slot="footer" class="dialog-footer" >
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      <span slot="footer" class="dialog-footer">
+         <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+         <el-button @click="visible = false">取消</el-button>
     </span>
     </el-dialog>
   </div>
@@ -73,8 +76,8 @@
 
 <script>
 
-import { getFactory } from "@/api/factory";
-import { searchSysLanguage } from "@/api/sysLanguage.js"
+import {getFactory} from "@/api/factory";
+import {searchSysLanguage} from "@/api/sysLanguage.js"
 
 export default {
   data() {
@@ -94,7 +97,8 @@ export default {
         mobile: '',
         roleIdList: [],
         status: 1,
-        site: 0
+        site: '',
+        userDisplay: ''
       }
     }
   },
@@ -111,12 +115,20 @@ export default {
     // 获取工厂信息
     factoryList() {
       getFactory().then(({data}) => {
-        this.factorys = data.list
+        this.factorys = data.list.map(item => {
+          let factory = {
+            site: item.baseData,
+            baseDesc: item.baseDesc
+          }
+          return factory;
+        })
       })
     },
+
     init(id) {
       this.dataForm.id = id || 0
-
+      this.factoryList();
+      this.getLanguageList();
       this.$http({
         url: this.$http.adornUrl('/sys/role/select'),
         method: 'get',
@@ -135,7 +147,6 @@ export default {
             method: 'get',
             params: this.$http.adornParams()
           }).then(({data}) => {
-
             if (data && data.code === 0) {
               this.dataForm.userName = data.user.username
               this.dataForm.salt = data.user.salt
@@ -144,7 +155,8 @@ export default {
               this.dataForm.roleIdList = data.user.roleIdList
               this.dataForm.status = data.user.status
               this.dataForm.languageDefault = data.user.languageDefault
-              this.dataForm.site = data.user.site
+              this.dataForm.site = data.user.site.toString()
+              this.dataForm.userDisplay = data.user.userDisplay
             }
           })
         }
@@ -168,6 +180,7 @@ export default {
               'roleIdList': this.dataForm.roleIdList,
               'languageDefault': this.dataForm.languageDefault,
               'site': this.dataForm.site,
+              'userDisplay': this.dataForm.userDisplay,
             })
           }).then(({data}) => {
             if (data && data.code === 0) {
@@ -189,8 +202,8 @@ export default {
     }
   },
   created() {
-    this.factoryList()
-    this.getLanguageList()
+    // this.factoryList()
+    // this.getLanguageList()
   }
 }
 </script>

src/views/modules/sys/user.vue

@@ -2,7 +2,7 @@
   <div class="mod-user">
     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
-        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
+        <el-input v-model="dataForm.userName" placeholder="用户账号" clearable></el-input>
       </el-form-item>
       <el-form-item>
         <el-button @click="getDataList()">查询</el-button>
@@ -16,21 +16,27 @@
       v-loading="dataListLoading"
       @selection-change="selectionChangeHandle"
       style="width: 100%;">
+<!--      <el-table-column-->
+<!--        type="selection"-->
+<!--        header-align="center"-->
+<!--        align="center"-->
+<!--        width="50">-->
+<!--      </el-table-column>-->
+<!--      <el-table-column-->
+<!--        prop="userId"-->
+<!--        header-align="center"-->
+<!--        align="center"-->
+<!--        width="80"-->
+<!--        label="ID">-->
+<!--      </el-table-column>-->
       <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <el-table-column
-        prop="userId"
+        prop="username"
         header-align="center"
         align="center"
-        width="80"
-        label="ID">
+        label="用户账号">
       </el-table-column>
       <el-table-column
-        prop="username"
+        prop="userDisplay"
         header-align="center"
         align="center"
         label="用户名">
@@ -53,8 +59,8 @@
         align="center"
         label="状态">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
-          <el-tag v-else size="small">正常</el-tag>
+          <el-link v-if="scope.row.status === 0"  type="success">禁用</el-link>
+          <el-link v-else type="danger">正常</el-link>
         </template>
       </el-table-column>
       <el-table-column