You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

686 lines
19 KiB

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="巡查类型" prop="inspectionType">
<el-select
v-model="queryParams.data.inspectionType"
placeholder="请选择巡查类型"
clearable
size="small"
@change="handleQuery"
>
<el-option
v-for="dict in inspectionTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<!-- <el-button
type="cyan"
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"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['yhxx:yhxx:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['yhxx:yhxx:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['yhxx:yhxx:remove']"
>删除</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="yhxxList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" fixed />
<el-table-column
label="序号"
type="index"
width="50"
align="center"
fixed
/>
<el-table-column
label="关联水闸"
align="center"
prop="wagaId"
:formatter="wageIdFormat"
min-width="120"
/>
<el-table-column
label="提出人"
align="center"
prop="proposer"
min-width="120"
/>
<el-table-column
label="发现时间"
align="center"
prop="findTime"
min-width="120"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.findTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="地点"
align="center"
prop="address"
min-width="120"
/>
<el-table-column
label="巡查类型"
align="center"
prop="inspectionType"
:formatter="inspectionTypeFormat"
min-width="120"
/>
<el-table-column
label="所属仪器"
align="center"
prop="instrument"
min-width="120"
/>
<!-- <el-table-column
label="隐患详情"
align="center"
prop="dangerDetail"
min-width="120"
/>
<el-table-column
label="图片"
align="center"
prop="photo"
min-width="120"
/> -->
<!-- <el-table-column
label="水闸名称"
align="center"
prop="wagaName"
min-width="120"
/>
<el-table-column
label="水闸类型"
align="center"
prop="wagaType"
min-width="120"
/> -->
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="210"
fixed="right"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['yhxx:yhxx:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleResolve(scope.row)"
v-hasPermi="['yhxx:yhxx:resolve']"
>
{{ scope.row.status == "0" ? "解决" : "已解决" }}
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['yhxx:yhxx:remove']"
>删除</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="1200px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="关联水闸" prop="wagaId">
<!-- <el-input v-model="form.wagaId" placeholder="请输入水闸id" /> -->
<el-select
v-model="form.wagaId"
placeholder="请选择关联水闸"
style="width: 100%"
:disabled="isResolve"
>
<el-option
v-for="dict in wagaNameOptions"
:key="dict.id"
:label="dict.wagaName"
:value="dict.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="提出人" prop="proposer" v-if="!isResolve">
<el-input v-model="form.proposer" placeholder="请输入提出人" />
</el-form-item>
<el-form-item label="负责人" prop="head" v-if="isResolve">
<el-input v-model="form.head" placeholder="请输入负责人" />
</el-form-item>
<el-form-item label="发现时间" prop="findTime" v-if="!isResolve">
<el-date-picker
clearable
size="small"
style="width: 100%"
v-model="form.findTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择发现时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="处理时间" prop="processingTime" v-if="isResolve">
<el-date-picker
clearable
size="small"
style="width: 100%"
v-model="form.processingTime"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择处理时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="地点" prop="address">
<el-input v-model="form.address" placeholder="请输入地点" />
</el-form-item>
<el-form-item label="巡查类型" prop="inspectionType" v-if="!isResolve">
<el-select
v-model="form.inspectionType"
placeholder="请选择巡查类型"
style="width: 100%"
>
<el-option
v-for="dict in inspectionTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="花费资金" prop="cost" v-if="isResolve">
<el-input v-model="form.cost" placeholder="请输入花费资金" />
</el-form-item>
<el-form-item label="所属仪器" prop="instrument">
<el-input v-model="form.instrument" placeholder="请输入所属仪器" />
</el-form-item>
<el-form-item label="隐患详情" prop="dangerDetail" v-if="!isResolve">
<el-input v-model="form.dangerDetail" placeholder="请输入隐患详情" />
</el-form-item>
<el-form-item label="隐患处理方案" prop="finishMethod" v-if="isResolve">
<el-input
v-model="form.finishMethod"
placeholder="请输入隐患处理方案"
/>
</el-form-item>
<el-form-item label="隐患处理结果信息" prop="result" v-if="isResolve">
<el-input
v-model="form.result"
placeholder="请输入隐患处理结果信息"
/>
</el-form-item>
<el-form-item label="图片" prop="photo">
<!-- <el-input
v-model="form.photo"
type="textarea"
placeholder="请输入内容"
/> -->
<el-upload
class="upload-demo"
action="thinking/common/upload"
:headers="headers"
:on-preview="handlePreview"
:on-remove="(file) => handleRemove(file, 'fileList')"
:before-remove="beforeRemove"
multiple
:on-exceed="handleExceed"
:on-success="(_, fileList) => submitUpload(fileList, 'fileList')"
:file-list="fileList"
>
<el-button size="small" type="primary" plain>
<i class="el-icon-upload el-icon--right"></i>
点击上传
</el-button>
<div slot="tip" class="el-upload__tip">
支持jpg/png文件等,不超过100M
</div>
</el-upload>
</el-form-item>
</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 {
listYhxx,
getYhxx,
delYhxx,
addYhxx,
updateYhxx,
exportYhxx,
} from "@/api/yg/yhxx";
import { listJbxx, getJbxx } from "@/api/yg/jbxx";
import { getToken } from "@/utils/auth";
import { getFileStream } from "@/api/system/upload";
export default {
name: "Yhxx",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 水闸隐患信息表格数据
yhxxList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 水闸项目
wagaNameOptions: [],
// 巡查类型字典
inspectionTypeOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
ids: null,
data: {
wagaId: null,
proposer: null,
head: null,
findTime: null,
processingTime: null,
address: null,
inspectionType: null,
instrument: null,
dangerDetail: null,
photo: null,
status: null,
cost: null,
finishMethod: null,
result: null,
wagaName: null,
wagaType: null,
createUid: null,
updateUid: null,
owerDept: null,
relation: null,
},
// 排序方式
params: {
// 按哪个字段排序
orderBy: "create_time",
// desc降序,升序asc
sortBy: "desc",
},
},
// 表单参数
form: {},
// 表单校验
rules: {},
isResolve: false,
// 请求头
headers: {
shuili: "water " + getToken(),
},
fileList: [],
};
},
created() {
this.getList();
listJbxx({ data: {} }).then((res) => {
this.wagaNameOptions = res.records;
});
this.getDicts("type_of_inspection").then((response) => {
this.inspectionTypeOptions = response.data;
});
},
methods: {
handleResolve(row) {
this.reset();
this.isResolve = true;
const id = row.id || this.ids;
getYhxx(id).then((response) => {
this.form = response.data;
if (this.form.photo) {
this.fileList = JSON.parse(this.form.photo);
// console.log(11111, this.fileList);
}
this.open = true;
this.title = "解决水闸隐患信息";
});
},
wageIdFormat(row) {
const id = row.wagaId;
let data = this.wagaNameOptions.find((res) => res.id == id);
if (data) return data.wagaName;
},
/** 查询水闸隐患信息列表 */
getList() {
this.loading = true;
listYhxx(this.queryParams).then((response) => {
this.yhxxList = response.records;
this.total = response.total;
this.loading = false;
});
},
// 巡查类型字典翻译
inspectionTypeFormat(row, column) {
return this.selectDictLabel(
this.inspectionTypeOptions,
row.inspectionType
);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.fileList = [];
this.form = {
id: null,
wagaId: null,
proposer: null,
head: null,
findTime: null,
processingTime: null,
address: null,
inspectionType: null,
instrument: null,
dangerDetail: null,
photo: null,
status: "0",
cost: null,
finishMethod: null,
result: null,
wagaName: null,
wagaType: null,
createUid: null,
updateUid: null,
createTime: null,
updateTime: null,
owerDept: null,
remark: null,
relation: null,
};
this.resetForm("form");
},
// 查询表单重置
resetQueryForm() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
data: {
id: null,
wagaId: null,
proposer: null,
head: null,
findTime: null,
processingTime: null,
address: null,
inspectionType: null,
instrument: null,
dangerDetail: null,
photo: null,
status: "0",
cost: null,
finishMethod: null,
result: null,
wagaName: null,
wagaType: null,
createUid: null,
updateUid: null,
createTime: null,
updateTime: null,
owerDept: null,
remark: null,
relation: null,
},
params: {
// 按哪个字段排序
orderBy: "create_time",
// desc降序,升序asc
sortBy: "desc",
},
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetQueryForm();
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();
this.isResolve = false;
const id = row.id || this.ids;
getYhxx(id).then((response) => {
this.form = response.data;
if (this.form.photo) {
this.fileList = JSON.parse(this.form.photo);
// console.log(11111, this.fileList);
}
this.open = true;
this.title = "修改水闸隐患信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.form.photo = JSON.stringify(this.fileList);
if (this.form.id != null) {
if (this.isResolve) this.form.status = "1";
updateYhxx(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addYhxx(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
if (ids) {
this.$confirm("是否删除选中的数据?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return delYhxx(ids);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
})
.catch(function () {});
} else {
this.$message.warning("请选择要删除的数据!!");
}
},
// 上传意见附件
submitUpload(fileList, name) {
console.log(name, fileList);
this[name].push({
name: fileList.name,
fileName: fileList.response.fileName,
url: fileList.response.url,
uid: fileList.uid,
});
console.log(name, this[name]);
},
handleRemove(file, name) {
// console.log(file, fileList1);
let index = this[name].findIndex((item) => item.uid === file.uid);
// 删除文件
this[name].splice(index, 1);
},
downloadFile2(info, index) {
console.log(info);
this.handlePreview(info);
},
// 点击预览的文件进行下载
handlePreview(file) {
// console.log(file);
getFileStream({ fileName: file.fileName }).then((res) => {
const blob = new Blob([res], {
// type类型后端返回来的数据中会有,根据自己实际进行修改
// 表格下载为 application/xlsx,压缩包为 application/zip等,
type: "application/xlsx",
}); //excel,pdf等
const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
const a = document.createElement("a"); //创建a标签
a.style.display = "none";
a.href = href; // 指定下载链接
a.download = file.name; //指定下载文件名
a.click(); //触发下载
URL.revokeObjectURL(a.href); //释放URL对象
});
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
files.length + fileList.length
} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}`);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/dialog.scss";
// ::v-deep {
// .el-dialog {
// margin-top: 2vh !important;
// }
// }
</style>