复选框分页记录状态
时间:2021-08-02
本文章向大家介绍复选框分页记录状态,主要包括复选框分页记录状态使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<template> <div class="edit-container"> <fd-row class="edit-content"> <fd-form :model="genRoleMatchModel" status-icon :rules="rules" ref="genRoleMatchModel" label-width="150px" > <fd-col :span="12"> <fd-form-item :label="this.$ls('lbl_role_name')" prop="roleName"> <fd-input v-model.trim="genRoleMatchModel.roleName" :placeholder="this.$l('lbl_role_name')" :disabled="disabledInput" ></fd-input> </fd-form-item> </fd-col> <fd-col :span="12"> <fd-form-item :label="this.$ls('lbl_role_code')" prop="roleCode"> <fd-input v-model.trim="genRoleMatchModel.roleCode" :placeholder="this.$l('lbl_role_code')" :disabled="disabledInput" ></fd-input> </fd-form-item> </fd-col> <fd-col :span="12"> <fd-form-item :label="this.$ls('pf_lbl_role_limit')" prop="roleLimit"> <fd-dict-select v-model="genRoleMatchModel.roleLimit" :options="$getDictionaryListByType('pf_role_limit')" :placeholder="this.$l('pf_lbl_role_limit')" :disabled="disabledInput" > </fd-dict-select> </fd-form-item> </fd-col> <fd-col :span="24"> <fd-form-item :label="this.$ls('lbl_remark')" prop="remark"> <fd-input type="textarea" v-model="genRoleMatchModel.remark" :placeholder="this.$l('lbl_remark')" :disabled="disabledInput" ></fd-input> </fd-form-item> </fd-col> <fd-col :span="24"> <fd-form-item :label="this.$ls('pf_lbl_users')" prop="users"> <!--<fd-input--> <!--@focus="dialogVisible = true"--> <!--v-model="genRoleMatchModel.userNames"--> <!--:placeholder="this.$l('pf_lbl_users')"--> <!--></fd-input>--> <el-tag v-for="tag in genRoleMatchModel.userModelList" :key="tag.id" closable :disable-transitions="false" @close="handleClose(tag)" > {{ tag.nickName }}({{ tag.username }}) </el-tag> <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" > </el-input> <el-button v-else class="button-new-tag" size="small" @click="showInput" >{{ this.$l('lbl_choose_employee') }}</el-button > </fd-form-item> </fd-col> </fd-form> </fd-row> <div :span="24" class="detail-button-box"> <fd-button type="primary" @click="onSubmit('genRoleMatchModel')" v-bind:disabled="disInput" >{{ this.$l('btn_save') }}</fd-button > <fd-button @click="cancel">{{ this.$l('btn_back') }}</fd-button> </div> <!--对话框--> <fd-dialog class="dialog" top="3%" :title="$l('lbl_user_select')" :visible.sync="dialogVisible" @open="openDialog" @close="refesh" width="88%" > <fd-search-form class="table-search"> <template slot="buttons"> <fd-button type="primary" @click="bindRoleUser"> {{ $l('btn_save') }} </fd-button> </template> <template slot="buttons"> </template> <template slot="form"> <fd-row> <fd-col :span="6"> <fd-form-item :label="this.$ls('lbl_userName')"> <fd-input v-model.trim="userSearchModel.username" :placeholder="$l('lbl_userName')" :maxlength="20" clearable ></fd-input> </fd-form-item> </fd-col> <fd-col :span="6"> <fd-form-item :label="this.$ls('lbl_nickName')"> <fd-input v-model.trim="userSearchModel.nickName" :maxlength="20" :placeholder="$l('lbl_nickName')" clearable ></fd-input> </fd-form-item> </fd-col> <fd-col :span="3"> <fd-form-item> </fd-form-item> </fd-col> <fd-col :span="9" class="search-btn"> <fd-form-item> <fd-button type="info" @click="searchDialog">{{ $l('btn_search') }}</fd-button> <fd-button @click="resetDialog">{{ $l('btn_reset') }}</fd-button> </fd-form-item> </fd-col> <fd-col :span="6"> </fd-col> </fd-row> </template> </fd-search-form> <div class="dialog-table" ref="addUsersToRoleTable"> <fd-table :data="tableData" height="250" stripe ref="multipleTable" border style="width:100%;" @selection-change="handleSelectionChange" > <fd-table-column type="selection" width="55"> </fd-table-column> <fd-table-column prop="username" :label="this.$l('lbl_userName')" ></fd-table-column> <fd-table-column prop="nickName" :label="this.$l('lbl_nickName')" ></fd-table-column> <fd-table-column prop="email" :label="this.$l('lbl_email')" width="200" ></fd-table-column> <fd-table-column prop="mobile" :label="this.$l('lbl_mobile')" ></fd-table-column> <fd-table-column :label="this.$l('lbl_status')"> <template slot-scope="scope"> <fd-dict-label :value="$getDictionaryLabel('sys_status', scope.row.status)" ></fd-dict-label> </template> </fd-table-column> </fd-table> <div class="pagination_bar"> <fd-pagebar @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="userSearchModel.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="userSearchModel.pageSize" layout="sizes, prev, pager, next, jumper" :total="userSearchModel.count" > </fd-pagebar> </div> </div> </fd-dialog> </div> </template> <script> import { getUsersByOrgCodeOrProjectCodeAndRoleCode, updateUsersByOrgCodeOrProjectCodeAndRoleCode, getGenUserList } from '@/common/api/sys/genroleMatchAPI'; import { ptn } from '@/common/utils/common/validate'; //混入 // import { basePage } from '@/common/mixins/index'; export default { // mixins: [basePage], data() { return { inputVisible: false, inputValue: '', genRoleMatchModel: { id: '', roleCode: '', roleName: '', roleLimit: '', remark: '', userNames: '', version: '', userModelList: [] }, userSearchModel: { username: '', nickName: '', count: 0, pageNum: 1, pageSize: 20, sortBy: '', order: -1 }, tableData: [], usernames: '', dialogVisible: false, multipleSelection: [], //别选中的记录数据 selectedCode: [], //别选中的记录数据 selected: [], oldUserList: [], //原来的人员信息 disInput: false, disabledInput: false, rules: { roleCode: [ { pattern: ptn.en_num_line(1, 20), message: this.$l('msg_role_code'), required: true, trigger: 'blur' } ], roleName: [ { pattern: ptn.all_match(1, 20), message: this.$l('msg_role_name'), required: true, trigger: 'blur' } ], roleLimit: [ { pattern: ptn.all_match(1, 20), message: this.$l('msg_role_limit'), required: true, trigger: 'blur' } ] } }; }, watch: { // multipleSelection: function() { // // this.selected = []; // console.log(this.selected,this.multipleSelection) // for (const i in this.multipleSelection) { // let flag = false; // for (const j in this.selected) { // if (this.selected[j].username == this.multipleSelection[i].username) { // flag = true; // } // } // if (!flag) { // this.selected.push(this.multipleSelection[i]); // } // } // } }, mounted: function() { this.getDetail(); }, methods: { handleClose(tag) { this.genRoleMatchModel.userModelList.splice( this.genRoleMatchModel.userModelList.indexOf(tag), 1 ); }, showInput() { this.dialogVisible = true; }, handleInputConfirm() { this.genRoleMatchModel.userModelList.push(this.inputValue); }, handleSelectionChange(val) { let copyUserModelList = JSON.parse( sessionStorage.getItem('userModelList') ); //先将当前页选中的元素清空 this.tableData.forEach(el => { copyUserModelList.forEach((dl, i) => { if (el.id === dl.id) { copyUserModelList.splice(i, 1); } }); }); this.multipleSelection = val; let userModelList = copyUserModelList.concat(val); let newJson = []; //去重 for (let item1 of userModelList) { let flag = true; for (let item2 of newJson) { if (item1.id == item2.id) { flag = false; } } if (flag) { newJson.push(item1); } } this.genRoleMatchModel.userModelList = userModelList = newJson; sessionStorage.setItem( 'userModelList', JSON.stringify(this.genRoleMatchModel.userModelList) ); }, bindRoleUser() { this.dialogVisible = false; }, saveRoleUser() { this.genRoleMatchModel.userModelList.forEach(li => { this.selectedCode.push(li.username); }); const body = { roleCode: this.$route.query.roleCode, projectCode: this.$route.query.projectCode, orgCode: this.$route.query.orgCode, userList: this.selectedCode }; updateUsersByOrgCodeOrProjectCodeAndRoleCode(body) .then(response => { // this.$showSuccess(response.message); // this.getDetail(); }) .catch(error => { console.log(error); }); }, refesh() { sessionStorage.removeItem('userModelList'); }, handleCurrentChange(val) { this.userSearchModel.pageNum = val; this.getList(); }, handleSizeChange(val) { this.userSearchModel.pageSize = val; this.getList(); }, openDialog() { sessionStorage.setItem( 'userModelList', JSON.stringify(this.genRoleMatchModel.userModelList) ); this.resetDialog(); this.getList(); }, resetDialog() { this.$reset(this.userSearchModel); }, getList() { getGenUserList(this.userSearchModel) .then(response => { this.tableData = response.data.content; let userModelList = JSON.parse( sessionStorage.getItem('userModelList') ); this.userSearchModel.count = response.data.totalElements; this.tableData.forEach(row => { userModelList.forEach(o => { if (row.username == o.username) { this.$nextTick(() => { this.$refs.multipleTable.toggleRowSelection(row); }, 1000); } }); }); this.userSearchModel.count = response.data.totalElements; }) .catch(error => { console.log(error); }); }, initVMDialog() { this.userSearchModel.pageNum = 1; }, searchDialog() { this.initVMDialog(); this.getList(); }, getDetail() { let genRoleMatchQueryModel = { roleCode: '', orgCode: '', projectCode: '' }; //角色编码 genRoleMatchQueryModel.roleCode = this.$route.query.roleCode ? this.$route.query.roleCode : ''; //项目编码 genRoleMatchQueryModel.orgCode = this.$route.query.orgCode ? this.$route.query.orgCode : ''; //组织编码 genRoleMatchQueryModel.projectCode = this.$route.query.projectCode ? this.$route.query.projectCode : ''; if ( (genRoleMatchQueryModel.roleCode !== '' && genRoleMatchQueryModel.orgCode !== '') || (genRoleMatchQueryModel !== '' && genRoleMatchQueryModel !== '') ) { this.disabledInput = true; getUsersByOrgCodeOrProjectCodeAndRoleCode(genRoleMatchQueryModel) .then(response => { if (response.code === '2000') { this.genRoleMatchModel = response.data; console.log(response.data); console.log(this.genRoleMatchModel); this.oldUserList = response.data.userModelList; } else { this.$showError(response.message); } }) .catch(error => { console.log(error); }); } }, onSubmit(formName) { if (!this.$validateRule(this.$refs[formName])) { return; } this.disInput = true; // TODO let genRoleMatchQueryModel = { roleCode: '', orgCode: '', projectCode: '' }; //角色编码 genRoleMatchQueryModel.roleCode = this.$route.query.roleCode ? this.$route.query.roleCode : ''; //项目编码 genRoleMatchQueryModel.orgCode = this.$route.query.orgCode ? this.$route.query.orgCode : ''; //组织编码 genRoleMatchQueryModel.projectCode = this.$route.query.projectCode ? this.$route.query.projectCode : ''; //人员信息 genRoleMatchQueryModel.userList = []; updateUsersByOrgCodeOrProjectCodeAndRoleCode(genRoleMatchQueryModel) .then(response => { if (response.code === '2000') { this.saveRoleUser(); // this.requeryPageWithParam('GenRoleMatchList'); //刷新页面 this.$router.go(-1); this.$showSuccess(response.message); } else { this.$showError(response.message); } }) .catch(error => { this.disInput = false; this.$showError(error.message); }); }, cancel() { // this.returnPage('GenRoleMatchList'); this.$router.go(-1); } } }; </script> <style scoped> @import '~@/common/styles/detail.scss'; </style>
代码搬运工
原文地址:https://www.cnblogs.com/tw6668/p/15090983.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python如何输出反斜杠
- 在Laravel5中正确设置文件权限的方法
- asp函数split()对应php函数explode()
- php获取目录下所有文件及目录(多种方法)(推荐)
- Python基于Twilio及腾讯云实现国际国内短信接口
- PHP __call()方法实现委托示例
- PHP中rename()函数的妙用讲解
- php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
- php实现小程序支付完整版
- Yii2框架视图(View)操作及Layout的使用方法分析
- php实现单笔转账到支付宝功能
- PHP使用Redis实现Session共享的实现示例
- windows10在visual studio2019下配置使用openCV4.3.0
- PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
- Python爬虫爬取新闻资讯案例详解