将文件中的是否符合下拉框改为和筛选检查区域相同的picker标签

为了将文件中的“是否符合”下拉框（`<select>`）改为与筛选检查区域相同的 `<picker>` 标签，你需要进行以下修改： ### 修改前的代码片段 #### 日常检查部分 ```html <select v-model="item.complianceStatus" @change="handleComplianceChange(item)" class="compliance-status-select"> <option value="符合">符合</option> <option value="不符合">不符合</option> </select> ``` #### 专项检查部分 ```html <select v-model="item.complianceStatus" @input="handleComplianceChange(item)" class="compliance-status-select"> <option value="符合">符合</option> <option value="不符合">不符合</option> </select> ``` ### 修改后的代码片段 #### 日常检查部分 ```html <picker mode="selector" :range="['符合', '不符合']" @change="handleComplianceChange($event, item)"> <view class="picker">{{ item.complianceStatus ? item.complianceStatus : '请选择是否符合' }}</view> </picker> ``` #### 专项检查部分 ```html <picker mode="selector" :range="['符合', '不符合']" @change="handleComplianceChange($event, item)"> <view class="picker">{{ item.complianceStatus ? item.complianceStatus : '请选择是否符合' }}</view> </picker> ``` ### 修改方法说明 1. **替换 `<select>` 为 `<picker>`**: - 将 `<select>` 替换为 `<picker>` 标签，并设置 `mode="selector"`。 - 使用 `:range` 属性指定选项数组 `['符合', '不符合']`。 2. **事件处理**: - 使用 `@change` 事件来处理选择变化，传递 `$event` 和 `item` 参数。 - 在 `methods` 中定义 `handleComplianceChange` 方法来处理选择的变化。 ### 更新 `methods` 部分 在 `methods` 中添加或更新 `handleComplianceChange` 方法： ```javascript methods: { // 其他方法... handleComplianceChange(event, item) { const selectedIndex = event.detail.value; const options = ['符合', '不符合']; item.complianceStatus = options[selectedIndex]; // 可以在此处添加其他逻辑，例如更新数据等 } } ``` ### 完整的示例代码 以下是完整的示例代码，包括修改后的部分： ```html <template> <view class="container"> <!-- Tab 切换按钮 --> <view class="tab-bar"> <view class="tab-item" @click="currentTab = 'tab1'" :class="{ active: currentTab === 'tab1' }">日常检查</view> <view class="tab-item" @click="currentTab = 'tab2'" :class="{ active: currentTab === 'tab2' }">专项检查</view> </view> <label></label> <text>主任务名称：{{ taskId }}</text> <!-- Tab 内容区域 --> <view class="tab-content"> <view v-if="currentTab === 'tab1'" class="tab-page"> <!-- 使用 picker 代替 select --> <picker mode="selector" :range="tab1Areas" range-key="AREA_NAME" @change="onTab1PickerChange" :value="tab1SelectedIndex"> <view class="picker">{{ tab1SelectedArea ? tab1SelectedArea : '请选择检查区域' }}</view> </picker> <view class="filter-bar"></view> <view class="text-wrapper"> <view v-for="(item, index) in tab1Data.rows" :key="index" class="text-item"> <span class="input-prefix">检查内容: </span> <input type="text" readonly v-model="item.Main_task_Nopri" class="input-field" /> <br /> <span class="input-prefix">危险源: </span> <input type="text" readonly v-model="item.dangerous" class="input-field" /> <br /> <span class="input-prefix">工程技术措施: </span> <input type="text" readonly v-model="item.Engineering_measures" class="input-field" /> <br /> <span class="input-prefix">管理措施: </span> <input type="text" readonly v-model="item.management_measure" class="input-field" /> <br /> <!-- 修改后的 picker --> <picker mode="selector" :range="['符合', '不符合']" @change="handleComplianceChange($event, item)"> <view class="picker">{{ item.complianceStatus ? item.complianceStatus : '请选择是否符合' }}</view> </picker> <br /> <button v-if="item.complianceStatus === '不符合'" @click="showDetail(item)">录入隐患</button> </view> </view> </view> <view v-if="currentTab === 'tab2'" class="tab-page"> <!-- 使用 picker 代替 select --> <picker mode="selector" :range="tab2Areas" range-key="AREA_NAME" @change="onTab2PickerChange" :value="tab2SelectedIndex"> <view class="picker">{{ tab2SelectedArea ? tab2SelectedArea : '请选择检查区域' }}</view> </picker> <view class="text-wrapper"> <view v-for="(item, index) in anotherData.rows" :key="index" class="text-item"> <span class="input-prefix">检查项目: </span> <input type="text" readonly v-model="item.check_pro" class="input-field" /> <br /> <span class="input-prefix">检查区域: </span> <input type="text" readonly v-model="item.AREA_NAME" class="input-field" /> <br /> <span class="input-prefix">检查标准:</span> <input type="text" readonly v-model="item.check_sta" @click="showCheckStandardModal(item.check_sta)" /> <br /> <u-form-item class="picupload" label="检查人签字:" prop="upload" labelWidth=80px> <u-upload width="80" height="40" maxCount="6" @on-success="uploadUpload" @on-remove="delUpload" action="" v-model="upload"></u-upload> </u-form-item> <u-form-item class="picupload1" label="被检查区域负责人签字:" prop="upload" labelWidth="80px"> <div style="display:flex; justify-content-between;"> <u-upload width="80" height="40" maxCount="6" :action="actionUrl" v-model="upload" @on-success="uploadUpload" @on-remove="delUpload"></u-upload> <button type="button" class="btn-add-file" @click="handleAddFile">点击进入签名</button> </div> </u-form-item> <!-- 修改后的 picker --> <picker mode="selector" :range="['符合', '不符合']" @change="handleComplianceChange($event, item)"> <view class="picker">{{ item.complianceStatus ? item.complianceStatus : '请选择是否符合' }}</view> </picker> <br /> <button v-if="item.complianceStatus === '不符合'" @click="showDetail(item)">录入隐患</button> </view> </view> </view> </view> <!-- 弹窗组件 --> <view v-if="isModalVisible" class="modal"> <view class="modal-content"> <h3>详细信息</h3> <form @submit.prevent="updateItem"> <u-form-item class="picupload" label="隐患图片" prop="upload" labelWidth=80px> <u-upload width="80" height="40" maxCount="6" @on-success="uploadUpload" @on-remove="delUpload" action="" v-model="upload"></u-upload> </u-form-item> <div> <label>隐患描述:</label> <input type="text" id="DANGER_DESC" v-model="selectedItem.DANGER_DESC" /> </div> <button type="submit" style="width: 100px; height: 50px; font-size: 20px;">保存</button> <button @click="closeModal" style="width: 100px; height: 50px; font-size: 20px;">关闭</button> </form> </view> </view> <view v-if="isAnotherModalVisible" class="modal"> <view class="modal-content"> <h3>检查标准详情</h3> <div> <p>{{ selectedItemForModal.check_sta }}</p> </div> <button @click="closeModal" style="width: 100px; height: 50px; font-size: 20px;">关闭</button> </view> </view> </view> </template> <script> import request from '@/utils/request'; import { getToken } from '@/utils/auth'; export default { data() { return { currentTab: 'tab1', tab1Data: { status: null, rows: [], originalRows: [] }, tab1SelectedIndex: null, tab1SelectedArea: '', taskId: '', anotherData: { status: null, rows: [], originalRows: [] }, tab2SelectedIndex: null, tab2SelectedArea: '', isModalVisible: false, isAnotherModalVisible: false, selectedItem: { name: '', complianceStatus: '符合', hazardDescription: '' }, tab1Areas: [], tab2Areas: [], selectedItemForModal: null, upload: [], actionUrl: '' }; }, methods: { fetchTab1Data() { request({ url: '/api/check_carryout_record_daily/getPageData', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, data: {}, dataType: 'json' }).then(response => { this.tab1Data.originalRows = response.rows.map(item => ({ ...item, complianceStatus: '符合' })); this.filterData(this.tab1Data); this.tab1Areas = [...new Set(response.rows.map(item => item.AREA_NAME))]; }).catch(error => { console.error('Failed to fetch tab1 data:', error); uni.showToast({ title: '请求失败', icon: 'none' }); }); }, fetchTab2Data() { request({ url: '/api/check_carryout_record/getPageData', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, dataType: 'json' }).then(response => { this.anotherData.originalRows = response.rows.map(item => ({ ...item, complianceStatus: '符合' })); this.filterTab2Data(this.anotherData); this.tab2Areas = [...new Set(response.rows.map(item => item.AREA_NAME))]; }).catch(error => { console.error(error); uni.showToast({ title: '请求失败', icon: 'none' }); }); }, showCheckStandardModal(checkSta) { this.selectedItem = { checkSta }; this.isModalVisible = true; }, onTab1PickerChange(e) { const index = e.detail.value; this.tab1SelectedIndex = index; this.tab1SelectedArea = this.tab1Areas[index]; this.filterData(this.tab1Data); }, onTab2PickerChange(e) { const index = e.detail.value; this.tab2SelectedIndex = index; this.tab2SelectedArea = this.tab2Areas[index]; this.filterTab2Data(this.anotherData); }, filterData(data) { if (!data.originalRows) { console.error('originalRows is not initialized'); return; } const taskId = String(this.taskId); data.rows = data.originalRows.filter(item => { return String(item.Main_task_Nopri) === taskId && (!this.tab1SelectedArea || item.AREA_NAME === this.tab1SelectedArea); }); }, filterTab2Data(data) { const taskId = String(this.taskId); if (Array.isArray(data.originalRows)) { data.rows = data.originalRows.filter(item => { return String(item.Main_task_Nopri) === taskId && (!this.tab2SelectedArea || item.AREA_NAME === this.tab2SelectedArea); }); } else { console.warn('data.originalRows is not a valid array'); data.rows = []; } }, showDetail(item) { this.selectedItem = { ...item }; this.isModalVisible = true; }, closeModal() { this.isModalVisible = false; }, updateItem() { request({ url: '/api/update_item', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, data: this.selectedItem, dataType: 'json' }).then(response => { this.closeModal(); this.fetchTab1Data(); uni.showToast({ title: '更新成功', icon: 'success' }); }).catch(error => { console.error(error); uni.showToast({ title: '更新失败', icon: 'none' }); }); }, handleComplianceChange(event, item) { const selectedIndex = event.detail.value; const options = ['符合', '不符合']; item.complianceStatus = options[selectedIndex]; }, onLoad(options) { if (options.id) { this.taskId = decodeURIComponent(options.id); } this.fetchTab1Data(); this.fetchTab2Data(); }, mounted() { this.$nextTick(() => { this.filterData(this.tab1Data); this.filterTab2Data(this.anotherData); }); } } }; </script> <style lang="scss"> /* 保留原有的样式不变 */ .container { padding: 10px; background-color: #f9f9f9; } .compliance-status-select { width: 300px; height: 25px; } .input-prefix { display: inline-block; vertical-align: middle; width: 105px; padding: 0px; background-color: #ffffff; text-align: left; font-size: 16px; } .input-field { border: 1px solid #ccc; border-radius: 4px; height: 30px; margin-bottom: -20px; } .text-value { display: inline-block; vertical-align: middle; width: calc(100% - 110px); padding: 10px; border: none; border-radius: 4px; margin-left: 15px; font-size: 16px; } .tab-bar { display: flex; justify-content: space-around; background-color: #f1f1f1; padding: 10px 0; } .tab-item { flex: 1; text-align: center; padding: 10px 0; cursor: pointer; } .tab-item.active { color: #409EFF; border-bottom: 2px solid #409EFF; } .tab-content { margin-top: 10px; } .tab-page { padding: 12px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .text-item { margin-bottom: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; .input-prefix + .input-field, .input-prefix + select, .input-prefix + button { margin-top: 5px; } } .picker { padding: 10px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal-content { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0,