el-dialog-确认取消按钮

el-tree滚动条消息提示按钮确认在左取消在右
5 years ago · 120beee6a7
9 changed files with 193 additions and 140 deletions
--- a/src/assets/scss/_base.scss
+++ b/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;
--- a/src/assets/scss/global.scss
+++ b/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;
+}
+
+

--- a/src/views/modules/sys/config-add-or-update.vue
+++ b/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>
--- a/src/views/modules/sys/menu-add-or-update.vue
+++ b/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>
--- a/src/views/modules/sys/menu.vue
+++ b/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 () {
--- a/src/views/modules/sys/role-add-or-update.vue
+++ b/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>
--- a/src/views/modules/sys/role.vue
+++ b/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'
--- a/src/views/modules/sys/user-add-or-update.vue
+++ b/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>
--- a/src/views/modules/sys/user.vue
+++ b/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