selectType
This commit is contained in:
花有清香月有阴
@@ -5,18 +5,18 @@
|
||||
<u-form :model="forms" ref="uForm" label-width="auto">
|
||||
<u-form-item label="区域选择" prop="areaId" class="areaIds" style="position: relative">
|
||||
<AiAreaPicker v-model="forms.areaId" :areaId="areaIdProps" @select="areaSelect" style="color: #333"></AiAreaPicker>
|
||||
<u-icon name="arrow-right" color="rgb(192, 196, 204)" size="30" style="margin-left:4px;" />
|
||||
<u-icon name="arrow-right" color="rgb(192, 196, 204)" size="30" style="margin-left: 4px" />
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="走访对象" prop="create_user_name" required :right-icon=" id ? '' : 'arrow-right'" class="create_user_names">
|
||||
<u-form-item label="走访对象" prop="create_user_name" required :right-icon="id ? '' : 'arrow-right'" class="create_user_names">
|
||||
<u-input v-model="forms.create_user_name" disabled placeholder="请选择走访对象" @click="toWalkObject" />
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="现实状态" prop="reality" :right-icon=" id ? '' : 'arrow-right'" class="realitys">
|
||||
<u-form-item label="现实状态" prop="reality" :right-icon="id ? '' : 'arrow-right'" class="realitys">
|
||||
<u-input v-model="forms.reality" disabled placeholder="请选择现实状态" @click="realityClick" />
|
||||
|
||||
<u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="realityStstus"></u-select>
|
||||
@@ -47,18 +47,19 @@
|
||||
<div class="btn" @click="submit">保存</div>
|
||||
</div>
|
||||
|
||||
<component v-else :is="comp" @back="backlist"></component>
|
||||
<!-- <component v-else :is="comp" @back="backlist"></component> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import walkObject from './walkObject'
|
||||
// import walkObject from './walkObject'
|
||||
|
||||
export default {
|
||||
name: 'add',
|
||||
components: {
|
||||
walkObject,
|
||||
// walkObject,
|
||||
// selectType,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
@@ -89,7 +90,7 @@ export default {
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.areaIdProps = this.user.areaId
|
||||
if(!this.id) {
|
||||
if (!this.id) {
|
||||
this.forms.areaId = this.user.areaId
|
||||
this.areaName = this.user.areaName
|
||||
}
|
||||
@@ -103,7 +104,7 @@ export default {
|
||||
mounted() {},
|
||||
methods: {
|
||||
realityClick() {
|
||||
if(this.id) return
|
||||
if (this.id) return
|
||||
if (!this.forms.create_user_name) {
|
||||
return this.$u.toast('请选择走访对象')
|
||||
}
|
||||
@@ -195,10 +196,11 @@ export default {
|
||||
},
|
||||
|
||||
toWalkObject() {
|
||||
if(this.id) return
|
||||
this.addList = false
|
||||
this.comp = 'walkObject'
|
||||
this.paramss = 111
|
||||
if (this.id) return
|
||||
// this.addList = false
|
||||
// this.comp = 'selectType'
|
||||
// this.paramss = 111
|
||||
uni.navigateTo({ url: `./selectType` })
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
BIN
src/apps/AppWalkask/img/1.png
Normal file
BIN
src/apps/AppWalkask/img/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
BIN
src/apps/AppWalkask/img/2.png
Normal file
BIN
src/apps/AppWalkask/img/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 B |
217
src/apps/AppWalkask/selectType.vue
Normal file
217
src/apps/AppWalkask/selectType.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="selectType">
|
||||
<div class="header-top">
|
||||
<u-search v-model="keyword" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#CCCCCC" placeholder-color="#999999" @search="handerSearch" @clear="handerClear"></u-search>
|
||||
</div>
|
||||
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span :style="{ color: applicationName ? '#3F8DF5' : '' }" @click="back">可选范围</span>
|
||||
<span> {{ applicationName ? ' / ' + applicationName : '' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="showTypes" v-if="showType">
|
||||
<div class="empty-div"></div>
|
||||
|
||||
<div v-if="typeList.length > 0">
|
||||
<div class="cards" v-for="(item, i) in typeList" :key="i" @click="toUserSelect(item)">
|
||||
<img src="./img/user-img.png" alt="" />
|
||||
|
||||
<div class="right">
|
||||
<div class="applicationNames">{{ item.applicationName }}</div>
|
||||
|
||||
<img src="./img/2.png" alt="" class="imgs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
|
||||
<div class="showUsers" v-else>
|
||||
<div v-if="userList.length > 0">
|
||||
<div class="cards" v-for="(e, index) in userList" :key="index">
|
||||
<img src="./img/user-img.png" alt="" />
|
||||
|
||||
<div class="right">
|
||||
<div class="applicationNames">{{ e.create_user_name }}</div>
|
||||
|
||||
<!-- <img src="./img/2.png" alt="" class="imgs" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <AiBck /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'selectType',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
typeList: [],
|
||||
userList: [],
|
||||
keyword: '',
|
||||
current: 1,
|
||||
showType: true,
|
||||
applicationName: '',
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
onLoad() {
|
||||
this.getTypeList()
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
getTypeList() {
|
||||
this.userList = []
|
||||
this.$http.post(`/app/appapplicationinfo/queryApplicationListByType?type=0&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.typeList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getUser(data) {
|
||||
this.$http.post(`/app/appapplicationinfo/list?appId=${data.id}¤t=${this.current}&size=${999}`, { searchParam: this.keyword }).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.userList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toUserSelect(item) {
|
||||
console.log(item)
|
||||
this.applicationName = item.applicationName
|
||||
this.showType = false
|
||||
this.getUser(item)
|
||||
},
|
||||
|
||||
back() {
|
||||
this.keyword = ''
|
||||
this.typeList = []
|
||||
this.userList = []
|
||||
this.applicationName = ''
|
||||
this.showType = true
|
||||
this.getTypeList()
|
||||
},
|
||||
|
||||
handerSearch(e) {
|
||||
if (this.showType) {
|
||||
this.keyword = e
|
||||
this.current = 1
|
||||
this.getUser()
|
||||
}
|
||||
},
|
||||
|
||||
handerClear() {
|
||||
this.keyword = ''
|
||||
this.current = 1
|
||||
this.getUser()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.selectType {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
.hint {
|
||||
padding: 0 20px 0 32px;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
box-shadow: 0px 1px 0px 0px #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.showTypes {
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 20px 0 32px;
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showUsers {
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 20px 0 32px;
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,24 +2,28 @@
|
||||
<div class="detail">
|
||||
<div>
|
||||
<div class="item-content" v-for="(item, index) in userList" :key="index">
|
||||
<div class="title" @click="showUserType(index)">
|
||||
<div class="title" @click="showUserType(item, index)">
|
||||
<h2>{{ item.label }}</h2>
|
||||
<img src="./img/down-icon.png" alt="" :class="item.check ? 'img-active' : ''" />
|
||||
</div>
|
||||
<div class="user-list" v-if="item.check">
|
||||
<div class="user-item" v-for="(e, indexs) in item.value" :key="indexs" v-if="item.value && item.value.length">
|
||||
<div class="user-img">
|
||||
<img src="./img/user-img.png" alt="" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<p class="name">{{ e.name }}</p>
|
||||
<div class="phone">
|
||||
<div v-if="statisticsList.length > 0">
|
||||
<div class="user-item" v-for="(e, indexs) in statisticsList" :key="indexs">
|
||||
<!-- v-if="item.value && item.value.length" -->
|
||||
<div class="user-img">
|
||||
<img src="./img/user-img.png" alt="" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<p class="name">{{ e.name }}</p>
|
||||
<!-- <div class="phone">
|
||||
<span>{{ idNumberInit(e.idNumber) }}</span>
|
||||
<span>{{ e.phone }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text" v-if="!item.value.length">{{ '暂无' + item.label + '信息' }}</p>
|
||||
|
||||
<p class="text" v-else>{{ '暂无' + item.label + '信息' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -112,10 +116,10 @@ export default {
|
||||
// },
|
||||
// ],
|
||||
// nameList: [],
|
||||
// current: 1,
|
||||
// appId: '',
|
||||
current: 1,
|
||||
appId: '',
|
||||
// value: '',
|
||||
// menuLevel3Name: '',
|
||||
menuLevel3Name: '',
|
||||
// num: 1,
|
||||
// flag: false,
|
||||
}
|
||||
@@ -124,15 +128,10 @@ export default {
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
// created() {
|
||||
// console.log(1)
|
||||
// this.getDiyList()
|
||||
// },
|
||||
|
||||
created() {
|
||||
this.getStatistic()
|
||||
this.getUserList()
|
||||
uni.$on('specialPeopleList', () => {
|
||||
this.getStatistic()
|
||||
this.getUserList()
|
||||
})
|
||||
},
|
||||
@@ -149,29 +148,33 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
getStatistic() {
|
||||
this.statisticsList = []
|
||||
this.$http.post(`/app/appapplicationinfo/specialStatistic?type=0&range=0`).then((res) => {
|
||||
getStatistic(item) {
|
||||
// this.statisticsList = []
|
||||
this.menuLevel3Name = item.value.menuLevel3Name
|
||||
this.appId = item.value.id
|
||||
this.$http.post(`/app/appapplicationinfo/list?appId=${item.value.id}¤t=${this.current}&size=${999}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
for (let i in res.data) {
|
||||
var obj = {
|
||||
label: i,
|
||||
value: res.data[i],
|
||||
}
|
||||
this.statisticsList.push(obj)
|
||||
}
|
||||
this.statisticsList = res.data.records
|
||||
|
||||
// for (let i in res.data) {
|
||||
// var obj = {
|
||||
// label: i,
|
||||
// value: res.data[i],
|
||||
// }
|
||||
// this.statisticsList.push(obj)
|
||||
// }
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getUserList() {
|
||||
this.userList = []
|
||||
this.$http.post(`/app/appapplicationinfo/queryApplicationListByType?type=0`).then((res) => {
|
||||
this.$http.post(`/app/appapplicationinfo/queryApplicationListByType?type=0&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log(res.data);
|
||||
for (let i in res.data) {
|
||||
var obj = {
|
||||
label: i,
|
||||
// label: i,
|
||||
label: res.data[i].applicationName,
|
||||
value: res.data[i],
|
||||
check: false,
|
||||
}
|
||||
@@ -190,16 +193,24 @@ export default {
|
||||
return idNumber
|
||||
},
|
||||
|
||||
showUserType(index) {
|
||||
showUserType(item, index) {
|
||||
this.getStatistic(item)
|
||||
if (this.userList[index].check) {
|
||||
this.userList[index].check = false
|
||||
console.log(1)
|
||||
this.statisticsList = []
|
||||
} else {
|
||||
this.userList.map((item) => {
|
||||
item.check = false
|
||||
this.statisticsList = []
|
||||
})
|
||||
this.userList[index].check = true
|
||||
}
|
||||
},
|
||||
|
||||
radioGroupChange(e) {
|
||||
console.log(e)
|
||||
},
|
||||
},
|
||||
|
||||
// methods: {
|
||||
@@ -207,11 +218,11 @@ export default {
|
||||
// this.num = this.num + 1
|
||||
// this.$forceUpdate()
|
||||
// if (this.num % 2 == 0) {
|
||||
// console.log('偶数')
|
||||
//
|
||||
// this.flag == true
|
||||
// this.$forceUpdate()
|
||||
// } else {
|
||||
// console.log('奇数')
|
||||
//
|
||||
// this.flag == false
|
||||
// this.$forceUpdate()
|
||||
// }
|
||||
@@ -225,16 +236,16 @@ export default {
|
||||
// })
|
||||
// },
|
||||
|
||||
// selectUser(item) {
|
||||
// this.userList = []
|
||||
// this.menuLevel3Name = item.menuLevel3Name
|
||||
// this.appId = item.id
|
||||
// this.$http.post(`/app/appapplicationinfo/list?appId=${item.id}¤t=${this.current}&size=${99}`, { searchParam: this.keyword }).then((res) => {
|
||||
// if (res.code == 0) {
|
||||
// this.userList = res.data.records
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// selectUser(item) {
|
||||
// this.userList = []
|
||||
// this.menuLevel3Name = item.menuLevel3Name
|
||||
// this.appId = item.id
|
||||
// this.$http.post(`/app/appapplicationinfo/list?appId=${'2677c070764f4779920c1a2923a8afb0'}¤t=${this.current}&size=${99}`, { searchParam: this.keyword }).then((res) => {
|
||||
// if (res.code == 0) {
|
||||
// this.userList = res.data.records
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
|
||||
// submit() {
|
||||
// this.userList.map((item) => {
|
||||
@@ -357,6 +368,7 @@ export default {
|
||||
.user-item {
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-img {
|
||||
width: 112px;
|
||||
img {
|
||||
|
||||
Reference in New Issue
Block a user