Merge branch 'gin-vue-admin_v2_dev' of https://github.com/flipped-aurora/gin-vue-admin into gin-vue-admin_v2_dev

2020-04-17 18:11:04 +08:00
parent 093cde16c2 04536fe226
commit ff82bc47e6
23 changed files with 696 additions and 293 deletions
@@ -1,17 +1,31 @@
 <template>
  <div class="hello">
-    <form id="fromCont" method="post">
-      <input @change="choseFile" id="file" multiple="multiple" type="file" />
+     <el-divider content-position="left">大文件上传</el-divider>
+    <form id="fromCont" method="post" >
+      <div class="fileUpload">
+        选择文件<input @change="choseFile" id="file" multiple="multiple" type="file"  />
+      </div>
    </form>
-    <el-button @click="getFile">上传</el-button>
-    <span
+     <el-button @click="getFile" :disabled="limitFileSize" type="primary" size="medium" class="uploadBtn">上传文件</el-button>
+    <div class="el-upload__tip">请上传不超过5MB的文件</div>
+    <div class="list">
+      <transition-group name="list" tag="p">
+        <div class="list-item" v-for="(item,i) in uploadList" :key="i" >
+          <i class="el-icon-document"></i>
+          <span>{{ item.name }}</span>
+          <span v-if="file" class="percentage" >{{percentage}}%</span>
+          <el-progress  :show-text='false' :text-inside="false" :stroke-width="2" :percentage="percentage"></el-progress>
+        </div> 
+      </transition-group>
+   </div>
+    
+    <!-- <span
      v-if="this.file"
-    >{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span>
-    <h2>此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</h2>
+    >{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
+    <h2 class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</h2>
  </div>
 </template>
 <script>
-
 import SparkMD5 from 'spark-md5'
 import axios from 'axios'
 import {
@@ -27,15 +41,25 @@ export default {
      fileMd5: '',
      formDataList: [],
      waitUpLoad: [],
-      waitNum: 0
+      waitNum: 0,
+      limitFileSize: false,
+      percentage:0,
+      percentageFlage: true,
+      customColor: '#409eff',
+      uploadList:[]
    }
+  },
+  created(){
+   
  },
  methods: {
    // 选中文件的函数
    async choseFile(e) {
      const fileR = new FileReader() // 创建一个reader用来读取文件流
      const file = e.target.files[0] // 获取当前文件
+      const maxSize = 5*1024*1024
      this.file = file // file 丢全局方便后面用 可以改进为func传参形式
+    if(file.size<maxSize){
      fileR.readAsArrayBuffer(file) // 把文件读成ArrayBuffer  主要为了保持跟后端的流一致
      fileR.onload = async e => {
        // 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中
@@ -83,6 +107,10 @@ export default {
        }
        this.waitNum = this.waitUpLoad.length // 记录长度用于百分比展示
      }
+      } else {
+         this.limitFileSize = true
+         this.$message('请上传小于5M文件')
+      }
    },
    getFile() {
      // 确定按钮
@@ -90,7 +118,14 @@ export default {
        this.$message('请先上传文件')
        return
      }
+      this.percentage = Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)
+      if(this.percentage == 100){
+        this.percentageFlage = false
+      }
      this.sliceFile() // 上传切片
+      if(this.percentage == 100){
+        this.uploadList.push(this.file)
+      }
    },
    sliceFile() {
      this.waitUpLoad &&
@@ -119,7 +154,7 @@ export default {
          fileMd5: this.fileMd5
        }
        const res = await breakpointContinueFinish(params)
-        if (res.code == 0) {
+        if (res.success) {
          // 合成文件过后 删除缓存切片
          const params = {
            fileName: this.file.name,
@@ -134,7 +169,7 @@ export default {
 }
 </script>

-<style scoped>
+<style lang='scss' scoped>
 h3 {
  margin: 40px 0 0;
 }
@@ -149,4 +184,70 @@ li {
 a {
  color: #42b983;
 }
-</style>
+#fromCont{
+  display: inline-block;
+}
+.fileUpload{
+    padding: 4px 10px;
+    height: 20px;
+    line-height: 20px;
+    position: relative;
+    cursor: pointer;
+    color: #000;
+    border: 1px solid #c1c1c1;
+    border-radius: 4px;
+    overflow: hidden;
+    display: inline-block;
+  input{
+    position: absolute;
+    font-size: 100px;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+ 
+}
+ .fileName{
+    display: inline-block;
+    vertical-align: top;
+    margin: 6px 15px 0 15px;
+  }
+  .uploadBtn{
+    position: relative;
+    top: -10px;
+    margin-left: 15px;
+  }
+  .tips{
+    margin-top: 30px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #606266;
+  }
+  .el-divider{
+    margin: 0 0 30px 0;
+  }
+ 
+ .list{
+   margin-top:15px;
+ }
+ .list-item {
+  display: block;
+  margin-right: 10px;
+  color: #606266;
+  line-height: 25px;
+  margin-bottom: 5px;
+  width: 40%;
+   .percentage{
+          float: right;
+        }
+}
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to
+/* .list-leave-active for below version 2.1.8 */ {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+</style>
@@ -121,6 +121,10 @@ export default {
    },
    closeDialog(){
      this.dialogFormVisible = false
+      this.form = {
+        customerName:"",
+        customerPhoneData:""
+      }
    },
    async deleteCustomer(row){
      this.visible = false
@@ -149,7 +153,7 @@ export default {
      }
     
      if(res.code == 0){
-        this.dialogFormVisible = false
+        this.closeDialog()
        this.getTableData()
      }
    },
@@ -157,6 +161,9 @@ export default {
      this.type = "create"
      this.dialogFormVisible = true
    }
+  },
+  created(){
+    this.getTableData()
  }
 }
 </script>
@@ -145,6 +145,9 @@ export default {
    downloadFile(row) {
      downloadImage(row.url, row.name)
    }
+  },
+  created(){
+    this.getTableData()
  }
 }
 </script>
@@ -67,7 +67,12 @@
        :to="{ path: item.path }" 暂时注释不用-->
        <HistoryComponent />
        <transition mode="out-in" name="el-fade-in-linear">
-          <router-view class="admin-box"></router-view>
+          <keep-alive>
+            <router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
+          </keep-alive>
+        </transition>
+        <transition mode="out-in" name="el-fade-in-linear">
+            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
        </transition>
      </el-main>
    </el-container>
@@ -181,6 +181,12 @@ export default {
    },
    initForm() {
      this.$refs.apiForm.resetFields()
+      this.form= {
+        path: '',
+        apiGroup: '',
+        method: '',
+        description: ''
+      }
    },
    closeDialog() {
      this.initForm()
@@ -253,7 +259,7 @@ export default {
                if (res.code == 0) {
                  this.$message({
                    type: 'success',
-                    message: '添加成功',
+                    message: '编辑成功',
                    showClose: true
                  })
                }
@@ -285,6 +291,9 @@ export default {
      const target = methodOptions.filter(item => item.value === value)[0]
      return target && `${target.type}`
    }
+  },
+  created(){
+    this.getTableData()
  }
 }
 </script>
@@ -16,19 +16,28 @@
      <el-table-column fixed="right" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
-          <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
          <el-button @click="addAuthority(scope.row.authorityId)" size="small" type="text">新增子角色</el-button>
+          <el-button @click="editAuthority(scope.row)" size="small" type="text">编辑角色</el-button>
+          <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
+
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增角色弹窗 -->
    <el-dialog :visible.sync="dialogFormVisible" :title="dialogTitle">
      <el-form :model="form" :rules="rules" ref="authorityForm">
-        <el-form-item label="父级角色ID" prop="parentId">
-          <el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
+        <el-form-item label="父级角色"  prop="parentId">
+           <el-cascader
+              :disabled="dialogType=='add'"
+              v-model="form.parentId"
+              :options="AuthorityOption"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
        </el-form-item>
        <el-form-item label="角色ID" prop="authorityId">
-          <el-input autocomplete="off" v-model="form.authorityId"></el-input>
+          <el-input autocomplete="off" :disabled="dialogType=='edit'" v-model="form.authorityId"></el-input>
        </el-form-item>
        <el-form-item label="角色姓名" prop="authorityName">
          <el-input autocomplete="off" v-model="form.authorityName"></el-input>
@@ -62,7 +71,8 @@
 import {
  getAuthorityList,
  deleteAuthority,
-  createAuthority
+  createAuthority,
+  updateAuthority 
 } from '@/api/authority'

 import Menus from '@/view/superAdmin/authority/components/menus'
@@ -75,8 +85,13 @@ export default {
  mixins: [infoList],
  data() {
    return {
+      AuthorityOption:[{
+          authorityId:"0",
+          authorityName:"根角色"
+        }],
      listApi: getAuthorityList,
      drawer: false,
+      dialogType:"add",
      activeRow: {},
      activeUserId: 0,
      dialogTitle:"新增角色",
@@ -137,6 +152,11 @@ export default {
    // 初始化表单
    initForm() {
      this.$refs.authorityForm.resetFields()
+      this.form =  {
+        authorityId: '',
+        authorityName: '',
+        parentId: '0'
+      }
    },
    // 关闭窗口
    closeDialog() {
@@ -156,28 +176,94 @@ export default {
      }
      this.$refs.authorityForm.validate(async valid => {
        if (valid) {
-          const res = await createAuthority(this.form)
-          if (res.code == 0) {
-            this.$message({
-              type: 'success',
-              message: '添加成功!'
-            })
-            this.getTableData()
-            this.closeDialog()
+          switch (this.dialogType) {
+            case 'add':
+              {
+                const res = await createAuthority(this.form)
+                if (res.code == 0) {
+                  this.$message({
+                    type: 'success',
+                    message: '添加成功!'
+                  })
+                  this.getTableData()
+                  this.closeDialog()
+                }
+              }
+              break;
+            case 'edit':
+              {
+                const res = await updateAuthority(this.form)
+                if (res.code == 0) {
+                  this.$message({
+                    type: 'success',
+                    message: '添加成功!'
+                  })
+                  this.getTableData()
+                  this.closeDialog()
+                }
+              }
+              break;
+            default:
+              break;
          }
+          
          this.initForm()
          this.dialogFormVisible = false
        }
      })
    },
+    setOptions(){
+       this.AuthorityOption = [{
+          authorityId:"0",
+          authorityName:"根角色"
+        }]
+      this.setAuthorityOptions(this.tableData,this.AuthorityOption,false)
+    },
+    setAuthorityOptions(AuthorityData,optionsData,disabled){
+      AuthorityData&&AuthorityData.map(item=>{
+        if(item.children.length){
+          const option = {
+            authorityId:item.authorityId,
+            authorityName:item.authorityName,
+            disabled:disabled||item.authorityId == this.form.authorityId,
+            children:[]
+        }
+          this.setAuthorityOptions(item.children,option.children,disabled||item.authorityId == this.form.authorityId)
+          optionsData.push(option)
+        }else{
+          const option = {
+              authorityId:item.authorityId,
+              authorityName:item.authorityName,
+              disabled:disabled||item.authorityId == this.form.authorityId,
+          }
+          optionsData.push(option)
+        }
+      })
+    },
    // 增加角色
    addAuthority(parentId) {
+      this.dialogTitle = "新增角色"
+      this.dialogType = "add"
      this.form.parentId = parentId
+      this.setOptions()
+      this.dialogFormVisible = true
+      
+    },
+    // 编辑角色
+    editAuthority(row) {
+      this.setOptions()
+      this.dialogTitle = "编辑角色"
+      this.dialogType = "edit"
+      for(let key in this.form){
+        this.form[key] = row[key]
+      }
+      this.setOptions()
      this.dialogFormVisible = true
    }
  },
-  created() {
+  async created() {
    this.pageSize = 999
+    await this.getTableData()
  }
 }
 </script>
@@ -47,7 +47,14 @@
          </el-select>
        </el-form-item>
        <el-form-item label="父节点Id">
-          <el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
+           <el-cascader
+              :disabled="!this.isEdit"
+              v-model="form.parentId"
+              :options="menuOption"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
        </el-form-item>
        <el-form-item label="文件路径" prop="component">
          <el-input autocomplete="off" v-model="form.component"></el-input>
@@ -55,12 +62,18 @@
        <el-form-item label="展示名称" prop="meta.title">
          <el-input autocomplete="off" v-model="form.meta.title"></el-input>
        </el-form-item>
-        <el-form-item label="图标">
+        <el-form-item label="图标" prop="meta.icon">
          <el-input autocomplete="off" v-model="form.meta.icon"></el-input>
        </el-form-item>
-        <el-form-item label="排序标记">
+        <el-form-item label="排序标记" prop="sort">
          <el-input autocomplete="off" v-model.number="form.sort"></el-input>
        </el-form-item>
+        <el-form-item label="keepAlive" prop="meta.keepAlive">
+          <el-select placeholder="是否keepAlive缓存页面" v-model="form.meta.keepAlive">
+            <el-option :value="false" label="否"></el-option>
+            <el-option :value="true" label="是"></el-option>
+          </el-select>
+        </el-form-item>
      </el-form>
      <div class="warning">新增菜单需要在角色管理内配置权限才可使用</div>
      <div class="dialog-footer" slot="footer">
@@ -90,6 +103,12 @@ export default {
      listApi: getMenuList,
      dialogFormVisible: false,
      dialogTitle:"新增菜单",
+      menuOption:[
+        {
+          ID:"0",
+          title:"根菜单"
+        }
+      ],
      form: {
        ID: 0,
        path: '',
@@ -99,7 +118,9 @@ export default {
        component: '',
        meta: {
          title: '',
-          icon: ''
+          icon: '',
+          defaultMenu:false,
+          keepAlive:false
        }
      },
      rules: {
@@ -115,6 +136,34 @@ export default {
    }
  },
  methods: {
+    setOptions(){
+       this.menuOption = [{
+          ID:"0",
+          title:"根目录"
+        }]
+      this.setMenuOptions(this.tableData,this.menuOption,false)
+    },
+    setMenuOptions(menuData,optionsData,disabled){
+      menuData&&menuData.map(item=>{
+        if(item.children.length){
+          const option = {
+            title:item.meta.title,
+            ID:String(item.ID),
+            disabled:disabled||item.ID == this.form.ID,
+            children:[]
+        }
+          this.setMenuOptions(item.children,option.children,disabled||item.ID == this.form.ID)
+          optionsData.push(option)
+        }else{
+          const option = {
+              title:item.meta.title,
+              ID:String(item.ID),
+              disabled:disabled||item.ID == this.form.ID,
+          }
+          optionsData.push(option)
+        }
+      })
+    },
    handleClose(done) {
      this.initForm()
      done()
@@ -163,6 +212,20 @@ export default {
    // 初始化弹窗内表格方法
    initForm() {
      this.$refs.menuForm.resetFields()
+      this.form = {
+        ID: 0,
+        path: '',
+        name: '',
+        hidden: '',
+        parentId: '',
+        component: '',
+        meta: {
+          title: '',
+          icon: '',
+          defaultMenu:false,
+          keepAlive:""
+        }
+      }
    },
    // 关闭弹窗
    closeDialog() {
@@ -183,14 +246,9 @@ export default {
          if (res.code == 0) {
            this.$message({
              type: 'success',
-              message: '添加成功!'
+              message: this.isEdit?'编辑成功':'添加成功!'
            })
            this.getTableData()
-          } else {
-            this.$message({
-              type: 'error',
-              message: '添加失败!'
-            })
          }
          this.initForm()
          this.dialogFormVisible = false
@@ -202,6 +260,7 @@ export default {
      this.dialogTitle = "新增菜单"
      this.form.parentId = String(id)
      this.isEdit = false
+      this.setOptions()
      this.dialogFormVisible = true
    },
    // 修改菜单方法
@@ -209,12 +268,15 @@ export default {
      this.dialogTitle = "编辑菜单"
      const res = await getBaseMenuById({ id })
      this.form = res.data.menu
-      this.dialogFormVisible = true
      this.isEdit = true
-    }
+      this.setOptions()
+      this.dialogFormVisible = true
+    },
  },
-  created() {
+   async created() {
    this.pageSize = 999
+    await this.getTableData()
+    await this.getMenuList(this.tableData)
  }
 }
 </script>
@@ -16,18 +16,29 @@
      <el-table-column label="昵称" min-width="150" prop="nickName"></el-table-column>
      <el-table-column label="用户角色" min-width="150">
        <template slot-scope="scope">
-          <el-select
+          <el-cascader
            @change="changeAuthority(scope.row)"
-            placeholder="请选择"
-            v-model="scope.row.authority.authorityId"
-          >
-            <el-option
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in authOptions"
-            ></el-option>
-          </el-select>
+              v-model="scope.row.authority.authorityId"
+              :options="authOptions"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="150">
+        <template slot-scope="scope">
+          <el-popover
+          placement="top"
+          width="160"
+          v-model="scope.row.visible">
+          <p>确定要删除此用户吗</p>
+          <div style="text-align: right; margin: 0">
+            <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+            <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
+          </div>
+           <el-button type="text" size="small" slot="reference">删除</el-button>
+        </el-popover>
        </template>
      </el-table-column>
    </el-table>
@@ -67,14 +78,14 @@
          </el-upload>
        </el-form-item>
        <el-form-item label="用户角色" label-width="80px" prop="authorityId">
-          <el-select placeholder="请选择" v-model="userInfo.authorityId">
-            <el-option
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in authOptions"
-            ></el-option>
-          </el-select>
+          <el-cascader
+            @change="changeAuthority(scope.row)"
+              v-model="userInfo.authorityId"
+              :options="authOptions"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
@@ -89,7 +100,7 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
 const path = process.env.VUE_APP_BASE_API
-import { getUserList, setUserAuthority, register } from '@/api/user'
+import { getUserList, setUserAuthority, register, deleteUser } from '@/api/user'
 import { getAuthorityList } from '@/api/authority'
 import infoList from '@/components/mixins/infoList'
 import { mapGetters } from 'vuex'
@@ -127,6 +138,36 @@ export default {
    ...mapGetters('user', ['token'])
  },
  methods: {
+     setOptions(authData){
+      this.authOptions = []
+      this.setAuthorityOptions(authData,this.authOptions)
+    },
+    setAuthorityOptions(AuthorityData,optionsData){
+      AuthorityData&&AuthorityData.map(item=>{
+        if(item.children.length){
+          const option = {
+            authorityId:item.authorityId,
+            authorityName:item.authorityName,
+            children:[]
+        }
+          this.setAuthorityOptions(item.children,option.children)
+          optionsData.push(option)
+        }else{
+          const option = {
+              authorityId:item.authorityId,
+              authorityName:item.authorityName,
+          }
+          optionsData.push(option)
+        }
+      })
+    },
+    async deleteUser(row){
+      const res = await deleteUser({id:row.ID})
+      if(res.code == 0){
+        this.getTableData()
+        row.visible = false
+      }
+    },
    async enterAddUserDialog() {
      this.$refs.userForm.validate(async valid => {
        if (valid) {
@@ -160,8 +201,9 @@ export default {
    }
  },
  async created() {
+    this.getTableData()
    const res = await getAuthorityList({ page: 1, pageSize: 999 })
-    this.authOptions = res.data.list
+    this.setOptions(res.data.list)
  }