|
|
@@ -8,25 +8,18 @@
|
|
|
<template #header>
|
|
|
<span></span>
|
|
|
</template>
|
|
|
-<!-- <template #header>-->
|
|
|
-<!-- <van-cell title="状态">-->
|
|
|
-<!-- <template #extra>-->
|
|
|
-<!-- <span :style="{color:getState(getDictLabel(visitInfo.status,'out_in_approve_status'))}">-->
|
|
|
-<!-- {{getDictLabel(visitInfo.status,'out_in_approve_status') }}-->
|
|
|
-<!-- </span>-->
|
|
|
-<!-- </template>-->
|
|
|
-<!-- </van-cell>-->
|
|
|
-<!-- </template>-->
|
|
|
<div class="panel-box">
|
|
|
- <select-cell
|
|
|
- title="来访人员"
|
|
|
- :prop="prop"
|
|
|
- is-row
|
|
|
- @itemInfo="getItemInfo"
|
|
|
- v-model="selectedUser.id"
|
|
|
- :data-list="userList"
|
|
|
- required>
|
|
|
- </select-cell>
|
|
|
+
|
|
|
+<!-- <select-cell-->
|
|
|
+<!-- title="来访人员"-->
|
|
|
+<!-- :prop="prop"-->
|
|
|
+<!-- is-row-->
|
|
|
+<!-- @itemInfo="getItemInfo"-->
|
|
|
+<!-- v-model="selectedUser.id"-->
|
|
|
+<!-- :data-list="userList"-->
|
|
|
+<!-- required>-->
|
|
|
+<!-- </select-cell>-->
|
|
|
+ <van-cell title="来访人员" :value="selectedUser.userName" required is-link @click="onClick"/>
|
|
|
<van-cell title="证件类型" :value="getDictLabel(selectedUser.idType,'letter_id_type')"></van-cell>
|
|
|
<van-cell title="证件号码" :value="selectedUser.idCard"></van-cell>
|
|
|
<van-cell title="介绍信类型" :value="getDictLabel(selectedUser.type,'out_in_type')"></van-cell>
|
|
|
@@ -77,13 +70,49 @@
|
|
|
</div>
|
|
|
</van-panel>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 人员选择弹窗 -->
|
|
|
+ <van-popup
|
|
|
+ class="search-data-popup"
|
|
|
+ round
|
|
|
+ lazy-render
|
|
|
+ v-model="showPicker"
|
|
|
+ position="bottom"
|
|
|
+ @click-overlay="clickOverlay"
|
|
|
+ :close-on-click-overlay="true">
|
|
|
+ <div class="header-line">
|
|
|
+ <div class="cancel" @click="onSearchCancel">取消</div>
|
|
|
+ <div class="title">选择人员</div>
|
|
|
+ <div class="sure" @click="onSearchConfirm">确定</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <form action="/">
|
|
|
+ <van-search placeholder="输入搜索内容" v-model="searchValue" @input="inputSearchValue" />
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <div v-if="userList.length >0" class="lists">
|
|
|
+ <div class="list-item">
|
|
|
+ <van-cell
|
|
|
+ :class="{active:item.checked}"
|
|
|
+ v-for="(item, index) in userList"
|
|
|
+ clickable
|
|
|
+ :key="item.id"
|
|
|
+ :title="item.userName"
|
|
|
+ :value="item.companyName"
|
|
|
+ @click="handleClick(item,index)">
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="lists">
|
|
|
+ <empty description="无数据" />
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
+import SearchSelectCell from "@/components/SearchSelectCell/index.vue";
|
|
|
import DateCell from "@/components/dateCell/index.vue";
|
|
|
import Uploader from "@/components/upload/gxuploader.vue";
|
|
|
import {formatDate} from "@/filters/filter";
|
|
|
@@ -92,7 +121,7 @@ import {imgUrl} from "@/utils";
|
|
|
import { ImagePreview } from 'vant'
|
|
|
import {userList, userRegister} from './api'
|
|
|
export default {
|
|
|
- components: {Uploader, DateCell},
|
|
|
+ components: {SearchSelectCell,Uploader, DateCell},
|
|
|
data(){
|
|
|
return {
|
|
|
minDate:null,
|
|
|
@@ -102,7 +131,7 @@ export default {
|
|
|
selectedUser:{},
|
|
|
prop:{
|
|
|
label:'userName',
|
|
|
- value:'id'
|
|
|
+ value:'id',
|
|
|
},
|
|
|
formData:{
|
|
|
letterUserId:null,
|
|
|
@@ -111,7 +140,12 @@ export default {
|
|
|
accompanyingPerson:null,
|
|
|
checkImage:null,
|
|
|
},
|
|
|
- dicts:['out_in_approve_status','letter_id_type','out_in_type']
|
|
|
+ dicts:['out_in_approve_status','letter_id_type','out_in_type'],
|
|
|
+ /*以下为弹窗中的变量*/
|
|
|
+ searchValue:'',
|
|
|
+ showPicker:false,
|
|
|
+ onSelected:null,
|
|
|
+ pList:[],
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -122,6 +156,41 @@ export default {
|
|
|
},
|
|
|
methods:{
|
|
|
imgUrl,formatDate,
|
|
|
+ onClick(){
|
|
|
+ this.showPicker = true;
|
|
|
+ },
|
|
|
+ clickOverlay(){
|
|
|
+ this.selected = this.value;
|
|
|
+ this.showPicker = false;
|
|
|
+ },
|
|
|
+ handleClick(v,i){
|
|
|
+ this.userList.forEach(v=>v.checked = false);
|
|
|
+ // this.$nextTick(()=>{
|
|
|
+ // this.$set(this.userList[i],'checked',!this.userList[i].checked);
|
|
|
+ // })
|
|
|
+ v.checked = !v.checked;
|
|
|
+ this.userList.splice(i,1,v)
|
|
|
+ this.onSelected = v;
|
|
|
+ },
|
|
|
+ onSearchCancel() {
|
|
|
+ this.selected = this.value;
|
|
|
+ this.$emit("cancel");
|
|
|
+ this.showPicker = false;
|
|
|
+ },
|
|
|
+ onSearchConfirm() {
|
|
|
+ this.selectedUser = this.onSelected;
|
|
|
+ this.showPicker = false;
|
|
|
+ },
|
|
|
+ inputSearchValue(query) {
|
|
|
+ //搜索框值发生改变
|
|
|
+ setTimeout(() => {
|
|
|
+ this.userList= this.pList.filter(item => {
|
|
|
+ return item.userName.indexOf(query) > -1;
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
onSubmit(){
|
|
|
if(!this.selectedUser.id){
|
|
|
this.$toast('请选择来访人员');
|
|
|
@@ -179,6 +248,7 @@ export default {
|
|
|
}
|
|
|
return v
|
|
|
})
|
|
|
+ this.pList = res.data;
|
|
|
})
|
|
|
},
|
|
|
preView(val) {
|
|
|
@@ -339,4 +409,61 @@ export default {
|
|
|
height: 30px;
|
|
|
}
|
|
|
}
|
|
|
+.search-data-popup{
|
|
|
+ .header-line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 90px;
|
|
|
+ }
|
|
|
+ .header-line .cancel {
|
|
|
+ padding: 0 30px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #969799;
|
|
|
+ }
|
|
|
+ .header-line .title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #343434;
|
|
|
+ }
|
|
|
+ .header-line .sure {
|
|
|
+ padding: 0 30px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #1989fa;
|
|
|
+ }
|
|
|
+ .lists {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ -padding: 10px 12px 20px 12px;
|
|
|
+ min-height: 300px;
|
|
|
+ max-height: 700px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .lists .line {
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .lists .line img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ color: #666;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+ .van-empty{
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .list-item{
|
|
|
+ padding:20px;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color:#1989fa;
|
|
|
+ border-left: 5px solid #1989fa;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
coys