addPage.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div class="addPage">
  3. <div class="title-box">
  4. <p>门禁授权申请</p>
  5. <!--<p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>-->
  6. </div>
  7. <el-form ref="form" :model="form" :rules="addRules" label-width="200px">
  8. <el-form-item label="实验室:" prop="subjectId" class="selsectbox"
  9. style="display: inline-block">
  10. <el-select
  11. style="width:500px;"
  12. @change="userChange"
  13. v-model="form.subjectId"
  14. filterable
  15. placeholder="搜索选择实验室"
  16. remote
  17. :remote-method="userSelectList"
  18. :loading="loading">
  19. <el-option
  20. v-for="item in optionsUser"
  21. :key="item.id"
  22. :label="item.name"
  23. :value="item.id">
  24. </el-option>
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item label="共同申请人:" prop="userId2" class="selsectbox"
  28. style="display: inline-block">
  29. <el-select
  30. style="width:500px;"
  31. @change="userChangeOne"
  32. v-model="form.userId2"
  33. filterable
  34. placeholder="搜索选择学院"
  35. remote
  36. :remote-method="userSelectListOne"
  37. :loading="loading">
  38. <el-option
  39. v-for="item in optionsUserOne"
  40. :key="item.userId"
  41. :label="item.nickName"
  42. :value="item.userId">
  43. {{item.nickName}}-{{item.userName}}
  44. </el-option>
  45. </el-select>
  46. </el-form-item>
  47. <el-form-item label="位置:" prop="laboratoryId">
  48. <p style="line-height:40px;color:#666;">{{text?text:'请选择实验室'}}</p>
  49. </el-form-item>
  50. <el-form-item label="安全责任人:" prop="laboratoryId">
  51. <!--<p style="line-height:40px;">{{name?name:'请选择实验室'}}</p>-->
  52. <p style="line-height:40px;color:#666;" v-if="!nameList[0]">请选择实验室</p>
  53. <p style="line-height:40px;color:#666;" v-if="nameList[0]"><span v-for="(item,index) in nameList">{{index!=0?','+item:item}}</span></p>
  54. </el-form-item>
  55. </el-form>
  56. <div class="bottom-button-box">
  57. <p class="reset-button-one" @click="backPage">取消</p>
  58. <p class="inquire-button-one" @click="upData">提交</p>
  59. </div>
  60. </div>
  61. </template>
  62. <script>
  63. import { subjectList,selectUserListByName } from "@/api/laboratory/approval";
  64. import { subjectVo } from "@/api/laboratory/subject";
  65. import { openDoorApply } from "@/api/studentApi/accessAuthorization/index";
  66. export default {
  67. name: "addPage",
  68. data(){
  69. return{
  70. loading:false,
  71. form:{},
  72. addRules:{
  73. subjectId: [
  74. { required: true, message: "请选择实验室", trigger: "blur" }
  75. ],
  76. userId2: [
  77. { required: true, message: "请选择共同申请人", trigger: "blur" },
  78. ],
  79. },
  80. optionsUser:[],
  81. optionsUserOne:[],
  82. subjectOptions:[],
  83. text:"",
  84. nameList:"",
  85. newObj:{},
  86. }
  87. },
  88. created() {
  89. },
  90. mounted(){
  91. },
  92. methods:{
  93. //实验室获取
  94. userSelectList(query){
  95. if (query !== '' && query.length>1) {
  96. this.loading = true;
  97. let obj = {
  98. name : query
  99. };
  100. subjectList(obj).then(response => {
  101. this.optionsUser = response.data;
  102. this.loading = false;
  103. });
  104. } else {
  105. this.optionsUser = [];
  106. }
  107. },
  108. //人员获取
  109. userSelectListOne(query){
  110. if (query !== '' && query.length>1) {
  111. this.loading = true;
  112. let obj = {
  113. nickName : query,
  114. userType : 22
  115. };
  116. selectUserListByName(obj).then(response => {
  117. this.optionsUserOne = response.data;
  118. this.loading = false;
  119. });
  120. } else {
  121. this.optionsUserOne = [];
  122. }
  123. },
  124. //实验室选中
  125. userChange(data){
  126. let self = this;
  127. subjectVo(data,0).then(response => {
  128. this.text = response.data.deptName + '-' + response.data.buildName + '-' + response.data.floorName +'-'+ response.data.roomName
  129. let list = response.data.safeUserNames.split(',');
  130. this.$set(this,'nameList',list);
  131. this.$set(this.newObj,'position',response.data.buildName + '-' + response.data.floorName +'-'+ response.data.roomName);
  132. this.$set(this.newObj,'college',response.data.deptName);
  133. this.$set(this.newObj,'subjectName',response.data.name);
  134. this.$set(this.newObj,'subjectId',response.data.id);
  135. this.$set(this.newObj,'safeUserName',response.data.safeUserName);
  136. this.$set(this.newObj,'safeUserId',response.data.safeUserId);
  137. });
  138. },
  139. //人员选中
  140. userChangeOne(data){
  141. this.$set(this.newObj,'userId2',data);
  142. },
  143. upData(){
  144. let self = this;
  145. this.$refs["form"].validate(valid => {
  146. if (valid) {
  147. this.$confirm('确认要提交吗?', "警告", {
  148. confirmButtonText: "确定",
  149. cancelButtonText: "取消",
  150. type: "warning"
  151. }).then(() => {
  152. openDoorApply(self.newObj).then(response => {
  153. self.msgSuccess(response.msg);
  154. self.$parent.goPageButton(3);
  155. });
  156. }).catch(function() {
  157. // 取消
  158. });
  159. }
  160. });
  161. },
  162. //返回
  163. backPage(){
  164. this.$parent.goPageButton(1);
  165. },
  166. }
  167. }
  168. </script>
  169. <style scoped lang="scss">
  170. .addPage{
  171. flex:1;
  172. display: flex;
  173. flex-direction: column;
  174. overflow: hidden;
  175. p{
  176. margin:0;
  177. padding:0;
  178. }
  179. .title-box{
  180. display: flex;
  181. height:90px;
  182. border-bottom: 1px solid #D8D8D8;
  183. margin-bottom:40px;
  184. p:nth-child(1){
  185. flex:1;
  186. font-size:16px;
  187. line-height:90px;
  188. margin-left:18px;
  189. color:#0045AF;
  190. }
  191. p:nth-child(2){
  192. margin:25px 25px 0 0;
  193. }
  194. }
  195. .bottom-button-box{
  196. display: flex;
  197. margin:200px auto 40px;
  198. p:nth-child(1){
  199. margin-right:20px;
  200. width:90px;
  201. }
  202. p:nth-child(2){
  203. width:90px;
  204. }
  205. }
  206. }
  207. </style>
  208. <style>
  209. /*//替换左边默认图标*/
  210. .selsectbox .el-select .el-input .el-select__caret:after {
  211. background: url(../../../assets/ZDimages/icon_001.png) no-repeat center center; /*引入icon*/
  212. transform:rotate(180deg);
  213. background-size: 20px 20px; /*这个是图片的大小,在这里不能直接设置width height,设置宽高其实是select的宽高,图片可能会失真只设置宽度 高度auto也行*/
  214. padding: 0 0 0 26px; /*需要设置padding 把placeholder向右移*/
  215. box-sizing: border-box;
  216. font-size: 14px;
  217. }
  218. </style>