1.axios模块注意事项

  1. // 查询工号是否重复
  2. export function getEmployeeCheckUserCode(data) {
  3.   return request({
  4.     url: 'employee-user/v1/emp-user/code',
  5.     method: 'get',
  6.     params: data
  7.   })
  8. }
  10. getEmployeeCheckUserCode({ code: value, userId: this.userId }).then(res => {
  11.           if (res.data.msg === '工号可用') {
  12.             callback()
  13.           } else {
  14.             callback('工号已存在')
  15.           }
  16.         })

2.0 数组CRUD

1.业务场景删除指定内容,

  1.     <el-tag
  2.       v-for="(tag, index) in deptData"
  3.       :key="index"
  4.       closable
  5.       @close="handleCloseDept(tag)">
  6.       {{ tag.deptName }}
  7.    </el-tag>    
  8. // 删除部门tag
  9.     handleCloseDept(tag) {
  10.       // 通过key值的变动强制刷新组件
  11.       this.deptData.splice(this.deptData.indexOf(tag), 1)
  12.     },

2.0 el-tags和el-tree树形结构的综合运用情况

3 el-table设置表格高度自适应

  1. <el-table ref="table" :data="tableData" :height="tableHeight"></el-table>
  1. export default {
  2.     data(){
  3.         return {
  4.             tableHeight: 50,
  5.             tableData: []
  6.         }
  7.     },
  8.     mounted:function(){
  9.         this.$nextTick(function () {
  10.             this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
  12.             // 监听窗口大小变化
  13.             let self = this;
  14.             window.onresize = function() {
  15.                 self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 50
  16.             }
  17.         })
  18.         //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
  19. 　　　　 //50表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
  20.     }
  21. }

4.vue路由跳转打开新一页

  1. outsideLink () {
  2.     let {href}= this.$router.resolve({
  3.     path: "/newLinkPage",  
  4.   });
  5.   window.open(href, '_blank');
  6. }

5.0 el-table全选和取消全选2种方式

5.1 自定义的表格模式

  • 自定义封装列表的选项框勾选，使用自定义方式完成全选或者取消，选择个别状态为isIndeterminate 等待状态。
  1. <el-table-column width="55">
  2.  <template slot-scope="scope">
  3.   <el-checkbox v-model="scope.row.isCheck" @change="handleCheck($event, scope.row)"/>
  4.   </template>
  5. </el-table-column>
  1. table点击点击选择
    • 第一步先判断点击的数组和当前传进来的数据是否存在，存在返回下标没有则-1
    • 如果不存在空的则把选择的内容添加到中间数组 this.checkList 则表示当前是选择点击勾选状态
    • 存在数据并且返回当前数据下标则 haveAny !== -1进行下标的删除等于 取消勾选状态取消选择
    • this.isIndeterminate通过当前点击的长度和输入的中间数组长度判断若不相等则为等待状态表示false（indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果）
    • checkAll全部选择状态，table表格全部选择表示当前状态
  1.     handleCheck(val, item) {
  2.       const haveAny = this.checkList.findIndex((citem) => {
  3.         return citem.orderId === item.orderId
  4.       })
  5.       if (val) {
  6.         if (haveAny === -1) {
  7.           this.checkList.push(item)
  8.         }
  9.       } else {
  10.         if (haveAny !== -1) {
  11.           this.checkList.splice(haveAny, 1)
  12.         }
  13.       }
  15.       this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.tableData.length
  16.       this.checkAll = this.checkList.length > 0 && this.checkList.length === this.tableData.length
  17.       console.log(this.checkList)
  18.     },
  1. 自定义checkbox点击实现table自定义的 checkbox全部选择
  • 先让 this.isIndeterminate状态隐藏
  • 判断 this.tableData 内容使用 forEach遍历完成 开关状态
  • 并且完成赋值修改最后的选择状态
  1.     handleCheckAllChange(val) {
  2.       this.isIndeterminate = false
  3.       if (val) {
  4.         this.tableData.forEach(item => {
  5.           item.isCheck = true
  6.         })
  7.         this.checkList = JSON.parse(JSON.stringify(this.tableData))
  8.       } else {
  9.         this.tableData.forEach(item => {
  10.           item.isCheck = false
  11.         })
  12.         this.checkList = []
  13.       }
  14.     },

5.2 自定义的表格模式

  1.   <el-table   @selection-change="handleSelectionChange"  
  2.           <el-table-column type="selection" width="55"/>
  3.   <el-table/>
  1. 自定义全选模式
    • 完成中间数组的赋值插入，根据插入的数据的长度和 this.tableData.length 判断实现对自定义checkbox的状态切换修改
  1.     handleSelectionChange(val) {
  2.       this.checkList = val
  3.       this.checkList.length === this.tableData.length ? this.checkAll = true : this.checkAll = false
  4.       console.log(this.checkList)
  5.     },
  1. 点击选项
  • 第一步先判断点击的数组和当前传进来的数据是否存在，存在返回下标没有则-1
  • 如果不存在空的则把选择的内容添加到中间数组 this.checkList 则表示当前是选择点击勾选状态
  • 存在数据并且返回当前数据下标则 haveAny !== -1进行下标的删除等于 取消勾选状态取消选择
  • this.isIndeterminate通过当前点击的长度和输入的中间数组长度判断若不相等则为等待状态表示false（indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果）
  • checkAll全部选择状态，table表格全部选择表示当前状态
  1.     // 点击选项
  2.     handleCheck(val, item) {
  3.       const haveAny = this.checkList.findIndex((citem) => {
  4.         return citem.userId === item.userId
  5.       })
  6.       if (val) {
  7.         if (haveAny === -1) {
  8.           this.checkList.push(item)
  9.         }
  10.       } else {
  11.         if (haveAny !== -1) {
  12.           this.checkList.splice(haveAny, 1)
  13.         }
  14.       }
  15.       this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.tableData.length
  16.       this.checkAll = this.checkList.length > 0 && this.checkList.length === this.tableData.length
  17.     },
  1. 当页全选模式
  1.     // 当页全选
  2.     handleCheckAllChange(val) {
  3.       console.log(val)
  4.       this.isIndeterminate = false
  5.       if (val) {
  6.         this.tableData.forEach(item => {
  7.           const isCheck = item.isCheck = true
  8.           this.$refs.table.toggleRowSelection(item, isCheck)
  9.         })
  10.       } else {
  11.         this.tableData.forEach(item => {
  12.           item.isCheck = false
  13.           this.$refs.table.clearSelection()
  14.         })
  15.         this.checkList = []
  16.       }
  17.     },

6.0 树形结构权限树形（难点）

  1.           <!-- 树形结构 -->
  2.           <el-tree
  3.             ref="tree"
  4.             :data="treeData"
  5.             :expand-on-click-node="false"
  6.             :props="defaultProps"
  7.             :default-expanded-keys="treeNnfoldArray"
  8.             :highlight-current="isHighlight"
  9.             node-key="deptId"
  10.             @node-click="setUserData"
  11.             @node-expand="nodeExpand"
  12.             @node-collapse="nodeCollapse"
  13.           >
  14.             <span slot-scope="{ node, data }" class="custom-tree-node">
  15.               <span style="margin-right: 6px">
  16.                 <img src="./img/Process.png" >
  17.               </span>
  18.               <span style="margin-right: 6px">{{ node.label }}</span>
  19.             </span>
  20.           </el-tree>

7.0 Popover 弹出框嵌套只显示一个处理方案

  1. <template>
  2.   <div class="position-dept-class">
  3.     <div class="classify-main">
  4.       <div class="tree-class">
  5.         <div class="tree-box">
  6.           <!-- <el-button>添加分类</el-button> -->
  7.           <el-tree
  8.             ref="tree"
  9.             :data="treeList"
  10.             :props="getData"
  11.             :highlight-current="true"
  12.             :expand-on-click-node="false"
  13.             :check-on-click-node="true"
  14.             :indent="8"
  15.             node-key="deptId"
  16.             default-expand-all
  17.             draggable
  18.             @node-click="selectDep"
  19.             @node-drop="handleDrop"
  20.             @node-drag-start="startDrop">
  21.             <!-- @mouseover="toggleShow(data)" @mouseout="togglenoShow(data)" -->
  22.             <span slot-scope="{ node, data }" class="custom-tree-node" >
  23.               <span style="margin-right: 5px">
  24.                 <img src="./img/Process.png">
  25.               </span>
  26.               <span style="margin-left:10px;"> {{ data.deptName }}</span>
  27.               <!-- <img v-show="overIndex === data.deptId" src="./img/treePoint.png" @click="tools(data)"> -->
  28.               <span>
  29.                 <!-- v-model="data.visible" -->
  30.                 <el-popover
  31.                   v-model="data.visible"
  32.                   :width="isModify ? '300': '160'"
  33.                   placement="bottom"
  34.                   trigger="click"
  35.                   popper-class="position-dept-popper-class"
  36.                   @show="tools(data)"
  37.                   @hide="cancelDepartmen(data)">
  38.                   <div v-if="!isModify">
  39.                     <div @click="openToModify(data)">
  40.                       <el-dropdown-item><span>修改名称</span></el-dropdown-item>
  41.                     </div>
  42.                     <div @click.stop="addPosition('child', node, data)">
  43.                       <el-dropdown-item><span>新建子部门</span></el-dropdown-item>
  44.                     </div>
  45.                     <div @click.stop="addPosition('peer', node, data)">
  46.                       <el-dropdown-item><span>添加同级部门</span></el-dropdown-item>
  47.                     </div>
  48.                     <template v-if="!(node.level === 1 && treeList.length === 1)">
  49.                       <div @click.stop="isDeleteDept(node,data)">
  50.                         <el-dropdown-item style="border-top: 1px solid #EEEEEE;margin-top: 12px;padding-top: 6px;color: #FF6000;"><span>删除</span></el-dropdown-item>
  51.                       </div>
  52.                     </template>
  54.                   </div>
  55.                   <div v-if="isModify" class="modifyName" style="padding: 14px 10px;">
  56.                     <el-input v-model="companyName" maxlength="16" style="margin-bottom:19px;" />
  57.                     <el-button class="cancel" style="padding: 8px 20px; border: 1px solid #D7B759;color: #D7B759;margin-left: 120px;margin-bottom: 7px;" @click="cancelDepartmen(data)">取消</el-button>
  58.                     <el-button type="primary" style="padding: 8px 20px;" @click="modifyName(data)">保存</el-button>
  59.                   </div>
  60.                   <!-- v-show="overIndex === data.deptId" -->
  61.                   <!-- @click="tools(data)" -->
  62.                   <img slot="reference" :style=" data.visible ? {display: 'inline-block'} : {}" class="cc-img" src="./img/treePoint.png" style="margin-left:12px; width:16px;position: absolute; right: 6px;top: 16px" @click.stop="" >
  63.                   <!-- <img slot="reference" type="text" src="../../../assets/treePoint.png" @click="tools(data)"> -->
  64.                 </el-popover>
  65.               </span>
  66.             </span>
  67.           </el-tree>
  68.         </div>
  70.       </div>
  71.     </div>
  72.     <el-dialog :visible.sync="dialogVisible" title="新增部门" width="580px" class="addDept">
  73.       <div class="add_content">
  74.         <span class="content_text">
  75.           <span style="color:#FF6000">*</span> 部门名
  76.         </span>
  77.         <el-input v-model="addDeptName" />
  78.       </div>
  79.       <span slot="footer" class="dialog-footer">
  80.         <el-button class="cancel" @click.stop="addCancel">取 消</el-button>
  81.         <el-button type="primary" @click.stop="addSave">保 存</el-button>
  82.       </span>
  83.     </el-dialog>
  84.     <el-dialog :visible.sync="isDelete" :show-close="false" width="580px">
  85.       <div class="delete_content">
  86.         <img src="./img/tip.png" style="width: 24px;">
  87.         <span class="delete_text">删除部门将会将部门所关联的权限一并删除，此操作不可逆</span>
  88.       </div>
  89.       <span slot="footer" class="dialog-footer">
  90.         <el-button type="primary" @click.stop="deleteDept">确定删除</el-button>
  91.         <el-button class="cancel" style=" border: 1px solid #D7B759;color:#D7B759;" @click.stop="isDelete = false">取 消</el-button>
  92.       </span>
  93.     </el-dialog>
  94.   </div>
  95. </template>
  97. <script>
  98. import {
  99.   getDeptTree,
  100.   sortDeptTree,
  101.   addDept,
  102.   deleteDept,
  103.   modifyDeptName
  104. } from '@/api/manager-user'
  105. export default {
  106.   data() {
  107.     return {
  108.       treeList: [],
  109.       // treeData: [],
  110.       // visible: false,
  111.       // isOpen: false,
  112.       overIndex: -1,
  113.       cacheDataItem: {},
  114.       isModify: false,
  115.       companyName: '',
  116.       dialogVisible: false,
  117.       isDelete: false,
  118.       addDeptName: '',
  119.       parentId: 0,
  120.       getData: {
  121.         children: 'deptItems'
  122.       },
  123.       parentNode: [],
  124.       childrenNode: []
  125.     }
  126.   },
  127.   mounted() {
  128.     this.getTreeData()
  129.   },
  130.   methods: {
  131.     getTreeData() {
  132.       getDeptTree().then(async res => {
  133.         if (res.data.code === 200) {
  134.           const treeList = res.data.data
  135.           if (treeList && treeList.length > 0) {
  136.             this.treeList = treeList
  137.             this.$emit('selectDept', this.treeList[0], [this.treeList[0].deptId])
  138.             this.$nextTick(() => {
  139.               if (this.$refs.tree) {
  140.                 this.$refs.tree.setCurrentKey(this.treeList[0].deptId)
  141.               }
  142.             })
  143.           }
  144.         }
  145.       })
  146.     },
  147.     selectDep(val) {
  148.       const checkedKeys = this.$refs.tree.getHalfCheckedKeys()
  149.       const newKeys = [...checkedKeys, val.deptId]
  150.       this.$emit('selectDept', val, newKeys)
  151.       this.$refs.tree.setCheckedKeys([])
  152.     },
  153.     // 递归查找所有父id
  154.     searchParent(dropNode) {
  155.       if (!dropNode.parent || dropNode.parent.id === 0 || !dropNode.parent.data.deptId) {
  156.         return true
  157.       }
  158.       console.log(dropNode.parent.data.deptId)
  159.       this.parentNode.push(dropNode.parent.data.deptId)
  160.       this.searchParent(dropNode.parent)
  161.     },
  162.     // 递归查找所有子id
  163.     searchChild(draggingNode) {
  164.       if (draggingNode.childNodes.length === 0) {
  165.         return true
  166.       }
  167.       draggingNode.childNodes.forEach((item, index) => {
  168.         this.searchChild(item)
  169.         this.childrenNode.push(item.data.deptId)
  170.       })
  171.     },
  172.     startDrop(draggingNode, ev) {
  173.       console.log(draggingNode)
  174.     },
  175.     handleDrop(draggingNode, dropNode, dropType, ev) {
  176.       this.parentNode = []
  177.       this.childrenNode = []
  178.       if (dropType === 'inner' && dropNode.data.deptId) {
  179.         this.parentNode.push(dropNode.data.deptId)
  180.       }
  181.       if (dropType === 'inner' || (draggingNode.data.deptParentId !== dropNode.data.deptParentId)) {
  182.         this.searchParent(dropNode)
  183.         this.childrenNode.push(draggingNode.data.deptId)
  184.         this.searchChild(draggingNode)
  185.       }
  186.       const updateData = {
  187.         id: draggingNode.data.deptId,
  188.         parent: '',
  189.         sort: '',
  190.         dropData: {
  191.           sortDeptIds: [],
  192.           roleDeptIds: [],
  193.           deptItems: []
  194.         }
  195.       }
  196.       const data = dropType !== 'inner' ? dropNode.parent.data : dropNode.data
  197.       var nodeData = dropNode.level === 1 && dropType !== 'inner' ? data : data.deptItems
  198.       let list = []
  199.       const findIndex = nodeData.findIndex(x => x.deptId === draggingNode.data.deptId)
  200.       if (findIndex !== -1) {
  201.         let sort
  202.         if (findIndex === 0) {
  203.           sort = 0
  204.         } else {
  205.           const prve = findIndex - 1
  206.           sort = nodeData[prve].sort + 1
  207.         }
  208.         // draggingNode.data.sort = sort
  209.         updateData.sort = sort
  210.         let parentId = dropType !== 'inner' ? dropNode.parent.data.deptId : dropNode.data.deptId
  211.         if (!parentId) {
  212.           parentId = 0
  213.         }
  214.         const start = findIndex + 1
  215.         list = nodeData.slice(start)
  216.         updateData.parent = parentId
  217.         // draggingNode.data.paterId = parentId
  218.         list.forEach(item => {
  219.           // sort++
  220.           // item.sort = sort
  221.           updateData.dropData.sortDeptIds.push(item.deptId)
  222.         })
  223.         updateData.dropData.roleDeptIds = this.parentNode
  224.         updateData.dropData.deptItems = this.childrenNode
  225.       }
  227.       sortDeptTree(updateData.id, updateData.parent, updateData.sort, updateData.dropData).then(res => {
  228.         if (res.data.code === 200) {
  229.           let sort = updateData.sort
  230.           draggingNode.data.sort = sort
  231.           draggingNode.data.deptParentId = updateData.parent
  232.           list.forEach(item => {
  233.             sort++
  234.             item.sort = sort
  235.           })
  236.         } else {
  237.           this.$notify({
  238.             title: '失败',
  239.             message: '排序失败，请重试',
  240.             type: 'error',
  241.             duration: 2000
  242.           })
  243.           this.getTreeData()
  244.         }
  245.       })
  246.     },
  247.     // toggleShow(item) {
  248.     //   this.overIndex = item.deptId
  249.     // },
  250.     // // 左侧鼠标离开
  251.     // togglenoShow(data) {
  252.     //   this.overIndex = -1
  253.     // },
  254.     tools(item) {
  255.       if (this.cacheDataItem && item.deptId !== this.cacheDataItem.deptId) {
  256.         this.cacheDataItem.visible = false
  257.       }
  258.       this.cacheDataItem = item
  259.     },
  260.     cancelDepartmen(data) {
  261.       // data.visible = false
  262.       setTimeout(() => {
  263.         this.isModify = false
  264.       }, 200)
  265.     },
  266.     openToModify(data) {
  267.       this.companyName = data.deptName
  268.       this.isModify = true
  269.     },
  270.     addPosition(type, node, data) {
  271.       data.visible = false
  272.       let parentId
  273.       this.dialogVisible = true
  274.       if (type === 'peer') {
  275.         parentId = node.data.deptParentId
  276.       } else if (type === 'child') {
  277.         parentId = data.deptId
  278.       }
  279.       this.parentId = parentId
  280.     },
  281.     addCancel() {
  282.       this.dialogVisible = false
  283.       this.addDeptName = ''
  284.     },
  285.     addSave() {
  286.       if (!this.addDeptName) {
  287.         this.$notify({
  288.           title: '添加失败',
  289.           message: '部门名不能为空！',
  290.           type: 'error',
  291.           duration: 2000
  292.         })
  293.         return
  294.       }
  295.       const addData = {
  296.         deptName: this.addDeptName,
  297.         deptParentId: this.parentId
  298.       }
  299.       addDept(addData).then(res => {
  300.         if (res.data.code === 200) {
  301.           this.$notify({
  302.             title: '成功',
  303.             message: '添加部门成功',
  304.             type: 'success',
  305.             duration: 2000
  306.           })
  307.           this.getTreeData()
  308.           this.dialogVisible = false
  309.           this.addDeptName = ''
  310.         }
  311.       })
  312.     },
  313.     isDeleteDept(node, data) {
  314.       data.visible = false
  315.       if (node.childNodes.length) {
  316.         this.$notify({
  317.           title: '失败',
  318.           message: '存在子部门，不能删除',
  319.           type: 'error',
  320.           duration: 2000
  321.         })
  322.         return
  323.       }
  324.       this.isDelete = true
  325.       this.deleteId = data.deptId
  326.     },
  327.     deleteDept() {
  328.       deleteDept(this.deleteId).then(res => {
  329.         if (res.data.code === 200) {
  330.           if (res.data.type === 1) {
  331.             this.$notify({
  332.               title: '成功',
  333.               message: '删除部门成功',
  334.               type: 'success',
  335.               duration: 2000
  336.             })
  337.             this.getTreeData()
  338.           } else if (res.data.type === 3) {
  339.             this.$notify({
  340.               title: '失败',
  341.               message: res.data.msg,
  342.               type: 'error',
  343.               duration: 2000
  344.             })
  345.           }
  346.         }
  347.         this.isDelete = false
  348.       })
  349.     },
  350.     modifyName(data) {
  351.       if (!this.companyName) {
  352.         this.$notify({
  353.           title: '失败',
  354.           message: '部门名不能为空',
  355.           type: 'error',
  356.           duration: 2000
  357.         })
  358.         return
  359.       }
  360.       const deptData = {
  361.         deptId: data.deptId,
  362.         deptName: this.companyName
  363.       }
  364.       modifyDeptName(deptData).then(res => {
  365.         if (res.data.code === 200) {
  366.           this.$notify({
  367.             title: '成功',
  368.             message: '修改部门名成功',
  369.             type: 'success',
  370.             duration: 2000
  371.           })
  372.           data.deptName = this.companyName
  373.           data.visible = false
  374.           this.$emit('selectDept', data)
  375.         }
  376.       })
  377.     }
  378.   }
  380. }
  381. </script>

8.0 绝对定位布局

  1.         <el-drawer
  2.           title="配置权限"
  3.           :visible.sync="drawer"
  4.           direction="rtl"
  5.           :before-close="handleClose"
  6.           size="40%">
  7.           <div style="position: absolute;top:52px;left: 0;right: 0;bottom: 0;">
  8.               <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 60px;overflow-y: auto;">
  9.                   <el-tree
  10.                     :data="ruleList"
  11.                     show-checkbox
  12.                     node-key="id"
  13.                     default-expand-all
  14.                     :default-checked-keys="checkedKeys"
  15.                     :props="defaultProps"
  16.                     :check-strictly="true"
  17.                     @check="check">
  18.                   </el-tree>
  19.               </div>
  20.               <div style="height: 60px;position: absolute;bottom: 0;right: 0;left: 0;" class="border d-flex align-items-center px-3 bg-white">
  21.                   <el-button @click="drawer = false">取消</el-button>
  22.                   <el-button type="primary" @click="submitRules">确定</el-button>  
  23.               </div>
  24.           </div>
  25.         </el-drawer>

9.0 element-ui promise自定义校验

 validator: async (rule, value)=>{
                // 请求判断用户是否存在
                let res = await that.certificate(value);
                if(res.status === 1)
                    return Promise.reject('用户名已存在');
                else return Promise.resolve('用户名可用');
            },

10.0 反复点击清除背景颜色问题

-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

11.0 防抖函数处理请求

this.debounce(this.getEmployeeQueryDepartmentUser, 600)

    debounce(fn, wait) {
      if (this.timer !== null) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(fn, wait)
    }



    debounce(fn, wait) {
     if (this.timer) {
        clearTimeout(this.timer)
      }
       this.timer = setTimeout(() => {
        if (this.form.fileKey && this.appId && this.formId && this.printId) {
          console.log('执行代码')
          this.submitForm2()
        }
      }, 500)
    }