parent
ac1dc62adc
commit
ab386a85c7
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
"component": true
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue