333 lines
7.2 KiB
Vue
333 lines
7.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view style="width: 100%; height: 44px;"></view>
|
||
<view class="top-heder">
|
||
<view class="t-left" @click="getback()">
|
||
<uni-icons type="left" size="18"></uni-icons>
|
||
</view>
|
||
<view class="t-title">
|
||
<text>选择检测内容</text>
|
||
</view>
|
||
<view class="t-you"></view>
|
||
</view>
|
||
<view class="cont_box">
|
||
|
||
<view class="title_">
|
||
可选检测内容：
|
||
</view>
|
||
<view class="box_">
|
||
<view class="box_button " :class="{ 'box_button_x' :isItemSelected(item) }"
|
||
v-for="item in inpectionProjects" @click="clickProject(item)">{{ item.projectName }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title_">
|
||
已选检测内容：
|
||
</view>
|
||
<view style="margin-bottom: 15px;" v-for="(item,index) in selectProject" :key="index">
|
||
<view class="steps_">
|
||
<view class="index_">{{ index + 1 }}</view>
|
||
<view style="font-size: 20px; font-weight: bold;">{{ item.projectName }}</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left" @click="selectUser(item,index)">
|
||
<text style="color: red;font-weight: bold;text-align: center;">*</text>
|
||
选择检测人员
|
||
<text class="xixi">点击选择</text>
|
||
</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="item.dealUserName" placeholder="请选择检测人员">
|
||
</view>
|
||
</view>
|
||
<u-picker :show="item.show" :columns="columns" @confirm="confirms(item, $event)" @cancel="cancels(item)" :title="'选择'+item.projectName+'的检测人员'"
|
||
:key="index"
|
||
keyName="nickname"></u-picker>
|
||
<view class="xb_" v-if="index != selectProject.length - 1 ">↓</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="dlanniu" @click="sureChoose()">
|
||
<text>确定选择</text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
iconSize: 130,
|
||
inpectionProjects: [],
|
||
selectProject: [],
|
||
show: false,
|
||
columns: [],
|
||
nickname: '',
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getProjects()
|
||
|
||
},
|
||
onLoad(options) {
|
||
if (options.selectProject) {
|
||
this.selectProject = JSON.parse(options.selectProject)
|
||
}
|
||
},
|
||
methods: {
|
||
sureChoose() {
|
||
if (this.selectProject.length == 0) {
|
||
uni.showToast({
|
||
title: '请选择项目！',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let hasInvalidItem = false;
|
||
this.selectProject.forEach(item => {
|
||
if (item.dealUserId == undefined || item.dealUserName == '') {
|
||
hasInvalidItem = true;
|
||
return
|
||
}
|
||
})
|
||
if (hasInvalidItem) {
|
||
uni.showToast({
|
||
title: '请选择补录人员！',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
this.selectProject.map(item => {
|
||
item.projectId = item.id
|
||
// item.id = undefined
|
||
})
|
||
uni.$emit('selectProject', this.selectProject);
|
||
this.getback()
|
||
},
|
||
isItemSelected(item) {
|
||
return this.selectProject.findIndex(project => project.id === item.id) > -1;
|
||
},
|
||
getback() {
|
||
uni.navigateBack()
|
||
},
|
||
confirms(item, e) {
|
||
console.log('e', e)
|
||
if (e.value[0] != undefined) {
|
||
this.selectProject[e.value[0].index].dealUserId = e.value[0].id
|
||
this.selectProject[e.value[0].index].dealUserName = e.value[0].nickname
|
||
}
|
||
item.show = false
|
||
// this.show = false
|
||
this.$forceUpdate(); // 强制更新组件
|
||
},
|
||
cancels(item) {
|
||
console.log('关闭前 show:', item.show); // 查看关闭前的 show 状态
|
||
item.show = false; // 设置为 false 以关闭 u-picker
|
||
// this.show = false
|
||
this.$nextTick(() => {
|
||
console.log('关闭后 show:', item.show); // 查看关闭后的 show 状态
|
||
this.$forceUpdate(); // 强制更新组件
|
||
});
|
||
},
|
||
|
||
selectUser(item, index) {
|
||
this.columns = []
|
||
// item.columns = []
|
||
request({
|
||
url: '/system/user/selectByRoleId',
|
||
method: 'get',
|
||
params: {
|
||
roleId: item.roleId
|
||
}
|
||
}).then(res => {
|
||
res.data.map(item => {
|
||
item.index = index
|
||
})
|
||
this.columns.push(res.data)
|
||
// item.columns.push(res.data)
|
||
})
|
||
item.show = true
|
||
// this.show = true
|
||
console.log('item', item)
|
||
},
|
||
async getProjects() {
|
||
let res = await request({
|
||
url: '/inspection/dl-inspection-project/page',
|
||
method: 'get',
|
||
params: {
|
||
pageNo: 1,
|
||
pageSize: 100
|
||
}
|
||
|
||
})
|
||
this.inpectionProjects = res.data.records
|
||
},
|
||
clickProject(data) {
|
||
let idx = this.selectProject.findIndex(project => project.id === data.id)
|
||
if (idx > -1) {
|
||
// 如果元素存在于数组中，则使用splice方法来删除它
|
||
this.selectProject.splice(idx, 1);
|
||
} else {
|
||
this.selectProject.push(data)
|
||
data.show = false
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.steps_ {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.cont_box {
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
|
||
.title_ {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.box_ {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.xixi {
|
||
font-size: 12px;
|
||
color: #0D2E8D;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.box_button_x {
|
||
border-radius: 6px;
|
||
border: 1px solid #0D2E8D;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
margin-right: 15px;
|
||
margin-bottom: 15px;
|
||
background: #0D2E8D;
|
||
color: #fff;
|
||
}
|
||
|
||
.list-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 15px 5px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
}
|
||
|
||
.l-left {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.l-right {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
text-align: right;
|
||
}
|
||
|
||
.box_button {
|
||
|
||
border-radius: 6px;
|
||
border: 1px solid #999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
margin-right: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.dlanniu {
|
||
width: 80%;
|
||
height: 45px;
|
||
background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 20px auto;
|
||
color: white;
|
||
}
|
||
|
||
.t-you {
|
||
height: 100%;
|
||
width: 20%;
|
||
}
|
||
|
||
.content {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background: white;
|
||
}
|
||
|
||
.top-heder {
|
||
width: 100%;
|
||
height: 46px;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.t-title {
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.t-left {
|
||
width: 10%;
|
||
}
|
||
|
||
.index_ {
|
||
width: 35px;
|
||
height: 35px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
background: #0D2E8D;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.xb_ {
|
||
width: 35px;
|
||
height: 35px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #0D2E8D;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|