上官小雨
5 months ago
committed by
masiyuan
masiyuan
36 changed files with 3791 additions and 473 deletions
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,443 @@ |
|||
<template> |
|||
<div class="add-carousel-container"> |
|||
<div class="page-header"> |
|||
<h1>新增普法服务</h1> |
|||
</div> |
|||
|
|||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="form-container"> |
|||
<el-form-item label="标题:" prop="title"> |
|||
<el-input v-model="form.title" placeholder="请输入标题" class="form-input" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="发布部门:" prop="publishDeptIds"> |
|||
<el-select |
|||
v-model="form.publishDeptIds" |
|||
multiple |
|||
filterable |
|||
collapse-tags |
|||
collapse-tags-tooltip |
|||
placeholder="请选择发布部门" |
|||
class="form-select" |
|||
> |
|||
<el-option |
|||
v-for="item in deptOptions" |
|||
:key="item.deptId" |
|||
:label="item.deptName" |
|||
:value="String(item.deptId)" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="内容发布在:" prop="targetPlatform"> |
|||
<el-select v-model="form.targetPlatform" placeholder="请选择" class="form-select"> |
|||
<el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="内容分类:" prop="contentType"> |
|||
<el-select v-model="form.contentType" placeholder="请选择" class="form-select" clearable> |
|||
<el-option v-for="item in contentTypeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务信息:" prop="content"> |
|||
<div class="editor-wrapper"> |
|||
<QuillEditor |
|||
ref="quillEditorRef" |
|||
v-model:content="form.content" |
|||
content-type="html" |
|||
:toolbar="toolbarOptions" |
|||
theme="snow" |
|||
class="quill-editor" |
|||
placeholder="请输入服务信息" |
|||
/> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="附件:"> |
|||
<div class="upload-area"> |
|||
<el-upload |
|||
drag |
|||
multiple |
|||
:http-request="handleFileUpload" |
|||
:show-file-list="true" |
|||
:file-list="uploadFileList" |
|||
:on-remove="handleFileRemove" |
|||
accept=".pdf,.doc,.docx" |
|||
> |
|||
<div class="upload-box"> |
|||
<div class="upload-icon">📁</div> |
|||
<p>点击或将文件拖拽到这里上传</p> |
|||
<p class="upload-tip">支持扩展名称：.pdf .word；文件大小：10MB以内</p> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="form-actions"> |
|||
<el-button type="primary" @click="handlePreview">预览</el-button> |
|||
<el-button @click="handleCancel">取消</el-button> |
|||
<el-button type="info" @click="handleSaveDraft">保存草稿箱</el-button> |
|||
<el-button type="success" @click="handleSubmit">发布</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<MobilePreview |
|||
v-model:visible="previewVisible" |
|||
:title="form.title" |
|||
:dept-names="selectedDeptNames" |
|||
:content-type-label="selectedContentTypeLabel" |
|||
:content="previewContentHtml" |
|||
:attachments="previewAttachments" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'; |
|||
import type { ComponentInternalInstance } from 'vue'; |
|||
import type { UploadFile, UploadRequestOptions, UploadUserFile } from 'element-plus'; |
|||
import { ElMessage, ElForm, FormRules } from 'element-plus'; |
|||
import { QuillEditor } from '@vueup/vue-quill'; |
|||
import '@vueup/vue-quill/dist/vue-quill.snow.css'; |
|||
import { |
|||
addEducationServices, |
|||
listPublishDeptOptions, |
|||
type EducationServicesForm, |
|||
type PublishDeptOption |
|||
} from '@/api/supervision/educationServices'; |
|||
import { getDicts } from '@/api/system/dict/data'; |
|||
import { useUserStore } from '@/store/modules/user'; |
|||
import request from '@/utils/request'; |
|||
import MobilePreview from './components/MobilePreview.vue'; |
|||
|
|||
interface AttachmentItem { |
|||
fileName: string; |
|||
uploadPath: string; |
|||
uploadPersonId: string; |
|||
uploadPersonName: string; |
|||
} |
|||
|
|||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|||
const userStore = useUserStore(); |
|||
const formRef = ref<InstanceType<typeof ElForm>>(); |
|||
const quillEditorRef = ref<InstanceType<typeof QuillEditor>>(); |
|||
const previewVisible = ref(false); |
|||
const previewContentHtml = ref(''); |
|||
const uploadFileList = ref<UploadUserFile[]>([]); |
|||
const attachmentList = ref<AttachmentItem[]>([]); |
|||
const platformOptions = ref<{ label: string; value: number }[]>([ |
|||
{ label: '企业端', value: 3 }, |
|||
{ label: '执法端', value: 2 }, |
|||
{ label: '公众端', value: 0 } |
|||
]); |
|||
const contentTypeOptions = ref<{ label: string; value: number }[]>([]); |
|||
const deptOptions = ref<PublishDeptOption[]>([]); |
|||
|
|||
const rules: FormRules = { |
|||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }], |
|||
publishDeptIds: [{ required: true, message: '请选择发布部门', trigger: 'change', type: 'array', min: 1 }], |
|||
targetPlatform: [{ required: true, message: '请选择内容发布到', trigger: 'change' }], |
|||
content: [{ required: true, message: '请输入服务信息', trigger: 'blur' }] |
|||
}; |
|||
|
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline', 'strike'], |
|||
['blockquote', 'code-block'], |
|||
[{ header: 1 }, { header: 2 }], |
|||
[{ list: 'ordered' }, { list: 'bullet' }], |
|||
[{ indent: '-1' }, { indent: '+1' }], |
|||
[{ size: ['small', false, 'large', 'huge'] }], |
|||
[{ header: [1, 2, 3, 4, 5, 6, false] }], |
|||
[{ color: [] }, { background: [] }], |
|||
[{ align: [] }], |
|||
['link', 'image', 'video'], |
|||
['clean'] |
|||
]; |
|||
|
|||
const form = reactive({ |
|||
title: '', |
|||
publishDeptIds: [] as string[], |
|||
targetPlatform: undefined as number | undefined, |
|||
contentType: undefined as number | undefined, |
|||
content: '' |
|||
}); |
|||
|
|||
const selectedDeptNames = computed(() => { |
|||
return deptOptions.value |
|||
.filter((item) => form.publishDeptIds.includes(String(item.deptId))) |
|||
.map((item) => item.deptName) |
|||
.join(','); |
|||
}); |
|||
|
|||
const selectedContentTypeLabel = computed(() => { |
|||
const item = contentTypeOptions.value.find((option) => option.value === form.contentType); |
|||
return item?.label || ''; |
|||
}); |
|||
|
|||
const previewAttachments = computed(() => { |
|||
return attachmentList.value.map((item) => ({ fileName: item.fileName })); |
|||
}); |
|||
|
|||
const buildPayload = (status: number): EducationServicesForm => ({ |
|||
title: form.title, |
|||
publishDeptIds: form.publishDeptIds.join(','), |
|||
targetPlatform: form.targetPlatform, |
|||
contentType: form.contentType, |
|||
content: form.content, |
|||
sourceType: 1, |
|||
status, |
|||
fileList: attachmentList.value |
|||
}); |
|||
|
|||
const submitForm = async (status: number, successMessage: string) => { |
|||
if (!formRef.value) return; |
|||
const isValid = await formRef.value.validate().catch(() => false); |
|||
if (!isValid) return; |
|||
|
|||
try { |
|||
const res: any = await addEducationServices(buildPayload(status)); |
|||
if (res.code === 200) { |
|||
ElMessage.success(successMessage); |
|||
proxy?.$tab.closePage(); |
|||
} else { |
|||
ElMessage.error(res.msg || '操作失败'); |
|||
} |
|||
} catch (error) { |
|||
console.error('提交失败:', error); |
|||
ElMessage.error('操作失败，请重试'); |
|||
} |
|||
}; |
|||
|
|||
const getEditorHtml = () => { |
|||
const html = quillEditorRef.value?.getHTML?.(); |
|||
if (html) { |
|||
form.content = html; |
|||
return html; |
|||
} |
|||
return form.content; |
|||
}; |
|||
|
|||
const isEmptyEditorContent = (html: string) => { |
|||
return !html |
|||
.replace(/<[^>]+>/g, '') |
|||
.replace(/ /g, ' ') |
|||
.trim(); |
|||
}; |
|||
|
|||
const handlePreview = () => { |
|||
const html = getEditorHtml(); |
|||
if (!form.title && isEmptyEditorContent(html)) { |
|||
ElMessage.warning('请先填写标题或服务信息'); |
|||
return; |
|||
} |
|||
previewContentHtml.value = html; |
|||
previewVisible.value = true; |
|||
}; |
|||
|
|||
const handleCancel = () => { |
|||
proxy?.$tab.closePage(); |
|||
}; |
|||
|
|||
const handleSaveDraft = () => { |
|||
submitForm(1, '已保存到草稿箱'); |
|||
}; |
|||
|
|||
const handleSubmit = () => { |
|||
submitForm(2, '发布成功'); |
|||
}; |
|||
|
|||
const handleFileUpload = async (options: UploadRequestOptions) => { |
|||
const formData = new FormData(); |
|||
formData.append('file', options.file); |
|||
|
|||
try { |
|||
const res: any = await request({ |
|||
url: '/app-enf/common/file/upload', |
|||
method: 'post', |
|||
data: formData, |
|||
headers: { 'Content-Type': 'multipart/form-data' } |
|||
}); |
|||
|
|||
if (res.code !== 200 || !res.data) { |
|||
throw new Error(res.msg || '上传失败'); |
|||
} |
|||
|
|||
attachmentList.value.push({ |
|||
fileName: options.file.name, |
|||
uploadPath: res.data, |
|||
uploadPersonId: String(userStore.userId || ''), |
|||
uploadPersonName: userStore.nickname || '' |
|||
}); |
|||
uploadFileList.value.push({ |
|||
name: options.file.name, |
|||
url: res.data, |
|||
uid: options.file.uid |
|||
}); |
|||
options.onSuccess?.(res); |
|||
} catch (error) { |
|||
console.error('附件上传失败:', error); |
|||
ElMessage.error('附件上传失败，请重试'); |
|||
options.onError?.(error as any); |
|||
} |
|||
}; |
|||
|
|||
const handleFileRemove = (file: UploadFile) => { |
|||
const index = uploadFileList.value.findIndex((item) => item.uid === file.uid); |
|||
if (index > -1) { |
|||
uploadFileList.value.splice(index, 1); |
|||
attachmentList.value.splice(index, 1); |
|||
} |
|||
}; |
|||
|
|||
const loadDeptOptions = async () => { |
|||
try { |
|||
const res: any = await listPublishDeptOptions(); |
|||
deptOptions.value = res.data || []; |
|||
} catch (error) { |
|||
console.error('加载发布部门失败:', error); |
|||
} |
|||
}; |
|||
|
|||
const loadDictOptions = async () => { |
|||
try { |
|||
const [contentRes, platformRes] = await Promise.all([ |
|||
getDicts('web_content_classification'), |
|||
getDicts('web_publishing_platform') |
|||
]); |
|||
|
|||
contentTypeOptions.value = (contentRes.data || []) |
|||
.map((item: any) => ({ |
|||
label: item.dictLabel, |
|||
value: Number(item.dictValue) |
|||
})) |
|||
.filter((item) => !Number.isNaN(item.value)); |
|||
|
|||
const platformDict = (platformRes.data || []) |
|||
.map((item: any) => ({ |
|||
label: item.dictLabel, |
|||
value: Number(item.dictValue) |
|||
})) |
|||
.filter((item) => !Number.isNaN(item.value) && item.value !== 1); |
|||
|
|||
if (platformDict.length > 0) { |
|||
platformOptions.value = platformDict; |
|||
if (!platformOptions.value.some((item) => item.value === 0)) { |
|||
platformOptions.value.push({ label: '公众端', value: 0 }); |
|||
} |
|||
} |
|||
} catch (error) { |
|||
console.error('加载字典失败:', error); |
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
loadDeptOptions(); |
|||
loadDictOptions(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.add-carousel-container { |
|||
padding: 20px; |
|||
background: #f5f7fa; |
|||
min-height: calc(100vh - 100px); |
|||
} |
|||
|
|||
.page-header { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.page-header h1 { |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
color: #303133; |
|||
} |
|||
|
|||
.form-container { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 24px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.form-input, |
|||
.form-select { |
|||
width: 100%; |
|||
max-width: 500px; |
|||
} |
|||
|
|||
.editor-wrapper { |
|||
width: 100%; |
|||
max-width: 900px; |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.quill-editor { |
|||
height: 500px; |
|||
} |
|||
|
|||
:deep(.ql-container) { |
|||
min-height: 500px; |
|||
height: 100%; |
|||
} |
|||
|
|||
:deep(.ql-editor) { |
|||
min-height: 450px; |
|||
} |
|||
|
|||
.upload-area { |
|||
width: 100%; |
|||
max-width: 500px; |
|||
} |
|||
|
|||
:deep(.el-upload-dragger) { |
|||
padding: 0; |
|||
border: none; |
|||
background: transparent; |
|||
} |
|||
|
|||
.upload-box { |
|||
border: 2px dashed #d9d9d9; |
|||
border-radius: 8px; |
|||
padding: 40px; |
|||
text-align: center; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.upload-box:hover { |
|||
border-color: #409eff; |
|||
background: #f0f5ff; |
|||
} |
|||
|
|||
.upload-icon { |
|||
font-size: 48px; |
|||
color: #409eff; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.upload-box p { |
|||
color: #606266; |
|||
margin: 8px 0; |
|||
} |
|||
|
|||
.upload-tip { |
|||
font-size: 12px; |
|||
color: #909399 !important; |
|||
} |
|||
|
|||
.form-actions { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 12px; |
|||
padding-top: 20px; |
|||
border-top: 1px solid #ebeef5; |
|||
} |
|||
|
|||
:deep(.el-form-item__label) { |
|||
font-weight: bold; |
|||
white-space: nowrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,344 @@ |
|||
<template> |
|||
<div class="legal-tech-container"> |
|||
<!-- 搜索区域 --> |
|||
<div class="search-panel"> |
|||
<el-form :model="searchForm" inline> |
|||
<el-form-item label="时间筛选:"> |
|||
<el-date-picker |
|||
v-model="searchForm.timeRange" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="截止时间" |
|||
class="date-picker" |
|||
format="YYYY-MM-DD HH:mm" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="执法单位:"> |
|||
<el-input |
|||
v-model="searchForm.lawEnforcementAgency" |
|||
placeholder="请输入关键字" |
|||
class="search-input" |
|||
clearable |
|||
@keyup.enter="handleSearch" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleSearch" :loading="loading">搜索</el-button> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button @click="handleReset">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 操作区域 --> |
|||
<div class="action-panel"> |
|||
<el-button type="primary" @click="handleAdd">新增</el-button> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<div class="table-container"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="tableData" |
|||
border |
|||
:header-cell-style="{ backgroundColor: '#f5f7fa', fontWeight: 'bold' }" |
|||
> |
|||
<el-table-column prop="lawEnforcementAgency" label="执法单位" min-width="160" show-overflow-tooltip /> |
|||
|
|||
<el-table-column label="法制材料" min-width="200"> |
|||
<template #default="{ row }"> |
|||
<div v-if="row.legalMaterials" class="file-cell"> |
|||
<el-icon class="file-icon"><Paperclip /></el-icon> |
|||
<span class="file-name" :title="extractFileName(row.legalMaterials)">{{ extractFileName(row.legalMaterials) }}</span> |
|||
<el-button size="small" @click="downloadFile(row.legalMaterials)">下载</el-button> |
|||
</div> |
|||
<span v-else>--</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="技术材料" min-width="200"> |
|||
<template #default="{ row }"> |
|||
<div v-if="row.technicalMaterials" class="file-cell"> |
|||
<el-icon class="file-icon"><Paperclip /></el-icon> |
|||
<span class="file-name" :title="extractFileName(row.technicalMaterials)">{{ extractFileName(row.technicalMaterials) }}</span> |
|||
<el-button size="small" @click="downloadFile(row.technicalMaterials)">下载</el-button> |
|||
</div> |
|||
<span v-else>--</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="提交时间" width="180"> |
|||
<template #default="{ row }"> |
|||
{{ formatDateTime(row.createTime) }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" width="100" fixed="right"> |
|||
<template #default="{ row }"> |
|||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination-container"> |
|||
<span class="total-text">共 {{ total }} 项数据</span> |
|||
<el-pagination |
|||
v-model:current-page="currentPage" |
|||
v-model:page-size="pageSize" |
|||
:total="total" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
layout="prev, pager, next, jumper, ->, total, sizes" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { Paperclip } from '@element-plus/icons-vue'; |
|||
import { getLegalTechRecordsPage } from '@/api/nos/index'; |
|||
import type { |
|||
NosLawEnforcementFilingPageVO, |
|||
LegalTechRecordsPageResponse |
|||
} from '@/api/nos/type'; |
|||
import { parseTime } from '@/utils/ruoyi'; |
|||
|
|||
const router = useRouter(); |
|||
const { proxy } = getCurrentInstance() as any; |
|||
|
|||
const loading = ref(false); |
|||
const tableData = ref<NosLawEnforcementFilingPageVO[]>([]); |
|||
const total = ref(0); |
|||
const currentPage = ref(1); |
|||
const pageSize = ref(10); |
|||
|
|||
const searchForm = reactive({ |
|||
timeRange: [] as string[], |
|||
lawEnforcementAgency: '' |
|||
}); |
|||
|
|||
const formatDateTime = (time?: string) => { |
|||
if (!time) return '--'; |
|||
return parseTime(time, '{y}-{m}-{d} {h}:{i}') || '--'; |
|||
}; |
|||
|
|||
const BASE_API = import.meta.env.VITE_APP_BASE_API || ''; |
|||
const FILE_SERVER_PREFIX = 'http://139.186.148.21:8080'; |
|||
|
|||
const isOssId = (val: string) => /^[0-9]+$/.test(val.trim()); |
|||
|
|||
const toRelativeFilePath = (val: string) => { |
|||
const raw = val.trim(); |
|||
if (!raw) return ''; |
|||
const prefix = FILE_SERVER_PREFIX.replace(/\/+$/, ''); |
|||
let path = raw.startsWith('/') ? raw : `/${raw}`; |
|||
const normalizedPrefix = prefix.startsWith('http') ? prefix : `/${prefix}`; |
|||
while (path === normalizedPrefix || path.startsWith(`${normalizedPrefix}/`)) { |
|||
path = path.slice(normalizedPrefix.length) || '/'; |
|||
if (!path.startsWith('/')) path = `/${path}`; |
|||
} |
|||
return path; |
|||
}; |
|||
|
|||
const buildFileUrl = (val: string) => { |
|||
if (!val) return ''; |
|||
const raw = val.trim(); |
|||
if (raw.startsWith('http://') || raw.startsWith('https://') || raw.startsWith('blob:') || raw.startsWith('data:')) { |
|||
return raw; |
|||
} |
|||
if (isOssId(raw)) { |
|||
return `${BASE_API}/resource/oss/download/${raw}`; |
|||
} |
|||
const relative = toRelativeFilePath(raw); |
|||
return `${FILE_SERVER_PREFIX.replace(/\/+$/, '')}${relative}`; |
|||
}; |
|||
|
|||
const extractFileName = (val: string) => { |
|||
if (!val) return ''; |
|||
const raw = val.trim(); |
|||
if (isOssId(raw)) return raw; |
|||
try { |
|||
const withoutQuery = raw.split('?')[0].split('#')[0]; |
|||
const parts = withoutQuery.split('/'); |
|||
return parts[parts.length - 1] || raw; |
|||
} catch { |
|||
return raw; |
|||
} |
|||
}; |
|||
|
|||
const downloadFile = async (file: string, fileName?: string) => { |
|||
if (!file) return; |
|||
const raw = file.trim(); |
|||
|
|||
if (isOssId(raw) && proxy?.$download?.oss) { |
|||
proxy.$download.oss(raw); |
|||
return; |
|||
} |
|||
|
|||
const url = buildFileUrl(raw); |
|||
if (!url) { |
|||
ElMessage.error('文件下载失败'); |
|||
return; |
|||
} |
|||
|
|||
const link = document.createElement('a'); |
|||
link.href = url; |
|||
link.target = '_blank'; |
|||
if (fileName) link.download = fileName; |
|||
link.rel = 'noopener noreferrer'; |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
document.body.removeChild(link); |
|||
}; |
|||
|
|||
const buildQueryParams = () => { |
|||
return { |
|||
startTime: searchForm.timeRange?.[0] || undefined, |
|||
endTime: searchForm.timeRange?.[1] || undefined, |
|||
lawEnforcementAgency: searchForm.lawEnforcementAgency || undefined, |
|||
pageNo: currentPage.value, |
|||
pageSize: pageSize.value |
|||
}; |
|||
}; |
|||
|
|||
const getList = async () => { |
|||
loading.value = true; |
|||
try { |
|||
const res = (await getLegalTechRecordsPage(buildQueryParams()) as unknown) as LegalTechRecordsPageResponse; |
|||
tableData.value = res.rows || []; |
|||
total.value = res.total || 0; |
|||
} catch (error) { |
|||
console.error('获取列表数据失败:', error); |
|||
ElMessage.error('获取数据失败，请检查网络连接'); |
|||
} finally { |
|||
loading.value = false; |
|||
} |
|||
}; |
|||
|
|||
const handleSearch = () => { |
|||
currentPage.value = 1; |
|||
getList(); |
|||
}; |
|||
|
|||
const handleReset = () => { |
|||
searchForm.timeRange = []; |
|||
searchForm.lawEnforcementAgency = ''; |
|||
currentPage.value = 1; |
|||
getList(); |
|||
}; |
|||
|
|||
const handleAdd = () => { |
|||
router.push({ name: 'LegalTechAdd' }); |
|||
}; |
|||
|
|||
const handleEdit = (row: NosLawEnforcementFilingPageVO) => { |
|||
if (!row.id) { |
|||
ElMessage.warning('记录ID不存在'); |
|||
return; |
|||
} |
|||
router.push({ |
|||
name: 'LegalTechEdit', |
|||
params: { id: row.id } |
|||
}); |
|||
}; |
|||
|
|||
const handleSizeChange = (val: number) => { |
|||
pageSize.value = val; |
|||
currentPage.value = 1; |
|||
getList(); |
|||
}; |
|||
|
|||
const handleCurrentChange = (val: number) => { |
|||
currentPage.value = val; |
|||
getList(); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
getList(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.legal-tech-container { |
|||
padding: 20px; |
|||
background: #f5f7fa; |
|||
min-height: calc(100vh - 100px); |
|||
} |
|||
|
|||
.search-panel { |
|||
background: #fff; |
|||
padding: 16px 20px; |
|||
border-radius: 8px; |
|||
margin-bottom: 16px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.action-panel { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
:deep(.el-form-item__label) { |
|||
white-space: nowrap; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.search-input { |
|||
width: 200px; |
|||
} |
|||
|
|||
.date-picker { |
|||
width: 360px; |
|||
} |
|||
|
|||
.table-container { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 16px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.file-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.file-icon { |
|||
color: #909399; |
|||
} |
|||
|
|||
.file-name { |
|||
flex: 1; |
|||
color: #409eff; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.pagination-container { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #fff; |
|||
padding: 12px 20px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.total-text { |
|||
color: #909399; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,400 @@ |
|||
<template> |
|||
<div class="legal-tech-edit-container" v-loading="loading"> |
|||
<div class="page-header"> |
|||
<h2>{{ isEdit ? '编辑法制与技术材料' : '新增法制与技术材料' }}</h2> |
|||
</div> |
|||
|
|||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="form-container"> |
|||
<el-form-item label="执法单位:" prop="lawEnforcementAgencyId"> |
|||
<el-select |
|||
v-model="form.lawEnforcementAgencyId" |
|||
filterable |
|||
placeholder="请选择执法单位" |
|||
class="form-input" |
|||
@change="handleDeptChange" |
|||
> |
|||
<el-option |
|||
v-for="item in deptOptions" |
|||
:key="item.deptId" |
|||
:label="item.deptName" |
|||
:value="String(item.deptId)" |
|||
/> |
|||
</el-select> |
|||
<div class="form-tip">温馨提示：开展非现场执法，同1个单位，仅需提交1次法制和技术材料</div> |
|||
</el-form-item> |
|||
|
|||
<div class="section-title">法制材料</div> |
|||
<el-form-item label="附件:" prop="legalMaterials"> |
|||
<div class="upload-area"> |
|||
<el-upload |
|||
drag |
|||
:http-request="(opts) => handleFileUpload(opts, 'legal')" |
|||
:show-file-list="true" |
|||
:file-list="legalFileList" |
|||
:on-remove="(file) => handleFileRemove(file, 'legal')" |
|||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
> |
|||
<div class="upload-box"> |
|||
<el-icon class="upload-icon"><FolderOpened /></el-icon> |
|||
<p>点击或将文件拖拽到这里上传</p> |
|||
<p class="upload-tip">文件格式：word、excel、ppt、PDF等文档</p> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<div class="section-title">技术材料</div> |
|||
<el-form-item label="附件:" prop="technicalMaterials"> |
|||
<div class="upload-area"> |
|||
<el-upload |
|||
drag |
|||
:http-request="(opts) => handleFileUpload(opts, 'technical')" |
|||
:show-file-list="true" |
|||
:file-list="technicalFileList" |
|||
:on-remove="(file) => handleFileRemove(file, 'technical')" |
|||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
> |
|||
<div class="upload-box"> |
|||
<el-icon class="upload-icon"><FolderOpened /></el-icon> |
|||
<p>点击或将文件拖拽到这里上传</p> |
|||
<p class="upload-tip">文件格式：word、excel、ppt、PDF等文档</p> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="form-actions"> |
|||
<el-button @click="handleCancel">取消</el-button> |
|||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, reactive, onMounted, computed } from 'vue'; |
|||
import { useRoute, useRouter } from 'vue-router'; |
|||
import { ElMessage, ElForm, FormRules } from 'element-plus'; |
|||
import type { UploadFile, UploadRequestOptions, UploadUserFile } from 'element-plus'; |
|||
import { FolderOpened } from '@element-plus/icons-vue'; |
|||
import { getLegalTechRecordsDetail, saveOrEditLegalTechRecords, selectLawEnforcementAgency } from '@/api/nos/index'; |
|||
import type { SaveOrEditLegalTechRecordsRequest, LawEnforcementAgencyOption } from '@/api/nos/type'; |
|||
import request, { enfBaseURL } from '@/utils/request'; |
|||
|
|||
const route = useRoute(); |
|||
const router = useRouter(); |
|||
const formRef = ref<InstanceType<typeof ElForm>>(); |
|||
|
|||
const loading = ref(false); |
|||
const submitLoading = ref(false); |
|||
|
|||
const recordId = computed(() => { |
|||
const id = route.params.id; |
|||
return Array.isArray(id) ? id[0] : id; |
|||
}); |
|||
const isEdit = computed(() => !!recordId.value); |
|||
|
|||
const form = reactive({ |
|||
lawEnforcementAgency: '', |
|||
lawEnforcementAgencyId: '', |
|||
legalMaterials: '', |
|||
technicalMaterials: '' |
|||
}); |
|||
|
|||
const deptOptions = ref<LawEnforcementAgencyOption[]>([]); |
|||
|
|||
const legalFileList = ref<UploadUserFile[]>([]); |
|||
const technicalFileList = ref<UploadUserFile[]>([]); |
|||
|
|||
const rules: FormRules = { |
|||
lawEnforcementAgencyId: [{ required: true, message: '请选择执法单位', trigger: 'change' }], |
|||
legalMaterials: [{ required: true, message: '请上传法制材料附件', trigger: 'change' }], |
|||
technicalMaterials: [{ required: true, message: '请上传技术材料附件', trigger: 'change' }] |
|||
}; |
|||
|
|||
const handleDeptChange = (deptId: string) => { |
|||
const selected = deptOptions.value.find((item) => String(item.deptId) === String(deptId)); |
|||
form.lawEnforcementAgency = selected?.deptName || ''; |
|||
}; |
|||
|
|||
const loadDeptOptions = async () => { |
|||
try { |
|||
const res: any = await selectLawEnforcementAgency(); |
|||
deptOptions.value = res.data || []; |
|||
} catch (error) { |
|||
console.error('加载执法单位失败:', error); |
|||
ElMessage.error('加载执法单位失败'); |
|||
} |
|||
}; |
|||
|
|||
const handleExceed = () => { |
|||
ElMessage.warning('只能上传一个文件，请先删除已上传的文件'); |
|||
}; |
|||
|
|||
const handleFileUpload = async (options: UploadRequestOptions, type: 'legal' | 'technical') => { |
|||
const formData = new FormData(); |
|||
formData.append('file', options.file); |
|||
|
|||
try { |
|||
const res: any = await request({ |
|||
baseURL: enfBaseURL, |
|||
url: '/app-enf/common/file/upload', |
|||
method: 'post', |
|||
data: formData, |
|||
headers: { 'Content-Type': 'multipart/form-data' } |
|||
}); |
|||
|
|||
if (res.code !== 200 || !res.data) { |
|||
throw new Error(res.msg || '上传失败'); |
|||
} |
|||
|
|||
const fileUrl = res.data; |
|||
const fileObj = { |
|||
name: options.file.name, |
|||
url: fileUrl, |
|||
uid: options.file.uid |
|||
}; |
|||
|
|||
if (type === 'legal') { |
|||
form.legalMaterials = fileUrl; |
|||
legalFileList.value = [fileObj]; |
|||
formRef.value?.validateField('legalMaterials'); |
|||
} else { |
|||
form.technicalMaterials = fileUrl; |
|||
technicalFileList.value = [fileObj]; |
|||
formRef.value?.validateField('technicalMaterials'); |
|||
} |
|||
|
|||
options.onSuccess?.(res); |
|||
ElMessage.success('上传成功'); |
|||
} catch (error) { |
|||
console.error('附件上传失败:', error); |
|||
ElMessage.error('附件上传失败，请重试'); |
|||
options.onError?.(error as any); |
|||
} |
|||
}; |
|||
|
|||
const handleFileRemove = (file: UploadFile, type: 'legal' | 'technical') => { |
|||
if (type === 'legal') { |
|||
form.legalMaterials = ''; |
|||
legalFileList.value = []; |
|||
formRef.value?.validateField('legalMaterials'); |
|||
} else { |
|||
form.technicalMaterials = ''; |
|||
technicalFileList.value = []; |
|||
formRef.value?.validateField('technicalMaterials'); |
|||
} |
|||
}; |
|||
|
|||
const fetchDetail = async () => { |
|||
if (!isEdit.value) return; |
|||
|
|||
loading.value = true; |
|||
try { |
|||
const res: any = await getLegalTechRecordsDetail(recordId.value); |
|||
const data = res.data; |
|||
if (data) { |
|||
form.lawEnforcementAgency = data.lawEnforcementAgency || ''; |
|||
form.lawEnforcementAgencyId = data.lawEnforcementAgencyId ? String(data.lawEnforcementAgencyId) : ''; |
|||
form.legalMaterials = data.legalMaterials || ''; |
|||
form.technicalMaterials = data.technicalMaterials || ''; |
|||
|
|||
if (form.legalMaterials) { |
|||
legalFileList.value = [{ |
|||
name: extractFileName(form.legalMaterials), |
|||
url: form.legalMaterials, |
|||
uid: Date.now() |
|||
}]; |
|||
} |
|||
|
|||
if (form.technicalMaterials) { |
|||
technicalFileList.value = [{ |
|||
name: extractFileName(form.technicalMaterials), |
|||
url: form.technicalMaterials, |
|||
uid: Date.now() + 1 |
|||
}]; |
|||
} |
|||
} |
|||
} catch (error) { |
|||
console.error('获取详情失败:', error); |
|||
ElMessage.error('获取详情失败'); |
|||
} finally { |
|||
loading.value = false; |
|||
} |
|||
}; |
|||
|
|||
const extractFileName = (val: string) => { |
|||
if (!val) return ''; |
|||
const raw = val.trim(); |
|||
const isOssId = /^[0-9]+$/.test(raw); |
|||
if (isOssId) return raw; |
|||
try { |
|||
const withoutQuery = raw.split('?')[0].split('#')[0]; |
|||
const parts = withoutQuery.split('/'); |
|||
return parts[parts.length - 1] || raw; |
|||
} catch { |
|||
return raw; |
|||
} |
|||
}; |
|||
|
|||
const handleCancel = () => { |
|||
router.back(); |
|||
}; |
|||
|
|||
const handleSubmit = async () => { |
|||
if (!formRef.value) return; |
|||
|
|||
const isValid = await formRef.value.validate().catch(() => false); |
|||
if (!isValid) return; |
|||
|
|||
submitLoading.value = true; |
|||
try { |
|||
const payload: SaveOrEditLegalTechRecordsRequest = { |
|||
lawEnforcementAgency: form.lawEnforcementAgency, |
|||
lawEnforcementAgencyId: form.lawEnforcementAgencyId, |
|||
legalMaterials: form.legalMaterials, |
|||
technicalMaterials: form.technicalMaterials |
|||
}; |
|||
|
|||
if (isEdit.value) { |
|||
payload.id = recordId.value; |
|||
} |
|||
|
|||
const res: any = await saveOrEditLegalTechRecords(payload); |
|||
if (res.code === 200) { |
|||
ElMessage.success(isEdit.value ? '编辑成功' : '新增成功'); |
|||
router.back(); |
|||
} else { |
|||
ElMessage.error(res.msg || '操作失败'); |
|||
} |
|||
} catch (error) { |
|||
console.error('提交失败:', error); |
|||
ElMessage.error('操作失败，请重试'); |
|||
} finally { |
|||
submitLoading.value = false; |
|||
} |
|||
}; |
|||
|
|||
onMounted(async () => { |
|||
await loadDeptOptions(); |
|||
fetchDetail(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.legal-tech-edit-container { |
|||
padding: 20px; |
|||
background: #f5f7fa; |
|||
min-height: calc(100vh - 100px); |
|||
} |
|||
|
|||
.page-header { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.page-header h2 { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
color: #303133; |
|||
margin: 0; |
|||
} |
|||
|
|||
.form-container { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 32px 24px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.form-input { |
|||
width: 100%; |
|||
max-width: 600px; |
|||
} |
|||
|
|||
.form-tip { |
|||
font-size: 12px; |
|||
color: #909399; |
|||
margin-top: 8px; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #303133; |
|||
margin: 24px 0 16px; |
|||
padding-left: 12px; |
|||
position: relative; |
|||
} |
|||
|
|||
.section-title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 4px; |
|||
height: 16px; |
|||
background-color: #409eff; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.upload-area { |
|||
width: 100%; |
|||
max-width: 400px; |
|||
} |
|||
|
|||
:deep(.el-upload-dragger) { |
|||
padding: 0; |
|||
border: none; |
|||
background: transparent; |
|||
} |
|||
|
|||
.upload-box { |
|||
border: 1px dashed #d9d9d9; |
|||
border-radius: 4px; |
|||
padding: 30px 20px; |
|||
text-align: center; |
|||
transition: all 0.3s; |
|||
background: #fafafa; |
|||
} |
|||
|
|||
.upload-box:hover { |
|||
border-color: #409eff; |
|||
background: #f0f5ff; |
|||
} |
|||
|
|||
.upload-icon { |
|||
font-size: 40px; |
|||
color: #409eff; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.upload-box p { |
|||
color: #606266; |
|||
margin: 8px 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.upload-tip { |
|||
font-size: 12px !important; |
|||
color: #909399 !important; |
|||
} |
|||
|
|||
.form-actions { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 12px; |
|||
padding-top: 32px; |
|||
margin-top: 16px; |
|||
border-top: 1px solid #ebeef5; |
|||
} |
|||
|
|||
:deep(.el-form-item__label) { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,381 @@ |
|||
<template> |
|||
<div class="cloud-record-page app_content"> |
|||
<van-nav-bar title="执法监督码" left-arrow @click-left="onBack" /> |
|||
|
|||
<div class="cloud-record-body"> |
|||
<van-tabs |
|||
v-model:active="activeTab" |
|||
class="cloud-record-tabs" |
|||
color="#2b7de9" |
|||
title-active-color="#2b7de9" |
|||
title-inactive-color="#646566" |
|||
line-width="50%" |
|||
> |
|||
<van-tab title="云笔录" name="cloud"> |
|||
<van-pull-refresh v-model="refreshing" class="tab-scroll" @refresh="onRefresh"> |
|||
<div v-if="loading && !refreshing" class="loading-wrap"> |
|||
<van-loading type="spinner" color="#2b7de9" /> |
|||
</div> |
|||
|
|||
<template v-else-if="!hasRecord"> |
|||
<div class="empty-state"> |
|||
<van-image :src="noDataImg" width="151" height="120" /> |
|||
<div class="empty-text">{{ isViewOnly ? '暂无云笔录' : '等待企业处理' }}</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-else> |
|||
<div class="content-scroll"> |
|||
<div class="section-card"> |
|||
<div class="section-title">云视频</div> |
|||
<div v-if="cloudVideo" class="video-wrap" @click="showVideoPreview = true"> |
|||
<video :src="cloudVideo" muted preload="metadata" class="video-thumb" /> |
|||
<van-icon name="play-circle-o" class="play-icon" /> |
|||
</div> |
|||
<div v-else class="media-placeholder">暂无视频</div> |
|||
</div> |
|||
|
|||
<div class="section-card"> |
|||
<div class="section-title">云文字</div> |
|||
<div class="text-content">{{ cloudText || '暂无文字内容' }}</div> |
|||
</div> |
|||
|
|||
<div class="section-card"> |
|||
<div class="section-title">意见</div> |
|||
<div v-if="isViewOnly" class="text-content">{{ suggestion || '暂无意见' }}</div> |
|||
<van-field |
|||
v-else |
|||
v-model="suggestion" |
|||
class="opinion-field" |
|||
type="textarea" |
|||
rows="5" |
|||
autosize |
|||
maxlength="300" |
|||
show-word-limit |
|||
placeholder="请输入" |
|||
:readonly="submitting" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</van-pull-refresh> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</div> |
|||
|
|||
<div v-if="hasRecord && canEditOpinion" class="page-footer"> |
|||
<van-button class="btn-cancel" :disabled="submitting" @click="onBack">取消</van-button> |
|||
<van-button class="btn-submit" type="primary" :loading="submitting" @click="onSubmit"> 提交 </van-button> |
|||
</div> |
|||
|
|||
<van-popup v-model:show="showVideoPreview" class="video-preview-popup" teleport="body" closeable @closed="showVideoPreview = false"> |
|||
<video v-if="cloudVideo" :src="cloudVideo" controls autoplay playsinline webkit-playsinline class="preview-video" /> |
|||
</van-popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="nosCloudRecord"> |
|||
import { showConfirmDialog, showSuccessToast, showToast } from 'vant' |
|||
import noDataImg from '@/assets/images/nos/no-data.png' |
|||
import { cloudRecordDetailApi, cloudRecordConfirmApi } from '@/api/nos/enfDemo' |
|||
import { toFullFileUrl } from '@/util/fileUrl' |
|||
|
|||
const router = useRouter() |
|||
const route = useRoute() |
|||
|
|||
// type：云笔录状态（0-未发起，1-待企业提交，2-待执法人员确认，3-已完成） |
|||
const cloudRecordStatus = computed(() => Number(route.query.type) || 0) |
|||
const isViewOnly = computed(() => Number(route.query.taskStatus) === 4 || cloudRecordStatus.value === 3) |
|||
const canEditOpinion = computed(() => !isViewOnly.value && cloudRecordStatus.value === 2) |
|||
|
|||
const activeTab = ref('cloud') |
|||
const loading = ref(true) |
|||
const refreshing = ref(false) |
|||
const submitting = ref(false) |
|||
const hasRecord = ref(false) |
|||
const cloudVideo = ref('') |
|||
const cloudText = ref('') |
|||
const suggestion = ref('') |
|||
const showVideoPreview = ref(false) |
|||
const recordId = ref('') |
|||
|
|||
const applyDetailData = (data) => { |
|||
cloudVideo.value = data.cloudVideo ? toFullFileUrl(data.cloudVideo) : '' |
|||
cloudText.value = data.cloudText || '' |
|||
suggestion.value = data.suggestion || '' |
|||
hasRecord.value = !!(data.cloudVideo || data.cloudText) |
|||
recordId.value = data.id || '' |
|||
} |
|||
|
|||
const fetchDetail = async () => { |
|||
const taskId = route.query.id |
|||
if (!taskId) { |
|||
showToast('任务信息异常') |
|||
return |
|||
} |
|||
|
|||
try { |
|||
const res = await cloudRecordDetailApi({ taskId }) |
|||
if (res && res.code === 200) { |
|||
if (res.data) { |
|||
applyDetailData(res.data) |
|||
} else { |
|||
hasRecord.value = false |
|||
cloudVideo.value = '' |
|||
cloudText.value = '' |
|||
suggestion.value = '' |
|||
} |
|||
} else { |
|||
showToast(res?.msg || '查询云笔录失败') |
|||
} |
|||
} catch (err) { |
|||
console.error(err) |
|||
showToast('查询云笔录失败') |
|||
} finally { |
|||
loading.value = false |
|||
refreshing.value = false |
|||
} |
|||
} |
|||
|
|||
const onRefresh = () => { |
|||
fetchDetail() |
|||
} |
|||
|
|||
const onBack = () => { |
|||
router.back() |
|||
} |
|||
|
|||
const onSubmit = async () => { |
|||
if (!suggestion.value.trim()) { |
|||
showToast('请输入意见') |
|||
return |
|||
} |
|||
|
|||
try { |
|||
await showConfirmDialog({ |
|||
title: '确认提交', |
|||
message: '确认提交云笔录意见吗？', |
|||
width: '80%' |
|||
}) |
|||
|
|||
submitting.value = true |
|||
const res = await cloudRecordConfirmApi({ |
|||
taskId: route.query.id, |
|||
id: recordId.value, |
|||
suggestion: suggestion.value.trim() |
|||
}) |
|||
|
|||
if (res && res.code === 200) { |
|||
showSuccessToast('提交成功') |
|||
router.back() |
|||
} else { |
|||
showToast(res?.msg || '提交失败') |
|||
} |
|||
} catch (err) { |
|||
if (err !== 'cancel') { |
|||
console.error(err) |
|||
showToast('提交失败') |
|||
} |
|||
} finally { |
|||
submitting.value = false |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
fetchDetail() |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.cloud-record-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
background: #f5f7fa; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.cloud-record-body { |
|||
flex: 1; |
|||
min-height: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
} |
|||
|
|||
.cloud-record-tabs { |
|||
flex: 1; |
|||
min-height: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
:deep(.van-tabs__wrap) { |
|||
flex-shrink: 0; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
:deep(.van-tabs__content) { |
|||
flex: 1; |
|||
min-height: 0; |
|||
} |
|||
|
|||
:deep(.van-tab__panel) { |
|||
height: 100%; |
|||
} |
|||
|
|||
:deep(.van-tab) { |
|||
flex: 1; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
.tab-scroll { |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
background: #f5f7fa; |
|||
} |
|||
|
|||
.loading-wrap { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-top: 120px; |
|||
} |
|||
|
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 120px; |
|||
|
|||
.empty-text { |
|||
margin-top: 16px; |
|||
font-size: 16px; |
|||
color: #323233; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.content-scroll { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.section-card { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 12px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
color: #323233; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.video-wrap { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 180px; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
background: #000; |
|||
|
|||
.video-thumb { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.play-icon { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 48px; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
} |
|||
|
|||
.media-placeholder { |
|||
height: 120px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #f7f8fa; |
|||
border-radius: 8px; |
|||
color: #969799; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.text-content { |
|||
font-size: 14px; |
|||
color: #323233; |
|||
line-height: 22px; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.opinion-field { |
|||
padding: 0; |
|||
background: #f7f8fa; |
|||
border-radius: 8px; |
|||
|
|||
:deep(.van-field__control) { |
|||
min-height: 120px; |
|||
padding: 8px; |
|||
} |
|||
} |
|||
|
|||
.page-footer { |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
gap: 12px; |
|||
padding: 12px 16px; |
|||
background: #fff; |
|||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); |
|||
|
|||
.btn-cancel, |
|||
.btn-submit { |
|||
flex: 1; |
|||
height: 44px; |
|||
border-radius: 22px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.btn-cancel { |
|||
border: 1px solid #2b7de9; |
|||
color: #2b7de9; |
|||
background: #fff; |
|||
} |
|||
|
|||
.btn-submit { |
|||
border: none; |
|||
background: linear-gradient(135deg, #1367fe 0%, #4a8cff 100%); |
|||
} |
|||
} |
|||
|
|||
.video-preview-popup { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: #000; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.preview-video { |
|||
width: 100%; |
|||
max-height: 100%; |
|||
outline: none; |
|||
} |
|||
|
|||
:deep(.van-popup__close-icon) { |
|||
color: #fff; |
|||
font-size: 24px; |
|||
z-index: 2; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
{ |
|||
"printWidth": 150, |
|||
"tabWidth": 2, |
|||
"useTabs": false, |
|||
"semi": false, |
|||
"singleQuote": true, |
|||
"quoteProps": "preserve", |
|||
"jsxSingleQuote": false, |
|||
"bracketSameLine": false, |
|||
"trailingComma": "none", |
|||
"bracketSpacing": true, |
|||
"embeddedLanguageFormatting": "auto", |
|||
"arrowParens": "always", |
|||
"requirePragma": false, |
|||
"insertPragma": false, |
|||
"proseWrap": "preserve", |
|||
"htmlWhitespaceSensitivity": "css", |
|||
"vueIndentScriptAndStyle": false, |
|||
"endOfLine": "auto" |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class="nos-message-page app_content"> |
|||
<van-nav-bar title="消息" fixed placeholder /> |
|||
|
|||
<div class="message-body"> |
|||
<van-cell-group inset> |
|||
<van-cell title="任务通知" is-link @click="goNoticeList"> |
|||
<template #value> |
|||
<span v-if="unreadCount > 0" class="unread-badge"> |
|||
{{ unreadCount > 99 ? '99+' : unreadCount }} |
|||
</span> |
|||
</template> |
|||
</van-cell> |
|||
<van-cell title="非现场执法评价" is-link @click="goEvaluationList" /> |
|||
</van-cell-group> |
|||
</div> |
|||
|
|||
<FooterBar active="message" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="nosMessageHub"> |
|||
import { ref, onMounted, onActivated } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
import FooterBar from '@/components/FooterBar.vue'; |
|||
import { nosTaskListUnReadCountAPi } from '@/api/nos/enfDemo'; |
|||
import { setMessageUnread } from '@/store/messageState'; |
|||
|
|||
const router = useRouter(); |
|||
const unreadCount = ref(0); |
|||
|
|||
const fetchUnreadCount = () => { |
|||
nosTaskListUnReadCountAPi( |
|||
{}, |
|||
(res) => { |
|||
if (res.code === 200) { |
|||
const count = Number(res.data ?? 0) || 0; |
|||
unreadCount.value = count; |
|||
setMessageUnread(count); |
|||
} |
|||
}, |
|||
() => {}, |
|||
); |
|||
}; |
|||
|
|||
const goNoticeList = () => { |
|||
router.push('/enterprise/nos/noticeList'); |
|||
}; |
|||
|
|||
const goEvaluationList = () => { |
|||
router.push('/enterprise/nos/evaluationList'); |
|||
}; |
|||
|
|||
onMounted(fetchUnreadCount); |
|||
onActivated(fetchUnreadCount); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.nos-message-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
background: #f5f7fa; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
:deep(.van-nav-bar) { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__title) { |
|||
font-size: 17px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.message-body { |
|||
flex: 1; |
|||
min-height: 0; |
|||
overflow-y: auto; |
|||
padding: 12px 0; |
|||
} |
|||
|
|||
:deep(.van-cell-group--inset) { |
|||
margin: 0 12px; |
|||
} |
|||
|
|||
:deep(.van-cell__title) { |
|||
font-size: 15px; |
|||
color: #333; |
|||
} |
|||
|
|||
.unread-badge { |
|||
display: inline-block; |
|||
min-width: 18px; |
|||
height: 18px; |
|||
line-height: 18px; |
|||
padding: 0 6px; |
|||
background: #f5222d; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
border-radius: 9px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,330 @@ |
|||
<template> |
|||
<div class="plan-notice-page app_content"> |
|||
<van-nav-bar |
|||
title="任务通知" |
|||
left-text="返回" |
|||
left-arrow |
|||
@click-left="onClickLeft" |
|||
/> |
|||
|
|||
<div class="list-container"> |
|||
<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh"> |
|||
<van-list |
|||
v-model:loading="state.loading" |
|||
:finished="state.finished" |
|||
finished-text="已全部加载" |
|||
:error="state.error" |
|||
error-text="请求失败，点击重试" |
|||
:offset="50" |
|||
@load="onLoad" |
|||
@update:error="(v) => (state.error = v)" |
|||
> |
|||
<van-empty |
|||
v-if="!state.loading && state.finished && state.list.length === 0" |
|||
description="暂无任务通知" |
|||
/> |
|||
|
|||
<div |
|||
v-for="item in state.list" |
|||
:key="item.id ?? item.taskId" |
|||
class="plan-card" |
|||
> |
|||
<div class="card-header"> |
|||
<van-icon name="bell" class="bell-icon" /> |
|||
<span class="plan-title"> |
|||
<template |
|||
v-for="(seg, idx) in formatPlanTitleSegments(item.title)" |
|||
:key="idx" |
|||
> |
|||
<span v-if="seg.highlight" class="title-deadline-tip">{{ seg.text }}</span> |
|||
<template v-else>{{ seg.text }}</template> |
|||
</template> |
|||
</span> |
|||
</div> |
|||
<div class="card-content"> |
|||
<div class="info-row"> |
|||
<span class="label">企业名称</span> |
|||
<span class="value">{{ item.enterpriseName || '-' }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<span class="label">执法单位</span> |
|||
<span class="value">{{ item.lawEnforcementAgency || '-' }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<span class="label">截止日期</span> |
|||
<span class="value">{{ formatTime(item.deadline) }}</span> |
|||
</div> |
|||
<div class="info-row-bottom"> |
|||
<span class="item-time"></span> |
|||
<span class="item-action" @click="onView(item)"> |
|||
处理 |
|||
<van-icon name="arrow" /> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</van-list> |
|||
</van-pull-refresh> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="nosNoticeList"> |
|||
import { reactive } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
import { showFailToast } from 'vant'; |
|||
import 'vant/es/toast/style'; |
|||
import { nosTaskListNoticeAPi, nosTaskMarkReadAPi } from '@/api/nos/enfDemo'; |
|||
import { formattedTimeWithoutSecond } from '@/util/util'; |
|||
import { messageUnread, setMessageUnread } from '@/store/messageState'; |
|||
|
|||
const router = useRouter(); |
|||
|
|||
const state = reactive({ |
|||
list: [], |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
loading: false, |
|||
finished: false, |
|||
refreshing: false, |
|||
error: false, |
|||
}); |
|||
|
|||
const formatTime = (time) => { |
|||
if (!time) return '-'; |
|||
return formattedTimeWithoutSecond(time); |
|||
}; |
|||
|
|||
const DEADLINE_TIP_RE = /[（(]距截止日期\d+天[）)]/; |
|||
|
|||
const formatPlanTitleSegments = (title) => { |
|||
if (!title) return [{ text: '-', highlight: false }]; |
|||
|
|||
const match = title.match(DEADLINE_TIP_RE); |
|||
if (!match || match.index === undefined) { |
|||
return [{ text: title, highlight: false }]; |
|||
} |
|||
|
|||
const segments = []; |
|||
const main = title.slice(0, match.index); |
|||
const highlight = match[0]; |
|||
const rest = title.slice(match.index + highlight.length); |
|||
|
|||
if (main) segments.push({ text: main, highlight: false }); |
|||
segments.push({ text: highlight, highlight: true }); |
|||
if (rest) segments.push({ text: rest, highlight: false }); |
|||
|
|||
return segments; |
|||
}; |
|||
|
|||
const fetchList = () => { |
|||
nosTaskListNoticeAPi( |
|||
{ |
|||
pageNum: state.pageNum, |
|||
pageSize: state.pageSize, |
|||
}, |
|||
(res) => { |
|||
if (res.code !== 200) { |
|||
state.finished = true; |
|||
state.error = true; |
|||
state.refreshing = false; |
|||
showFailToast(res.msg || '加载失败'); |
|||
return; |
|||
} |
|||
|
|||
const rows = Array.isArray(res.rows) ? res.rows : []; |
|||
const total = res.total ?? 0; |
|||
|
|||
if (state.refreshing) { |
|||
state.list = rows; |
|||
state.refreshing = false; |
|||
} else { |
|||
state.list.push(...rows); |
|||
} |
|||
|
|||
if (state.list.length >= total || rows.length === 0) { |
|||
state.finished = true; |
|||
} else { |
|||
state.pageNum += 1; |
|||
} |
|||
}, |
|||
() => { |
|||
state.finished = true; |
|||
state.error = true; |
|||
state.refreshing = false; |
|||
showFailToast('网络请求失败'); |
|||
}, |
|||
).finally(() => { |
|||
state.loading = false; |
|||
}); |
|||
}; |
|||
|
|||
const markAsRead = (item) => { |
|||
if (!item?.id) return; |
|||
|
|||
nosTaskMarkReadAPi( |
|||
{ msgId: item.id }, |
|||
(res) => { |
|||
if (res.code !== 200) return; |
|||
state.list = state.list.filter((row) => row.id !== item.id); |
|||
if (messageUnread.value > 0) { |
|||
setMessageUnread(messageUnread.value - 1); |
|||
} |
|||
}, |
|||
); |
|||
}; |
|||
|
|||
const onView = (item) => { |
|||
if (!item?.taskId) { |
|||
showFailToast('任务信息不完整'); |
|||
return; |
|||
} |
|||
|
|||
router.push({ |
|||
name: 'nosDetail', |
|||
query: { id: item.taskId, tab: item.taskType }, |
|||
}); |
|||
markAsRead(item); |
|||
}; |
|||
|
|||
const onLoad = () => { |
|||
if (state.refreshing) return; |
|||
state.loading = true; |
|||
fetchList(); |
|||
}; |
|||
|
|||
const onRefresh = () => { |
|||
state.pageNum = 1; |
|||
state.list = []; |
|||
state.finished = false; |
|||
state.error = false; |
|||
state.loading = true; |
|||
fetchList(); |
|||
}; |
|||
|
|||
const onClickLeft = () => { |
|||
router.back(); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.plan-notice-page { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #ebf3fb; |
|||
} |
|||
|
|||
:deep(.van-nav-bar) { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__title) { |
|||
font-size: 17px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__text) { |
|||
font-size: 15px; |
|||
color: #333; |
|||
} |
|||
|
|||
:deep(.van-nav-bar .van-icon) { |
|||
color: #333; |
|||
} |
|||
|
|||
.list-container { |
|||
flex: 1; |
|||
min-height: 0; |
|||
overflow-y: auto; |
|||
margin: 10px; |
|||
} |
|||
|
|||
.plan-card { |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
padding: 15px; |
|||
margin-bottom: 15px; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.bell-icon { |
|||
color: #2d94fa; |
|||
font-size: 18px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.plan-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
flex: 1; |
|||
line-height: 1.4; |
|||
|
|||
.title-deadline-tip { |
|||
color: #ee0a24; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.card-content { |
|||
padding-left: 28px; |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 8px; |
|||
font-size: 14px; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
|
|||
.label { |
|||
color: #000; |
|||
min-width: 80px; |
|||
} |
|||
|
|||
.value { |
|||
flex: 1; |
|||
color: #999; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
|
|||
.info-row-bottom { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 4px; |
|||
padding-top: 10px; |
|||
border-top: 1px solid #f0f0f0; |
|||
|
|||
.item-time { |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
|
|||
.item-action { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
color: #2b7de9; |
|||
flex-shrink: 0; |
|||
|
|||
.van-icon { |
|||
font-size: 12px; |
|||
margin-left: 2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.van-empty) { |
|||
padding: 60px 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,571 @@ |
|||
<template> |
|||
<div class="cloud-record-page app_content"> |
|||
<van-nav-bar title="执法监督码" left-arrow @click-left="onBack" /> |
|||
|
|||
<div class="cloud-record-body"> |
|||
<van-tabs |
|||
v-model:active="activeTab" |
|||
class="cloud-record-tabs" |
|||
color="#2b7de9" |
|||
title-active-color="#2b7de9" |
|||
title-inactive-color="#646566" |
|||
line-width="50%" |
|||
> |
|||
<van-tab title="云笔录" name="cloud"> |
|||
<van-pull-refresh v-if="isViewOnly" v-model="refreshing" class="tab-scroll" @refresh="onRefresh"> |
|||
<div v-if="loading && !refreshing" class="loading-wrap"> |
|||
<van-loading type="spinner" color="#2b7de9" /> |
|||
</div> |
|||
|
|||
<template v-else-if="!hasRecord"> |
|||
<div class="empty-state"> |
|||
<van-image :src="noDataImg" width="151" height="120" /> |
|||
<div class="empty-text">暂无云笔录</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-else> |
|||
<div class="content-scroll"> |
|||
<div class="section-card"> |
|||
<div class="section-title">云视频</div> |
|||
<div v-if="cloudVideo" class="video-wrap" @click="showVideoPreview = true"> |
|||
<video :src="cloudVideo" muted preload="metadata" class="video-thumb" /> |
|||
<van-icon name="play-circle-o" class="play-icon" /> |
|||
</div> |
|||
<div v-else class="media-placeholder">暂无视频</div> |
|||
</div> |
|||
|
|||
<div class="section-card"> |
|||
<div class="section-title">云文字</div> |
|||
<div class="text-content">{{ cloudText || '暂无文字内容' }}</div> |
|||
</div> |
|||
|
|||
<div class="section-card"> |
|||
<div class="section-title">意见</div> |
|||
<div class="text-content">{{ suggestion || '暂无意见' }}</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</van-pull-refresh> |
|||
|
|||
<div v-else class="tab-scroll"> |
|||
<div class="form-card"> |
|||
<div class="form-row"> |
|||
<div class="form-label"> |
|||
<span class="required-mark">*</span>云视频 |
|||
</div> |
|||
<div class="form-value"> |
|||
<van-uploader |
|||
v-model="videoFileList" |
|||
:max-count="1" |
|||
:max-size="VIDEO_MAX_SIZE" |
|||
accept="video/*" |
|||
:after-read="onAfterReadVideo" |
|||
@oversize="onVideoOversize" |
|||
@delete="onVideoDelete" |
|||
> |
|||
<template #default> |
|||
<div class="uploader-btn"> |
|||
<van-icon name="plus" size="24" color="#dcdee0" /> |
|||
</div> |
|||
</template> |
|||
</van-uploader> |
|||
<div class="form-tip">（仅支持视频，200MB以下）</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-row form-row--textarea"> |
|||
<div class="form-label"> |
|||
<span class="required-mark">*</span>云文字： |
|||
</div> |
|||
<div class="form-value"> |
|||
<van-field |
|||
v-model="cloudText" |
|||
class="text-field" |
|||
type="textarea" |
|||
rows="5" |
|||
autosize |
|||
maxlength="300" |
|||
show-word-limit |
|||
placeholder="请输入" |
|||
:readonly="submitting" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</div> |
|||
|
|||
<div v-if="!isViewOnly" class="page-footer"> |
|||
<van-button class="btn-cancel" :disabled="submitting" @click="onBack">取消</van-button> |
|||
<van-button class="btn-submit" type="primary" :loading="submitting" @click="onSubmit">提交</van-button> |
|||
</div> |
|||
|
|||
<van-popup |
|||
v-model:show="showVideoPreview" |
|||
class="video-preview-popup" |
|||
teleport="body" |
|||
closeable |
|||
@closed="showVideoPreview = false" |
|||
> |
|||
<video |
|||
v-if="cloudVideo" |
|||
:src="cloudVideo" |
|||
controls |
|||
autoplay |
|||
playsinline |
|||
webkit-playsinline |
|||
class="preview-video" |
|||
/> |
|||
</van-popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="nosCloudRecord"> |
|||
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'; |
|||
import noDataImg from '@/assets/images/nos/no-data.png'; |
|||
import { submitCloudRecordApi, cloudRecordDetailApi } from '@/api/nos/enfDemo'; |
|||
import { uploadFile } from '@/util/fileUpload'; |
|||
import { toFullFileUrl, toRelativeFilePath } from '@/util/fileUrl'; |
|||
|
|||
const VIDEO_MAX_SIZE = 200 * 1024 * 1024; |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
// taskStatus=4 时已办结，仅查看 |
|||
const isViewOnly = computed(() => Number(route.query.taskStatus) === 4); |
|||
|
|||
const activeTab = ref('cloud'); |
|||
const loading = ref(false); |
|||
const refreshing = ref(false); |
|||
const submitting = ref(false); |
|||
const hasRecord = ref(false); |
|||
const cloudVideo = ref(''); |
|||
const cloudText = ref(''); |
|||
const suggestion = ref(''); |
|||
const cloudVideoPath = ref(''); |
|||
const videoFileList = ref([]); |
|||
const showVideoPreview = ref(false); |
|||
|
|||
const applyDetailData = (data) => { |
|||
cloudVideo.value = data.cloudVideo ? toFullFileUrl(data.cloudVideo) : ''; |
|||
cloudText.value = data.cloudText || ''; |
|||
suggestion.value = data.suggestion || ''; |
|||
hasRecord.value = !!(data.cloudVideo || data.cloudText || data.suggestion); |
|||
}; |
|||
|
|||
const fetchDetail = async () => { |
|||
const taskId = route.query.id; |
|||
if (!taskId) { |
|||
showToast('任务信息异常'); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
const res = await cloudRecordDetailApi({ taskId }); |
|||
if (res && res.code === 200) { |
|||
if (res.data) { |
|||
applyDetailData(res.data); |
|||
} else { |
|||
hasRecord.value = false; |
|||
cloudVideo.value = ''; |
|||
cloudText.value = ''; |
|||
suggestion.value = ''; |
|||
} |
|||
} else { |
|||
showToast(res?.msg || '查询云笔录失败'); |
|||
} |
|||
} catch (err) { |
|||
console.error(err); |
|||
showToast('查询云笔录失败'); |
|||
} finally { |
|||
loading.value = false; |
|||
refreshing.value = false; |
|||
} |
|||
}; |
|||
|
|||
const onRefresh = () => { |
|||
fetchDetail(); |
|||
}; |
|||
|
|||
const isVideo = (url) => { |
|||
if (!url) return false; |
|||
return /\.(mp4|webm|ogg|mov|avi|mkv)$/i.test(url); |
|||
}; |
|||
|
|||
const onVideoOversize = () => { |
|||
showToast('视频大小不能超过 200MB'); |
|||
}; |
|||
|
|||
const onVideoDelete = () => { |
|||
cloudVideoPath.value = ''; |
|||
}; |
|||
|
|||
const onAfterReadVideo = (file) => { |
|||
const files = Array.isArray(file) ? file : [file]; |
|||
files.forEach((f) => { |
|||
if (f.file && !f.file.type.startsWith('video/')) { |
|||
showToast('请上传视频文件'); |
|||
f.status = 'failed'; |
|||
f.message = '格式错误'; |
|||
videoFileList.value = []; |
|||
cloudVideoPath.value = ''; |
|||
return; |
|||
} |
|||
|
|||
uploadFile(f, (res) => { |
|||
const body = res?.data?.data ?? res?.data ?? res; |
|||
const filePath = |
|||
typeof body === 'string' |
|||
? body |
|||
: (body && (body.url || body.fileUrl || body.path)) || ''; |
|||
|
|||
if (filePath) { |
|||
if (!isVideo(filePath) && f.file && !f.file.type.startsWith('video/')) { |
|||
showToast('请上传视频文件'); |
|||
videoFileList.value = []; |
|||
cloudVideoPath.value = ''; |
|||
return; |
|||
} |
|||
cloudVideoPath.value = filePath; |
|||
f.url = toFullFileUrl(filePath); |
|||
f.isImage = false; |
|||
f.status = 'done'; |
|||
} else { |
|||
f.status = 'failed'; |
|||
f.message = '上传失败'; |
|||
cloudVideoPath.value = ''; |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
const validateForm = () => { |
|||
if (!cloudVideoPath.value) { |
|||
showToast('请上传云视频'); |
|||
return false; |
|||
} |
|||
if (!cloudText.value.trim()) { |
|||
showToast('请输入云文字'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}; |
|||
|
|||
const onBack = () => { |
|||
router.back(); |
|||
}; |
|||
|
|||
const onSubmit = async () => { |
|||
if (!validateForm()) return; |
|||
|
|||
const taskId = route.query.id; |
|||
if (!taskId) { |
|||
showToast('任务信息异常'); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
await showConfirmDialog({ |
|||
title: '确认提交', |
|||
message: '确认提交云笔录材料吗？', |
|||
width: '80%', |
|||
}); |
|||
|
|||
submitting.value = true; |
|||
const res = await submitCloudRecordApi({ |
|||
taskId, |
|||
cloudVideo: toRelativeFilePath(cloudVideoPath.value), |
|||
cloudText: cloudText.value.trim(), |
|||
}); |
|||
|
|||
if (res && res.code === 200) { |
|||
showSuccessToast('提交成功'); |
|||
router.back(); |
|||
} else { |
|||
showToast(res?.msg || '提交失败'); |
|||
} |
|||
} catch (err) { |
|||
if (err !== 'cancel') { |
|||
console.error(err); |
|||
showToast('提交失败'); |
|||
} |
|||
} finally { |
|||
submitting.value = false; |
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
if (isViewOnly.value) { |
|||
loading.value = true; |
|||
fetchDetail(); |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.cloud-record-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
background: #f5f7fa; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.cloud-record-body { |
|||
flex: 1; |
|||
min-height: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
} |
|||
|
|||
.cloud-record-tabs { |
|||
flex: 1; |
|||
min-height: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
:deep(.van-tabs__wrap) { |
|||
flex-shrink: 0; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
:deep(.van-tabs__content) { |
|||
flex: 1; |
|||
min-height: 0; |
|||
} |
|||
|
|||
:deep(.van-tab__panel) { |
|||
height: 100%; |
|||
} |
|||
|
|||
:deep(.van-tab) { |
|||
flex: 1; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
.tab-scroll { |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
background: #f5f7fa; |
|||
padding: 12px; |
|||
} |
|||
|
|||
.loading-wrap { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-top: 120px; |
|||
} |
|||
|
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 120px; |
|||
|
|||
.empty-text { |
|||
margin-top: 16px; |
|||
font-size: 16px; |
|||
color: #323233; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.content-scroll { |
|||
padding: 0; |
|||
} |
|||
|
|||
.section-card { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 12px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
color: #323233; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.video-wrap { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 180px; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
background: #000; |
|||
|
|||
.video-thumb { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.play-icon { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 48px; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
} |
|||
|
|||
.media-placeholder { |
|||
height: 120px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #f7f8fa; |
|||
border-radius: 8px; |
|||
color: #969799; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.text-content { |
|||
font-size: 14px; |
|||
color: #323233; |
|||
line-height: 22px; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.form-card { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 16px 12px; |
|||
} |
|||
|
|||
.form-row { |
|||
& + & { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
&--textarea { |
|||
.form-label { |
|||
margin-bottom: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-label { |
|||
font-size: 14px; |
|||
color: #323233; |
|||
line-height: 20px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.required-mark { |
|||
color: #ee0a24; |
|||
margin-right: 2px; |
|||
} |
|||
|
|||
.form-value { |
|||
:deep(.van-uploader) { |
|||
display: block; |
|||
} |
|||
|
|||
:deep(.van-uploader__wrapper) { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 8px; |
|||
} |
|||
|
|||
:deep(.van-uploader__preview) { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.uploader-btn { |
|||
width: 80px; |
|||
height: 80px; |
|||
background-color: #f7f8fa; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 4px; |
|||
border: 1px dashed #ebedf0; |
|||
} |
|||
|
|||
.form-tip { |
|||
margin-top: 8px; |
|||
font-size: 12px; |
|||
color: #969799; |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.text-field { |
|||
padding: 0; |
|||
background: #fff; |
|||
border: 1px solid #ebedf0; |
|||
border-radius: 4px; |
|||
|
|||
:deep(.van-field__control) { |
|||
min-height: 160px; |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
:deep(.van-field__word-limit) { |
|||
padding: 0 12px 8px; |
|||
} |
|||
} |
|||
|
|||
.page-footer { |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
gap: 12px; |
|||
padding: 12px 16px; |
|||
background: #fff; |
|||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); |
|||
|
|||
.btn-cancel, |
|||
.btn-submit { |
|||
flex: 1; |
|||
height: 44px; |
|||
border-radius: 22px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.btn-cancel { |
|||
border: 1px solid #2b7de9; |
|||
color: #2b7de9; |
|||
background: #fff; |
|||
} |
|||
|
|||
.btn-submit { |
|||
border: none; |
|||
background: linear-gradient(135deg, #1367fe 0%, #4a8cff 100%); |
|||
} |
|||
} |
|||
|
|||
.video-preview-popup { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: #000; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.preview-video { |
|||
width: 100%; |
|||
max-height: 100%; |
|||
outline: none; |
|||
} |
|||
|
|||
:deep(.van-popup__close-icon) { |
|||
color: #fff; |
|||
font-size: 24px; |
|||
z-index: 2; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue