index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <div class="app-container handheldEquipmentUsers">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
  4. <el-form-item label="关键字" prop="userName">
  5. <el-input
  6. v-model="queryParams.searchValue"
  7. placeholder="姓名/工号/联系方式"
  8. clearable
  9. maxLength="30"
  10. size="small"
  11. />
  12. </el-form-item>
  13. <el-form-item>
  14. <p class="inquire-button-one" @click="handleQuery">查询</p>
  15. <p class="reset-button-one" @click="resetQuery">重置</p>
  16. </el-form-item>
  17. <el-form-item style="float: right;">
  18. <p class="inquire-button-one" style="width:80px;margin-right:0!important;" @click="addButton">新增</p>
  19. </el-form-item>
  20. </el-form>
  21. <el-table v-loading="loading" border :data="dataList" >
  22. <el-table-column label="姓名" align="left" prop="nickName"/>
  23. <el-table-column label="工号" align="left" prop="userName"/>
  24. <el-table-column label="联系方式" align="left" prop="phonenumber"/>
  25. <el-table-column label="部门" align="left" prop="deptName"/>
  26. <el-table-column label="操作" align="center" width="160">
  27. <template slot-scope="scope">
  28. <div class="table-button-box">
  29. <p class="table-button-null"></p>
  30. <p class="table-button-p"
  31. @click="delButton(scope.row)"
  32. >移除</p>
  33. <p class="table-button-null"></p>
  34. </div>
  35. </template>
  36. </el-table-column>
  37. </el-table>
  38. <pagination :page-sizes="[20, 30, 40, 50]"
  39. v-show="total>0"
  40. :total="total"
  41. :page.sync="queryParams.pageNum"
  42. :limit.sync="queryParams.pageSize"
  43. @pagination="getList"
  44. />
  45. <el-dialog class="handheldEquipmentUsersAddDialog" title='新增' @close="dialogOffButton"
  46. :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
  47. :visible.sync="dialogType" v-if="dialogType" width="600px">
  48. <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
  49. <el-form-item label="用户" prop="safeUserId" class="form-item" label-width="100px">
  50. <el-select
  51. style="width:400px;"
  52. v-model="addForm.userIds"
  53. :multiple-limit="10"
  54. multiple
  55. filterable
  56. remote
  57. clearable
  58. reserve-keyword
  59. placeholder="请输入至少2个字符搜索相关人员"
  60. :remote-method="getUserList"
  61. :loading="loading">
  62. <el-option
  63. v-for="item in userOption"
  64. :key="item.userId"
  65. :label="item.nickName"
  66. :value="item.userId">
  67. </el-option>
  68. </el-select>
  69. </el-form-item>
  70. </el-form>
  71. <div slot="footer" class="dialog-footer">
  72. <p class="dialog-footer-null"></p>
  73. <el-button @click="dialogOffButton">取 消</el-button>
  74. <el-button type="primary" @click="dialogSubmitButton">确 定</el-button>
  75. <p class="dialog-footer-null"></p>
  76. </div>
  77. </el-dialog>
  78. </div>
  79. </template>
  80. <script>
  81. import { selectUser,pdaUserList,pdaUser,pdaUserDel } from '@/api/trainingCourse/index'
  82. export default {
  83. name: 'handheldEquipmentUsers',
  84. data(){
  85. return{
  86. queryParams:{
  87. pageNum: 1,
  88. pageSize:20,
  89. searchValue: null,
  90. },
  91. // 遮罩层
  92. loading: false,
  93. // 显示搜索条件
  94. showSearch: true,
  95. dataList:[],
  96. // 总条数
  97. total: 0,
  98. dialogType:false,
  99. addForm:{
  100. userIds:[]
  101. },
  102. userOption:[],
  103. rules:{
  104. userIds: [
  105. { required: true, message: "请选择用户", trigger: "change" },
  106. ],
  107. }
  108. }
  109. },
  110. created(){
  111. },
  112. mounted(){
  113. this.getList();
  114. },
  115. methods:{
  116. //获取人员列表
  117. getUserList(query){
  118. if(query.length > 1){
  119. this.loading = true;
  120. selectUser({userType:11,nickName:query}).then(response => {
  121. this.$set(this,'userOption',response.data)
  122. this.loading = false;
  123. });
  124. }
  125. },
  126. //弹窗开启
  127. addButton(){
  128. this.$set(this.addForm,'userIds','');
  129. this.$set(this,'dialogType',true);
  130. },
  131. //弹窗关闭
  132. dialogOffButton(){
  133. this.$set(this,'dialogType',false);
  134. },
  135. //弹窗提交
  136. dialogSubmitButton(){
  137. this.$refs["addForm"].validate(valid => {
  138. if (valid) {
  139. pdaUser(this.addForm).then(response => {
  140. this.msgSuccess(response.msg);
  141. this.$set(this,'dialogType',false);
  142. this.getList();
  143. });
  144. }
  145. })
  146. },
  147. //查询
  148. handleQuery(){
  149. this.$set(this.queryParams,'pageNum',1)
  150. this.getList();
  151. },
  152. //重置
  153. resetQuery(){
  154. this.$set(this,'queryParams',{
  155. pageNum: 1,
  156. pageSize:20,
  157. searchValue: null,
  158. })
  159. this.getList();
  160. },
  161. //数据列表
  162. getList(){
  163. this.loading = true;
  164. pdaUserList(this.queryParams).then(response => {
  165. this.$set(this,'dataList',response.rows)
  166. this.loading = false;
  167. });
  168. },
  169. //移除
  170. delButton(item){
  171. let self = this;
  172. this.$confirm('确定移除当用户?', "警告", {
  173. confirmButtonText: "确定",
  174. cancelButtonText: "取消",
  175. type: "warning"
  176. }).then(function() {
  177. pdaUserDel(item.id).then(response => {
  178. self.msgSuccess(response.msg);
  179. self.getList();
  180. });
  181. }).then(() => {}).catch(() => {});
  182. },
  183. },
  184. }
  185. </script>
  186. <style scoped lang="scss">
  187. .handheldEquipmentUsers{
  188. padding:20px!important;
  189. flex:1;
  190. display: flex !important;
  191. flex-direction: column;
  192. overflow: hidden;
  193. .handheldEquipmentUsersAddDialog{
  194. .dialog-footer{
  195. display: flex;
  196. .dialog-footer-null{
  197. flex:1;
  198. }
  199. }
  200. }
  201. }
  202. </style>