123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <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>
|