Merge remote-tracking branch 'origin/main'

This commit is contained in:
luozhun 2024-11-19 16:18:02 +08:00
commit fd690f3195
12 changed files with 440 additions and 89 deletions

View File

@ -3,7 +3,7 @@
<view v-if="number !== 0" class="myProjectItem" v-for="(item, index) in myProjectList" :key="index">
<view style="display: flex; justify-content: space-between">
<text>{{ item?.name }}</text>
<text>单位类型{{ item?.type.label }}</text>
<text>单位类型{{ item?.type?.label }}</text>
</view>
<view class="myProjectIndex"
>地址
@ -15,18 +15,17 @@
</view>
<view class="project">
<view @click="projectClick(item?.name, serviceProject)" v-for="(serviceProject, index) in item.serviceProjectList" :key="index">
<view style="border: 1px solid #cccccc;color: #9b9b9f">
<view style="display: flex; justify-content: space-between">
<text>项目名称{{serviceProject.name}}</text>
<text>项目类型{{serviceProject.type.label}}</text>
</view>
<view style="display: flex; justify-content: space-between">
<text>项目负责人{{serviceProject.projectManagerMiniProgramUserInfo?.name?serviceProject.projectManagerMiniProgramUserInfo?.name:'无分配项目经理'}}</text>
</view>
<view>责任单位{{serviceProject.securityUnitName}}</view>
<view style="border: 1px solid #cccccc; color: #9b9b9f">
<view style="display: flex; justify-content: space-between">
<text>项目名称{{ serviceProject.name }}</text>
<text>项目类型{{ serviceProject.type?.label }}</text>
</view>
<view style="display: flex; justify-content: space-between">
<text>项目负责人{{ serviceProject.projectManagerMiniProgramUserInfo?.name ? serviceProject.projectManagerMiniProgramUserInfo?.name : '无分配项目经理' }}</text>
</view>
<view>责任单位{{ serviceProject.securityUnitName }}</view>
</view>
</view>
</view>
</view>
<view v-else class="myProject">

View File

@ -2,14 +2,12 @@
<view class="projectDetails">
<view class="projectDetailsItem" style="line-height: 50rpx">
<view>
<view style="display: flex;justify-content: space-between">
<view style="display: flex; justify-content: space-between">
<text style="font-size: 18px">{{ enterprisesUnitName }}-----{{ serviceProject?.name }}项目</text>
<!-- <text>进行中</text>-->
</view>
<view>
<view style="float: left;width: 50%;" class="content">
经理名称:{{ serviceProject?.projectManagerMiniProgramUserInfo.name }}
</view>
<view style="float: left; width: 50%" class="content"> 经理名称:{{ serviceProject?.projectManagerMiniProgramUserInfo.name }} </view>
<view class="content">手机号:{{ serviceProject?.projectManagerMiniProgramUserInfo.telephone }}</view>
</view>
</view>
@ -47,26 +45,33 @@
<!--表格-->
<view class="projectDetailsTableDrop">
<view style="padding: 0 12px">项目人员</view>
<scroll-view :scroll-y="true" style="height: 80%;" @scrolltoupper="upper" @scrolltolower="lower"
:scroll-into-view="toView" :scroll-top="scrollTop" :refresherEnabled="true"
@refresherrefresh="onRefresherRefresh" :refresher-triggered="isRefresher"
<scroll-view
:scroll-y="true"
style="height: 80%"
@scrolltoupper="upper"
@scrolltolower="lower"
:scroll-into-view="toView"
:scroll-top="scrollTop"
:refresherEnabled="true"
@refresherrefresh="onRefresherRefresh"
:refresher-triggered="isRefresher"
>
<view class="projectDetailsTable" v-for="(item,index) in securityUserList" :key="index">
<view class="projectDetailsTable" v-for="(item, index) in securityUserList" :key="index">
<view>
<view class="projectDetailsTableItem">
<view>
<view style="display: flex;justify-content: space-between">
<view style="display: flex; justify-content: space-between">
<text>姓名:{{ item?.name ? item?.name : '创建者' }}</text>
<text>性别:{{ item.sex?.label ? item.sex?.label : ' 隐藏' }}</text>
<text>职位:{{ item.workPost ? item.workPost : '创建者' }}</text>
</view>
<view style="display: flex;justify-content: space-between">
<view style="display: flex; justify-content: space-between">
<text>保安证件:{{ item.securityNumber ? item.securityNumber : '无' }}</text>
<text>出生年月:{{ dayjs(item.dateOfBirth).format('YYYY-MM-DD') }}</text>
</view>
<view style="display: flex;justify-content: space-between">
<view style="display: flex; justify-content: space-between">
<text>创建时间:{{ item.createTime }}</text>
<text>身份证:{{ item.idCard }}</text>
<text>身份证:{{ item.idCard?.desensitizedValue }}</text>
</view>
</view>
</view>
@ -74,16 +79,15 @@
</view>
</scroll-view>
</view>
</view>
</template>
<script setup lang="ts">
import Taro, {useLoad} from "@tarojs/taro";
import Taro, { useLoad } from '@tarojs/taro'
import './projectDetails.scss'
import {ref} from "vue";
import api from "@/request/index";
import { ref } from 'vue'
import api from '@/request/index'
import dayjs from 'dayjs'
import {ServiceProjectSecurityUserPagerVo} from "@/types/subPages/projectManager/myProject";
import { ServiceProjectSecurityUserPagerVo } from '@/types/subPages/projectManager/myProject'
const serviceProject = ref()
const enterprisesUnitName = ref('')
@ -91,7 +95,7 @@ const securityUserList = ref<ServiceProjectSecurityUserPagerVo[]>([])
useLoad(async (options) => {
enterprisesUnitName.value = options.enterprisesUnitName
serviceProject.value = JSON.parse(options.serviceProject)
console.log(serviceProject.value);
console.log(serviceProject.value)
await projectDetailsTable()
})
const projectDetailsTable = async () => {
@ -104,8 +108,8 @@ const projectDetailsTable = async () => {
},
page: {
size: 4,
current: current.value
}
current: current.value,
},
}
const resp = await api.post<PagerVo<ServiceProjectSecurityUserPagerVo>>('/miniProgramUser/securityUserPager', queryParams)
securityUserList.value = [...securityUserList.value, ...resp.data!.records]
@ -134,7 +138,7 @@ const lower = () => {
const onRefresherRefresh = (e) => {
securityUserList.value = []
total.value = null
current.value = 1 //
current.value = 1 //
isRefresher.value = true
console.log('自定义下拉刷新被触发:', e)
projectDetailsTable()

View File

@ -15,7 +15,7 @@ export interface MyProjectList {
securityUnitId: string;
street?: string;
streetName?: string;
type?:any
type?: any
}
export interface ContactPersonInfo {
@ -31,7 +31,7 @@ export interface ServiceProjectList {
name?: string;
remark?: string;
securityUserTotal?: number;
securityUnitName?:string;
securityUnitName?: string;
serviceArea?: number;
snowFlakeId?: string;
staffTotal?: number;
@ -45,11 +45,16 @@ export interface ProgramUserInfo {
telephone?: string
}
export interface ServiceProjectSecurityUserPagerVo {
createTime?: string;
dateOfBirth?: string;
homeAddress?: string;
idCard?: string;
idCard?: {
originalValue: string;
desensitizedValue: string;
};
name?: string;
nativePlace?: string;
remark?: string;
@ -60,4 +65,5 @@ export interface ServiceProjectSecurityUserPagerVo {
snowFlakeId: string;
workPost?: string;
sex: BaseEnum<number>
}

View File

@ -12,11 +12,13 @@ VITE_APP_PROXY_URL=http://172.10.10.93:8765
# rsa 公钥
VITE_APP_RSA_PUBLIC_KEY=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJps/EXxxSpEM1Ix4R0NWIOBciHCr7P7coDT8tNKfelgR7txcJOqHCO/MIWe7T04aHQTcpQxqx9hMca7dbqz8TZpz9jvLzE/6ZonVKxHsoFnNlHMp1/CPAJ9f6D9wYicum2KltJkmQ0g//D9W2zPCYoGOmSRFcZx/KEBa4EM53jQIDAQAB
# 高德
VITE_APP_GAODE_KEY=ca549d915cb38803582ca7e85c5f972c
VITE_APP_GAODE_VERSION=2.0
VITE_APP_SECURITY_JS_CODE=f464462874676b3f1469780a62e5b921
# VITE_APP_GAODE_KEY=f379a3f860a68d7438526275d6a94b05
# 高德 myx
# VITE_APP_GAODE_KEY=ca549d915cb38803582ca7e85c5f972c
# VITE_APP_GAODE_VERSION=2.0
# VITE_APP_SECURITY_JS_CODE=432125a0f8d8cad2dac38b77d6f6728f
# VITE_APP_SECURITY_JS_CODE=f464462874676b3f1469780a62e5b921
# 高德 lz
VITE_APP_GAODE_KEY=f379a3f860a68d7438526275d6a94b05
VITE_APP_GAODE_VERSION=2.0
VITE_APP_SECURITY_JS_CODE=432125a0f8d8cad2dac38b77d6f6728f

View File

@ -10,14 +10,17 @@ declare module 'vue' {
AAvatar: typeof import('ant-design-vue/es')['Avatar']
AButton: typeof import('ant-design-vue/es')['Button']
ACascader: typeof import('ant-design-vue/es')['Cascader']
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
ACol: typeof import('ant-design-vue/es')['Col']
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
ADivider: typeof import('ant-design-vue/es')['Divider']
AdministrativeDivisionTree: typeof import('./src/components/tree/AdministrativeDivisionTree.vue')['default']
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
AForm: typeof import('ant-design-vue/es')['Form']
AFormItem: typeof import('ant-design-vue/es')['FormItem']
AImage: typeof import('ant-design-vue/es')['Image']
AInput: typeof import('ant-design-vue/es')['Input']
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
@ -29,6 +32,7 @@ declare module 'vue' {
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
APopover: typeof import('ant-design-vue/es')['Popover']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
@ -38,6 +42,9 @@ declare module 'vue' {
ASpin: typeof import('ant-design-vue/es')['Spin']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ATable: typeof import('ant-design-vue/es')['Table']
ATabPane: typeof import('ant-design-vue/es')['TabPane']
ATabs: typeof import('ant-design-vue/es')['Tabs']
ATag: typeof import('ant-design-vue/es')['Tag']
ATextarea: typeof import('ant-design-vue/es')['Textarea']
ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
ATimeRangePicker: typeof import('ant-design-vue/es')['TimeRangePicker']

View File

@ -24,7 +24,7 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
const _mapRef = ref<ComponentExposed<typeof MapContainer>>(null)
const _formParams = ref<_FormType>({ ...params })
let city = '全国'
let city = ''
const initMarker = (map: AMap.Map) => {
//添加maker点 设置point
const maker = new AMap.Marker({

View File

@ -1,8 +1,198 @@
<template>
<div>
<!-- 三色预警 -->
三色预警
<TableProMax ref="tableRef" :request-api="reqApi" :columns="columns">
</TableProMax>
<div>
<a-modal v-model:open="open" :title="title" @ok="open = false" width="80%">
<a-table :columns="TableColumns" :data-source="TableData" bordered >
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
<div>{{text}}{{column}}</div>
</template>
</template>
</a-table>
</a-modal>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="tsx">
import TableProMax from "@/components/table/TableProMax.vue";
import api from "@/axios";
import {TableProMaxProps} from "@/types/components/table";
import {
AssessmentRecordPagerQueryParams,
AssessmentRecordPagerVo, DeductedDetailRes,
} from "@/types/views/assessmentRecord.ts";
import {ComponentExposed} from "vue-component-type-helpers";
import { ref} from "vue";
import {Modal, TableColumnType} from "ant-design-vue";
const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
type TableProps = TableProMaxProps<AssessmentRecordPagerVo,AssessmentRecordPagerQueryParams>
const open = ref<boolean>(false);
const title = ref('扣分项')
const reqApi: TableProps['requestApi'] = (params) => api.post('/assessmentRecord/pager', params) //
const columns: TableProps['columns'] = [
{
dataIndex: 'enterprisesUnitName',
title: '单位名称'
}, {
dataIndex: 'type',
title: '类型',
customRender: ({text}) => text?.label
}, {
dataIndex: 'ckProjectName',
title: '考核项目'
}, {
dataIndex: 'totalScore',
title: '总分'
}, {
dataIndex: 'deductionPointsTotal',
title: '扣分',
customRender:({record})=>{
if (!record.deductionPointsTotal) {
return <a-tag color="green">0</a-tag>
}
return <a-tag class="pointer" color="red" onClick={()=>deductedDetail(record)}>{record.deductionPointsTotal}</a-tag>
}
}, {
dataIndex: 'result',
title: '得分',
customRender: ({record}) => record.totalScore - record.deductionPointsTotal
}, {
dataIndex: 'policeUnitName',
title: '考核单位'
}, {
dataIndex: 'createUserName',
title: '考核人'
}, {
dataIndex: 'createTime',
title: '考核时间'
}, {
dataIndex: 'remark',
title: '考核备注'
}, {
dataIndex: 'signature',
title: '签字',
customRender:({record})=>{
return <a-button onClick={()=>{
Modal.info({
title: `${record.enterprisesUnitName}${record.ckProjectName} 签字结果`,
content: () => <>
<div>审核人签字: <a-image src={record.assessmentUserSignature}/>
</div>
<div>被审核单位人员签字: <a-image src={record.byAssessmentEnterprisesUnitUserSignature}/></div>
</>
})
}}>查看</a-button>
},
}
]
const TableData = [
{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
},
{
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
},
];
const sharedOnCell = (_, index) => {
if (index === 4) {
return { colSpan: 0 };
}
};
const TableColumns: TableColumnType[] = [
{
title: 'Name',
dataIndex: 'name',
customCell: (_, index) => ({
colSpan: index < 4 ? 1 : 5,
}),
},
{
title: 'Age',
dataIndex: 'age',
customCell: sharedOnCell,
},
{
title: 'Home phone',
colSpan: 2,
dataIndex: 'tel',
customCell: (_, index) => {
if (index === 2) {
return { rowSpan: 2 };
}
// These two are merged into above cell
if (index === 3) {
return { rowSpan: 0 };
}
if (index === 4) {
return { colSpan: 0 };
}
},
},
{
title: 'Phone',
colSpan: 0,
dataIndex: 'phone',
customCell: sharedOnCell,
},
{
title: 'Address',
dataIndex: 'address',
customCell: sharedOnCell,
},
];
const deductedDetail = async (res:any)=>{
const {data} = await api.get<DeductedDetailRes[]>('/assessmentRecord/deductedDetail', {assessmentRecordId: res.snowFlakeId})
open.value = true
console.log(data)
}
</script>
<style scoped lang="scss">
</style>

View File

@ -8,6 +8,7 @@ type DictType =
| 'Sex'
| 'ServiceProjectType'
| 'MiniProgramUserIdentity'
| 'ServiceProjectTwoType'
export const initEnums = () => {
api.get<Record<DictType, SelectNodeVo<any>[]>>('/common/enums').then(resp => {

View File

@ -2,7 +2,7 @@ import {defineStore} from "pinia";
import {TokenInfo, UserStore} from "@/types/stores/userStore.ts";
export const useUserStore = defineStore({
id: 'useUserStore',
id: 'baUserStore',
state: (): UserStore => {
return {
tokenInfo: undefined,
@ -20,7 +20,7 @@ export const useUserStore = defineStore({
getTokenInfo: (state): TokenInfo => state.tokenInfo as TokenInfo,
},
persist: {
key: "useUserStore",
key: "baUserStore", //spUserStore
storage: window.localStorage,
paths: ["tokenInfo"],
}

View File

@ -8,7 +8,9 @@ export interface serviceProjectSaveOrUpdateParams extends BaseTableRowRecord {
projectManagerMiniProgramUserName: string,
name: string,
type: TypeEnum<string>,
isRecruitSecurity: BaseEnum<number>,
twoType: BaseEnum<any>,
outsourceName:string,
isFiling:BaseEnum<number>,
idNumber: string,
serviceArea: number,
buildingTotal: number,

View File

@ -29,7 +29,7 @@
import TableProMax from "@/components/table/TableProMax.vue";
import {TableProMaxProps} from "@/types/components/table";
import api from "@/axios";
import {onMounted, ref} from "vue";
import {computed, onMounted, ref} from "vue";
import {ComponentExposed} from "vue-component-type-helpers";
import {dictSelectNodes} from "@/config/dict.ts";
import {serviceProjectSaveOrUpdateParams} from "@/types/views/serviceManagement.ts";
@ -81,7 +81,9 @@ const formParams = ref<{
projectManagerMiniProgramUserName?:string
name: string,
type:string,
isRecruitSecurity:number,
twoType?: number,
outsourceName?:string,
isFiling?:number,
idNumber?: string,
serviceArea?:number,
buildingTotal?:number,
@ -91,9 +93,8 @@ const formParams = ref<{
remark?: string,
}>({
name:'',
isRecruitSecurity:0,
enterprisesUnitId:null,
type:'property'
type:'security'
})
const columns: TableProps['columns'] = [
@ -123,8 +124,19 @@ const columns: TableProps['columns'] = [
width:100
},
{
dataIndex:'isRecruitSecurity',
title: '是否自招保安',
dataIndex:'twoType',
title: '二级类型',
customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
width:120
},
{
dataIndex:'outsourceName',
title: '外包公司名称',
width:120
},
{
dataIndex:'isFiling',
title: '是否备案',
customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
width:120
},
@ -196,22 +208,14 @@ const columns: TableProps['columns'] = [
console.log(record,'9999999')
visible.value = true
serviceTitle.value = '编辑服务项目'
if(record.isRecruitSecurity === null ){
idNumberDisabled.value = false
}
if(record.type.value === 'security'){
isRecruitSecurityHidden.value = true
formParams.value.isRecruitSecurity = null
}else{
formParams.value.isRecruitSecurity = record.isRecruitSecurity.value
if(record.isRecruitSecurity.value === 1){
idNumberDisabled.value = true
}
}
idNumberDisabled.value = record.twoType.value !== 'outsource';
formParams.value.projectManagerMiniProgramUserId = record.projectManagerMiniProgramUserId
formParams.value.snowFlakeId = record.snowFlakeId
formParams.value.name = record.name
formParams.value.type = record.type.value
formParams.value.twoType = record.twoType.value
formParams.value.outsourceName = record.outsourceName
formParams.value.isFiling = record.isFiling.value
formParams.value.remark = record.remark
formParams.value.idNumber = record.idNumber
formParams.value.serviceArea = record.serviceArea
@ -246,9 +250,14 @@ const projectManagerMiniProgram = async()=>{
//
const enterprisesUnitIdList = ref<SelectNodeVo<string>[]>([])
const enterprisesUnitId = ref('')
const isRecruitSecurityHidden = ref<boolean>(false)
const isRecruitSecurityHidden = ref<boolean>(false)
const idNumberDisabled = ref<boolean>(false)
// options
const netType = computed(() => {
return formParams.value.type === 'security' ? dictSelectNodes("ServiceProjectTwoType") : dictSelectNodes("UserType" as any)
})
const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdateParams>>({
name: {
type: 'input',
@ -292,35 +301,47 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
required: true,
componentsProps:{
onChange:(e)=>{
if(e.target.value === 'security'){
isRecruitSecurityHidden.value = true
formParams.value.isRecruitSecurity = null
idNumberDisabled.value = false
}else{
formParams.value.isRecruitSecurity = 0
if(e.target?.value === 'security'){
isRecruitSecurityHidden.value = false
formParams.value.twoType = null
}else{
formParams.value.twoType = null
isRecruitSecurityHidden.value = true
}
}
}
},
isRecruitSecurity: {
twoType: {
type: 'radioGroup',
label: '是否自招保安',
options:dictSelectNodes('IsOrNot'),
hidden:isRecruitSecurityHidden as any,
label: '二级类型',
options:netType,
componentsProps:{
onChange:(e)=>{
idNumberDisabled.value = e.target.value !== 0;
formParams.value.idNumber = ''
}
if(e.target.value !== "outsource"){
idNumberDisabled.value = true
formParams.value.outsourceName = ''
}else{
idNumberDisabled.value = false
}
},
}
},
outsourceName:{
type: 'input',
label: '外包公司名称',
hidden:idNumberDisabled as any
},
isFiling:{
type: 'radioGroup',
label: '是否备案',
options:dictSelectNodes('IsOrNot'),
},
idNumber: {
type: 'input',
label: '保安服务许可证',
componentsProps:{
disabled:idNumberDisabled as any
}
// componentsProps:{
// disabled:idNumberDisabled as any
// }
},
serviceArea:{
type:'inputNumber',
@ -372,6 +393,10 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
label: '备注',
}
})
const UnitId = ref('')
const submit = async()=>{
await formRef.value.validate()
@ -389,7 +414,9 @@ const submit = async()=>{
projectManagerMiniProgramUserId:formParams.value.projectManagerMiniProgramUserId,
name: formParams.value.name,
type:formParams.value.type,
isRecruitSecurity:formParams.value.isRecruitSecurity,
twoType: formParams.value.twoType,
outsourceName:formParams.value.outsourceName,
isFiling:formParams.value.isFiling,
idNumber: formParams.value.idNumber,
serviceArea:formParams.value.serviceArea,
buildingTotal:formParams.value.buildingTotal,
@ -410,8 +437,7 @@ const closeModal = async()=>{
enterprisesUnitId:'',
administrativeDivisionCodes:'',
name:'',
type:'property',
isRecruitSecurity:0,
type:'security',
idNumber:'',
serviceArea:null,
buildingTotal:null,
@ -420,10 +446,10 @@ const closeModal = async()=>{
securityUserTotal:null,
remark:''
}
await formRef.value.resetFields()
formRef.value.resetFields()
enterprisesUnitId.value = ''
serviceTitle.value = '新增服务项目'
isRecruitSecurityHidden.value = false
// isRecruitSecurityHidden.value = false
idNumberDisabled.value = false
}
const addServiceProjects = () => {

View File

@ -0,0 +1,114 @@
<template>
<div class="search" id="search">
<a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input>
<div v-if="valueInput">
<ul>
<li v-for="item in searchResults" :key="item.id">{{item}}</li>
</ul>
</div>
<div v-else >
没有找到相关结果
</div>
</div>
</template>
<script setup lang="ts">
import {onMounted, ref,} from "vue";
const valueInput = ref('')
const list = ref([])
const dataList = ref([
{
id:0,
value:'齐家园'
},
{
id:1,
value:'刘德华'
},
{
id:2,
value:'张学友'
},{
id:3,
value:'黎明'
},
{
id:4,
value:'家具城'
},
{
id:5,
value:'左岸春天'
},
{
id:6,
value:'麦德龙商城'
},
{
id:7,
value:'世纪酒店'
},
{
id:8,
value:'四方小学'
},
{
id:9,
value:'海洋半岛'
},
{
id:10,
value:'育英小学'
},
{
id:11,
value:'明德小学'
},{
id:12,
value:'希望小学',
}
])
const searchResults = ref([])
const searchInput = (e:any)=>{
valueInput.value = e.target.value
if (!valueInput.value) {
searchResults.value = []
return;
}else{
searchResults.value = list.value.filter(item =>
item.toLowerCase().includes(valueInput.value.toLowerCase())
);
}
}
// watch(()=>valueInput.value,(value)=>{
// if(!value){
// searchResults.value = []
// }
// })
onMounted(()=>{
dataList.value.map((item)=>{
return list.value.push(item.value)
})
})
</script>
<style scoped lang="scss">
.search{
padding: 0 10px;
overflow: hidden;
border: 1px solid #4e71f2;
margin: 1px 5px;
border-radius: 10px;
width: 30%;
.ceShi{
height: 300px;
background: #ccc;
}
}
.nut-input{
padding: 20rpx 20rpx;
margin: 5px 0;
}
</style>