Skip to content

G
GaoQuYingJiH5-ASD
Commit 263e92c1 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add:检查类目

parent b14a7461
Hide whitespace changes
Inline Side-by-side
Showing with 271 additions and 0 deletions
src/checklist.html 0 → 100644
View file @ 263e92c1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>消防安全检查清单</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<head>
<style>
html,
body {
background-color: #fff;
}
.pd-01rem {
padding-bottom: 0.1rem;
}
/* 表单相关 */
.formValue {
float: right;
}
.formSubmitBtnWrapper {
display: flex;
justify-content: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.formSubmitBtnWrapper .van-button {
width: 4rem;
}
/**
* 框架样式覆盖修改
*/
.van-cell__value {
overflow: unset;
}
.van-cell:after {
border-bottom: none;
}
.van-radio-group--horizontal {
float: right;
}
.checklist-container {
padding: 12px;
background: #f7f8fa;
}
.check-item {
margin-bottom: 16px;
padding: 12px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.item-header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.item-number {
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
background: #1989fa;
color: white;
border-radius: 50%;
margin-right: 12px;
}
.expand-section {
margin-top: 12px;
border: 2px solid #000;
}
.sub-checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 8px 0;
}
.uploader-wrapper {
--van-uploader-size: 80px;
}
.deadline-picker {
display: flex;
gap: 12px;
margin: 12px 0;
}
</style>
</head>
<body>
<div id="app">
<div class="checklist-container">
<div v-for="(item, index) in checklist" :key="item.id" class="check-item">
<div class="item-header">
<div class="item-number">{{ index + 1 }}</div>
<div class="item-title">{{ item.title }}</div>
</div>
<!-- 单选按钮组 -->
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)">
<van-radio name="yes">是</van-radio>
<van-radio name="no">否</van-radio>
<van-radio name="na">不涉及</van-radio>
</van-radio-group>
<!-- 否选项扩展内容 -->
<div v-show="item.selected === 'no'" class="expand-section" style="width: 100vw;">
<div>
<!-- 子检查项 -->
<div class="sub-checkbox-group">
<van-checkbox v-for="(subItem, subIndex) in item.subChecks" :key="subIndex"
v-model="subItem.checked" shape="square">
隐患点{{ subIndex + 1 }}
</van-checkbox>
</div>
<!-- 隐患描述 -->
<!-- <van-field
v-model="item.description"
type="textarea"
rows="2"
placeholder="请填写具体隐患情况"
label="隐患描述"
/> -->
<van-cell-group>
<van-cell>
<div>
<van-field v-model="item.description" type="textarea" rows="2"
placeholder="请填写具体隐患情况" label="隐患描述"></van-field>
</div>
</van-cell>
</van-cell-group>
<!-- 照片上传 -->
<van-cell-group>
<van-cell>文件:<span style="color: red;">(格式png/jpg/jpeg)</span>
<div>
<van-uploader
style="width: 80px; height:80px;"
v-model="item.photos"
:max-count="3"
:after-read="handleFileUpload"
class="uploader-wrapper"
/>
</div>
</van-cell>
</van-cell-group>
<!-- <van-uploader
style="width: 80px; height:80px;"
v-model="item.photos"
:max-count="3"
:after-read="handleFileUpload"
class="uploader-wrapper"
/> -->
<van-cell-group>
<van-cell >
<div>
<van-field label-align="right" readonly clickable label="整改期限" :value="`${item.deadlineDays}天 截至整改日期：${item.deadlineDate}`"
@click="showDeadlinePicker = true" />
</div>
</van-cell>
</van-cell-group>
</div>
</div>
</div>
<!-- 整改天数选择器 -->
<van-popup v-model="showDeadlinePicker" position="bottom">
<van-picker :columns="deadlineOptions" @confirm="handleDeadlineConfirm" show-toolbar title="选择整改天数" />
</van-popup>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script>
<script>
// 初始化检查项数据结构
function createCheckItem(id) {
return {
id: id,
title: `检查项目 ${id}`,
selected: null,
subChecks: Array.from({ length: 10 }, (_, i) => ({
id: i + 1,
checked: false
})),
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}
}
new Vue({
el: '#app',
data: {
showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null,
checklist: Array.from({ length: 40 }, (_, i) => createCheckItem(i + 1))
},
methods: {
// 处理单选变化
handleSelectionChange(item) {
if (item.selected !== 'no') {
this.$set(item, 'description', '')
this.$set(item, 'photos', [])
this.$set(item, 'deadlineDays', '')
this.$set(item, 'deadlineDate', '')
}
},
// 文件上传处理
handleFileUpload(file) {
console.log('上传文件:', file)
// 此处可添加实际文件上传逻辑
},
// 整改天数确认
handleDeadlineConfirm(value) {
const days = parseInt(value)
const currentItem = this.checklist.find(
item => item.selected === 'no' && !item.deadlineDays
)
if (currentItem) {
currentItem.deadlineDays = days
const deadlineDate = new Date()
deadlineDate.setDate(deadlineDate.getDate() + days)
currentItem.deadlineDate = this.formatDate(deadlineDate)
}
this.showDeadlinePicker = false
},
// 日期格式化
formatDate(date) {
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}
}
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment