370 lines
8.6 KiB
Vue
370 lines
8.6 KiB
Vue
<template>
|
|
<view>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="popupContent">
|
|
<view class="header">
|
|
<text class="cancel" @click="cancel">取消</text>
|
|
<text class="title">选择维修项目</text>
|
|
<text class="submit" @click="confirm">确定</text>
|
|
</view>
|
|
<view class="chooseProj">
|
|
<view class="desc">
|
|
已经选择{{ selectedProj.length }}项维修项目
|
|
</view>
|
|
<view class="selectedProj">
|
|
<view v-for="(item, index) in selectedProj" :key="index" class="selectedProjItem">
|
|
<text>{{ item.name }}</text>
|
|
<image class="itemIcon" mode="aspectFit" src="/static/icons/x.png" @click="removeProj(index)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="typeList && typeList.length > 0" class="projPicker" style="display: flex">
|
|
<view class="type">
|
|
<view v-for="item in typeList" :key="item.id" :class="{'active': typeId === item.id}" class="typeItem"
|
|
@click="chooseType(item)">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view class="container">
|
|
<view class="groupList">
|
|
<!-- <view class="groupHeader">-->
|
|
<!-- <view class="line"></view>-->
|
|
<!-- <text>{{ item.name }}</text>-->
|
|
<!-- <view class="line"></view>-->
|
|
<!-- </view>-->
|
|
<view class="projList">
|
|
<!-- <view v-for="(proj, index) in item.projList" :key="proj.id" class="projItem" @click="chooseProj(proj)">-->
|
|
<view class="addProj" @click="addProject()" v-if="show && typeId!=0">
|
|
<!-- <text class="projName">新增维修项目</text>-->
|
|
<button type="primary" size="mini" class="addBtn" >新增</button>
|
|
</view>
|
|
<view class="search-box" v-if="typeId==0">
|
|
<input type="text" placeholder="请输入项目名称" v-model="searchText" />
|
|
<button type="primary" size="mini" class="addBtn" @click="searchProject()" >搜索</button>
|
|
</view>
|
|
<view v-for="item in groupList" :key="item.id" class="projItem" @click="chooseProj(item)">
|
|
<text class="projName">{{ item.name }}</text>
|
|
<image v-if="selectedProj && selectedProj.find(f => f.id === item.id)" class="projChooseIcon"
|
|
mode="aspectFit" src="/static/icons/duihao.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import request from "@/utils/request";
|
|
|
|
export default {
|
|
name: "projectPicker",
|
|
data() {
|
|
return {
|
|
selectedProj: [
|
|
|
|
],
|
|
typeList: [
|
|
{
|
|
id:0,
|
|
name:"搜索",
|
|
}
|
|
],
|
|
typeId: 0,
|
|
groupList: [],
|
|
show: false,
|
|
searchText:""
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 注册事件监听器
|
|
uni.$on('projectCreated', this.handleProjectCreated);
|
|
},
|
|
onUnload() {
|
|
// 移除事件监听器
|
|
uni.$off('projectCreated');
|
|
},
|
|
methods: {
|
|
open(selectedProj = []) {
|
|
if (selectedProj) {
|
|
this.selectedProj = JSON.parse(JSON.stringify(selectedProj))
|
|
}
|
|
this.$refs.popup.open()
|
|
this.getProjeectList()
|
|
setTimeout(() => {
|
|
if (this.typeList && this.typeList.length > 0) {
|
|
this.typeId = this.typeList[0].id
|
|
this.getProject()
|
|
this.show = true
|
|
}
|
|
},500)
|
|
|
|
// 监听事件
|
|
uni.$on('projectCreated', (data) => {
|
|
// 在这里处理接收到的数据
|
|
this.selectedProj.push(data)
|
|
this.getProject()
|
|
});
|
|
// this.selectedProj = JSON.parse(JSON.stringify(selectedProj))
|
|
},
|
|
removeProj(index) {
|
|
this.selectedProj.splice(index, 1)
|
|
},
|
|
chooseProj(proj) {
|
|
const findIndex = this.selectedProj.findIndex(f => f.id === proj.id)
|
|
if (findIndex > -1) {
|
|
this.selectedProj.splice(findIndex, 1)
|
|
} else {
|
|
this.selectedProj.push(proj)
|
|
}
|
|
},
|
|
chooseType(type) {
|
|
this.typeId = type.id
|
|
this.getProject()
|
|
// this.typeId = type.typeId
|
|
},
|
|
addProject() {
|
|
uni.navigateTo({
|
|
url: `/pages/project/project?typeId=${this.typeId}`
|
|
})
|
|
},
|
|
getProjeectList() {
|
|
this.typeList = [{
|
|
id:0,
|
|
name:"搜索",
|
|
}]
|
|
const params = {
|
|
pageNo: 1,
|
|
pageSize: 100000,
|
|
type: '03'
|
|
}
|
|
request({
|
|
// url: '/admin-api/repair/project/getRepairProjectAndCateGory',
|
|
url: '/admin-api/conf/baseType/list',
|
|
method: 'GET',
|
|
params: params
|
|
}).then(res => {
|
|
this.typeList = this.typeList.concat(res.data)
|
|
})
|
|
},
|
|
getProject() {
|
|
if(this.typeId!=0){
|
|
request({
|
|
url: '/admin-api/repair/project/page',
|
|
method: 'GET',
|
|
params: {
|
|
pageNo: 1,
|
|
pageSize: 10000,
|
|
type: this.typeId
|
|
}
|
|
}).then(res => {
|
|
this.groupList = res.data.records
|
|
})
|
|
}else{
|
|
if(this.searchText==""){
|
|
this.groupList = []
|
|
}else{
|
|
this.searchProject()
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 搜搜项目名称
|
|
*/
|
|
searchProject(){
|
|
if(this.searchText==""){
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请输入项目名称'
|
|
})
|
|
return
|
|
}
|
|
request({
|
|
url: '/admin-api/repair/project/page',
|
|
method: 'GET',
|
|
params: {
|
|
pageNo: 1,
|
|
pageSize: 10000,
|
|
name: this.searchText
|
|
}
|
|
}).then(res => {
|
|
this.groupList = res.data.records
|
|
})
|
|
},
|
|
confirm() {
|
|
this.$emit('confirm', this.selectedProj)
|
|
this.cancel()
|
|
},
|
|
cancel() {
|
|
this.selectedProj = []
|
|
this.groupList = []
|
|
this.$refs.popup.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.popupContent {
|
|
height: 86vh;
|
|
background-color: #fff;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
padding: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|
|
|
.title {
|
|
flex: 1;
|
|
width: 0;
|
|
text-align: center;
|
|
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.cancel {
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
|
|
.submit {
|
|
font-weight: 500;
|
|
color: #0174F6;
|
|
}
|
|
}
|
|
|
|
.chooseProj {
|
|
padding: 30rpx 32rpx;
|
|
|
|
.desc {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.selectedProj {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
flex-wrap: wrap;
|
|
padding: 30rpx 0;
|
|
|
|
.selectedProjItem {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 10rpx;
|
|
padding: 10rpx 16rpx;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
border: 2rpx solid #0174F6;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #0174F6;
|
|
|
|
.itemIcon {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.projPicker {
|
|
flex: 1;
|
|
height: 0;
|
|
overflow: auto;
|
|
border-top: 1rpx solid #EEEEEE;
|
|
|
|
display: flex;
|
|
|
|
.type {
|
|
width: 200rpx;
|
|
overflow-y: scroll;
|
|
background: #FFFFFF;
|
|
|
|
.typeItem {
|
|
width: 100%;
|
|
background: #F2F2F7;
|
|
padding: 40rpx 32rpx;
|
|
|
|
&.active {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
flex: 1;
|
|
width: 0;
|
|
overflow-y: scroll;
|
|
padding: 30rpx;
|
|
|
|
.groupList {
|
|
.groupHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 4rpx;
|
|
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
|
|
.line {
|
|
flex: 1;
|
|
width: 0;
|
|
height: 2rpx;
|
|
background-color: #DDDDDD;
|
|
}
|
|
}
|
|
|
|
.projList {
|
|
padding-bottom: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 40rpx;
|
|
|
|
.addProj{
|
|
text-align: right;
|
|
}
|
|
.search-box{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
.projItem {
|
|
display: flex;
|
|
padding: 10rpx 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.projName {
|
|
flex: 1;
|
|
width: 0;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.projChooseIcon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|