image.png

    1. /**
    2.  * 系统管理  公司管理
    3.  */
    4. <template>
    5.   <div class="app-container">
    6.     <!-- 面包屑导航 -->
    7.     <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
    8.       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    9.       <el-breadcrumb-item>公司管理</el-breadcrumb-item>
    10.     </el-breadcrumb> -->
    11.     <!-- 搜索筛选 -->
    12.     <el-form :inline="true" :model="formInline" class="user-search">
    13.       <el-form-item label="搜索：">
    14.         <el-input size="small" v-model="formInline.deptName" placeholder="输入部门名称"></el-input>
    15.       </el-form-item>
    16.       <el-form-item label="">
    17.         <el-input size="small" v-model="formInline.deptNo" placeholder="输入部门代码"></el-input>
    18.       </el-form-item>
    19.       <el-form-item>
    20.         <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    21.         <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
    22.       </el-form-item>
    23.     </el-form>
    24.     <!--列表-->
    25.     <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
    26.       <el-table-column align="center" type="selection" width="60">
    27.       </el-table-column>
    28.       <el-table-column align="center" type="index" label="序号" width="60">
    29.       </el-table-column>
    30.       <el-table-column sortable prop="deptName" label="部门名称" width="300">
    31.       </el-table-column>
    32.       <el-table-column sortable prop="deptNo" label="部门代码" width="300">
    33.       </el-table-column>
    34.       <el-table-column sortable prop="editTime" label="修改时间" width="300">
    35.         <!-- <template slot-scope="scope">
    36.           <div>{{scope.row.editTime|timestampToTime}}</div>
    37.         </template> -->
    38.       </el-table-column>
    39.       <el-table-column sortable prop="editUser" label="修改人" width="300">
    40.       </el-table-column>
    41.       <el-table-column align="center" label="操作" min-width="300">
    42.         <template slot-scope="scope">
    43.           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    44.           <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
    45.         </template>
    46.       </el-table-column>
    47.     </el-table>
    48.     <!-- 分页组件 -->
    49.     <!-- <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination> -->
    50.     <pagination v-show="pageparm.total>0" :total="pageparm.total" :page.sync="pageparm.currentPage" :limit.sync="pageparm.pageSize" @pagination="getdata" />
    51.     <!-- 编辑界面 -->
    52.     <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
    53.       <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
    54.         <el-form-item label="部门名称" prop="deptName">
    55.           <el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入部门名称"></el-input>
    56.         </el-form-item>
    57.         <el-form-item label="部门代码" prop="deptNo">
    58.           <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入部门代码"></el-input>
    59.         </el-form-item>
    60.       </el-form>
    61.       <div slot="footer" class="dialog-footer">
    62.         <el-button size="small" @click="closeDialog">取消</el-button>
    63.         <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
    64.       </div>
    65.     </el-dialog>
    66.   </div>
    67. </template>
    69. <script>
    70. // import { deptList, deptSave, deptDelete } from '../../api/userMG'
    72. import Pagination from '@/components/Pagination'
    73. export default {
    74.   data() {
    75.     return {
    76.       nshow: true, //switch开启
    77.       fshow: false, //switch关闭
    78.       loading: false, //是显示加载
    79.       editFormVisible: false, //控制编辑页面显示与隐藏
    80.       title: '添加',
    81.       editForm: {
    82.         deptId: '',
    83.         deptName: '',
    84.         deptNo: '',
    85.         token: localStorage.getItem('logintoken')
    86.       },
    87.       // rules表单验证
    88.       rules: {
    89.         deptName: [
    90.           { required: true, message: '请输入部门名称', trigger: 'blur' }
    91.         ],
    92.         deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
    93.       },
    94.       formInline: {
    95.         page: 1,
    96.         limit: 10,
    97.         varLable: '',
    98.         varName: '',
    99.         token: localStorage.getItem('logintoken')
    100.       },
    101.       // 删除部门
    102.       seletedata: {
    103.         ids: '',
    104.         token: localStorage.getItem('logintoken')
    105.       },
    106.       userparm: [], //搜索权限
    107.       listData: [], //用户数据
    108.       // 分页参数
    109.       pageparm: {
    110.         currentPage: 1,
    111.         pageSize: 10,
    112.         total: 10
    113.       }
    114.     }
    115.   },
    116.   // 注册组件
    117.   components: {
    118.     Pagination
    119.   },
    120.   /**
    121.    * 数据发生改变
    122.    */
    124.   /**
    125.    * 创建完毕
    126.    */
    127.   created() {
    128.     this.getdata(this.formInline)
    129.   },
    131.   /**
    132.    * 里面的方法只有被调用才会执行
    133.    */
    134.   methods: {
    135.     // 获取公司列表
    136.     getdata(parameter) {
    137.       this.loading = true
    138.       // 模拟数据
    139.       let res = {
    140.         code: 0,
    141.         msg: null,
    142.         count: 5,
    143.         data: [
    144.           {
    145.             addUser: null,
    146.             editUser: null,
    147.             addTime: 1521062371000,
    148.             editTime: 1526700200000,
    149.             deptId: 2,
    150.             deptName: '上海分公司',
    151.             deptNo: '1',
    152.             parentId: 1
    153.           },
    154.           {
    155.             addUser: null,
    156.             editUser: null,
    157.             addTime: 1521063247000,
    158.             editTime: 1526652291000,
    159.             deptId: 3,
    160.             deptName: '上海测试',
    161.             deptNo: '02',
    162.             parentId: 1
    163.           },
    164.           {
    165.             addUser: null,
    166.             editUser: null,
    167.             addTime: 1526349555000,
    168.             editTime: 1526349565000,
    169.             deptId: 12,
    170.             deptName: '1',
    171.             deptNo: '11',
    172.             parentId: 1
    173.           },
    174.           {
    175.             addUser: null,
    176.             editUser: null,
    177.             addTime: 1526373178000,
    178.             editTime: 1526373178000,
    179.             deptId: 13,
    180.             deptName: '5',
    181.             deptNo: '5',
    182.             parentId: 1
    183.           },
    184.           {
    185.             addUser: null,
    186.             editUser: null,
    187.             addTime: 1526453107000,
    188.             editTime: 1526453107000,
    189.             deptId: 17,
    190.             deptName: 'v',
    191.             deptNo: 'v',
    192.             parentId: 1
    193.           }
    194.         ]
    195.       }
    196.       this.loading = false
    197.       this.listData = res.data
    198.       // 分页赋值
    199.       this.pageparm.currentPage = this.formInline.page
    200.       this.pageparm.pageSize = this.formInline.limit
    201.       this.pageparm.total = res.count
    202.       // 模拟数据结束
    204.       /***
    205.        * 调用接口，注释上面模拟数据 取消下面注释
    206.        */
    207.       // deptList(parameter)
    208.       //   .then(res => {
    209.       //     this.loading = false
    210.       //     if (res.success == false) {
    211.       //       this.$message({
    212.       //         type: 'info',
    213.       //         message: res.msg
    214.       //       })
    215.       //     } else {
    216.       //       this.listData = res.data
    217.       //       // 分页赋值
    218.       //       this.pageparm.currentPage = this.formInline.page
    219.       //       this.pageparm.pageSize = this.formInline.limit
    220.       //       this.pageparm.total = res.count
    221.       //     }
    222.       //   })
    223.       //   .catch(err => {
    224.       //     this.loading = false
    225.       //     this.$message.error('菜单加载失败，请稍后再试！')
    226.       //   })
    227.     },
    228.     // 分页插件事件
    229.     callFather(parm) {
    230.       this.formInline.page = parm.currentPage
    231.       this.formInline.limit = parm.pageSize
    232.       this.getdata(this.formInline)
    233.     },
    234.     // 搜索事件
    235.     search() {
    236.       this.getdata(this.formInline)
    237.     },
    238.     //显示编辑界面
    239.     handleEdit: function(index, row) {
    240.       this.editFormVisible = true
    241.       if (row != undefined && row != 'undefined') {
    242.         this.title = '修改'
    243.         this.editForm.deptId = row.deptId
    244.         this.editForm.deptName = row.deptName
    245.         this.editForm.deptNo = row.deptNo
    246.       } else {
    247.         this.title = '添加'
    248.         this.editForm.deptId = ''
    249.         this.editForm.deptName = ''
    250.         this.editForm.deptNo = ''
    251.       }
    252.     },
    253.     // 编辑、增加页面保存方法
    254.     submitForm(editData) {
    255.       this.$refs[editData].validate(valid => {
    256.         if (valid) {
    257.           deptSave(this.editForm)
    258.             .then(res => {
    259.               this.editFormVisible = false
    260.               this.loading = false
    261.               if (res.success) {
    262.                 this.getdata(this.formInline)
    263.                 this.$message({
    264.                   type: 'success',
    265.                   message: '公司保存成功！'
    266.                 })
    267.               } else {
    268.                 this.$message({
    269.                   type: 'info',
    270.                   message: res.msg
    271.                 })
    272.               }
    273.             })
    274.             .catch(err => {
    275.               this.editFormVisible = false
    276.               this.loading = false
    277.               this.$message.error('公司保存失败，请稍后再试！')
    278.             })
    279.         } else {
    280.           return false
    281.         }
    282.       })
    283.     },
    284.     // 删除公司
    285.     deleteUser(index, row) {
    286.       this.$confirm('确定要删除吗?', '信息', {
    287.         confirmButtonText: '确定',
    288.         cancelButtonText: '取消',
    289.         type: 'warning'
    290.       })
    291.         .then(() => {
    292.           deptDelete(row.deptId)
    293.             .then(res => {
    294.               if (res.success) {
    295.                 this.$message({
    296.                   type: 'success',
    297.                   message: '公司已删除!'
    298.                 })
    299.                 this.getdata(this.formInline)
    300.               } else {
    301.                 this.$message({
    302.                   type: 'info',
    303.                   message: res.msg
    304.                 })
    305.               }
    306.             })
    307.             .catch(err => {
    308.               this.loading = false
    309.               this.$message.error('公司删除失败，请稍后再试！')
    310.             })
    311.         })
    312.         .catch(() => {
    313.           this.$message({
    314.             type: 'info',
    315.             message: '已取消删除'
    316.           })
    317.         })
    318.     },
    319.     // 关闭编辑、增加弹出框
    320.     closeDialog() {
    321.       this.editFormVisible = false
    322.     }
    323.   }
    324. }
    325. </script>
    327. <style scoped>
    328. .user-search {
    329.   margin-top: 20px;
    330. }
    331. .userRole {
    332.   width: 100%;
    333. }
    334. </style>