<template> <!-- 地表水体水质达标 --> <div class="publicContainer"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> <el-form-item label="考核水体:" prop="riverId"> <el-select clearable v-model="queryParams.riverId" class="m-2" placeholder="请选择" size="mini"> <el-option v-for="item in responseAA" :key="item.id" :label="item.riverName" :value="Number(item.id)" /> </el-select> </el-form-item> <el-form-item label="采样年份:" prop="sampleYear"> <el-date-picker v-model="queryParams.sampleYear" type="year" placeholder="请选择" format="YYYY" value-format="YYYY" @change="change" /> </el-form-item> <el-form-item label="评价结果:" prop="reachStandard"> <el-select clearable v-model="queryParams.reachStandard" class="m-2" placeholder="请选择" size="mini"> <el-option v-for="item in optionsPipelineClass" :key="item.reachStandard" :label="item.label" :value="item.reachStandard" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="searchData">搜索</el-button> <el-button icon="Refresh" @click="resetData">重置</el-button> <el-button icon="CaretLeft" @click="resect" class="zbBtn"> 返回</el-button> <el-button icon="Plus" type="success" @click="addData">新增</el-button> </el-form-item> </el-form> <!-- 表格 --> <el-table :data="tableData" v-loading="tableLoading" :max-height="600"> <el-table-column type="index" width="55" label="序号" /> <el-table-column v-for="item in informationDate" :label="item.value" :prop="item.key" show-overflow-tooltip> <template #default="scope" v-if="item.key == 'reachStandard'"> <span :style="{ color: scope.row.reachStandard == '0' ? 'red' : 'lime', }" > <el-tag :type="scope.row.reachStandard == '0' ? 'error' : scope.row.reachStandard == '1' ? 'success' : ''"> {{ scope.row.reachStandard == '0' ? '超标' : '达标' }} </el-tag> </span> </template> <template #default="scope" v-if="item.key == 'sectionId'"> <dict-tag :options="sampleList" :value="scope.row.sectionId" /> </template> <template #default="scope" v-if="item.key == 'targetWaterQuality'"> <span :style="{ color: scope.row.targetWaterQuality == 'first' ? 'greenyellow' : scope.row.targetWaterQuality == 'second' ? '#1aab3afc' : scope.row.targetWaterQuality == 'third' ? '#3e36a7e6' : scope.row.targetWaterQuality == 'fourth' ? 'orange' : '', }" > {{ scope.row.targetWaterQualityName }} </span> </template> <template #default="scope" v-if="item.key == 'waterQuality'"> <span :style="{ color: scope.row.waterQuality == 'first' ? 'greenyellow' : scope.row.waterQuality == 'second' ? '#1aab3afc' : scope.row.waterQuality == 'third' ? '#3e36a7e6' : scope.row.waterQuality == 'fourth' ? 'orange' : scope.row.waterQuality == 'sixth' ? 'red' : '', }" > {{ scope.row.waterQualityName }} </span> </template> </el-table-column> <el-table-column label="操作" show-overflow-tooltip width="200"> <template #default="{ row }"> <el-button type="primary" link @click="checkDetail(row)">详情</el-button> <el-button type="primary" link @click="editData(row)">修改</el-button> <el-button type="danger" link @click="deleteData(row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" /> <!-- 添加 修改 查看彈框 --> <el-dialog :title="dialogTitle" v-model="showDialog" width="900px" :close-on-click-modal="false"> <el-form ref="ruleForm" :model="formData" :rules="formRules" label-width="auto" :disabled="isDisab" class="flex50" v-loading="submitLoading" > <el-row> <el-form-item label="考核水体:" prop="riverId" style="width: 45%"> <el-select clearable v-model="formData.riverId" class="m-2" placeholder="请选择" size="mini" style="width: 100%"> <el-option v-for="item in responseAA" :key="item.id" :label="item.riverName" :value="Number(item.id)" /> </el-select> </el-form-item> <el-form-item label="断面名称:" prop="sectionId" style="width: 45%"> <el-select v-model="formData.sectionId" placeholder="请选择" clearable @change="changeSampleSection" style="width: 100%"> <el-option v-for="item in sampleList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="采样时间:" prop="sampleTime" style="width: 45%"> <el-date-picker style="width: 100%" clearable format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="formData.sampleTime" type="date" /> </el-form-item> <el-form-item v-for="item in Dbssz" :label="item.sampleFactorName" :prop="item.sampleFactor" style="width: 45%"> <el-input-number v-model="formData[item.sampleFactor]" placeholder="请输入" style="width: 100%" clearable controls-position="right" :min="0" /> </el-form-item> <el-form-item label="水体类别:" prop="waterQualityName" style="width: 45%" v-if="hiddentext"> <el-input v-model="formData.waterQualityName" placeholder="请输入" style="width: 100%" clearable :disabled="isDisatext" /> </el-form-item> <el-form-item label="目标水质类别:" prop="targetWaterQualityName" style="width: 45%" v-if="hiddentext"> <el-input v-model="formData.targetWaterQualityName" placeholder="请输入" style="width: 100%" clearable :disabled="isDisatext" /> </el-form-item> <el-form-item label="采样照片" style="width: 100%" prop="imageList"> <ImageFileUpload :limit="3" :saveFileArr="formData.imageList" :listType="'picture-card'" :refField="'imageList'" :refType="'dpf_artificial_surface_water'" /> </el-form-item> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm" v-show="!isDisab">保 存</el-button> <el-button @click="cancel">关闭</el-button> </div> </template> </el-dialog> </div> </template> <script setup> import { riverInfoWater, waterQualityAdd, waterQualityDelete, sampleConfigconfiguration, waterQualityinformation, waterQualitySampleInfopaging, waterQualityEdit, } from '@/api/spongePerformance/surfaceWater'; import { sectionWaterList } from '@/api/dataAnalysis/manualAssay'; const { proxy } = getCurrentInstance(); import { defineEmits } from 'vue'; const isDisab = ref(false); const sampleList = ref([]); const isDisatext = ref(false); const showDialog = ref(false); const showSearch = ref(true); const tableLoading = ref(true); const hiddentext = ref(false); const submitLoading = ref(false); const responseAA = ref([]); const total = ref(0); const dialogTitle = ref(''); const tableData = ref([]); const Dbssz = ref([]); const informationDate = ref([]); const emits = defineEmits(); const { paramsData } = defineProps(['paramsData']); const optionsPipelineClass = [ { label: '达标', reachStandard: '1', }, { label: '不达标', reachStandard: '0', }, ]; const AllData = reactive({ formData: { configs: [], imageList: [], }, queryParams: { pageNum: 1, pageSize: 10, sampleTime: '', riverId: '', reachStandard: '', sampleYear: '', sectionId: '', }, formRules: { riverId: [{ required: true, message: '请选择', trigger: 'blur' }], sampleTime: [{ required: true, message: '请选择', trigger: 'blur' }], sectionId: [{ required: true, message: '请输入', trigger: 'blur' }], }, }); const { queryParams, formData, formRules } = toRefs(AllData); /** 表单重置 */ function resetForm() { formData.value = { riverId: undefined, sampleYear: undefined, sampleTime: undefined, reachStandard: undefined, sectionId: undefined, imageList: [], riverType: 'water_quality', }; proxy.resetForm('ruleForm'); } function resect() { // useRout.go(-1) emits('searchClick', { type: 0 }); } /** 新增按钮操作 */ function addData() { resetForm(); hiddentext.value = false; isDisab.value = false; showDialog.value = true; dialogTitle.value = '新增检测记录'; } //搜索 function searchData() { queryParams.value.pageNum = 1; getDataList(); } //重置 function resetData() { proxy.resetForm('queryRef'); searchData(); } // 获取下拉框数据 const getSelData = async () => { let params = { riverType: 'water_quality', }; riverInfoWater(params).then(response => { if (response.code == 200) { responseAA.value = response.data; // console.log(responseAA.value, 'responseAA.value'); } }); }; //新增中的 动态数据 const Dbsszconfiguration = async () => { let params = { sampleType: 'dbssz', }; sampleConfigconfiguration(params).then(response => { if (response.code == 200) { Dbssz.value = response.data; Dbssz.value.forEach(item => { formRules.value[item.sampleFactor] = [{ required: true, message: '请输入', trigger: 'blur', type: 'number' }]; }); } }); }; //地水质采样信息动态表头 const information = async () => { waterQualityinformation().then(res => { if (res.code == 200) { informationDate.value = res.data; } }); }; /** 搜索列表 */ const getDataList = async () => { tableLoading.value = true; const res = await waterQualitySampleInfopaging(queryParams.value); tableData.value = res.data.records; tableLoading.value = false; total.value = res.data.total || 0; }; /** 新增弹框 修改弹框 提交按钮 */ async function submitForm() { proxy.$refs['ruleForm'].validate(valid => { if (valid) { submitLoading.value = true; formData.value.configs = []; let obj = []; Dbssz.value.forEach(k => { obj.push(k.sampleFactor); }); obj.forEach(element => { formData.value.configs.push({ factor: element, value: formData.value[element], }); delete formData.value[element]; }); if (formData.value.id != undefined) { waterQualityEdit(formData.value).then(() => { console.log(formData.value, 'formData.value'); proxy.$modal.msgSuccess('修改成功'); submitLoading.value = false; showDialog.value = false; getDataList(); }); } else { waterQualityAdd(formData.value).then(() => { proxy.$modal.msgSuccess('新增成功'); submitLoading.value = false; showDialog.value = false; getDataList(); }); } } }); } //表格修改 function editData(row) { isDisab.value = false; isDisatext.value = true; showDialog.value = true; dialogTitle.value = '修改检测记录'; formData.value = { ...row }; hiddentext.value = true; console.log(row, 'row'); } // 表格删除 function deleteData(row) { proxy.$modal .confirm('是否确认删除?') .then(async () => { const res = await waterQualityDelete(row.id); if (res?.code !== 200) return; proxy.$modal.msgSuccess('操作成功!'); getDataList(); }) .catch(() => {}); } //详情按钮 function checkDetail(row) { dialogTitle.value = '查看检测记录'; isDisab.value = true; showDialog.value = true; isDisatext.value = true; formData.value = { ...row }; } /** 取消按钮 */ function cancel() { showDialog.value = false; resetForm(); } function change(val) { queryParams.value.sampleYear = val; } // 获取断面数据 function getSampleList() { let param = { pageNum: 1, pageSize: 9999, }; sectionWaterList(param).then(res => { res.data.map(item => { sampleList.value.push({ value: item.id, label: item.sectionName, }); }); }); } onMounted(() => { queryParams.value.sampleYear = paramsData?.examineYear || ''; // console.log(queryParams.value.sampleYear, 'queryParams.value.sampleYear'); getSampleList(); getDataList(); getSelData(); Dbsszconfiguration(); information(); }); </script> <style scoped lang="scss"></style>