<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
<el-form-item label="采集数据提交的时间">
<el-date-picker
v-model="daterangeTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="采集数据提交的地点" prop="position">
<el-input
v-model="queryParams.position"
placeholder="请输入采集数据提交的地点"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="采集人员编号" prop="userid">
<el-input
v-model="queryParams.userid"
placeholder="请输入采集人员编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="施工单位" prop="sgdw">
<el-input
v-model="queryParams.sgdw"
placeholder="请输入施工单位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="监理单位" prop="jldw">
<el-input
v-model="queryParams.jldw"
placeholder="请输入监理单位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="合同号" prop="hth">
<el-input
v-model="queryParams.hth"
placeholder="请输入合同号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="编号" prop="bh">
<el-input
v-model="queryParams.bh"
placeholder="请输入编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="工程名称" prop="gcmc">
<el-input
v-model="queryParams.gcmc"
placeholder="请输入工程名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="施工时间">
<el-date-picker
v-model="daterangeSgsj"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['gjstjgjlb:sj32:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['gjstjgjlb:sj32:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['gjstjgjlb:sj32:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['gjstjgjlb:sj32:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="sj32List" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="ID" align="center" prop="id" />
<el-table-column label="采集数据提交的时间" align="center" prop="time" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="采集数据提交的地点" align="center" prop="position" />
<el-table-column label="采集人员编号" align="center" prop="userid" />
<el-table-column label="施工单位" align="center" prop="sgdw" />
<el-table-column label="监理单位" align="center" prop="jldw" />
<el-table-column label="合同号" align="center" prop="hth" />
<el-table-column label="编号" align="center" prop="bh" />
<el-table-column label="工程名称" align="center" prop="gcmc" />
<el-table-column label="施工时间" align="center" prop="sgsj" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.sgsj, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="工程部位-桩号" align="center" prop="gcbwZh" />
<el-table-column label="工程部位-墩台号" align="center" prop="gcbwDth" />
<el-table-column label="工程部位-孔号" align="center" prop="gcbwKh" />
<el-table-column label="钢筋规格" align="center" prop="gjgg" />
<el-table-column label="抽检数量" align="center" prop="cjsl" />
<el-table-column label="代表数量" align="center" prop="dbsl" />
<el-table-column label="生产日期" align="center" prop="scrq" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.scrq, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="施工员" align="center" prop="sgy" />
<el-table-column label="专业工程师" align="center" prop="zygcs" />
<el-table-column label="检验结论" align="center" prop="jyjl" />
<el-table-column label="不合格处理" align="center" prop="bhgcl" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['gjstjgjlb:sj32:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['gjstjgjlb:sj32:remove']"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleMyExport(scope.row)"
>导出</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改钢筋丝头加工记录表对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<template slot="title">
<div style="text-align: center; font-size: 16px; font-weight: bold;">
钢筋丝头加工记录表
</div>
</template>
<el-form ref="form" :model="form" :rules="rules" label-width="0">
<!-- 施工单位 + 合同号 -->
<div style="display: flex; margin-bottom: 12px;">
<div style="flex: 1; display: flex; align-items: center; margin-right: 20px;">
<span style="min-width: 70px;">施工单位:</span>
<el-input v-model="form.sgdw" placeholder="请输入施工单位"></el-input>
</div>
<div style="flex: 1; display: flex; align-items: center;">
<span style="min-width: 70px;">合同号:</span>
<el-input v-model="form.hth" placeholder="请输入合同号"></el-input>
</div>
</div>
<!-- 监理单位 + 编号 -->
<div style="display: flex; margin-bottom: 12px;">
<div style="flex: 1; display: flex; align-items: center; margin-right: 20px;">
<span style="min-width: 70px;">监理单位:</span>
<el-input v-model="form.jldw" placeholder="请输入监理单位"></el-input>
</div>
<div style="flex: 1; display: flex; align-items: center;">
<span style="min-width: 70px;">编号:</span>
<el-input v-model="form.bh" placeholder="请输入编号"></el-input>
</div>
</div>
<!-- 工程名称 + 施工时间 -->
<div style="display: flex; margin-bottom: 12px;">
<div style="flex: 1; display: flex; align-items: center; margin-right: 20px;">
<span style="min-width: 70px;">工程名称:</span>
<el-input v-model="form.gcmc" placeholder="请输入工程名称"></el-input>
</div>
<div style="flex: 1; display: flex; align-items: center;">
<span style="min-width: 70px;">施工时间:</span>
<el-date-picker v-model="form.sgsj" type="date" placeholder="选择施工时间" style="width: 100%;"></el-date-picker>
</div>
</div>
<!-- 工程部位 -->
<div style="display: flex; margin-bottom: 12px; align-items: center;">
<span style="min-width: 150px;">工程部位(桩号、墩台号、孔号):</span>
<el-input v-model="form.gcbwZh" placeholder="桩号" style="width: 120px;"></el-input>
<span style="margin: 0 5px;">-</span>
<el-input v-model="form.gcbwDth" placeholder="墩台号" style="width: 120px;"></el-input>
<span style="margin: 0 5px;">-</span>
<el-input v-model="form.gcbwKh" placeholder="孔号" style="width: 120px;"></el-input>
</div>
<!-- 钢筋规格 + 抽检数量 -->
<div style="display: flex; margin-bottom: 12px;">
<div style="flex: 1; display: flex; align-items: center; margin-right: 20px;">
<span style="min-width: 70px;">钢筋规格:</span>
<el-input v-model="form.gjgg" placeholder="请输入钢筋规格"></el-input>
</div>
<div style="flex: 1; display: flex; align-items: center;">
<span style="min-width: 90px;">抽检数量(根):</span>
<el-input-number v-model="form.cjsl" :placeholder="form.cjsl ? '' : '数量'" style="width: 100%;"></el-input-number>
</div>
</div>
<!-- 生产日期 + 代表数量 -->
<div style="display: flex; margin-bottom: 15px;">
<div style="flex: 1; display: flex; align-items: center; margin-right: 20px;">
<span style="min-width: 70px;">生产日期:</span>
<el-date-picker v-model="form.scrq" type="date" placeholder="选择生产日期" style="width: 100%;"></el-date-picker>
</div>
<div style="flex: 1; display: flex; align-items: center;">
<span style="min-width: 90px;">代表数量(根):</span>
<el-input-number v-model="form.dbsl" :placeholder="form.dbsl ? '' : '数量'" style="width: 100%;"></el-input-number>
</div>
</div>
<!-- 表格标题 -->
<div style="text-align: center; font-weight: bold; margin: 15px 0;">
施工实际情况
</div>
<!-- 表格部分 -->
<el-table
:data="sgsjqkList"
:row-class-name="rowSgsjqkIndex"
@selection-change="handleSgsjqkSelectionChange"
ref="sgsjqk"
style="width: 100%">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="90"/>
<el-table-column prop="gjzj" label="钢筋直径" width="130" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.gjzj" size="small" placeholder="直径(mm)"></el-input>
</template>
</el-table-column>
<!-- 丝头螺纹检验 -->
<el-table-column label="丝头螺纹检验" align="center">
<el-table-column prop="htg" label="环通规" width="110" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.htg" size="small" placeholder="√/×" style="width: 60px;">
<el-option label="√" value="√"></el-option>
<el-option label="×" value="×"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="hzg" label="环止规" width="110" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.hzg" size="small" placeholder="√/×" style="width: 60px;">
<el-option label="√" value="√"></el-option>
<el-option label="×" value="×"></el-option>
</el-select>
</template>
</el-table-column>
</el-table-column>
<!-- 丝头外观检验 -->
<el-table-column label="丝头外观检验" align="center">
<el-table-column prop="yxlwcd" label="有效螺纹长度" width="120" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.yxlwcd" size="small" placeholder="√/×" style="width: 60px;">
<el-option label="√" value="√"></el-option>
<el-option label="×" value="×"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="bwzlw" label="不完整螺纹" width="120" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.bwzlw" size="small" placeholder="√/×" style="width: 60px;">
<el-option label="√" value="√"></el-option>
<el-option label="×" value="×"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="wgjc" label="外观检查" width="150" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.wgjc" size="small" placeholder="外观情况"></el-input>
</template>
</el-table-column>
</el-table-column>
</el-table>
<!-- 检验结论 + 不合格处理 -->
<div style="display: flex; margin-bottom: 12px;">
<div style="flex: 1; display: flex; align-items: center; margin-right: 20px;">
<span style="min-width: 70px;">检验结论:</span>
<el-input v-model="form.jyjl" placeholder="检验结论"></el-input>
</div>
<div style="flex: 1; display: flex; align-items: center;">
<span style="min-width: 80px;">不合格处理:</span>
<el-input v-model="form.bhgcl" placeholder="不合格处理"></el-input>
</div>
</div>
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddSgsjqk">添加</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteSgsjqk">删除</el-button>
</el-col>
<!-- 签名栏 -->
<div style="display: flex; justify-content: flex-end; align-items: center;">
<span style="margin-right: 15px;">施工员:</span>
<el-input v-model="form.sgy" placeholder="姓名" style="width: 120px; margin-right: 40px;"></el-input>
<span>专业工程师:</span>
<el-input v-model="form.zygcs" placeholder="姓名" style="width: 120px;"></el-input>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listSj32, getSj32, delSj32, addSj32, updateSj32, exportMyExcel } from "@/api/gjstjgjlb/sj32"
export default {
name: "Sj32",
dicts: ['sys_dui_nodui'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 子表选中数据
checkedSgsjqk: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 钢筋丝头加工记录表表格数据
sj32List: [],
// 施工实际情况表格数据
sgsjqkList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 外键时间范围
daterangeTime: [],
// 外键时间范围
daterangeSgsj: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
time: null,
position: null,
userid: null,
sgdw: null,
jldw: null,
hth: null,
bh: null,
gcmc: null,
sgsj: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
}
},
created() {
this.getList()
},
methods: {
/** 查询钢筋丝头加工记录表列表 */
getList() {
this.loading = true
this.queryParams.params = {}
if (null != this.daterangeTime && '' != this.daterangeTime) {
this.queryParams.params["beginTime"] = this.daterangeTime[0]
this.queryParams.params["endTime"] = this.daterangeTime[1]
}
if (null != this.daterangeSgsj && '' != this.daterangeSgsj) {
this.queryParams.params["beginSgsj"] = this.daterangeSgsj[0]
this.queryParams.params["endSgsj"] = this.daterangeSgsj[1]
}
listSj32(this.queryParams).then(response => {
this.sj32List = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
time: null,
position: null,
userid: null,
sgdw: null,
jldw: null,
hth: null,
bh: null,
gcmc: null,
sgsj: null,
gcbwZh: null,
gcbwDth: null,
gcbwKh: null,
gjgg: null,
cjsl: null,
dbsl: null,
scrq: null,
sgy: null,
zygcs: null,
jyjl: null,
bhgcl: null
}
this.sgsjqkList = []
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeTime = []
this.daterangeSgsj = []
this.resetForm("queryForm")
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = "添加钢筋丝头加工记录表"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getSj32(id).then(response => {
this.form = response.data
this.sgsjqkList = response.data.sgsjqkList
this.open = true
this.title = "修改钢筋丝头加工记录表"
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.sgsjqkList = this.sgsjqkList
if (this.form.id != null) {
updateSj32(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addSj32(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除钢筋丝头加工记录表编号为"' + ids + '"的数据项?').then(function() {
return delSj32(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
/** 施工实际情况序号 */
rowSgsjqkIndex({ row, rowIndex }) {
row.index = rowIndex + 1
},
/** 施工实际情况添加按钮操作 */
handleAddSgsjqk() {
let obj = {}
obj.gjzj = ""
obj.htg = ""
obj.hzg = ""
obj.yxlwcd = ""
obj.bwzlw = ""
obj.wgjc = ""
this.sgsjqkList.push(obj)
},
/** 施工实际情况删除按钮操作 */
handleDeleteSgsjqk() {
if (this.checkedSgsjqk.length == 0) {
this.$modal.msgError("请先选择要删除的施工实际情况数据")
} else {
const sgsjqkList = this.sgsjqkList
const checkedSgsjqk = this.checkedSgsjqk
this.sgsjqkList = sgsjqkList.filter(function(item) {
return checkedSgsjqk.indexOf(item.index) == -1
})
}
},
/** 复选框选中数据 */
handleSgsjqkSelectionChange(selection) {
this.checkedSgsjqk = selection.map(item => item.index)
},
/** 导出按钮操作 */
handleExport() {
this.download('gjstjgjlb/sj32/export', {
...this.queryParams
}, `sj32_${new Date().getTime()}.xlsx`)
},
handleMyExport(row) {
const id = row.id
exportMyExcel(id).then(response => {
this.$modal.msgSuccess("导出成功");
});
}
}
}
</script>
分析以上代码