608 lines
15 KiB
Vue
608 lines
15 KiB
Vue
<template>
|
||
<view class="page padding">
|
||
<view class="padding radius bg-white">
|
||
<view class="flex margin-bottom ">
|
||
<view class="text-gray">检查表名称</view>
|
||
<view class="text-red">*</view>
|
||
</view>
|
||
<up-input placeholder="请输入检查表名称" border="surround"></up-input>
|
||
<view class="flex margin-bottom margin-top">
|
||
<view class="text-gray">分派单位</view>
|
||
<view class="text-red">*</view>
|
||
</view>
|
||
<up-select placeholder="请选择分派单位" v-model:current="cateId" label="湘西自治州和谐网络科技有限公司" :options="cateList" @select="selectItem" ></up-select>
|
||
<view class="margin-bottom margin-top">补充说明</view>
|
||
<up-textarea v-model="value1" placeholder="请输入内容" ></up-textarea>
|
||
<view class="margin-bottom margin-top" >运行模式</view>
|
||
<up-select placeholder="请选择分派单位" v-model:current="cateId" label="全员" :options="cateList" @select="selectItem" ></up-select>
|
||
<view class="margin-bottom margin-top" >部门</view>
|
||
<up-select placeholder="请选择分派单位" v-model:current="cateId" label="选择部门" :options="cateList" @select="selectItem" ></up-select>
|
||
<view class="margin-bottom margin-top" >周期</view>
|
||
<up-select placeholder="请选择分派单位" v-model:current="cateId" label="每天一次" :options="cateList" @select="selectItem" ></up-select>
|
||
<view class="margin-bottom margin-top" >工作日</view>
|
||
<view class="flex">
|
||
<up-switch v-model="value" @change="change" activeColor="#07C160 " class="margin-right"></up-switch>
|
||
<up-switch v-model="value" @change="change" activeColor="#07C160 "></up-switch>
|
||
</view>
|
||
<view class="margin-bottom margin-top" @click="show = true">开始日期</view>
|
||
<up-calendar :show="show" :mode="mode" @confirm="confirm"></up-calendar>
|
||
<view class="margin-bottom margin-top" @click="show = true">结束日期</view>
|
||
<up-calendar :show="show" :mode="mode" @confirm="confirm"></up-calendar>
|
||
<view class="margin-bottom margin-top">已添加的检查项（31项）</view>
|
||
<view>
|
||
<view class="flex margin-bottom">
|
||
<view style="white-space: nowrap;">检查库：</view>
|
||
<view>应急管理部门非煤地下矿山领域标准化检查表</view>
|
||
</view>
|
||
<view class="flex margin-bottom">
|
||
<view style="white-space: nowrap;">关联表名：</view>
|
||
<view>应急管理部门非煤地下矿山领域标准化检查表</view>
|
||
</view>
|
||
<view class="flex margin-bottom">
|
||
<view>检查项数量：</view>
|
||
<view>31项</view>
|
||
</view>
|
||
<view class="btn-right">
|
||
<button class="bg-red cu-btn ">删除</button>
|
||
</view>
|
||
<view class="margin-bottom margin-top">添加检查项</view>
|
||
<view class="flex justify-between">
|
||
<view class="but" @click="showAddPopup = true">手动添加</view>
|
||
<view class="but" @click="showLibraryPopup = true">从检查库添加</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="bg-blue round margin-top-xl margin-bottom-xl">保存</button>
|
||
|
||
<!-- 手动添加检查项弹出框 -->
|
||
<u-popup :show="showAddPopup" mode="center" round="20" @close="showAddPopup = false">
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<view class="popup-title text-bold">手动添加检查项</view>
|
||
<view class="popup-close" @click="showAddPopup = false">×</view>
|
||
</view>
|
||
|
||
<view class="popup-body">
|
||
<!-- 项目名称 -->
|
||
<view class="form-item">
|
||
<view class="form-label">项目名称<text class="text-red">*</text></view>
|
||
<input class="form-input" v-model="checkForm.projectName" placeholder="请输入项目名称" />
|
||
</view>
|
||
|
||
<!-- 检查内容 -->
|
||
<view class="form-item">
|
||
<view class="form-label">检查内容<text class="text-red">*</text></view>
|
||
<input class="form-input" v-model="checkForm.checkContent" placeholder="请输入检查内容" />
|
||
</view>
|
||
|
||
<!-- 参考法规 -->
|
||
<view class="form-item">
|
||
<view class="form-label">参考法规</view>
|
||
<view class="form-btn" @click="showLawPopup = true">
|
||
<text class="text-blue">{{ checkForm.law || '选择法规' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 参考图片 -->
|
||
<view class="form-item">
|
||
<view class="form-label">参考图片</view>
|
||
<view class="upload-box" @click="chooseImage">
|
||
<view class="upload-add" v-if="!checkForm.image">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">上传图片</text>
|
||
</view>
|
||
<image v-else :src="checkForm.image" mode="aspectFill" class="upload-img"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<button class="btn-cancel" @click="showAddPopup = false">取消</button>
|
||
<button class="btn-confirm bg-blue" @click="handleAddCheck">确定</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 选择法规弹出框 -->
|
||
<u-popup :show="showLawPopup" mode="center" round="20" @close="showLawPopup = false">
|
||
<view class="law-popup">
|
||
<view class="popup-header">
|
||
<view class="popup-title text-bold">选择参考法规</view>
|
||
<view class="popup-close" @click="showLawPopup = false">×</view>
|
||
</view>
|
||
|
||
<!-- 搜索框 -->
|
||
<view class="search-box">
|
||
<text class="search-icon">🔍</text>
|
||
<input class="search-input" v-model="lawKeyword" placeholder="请输入关键词搜索" />
|
||
</view>
|
||
|
||
<!-- 法规列表 -->
|
||
<view class="law-list">
|
||
<view
|
||
class="law-item"
|
||
:class="{ 'law-item-active': selectedLaw === item }"
|
||
v-for="(item, index) in filteredLawList"
|
||
:key="index"
|
||
@click="selectedLaw = item"
|
||
>
|
||
{{ item }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多 -->
|
||
<view class="load-more" @click="loadMoreLaw">
|
||
<text class="text-blue">加载更多</text>
|
||
</view>
|
||
|
||
<!-- 确认按钮 -->
|
||
<view class="law-footer">
|
||
<button class="btn-cancel" @click="showLawPopup = false">取消</button>
|
||
<button class="btn-confirm bg-blue" @click="confirmLaw">确定</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 从检查库添加弹出框 -->
|
||
<u-popup :show="showLibraryPopup" mode="center" round="20" @close="showLibraryPopup = false">
|
||
<view class="library-popup">
|
||
<view class="popup-header">
|
||
<view class="popup-title text-bold">选择检查库</view>
|
||
<view class="popup-close" @click="showLibraryPopup = false">×</view>
|
||
</view>
|
||
|
||
<!-- 搜索框 -->
|
||
<view class="search-box">
|
||
<text class="search-icon">🔍</text>
|
||
<input class="search-input" v-model="libraryKeyword" placeholder="请输入关键词搜索" />
|
||
</view>
|
||
|
||
<!-- 检查库列表 -->
|
||
<view class="library-list">
|
||
<view
|
||
class="library-item"
|
||
v-for="(item, index) in filteredLibraryList"
|
||
:key="index"
|
||
@click="toggleLibrarySelect(item)"
|
||
>
|
||
<view class="library-checkbox" :class="{ 'library-checkbox-active': selectedLibraries.includes(item.id) }">
|
||
<text v-if="selectedLibraries.includes(item.id)">✓</text>
|
||
</view>
|
||
<view class="library-info">
|
||
<view class="library-name">关联表名：{{ item.name }}</view>
|
||
<view class="library-count text-gray">共{{ item.count }}项</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 添加选中项按钮 -->
|
||
<button class="btn-add-library bg-blue" @click="addSelectedLibrary">添加选中项</button>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue'
|
||
import {addCheckTable} from '/request/api.js'
|
||
|
||
// 响应式数据
|
||
const cateId = ref('')
|
||
const cateList = ref([
|
||
{
|
||
id: '1',
|
||
name: '湘西自治州和谐网络科技有限公司'
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '湘西自治州和谐云大数据科技有限公司'
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '湘西网络有限公司'
|
||
},
|
||
])
|
||
|
||
// 方法
|
||
const selectItem = (item) => {
|
||
console.log(item);
|
||
};
|
||
// 工作日开关
|
||
const value = ref(false)
|
||
// 日期
|
||
const show = ref(false);
|
||
const mode = ref('single');
|
||
|
||
const confirm = (e) => {
|
||
console.log(e);
|
||
};
|
||
|
||
// 手动添加检查项弹窗
|
||
const showAddPopup = ref(false);
|
||
|
||
const checkForm = reactive({
|
||
projectName: '',
|
||
checkContent: '',
|
||
law: '',
|
||
image: ''
|
||
});
|
||
|
||
// 选择法规弹窗
|
||
const showLawPopup = ref(false);
|
||
const lawKeyword = ref('');
|
||
const selectedLaw = ref('');
|
||
|
||
const lawList = ref([
|
||
'中华人民共和国安全生产法 第三十二条',
|
||
'建设项目安全设施"三同时"监督管理办法 第二十条',
|
||
'中华人民共和国职业病防治法 第十七条',
|
||
'中华人民共和国职业病防治法 第十八条',
|
||
'中华人民共和国消防法（2021版）第十一条',
|
||
'建设工程消防监督管理规定 第二十条'
|
||
]);
|
||
|
||
// 过滤法规列表
|
||
const filteredLawList = computed(() => {
|
||
if (!lawKeyword.value) return lawList.value;
|
||
return lawList.value.filter(item => item.includes(lawKeyword.value));
|
||
});
|
||
|
||
// 加载更多法规
|
||
const loadMoreLaw = () => {
|
||
uni.showToast({ title: '加载更多...', icon: 'none' });
|
||
};
|
||
|
||
// 确认选择法规
|
||
const confirmLaw = () => {
|
||
if (selectedLaw.value) {
|
||
checkForm.law = selectedLaw.value;
|
||
}
|
||
showLawPopup.value = false;
|
||
};
|
||
|
||
// 从检查库添加弹窗
|
||
const showLibraryPopup = ref(false);
|
||
const libraryKeyword = ref('');
|
||
const selectedLibraries = ref([]);
|
||
|
||
const libraryList = ref([
|
||
{ id: 1, name: '安全生产隐患"常见病"检查诊断表（个性部分）公路养护工程', count: 18 },
|
||
{ id: 2, name: '安全生产隐患"常见病"检查诊断表（个性部分）出租汽车企业', count: 12 },
|
||
{ id: 3, name: '安全生产隐患"常见病"检查诊断表（个性部分）城镇燃气', count: 12 }
|
||
]);
|
||
|
||
// 过滤检查库列表
|
||
const filteredLibraryList = computed(() => {
|
||
if (!libraryKeyword.value) return libraryList.value;
|
||
return libraryList.value.filter(item => item.name.includes(libraryKeyword.value));
|
||
});
|
||
|
||
// 切换选择检查库
|
||
const toggleLibrarySelect = (item) => {
|
||
const index = selectedLibraries.value.indexOf(item.id);
|
||
if (index > -1) {
|
||
selectedLibraries.value.splice(index, 1);
|
||
} else {
|
||
selectedLibraries.value.push(item.id);
|
||
}
|
||
};
|
||
|
||
// 添加选中的检查库
|
||
const addSelectedLibrary = () => {
|
||
if (selectedLibraries.value.length === 0) {
|
||
uni.showToast({ title: '请选择检查库', icon: 'none' });
|
||
return;
|
||
}
|
||
console.log('添加检查库：', selectedLibraries.value);
|
||
uni.showToast({ title: '添加成功', icon: 'success' });
|
||
showLibraryPopup.value = false;
|
||
selectedLibraries.value = [];
|
||
};
|
||
|
||
// 选择图片
|
||
const chooseImage = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
checkForm.image = res.tempFilePaths[0];
|
||
}
|
||
});
|
||
};
|
||
|
||
// 提交检查项
|
||
const handleAddCheck = () => {
|
||
if (!checkForm.projectName) {
|
||
uni.showToast({ title: '请输入项目名称', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!checkForm.checkContent) {
|
||
uni.showToast({ title: '请输入检查内容', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
console.log('提交检查项：', checkForm);
|
||
uni.showToast({ title: '添加成功', icon: 'success' });
|
||
showAddPopup.value = false;
|
||
|
||
// 重置表单
|
||
checkForm.projectName = '';
|
||
checkForm.checkContent = '';
|
||
checkForm.law = '';
|
||
checkForm.image = '';
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
.btn-right {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.but {
|
||
width: 304rpx;
|
||
height: 72rpx;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
border: 2rpx solid #108FFF;
|
||
color: #108FFF;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
// 弹出框样式
|
||
.popup-content {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.popup-body {
|
||
max-height: 700rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.upload-box {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border: 2rpx dashed #ccc;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.upload-add {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.upload-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.btn-cancel {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 40rpx;
|
||
background: #fff;
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.btn-confirm {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
// 选择法规弹窗
|
||
.law-popup {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
max-height: 80vh;
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F5F5F5;
|
||
border-radius: 40rpx;
|
||
padding: 16rpx 24rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.search-icon {
|
||
font-size: 28rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
background: transparent;
|
||
}
|
||
|
||
.law-list {
|
||
max-height: 500rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.law-item {
|
||
padding: 24rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.law-item-active {
|
||
border-color: #2667E9;
|
||
background: #F0F6FF;
|
||
}
|
||
|
||
.load-more {
|
||
text-align: center;
|
||
padding: 24rpx;
|
||
border: 2rpx solid #2667E9;
|
||
border-radius: 40rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.law-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
// 检查库弹窗样式
|
||
.library-popup {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
max-height: 80vh;
|
||
}
|
||
|
||
.library-list {
|
||
max-height: 500rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.library-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 24rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.library-checkbox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 2rpx solid #ccc;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.library-checkbox-active {
|
||
background: #2667E9;
|
||
border-color: #2667E9;
|
||
color: #fff;
|
||
}
|
||
|
||
.library-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.library-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.library-count {
|
||
font-size: 24rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.btn-add-library {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
</style>
|