zhgdyun/src/views/projectFront/quality/actualMeasured.vue

430 lines
13 KiB
Vue
Raw Normal View History

2023-01-08 01:33:25 +08:00
<template>
<!-- 实测实量页面 -->
<div class="panoramaPlan">
<div class="header-box">
<el-button type="primary" @click="addForm"> 新增 </el-button>
</div>
<div class="table-box">
<el-table class="tables" :data="tableData">
<el-table-column align="center" prop="chargerId" type="index" label="序号"></el-table-column>
<el-table-column prop="subsectionName" label="分部工程名称"> </el-table-column>
<el-table-column prop="subentryName" label="分项工程名称"> </el-table-column>
<el-table-column prop="projectName" label="实测实量项目"> </el-table-column>
<el-table-column prop="floorName" label="实测实量楼层"></el-table-column>
<el-table-column prop="measuredRealQuantityNumber" label="实测实量数量"></el-table-column>
<el-table-column prop="qualifiedNumber" label="实测实量合格数量"></el-table-column>
<el-table-column prop="status" label="评定结论">
<template slot-scope="scope">
{{ getStatus(scope.row.status) }}
</template>
</el-table-column>
<el-table-column prop="surveyingDate" label="测量日期"></el-table-column>
<el-table-column prop="imageUrl" align="center" label="图片">
<template slot-scope="scope">
<img
:preview="scope.row.imageUrl[0] ? scope.row.imageUrl[0].url : []"
:src="scope.row.imageUrl[0] ? scope.row.imageUrl[0].url : []"
alt=""
width="50px"
/>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-edit-outline"
@click="editData(scope.row)"
>
编辑
</el-button>
<el-button
class="delete-btn"
type="text"
icon="el-icon-delete"
@click="deleteData(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagerBox"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="$store.state.PAGESIZRS"
:page-size="size"
layout="total, sizes, prev, pager, next"
:total="Number(total)"
background
></el-pagination>
</div>
<!-- 新增弹框 -->
<el-dialog
class="dialog"
:title="dialogTitle"
:modal-append-to-body="false"
:visible.sync="dialogVisible"
width="667px"
>
<div class="dialog-content">
<vue-scroll>
<el-form
ref="form"
:model="dialogdata"
:rules="rules"
label-width="155px"
size="medium"
class="dialogFormBox"
>
<el-form-item label="分部(子分部)工程名称" prop="subsectionId">
<el-select
v-model="dialogdata.subsectionId"
@change="checkSubListData"
placeholder="请选择"
>
<el-option
v-for="(item, index) in listData"
:key="index"
:label="item.subdivisionProjectName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分项工程名称" prop="subentryId">
<el-select v-model="dialogdata.subentryId" placeholder="请选择">
<el-option
v-for="(item, index) in subListData"
:key="index"
:label="item.subdivisionProjectName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实测实量项目" prop="projectName">
<el-input
v-model="dialogdata.projectName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="实测实量楼层" prop="floorName">
<el-input
v-model="dialogdata.floorName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="实测实量数量" prop="measuredRealQuantityNumber">
<el-input
v-model="dialogdata.measuredRealQuantityNumber"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="合格数量" prop="qualifiedNumber">
<el-input
v-model="dialogdata.qualifiedNumber"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="评定结论" prop="status">
<el-select v-model="dialogdata.status" placeholder="请选择">
<el-option :value="1" label="合格"></el-option>
<el-option :value="2" label="不合格"></el-option>
</el-select>
</el-form-item>
<el-form-item label="测量日期" prop="surveyingDate">
<el-date-picker
v-model="dialogdata.surveyingDate"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item label="上传图片">
<el-upload
:action="$store.state.UPLOADURL"
list-type="picture-card"
multiple
name="files"
:limit="1"
:file-list="fileList"
:on-success="handleSuccess"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
</vue-scroll>
</div>
<div class="dialog-btn">
<el-button type="primary" @click="submitForm"> 确定 </el-button>
<el-button @click="dialogVisible = false"> 取消 </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getMeasuredRealQuantityApi, //分页查询实测实量
getSubdivisionProjectApi, //所有分部分项工程, 以父子节点形式呈现
addMeasuredRealQuantityApi,//新增
updateMeasuredRealQuantityApi,//编辑
deleteMeasuredRealQuantityApi,//删除
} from "@/assets/js/api/quality";
export default {
data() {
return {
tableData: [], //列表数据
dialogTitle: "",
dialogVisible: false,
dialogdata: {
subsectionId: "", //分部工程id
subentryId: "", //分项工程id
projectName:'',//实测实量项目
floorName:'',//实测实量楼层
measuredRealQuantityNumber:'',//实测实量数量
qualifiedNumber:'',//合格数量
status:'',//评定结论
surveyingDate:'',//测量日期
imageUrl:'',//图片
projectSn: "",
},
rules: {},
fileList: [],
current: 1,
size: 10,
total: 0,
listData:[],
subListData:[],
projectSn: "",
};
},
created() {
this.projectSn = this.$store.state.projectSn;
this.getData();
this.getProgressListData();
},
methods: {
//数据转换
getStatus(status) {
if (status === 1) {
return "合格";
} else {
return "不合格";
}
},
checkSubListData(val) {
console.log("一级菜单改动了 ", val);
this.listData.forEach((value) => {
if (value.id == val) {
this.subListData = value.children;
if (value.children.length >= 1) {
this.dialogdata.subentryId = value.children[0].id;
}
}
});
},
//查询实测实量列表
getData() {
getMeasuredRealQuantityApi({
projectSn: this.$store.state.projectSn,
size:this.size,
current:this.current
2023-01-08 01:33:25 +08:00
}).then((res) => {
res.result.records.map((item) => {
item.imageUrl = JSON.parse(item.imageUrl);
if (
item.imageUrl.length !== 0 &&
!item.imageUrl[0].url.includes(this.$store.state.FILEURL)
) {
item.imageUrl[0].url =
this.$store.state.FILEURL + item.imageUrl[0].url;
}
});
console.log("实测实量数据", res);
this.tableData=res.result.records
this.total=res.result.total
});
},
//获取分部分项工程, 以父子节点形式呈现
getProgressListData() {
let data = {
projectSn: this.projectSn,
};
getSubdivisionProjectApi(data).then((res) => {
if (res.code == 200) {
console.log("获取到的列表- 以父子节点形式呈现", res);
this.listData = res.result;
if (this.listData.length >= 1) {
this.dialogdata.subsectionId = this.listData[0].id;
if (this.listData[0].children.length >= 1) {
this.subListData = this.listData[0].children;
this.dialogdata.subentryId = this.listData[0].children[0].id;
}
}
}
});
},
//新增
addForm() {
this.dialogVisible = true;
this.dialogTitle = "新增实测实量";
this.dialogdata={
subsectionId: "", //分部工程id
subentryId: "", //分项工程id
projectName:'',//实测实量项目
floorName:'',//实测实量楼层
measuredRealQuantityNumber:'',//实测实量数量
qualifiedNumber:'',//合格数量
status:'',//评定结论
surveyingDate:'',//测量日期
imageUrl:'',//图片
}
this.fileList=[]
},
//编辑
editData(val){
this.dialogVisible = true;
this.dialogTitle = "编辑实测实量";
this.dialogdata= JSON.parse(JSON.stringify(val));
this.listData.forEach((value) => {
if (value.id == this.dialogdata.subsectionId) {
this.subListData = value.children;
}
});
this.fileList = val.imageUrl;
},
//删除
deleteData(val){
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteMeasuredRealQuantityApi({ id: val.id }).then((res) => {
this.$message({
type: "success",
message: "删除成功!",
});
this.getData();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//新增或编辑提交
submitForm() {
this.processTheFile();
let params = JSON.parse(JSON.stringify(this.dialogdata));
params.projectSn = this.$store.state.projectSn;
this.$refs.form.validate((valid) => {
if (valid) {
if (this.dialogTitle == "新增实测实量") {
addMeasuredRealQuantityApi(params).then((res) => {
this.$message.success("新增成功");
this.dialogVisible = false;
this.getData();
});
}else{
updateMeasuredRealQuantityApi(params).then((res) => {
this.$message.success("编辑成功");
this.dialogVisible = false;
this.getData();
});
}
}
});
},
processTheFile() {
//处理el上传的文件格式(结构)
this.dialogdata.imageUrl = [];
this.fileList.map((item) => {
if (!item.response) {
this.dialogdata.imageUrl.push(item);
// console.log('符合的结构', item)
} else if (item.response) {
// console.log('不符合的结构', item)
this.dialogdata.imageUrl.push({
name: item.response.data[0].filename,
url: item.response.data[0].imageUrl,
});
}
});
console.log("处理el上传的结构后", this.dialogdata.imageUrl);
this.dialogdata.imageUrl = JSON.stringify(this.dialogdata.imageUrl);
console.log("转字符串后", this.dialogdata.imageUrl);
},
handleSuccess(response, file, fileList) {
console.log("图片上传成功", fileList);
this.fileList = fileList;
},
handleRemove(response, fileList) {
this.fileList = fileList;
},
handleSizeChange(value) {
this.size = value;
2023-01-08 01:33:25 +08:00
this.getData();
},
handleCurrentChange(value) {
this.current = value;
2023-01-08 01:33:25 +08:00
this.getData();
},
},
};
</script>
<style lang="less" scoped>
.panoramaPlan {
width: 100%;
height: 100%;
background: #fff;
padding: 20px;
box-sizing: border-box;
.header-box {
margin-bottom: 20px;
padding-left: 10px;
.search-item {
display: inline-flex;
align-items: center;
white-space: nowrap;
margin-right: 20px;
/deep/.el-input {
width: 200px;
}
}
}
.delete-btn {
color: #f56c6c;
}
.dialog-content {
height: 630px;
margin-bottom: 60px;
}
.dialog-btn {
margin-left: 245px;
}
::v-deep .el-upload--picture-card {
position: absolute;
}
}
</style>