单位 选择 替换为 搜索组件

单位 选择 替换为 搜索组件

collect_information/src/picker-search/picker-search.json.ts

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

collect_information/src/picker-search/picker-search.scss

@@ -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;
+}

collect_information/src/picker-search/picker-search.vue

@@ -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>

collect_information/src/subPages/police/dailyInspection/dailyInspection.scss

@@ -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);
+}

collect_information/src/subPages/police/dailyInspection/dailyInspection.vue

@@ -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>