Compare commits

..

2 Commits

Author SHA1 Message Date
TimSpan 04ad687120 Merge branch 'main' of http://175.6.124.250:3100/luozhun/policeSecurity 2024-11-15 11:24:31 +08:00
TimSpan ab386a85c7 单位 选择 替换为 搜索组件
单位 选择 替换为 搜索组件
2024-11-15 11:24:29 +08:00
6 changed files with 384 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -0,0 +1,3 @@
export default {
"component": true
}

View File

@ -0,0 +1,85 @@
.uiwu-flex-align {
align-items: center;
}
.uiwu-flex {
display: flex;
}
.uiwu-flex-space {
align-items: center;
justify-content: space-between;
}
.uiwu-picker-search {
position: absolute;
height: 1031rpx;
left: 0;
right: 0;
bottom: 0;
background: url('../assets/images/popuptiobg.png') no-repeat 0 0 #fff;
background-size: 100% auto;
border-radius: 30rpx 30rpx 0 0;
&-btn {
padding: 20rpx 30rpx 40rpx;
text {
&:nth-child(1) {
color: #999;
}
&:nth-child(2) {
color: #00bbff;
}
}
}
&-input {
box-sizing: border-box;
height: 80rpx;
background: rgba(#f3f6fd, 0.6);
border-radius: 16rpx;
margin: 0 30rpx;
padding-left: 24rpx;
padding-right: 10rpx;
input {
font-size: 28rpx;
width: 100%;
}
}
.scroll-view {
width: 100%;
height: calc(100% - 212rpx);
margin-top: 30rpx;
}
.radio-group {
padding: 0 50rpx 30rpx;
&-item {
margin-bottom: 20rpx;
text {
font-size: 28rpx;
color: #666;
}
radio {
transform: scale(0.8);
}
}
}
}
.searchButton {
height: 60rpx;
width: 200rpx;
border-radius: 10rpx;
line-height: 60rpx;
text-align: center;
color: #fff;
background-color: #00bbff;
}

View File

@ -0,0 +1,90 @@
<template>
<view>
<view @tap.stop="open">11111</view>
<nut-popup v-model:visible="show" position="bottom" round="true">
<view style="height: 1031rpx">
<view class="uiwu-picker-search">
<view class="uiwu-picker-search-btn uiwu-flex uiwu-flex-space">
<text @tap.stop="show = false">取消</text>
<text @tap.stop="determine">确定</text>
</view>
<view class="uiwu-picker-search-input uiwu-flex uiwu-flex-align">
<input v-model="inputText.value" type="text" :placeholder="placeholder" confirm-type="search" @confirm="confirm_" />
<view @click.stop="confirm" class="searchButton">搜索</view>
</view>
<scroll-view class="scroll-view" scroll-y>
<!-- <radio-group class="radio-group" @change="change">
<view class="radio-group-item uiwu-flex uiwu-flex-space" v-for="(item, index) in listData.value" :key="index">
<text>{{ item.bank_name }}</text>
<radio :value="item.bank_name" color="#687CFF" />
</view>
</radio-group> -->
</scroll-view>
</view>
</view>
</nut-popup>
</view>
</template>
<script setup>
import './picker-search.scss'
import { ref, expose } from 'vue'
// import { searchBankName } from '@/api/app'
const props = defineProps({
placeholder: {
type: String,
default: '请输入银行名称',
},
})
//
const show = ref(true)
const listData = ref([])
const currentBankName = ref('')
const inputText = ref('')
//
const confirm = () => {
// searchBankName({ bank_name: inputText.value.trim() }).then((res) => {
// console.log('searchBankName', res)
// listData.value = res.data
// })
}
//
const confirm_ = ({ detail: { value } }) => {
console.log('confirm', value)
// searchBankName({ bank_name: value.trim() }).then((res) => {
// console.log('searchBankName', res)
// listData.value = res.data
// })
}
//
const change = ({ detail: { value } }) => {
console.log('change', value)
currentBankName.value = value
}
//
const determine = () => {
if (currentBankName.value.trim() === '') {
uni.showToast({
title: '请选择银行',
duration: 1500,
icon: 'error',
})
return
}
//
emit('change', currentBankName.value.trim())
show.value = false
}
//
const open = () => {
show.value = true
}
// expose({ open })
</script>

View File

@ -39,9 +39,131 @@ page {
border-left: white;
}
}
.sigh_btns {
transform: rotate(-90deg);
transform-origin: center
}
.sigh_btns_noRotate {}
.input_box {
width: 638rpx;
background: #f8f9fa;
border-radius: 16rpx;
padding: 20rpx 32rpx;
display: flex;
margin-bottom: 24rpx;
display: flex;
align-items: center
}
.input_lable {
width: 180rpx;
display: flex;
flex-wrap: wrap;
font-weight: bold;
font-size: 28rpx;
color: #101010;
line-height: 40rpx;
font-style: normal;
}
.input_width {
width: 400rpx;
height: 40rpx;
display: flex;
justify-content: space-between;
align-items: center
}
.uiwu-flex-align {
align-items: center;
}
.uiwu-flex {
display: flex;
}
.uiwu-flex-space {
align-items: center;
justify-content: space-between;
}
.uiwu-picker-search {
position: absolute;
height: 1031rpx;
left: 0;
right: 0;
bottom: 0;
background: url('../../../assets/images/popuptiobg.png') no-repeat 0 0 #fff;
background-size: 100% auto;
border-radius: 30rpx 30rpx 0 0;
&-btn {
padding: 20rpx 30rpx 40rpx;
text {
&:nth-child(1) {
color: #999;
}
&:nth-child(2) {
color: rgb(73, 143, 242);
}
}
}
&-input {
box-sizing: border-box;
height: 80rpx;
background: rgba(#f3f6fd, 0.6);
border-radius: 16rpx;
margin: 0 30rpx;
padding-left: 24rpx;
padding-right: 10rpx;
input {
font-size: 28rpx;
width: 100%;
}
}
.scroll-view {
width: 100%;
height: 800rpx;
margin-top: 30rpx;
}
.radio-group {
padding: 0 50rpx 30rpx;
overflow-y: scroll;
&-item {
margin-bottom: 20rpx;
text {
font-size: 28rpx;
color: #666;
}
radio {
transform: scale(0.8);
}
}
}
}
.searchButton {
height: 60rpx;
width: 200rpx;
border-radius: 10rpx;
line-height: 60rpx;
text-align: center;
color: #fff;
background-color: rgb(73, 143, 242);
}

View File

@ -1,6 +1,15 @@
<template>
<view class="container">
<picker mode="selector" :range="selector" rangeKey="label" @change="onChange">
<nut-form labelWidth="320rpx" labelAlign="left" @click.stop="openSearch">
<nut-form-item label="考核单位:">
<view class="input_width">
<input style="width: 300rpx" disabled="true" v-model="enterprisesName" placeholder="请选择考核单位:" placeholder-class="input_placeholder" />
<IconFont name="arrow-down"></IconFont>
</view>
</nut-form-item>
</nut-form>
<!-- <picker mode="selector" :range="selector" rangeKey="label" @change="onChange">
<view class="picker">
考核单位
<view style="display: flex; align-items: center">
@ -9,7 +18,7 @@
<IconFont name="arrow-right"></IconFont>
</view>
</view>
</picker>
</picker> -->
<picker v-if="(selectorType?.length ?? 0) > 0" mode="selector" :range="selectorType" rangeKey="label" @change="onChangeType">
<view class="picker">
@ -63,15 +72,48 @@
<view style="display: flex; width: 100%; justify-content: center; position: fixed; bottom: 50rpx">
<nut-button :loading="isLoading" shape="round" type="info" @click="onSubmit" style="height: 80rpx; width: 702rpx; margin: 10rpx auto">确认提交</nut-button>
</view>
<nut-popup v-model:visible="show" position="bottom" :round="true">
<view style="height: 1031rpx">
<view class="uiwu-picker-search">
<view class="uiwu-picker-search-btn uiwu-flex uiwu-flex-space">
<text @tap.stop="show = false">取消</text>
<text @tap.stop="determine">确定</text>
</view>
<view class="uiwu-picker-search-input uiwu-flex uiwu-flex-align">
<input v-model="inputText" type="text" placeholder="请输入单位名称" confirm-type="search" @confirm="confirm_" />
<view @click.stop="confirm" class="searchButton">搜索</view>
</view>
<scroll-view class="scroll-view" :scroll-y="true">
<!-- <radio-group class="radio-group" @change="radioChange">
<view class="radio-group-item uiwu-flex uiwu-flex-space" v-for="(item, index) in selector" :key="index">
<text>{{ item.label }}</text>
<radio :value="item.value" color="#687CFF" />
</view>
</radio-group> -->
<nut-radio-group style="margin-left: 30rpx" v-model="selectedID">
<nut-radio icon-size="20" v-for="(item, index) in selectorCopy" :key="index" :label="item.value"> {{ item.label }}</nut-radio>
<view style="height: 40rpx"></view>
</nut-radio-group>
</scroll-view>
</view>
</view>
</nut-popup>
</view>
<!-- <picker-search ref="picker_search" @change="changeSearch" /> -->
</template>
<script setup lang="ts">
// import PickerSearch from '@/components/PickerSearch.vue'
// import picker-search from
import { IconFont } from '@nutui/icons-vue-taro'
import Taro, { useLoad, useUnload } from '@tarojs/taro'
import './dailyInspection.scss'
import { ref, computed, reactive, watch } from 'vue'
import api from '@/request/index'
import { useDailyStore } from '@/store/daily'
const picker_search = ref()
const starRating = ref<any[]>([])
const store = useDailyStore()
const daily = computed(() => store.getdailyinspection)
@ -80,7 +122,7 @@ const base64_2 = computed(() => store.get_base64_2)
const currentCkProjectId = ref('')
const submitData = ref<Item[]>([])
const enterprisesName = ref('')
const _form = reactive({
enterprisesUnitId: '', //id
ckProjectId: '', //
@ -185,6 +227,7 @@ const onChangeType = function (e: any) {
}
const selector = ref<UnitEnterprisesUnitList[]>()
const selectorCopy = ref<UnitEnterprisesUnitList[]>()
const selectorChecked = ref<string>('')
const onChange = function (e: any) {
try {
@ -202,6 +245,7 @@ const getUnitEnterprisesUnitList = async function () {
const res = await api.get<UnitEnterprisesUnitList[]>(`/policeIndex/getUnitEnterprisesUnitList`)
selector.value = res.data
selectorCopy.value = res.data
}
const _showToast = function (title) {
@ -309,4 +353,41 @@ useUnload(() => {
_form.byAssessmentEnterprisesUnitUserSignature = ''
_form.remark = ''
})
const show = ref(false)
const inputText = ref('')
const selectedID = ref('')
const openSearch = () => {
show.value = true
}
const fuzzySearch = function (query) {
selectorCopy.value = selector.value?.filter((item) => item.label.includes(query))
}
const confirm = () => {
console.log(inputText.value)
if (inputText.value.trim() === '') {
selectorCopy.value = selector.value
} else {
fuzzySearch(inputText.value.trim())
}
}
const confirm_ = ({ detail: { value } }) => {
console.log('confirm', value)
if (inputText.value.trim() === '') {
selectorCopy.value = selector.value
} else {
fuzzySearch(inputText.value.trim())
}
}
const determine = () => {
let index: number = selector.value?.findIndex((item) => item.value === selectedID.value) as number
_form.enterprisesUnitId = selectedID.value
let type = selector.value?.[index].extData.type.value
enterprisesName.value = selector.value?.[index].label as string
show.value = false
ckProjectListByType(type)
}
</script>