FE-V2-PC/src/views/comprehensive/system/handheldEquipmentUsers/index.vue

<template>
  <div class="app-container handheldEquipmentUsers">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="关键字" prop="userName">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="姓名/工号/联系方式"
          clearable
          maxLength="30"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" @click="handleQuery">查询</p>
        <p class="reset-button-one" @click="resetQuery">重置</p>
      </el-form-item>
      <el-form-item style="float: right;">
        <p class="inquire-button-one" style="width:80px;margin-right:0!important;" @click="addButton">新增</p>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" border :data="dataList" >
      <el-table-column label="姓名" align="left" prop="nickName"/>
      <el-table-column label="工号" align="left" prop="userName"/>
      <el-table-column label="联系方式" align="left" prop="phonenumber"/>
      <el-table-column label="部门" align="left" prop="deptName"/>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <div class="table-button-box">
            <p class="table-button-null"></p>
            <p class="table-button-p"
               @click="delButton(scope.row)"
            >移除</p>
            <p class="table-button-null"></p>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination :page-sizes="[20, 30, 40, 50]"
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />
    <el-dialog class="handheldEquipmentUsersAddDialog" title='新增' @close="dialogOffButton"
               :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="dialogType" v-if="dialogType" width="600px">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
        <el-form-item label="用户" prop="safeUserId" class="form-item" label-width="100px">
          <el-select
            style="width:400px;"
            v-model="addForm.userIds"
            :multiple-limit="10"
            multiple
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请输入至少2个字符搜索相关人员"
            :remote-method="getUserList"
            :loading="loading">
            <el-option
              v-for="item in userOption"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <p class="dialog-footer-null"></p>
        <el-button @click="dialogOffButton">取 消</el-button>
        <el-button type="primary" @click="dialogSubmitButton">确 定</el-button>
        <p class="dialog-footer-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { selectUser,pdaUserList,pdaUser,pdaUserDel } from '@/api/trainingCourse/index'
  export default {
    name: 'handheldEquipmentUsers',
    data(){
      return{
        queryParams:{
          pageNum: 1,
          pageSize:20,
          searchValue: null,
        },
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        dataList:[],
        // 总条数
        total: 0,
        dialogType:false,
        addForm:{
          userIds:[]
        },
        userOption:[],
        rules:{
          userIds: [
            { required: true, message: "请选择用户", trigger: "change" },
          ],
        }
      }
    },
    created(){

    },
    mounted(){
      this.getList();
    },
    methods:{
      //获取人员列表
      getUserList(query){
        if(query.length > 1){
          this.loading = true;
          selectUser({userType:11,nickName:query}).then(response => {
            this.$set(this,'userOption',response.data)
            this.loading = false;
          });
        }
      },
      //弹窗开启
      addButton(){
        this.$set(this.addForm,'userIds','');
        this.$set(this,'dialogType',true);
      },
      //弹窗关闭
      dialogOffButton(){
        this.$set(this,'dialogType',false);
      },
      //弹窗提交
      dialogSubmitButton(){
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            pdaUser(this.addForm).then(response => {
              this.msgSuccess(response.msg);
              this.$set(this,'dialogType',false);
              this.getList();
            });
          }
        })
      },
      //查询
      handleQuery(){
        this.$set(this.queryParams,'pageNum',1)
        this.getList();
      },
      //重置
      resetQuery(){
        this.$set(this,'queryParams',{
          pageNum: 1,
          pageSize:20,
          searchValue: null,
        })
        this.getList();
      },
      //数据列表
      getList(){
        this.loading = true;
        pdaUserList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.rows)
          this.loading = false;
        });
      },
      //移除
      delButton(item){
        let self = this;
        this.$confirm('确定移除当用户?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          pdaUserDel(item.id).then(response => {
            self.msgSuccess(response.msg);
            self.getList();
          });
        }).then(() => {}).catch(() => {});
      },
    },
  }
</script>

<style scoped lang="scss">
  .handheldEquipmentUsers{
    padding:20px!important;
    flex:1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    .handheldEquipmentUsersAddDialog{
      .dialog-footer{
        display: flex;
        .dialog-footer-null{
          flex:1;
        }
      }
    }
  }
</style>