add 巡检表单
wersd
parent
aa7132c91a
commit
42f655c129
|
|
@ -5,11 +5,11 @@ export interface ProjectInspectionDataVO {
|
|||
id: number // 主键ID
|
||||
configType: number // 巡检配置类型
|
||||
name: string // 名称
|
||||
isRequired: boolean // 是否必填：0-否，1-是
|
||||
isRequired: number // 是否必填：0-否，1-是
|
||||
type: number // 类型，1-文本,2-数字,3-单选,4-多选,5-日期,6-图片,7-文件
|
||||
options: string // 选项内容
|
||||
sortOrder: number // 排序序号
|
||||
status: boolean // 状态：0-停用，1-启用
|
||||
status: number // 状态：0-停用，1-启用
|
||||
remark: string // 备注
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ export interface ProjectInspectionDataVO {
|
|||
return await request.download({ url: `/crm/project-inspection-data/export-excel`, params })
|
||||
}
|
||||
// 获取项目巡检内容列表
|
||||
export const getProjectInspectionDataList = async (type: number) => {
|
||||
return await request.get({ url: `/crm/project-inspection-data/list?configType=` + type })
|
||||
export const getProjectInspectionDataList = async (types: any[]) => {
|
||||
return await request.get({ url: `/crm/project-inspection-data/list`, params: { types: types.join(',') }})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,17 @@ import request from '@/config/axios'
|
|||
|
||||
// 项目巡检配置 VO
|
||||
export interface ProjectInspectionConfigVO {
|
||||
id?: number // 主键ID
|
||||
projectId: number // 项目ID
|
||||
configId: number // 配置ID
|
||||
configType?: number // 配置类型
|
||||
configName: string // 配置名称
|
||||
frequency: string // 巡检频率
|
||||
managementParty: string // 管理方
|
||||
contactPerson: string // 联系人
|
||||
contactPhone: string // 联系电话
|
||||
responsiblePersonId: string // 负责人
|
||||
status: boolean // 状态：0-停用，1-启用
|
||||
status: number // 状态：0-停用，1-启用
|
||||
remark: string // 备注
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
// 巡检记录 VO
|
||||
export interface ProjectInspectionRecordVO {
|
||||
id: number // 主键ID
|
||||
projectId: number // 项目ID
|
||||
inspectionDate: Date // 巡检日期
|
||||
inspector: number // 巡检人
|
||||
overallStatus: number // 总体状态
|
||||
summary: string // 巡检总结
|
||||
remark: string // 备注
|
||||
status: number // 状态
|
||||
}
|
||||
|
||||
// 查询巡检记录分页
|
||||
export const getProjectInspectionRecordPage = async (params: any) => {
|
||||
return await request.get({ url: `/crm/project-inspection-record/page`, params })
|
||||
}
|
||||
|
||||
// 查询巡检记录详情
|
||||
export const getProjectInspectionRecord = async (id: number) => {
|
||||
return await request.get({ url: `/crm/project-inspection-record/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增巡检记录
|
||||
export const createProjectInspectionRecord = async (data: ProjectInspectionRecordVO) => {
|
||||
return await request.post({ url: `/crm/project-inspection-record/create`, data })
|
||||
}
|
||||
|
||||
// 修改巡检记录
|
||||
export const updateProjectInspectionRecord = async (data: ProjectInspectionRecordVO) => {
|
||||
return await request.put({ url: `/crm/project-inspection-record/update`, data })
|
||||
}
|
||||
|
||||
// 删除巡检记录
|
||||
export const deleteProjectInspectionRecord = async (id: number) => {
|
||||
return await request.delete({ url: `/crm/project-inspection-record/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出巡检记录 Excel
|
||||
export const exportProjectInspectionRecord = async (params) => {
|
||||
return await request.download({ url: `/crm/project-inspection-record/export-excel`, params })
|
||||
}
|
||||
|
|
@ -231,6 +231,8 @@ export enum DICT_TYPE {
|
|||
CRM_PROJECT_SETTLEMENT_STATUS = 'crm_project_settlement_status', // CRM 项目结算状态
|
||||
CRM_PROJECT_INSPECTION_CHECKPOINT = 'crm_project_inspection_checkpoint', // CRM 项目巡检配置
|
||||
CRM_PROJECT_INSPECTION_DATA_TYPE = 'crm_project_inspection_data_type', // CRM 项目巡检内容类型
|
||||
CRM_PROJECT_INSPECTION_RECORD_OVERALL_STATUS = 'crm_project_inspection_record_overall_status', // CRM 项目巡检记录总体状态
|
||||
CRM_PROJECT_INSPECTION_RECORD_STATUS = 'crm_project_inspection_record_status', // CRM 项目巡检记录状态
|
||||
|
||||
|
||||
// ========== ERP - 企业资源计划模块 ==========
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="配置名称" prop="configName">
|
||||
<el-input v-model="formData.configName" placeholder="请输入配置名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示顺序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
:min="0"
|
||||
placeholder="请输入显示顺序"
|
||||
class="!w-full"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import * as ProjectInspectionCheckpointApi from '@/api/crm/project/inspection/checkpoint'
|
||||
|
||||
/** 检查点配置 表单 */
|
||||
defineOptions({ name: 'ProjectInspectionCheckpointForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
configName: undefined,
|
||||
sort: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
configName: [{ required: true, message: '配置名称不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ProjectInspectionCheckpointApi.getProjectInspectionCheckpoint(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ProjectInspectionCheckpointApi.ProjectInspectionCheckpointVO
|
||||
if (formType.value === 'create') {
|
||||
await ProjectInspectionCheckpointApi.createProjectInspectionCheckpoint(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ProjectInspectionCheckpointApi.updateProjectInspectionCheckpoint(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
configName: undefined,
|
||||
sort: undefined,
|
||||
status: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
class="!w-full"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_DATA_TYPE)"
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_CHECKPOINT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
|
|
@ -57,13 +57,41 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 选项内容：只有单选或多选时才显示 -->
|
||||
<el-row :gutter="20" v-if="formData.type === 3 || formData.type === 4">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="选项内容" prop="options">
|
||||
<el-input
|
||||
v-model="formData.options"
|
||||
placeholder="请输入选项内容（多个选项用逗号分隔）"
|
||||
/>
|
||||
<div class="options-container">
|
||||
<div
|
||||
v-for="(_, index) in optionsList"
|
||||
:key="index"
|
||||
class="option-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="optionsList[index]"
|
||||
:placeholder="`请输入选项 ${index + 1}`"
|
||||
class="option-input"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
size="small"
|
||||
@click="removeOption(index)"
|
||||
:disabled="optionsList.length <= 1"
|
||||
class="option-delete-btn"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Plus"
|
||||
plain
|
||||
@click="addOption"
|
||||
class="add-option-btn"
|
||||
>
|
||||
添加选项
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -115,6 +143,7 @@
|
|||
<script setup lang="ts">
|
||||
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import * as ProjectInspectionDataApi from '@/api/crm/project/inspection/data'
|
||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||
|
||||
/** 项目巡检内容 表单 */
|
||||
defineOptions({ name: 'ProjectInspectionDataForm' })
|
||||
|
|
@ -126,7 +155,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
|
|||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
const formData = ref<Partial<ProjectInspectionDataApi.ProjectInspectionDataVO>>({
|
||||
id: undefined,
|
||||
configType: undefined,
|
||||
name: undefined,
|
||||
|
|
@ -142,11 +171,121 @@ const formRules = reactive({
|
|||
name: [{ required: true, message: '管理规则不能为空', trigger: 'blur' }],
|
||||
isRequired: [{ required: true, message: '是否必填不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
|
||||
options: [
|
||||
{
|
||||
validator: (_rule: any, _value: any, callback: any) => {
|
||||
if (formData.value.type === 3 || formData.value.type === 4) {
|
||||
if (!optionsList.value || optionsList.value.length === 0) {
|
||||
callback(new Error('选项内容不能为空'))
|
||||
} else if (optionsList.value.some((opt: string) => !opt || !opt.trim())) {
|
||||
callback(new Error('选项内容不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
sortOrder: [{ required: true, message: '排序序号不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
// 选项列表
|
||||
const optionsList = ref<string[]>([''])
|
||||
|
||||
/** 解析选项字符串为数组 */
|
||||
const parseOptions = (options: string | undefined): string[] => {
|
||||
if (!options) return ['']
|
||||
|
||||
// 如果已经是数组格式（从后端返回）
|
||||
if (Array.isArray(options)) {
|
||||
return options.length > 0 ? options : ['']
|
||||
}
|
||||
|
||||
// 如果是字符串格式
|
||||
if (typeof options === 'string') {
|
||||
// 尝试解析 JSON 字符串
|
||||
try {
|
||||
const parsed = JSON.parse(options)
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed.length > 0 ? parsed : ['']
|
||||
}
|
||||
} catch (e) {
|
||||
// 不是 JSON，按逗号分隔
|
||||
}
|
||||
|
||||
// 按逗号分隔
|
||||
const items = options.split(',').map(opt => opt.trim()).filter(opt => opt)
|
||||
return items.length > 0 ? items : ['']
|
||||
}
|
||||
|
||||
return ['']
|
||||
}
|
||||
|
||||
/** 将选项数组转换为字符串 */
|
||||
const optionsToString = (options: string[]): string => {
|
||||
const filtered = options.filter(opt => opt && opt.trim())
|
||||
return filtered.length > 0 ? filtered.join(',') : ''
|
||||
}
|
||||
|
||||
/** 添加选项 */
|
||||
const addOption = () => {
|
||||
optionsList.value.push('')
|
||||
}
|
||||
|
||||
/** 删除选项 */
|
||||
const removeOption = (index: number) => {
|
||||
if (optionsList.value.length > 1) {
|
||||
optionsList.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听选项列表变化，同步到 formData
|
||||
watch(
|
||||
optionsList,
|
||||
(newVal) => {
|
||||
const optionsStr = optionsToString(newVal)
|
||||
// 如果选项为空，设置为空字符串（因为 API 定义 options 是 string 类型）
|
||||
formData.value.options = optionsStr
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// 监听类型变化，重置选项列表
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
(newType) => {
|
||||
if (newType === 3 || newType === 4) {
|
||||
// 如果当前选项为空或只有一个空项，保持一个空项
|
||||
if (!formData.value.options || optionsList.value.length === 0) {
|
||||
optionsList.value = ['']
|
||||
} else {
|
||||
// 解析现有选项
|
||||
optionsList.value = parseOptions(formData.value.options)
|
||||
}
|
||||
} else {
|
||||
// 非单选/多选类型，清空选项
|
||||
optionsList.value = ['']
|
||||
formData.value.options = ''
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 监听 formData.options 变化（从外部设置数据时）
|
||||
watch(
|
||||
() => formData.value.options,
|
||||
(newOptions) => {
|
||||
if (formData.value.type === 3 || formData.value.type === 4) {
|
||||
optionsList.value = parseOptions(newOptions)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
|
|
@ -157,7 +296,12 @@ const open = async (type: string, id?: number) => {
|
|||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ProjectInspectionDataApi.getProjectInspectionData(id)
|
||||
const data = await ProjectInspectionDataApi.getProjectInspectionData(id)
|
||||
formData.value = data
|
||||
// 初始化选项列表
|
||||
if (data.type === 3 || data.type === 4) {
|
||||
optionsList.value = parseOptions(data.options)
|
||||
}
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
|
|
@ -168,6 +312,16 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 同步选项数据
|
||||
if (formData.value.type === 3 || formData.value.type === 4) {
|
||||
const optionsStr = optionsToString(optionsList.value)
|
||||
// 如果选项为空，设置为空字符串（因为 API 定义 options 是 string 类型）
|
||||
formData.value.options = optionsStr
|
||||
} else {
|
||||
// 非单选/多选类型，清空选项
|
||||
formData.value.options = ''
|
||||
}
|
||||
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
|
|
@ -202,6 +356,33 @@ const resetForm = () => {
|
|||
status: undefined,
|
||||
remark: undefined,
|
||||
}
|
||||
optionsList.value = ['']
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.options-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.option-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-delete-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-option-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -104,7 +104,6 @@
|
|||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="主键ID" align="center" prop="id" />
|
||||
<el-table-column label="巡检配置类型" align="center" prop="configType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_PROJECT_INSPECTION_CHECKPOINT" :value="scope.row.configType" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目名称" prop="projectId">
|
||||
<el-select
|
||||
v-model="formData.projectId"
|
||||
placeholder="请选择项目名称"
|
||||
clearable
|
||||
filterable
|
||||
class="!w-full"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in projectList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="巡检日期" prop="inspectionDate">
|
||||
<el-date-picker
|
||||
v-model="formData.inspectionDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择巡检日期"
|
||||
class="!w-full"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="巡检人" prop="inspector">
|
||||
<el-select
|
||||
v-model="formData.inspector"
|
||||
placeholder="请选择巡检人"
|
||||
clearable
|
||||
filterable
|
||||
class="!w-full"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.nickname"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_RECORD_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="总体状态" prop="overallStatus">
|
||||
<el-radio-group v-model="formData.overallStatus">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_RECORD_OVERALL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="巡检总结" prop="summary">
|
||||
<el-input
|
||||
v-model="formData.summary"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入巡检总结"
|
||||
resize="both"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注"
|
||||
resize="both"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import * as ProjectInspectionRecordApi from '@/api/crm/project/inspection/record'
|
||||
import * as ProjectApi from '@/api/crm/project'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
|
||||
/** 巡检记录 表单 */
|
||||
defineOptions({ name: 'ProjectInspectionRecordForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
projectId: undefined,
|
||||
inspectionDate: undefined,
|
||||
inspector: undefined,
|
||||
overallStatus: undefined,
|
||||
summary: undefined,
|
||||
remark: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
projectId: [{ required: true, message: '项目名称不能为空', trigger: 'change' }],
|
||||
inspectionDate: [{ required: true, message: '巡检日期不能为空', trigger: 'blur' }],
|
||||
inspector: [{ required: true, message: '巡检人不能为空', trigger: 'change' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const projectList = ref<ProjectApi.ProjectVO[]>([]) // 项目列表
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 加载项目列表和用户列表
|
||||
projectList.value = await ProjectApi.getProjectSimpleList()
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ProjectInspectionRecordApi.getProjectInspectionRecord(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ProjectInspectionRecordApi.ProjectInspectionRecordVO
|
||||
if (formType.value === 'create') {
|
||||
await ProjectInspectionRecordApi.createProjectInspectionRecord(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ProjectInspectionRecordApi.updateProjectInspectionRecord(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
projectId: undefined,
|
||||
inspectionDate: undefined,
|
||||
inspector: undefined,
|
||||
overallStatus: undefined,
|
||||
summary: undefined,
|
||||
remark: undefined,
|
||||
status: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,390 @@
|
|||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="800" :scroll="true" :max-height="600">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="项目名称" prop="projectId">
|
||||
<el-input v-model="projectName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检日期" prop="inspectionDate">
|
||||
<el-input v-model="inspectionDate" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检人" prop="inspector">
|
||||
<el-input v-model="inspectorName" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 按配置类型分组显示巡检内容字段 -->
|
||||
<template v-for="group in groupedInspectionData" :key="group.configType">
|
||||
<!-- 分组标题 -->
|
||||
<el-divider>
|
||||
<span style="font-weight: bold; font-size: 16px;">
|
||||
{{ getConfigTypeName(group.configType) }}
|
||||
</span>
|
||||
</el-divider>
|
||||
|
||||
<!-- 分组下的表单项 -->
|
||||
<template v-for="item in group.items" :key="item.id">
|
||||
<el-form-item
|
||||
:label="item.name"
|
||||
:prop="`data_${item.id}`"
|
||||
:rules="getFieldRules(item)"
|
||||
>
|
||||
<!-- 文本类型 -->
|
||||
<el-input
|
||||
v-if="item.type === 1"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
:placeholder="`请输入${item.name}`"
|
||||
clearable
|
||||
/>
|
||||
<!-- 数字类型 -->
|
||||
<el-input-number
|
||||
v-else-if="item.type === 2"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
:placeholder="`请输入${item.name}`"
|
||||
class="!w-full"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
/>
|
||||
<!-- 单选类型 -->
|
||||
<el-radio-group
|
||||
v-else-if="item.type === 3"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
class="radio-group-flex"
|
||||
>
|
||||
<el-radio
|
||||
v-for="option in getOptions(item.options)"
|
||||
:key="option"
|
||||
:label="option"
|
||||
class="radio-item"
|
||||
>
|
||||
{{ option }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 多选类型 -->
|
||||
<el-checkbox-group
|
||||
v-else-if="item.type === 4"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
class="checkbox-group-flex"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="option in getOptions(item.options)"
|
||||
:key="option"
|
||||
:label="option"
|
||||
class="checkbox-item"
|
||||
>
|
||||
{{ option }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<!-- 日期类型 -->
|
||||
<el-date-picker
|
||||
v-else-if="item.type === 5"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="`请选择${item.name}`"
|
||||
class="!w-full"
|
||||
/>
|
||||
<!-- 图片类型 -->
|
||||
<UploadImg
|
||||
v-else-if="item.type === 6"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
/>
|
||||
<!-- 文件类型 -->
|
||||
<UploadFile
|
||||
v-else-if="item.type === 7"
|
||||
v-model="formData[`data_${item.id}`]"
|
||||
:limit="1"
|
||||
:file-size="20"
|
||||
:file-type="['pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt']"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as ProjectInspectionRecordApi from '@/api/crm/project/inspection/record'
|
||||
import * as ProjectInspectionDataApi from '@/api/crm/project/inspection/data'
|
||||
import * as ProjectApi from '@/api/crm/project'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import UploadImg from '@/components/UploadFile/src/UploadImg.vue'
|
||||
import UploadFile from '@/components/UploadFile/src/UploadFile.vue'
|
||||
import { getDictLabel, getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
/** 巡检记录填报 表单 */
|
||||
defineOptions({ name: 'ProjectInspectionRecordUploadForm' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const userStore = useUserStore() // 用户store
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('巡检填报') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const formRef = ref() // 表单 Ref
|
||||
const inspectionDataList = ref<ProjectInspectionDataApi.ProjectInspectionDataVO[]>([]) // 巡检内容列表
|
||||
const projectList = ref<ProjectApi.ProjectVO[]>([]) // 项目列表
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
const projectName = ref('') // 项目名称
|
||||
const inspectionDate = ref('') // 巡检日期
|
||||
const inspectorName = ref('') // 巡检人名称（显示当前用户）
|
||||
const recordId = ref<number | undefined>(undefined) // 记录ID
|
||||
const originalRecord = ref<ProjectInspectionRecordApi.ProjectInspectionRecordVO | null>(null) // 原始记录数据
|
||||
|
||||
const formData = ref<Record<string, any>>({}) // 表单数据
|
||||
const formRules = ref<Record<string, any>>({}) // 表单验证规则
|
||||
|
||||
/** 按配置类型分组的巡检数据 */
|
||||
const groupedInspectionData = computed(() => {
|
||||
const groups: Record<number, ProjectInspectionDataApi.ProjectInspectionDataVO[]> = {}
|
||||
|
||||
// 按 configType 分组
|
||||
inspectionDataList.value.forEach((item) => {
|
||||
const configType = item.configType
|
||||
if (!groups[configType]) {
|
||||
groups[configType] = []
|
||||
}
|
||||
groups[configType].push(item)
|
||||
})
|
||||
|
||||
// 获取字典选项（已按字典排序）
|
||||
const dictOptions = getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_CHECKPOINT)
|
||||
|
||||
// 创建 configType 到字典索引的映射
|
||||
const configTypeOrderMap = new Map<number, number>()
|
||||
dictOptions.forEach((dict, index) => {
|
||||
configTypeOrderMap.set(dict.value, index)
|
||||
})
|
||||
|
||||
// 转换为数组并按字典顺序排序
|
||||
const groupedArray = Object.keys(groups).map(configType => ({
|
||||
configType: Number(configType),
|
||||
items: groups[Number(configType)].sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||||
}))
|
||||
|
||||
// 按照字典中的顺序排序
|
||||
return groupedArray.sort((a, b) => {
|
||||
const orderA = configTypeOrderMap.get(a.configType)
|
||||
const orderB = configTypeOrderMap.get(b.configType)
|
||||
|
||||
// 如果都在字典中，按字典顺序排序
|
||||
if (orderA !== undefined && orderB !== undefined) {
|
||||
return orderA - orderB
|
||||
}
|
||||
// 如果只有一个在字典中，在字典中的排在前面
|
||||
if (orderA !== undefined) {
|
||||
return -1
|
||||
}
|
||||
if (orderB !== undefined) {
|
||||
return 1
|
||||
}
|
||||
// 如果都不在字典中，按 configType 数值排序
|
||||
return a.configType - b.configType
|
||||
})
|
||||
})
|
||||
|
||||
/** 获取配置类型名称 */
|
||||
const getConfigTypeName = (configType: number): string => {
|
||||
const name = getDictLabel(DICT_TYPE.CRM_PROJECT_INSPECTION_CHECKPOINT, configType)
|
||||
return name || `配置类型 ${configType}`
|
||||
}
|
||||
|
||||
/** 解析选项内容 */
|
||||
const getOptions = (options: string | string[] | undefined): string[] => {
|
||||
if (!options) return []
|
||||
|
||||
// 如果已经是数组格式，直接返回
|
||||
if (Array.isArray(options)) {
|
||||
return options.filter(opt => opt !== null && opt !== undefined && opt !== '')
|
||||
}
|
||||
|
||||
// 如果是字符串格式
|
||||
if (typeof options === 'string') {
|
||||
// 尝试解析 JSON 字符串格式，如 '["1","2","3"]'
|
||||
try {
|
||||
const parsed = JSON.parse(options)
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed.map(opt => String(opt)).filter(opt => opt !== '')
|
||||
}
|
||||
} catch (e) {
|
||||
// 如果不是 JSON 格式，按逗号分隔处理
|
||||
}
|
||||
|
||||
// 按逗号分隔处理
|
||||
return options.split(',').map(opt => opt.trim()).filter(opt => opt !== '')
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
/** 获取字段验证规则 */
|
||||
const getFieldRules = (item: ProjectInspectionDataApi.ProjectInspectionDataVO) => {
|
||||
const rules: any[] = []
|
||||
if (item.isRequired) {
|
||||
rules.push({
|
||||
required: true,
|
||||
message: `${item.name}不能为空`,
|
||||
trigger: item.type === 3 || item.type === 4 ? 'change' : 'blur'
|
||||
})
|
||||
}
|
||||
return rules
|
||||
}
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (
|
||||
record: ProjectInspectionRecordApi.ProjectInspectionRecordVO,
|
||||
dataList: ProjectInspectionDataApi.ProjectInspectionDataVO[]
|
||||
) => {
|
||||
dialogVisible.value = true
|
||||
formLoading.value = true
|
||||
|
||||
try {
|
||||
// 加载项目列表和用户列表
|
||||
projectList.value = await ProjectApi.getProjectSimpleList()
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
|
||||
// 保存原始记录数据
|
||||
originalRecord.value = record
|
||||
recordId.value = record.id
|
||||
const project = projectList.value.find(p => p.id === record.projectId)
|
||||
projectName.value = project?.name || ''
|
||||
|
||||
// 巡检人显示当前登录用户名称
|
||||
inspectorName.value = userStore.user.nickname || '当前用户'
|
||||
|
||||
// 格式化巡检日期
|
||||
if (record.inspectionDate) {
|
||||
const date = new Date(record.inspectionDate)
|
||||
inspectionDate.value = date.toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
// 设置巡检内容列表（不需要在这里排序，分组时会排序）
|
||||
inspectionDataList.value = dataList || []
|
||||
|
||||
// 初始化表单数据和验证规则
|
||||
formData.value = {}
|
||||
formRules.value = {}
|
||||
|
||||
inspectionDataList.value.forEach((item) => {
|
||||
const fieldKey = `data_${item.id}`
|
||||
// 初始化字段值
|
||||
if (item.type === 4) {
|
||||
// 多选类型初始化为数组
|
||||
formData.value[fieldKey] = []
|
||||
} else {
|
||||
formData.value[fieldKey] = undefined
|
||||
}
|
||||
// 设置验证规则
|
||||
formRules.value[fieldKey] = getFieldRules(item)
|
||||
})
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (!recordId.value || !originalRecord.value) {
|
||||
message.error('记录信息不完整')
|
||||
return
|
||||
}
|
||||
|
||||
// 构建分组数据
|
||||
const summaryData: Record<number, Record<number, any>> = {}
|
||||
|
||||
// 按配置类型分组收集表单数据
|
||||
groupedInspectionData.value.forEach((group) => {
|
||||
const groupData: Record<number, any> = {}
|
||||
|
||||
group.items.forEach((item) => {
|
||||
const fieldKey = `data_${item.id}`
|
||||
const value = formData.value[fieldKey]
|
||||
|
||||
// 处理多选类型
|
||||
if (item.type === 4 && Array.isArray(value)) {
|
||||
// 多选类型：只有当数组不为空时才提交
|
||||
if (value.length > 0) {
|
||||
groupData[item.id] = value.join(',')
|
||||
}
|
||||
} else if (value !== undefined && value !== null && value !== '') {
|
||||
// 其他类型：有值才提交
|
||||
groupData[item.id] = value
|
||||
}
|
||||
})
|
||||
|
||||
// 只有当分组有数据时才添加到 summaryData
|
||||
if (Object.keys(groupData).length > 0) {
|
||||
summaryData[group.configType] = groupData
|
||||
}
|
||||
})
|
||||
|
||||
// 构建更新数据
|
||||
// 注意：status 在 API 定义中是 boolean，但实际后端使用数字类型（通过字典可以确认）
|
||||
const updateData: any = {
|
||||
id: recordId.value,
|
||||
projectId: originalRecord.value.projectId,
|
||||
inspectionDate: originalRecord.value.inspectionDate,
|
||||
inspector: originalRecord.value.inspector,
|
||||
overallStatus: originalRecord.value.overallStatus,
|
||||
summary: JSON.stringify(summaryData), // 将分组数据转换为 JSON 字符串存入 summary 字段
|
||||
remark: originalRecord.value.remark || '',
|
||||
status: 2 // 设置状态为 2（已填报）
|
||||
}
|
||||
|
||||
// 调用更新 API
|
||||
await ProjectInspectionRecordApi.updateProjectInspectionRecord(updateData)
|
||||
|
||||
message.success('填报成功')
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error)
|
||||
message.error('提交失败，请稍后重试')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.radio-group-flex,
|
||||
.checkbox-group-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.el-radio),
|
||||
:deep(.el-checkbox) {
|
||||
margin-right: 0 !important;
|
||||
white-space: nowrap;
|
||||
|
||||
.el-radio__label,
|
||||
.el-checkbox__label {
|
||||
padding-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="项目名称" prop="projectId">
|
||||
<el-select
|
||||
v-model="queryParams.projectId"
|
||||
placeholder="请选择项目名称"
|
||||
clearable
|
||||
filterable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in projectList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检日期" prop="inspectionDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.inspectionDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-220px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检人" prop="inspector">
|
||||
<el-select
|
||||
v-model="queryParams.inspector"
|
||||
placeholder="请选择巡检人"
|
||||
clearable
|
||||
filterable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.nickname"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="总体状态" prop="overallStatus">
|
||||
<el-select
|
||||
v-model="queryParams.overallStatus"
|
||||
placeholder="请选择总体状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_RECORD_OVERALL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PROJECT_INSPECTION_RECORD_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['crm:project-inspection-record:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['crm:project-inspection-record:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="项目名称" align="center" prop="projectId">
|
||||
<template #default="scope">
|
||||
{{ getProjectName(scope.row.projectId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="巡检日期"
|
||||
align="center"
|
||||
prop="inspectionDate"
|
||||
:formatter="dateFormatter2"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column label="巡检人" align="center" prop="inspector">
|
||||
<template #default="scope">
|
||||
{{ getUserName(scope.row.inspector) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总体状态" align="center" prop="overallStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_PROJECT_INSPECTION_RECORD_OVERALL_STATUS" :value="scope.row.overallStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_PROJECT_INSPECTION_RECORD_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" min-width="120px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="canShowUploadButton(scope.row)"
|
||||
link
|
||||
type="success"
|
||||
@click="handleUpload(scope.row)"
|
||||
>
|
||||
填报
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['crm:project-inspection-record:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['crm:project-inspection-record:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ProjectInspectionRecordForm ref="formRef" @success="getList" />
|
||||
<!-- 填报表单弹窗 -->
|
||||
<ProjectInspectionRecordUploadForm ref="uploadFormRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter2 } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import * as ProjectInspectionRecordApi from '@/api/crm/project/inspection/record'
|
||||
import * as ProjectInspectionConfigApi from '@/api/crm/project/inspection'
|
||||
import * as ProjectInspectionDataApi from '@/api/crm/project/inspection/data'
|
||||
import * as ProjectApi from '@/api/crm/project'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import ProjectInspectionRecordForm from './ProjectInspectionRecordForm.vue'
|
||||
import ProjectInspectionRecordUploadForm from './ProjectInspectionRecordUploadForm.vue'
|
||||
|
||||
/** 巡检记录 列表 */
|
||||
defineOptions({ name: 'CrmProjectInspectionRecord' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ProjectInspectionRecordApi.ProjectInspectionRecordVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
projectId: undefined,
|
||||
inspectionDate: [],
|
||||
inspector: undefined,
|
||||
overallStatus: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const projectList = ref<ProjectApi.ProjectVO[]>([]) // 项目列表
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
const userStore = useUserStore() // 用户store
|
||||
const uploadFormRef = ref() // 填报表单Ref
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ProjectInspectionRecordApi.getProjectInspectionRecordPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ProjectInspectionRecordApi.deleteProjectInspectionRecord(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await ProjectInspectionRecordApi.exportProjectInspectionRecord(queryParams)
|
||||
download.excel(data, '巡检记录.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取项目名称 */
|
||||
const getProjectName = (projectId: number | undefined) => {
|
||||
if (!projectId) return ''
|
||||
const project = projectList.value.find(item => item.id === projectId)
|
||||
return project?.name || ''
|
||||
}
|
||||
|
||||
/** 获取用户名称 */
|
||||
const getUserName = (userId: number | string | undefined) => {
|
||||
if (!userId && userId !== 0) return ''
|
||||
// 处理类型不匹配问题：inspector可能是字符串，需要转换为数字进行比较
|
||||
const userIdNum = typeof userId === 'string' ? Number(userId) : userId
|
||||
// 避免NaN的情况
|
||||
if (isNaN(userIdNum as number)) return String(userId)
|
||||
const user = userList.value.find(item => item.id === userIdNum)
|
||||
return user?.nickname || String(userId)
|
||||
}
|
||||
|
||||
/** 判断是否为管理员（有所有权限或超级管理员角色） */
|
||||
const isAdmin = () => {
|
||||
const allPermission = '*:*:*'
|
||||
const superAdminRole = 'super_admin'
|
||||
const permissions = userStore.permissions
|
||||
const roles = userStore.roles || []
|
||||
|
||||
// 检查是否有所有权限
|
||||
if (permissions && permissions.has(allPermission)) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 检查是否为超级管理员
|
||||
if (roles.includes(superAdminRole)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
/** 判断是否可以看到填报按钮 */
|
||||
const canShowUploadButton = (row: ProjectInspectionRecordApi.ProjectInspectionRecordVO) => {
|
||||
// 1. 只有未填报（status != 2）才显示
|
||||
if (row.status === 2) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 2. 只有巡检人或者管理员才能看到
|
||||
const inspectorIdNum = typeof row.inspector === 'string' ? Number(row.inspector) : row.inspector
|
||||
const currentUserId = userStore.user.id
|
||||
|
||||
// 是巡检人
|
||||
if (currentUserId === inspectorIdNum) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 是管理员
|
||||
if (isAdmin()) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
/** 填报按钮操作 */
|
||||
const handleUpload = async (row: ProjectInspectionRecordApi.ProjectInspectionRecordVO) => {
|
||||
try {
|
||||
// 根据项目ID和巡检人ID查询配置，获取configType列表
|
||||
const inspectorIdNum = typeof row.inspector === 'string' ? Number(row.inspector) : row.inspector
|
||||
const configParams = {
|
||||
projectId: row.projectId,
|
||||
responsiblePersonId: inspectorIdNum,
|
||||
status: 0, // 只查询启用状态的配置
|
||||
pageNo: 1,
|
||||
pageSize: 99, // 获取所有配置
|
||||
}
|
||||
const configData = await ProjectInspectionConfigApi.getProjectInspectionConfigPage(configParams)
|
||||
|
||||
if (!configData.list || configData.list.length === 0) {
|
||||
message.warning('该巡检人没有配置巡检项目')
|
||||
return
|
||||
}
|
||||
|
||||
// 提取所有configType（去重）
|
||||
const configTypes = Array.from(
|
||||
new Set(
|
||||
configData.list
|
||||
.map((config: ProjectInspectionConfigApi.ProjectInspectionConfigVO) => config.configType)
|
||||
.filter((type: number | undefined) => type !== undefined)
|
||||
)
|
||||
) as number[]
|
||||
|
||||
if (configTypes.length === 0) {
|
||||
message.warning('该巡检人没有配置巡检类型')
|
||||
return
|
||||
}
|
||||
|
||||
// 根据configType查询巡检内容
|
||||
const inspectionDataList = await ProjectInspectionDataApi.getProjectInspectionDataList(configTypes)
|
||||
|
||||
if (!inspectionDataList || inspectionDataList.length === 0) {
|
||||
message.warning('没有找到对应的巡检内容')
|
||||
return
|
||||
}
|
||||
|
||||
// 打开填报表单
|
||||
uploadFormRef.value.open(row, inspectionDataList)
|
||||
} catch (error) {
|
||||
console.error('获取巡检配置失败:', error)
|
||||
message.error('获取巡检配置失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
// 先加载项目列表和用户列表
|
||||
projectList.value = await ProjectApi.getProjectSimpleList()
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
// 再加载列表数据
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue