<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="年份选择" prop="sampleCode">
<el-date-picker
v-model="queryParams.year"
type="year"
value-format="YYYY"
placeholder="请选择年份"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="送检编号" prop="sampleCode">
<el-input
v-model="queryParams.sampleCode"
placeholder="送检编号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['business:business:add']"
>新增</el-button
>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="spongeFacilitySampleList"
height="46vh"
@row-click="clickModal"
highlight-current-row
>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="检验编号" align="center" prop="sampleCode" />
<el-table-column label="送检时间" align="center" prop="sampleTime" />
<el-table-column label="送检人员" align="center" prop="sampleUser" />
<el-table-column label="采样报告" align="center" prop="sysFileList">
<template #default="scope">
<el-link
v-if="scope.row.sysFileList && scope.row.sysFileList.length"
@click="openfile(scope.row.sysFileList[0].url)"
type="primary"
>{{ scope.row.sysFileList[0].name }}</el-link
>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
link
type="primary"
icon="Edit"
@click.stop="handleUpdate(scope.row)"
v-hasPermi="['business:business:edit']"
>录入</el-button
>
<el-button
link
type="primary"
icon="Delete"
@click.stop="handleDelete(scope.row)"
v-hasPermi="['business:business:remove']"
>删除</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="getList"
/>
<el-table v-loading="bottomloading" :data="bottomList" height="30vh">
<el-table-column
label="海绵设施"
prop="spongeFacilityType"
width="100"
align="center"
>
<template #default="scope">
<dict-tag
:options="sponge_facility_type"
:value="scope.row.spongeFacilityType"
/>
</template>
</el-table-column>
<el-table-column
:label="item.label"
align="center"
v-for="item in rain_type"
:key="item"
>
<el-table-column label="第一次采样" align="center">
<el-table-column label="点位1" align="center">
<template #default="scope">
{{ scope.row[item.value] && scope.row[item.value].ss1Point1 }}
</template>
</el-table-column>
<el-table-column label="点位2" align="center">
<template #default="scope">
{{ scope.row[item.value] && scope.row[item.value].ss1Point2 }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="第二次采样" align="center">
<el-table-column label="点位1" align="center">
<template #default="scope">
{{ scope.row[item.value] && scope.row[item.value].ss2Point1 }}
</template>
</el-table-column>
<el-table-column label="点位2" align="center">
<template #default="scope">
{{ scope.row[item.value] && scope.row[item.value].ss2Point2 }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="第三次采样" align="center">
<el-table-column label="点位1" align="center">
<template #default="scope">
{{ scope.row[item.value] && scope.row[item.value].ss3Point1 }}
</template>
</el-table-column>
<el-table-column label="点位2" align="center">
<template #default="scope">
{{ scope.row[item.value] && scope.row[item.value].ss3Point2 }}
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
<!-- 添加或修改人工化验采集--海绵设施人工采样对话框 -->
<el-dialog
:title="title"
v-model="open"
width="1200px"
:close-on-click-modal="false"
append-to-body
>
<div class="boxtitle" v-if="title != '新增海绵设施人工采样'">
<div class="line"></div>
基本信息
</div>
<el-form
ref="businessRef"
:model="form"
:rules="rules"
label-width="80px"
>
<el-form-item label="检验编号" prop="sampleCode">
<el-input v-model="form.sampleCode" placeholder="请输入检验编号" />
</el-form-item>
<el-form-item label="送检时间" prop="sampleTime">
<el-date-picker
v-model="form.sampleTime"
type="datetime"
placeholder="送检时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="送检人员" prop="sampleUser">
<el-input v-model="form.sampleUser" placeholder="请输入送检人员" />
</el-form-item>
<el-form-item label="采样报告" prop="sampleUser">
<ImageFileUpload
:limit="1"
:fileType="['txt', 'doc', 'xls', 'docx', 'pdf']"
v-model:saveFileArr="form.sysFileSaveRequestList"
:listType="'text'"
:refType="'proProjectCompany'"
/>
</el-form-item>
<div class="boxtitle" v-if="title != '新增海绵设施人工采样'">
<div class="line"></div>
填报内容
</div>
<el-table
:data="filterTableData"
style="width: 100%"
v-if="title != '新增海绵设施人工采样'"
max-height="320px"
>
<el-table-column
label="海绵设施"
prop="spongeFacilityType"
align="center"
>
<template #default="scope">
<el-badge is-dot class="item">
<el-select
:disabled="!scope.row.isshow"
v-model="scope.row.spongeFacilityType"
placeholder="选择海绵设施"
filterable
clearable
>
<el-option
v-for="dict in sponge_facility_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-badge>
</template>
</el-table-column>
<el-table-column label="雨型" prop="rainType" align="center">
<template #default="scope">
<el-badge is-dot class="item">
<el-select
:disabled="!scope.row.isshow"
v-model="scope.row.rainType"
placeholder="选择雨型"
clearable
>
<el-option
v-for="dict in rain_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-badge>
</template>
</el-table-column>
<el-table-column label="第一次采样" align="center">
<el-table-column label="点位1" prop="ss1Point1" align="center">
<template #default="scope">
<el-input
:disabled="!scope.row.isshow"
placeholder="值"
min="0"
type="number"
v-model="scope.row.ss1Point1"
></el-input>
</template>
</el-table-column>
<el-table-column label="点位2" prop="ss1Point2" align="center">
<template #default="scope">
<el-input
:disabled="!scope.row.isshow"
placeholder="值"
min="0"
type="number"
v-model="scope.row.ss1Point2"
></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="第二次采样" align="center">
<el-table-column label="点位1" prop="ss2Point1" align="center">
<template #default="scope">
<el-input
:disabled="!scope.row.isshow"
placeholder="值"
min="0"
type="number"
v-model="scope.row.ss2Point1"
></el-input>
</template>
</el-table-column>
<el-table-column label="点位2" prop="ss2Point2" align="center">
<template #default="scope">
<el-input
:disabled="!scope.row.isshow"
placeholder="值"
min="0"
type="number"
v-model="scope.row.ss2Point2"
></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="第三次采样" align="center">
<el-table-column label="点位1" prop="ss3Point1" align="center">
<template #default="scope">
<el-input
:disabled="!scope.row.isshow"
placeholder="值"
min="0"
type="number"
v-model="scope.row.ss3Point1"
></el-input>
</template>
</el-table-column>
<el-table-column label="点位2" prop="ss3Point2" align="center">
<template #default="scope">
<el-input
:disabled="!scope.row.isshow"
placeholder="值"
min="0"
type="number"
v-model="scope.row.ss3Point2"
></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" width="150px">
<template #header>
<el-button @click="addCofig" type="primary" size="small">
新增
</el-button>
</template>
<template #default="scope">
<el-button
v-if="!scope.row.isshow"
size="small"
type="primary"
@click="change(scope.row)"
>修改</el-button
>
<el-button
v-if="scope.row.isshow"
size="small"
type="primary"
@click="saverow(scope.row)"
>保存</el-button
>
<el-button
size="small"
type="danger"
@click="deleterow(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 人工化验采集--海绵设施人工采样详情 -->
<el-dialog
title="海绵设施人工采样详情"
v-model="detailOpen"
width="800px"
append-to-body
class="dialog-detail-box"
>
<div class="dialog-form-detail flex flex-r flex-wrap">
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">检验编号</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.sampleCode }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">送检时间</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.sampleTime }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">送检人员</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.sampleUser }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">备注</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.remark }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">状态</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.status }}
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Business">
const { proxy } = getCurrentInstance()
import {
pagespongeFacilitySample,
getspongeFacilitySample,
delspongeFacilitySample,
addspongeFacilitySample,
updatespongeFacilitySample,
addspongeFacilitySampleDetail,
editspongeFacilitySampleDetail,
deletespongeFacilitySampleDetail,
seachpongeFacilitySampleDetail,
} from '@/api/scada/spongeFacilitySample'
const { sponge_facility_type, rain_type } = proxy.useDict(
'sponge_facility_type',
'rain_type'
)
const filterTableData = ref([
{
createBy: '',
createTime: '',
delFlag: '',
id: '',
rainType: '',
remark: '',
sampleCode: '',
spongeFacilityType: '',
ss1Point1: 0,
ss1Point2: 0,
ss2Point1: 0,
ss2Point2: 0,
ss3Point1: 0,
ss3Point2: 0,
status: '',
updateBy: '',
updateTime: '',
isshow: true,
},
])
const Getdetialid = ref(null)
const spongeFacilitySampleList = ref([])
const open = ref(false)
const loading = ref(false)
const bottomloading = ref(false)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const detailOpen = ref(false)
const bottomList = ref([])
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
sampleCode: null,
sampleTime: null,
sampleUser: null,
status: null,
sysFileSaveRequestList: [],
},
rules: {
sampleCode: [
{ required: true, message: '检验编号不能为空', trigger: 'blur' },
],
sampleTime: [
{ required: true, message: '送检时间不能为空', trigger: 'blur' },
],
sampleUser: [
{ required: true, message: '送检人员不能为空', trigger: 'blur' },
],
},
dialogFormDetail: {}, //详情弹框数据
})
const getisshow = ref(false)
const { queryParams, form, rules, dialogFormDetail } = toRefs(data)
//批量添加
function addCofig() {
chaxunisshow()
if (getisshow.value) {
proxy.$modal.msgWarning('请先保存上一条数据！')
} else {
filterTableData.value.push({
createBy: '',
createTime: '',
delFlag: '',
id: '',
rainType: '',
remark: '',
sampleCode: '',
spongeFacilityType: '',
ss1Point1: 0,
ss1Point2: 0,
ss2Point1: 0,
ss2Point2: 0,
ss3Point1: 0,
ss3Point2: 0,
status: '',
updateBy: '',
updateTime: '',
isshow: true,
})
}
}
//表格点击
function clickModal(row) {
console.log('rowrowrowrow', row)
bottomloading.value = true
getspongeFacilitySample(row.id).then((response) => {
bottomList.value = response.data.spongeFacilitySampleGroupDetails
bottomloading.value = false
console.log('bottomList.value', bottomList.value)
})
}
function openfile(file) {
window.open(file)
}
/** 删除按钮操作 */
function deleterow(index, row) {
console.log(row, index, 'row')
proxy.$modal
.confirm('是否确认删除？')
.then(function () {
if (row.id) {
deletespongeFacilitySampleDetail(row.id).then((res) => {
searchDetail()
getList()
})
} else {
filterTableData.value.splice(index, 1)
}
})
.then(() => {
proxy.$modal.msgSuccess('删除成功')
})
.catch(() => {})
}
function saverow(row) {
console.log(row, form.value)
if (!row.spongeFacilityType) {
proxy.$modal.msgWarning('请选择海绵设施')
return
}
if (!row.rainType) {
proxy.$modal.msgWarning('请选择雨型')
return
}
if (row.id) {
editspongeFacilitySampleDetail(row).then((res) => {
if (res.code == 200) {
proxy.$modal.msgSuccess('修改成功')
searchDetail()
getList()
} else {
proxy.$modal.msgWarning(res.msg)
}
})
} else {
row.sampleCode = form.value.sampleCode
addspongeFacilitySampleDetail(row).then((res) => {
if (res.code == 200) {
proxy.$modal.msgSuccess('新增成功')
searchDetail()
getList()
} else {
proxy.$modal.msgWarning(res.msg)
}
})
}
}
function chaxunisshow() {
let a = filterTableData.value.findIndex((item) => {
return item.isshow == true
})
getisshow.value = a == -1 ? false : true
}
function change(row) {
chaxunisshow()
if (getisshow.value) {
proxy.$modal.msgWarning('请先保存上一条数据！')
} else {
row.isshow = true
}
console.log(row, form.value)
}
/** 查询人工化验采集--海绵设施人工采样列表 */
function getList() {
loading.value = true
pagespongeFacilitySample(queryParams.value).then((response) => {
spongeFacilitySampleList.value = response.data
total.value = response.total
if (response.data[0]) {
clickModal(response.data[0])
}
loading.value = false
})
}
// 取消按钮
function cancel() {
open.value = false
reset()
}
// 表单重置
function reset() {
Getdetialid.value = ''
form.value = {
sampleCode: null,
sampleUser: null,
sampleTime: null,
sysFileSaveRequestList: [],
}
filterTableData.value = [
{
createBy: '',
createTime: '',
delFlag: '',
id: '',
rainType: '',
remark: '',
sampleCode: '',
spongeFacilityType: '',
ss1Point1: 0,
ss1Point2: 0,
ss2Point1: 0,
ss2Point2: 0,
ss3Point1: 0,
ss3Point2: 0,
status: '',
updateBy: '',
updateTime: '',
isshow: true,
},
]
proxy.resetForm('businessRef')
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm('queryRef')
handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.id)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
reset()
open.value = true
title.value = '新增海绵设施人工采样'
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset()
Getdetialid.value = row.sampleCode
const _id = row.id || ids.value
getspongeFacilitySample(_id).then((response) => {
response.data.sysFileSaveRequestList = response.data.sysFileList
form.value = response.data
open.value = true
title.value = '录入海绵设施人工采样'
searchDetail()
})
}
function searchDetail() {
seachpongeFacilitySampleDetail({ sampleCode: Getdetialid.value }).then(
(res) => {
console.log('seachpongeFacilitySampleDetail', res)
if (res.data && res.data.lenght) {
res.data.map((item) => {
item.isshow = false
})
}
filterTableData.value = res.data
}
)
}
/** 提交按钮 */
function submitForm() {
chaxunisshow()
if (getisshow.value && title.value != '新增海绵设施人工采样') {
proxy.$modal.msgWarning('请先保存填报内容数据！')
return
}
proxy.$refs['businessRef'].validate((valid) => {
if (valid) {
if (form.value.id != null) {
updatespongeFacilitySample(form.value).then((response) => {
proxy.$modal.msgSuccess('修改成功')
open.value = false
getList()
})
} else {
addspongeFacilitySample(form.value).then((response) => {
proxy.$modal.msgSuccess('新增成功')
open.value = false
getList()
})
}
}
})
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value
proxy.$modal
.confirm('是否确认删除检验编号为"' + row.sampleCode + '"的数据项？')
.then(function () {
return delspongeFacilitySample(_ids)
})
.then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
})
.catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
proxy.download(
'business/business/export',
{
...queryParams.value,
},
`business_${new Date().getTime()}.xlsx`
)
}
//查看详情操作
function handleDetail(row) {
detailOpen.value = true
dialogFormDetail.value = row
}
getList()
</script>
<style lang="scss" scoped>
.boxtitle {
color: #000;
font-size: 16px;
display: flex;
margin-bottom: 5px;
.line {
width: 3px;
height: 24px;
background: #33e3b8;
margin-right: 5px;
}
}
.item {
margin-top: 5px;
}
.pagination-container {
margin: 10px 0 !important;
padding: 0px 16px !important;
}
</style>
1657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
