123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <template>
- <div class="addPage">
- <div class="title-box">
- <p>门禁授权申请</p>
- <!--<p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>-->
- </div>
- <el-form ref="form" :model="form" :rules="addRules" label-width="200px">
- <el-form-item label="实验室:" prop="subjectId" class="selsectbox"
- style="display: inline-block">
- <el-select
- style="width:500px;"
- @change="userChange"
- v-model="form.subjectId"
- filterable
- placeholder="搜索选择实验室"
- remote
- :remote-method="userSelectList"
- :loading="loading">
- <el-option
- v-for="item in optionsUser"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="共同申请人:" prop="userId2" class="selsectbox"
- style="display: inline-block">
- <el-select
- style="width:500px;"
- @change="userChangeOne"
- v-model="form.userId2"
- filterable
- placeholder="搜索选择学院"
- remote
- :remote-method="userSelectListOne"
- :loading="loading">
- <el-option
- v-for="item in optionsUserOne"
- :key="item.userId"
- :label="item.nickName"
- :value="item.userId">
- {{item.nickName}}-{{item.userName}}
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="位置:" prop="laboratoryId">
- <p style="line-height:40px;color:#666;">{{text?text:'请选择实验室'}}</p>
- </el-form-item>
- <el-form-item label="安全责任人:" prop="laboratoryId">
- <!--<p style="line-height:40px;">{{name?name:'请选择实验室'}}</p>-->
- <p style="line-height:40px;color:#666;" v-if="!nameList[0]">请选择实验室</p>
- <p style="line-height:40px;color:#666;" v-if="nameList[0]"><span v-for="(item,index) in nameList">{{index!=0?','+item:item}}</span></p>
- </el-form-item>
- </el-form>
- <div class="bottom-button-box">
- <p class="reset-button-one" @click="backPage">取消</p>
- <p class="inquire-button-one" @click="upData">提交</p>
- </div>
- </div>
- </template>
- <script>
- import { subjectList,selectUserListByName } from "@/api/laboratory/approval";
- import { subjectVo } from "@/api/laboratory/subject";
- import { openDoorApply } from "@/api/studentApi/accessAuthorization/index";
- export default {
- name: "addPage",
- data(){
- return{
- loading:false,
- form:{},
- addRules:{
- subjectId: [
- { required: true, message: "请选择实验室", trigger: "blur" }
- ],
- userId2: [
- { required: true, message: "请选择共同申请人", trigger: "blur" },
- ],
- },
- optionsUser:[],
- optionsUserOne:[],
- subjectOptions:[],
- text:"",
- nameList:"",
- newObj:{},
- }
- },
- created() {
- },
- mounted(){
- },
- methods:{
- //实验室获取
- userSelectList(query){
- if (query !== '' && query.length>1) {
- this.loading = true;
- let obj = {
- name : query
- };
- subjectList(obj).then(response => {
- this.optionsUser = response.data;
- this.loading = false;
- });
- } else {
- this.optionsUser = [];
- }
- },
- //人员获取
- userSelectListOne(query){
- if (query !== '' && query.length>1) {
- this.loading = true;
- let obj = {
- nickName : query,
- userType : 22
- };
- selectUserListByName(obj).then(response => {
- this.optionsUserOne = response.data;
- this.loading = false;
- });
- } else {
- this.optionsUserOne = [];
- }
- },
- //实验室选中
- userChange(data){
- let self = this;
- subjectVo(data,0).then(response => {
- this.text = response.data.deptName + '-' + response.data.buildName + '-' + response.data.floorName +'-'+ response.data.roomName
- let list = response.data.safeUserNames.split(',');
- this.$set(this,'nameList',list);
- this.$set(this.newObj,'position',response.data.buildName + '-' + response.data.floorName +'-'+ response.data.roomName);
- this.$set(this.newObj,'college',response.data.deptName);
- this.$set(this.newObj,'subjectName',response.data.name);
- this.$set(this.newObj,'subjectId',response.data.id);
- this.$set(this.newObj,'safeUserName',response.data.safeUserName);
- this.$set(this.newObj,'safeUserId',response.data.safeUserId);
- });
- },
- //人员选中
- userChangeOne(data){
- this.$set(this.newObj,'userId2',data);
- },
- upData(){
- let self = this;
- this.$refs["form"].validate(valid => {
- if (valid) {
- this.$confirm('确认要提交吗?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- openDoorApply(self.newObj).then(response => {
- self.msgSuccess(response.msg);
- self.$parent.goPageButton(3);
- });
- }).catch(function() {
- // 取消
- });
- }
- });
- },
- //返回
- backPage(){
- this.$parent.goPageButton(1);
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .addPage{
- flex:1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- p{
- margin:0;
- padding:0;
- }
- .title-box{
- display: flex;
- height:90px;
- border-bottom: 1px solid #D8D8D8;
- margin-bottom:40px;
- p:nth-child(1){
- flex:1;
- font-size:16px;
- line-height:90px;
- margin-left:18px;
- color:#0045AF;
- }
- p:nth-child(2){
- margin:25px 25px 0 0;
- }
- }
- .bottom-button-box{
- display: flex;
- margin:200px auto 40px;
- p:nth-child(1){
- margin-right:20px;
- width:90px;
- }
- p:nth-child(2){
- width:90px;
- }
- }
- }
- </style>
- <style>
- /*//替换左边默认图标*/
- .selsectbox .el-select .el-input .el-select__caret:after {
- background: url(../../../assets/ZDimages/icon_001.png) no-repeat center center; /*引入icon*/
- transform:rotate(180deg);
- background-size: 20px 20px; /*这个是图片的大小,在这里不能直接设置width height,设置宽高其实是select的宽高,图片可能会失真只设置宽度 高度auto也行*/
- padding: 0 0 0 26px; /*需要设置padding 把placeholder向右移*/
- box-sizing: border-box;
- font-size: 14px;
- }
- </style>
|