Jtem-vue/src/views/modules/sys/user.vue

<template>
  <div class="mod-user">
    <el-form :inline="true" label-position="top" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-button @click="getDataList()" type="primary">查询</el-button>
        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true" label-position="top" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="用户账号">
        <el-input v-model="dataForm.userName" placeholder="用户账号" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="dataForm.userDisplay" placeholder="用户名" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      :height="height"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%;">
      <!--      <el-table-column-->
      <!--        type="selection"-->
      <!--        header-align="center"-->
      <!--        align="center"-->
      <!--        width="50">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="userId"-->
      <!--        header-align="center"-->
      <!--        align="center"-->
      <!--        width="80"-->
      <!--        label="ID">-->
      <!--      </el-table-column>-->
      <el-table-column
        prop="username"
        header-align="center"
        align="center"
        label="用户账号">
      </el-table-column>
      <el-table-column
        prop="site"
        header-align="center"
        align="center"
        width="80"
        label="工厂编号">
      </el-table-column>
      <el-table-column
        prop="userDisplay"
        header-align="center"
        align="center"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="email"
        header-align="center"
        align="center"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="mobile"
        header-align="center"
        align="center"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="状态">
        <template slot-scope="scope">
          <el-link v-if="scope.row.status === 0" type="success">禁用</el-link>
          <el-link v-else type="danger">正常</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        width="180"
        label="创建时间">
      </el-table-column>
      <el-table-column
        v-if="isAuth('sys:user:update') || isAuth('sys:user:workcenter') || isAuth('sys:user:delete')"
        fixed="left"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <a v-if="isAuth('sys:user:update')" type="text" size="small"
             @click="addOrUpdateHandle(scope.row.userId)">修改</a>
<!--          <a v-if="isAuth('sys:user:update')" type="text" size="small"-->
<!--             @click="accessSiteModal(scope.row)">工厂权限</a>-->
          <a v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200,500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <el-dialog title="工厂权限" :close-on-click-modal="false" v-drag :visible.sync="accessSiteFlag" width="800px">
      <div style="font-size: 12px">
        用户ID：<el-input v-model="userData.username" style="width: 120px"></el-input>
        用户姓名：<el-input v-model="userData.userDisplay" style="width: 120px"></el-input>
      </div>
      <el-container style="margin-top: -12px;">
        <el-main style="width: 300px">
          <span  style="font-size: 12px" >可选工厂：</span>
          <el-table
            height="300px"
            :data="SiteList1"
            border
            @row-click="clickSite1"
            highlight-current-row
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
              prop="siteID"
              header-align="center"
              align="left"
              min-width="110"
              label="工厂ID">
            </el-table-column>
            <el-table-column
              prop="siteName"
              header-align="center"
              align="left"
              min-width="170"
              label="工厂名称">
            </el-table-column>
          </el-table>
        </el-main>
        <el-main style="width: 100px">
          <div style="margin-top: 100px">
            <el-button type="primary" @click="addSite()">添加>></el-button>
          </div>
          <div style="margin-top: 20px">
            <el-button type="primary" @click="deleteSite()">删除<<</el-button>
          </div>
        </el-main>
        <el-main style="width: 300px">
          <span  style="font-size: 12px" >已选工厂：</span>
          <el-table
            height="300px"
            :data="SiteList2"
            border
            @row-click="clickSite2"
            highlight-current-row
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
              prop="siteID"
              header-align="center"
              align="left"
              min-width="110"
              label="工厂ID">
            </el-table-column>
            <el-table-column
              prop="siteName"
              header-align="center"
              align="left"
              min-width="170"
              label="工厂名称">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <!--      <el-footer  style="height:40px;margin-top: 20px;text-align:center">-->
      <!--        <el-button type="primary" @click="routingModelFlag = false">关闭</el-button>-->
      <!--      </el-footer>-->
    </el-dialog>

  </div>
</template>

<script>
  import AddOrUpdate from './user-add-or-update'

  import {debounce, throttle} from '../../../utils/common'
import {
    getUnSelectedSiteData,
    getAccessSiteData,
    addAccessSite,
    deleteAccessSite
  } from '@/api/base/site.js'

  export default {
    data () {
      return {
        showButton: true,
        height: 200,
        currentData: {},
        userId: this.$store.state.user.name,
        site: this.$store.state.user.site,
        transferData: [],
        checked: [],
        // 设置
        setUp: {
          reviewFlag: false,
          saveButton: false
        },
        dataForm: {
          userName: '',
          userDisplay: ''
        },
        columnList: [
          {
            userId: this.$store.state.user.name,
            serialNumber: 'security' + this.$route.meta.menuId + 'securitydesc',
            tableId: this.$route.meta.menuId + 'security',
            tableName: 'securityTable',
            columnProp: 'securitydesc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '参数描述',
            columnHidden: false,
            columnImage: false,
            columnWidth: 70,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: ''
          },
          {
            userId: this.$store.state.user.name,
            serialNumber: 'security' + this.$route.meta.menuId + 'securitydesc',
            tableId: this.$route.meta.menuId + 'security',
            tableName: 'securityTable',
            columnProp: 'module',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '模块',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 20,
            sortLv: 0,
            status: true,
            fixed: ''
          },
          {
            userId: this.$store.state.user.name,
            serialNumber: 'security' + this.$route.meta.menuId + 'securitydesc',
            tableId: this.$route.meta.menuId + 'security',
            tableName: 'securityTable',
            columnProp: 'itemvalue',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '参数值',
            columnHidden: true,
            columnImage: false,
            columnSortable: false,
            columnWidth: 10,
            sortLv: 0,
            status: true,
            fixed: ''
          }
        ],
        dataList: [],
        workCenterVisible: false,
        workCenterList: [],
        selectWorkCenterList: [],
        selectUser: {},
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        accessSiteFlag: false,
        SiteList1: [],
        SiteList2: [],
        SiteRow1: null,
        SiteRow2: null,
        userData: {
          username: '',
          userDisplay: ''
        }
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 220
      })
    },
    methods: {
      accessSiteModal (row) {
        let inData = {
          username: row.username
        }
        getUnSelectedSiteData(inData).then(({data}) => {
          this.SiteList1 = data.rows
        })
        getAccessSiteData(inData).then(({data}) => {
          this.SiteList2 = data.rows
        })
        this.userData.username = row.username
        this.userData.userDisplay = row.userDisplay
        this.accessSiteFlag = true
      },
      clickSite1 (row) {
        this.SiteRow1 = JSON.parse(JSON.stringify(row))
      },
      clickSite2 (row) {
        this.SiteRow2 = JSON.parse(JSON.stringify(row))
      },
      addSite () {
        if (this.SiteRow1 == null) {
          this.$alert('请选择可选工厂！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        let inSiteData = {
          site: this.SiteRow1.siteID,
          userID: this.userData.username
        }
        addAccessSite(inSiteData).then(({data}) => {
          let inData = {
            username: this.userData.username
          }
          getUnSelectedSiteData(inData).then(({data}) => {
            this.SiteList1 = data.rows
          })
          getAccessSiteData(inData).then(({data}) => {
            this.SiteList2 = data.rows
          })
          this.SiteRow1 = null
        })
      },
      deleteSite () {
        if (this.SiteRow2 == null) {
          this.$alert('请选择已选工厂！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        let inSiteData = {
          site: this.SiteRow2.siteID,
          userID: this.userData.username
        }
        deleteAccessSite(inSiteData).then(({data}) => {
          let inData = {
            username: this.userData.username
          }
          getUnSelectedSiteData(inData).then(({data}) => {
            this.SiteList1 = data.rows
          })
          getAccessSiteData(inData).then(({data}) => {
            this.SiteList2 = data.rows
          })
          this.SiteRow2 = null
        })
      },
      // 选中行
      handleCurrentChange (val) {
        this.selectUser = val
        this.showButton = false
      },

      // 保存用户加工中心
      saveUserWorkCenter () {

      },
      // 获取用户已授权的加工中心
      searchUserWorkCenterList () {

      },

      // 获取数据列表
      getDataList: throttle(function () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/user/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'username': this.dataForm.userName,
            'userDisplay': this.dataForm.userDisplay
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }, 1000),
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        var userIds = id ? [id] : this.dataListSelections.map(item => {
          return item.userId
        })
        this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/user/delete'),
            method: 'post',
            data: this.$http.adornData(userIds, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message.success('操作成功')
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {
        })
      }
    }
  }
</script>
<style>
  .el-transfer-panel {
    border: 2px solid #17b3a3;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 252px;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }

  .el-transfer-panel .el-transfer-panel__header {
    height: 40px;
    line-height: 40px;
    background: #17b3a3;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #17b3a3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
  }

  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
    color: #303133;
    font-weight: 400;
  }

  .el-dialog__title {
    line-height: 24px;
    font-size: 16px;
    color: #303133;
  }
</style>