• eyb：操作员页面设计到高级搜索功能实现（四）

    目录：

    （1）操作员页面设计

    （2）操作员功能实现

    （3）操作员角色更新功能实现

    （4）员工资料工具栏页面

    （5）员工展示

    （6）分页展示员工

    （7）添加员工页面绘制

    （8）添加员工页面绘制2

    （9）添加员工下拉框数据处理、最大工号

    （10）员工添加数据检验

    （11）员工删除及更新

    （12）封装文件的下载请求

    （13）高级搜索页面设计

    （14）高级搜索动画特效

    （15）高级搜索功能实现

    （1）操作员页面设计

     

    （2）操作员功能实现

     搜索框搜索：还是在初始化列表里面添加一个关键字keywords：

     删除操作员方法：

     

    状态开关事件：

     在次登录：

     （3）操作员角色更新功能实现

     

     

    SysAdmin.vue详细代码：

    1. <template>
    2.   <div>
    3.     <div style="margin-top: 10px;display: flex;justify-content: center">
    4.       <el-input placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search" v-model="keywords"
    5.                 style="width: 400px;margin-right: 10px" @keydown.enter.native="doSearch">el-input>
    6.       <el-button type="primary" icon="wl-icon-search" @click="doSearch">搜索el-button>
    7.     div>
    8.     <div class="admin-container">
    9.       
    10.       <el-card class="admin-card" v-for="(admin,index) in admins" :key="index">
    11.         <div slot="header" class="clearfix">
    12.           <span>{{admin.name}}span>
    13.           <el-button style="float: right;padding: 3px 0;color: #ff0000" type="text" icon="el-icon-delete"
    14.                      @click="deleteAdmin(admin)">el-button>
    15.         div>
    16.         <div>
    17.           
    18.           <div class="img-container">
    19.             <img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userface-img">
    20.           div>
    21.         div>
    22.         
    23.         <div class="userinfo-container">
    24.           <div>用户名:{{admin.name}}div>
    25.           <div>手机号码:{{admin.phone}}div>
    26.           <div>电话号码:{{admin.telephone}}div>
    27.           <div>地址:{{admin.address}}div>
    28.           <div>用户状态:
    29.             <el-switch
    30.                 v-model="admin.enabled"
    31.                 active-color="#13ce66"
    32.                 inactive-color="#ff4949"
    33.                 @change="enabledChange(admin)"
    34.                 active-text="启用"
    35.                 inactive-text="禁用">
    36.             el-switch>
    37.           div>
    38.           <div>用户角色:
    39.             <el-tag type="success" style="margin-right: 4px" v-for="(role,indexj) in admin.roles" :key="indexj">
    40.               {{role.nameZh}}
    41.             el-tag>
    42.             
    43.             <el-popover
    44.                 placement="right"
    45.                 title="角色列表"
    46.                 @show="showPop(admin)"
    47.                 @hide="hidePop(admin)"
    48.                 width="200"
    49.                 trigger="click">
    50.               
    51.               <el-select v-model="selectedRoles" multiple placeholder="请选择...">
    52.                 <el-option
    53.                     v-for="(r,indexk) in allRoles"
    54.                     :key="indexk"
    55.                     :label="r.nameZh"
    56.                     :value="r.id">el-option>
    57.               el-select>
    58.               <el-button slot="reference" icon="el-icon-more" type="text">el-button>
    59.             el-popover>
    60.             
    61.           div>
    62.  
    63.           <div>备注:{{admin.remark}}div>
    64.         div>
    65.       el-card>
    66.     div>
    67.   div>
    68. template>
    69.  
    70. <script>
    71. export default {
    72.   name: "SysAdmin",
    73.   data() {
    74.     return {
    75.       keywords: '',
    76.       //操作员数组
    77.       admins: [],
    78.       allRoles: [],
    79.       //选中的角色
    80.       selectedRoles: []
    81.     }
    82.   },
    83.   //当页面刚加载的时候调用initAdmins方法调用后端接口，获取所有操作员列表
    84.   mounted() {
    85.     this.initAdmins();
    86.   },
    87.   methods: {
    88.     //获取所有操作员列表方法
    89.     initAdmins() {
    90.       this.getRequest('/system/admin/?keywords=' + this.keywords).then(resp => {
    91.         if (resp) {
    92.           //把返回的数据赋值给数组
    93.           this.admins = resp;
    94.         }
    95.       })
    96.     },
    97.     //搜索框搜索
    98.     doSearch() {
    99.       this.initAdmins();
    100.     },
    101.     //删除操作员方法
    102.     deleteAdmin(admin) {
    103.       this.$confirm('此操作将永久删除该【' + admin.name + '】用户, 是否继续?', '提示', {
    104.         confirmButtonText: '确定',
    105.         cancelButtonText: '取消',
    106.         type: 'warning'
    107.       }).then(() => {
    108.         //调用后端接口：/system/admin
    109.         this.deleteRequest('/system/admin/' + admin.id).then(resp => {
    110.           //删除成功之后重新调用获取操作员列表的方法
    111.           this.initAdmins();
    112.         })
    113.       }).catch(() => {
    114.         this.$message({
    115.           type: 'info',
    116.           message: '已取消删除'
    117.         });
    118.       });
    119.     },
    120.     //更新操作员状态
    121.     enabledChange(admin) {
    122.       //调用后端接口/system/admin
    123.       this.putRequest('/system/admin/', admin).then(resp => {
    124.         if (resp) {
    125.           //成功之后重新调用获取操作员列表的方法,更新一下
    126.           this.initAdmins();
    127.         }
    128.       })
    129.     },
    130.     //弹出框隐藏时触发的事件
    131.     hidePop(admin) {
    132.       let roles = [];
    133.       Object.assign(roles, admin.roles);
    134.       let flag = false;
    135.       if (roles.length != this.selectedRoles.length) {
    136.         flag = true;
    137.       } else {
    138.         for (let i = 0; i < roles.length; i++) {
    139.           let role = roles[i];
    140.           for (let j = 0; j < this.selectedRoles.length; j++) {
    141.             let sr = this.selectedRoles[j];
    142.             if (role.id == sr) {
    143.               roles.splice(i, 1);
    144.               i--;
    145.               break;
    146.             }
    147.           }
    148.         }
    149.         if (roles.length != 0) {
    150.           flag = true;
    151.         }
    152.       }
    153.       if (flag) {
    154.         let url = '/system/admin/role?adminId=' + admin.id;
    155.         this.selectedRoles.forEach(sr => {
    156.           url += '&rids=' + sr;
    157.         })
    158.         this.putRequest(url).then(resp => {
    159.           if (resp) {
    160.             this.initAdmins();
    161.           }
    162.         })
    163.       }
    164.     },
    165.     //弹出框显示事件
    166.     showPop(admin) {
    167.       //拿到所有角色列表
    168.       this.initAllRoles();
    169.       //选中的角色
    170.       let roles = admin.roles;
    171.       this.selectedRoles = [];
    172.       roles.forEach(r => {
    173.         this.selectedRoles.push(r.id);
    174.       })
    175.     },
    176.     //获取所有角色方法
    177.     initAllRoles() {
    178.       this.getRequest('/system/admin/roles').then(resp => {
    179.         if (resp) {
    180.           this.allRoles = resp;
    181.         }
    182.       })
    183.     }
    184.   }
    185. }
    186. script>
    187.  
    188. <style>
    189. .userinfo-container div {
    190.   font-size: 12px;
    191.   color: #409eff;
    192. }
    193.  
    194. .userinfo-container {
    195.   margin-top: 20px;
    196. }
    197.  
    198. .img-container {
    199.   width: 100%;
    200.   display: flex;
    201.   justify-content: center;
    202. }
    203.  
    204. .userface-img {
    205.   width: 72px;
    206.   height: 72px;
    207.   border-radius: 72px;
    208. }
    209.  
    210. .admin-container {
    211.   margin-top: 10px;
    212.   display: flex;
    213.   justify-content: space-around;
    214.   flex-wrap: wrap;
    215. }
    216.  
    217. .admin-card {
    218.   width: 300px;
    219.   margin-bottom: 20px;
    220. }
    221. style>

     

     （4）员工资料工具栏页面

     

     （5）员工展示

     ... 

     

    （6）分页展示员工

     点2：

     换成每页20条：

     

     

    搜索性王的：

     当点击清空按钮时：

     

    （7）添加员工页面绘制

     

    （8）添加员工页面绘制2

     

    ...

    （9）添加员工下拉框数据处理、最大工号

    政治面貌、职称、职位、下拉框内容展示

     

     

     

     

     （10）员工添加数据检验

     先做一个数据校验，校验是否输入了内容：

     

     

     

    （11）员工删除及更新

     

     

     

     

     

      

    点击编辑：

     修改学校为北京大学

     

     在次打开：

     删掉这向记录：

     

     

     （12）封装文件的下载请求

    实现导入数据导出数据

    axios并不提供下载的功能，我们提供一个插件：先安装：

    封装一下做文件下载请求的 

    download.js：

    1. import axios from 'axios'
    2.  
    3. const service = axios.create({
    4.   //默认类型
    5.   responseType: 'arraybuffer'
    6. })
    7. //请求拦截器
    8. service.interceptors.request.use(config => {
    9.   //判断是否登录，有token
    10.   config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
    11.   return config
    12. }, error => {
    13.   console.log(error)
    14. });
    15. //响应拦截器
    16. service.interceptors.response.use(
    17.   resp => {
    18.     const headers = resp.headers;//拿头部信息
    19.     let reg = RegExp(/application\/json/);//定义正则表达式
    20.     if (headers['content-type'].match(reg)) {//判断head是否跟正则表达式相匹配
    21.       //调用方法转换为json字符串
    22.       resp.data = uintToString(resp.data);
    23.     } else {
    24.       //不匹配的话返回stream流
    25.       let fileDownload = require('js-file-download');//获取download插件
    26.       let fileName = headers["content-disposition"].split(";")
    27.         [1].split("filename=")[1];//获取名字
    28.       let contentType = headers["content-type"];//获取contentType
    29.       fileName = decodeURIComponent(fileName);//转换文件名，防止中文乱码
    30.       fileDownload(resp.data, fileName, contentType)
    31.     }
    32.   },error => {
    33.     console.log(error);
    34.   }
    35. );
    36. //定义请求
    37. let base = '';
    38. export const downloadRequest = (url, params) => {
    39.   return service({
    40.     method: 'get',
    41.     url: `${base}${url}`,
    42.     data: params
    43.   })
    44. }
    45. function uintToString(uintArray) {
    46.   //编码
    47.   let encodedString = String.fromCharCode.apply(null, new
    48.     Uint8Array(uintArray)),
    49.       //解码
    50.     decodedString = decodeURIComponent(escape(encodedString));
    51.   return JSON.parse(decodedString);
    52. }
    53. //暴露service
    54. export default service

     

    在main.js引入：

     

     （13）员工数据的导入导出

     

    使用elementUI 的上传文件的组件：

     

     

     

     

     

     

     （13）高级搜索页面设计

    ...

     

     

    （14）高级搜索动画特效

     

     

     点击高级搜索：

     

    （15）高级搜索功能实现

     

     

     

     EmpBasic.vue:详细代码：

    1. <template>
    2.   <div>
    3.     <div>
    4.       <div style="display: flex;justify-content: space-between">
    5.         <div>
    6.           
    7.           <el-input prefix-icon="el-icon-search"
    8.                     placeholder="请输入员工名进行搜索..."
    9.                     v-model="empName"
    10.                     @keydown.enter.native="initEmps"
    11.                     clearable
    12.                     @clear="initEmps"
    13.                     :disabled="showAdvanceSearchVisible"
    14.                     style="width: 300px;margin-right: 10px">el-input>
    15.           <el-button type="primary"
    16.                      icon="el-icon-search"
    17.                      @click="initEmps"
    18.                      :disabled="showAdvanceSearchVisible">搜索
    19.           el-button>
    20.           <el-button type="primary"
    21.                      @click="showAdvanceSearchView">
    22.             <i :class="showAdvanceSearchVisible?'fa fa-angle-doubleup':'fa fa-angle-double-down'"
    23.                aria-hidden="true">i>
    24.             高级搜索
    25.           el-button>
    26.         div>
    27.         <div>
    28.           
    29.           <el-upload
    30.               action="/employee/basic/import"
    31.               :before-upload="beforeUpload"
    32.               :headers="headers"
    33.               :on-success="onSuccess"
    34.               :on-error="onError"
    35.               :disabled="importDataDisabled"
    36.               style="display: inline-flex;margin-right: 8px"
    37.               :show-file-list="false">
    38.             <el-button :disabled="importDataDisabled" type="success"
    39.                        :icon="importDataBtnIcon">
    40.               {{importDataBtnText}}
    41.             el-button>
    42.           el-upload>
    43.           <el-button type="success" @click="exportData" icon="el-icondownload">
    44.             导出数据
    45.           el-button>
    46.           <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">
    47.             添加用户
    48.           el-button>
    49.         div>
    50.       div>
    51.  
    52.       <transition name="slide-fade">
    53.         <div v-show="showAdvanceSearchVisible"
    54.              style="border: 1px solid #409eff;border-radius: 5px;box-sizing:border-box;padding: 5px;margin: 10px 0px">
    55.           <el-row>
    56.             <el-col :span="5">
    57.               政治面貌:
    58.               <el-select v-model="searchValue.politicId"
    59.                          placeholder="政治面貌" size="mini"
    60.                          style="width: 130px">
    61.                 <el-option
    62.                     v-for="item in politicsstatus"
    63.                     :key="item.id"
    64.                     :label="item.name"
    65.                     :value="item.id">
    66.                 el-option>
    67.               el-select>
    68.             el-col>
    69.             <el-col :span="4">
    70.               民族:
    71.               <el-select v-model="searchValue.nationId"
    72.                          placeholder="民族" size="mini" style="width: 130px">
    73.                 <el-option
    74.                     v-for="item in nations"
    75.                     :key="item.id"
    76.                     :label="item.name"
    77.                     :value="item.id">
    78.                 el-option>
    79.               el-select>
    80.             el-col>
    81.             <el-col :span="4">
    82.               职位:
    83.               <el-select v-model="searchValue.posId"
    84.                          placeholder="职位" size="mini" style="width: 130px">
    85.                 <el-option
    86.                     v-for="item in positions"
    87.                     :key="item.id"
    88.                     :label="item.name"
    89.                     :value="item.id">
    90.                 el-option>
    91.               el-select>
    92.             el-col>
    93.             <el-col :span="4">
    94.               职称:
    95.               <el-select v-model="searchValue.jobLevelId"
    96.                          placeholder="职称" size="mini"
    97.                          style="width: 130px">
    98.                 <el-option
    99.                     v-for="item in joblevels"
    100.                     :key="item.id"
    101.                     :label="item.name"
    102.                     :value="item.id">
    103.                 el-option>
    104.               el-select>
    105.             el-col>
    106.             <el-col :span="7">
    107.               聘用形式:
    108.               <el-radio-group v-model="searchValue.engageForm">
    109.                 <el-radio label="劳动合同">劳动合同el-radio>
    110.                 <el-radio label="劳务合同">劳务合同el-radio>
    111.               el-radio-group>
    112.             el-col>
    113.           el-row>
    114.           <el-row style="margin-top: 10px">
    115.             <el-col :span="5">
    116.               所属部门:
    117.               <el-popover
    118.                   placement="right"
    119.                   title="请选择部门"
    120.                   width="200"
    121.                   trigger="manual"
    122.                   v-model="visable2">
    123.                 <el-tree :data="allDeps" :props="defaultProps"
    124.                          default-expand-all
    125.                          @node-click="searchHandleNodeClick">
    126.                 el-tree>
    127.                 <div slot="reference"
    128.                      style="width: 130px;display: inline-flex;
    129.                         font-size: 13px;border: 1px solid #dedede;height: 24px;border-radius:
    130.                         5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;
    131.                         margin-left: 3px"
    132.                      @click="showDepView2">
    133.                   {{inputDepName}}
    134.                 div>
    135.               el-popover>
    136.             el-col>
    137.             <el-col :span="10">
    138.               入职日期:
    139.               <el-date-picker
    140.                   v-model="searchValue.beginDateScope"
    141.                   size="mini"
    142.                   type="daterange"
    143.                   value-format="yyyy-MM-dd"
    144.                   unlink-panels
    145.                   range-separator="至"
    146.                   start-placeholder="开始日期"
    147.                   end-placeholder="结束日期">
    148.               el-date-picker>
    149.             el-col>
    150.             <el-col :span="5" :offset="4">
    151.               <el-button>取消el-button>
    152.               <el-button type="primary"
    153.                          @click="initEmps('advanced')">搜索
    154.               el-button>
    155.             el-col>
    156.           el-row>
    157.         div>
    158.       transition>
    159.  
    160.     div>
    161.  
    162.  
    163.     
    164.     <div style="margin-top: 10px">
    165.       <el-table
    166.           :data="emps"
    167.           stripe
    168.           border
    169.           v-loading="loading"
    170.           element-loading-text="正在加载..."
    171.           element-loading-spinner="el-icon-loading"
    172.           element-loading-background="rgba(0, 0, 0, 0.8)"
    173.           style="width: 100%">
    174.         <el-table-column
    175.             type="selection"
    176.             width="55">
    177.         el-table-column>
    178.         <el-table-column
    179.             prop="name"
    180.             label="姓名"
    181.             fixed
    182.             align="left"
    183.             width="90">
    184.         el-table-column>
    185.         <el-table-column
    186.             prop="workID"
    187.             label="工号"
    188.             align="left"
    189.             width="85">
    190.         el-table-column>
    191.         <el-table-column
    192.             prop="gender"
    193.             label="性别"
    194.             width="85">
    195.         el-table-column>
    196.         <el-table-column
    197.             prop="birthday"
    198.             align="left"
    199.             width="95"
    200.             label="出生日期">
    201.         el-table-column>
    202.         <el-table-column
    203.             prop="idCard"
    204.             align="left"
    205.             width="150"
    206.             label="身份证号码">
    207.         el-table-column>
    208.         <el-table-column
    209.             prop="wedlock"
    210.             width="70"
    211.             label="婚姻状况">
    212.         el-table-column>
    213.         <el-table-column
    214.             prop="nation.name"
    215.             width="50"
    216.             label="民族">
    217.         el-table-column>
    218.         <el-table-column
    219.             prop="nativePlace"
    220.             width="80"
    221.             label="籍贯">
    222.         el-table-column>
    223.         <el-table-column
    224.             prop="politicsStatus.name"
    225.             label="政治面貌">
    226.         el-table-column>
    227.         <el-table-column
    228.             prop="email"
    229.             align="left"
    230.             width="180"
    231.             label="电子邮件">
    232.         el-table-column>
    233.         <el-table-column
    234.             prop="phone"
    235.             align="left"
    236.             width="100"
    237.             label="电话号码">
    238.         el-table-column>
    239.         <el-table-column
    240.             prop="address"
    241.             align="left"
    242.             width="220"
    243.             label="联系地址">
    244.         el-table-column>
    245.         <el-table-column
    246.             prop="department.name"
    247.             align="left"
    248.             width="100"
    249.             label="所属部门">
    250.         el-table-column>
    251.         <el-table-column
    252.             prop="position.name"
    253.             width="100"
    254.             label="职位">
    255.         el-table-column>
    256.         <el-table-column
    257.             prop="joblevel.name"
    258.             width="100"
    259.             label="职称">
    260.         el-table-column>
    261.         <el-table-column
    262.             prop="engageForm"
    263.             align="left"
    264.             width="100"
    265.             label="聘用形式">
    266.         el-table-column>
    267.         <el-table-column
    268.             prop="tiptopDegree"
    269.             label="最高学历">
    270.         el-table-column>
    271.         <el-table-column
    272.             prop="school"
    273.             align="left"
    274.             width="150"
    275.             label="毕业院校">
    276.         el-table-column>
    277.         <el-table-column
    278.             prop="specialty"
    279.             align="left"
    280.             width="150"
    281.             label="专业">
    282.         el-table-column>
    283.         <el-table-column
    284.             prop="workState"
    285.             align="left"
    286.             width="70"
    287.             label="在职状态">
    288.         el-table-column>
    289.         <el-table-column
    290.             prop="beginDate"
    291.             align="left"
    292.             width="95"
    293.             label="入职日期">
    294.         el-table-column>
    295.         <el-table-column
    296.             prop="conversionTime"
    297.             align="left"
    298.             width="95"
    299.             label="转正日期">
    300.         el-table-column>
    301.         <el-table-column
    302.             prop="beginContract"
    303.             align="left"
    304.             width="95"
    305.             label="合同起始日期">
    306.         el-table-column>
    307.         <el-table-column
    308.             prop="endContract"
    309.             align="left"
    310.             width="95"
    311.             label="合同截止日期">
    312.         el-table-column>
    313.         <el-table-column
    314.             align="left"
    315.             width="100"
    316.             label="合同期限">
    317.           <template slot-scope="scope">
    318.             <el-tag>{{scope.row.contractTerm}}el-tag>
    319.             年
    320.           template>
    321.         el-table-column>
    322.         <el-table-column
    323.             fixed="right"
    324.             width="200"
    325.             label="操作">
    326.           <template slot-scope="scope">
    327.             <el-button style="padding: 3px" size="mini"
    328.                        @click="showEditEmpView(scope.row)">编辑
    329.             el-button>
    330.             <el-button style="padding: 3px" size="mini"
    331.                        type="primary">查看高级资料
    332.             el-button>
    333.             <el-button style="padding: 3px" size="mini"
    334.                        type="danger" @click="deleteEmp(scope.row)">删除
    335.             el-button>
    336.           template>
    337.         el-table-column>
    338.       el-table>
    339.       
    340.       <div style="display: flex;justify-content: flex-end">
    341.         
    342.         <el-pagination
    343.             background
    344.             @current-change="currentChange"
    345.             @size-change="sizeChange"
    346.             layout="sizes,prev,pager,next,jumper,->,total,slot" :total="total">
    347.         el-pagination>
    348.       div>
    349.     div>
    350.     
    351.     <el-dialog
    352.         :title="title"
    353.         :visible.sync="dialogVisible"
    354.         width="80%">
    355.       <div>
    356.         
    357.         <el-form :model="emp" :rules="rules" ref="empForm">
    358.           
    359.           
    360.           <el-row>
    361.             <el-col :span="6">
    362.               <el-form-item label="姓名：" prop="name">
    363.                 <el-input size="mini" style="width: 150px" v-model="emp.name" placeholder="请输入员工姓名"
    364.                           prefix-icon="el-icon-edit">el-input>
    365.               el-form-item>
    366.             el-col>
    367.             <el-col :span="5">
    368.               <el-form-item label="性别：" prop="gender">
    369.                 <el-radio-group v-model="emp.gender" style="margin-top:8px">
    370.                   <el-radio label="男">男el-radio>
    371.                   <el-radio label="女">女el-radio>
    372.                 el-radio-group>
    373.               el-form-item>
    374.             el-col>
    375.             <el-col :span="6">
    376.               <el-form-item label="出生日期：" prop="birthday">
    377.                 <el-date-picker
    378.                     v-model="emp.birthday"
    379.                     size="mini"
    380.                     type="date"
    381.                     value-format="yyyy-MM-dd"
    382.                     style="width: 150px"
    383.                     placeholder="出生日期">
    384.                 el-date-picker>
    385.               el-form-item>
    386.             el-col>
    387.             <el-col :span="7">
    388.               <el-form-item label="政治面貌：" prop="politicId">
    389.                 <el-select v-model="emp.politicId"
    390.                            placeholder="政治面貌" size="mini" style="width: 200px">
    391.                   <el-option
    392.                       v-for="item in politicsstatus"
    393.                       :key="item.id"
    394.                       :label="item.name"
    395.                       :value="item.id">
    396.                   el-option>
    397.                 el-select>
    398.               el-form-item>
    399.             el-col>
    400.           el-row>
    401.           
    402.           <el-row>
    403.             <el-col :span="6">
    404.               <el-form-item label="民族：" prop="nationId">
    405.                 <el-select v-model="emp.nationId"
    406.                            placeholder="民族" size="mini" style="width: 150px">
    407.                   <el-option
    408.                       v-for="item in nations"
    409.                       :key="item.id"
    410.                       :label="item.name"
    411.                       :value="item.id">
    412.                   el-option>
    413.                 el-select>
    414.               el-form-item>
    415.             el-col>
    416.             <el-col :span="5">
    417.               <el-form-item label="籍贯：" prop="nativePlace">
    418.                 <el-input size="mini" style="width: 120px" v-model="emp.nativePlace" placeholder="请输入籍贯"
    419.                           prefix-icon="el-icon-edit">el-input>
    420.               el-form-item>
    421.             el-col>
    422.             <el-col :span="6">
    423.               <el-form-item label="电子邮箱：" prop="email">
    424.                 <el-input size="mini" style="width: 150px" v-model="emp.email" placeholder="请输入电子邮箱"
    425.                           prefix-icon="el-icon-message">el-input>
    426.               el-form-item>
    427.             el-col>
    428.             <el-col :span="7">
    429.               <el-form-item label="联系地址：" prop="address">
    430.                 <el-input size="mini" style="width: 200px" v-model="emp.address" placeholder="请输入联系地址"
    431.                           prefix-icon="el-icon-edit">el-input>
    432.               el-form-item>
    433.             el-col>
    434.           el-row>
    435.           
    436.           <el-row>
    437.             <el-col :span="6">
    438.               <el-form-item label="职位：" prop="posId">
    439.                 <el-select v-model="emp.posId" placeholder="职位"
    440.                            size="mini" style="width: 150px">
    441.                   <el-option
    442.                       v-for="item in positions"
    443.                       :key="item.id"
    444.                       :label="item.name"
    445.                       :value="item.id">
    446.                   el-option>
    447.                 el-select>
    448.               el-form-item>
    449.             el-col>
    450.             <el-col :span="5">
    451.               <el-form-item label="职称：" prop="jobLevelId">
    452.                 <el-select v-model="emp.jobLevelId"
    453.                            placeholder="职称" size="mini" style="width: 150px">
    454.                   <el-option
    455.                       v-for="item in joblevels"
    456.                       :key="item.id"
    457.                       :label="item.name"
    458.                       :value="item.id">
    459.                   el-option>
    460.                 el-select>
    461.               el-form-item>
    462.             el-col>
    463.             <el-col :span="6">
    464.               <el-form-item label="所属部门：" prop="departmentId">
    465.                 <el-popover
    466.                     placement="right"
    467.                     title="请选择部门"
    468.                     width="200"
    469.                     trigger="manual"
    470.                     v-model="visable">
    471.                   
    472.                   <el-tree :data="allDeps"
    473.                            :props="defaultProps" default-expand-all
    474.                            @node-click="handleNodeClick">
    475.                   el-tree>
    476.                   <div slot="reference"
    477.                        style="width: 150px;display: inline-flex;
    478.                               font-size: 13px;border: 1px solid #dedede;height: 24px;border-radius:
    479.                               5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"
    480.                        @click="showDepView">
    481.                     {{inputDepName}}
    482.                   div>
    483.                 el-popover>
    484.               el-form-item>
    485.             el-col>
    486.             <el-col :span="7">
    487.               <el-form-item label="电话号码：" prop="phone">
    488.                 <el-input size="mini" style="width: 200px" v-model="emp.phone" placeholder="请输入电话号码"
    489.                           prefix-icon="el-icon-phone">el-input>
    490.               el-form-item>
    491.             el-col>
    492.           el-row>
    493.           
    494.           <el-row>
    495.             <el-col :span="6">
    496.               <el-form-item label="工号：" prop="workID">
    497.                 <el-input size="mini" style="width: 150px" v-model="emp.workID" placeholder="请输入工号"
    498.                           prefix-icon="el-icon-edit" disabled>
    499.                 el-input>
    500.               el-form-item>
    501.             el-col>
    502.             <el-col :span="5">
    503.               <el-form-item label="学历：" prop="tiptopDegree">
    504.                 <el-select v-model="emp.tiptopDegree"
    505.                            placeholder="学历" size="mini" style="width: 150px">
    506.                   <el-option
    507.                       v-for="item in tiptopDegrees"
    508.                       :key="item"
    509.                       :label="item"
    510.                       :value="item">
    511.                   el-option>
    512.                 el-select>
    513.               el-form-item>
    514.             el-col>
    515.             <el-col :span="6">
    516.               <el-form-item label="毕业院校：" prop="school">
    517.                 <el-input size="mini" style="width: 150px" v-model="emp.school" placeholder="请输入毕业院校"
    518.                           prefix-icon="el-icon-edit">el-input>
    519.               el-form-item>
    520.             el-col>
    521.             <el-col :span="7">
    522.               <el-form-item label="专业名称：" prop="specialty">
    523.                 <el-input size="mini" style="width: 200px" v-model="emp.specialty" placeholder="请输入专业名称"
    524.                           prefix-icon="el-icon-edit">el-input>
    525.               el-form-item>
    526.             el-col>
    527.           el-row>
    528.           
    529.           <el-row>
    530.             <el-col :span="6">
    531.               <el-form-item label="入职日期：" prop="beginDate">
    532.                 <el-date-picker
    533.                     v-model="emp.beginDate"
    534.                     size="mini"
    535.                     type="date"
    536.                     value-format="yyyy-MM-dd"
    537.                     style="width: 130px"
    538.                     placeholder="入职日期">
    539.                 el-date-picker>
    540.               el-form-item>
    541.             el-col>
    542.             <el-col :span="6">
    543.               <el-form-item label="转正日期："
    544.                             prop="conversionTime">
    545.                 <el-date-picker
    546.                     v-model="emp.conversionTime"
    547.                     size="mini"
    548.                     type="date"
    549.                     value-format="yyyy-MM-dd"
    550.                     style="width: 130px"
    551.                     placeholder="转正日期">
    552.                 el-date-picker>
    553.               el-form-item>
    554.             el-col>
    555.             <el-col :span="6">
    556.               <el-form-item label="合同起始日期："
    557.                             prop="beginContract">
    558.                 <el-date-picker
    559.                     v-model="emp.beginContract"
    560.                     size="mini"
    561.                     type="date"
    562.                     value-format="yyyy-MM-dd"
    563.                     style="width: 130px"
    564.                     placeholder="合同起始日期">
    565.                 el-date-picker>
    566.               el-form-item>
    567.             el-col>
    568.             <el-col :span="6">
    569.               <el-form-item label="合同截止日期："
    570.                             prop="endContract">
    571.                 <el-date-picker
    572.                     v-model="emp.endContract"
    573.                     size="mini"
    574.                     type="date"
    575.                     value-format="yyyy-MM-dd"
    576.                     style="width: 130px"
    577.                     placeholder="合同截止日期">
    578.                 el-date-picker>
    579.               el-form-item>
    580.             el-col>
    581.           el-row>
    582.           
    583.           <el-row>
    584.             <el-col :span="8">
    585.               <el-form-item label="身份证号码：" prop="idCard">
    586.                 <el-input size="mini" style="width: 180px" v-model="emp.idCard" placeholder="请输入身份证号码"
    587.                           prefix-icon="el-icon-edit">el-input>
    588.               el-form-item>
    589.             el-col>
    590.             <el-col :span="8">
    591.               <el-form-item label="聘用形式：" prop="engageForm">
    592.                 <el-radio-group v-model="emp.engageForm" style="margin-top:8px">
    593.                   <el-radio label="劳动合同">劳动合同el-radio>
    594.                   <el-radio label="劳务合同">劳务合同el-radio>
    595.                 el-radio-group>
    596.               el-form-item>
    597.             el-col>
    598.             <el-col :span="8">
    599.               <el-form-item label="婚姻状况：" prop="wedlock">
    600.                 <el-radio-group v-model="emp.wedlock" style="margin-top:8px">
    601.                   <el-radio label="已婚">已婚el-radio>
    602.                   <el-radio label="未婚">未婚el-radio>
    603.                   <el-radio label="离异">离异el-radio>
    604.                 el-radio-group>
    605.               el-form-item>
    606.             el-col>
    607.           el-row>
    608.         el-form>
    609.       div>
    610.       <span slot="footer" class="dialog-footer">
    611.         <el-button @click="dialogVisible = false">取 消el-button>
    612.         <el-button type="primary" @click="doAddEmp">确 定el-button>
    613.       span>
    614.     el-dialog>
    615.   div>
    616. template>
    617.  
    618. <script>
    619. export default {
    620.   name: "EmpBasic",
    621.   data(){
    622.     return{
    623.       searchValue: {
    624.         politicId: null,
    625.         nationId: null,
    626.         jobLevelId: null,
    627.         posId: null,
    628.         engageForm: '',
    629.         departmentId: null,
    630.         beginDateScope: null
    631.       },
    632.       //员工数组
    633.       emps:[],
    634.       loading:false,
    635.       //总条数
    636.       total:0,
    637.       //当前页
    638.       currentPage:1,
    639.       size:10,
    640.       //员工名
    641.       empName:'',
    642.       //弹出框是否弹出默认是false
    643.       dialogVisible:false,
    644.       //民族
    645.       nations:[],
    646.       //职称
    647.       joblevels:[],
    648.       //政治面貌
    649.       politicsstatus:[],
    650.       //职位
    651.       positions:[],
    652.       //固定学历的下拉列表
    653.       tiptopDegrees: ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'],
    654.       //树形列表默认为不可见
    655.       visable:false,
    656.       visable2:false,
    657.       //树形列表的对应属性
    658.       defaultProps:{
    659.         children:'children',
    660.         label:'name'
    661.       },
    662.       //部门数据
    663.       allDeps:[],
    664.       //回显数据
    665.       inputDepName:'',
    666.       //弹出框标题
    667.       title:'',
    668.       importDataBtnText:'导入数据',
    669.       importDataBtnIcon:'el-icon-upload2',
    670.       //正在导入时的属性
    671.       importDataDisabled:false,
    672.       headers:{
    673.         Authorization:window.sessionStorage.getItem('tokenStr')
    674.       },
    675.       //高级搜索属性显示
    676.       showAdvanceSearchVisible:false,
    677.       //添加员工对象
    678.       emp: {
    679.         id:null,
    680.         name: '',
    681.         gender: '',
    682.         birthday: '',
    683.         idCard: '',
    684.         wedlock: '',
    685.         nationId: null,
    686.         nativePlace: '',
    687.         politicId: null,
    688.         email: '',
    689.         phone: '',
    690.         address: '',
    691.         departmentId: null,
    692.         jobLevelId: null,
    693.         posId: null,
    694.         engageForm: '',
    695.         tiptopDegree: '',
    696.         specialty: '',
    697.         school: '',
    698.         beginDate: '',
    699.         workID: '',
    700.         contractTerm: null,
    701.         conversionTime: '',
    702.         notWorkDate: '',
    703.         beginContract: '',
    704.         endContract: '',
    705.         workAge: null
    706.       },
    707.       rules: {
    708.         name: [{
    709.           required: true, message: '请输入员工姓名', trigger:
    710.               'blur'
    711.         }],
    712.         gender: [{
    713.           required: true, message: '请输入性别', trigger:
    714.               'blur'
    715.         }],
    716.         birthday: [{
    717.           required: true, message: '请输入出生日期',
    718.           trigger: 'blur'
    719.         }],
    720.         idCard: [{
    721.           required: true, message: '请输入身份证号码', trigger:
    722.               'blur'
    723.         }, {
    724.           pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
    725.           message: '身份证号码格式不正确',
    726.           trigger: 'blur'
    727.         }],
    728.         wedlock: [{
    729.           required: true, message: '请输入婚姻状况', trigger:
    730.               'blur'
    731.         }],
    732.         nationId: [{
    733.           required: true, message: '请输入民族', trigger:
    734.               'blur'
    735.         }],
    736.         nativePlace: [{
    737.           required: true, message: '请输入籍贯', trigger:
    738.               'blur'
    739.         }],
    740.         politicId: [{
    741.           required: true, message: '请输入政治面貌',
    742.           trigger: 'blur'
    743.         }],
    744.         email: [{
    745.           required: true, message: '请输入邮箱地址', trigger:
    746.               'blur'
    747.         }, {
    748.           type: 'email',
    749.           message: '邮箱格式不正确',
    750.           trigger: 'blur'
    751.         }],
    752.         phone: [{
    753.           required: true, message: '请输入电话号码', trigger:
    754.               'blur'
    755.         }],
    756.         address: [{
    757.           required: true, message: '请输入员工地址', trigger:
    758.               'blur'
    759.         }],
    760.         departmentId: [{
    761.           required: true, message: '请输入部门名称',
    762.           trigger: 'blur'
    763.         }],
    764.         jobLevelId: [{
    765.           required: true, message: '请输入职称', trigger:
    766.               'blur'
    767.         }],
    768.         posId: [{
    769.           required: true, message: '请输入职位', trigger:
    770.               'blur'
    771.         }],
    772.         engageForm: [{
    773.           required: true, message: '请输入聘用形式',
    774.           trigger: 'blur'
    775.         }],
    776.         tiptopDegree: [{
    777.           required: true, message: '请输入学历',
    778.           trigger: 'blur'
    779.         }],
    780.         specialty: [{
    781.           required: true, message: '请输入专业', trigger:
    782.               'blur'
    783.         }],
    784.         school: [{
    785.           required: true, message: '请输入毕业院校', trigger:
    786.               'blur'
    787.         }],
    788.         beginDate: [{
    789.           required: true, message: '请输入入职日期',
    790.           trigger: 'blur'
    791.         }],
    792.         workState: [{
    793.           required: true, message: '请输入工作状态',
    794.           trigger: 'blur'
    795.         }],
    796.         workID: [{
    797.           required: true, message: '请输入工号', trigger:
    798.               'blur'
    799.         }],
    800.         contractTerm: [{
    801.           required: true, message: '请输入合同期限',
    802.           trigger: 'blur'
    803.         }],
    804.         conversionTime: [{
    805.           required: true, message: '请输入转正日期',
    806.           trigger: 'blur'
    807.         }],
    808.         notWorkDate: [{
    809.           required: true, message: '请输入离职日期',
    810.           trigger: 'blur'
    811.         }],
    812.         beginContract: [{
    813.           required: true, message: '请输入合同起始日期',
    814.           trigger: 'blur'
    815.         }],
    816.         endContract: [{
    817.           required: true, message: '请输入合同结束日期',
    818.           trigger: 'blur'
    819.         }],
    820.         workAge: [{
    821.           required: true, message: '请输入工龄', trigger:
    822.               'blur'
    823.         }],
    824.       }
    825.     }
    826.   },
    827.   //当页面刚加载的时候调用initEmps方法调用后端接口，获取所有员工列表列表
    828.   mounted(){
    829.     this.initEmps();//获取员工列表
    830.     this.initData();//获取职位、民族等列表
    831.     this.initPositions();//获取职位
    832.   },
    833.   methods:{
    834.     //获取员工列表方法
    835.     initEmps(type) {
    836.       this.loading = true;
    837.       let url = '/employee/basic/?currentPage=' + this.currentPage + '&size=' + this.size;
    838.       if (type && type == 'advanced') {
    839.         if (this.searchValue.politicId) {
    840.           url += '&politicId=' + this.searchValue.politicId;
    841.         }
    842.         if (this.searchValue.nationId) {
    843.           url += '&nationId=' + this.searchValue.nationId;
    844.         }
    845.         if (this.searchValue.jobLevelId) {
    846.           url += '&jobLevelId=' + this.searchValue.jobLevelId;
    847.         }
    848.         if (this.searchValue.posId) {
    849.           url += '&posId=' + this.searchValue.posId
    850.         }
    851.         if (this.searchValue.engageForm) {
    852.           url += '&engageForm=' + this.searchValue.engageForm;
    853.         }
    854.         if (this.searchValue.departmentId) {
    855.           url += '&departmentId=' + this.searchValue.departmentId;
    856.         }
    857.         if (this.searchValue.beginDateScope) {
    858.           url += '&beginDateScope=' + this.searchValue.beginDateScope;
    859.         }
    860.       } else {
    861.         url += '&name=' + this.empName;
    862.       }
    863.       this.getRequest(url).then(resp => {
    864.         this.loading = false;
    865.         if (resp) {
    866.           this.emps = resp.data;
    867.           this.total = resp.total;
    868.         }
    869.       })
    870.     },
    871.     //每页条数改变时触发
    872.     sizeChange(currentSize) {
    873.       this.size = currentSize;
    874.       this.initEmps();
    875.     },
    876.     //当前页改变方法
    877.     currentChange(currentPage) {
    878.       this.currentPage = currentPage;
    879.       //当前也改变，之后调用列表方法
    880.       this.initEmps();
    881.     },
    882.     //显示弹出框方法
    883.     showAddEmpView() {
    884.       this.title = '添加员工';
    885.       //清空员工数据
    886.       this.emp = {
    887.         id: null,
    888.         name: '',
    889.         gender: '',
    890.         birthday: '',
    891.         idCard: '',
    892.         wedlock: '',
    893.         nationId: null,
    894.         nativePlace: '',
    895.         politicId: null,
    896.         email: '',
    897.         phone: '',
    898.         address: '',
    899.         departmentId: null,
    900.         jobLevelId: null,
    901.         posId: null,
    902.         engageForm: '',
    903.         tiptopDegree: '',
    904.         specialty: '',
    905.         school: '',
    906.         beginDate: '',
    907.         workID: '',
    908.         contractTerm: null,
    909.         conversionTime: '',
    910.         notWorkDate: '',
    911.         beginContract: '',
    912.         endContract: '',
    913.         workAge: null
    914.       }
    915.       //清空所处部门
    916.       this.inputDepName = '';
    917.       //显示弹出框
    918.       this.dialogVisible = true;
    919.       this.getMaxWorkID();
    920.       this.initPositions();
    921.     },
    922.     //获取去下拉框中的内容  获取职位、民族、职称等列表
    923.     initData() {
    924.       //首先判断sessionStorage里面有没有民族
    925.       if (!window.sessionStorage.getItem("nations")) {
    926.         this.getRequest('/employee/basic/nation').then(resp => {
    927.           if (resp) {
    928.             this.nations = resp;
    929.             //存入sessionStorage里面
    930.             window.sessionStorage.setItem("nations", JSON.stringify(resp));
    931.           }
    932.         })
    933.       } else {
    934.         //存在直接获取
    935.         this.nations = JSON.parse(window.sessionStorage.getItem("nations"))
    936.       }
    937.       //首先判断sessionStorage里面有没有职称
    938.       if (!window.sessionStorage.getItem("joblevels")) {
    939.         this.getRequest('/employee/basic/joblevel').then(resp => {
    940.           if (resp) {
    941.             this.joblevels = resp;
    942.             window.sessionStorage.setItem("joblevels", JSON.stringify(resp));
    943.           }
    944.         })
    945.       } else {
    946.         this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"))
    947.       }
    948.       //首先判断sessionStorage里面有没有政治面貌
    949.       if (!window.sessionStorage.getItem("politicsstatus")) {
    950.         this.getRequest('/employee/basic/politicsStatus').then(resp => {
    951.           if (resp) {
    952.             this.politicsstatus = resp;
    953.             window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp));
    954.           }
    955.         })
    956.       } else {
    957.         this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"))
    958.       }
    959.       //首先判断sessionStorage里面有没有部门
    960.       if (!window.sessionStorage.getItem("allDeps")) {
    961.         this.getRequest('/employee/basic/deps').then(resp => {
    962.           if (resp) {
    963.             this.allDeps = resp;
    964.             window.sessionStorage.setItem("allDeps", JSON.stringify(resp));
    965.           }
    966.         })
    967.       } else {
    968.         this.allDeps =
    969.             JSON.parse(window.sessionStorage.getItem("allDeps"))
    970.       }
    971.     },
    972.     //获取职位
    973.     initPositions() {
    974.       this.getRequest('/employee/basic/position').then(resp => {
    975.         if (resp) {
    976.           this.positions = resp;
    977.         }
    978.       })
    979.     },
    980.     //获取最大工号
    981.     getMaxWorkID() {
    982.       this.getRequest('/employee/basic/maxWorkID').then(resp => {
    983.         if (resp) {
    984.           this.emp.workID = resp.obj;
    985.         }
    986.       })
    987.     },
    988.     //显示部门按钮
    989.     showDepView() {
    990.       this.visable = !this.visable;
    991.     },
    992.     //关闭部门按钮
    993.     handleNodeClick(data) {
    994.       this.inputDepName = data.name;
    995.       this.emp.departmentId = data.id;
    996.       this.visable = !this.visable;
    997.     },
    998.     //添加员工方法
    999.     doAddEmp() {
    1000.       //判断是否有id，有id是更新
    1001.       if (this.emp.id) {
    1002.         //进行验证验证通过进行更新操作
    1003.         this.$refs['empForm'].validate(valid => {
    1004.           if (valid) {
    1005.             this.putRequest('/employee/basic/', this.emp).then(resp => {
    1006.               if (resp) {
    1007.                 //将弹出框隐藏
    1008.                 this.dialogVisible = false;
    1009.                 this.initEmps();
    1010.               }
    1011.             })
    1012.           }
    1013.         })
    1014.       } else {
    1015.         //进行验证验证通过进行添加操作
    1016.         this.$refs['empForm'].validate(valid => {
    1017.           if (valid) {
    1018.             this.postRequest('/employee/basic/', this.emp).then(resp => {
    1019.               if (resp) {
    1020.                 this.dialogVisible = false;
    1021.                 this.initEmps();
    1022.               }
    1023.             })
    1024.           }
    1025.         })
    1026.       }
    1027.     },
    1028.     //删除员工事件
    1029.     deleteEmp(data) {
    1030.       this.$confirm('此操作将永久删除该【' + data.name + '】, 是否继续?', '提示', {
    1031.         confirmButtonText: '确定',
    1032.         cancelButtonText: '取消',
    1033.         type: 'warning'
    1034.       }).then(() => {
    1035.         this.deleteRequest('/employee/basic/' + data.id).then(resp => {
    1036.           if (resp) {
    1037.             //删除完初始化数据
    1038.             this.initEmps();
    1039.           }
    1040.         });
    1041.       }).catch(() => {
    1042.         this.$message({
    1043.           type: 'info',
    1044.           message: '已取消删除'
    1045.         });
    1046.       });
    1047.     },
    1048.     //修改员工方法
    1049.     showEditEmpView(data) {
    1050.       this.title = '编辑员工';
    1051.       this.emp = data;//展示数据
    1052.       this.inputDepName = data.department.name;//展示所处部门
    1053.       this.initPositions();
    1054.       this.dialogVisible = true;//弹出框显示
    1055.     },
    1056.     //导出数据
    1057.     exportData() {
    1058.       this.downloadRequest('/employee/basic/export')
    1059.     },
    1060.     //导入数据的时的显示方法
    1061.     beforeUpload() {
    1062.       this.importDataBtnText = '正在导入';
    1063.       this.importDataBtnIcon = 'el-icon-loading';
    1064.       this.importDataDisabled = true;//正在导入时为true，禁用状态
    1065.     },
    1066.     //文件上传失败的钩子函数
    1067.     onError() {
    1068.       this.importDataBtnText = '导入数据';
    1069.       this.importDataBtnIcon = 'el-icon-upload2';
    1070.       this.importDataDisabled = false;//导入成功开启状态false
    1071.     },
    1072.     //文件上传成功的钩子函数
    1073.     onSuccess() {
    1074.       this.importDataBtnText = '导入数据';
    1075.       this.importDataBtnIcon = 'el-icon-upload2';
    1076.       this.importDataDisabled = false;
    1077.       this.initEmps();
    1078.     },
    1079.     //高级搜索框显示的方法
    1080.     showAdvanceSearchView() {
    1081.       this.showAdvanceSearchVisible = !this.showAdvanceSearchVisible;
    1082.       this.searchValue = {
    1083.         politicId: null,
    1084.         nationId: null,
    1085.         jobLevelId: null,
    1086.         posId: null,
    1087.         engageForm: '',
    1088.         departmentId: null,
    1089.         beginDateScope: null
    1090.       }
    1091.     },
    1092.     //高级搜索中的部门列表
    1093.     searchHandleNodeClick(data) {
    1094.       this.inputDepName = data.name;
    1095.       this.searchValue.departmentId = data.id;
    1096.       this.visable2 = !this.visable2;
    1097.     },
    1098.     //显示部门按钮2
    1099.     showDepView2() {
    1100.       this.visable2 = !this.visable2;
    1101.     },
    1102.   }
    1103. }
    1104. script>
    1105.  
    1106. <style scoped>
    1107.  
    1108. style>

     

     

  • 相关阅读:
    Selenium上传文件有多少种方式？不信你有我全
    LeetBook 刷题笔记：链表（三）
    电脑游戏录屏哪个好用免费？这2款录屏软件，用过都说好！
    程序员敲诈老板，或面临37年监禁
    AcWing 835. Trie字符串统计
    科目三:超车
    MySQL数据库：2、MySQL的下载与安装、基本使用、系统服务制作
    Mybatis的mapper.xml批量插入、修改sql
    git基础命令
    Docker 问题记录
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/126568597