awsl
1 month ago
12 changed files with 4342 additions and 106 deletions
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<el-row :gutter="15"> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
|||
<!-- <el-col :span="6"> |
|||
<el-form-item label="组织id" prop="organizationId"> |
|||
<el-input v-model="form.organizationId" placeholder="请输入组织id" /> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
<el-col :span="6"> |
|||
<el-form-item label="组织人员名称" prop="name"> |
|||
<el-input v-model="form.name" placeholder="请输入组织人员名称" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="职务" prop="duites"> |
|||
<el-input v-model="form.duites" placeholder="请输入职务" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="电话" prop="phone"> |
|||
<el-input v-model="form.phone" placeholder="请输入电话" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button-group> |
|||
<el-button icon="el-icon-plus" @click="addFormFarther"></el-button> |
|||
<el-button |
|||
icon="el-icon-minus" |
|||
@click="delFormFarther" |
|||
v-if="!isFirst" |
|||
></el-button> |
|||
</el-button-group> |
|||
</el-col> |
|||
</el-form> |
|||
</el-row> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
isFirst: { |
|||
default() { |
|||
return false; |
|||
}, |
|||
}, |
|||
index: {}, |
|||
status: {}, |
|||
editItem: {}, |
|||
addForm: { |
|||
type: Function, |
|||
default: () => { |
|||
console.log(777); |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
form: {}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: "请输入组织人员名称", trigger: "blur" }, |
|||
], |
|||
duites: [ |
|||
{ required: true, message: "请输入组织人员名称", trigger: "blur" }, |
|||
], |
|||
phone: [ |
|||
{ required: true, message: "请输入手机号", trigger: "blur" }, |
|||
{ |
|||
pattern: |
|||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, |
|||
message: "手机号格式不正确", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
// 判断打开的弹出框，是新增还是编辑 |
|||
if (this.status) { |
|||
this.form = this.editItem; |
|||
} else { |
|||
this.form = { |
|||
id: null, |
|||
organizationId: null, |
|||
name: null, |
|||
duites: null, |
|||
phone: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
createTime: null, |
|||
updateTime: null, |
|||
owerDept: null, |
|||
remark: null, |
|||
relation: null, |
|||
}; |
|||
} |
|||
console.log("this.form in components", this.form); |
|||
// 当时是第一个表单时，form有父组件传入 |
|||
// if (this.isFirst) { |
|||
// this.form = this.firstForm; |
|||
// console.log(" this.firstForm;", this.firstForm); |
|||
// } |
|||
// console.log("isFirst", this.isFirst); |
|||
// console.log("markTypeOptions", this.markTypeOptions); |
|||
}, |
|||
watch: { |
|||
editItem: { |
|||
deep: true, |
|||
handler(newVal, oldVal) { |
|||
// 表单内点击减号时，重新赋值刷新显示 |
|||
this.form = newVal; |
|||
// console.log("新的name", newVal); |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
addFormFarther() { |
|||
this.addForm(this.index); |
|||
}, |
|||
delFormFarther() { |
|||
this.$emit("delForm", this.form.id, this.index); |
|||
}, |
|||
validateForm() { |
|||
this.$refs.form.validate((valid) => (this.valid = valid)); |
|||
}, |
|||
validClear() { |
|||
this.$refs.form.clearValidate(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,421 @@ |
|||
<template> |
|||
<div> |
|||
<div class="listTitle"> |
|||
<span>{{ recordsType }}</span> |
|||
<span class="addBtn" @click="handleAdd"> |
|||
<i class="el-icon-plus"></i> |
|||
添加 |
|||
</span> |
|||
</div> |
|||
<el-table v-loading="loading" :data="tableList"> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="50" |
|||
align="center" |
|||
fixed |
|||
/> |
|||
|
|||
<!-- <el-table-column |
|||
label="电源id" |
|||
align="center" |
|||
prop="powerId" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="类型" |
|||
align="center" |
|||
prop="type" |
|||
min-width="120" |
|||
/> --> |
|||
<el-table-column |
|||
label="负责人名称" |
|||
align="center" |
|||
prop="personName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="描述" |
|||
align="center" |
|||
prop="describetion" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="试运行日期" |
|||
align="center" |
|||
sortable |
|||
prop="time" |
|||
min-width="120" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.time, "{y}-{m}-{d}") }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
width="180" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(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="800px" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="96px"> |
|||
<!-- <el-form-item label="电源id" prop="powerId"> |
|||
<el-input v-model="form.powerId" placeholder="请输入电源id" /> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="type"> |
|||
<el-select v-model="form.type" placeholder="请选择类型"> |
|||
<el-option label="请选择字典生成" value="" /> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="负责人名称" prop="personName"> |
|||
<el-input v-model="form.personName" placeholder="请输入负责人名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="试运行日期" prop="time"> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
v-model="form.time" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择试运行日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="描述" prop="describetion"> |
|||
<el-input |
|||
v-model="form.describetion" |
|||
placeholder="请输入描述" |
|||
type="textarea" |
|||
/> |
|||
</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 { |
|||
listSyxjl, |
|||
getSyxjl, |
|||
delSyxjl, |
|||
addSyxjl, |
|||
updateSyxjl, |
|||
exportSyxjl, |
|||
} from "@/api/yg/syxjl"; |
|||
|
|||
export default { |
|||
name: "Syxjl", |
|||
props: ["activeName", "powerId"], |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 水闸备用电源试运行记录表格数据 |
|||
syxjlList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
powerId: null, |
|||
type: null, |
|||
personName: null, |
|||
describetion: null, |
|||
time: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
personName: [ |
|||
{ required: true, message: "请输入负责人名称", trigger: "blur" }, |
|||
], |
|||
time: [ |
|||
{ required: true, message: "请选择试运行时间", trigger: "blur" }, |
|||
], |
|||
describetion: [ |
|||
{ required: true, message: "请描述文字", trigger: "blur" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
recordsType() { |
|||
if (this.activeName === "daily") { |
|||
return "日常"; |
|||
} else if (this.activeName === "beforeFlood") { |
|||
return "汛前"; |
|||
} else if (this.activeName === "afterFlood") { |
|||
return "汛后"; |
|||
} |
|||
}, |
|||
tableList() { |
|||
let list = []; |
|||
if (this.activeName === "daily") { |
|||
list = this.syxjlList.filter((res) => res.type == "0"); |
|||
return list; |
|||
} else if (this.activeName === "beforeFlood") { |
|||
list = this.syxjlList.filter((res) => res.type == "1"); |
|||
return list; |
|||
} else if (this.activeName === "afterFlood") { |
|||
list = this.syxjlList.filter((res) => res.type == "2"); |
|||
return list; |
|||
} |
|||
}, |
|||
recordsTypeCode() { |
|||
if (this.activeName === "daily") { |
|||
return "0"; |
|||
} else if (this.activeName === "beforeFlood") { |
|||
return "1"; |
|||
} else if (this.activeName === "afterFlood") { |
|||
return "2"; |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
/** 查询水闸备用电源试运行记录列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
this.queryParams.data.powerId = this.powerId; |
|||
// this.queryParams.data.type = this.recordsTypeCode; |
|||
listSyxjl(this.queryParams).then((response) => { |
|||
this.syxjlList = response.records; |
|||
// this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
id: null, |
|||
powerId: null, |
|||
type: null, |
|||
personName: null, |
|||
describetion: null, |
|||
time: 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, |
|||
powerId: null, |
|||
type: null, |
|||
personName: null, |
|||
describetion: null, |
|||
time: 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(); |
|||
const id = row.id || this.ids; |
|||
getSyxjl(id).then((response) => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改水闸备用电源试运行记录"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm() { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
if (this.form.id != null) { |
|||
updateSyxjl(this.form).then((response) => { |
|||
if (response.code === 200) { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
} |
|||
}); |
|||
} else { |
|||
this.form.powerId = this.powerId; |
|||
this.form.type = this.recordsTypeCode; |
|||
addSyxjl(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 delSyxjl(ids); |
|||
}) |
|||
.then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}) |
|||
.catch(function () {}); |
|||
} else { |
|||
this.$message.warning("请选择要删除的数据！！"); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/css/dialog.scss"; |
|||
::v-deep .el-dialog { |
|||
margin-top: 30vh !important; |
|||
} |
|||
|
|||
.listTitle { |
|||
font-size: 14px; |
|||
padding-left: 10px; |
|||
padding-right: 30px; |
|||
margin: 20px 0; |
|||
border-left: 2px solid #36b29e; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
span:nth-child(1) { |
|||
font-weight: bold; |
|||
} |
|||
.addBtn { |
|||
color: #36b29e; |
|||
cursor: pointer; |
|||
} |
|||
.addBtn:hover { |
|||
color: #31a08e; |
|||
} |
|||
} |
|||
.listTitle:nth-child(1) { |
|||
margin-top: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,452 @@ |
|||
<template> |
|||
<div style="padding: 10px"> |
|||
<div class="listTitle"> |
|||
<span>备用电源信息</span> |
|||
<span class="addBtn" @click="handleAdd"> |
|||
<i class="el-icon-plus"></i> |
|||
添加 |
|||
</span> |
|||
</div> |
|||
|
|||
<el-table v-loading="loading" :data="bydyList"> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="50" |
|||
align="center" |
|||
fixed |
|||
/> |
|||
|
|||
<el-table-column |
|||
label="备用电源名称" |
|||
align="center" |
|||
prop="backupPowerName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="电源功率" |
|||
align="center" |
|||
sortable |
|||
prop="powerSupplyPower" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="采购时间" |
|||
align="center" |
|||
sortable |
|||
prop="procurementTime" |
|||
min-width="120" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.procurementTime, "{y}-{m}-{d}") }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="负责人名称" |
|||
align="center" |
|||
prop="personName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人电话" |
|||
align="center" |
|||
prop="personPhone" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人职务" |
|||
align="center" |
|||
prop="personLevel" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
width="180" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['sz:bydy:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['sz:bydy: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="800px" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-row :gutter="15"> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="备用电源名称" prop="backupPowerName"> |
|||
<el-input |
|||
v-model="form.backupPowerName" |
|||
placeholder="请输入备用电源名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="电源功率" prop="powerSupplyPower"> |
|||
<el-input |
|||
v-model="form.powerSupplyPower" |
|||
placeholder="请输入电源功率" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="采购时间" prop="procurementTime"> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
v-model="form.procurementTime" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择采购时间" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人名称" prop="personName"> |
|||
<el-input |
|||
v-model="form.personName" |
|||
placeholder="请输入负责人名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人电话" prop="personPhone"> |
|||
<el-input |
|||
v-model="form.personPhone" |
|||
placeholder="请输入负责人电话" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人职务" prop="personLevel"> |
|||
<el-input |
|||
v-model="form.personLevel" |
|||
placeholder="请输入负责人职务" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</el-row> |
|||
<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 { |
|||
listBydy, |
|||
getBydy, |
|||
delBydy, |
|||
addBydy, |
|||
updateBydy, |
|||
exportBydy, |
|||
} from "@/api/yg/bydy"; |
|||
|
|||
export default { |
|||
name: "Bydy", |
|||
props: ["prowerTypeId"], |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 堤防备用电源信息表格数据 |
|||
bydyList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
bydyzbId: null, |
|||
dikeId: null, |
|||
backupPowerName: null, |
|||
dikeName: null, |
|||
powerSupplyPower: null, |
|||
procurementTime: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
backupPowerName: [ |
|||
{ required: true, message: "请输入备用电源名称", trigger: "blur" }, |
|||
], |
|||
powerSupplyPower: [ |
|||
{ required: true, message: "请输入电源功率", trigger: "blur" }, |
|||
{ |
|||
pattern: |
|||
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, |
|||
message: "请输入数字,可保留两位小数", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
procurementTime: [ |
|||
{ required: true, message: "选择采购时间", trigger: "blur" }, |
|||
], |
|||
personName: [ |
|||
{ required: true, message: "请输入负责人名称", trigger: "blur" }, |
|||
], |
|||
personPhone: [ |
|||
{ required: true, message: "请输入负责人电话", trigger: "blur" }, |
|||
{ |
|||
pattern: |
|||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, |
|||
message: "手机号格式不正确", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
personLevel: [ |
|||
{ required: true, message: "请输入负责人职务", trigger: "blur" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
/** 查询堤防备用电源信息列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
this.queryParams.data.bydyzbId = this.prowerTypeId; |
|||
listBydy(this.queryParams).then((response) => { |
|||
this.bydyList = response.records; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
id: null, |
|||
dikeId: null, |
|||
backupPowerName: null, |
|||
dikeName: null, |
|||
powerSupplyPower: null, |
|||
procurementTime: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: 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, |
|||
dikeId: null, |
|||
backupPowerName: null, |
|||
dikeName: null, |
|||
powerSupplyPower: null, |
|||
procurementTime: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: 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(); |
|||
const id = row.id || this.ids; |
|||
getBydy(id).then((response) => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改堤防备用电源信息"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm() { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
if (this.form.id != null) { |
|||
updateBydy(this.form).then((response) => { |
|||
if (response.code === 200) { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
} |
|||
}); |
|||
} else { |
|||
this.form.bydyzbId = this.prowerTypeId; |
|||
addBydy(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 delBydy(ids); |
|||
}) |
|||
.then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}) |
|||
.catch(function () {}); |
|||
} else { |
|||
this.$message.warning("请选择要删除的数据！！"); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/css/dialog.scss"; |
|||
::v-deep .el-dialog { |
|||
margin-top: 25vh !important; |
|||
} |
|||
.listTitle { |
|||
font-size: 14px; |
|||
padding-left: 10px; |
|||
padding-right: 30px; |
|||
margin: 20px 0; |
|||
border-left: 2px solid #36b29e; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
span:nth-child(1) { |
|||
font-weight: bold; |
|||
} |
|||
.addBtn { |
|||
color: #36b29e; |
|||
cursor: pointer; |
|||
} |
|||
.addBtn:hover { |
|||
color: #31a08e; |
|||
} |
|||
} |
|||
.listTitle:nth-child(1) { |
|||
margin-top: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<div style="padding: 10px"> |
|||
<div class="listTitle"> |
|||
<span>试运行记录</span> |
|||
<!-- <span class="addBtn" @click="viewRun"> |
|||
<i class="el-icon-plus"></i> |
|||
添加 |
|||
</span> --> |
|||
</div> |
|||
|
|||
<el-table v-loading="listLoading" :data="bydyList"> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="50" |
|||
align="center" |
|||
fixed |
|||
/> |
|||
|
|||
<el-table-column |
|||
label="备用电源名称" |
|||
align="center" |
|||
prop="backupPowerName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="电源功率" |
|||
align="center" |
|||
sortable |
|||
prop="powerSupplyPower" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="采购时间" |
|||
align="center" |
|||
sortable |
|||
prop="procurementTime" |
|||
min-width="120" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.procurementTime, "{y}-{m}-{d}") }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="负责人名称" |
|||
align="center" |
|||
prop="personName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人电话" |
|||
align="center" |
|||
prop="personPhone" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人职务" |
|||
align="center" |
|||
prop="personLevel" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
width="180" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-plus" |
|||
@click="viewRun(scope.row)" |
|||
v-hasPermi="['sz:bydy:viewRun']" |
|||
>新增试运行记录</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<pagination |
|||
v-show="listTotal > 0" |
|||
:total="listTotal" |
|||
:page.sync="listQueryParams.pageNum" |
|||
:limit.sync="listQueryParams.pageSize" |
|||
@pagination="getParentList" |
|||
/> |
|||
|
|||
<!-- 管理试运行 --> |
|||
<el-dialog |
|||
:title="title" |
|||
:visible.sync="open" |
|||
width="1000px" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-tabs v-model="activeName" style="margin-bottom: 20px" v-if="open"> |
|||
<el-tab-pane label="日常" name="daily" :lazy="true"> |
|||
<pRTable :activeName="activeName" :powerId="powerId" /> |
|||
</el-tab-pane> |
|||
|
|||
<el-tab-pane label="汛前" name="beforeFlood" :lazy="true"> |
|||
<pRTable :activeName="activeName" :powerId="powerId" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="汛后" name="afterFlood" :lazy="true"> |
|||
<pRTable :activeName="activeName" :powerId="powerId" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
<!-- <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 { |
|||
listBydy, |
|||
getBydy, |
|||
delBydy, |
|||
addBydy, |
|||
updateBydy, |
|||
exportBydy, |
|||
} from "@/api/yg/bydy"; |
|||
import pRTable from "./pRTable.vue"; |
|||
|
|||
export default { |
|||
name: "Bydy_show", |
|||
props: ["prowerTypeId"], |
|||
components: { |
|||
pRTable, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
listLoading: true, |
|||
// 总条数 |
|||
listTotal: 0, |
|||
// 堤防备用电源信息表格数据 |
|||
bydyList: [], |
|||
// 查询参数 |
|||
listQueryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
bydyzbId: null, |
|||
dikeId: null, |
|||
backupPowerName: null, |
|||
dikeName: null, |
|||
powerSupplyPower: null, |
|||
procurementTime: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
|
|||
// 试运行参数 |
|||
title: "", |
|||
detailTitle: "", |
|||
open: false, |
|||
detailOpen: false, |
|||
activeName: "daily", |
|||
powerId: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getParentList(); |
|||
}, |
|||
methods: { |
|||
viewRun(row) { |
|||
this.title = "试运行记录管理"; |
|||
this.open = true; |
|||
this.powerId = row.id; |
|||
}, |
|||
/** 查询堤防备用电源种类列表 */ |
|||
getParentList() { |
|||
this.listLoading = true; |
|||
this.listQueryParams.data.bydyzbId = this.prowerTypeId; |
|||
listBydy(this.listQueryParams).then((response) => { |
|||
this.bydyList = response.records; |
|||
this.listTotal = response.total; |
|||
this.listLoading = false; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/css/dialog.scss"; |
|||
::v-deep .el-dialog { |
|||
margin-top: 25vh !important; |
|||
height: 500px; |
|||
} |
|||
.listTitle { |
|||
font-size: 14px; |
|||
padding-left: 10px; |
|||
padding-right: 30px; |
|||
margin: 20px 0; |
|||
border-left: 2px solid #36b29e; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
span:nth-child(1) { |
|||
font-weight: bold; |
|||
} |
|||
.addBtn { |
|||
color: #36b29e; |
|||
cursor: pointer; |
|||
} |
|||
.addBtn:hover { |
|||
color: #31a08e; |
|||
} |
|||
} |
|||
.listTitle:nth-child(1) { |
|||
margin-top: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<router-view /> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,549 @@ |
|||
<template> |
|||
<div class=""> |
|||
<el-breadcrumb separator="/" style="margin-bottom: 20px"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in routeList" |
|||
:key="item + index" |
|||
:to="{ path: item.path }" |
|||
> |
|||
{{ item.routeName }} |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<el-form |
|||
:model="queryParams" |
|||
ref="queryForm" |
|||
:inline="true" |
|||
v-show="showSearch" |
|||
label-width="68px" |
|||
> |
|||
<el-form-item label="关联堤防" prop="dikeName"> |
|||
<el-input |
|||
v-model="queryParams.cv.value" |
|||
placeholder="请输入堤防名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
size="small" |
|||
@click="handleQuery" |
|||
></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="关联堤防" prop="dikeCode"> |
|||
<el-select |
|||
v-model="queryParams.data.dikeCode" |
|||
placeholder="请选择关联堤防" |
|||
style="width: 100%" |
|||
@change="handleQuery" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="备用电源种类" prop="powerType" label-width="96px"> |
|||
<el-select |
|||
v-model="queryParams.data.powerType" |
|||
placeholder="请选择备用电源种类" |
|||
clearable |
|||
size="small" |
|||
@change="handleQuery" |
|||
> |
|||
<el-option |
|||
v-for="dict in powerTypeOptions" |
|||
: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="['df:bydyzb: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="['df:bydyzb: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="['df:bydyzb:remove']" |
|||
>删除</el-button |
|||
> |
|||
</el-col> |
|||
<right-toolbar |
|||
:showSearch.sync="showSearch" |
|||
@queryTable="getList" |
|||
></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="bydyzbList" |
|||
@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="dikeName" |
|||
min-width="120" |
|||
/> |
|||
<!-- <el-table-column |
|||
label="关联堤防" |
|||
align="center" |
|||
prop="dikeCode" |
|||
:formatter="dikeCodeFormat" |
|||
min-width="120" |
|||
/> --> |
|||
<el-table-column |
|||
label="备用电源数量（字段未有）" |
|||
align="center" |
|||
prop="powerNumber" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="备用电源种类" |
|||
align="center" |
|||
prop="powerType" |
|||
:formatter="powerTypeFormat" |
|||
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="['df:bydyzb:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-plus" |
|||
@click="addPowerList(scope.row)" |
|||
v-hasPermi="['df:bydyzb:addPowerList']" |
|||
>新增电源</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['df:bydyzb: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="800px" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
|||
<el-form-item label="关联堤防" prop="dikeCode"> |
|||
<linkDike :form="form" v-if="open" /> |
|||
<!-- <el-select |
|||
v-model="form.dikeCode" |
|||
placeholder="请选择关联堤防" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
></el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
<el-form-item label="备用电源种类" prop="powerType"> |
|||
<el-select |
|||
v-model="form.powerType" |
|||
placeholder="请选择备用电源种类" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in powerTypeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</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> |
|||
|
|||
<!-- 备用电源 --> |
|||
<el-dialog |
|||
:title="addTitle" |
|||
:visible.sync="addOpen" |
|||
width="1200px" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
@close="close" |
|||
> |
|||
<el-tabs v-model="activeName" style="margin-bottom: 20px" v-if="addOpen"> |
|||
<el-tab-pane label="备用电源信息" name="powerList" :lazy="true"> |
|||
<powerList ref="powerList" :prowerTypeId="prowerTypeId" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="试运行记录" name="powerRecords" :lazy="true"> |
|||
<powerRecords |
|||
:prowerTypeId="prowerTypeId" |
|||
v-if="activeName === 'powerRecords'" |
|||
/> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
listBydyzb, |
|||
getBydyzb, |
|||
delBydyzb, |
|||
addBydyzb, |
|||
updateBydyzb, |
|||
exportBydyzb, |
|||
} from "@/api/yg/dike/bydyzb"; |
|||
import { listJbxx, getJbxx } from "@/api/yg/dike/jbxx"; |
|||
import powerList from "./components/powerList.vue"; |
|||
import powerRecords from "./components/powerRecords.vue"; |
|||
import linkDike from "@/components/linkNameSelect/linkDike.vue"; |
|||
|
|||
export default { |
|||
name: "Bydyzb", |
|||
components: { |
|||
powerList, |
|||
powerRecords, |
|||
linkDike, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 面包屑，路由信息 |
|||
routeList: [ |
|||
{ |
|||
path: "/dike/safetyManage/floodControlManagement/power", |
|||
routeName: "防汛电源管理", |
|||
}, |
|||
], |
|||
activeName: "powerList", |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 堤防备用电源主表格数据 |
|||
bydyzbList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
addTitle: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
addOpen: false, |
|||
// 电源种类字典 |
|||
powerTypeOptions: [], |
|||
// 堤防项目 |
|||
dikeNameOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
dikeCode: null, |
|||
powerType: null, |
|||
powerModel: null, |
|||
dikeName: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
cv: { |
|||
type: "like", |
|||
name: "dikeName", |
|||
value: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择关联堤防", trigger: "change" }, |
|||
], |
|||
powerType: [ |
|||
{ required: true, message: "请选择备用电源种类", trigger: "change" }, |
|||
], |
|||
}, |
|||
prowerTypeId: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
listJbxx({ data: {} }).then((res) => { |
|||
this.dikeNameOptions = res.records; |
|||
}); |
|||
this.getDicts("type_of_power").then((response) => { |
|||
this.powerTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
close() { |
|||
this.activeName = "powerList"; |
|||
}, |
|||
addPowerList(row) { |
|||
this.prowerTypeId = row.id; |
|||
this.addTitle = "管理备用电源信息"; |
|||
this.addOpen = true; |
|||
}, |
|||
/** 查询堤防备用电源主列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listBydyzb(this.queryParams).then((response) => { |
|||
this.bydyzbList = response.records; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
dikeCodeFormat(row) { |
|||
const dikeCode = row.dikeCode; |
|||
let data = this.dikeNameOptions.find((res) => res.dikeCode == dikeCode); |
|||
if (data) return data.dikeName; |
|||
}, |
|||
// 电源种类字典翻译 |
|||
powerTypeFormat(row, column) { |
|||
return this.selectDictLabel(this.powerTypeOptions, row.powerType); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
id: null, |
|||
dikeCode: null, |
|||
powerType: null, |
|||
powerModel: null, |
|||
dikeName: 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, |
|||
dikeCode: null, |
|||
powerType: null, |
|||
powerModel: null, |
|||
dikeName: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
createTime: null, |
|||
updateTime: null, |
|||
owerDept: null, |
|||
remark: null, |
|||
relation: null, |
|||
}, |
|||
cv: { |
|||
type: "like", |
|||
name: "dikeName", |
|||
value: 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(); |
|||
const id = row.id || this.ids; |
|||
getBydyzb(id).then((response) => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改堤防备用电源主"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm() { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
if (this.form.id != null) { |
|||
updateBydyzb(this.form).then((response) => { |
|||
if (response.code === 200) { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
} |
|||
}); |
|||
} else { |
|||
addBydyzb(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 delBydyzb(ids); |
|||
}) |
|||
.then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}) |
|||
.catch(function () {}); |
|||
} else { |
|||
this.$message.warning("请选择要删除的数据！！"); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/css/dialog.scss"; |
|||
::v-deep .el-tabs__content { |
|||
height: 500px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,645 @@ |
|||
<template> |
|||
<div> |
|||
<el-breadcrumb separator="/" style="margin-bottom: 20px"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in routeList" |
|||
:key="item + index" |
|||
:to="{ path: item.path }" |
|||
> |
|||
{{ item.routeName }} |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<el-form |
|||
:model="queryParams" |
|||
ref="queryForm" |
|||
:inline="true" |
|||
v-show="showSearch" |
|||
label-width="68px" |
|||
> |
|||
<el-form-item label="关联堤防" prop="dikeName"> |
|||
<el-input |
|||
v-model="queryParams.cv.value" |
|||
placeholder="请输入堤防名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
size="small" |
|||
@click="handleQuery" |
|||
></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="预案类型" prop="type"> |
|||
<el-select |
|||
v-model="queryParams.data.type" |
|||
placeholder="请选择预案类型" |
|||
clearable |
|||
size="small" |
|||
@change="handleQuery" |
|||
> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<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="['df:yaxx: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="['df:yaxx: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="['df:yaxx:remove']" |
|||
>删除</el-button |
|||
> |
|||
</el-col> |
|||
<right-toolbar |
|||
:showSearch.sync="showSearch" |
|||
@queryTable="getList" |
|||
></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="yaxxList" |
|||
@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="dikeName" |
|||
min-width="120" |
|||
/> |
|||
<!-- <el-table-column |
|||
label="关联堤防" |
|||
align="center" |
|||
prop="dikeCode" |
|||
:formatter="dikeCodeFormat" |
|||
min-width="120" |
|||
/> --> |
|||
<!-- <el-table-column |
|||
label="堤防代码" |
|||
align="center" |
|||
prop="dikeCode" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="堤防名称" |
|||
align="center" |
|||
prop="dikeName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="堤防类型" |
|||
align="center" |
|||
prop="dikeType" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="工程规模" |
|||
align="center" |
|||
prop="engineerScale" |
|||
min-width="120" |
|||
/> --> |
|||
|
|||
<el-table-column |
|||
label="负责人" |
|||
align="center" |
|||
prop="personName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="类型" |
|||
align="center" |
|||
prop="type" |
|||
:formatter="typeFormat" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="开展时间" |
|||
align="center" |
|||
prop="implementationTime" |
|||
min-width="120" |
|||
sortable |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
parseTime(scope.row.implementationTime, "{y}-{m}-{d}") |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column label="预案内容" align="center" prop="planContent" min-width="120"/> --> |
|||
<!-- <el-table-column label="图片" align="center" prop="photo" min-width="120"/> --> |
|||
|
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
width="180" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['df:yaxx:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['df:yaxx: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="dikeCode"> |
|||
<linkDike :form="form" v-if="open" /> |
|||
<!-- <el-select |
|||
v-model="form.dikeCode" |
|||
placeholder="请选择关联堤防" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.id" |
|||
></el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="负责人" prop="personName"> |
|||
<el-input v-model="form.personName" placeholder="请输入负责人" /> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="type"> |
|||
<el-select |
|||
v-model="form.type" |
|||
placeholder="请选择类型" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="开展时间" prop="implementationTime"> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
v-model="form.implementationTime" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择开展时间" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="预案内容" prop="planContent"> |
|||
<el-input v-model="form.planContent" placeholder="请输入预案内容" /> |
|||
</el-form-item> |
|||
<el-form-item label="培训内容" prop="remark"> |
|||
<el-input v-model="form.remark" |
|||
type="textarea" |
|||
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="uploadUrl" |
|||
: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 { |
|||
listYaxx, |
|||
getYaxx, |
|||
delYaxx, |
|||
addYaxx, |
|||
updateYaxx, |
|||
exportYaxx, |
|||
} from "@/api/yg/dike/yaxx"; |
|||
import { listJbxx, getJbxx } from "@/api/yg/dike/jbxx"; |
|||
import { getToken } from "@/utils/auth"; |
|||
import { getFileStream } from "@/api/system/upload"; |
|||
import linkDike from "@/components/linkNameSelect/linkDike.vue"; |
|||
|
|||
export default { |
|||
name: "Yaxx", |
|||
components: { |
|||
linkDike, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 面包屑，路由信息 |
|||
routeList: [ |
|||
{ |
|||
path: "/dike/safetyManage/floodControlManagement/preplan", |
|||
routeName: "防汛预案管理", |
|||
}, |
|||
], |
|||
|
|||
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 堤防预案表格数据 |
|||
yaxxList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型字典 |
|||
typeOptions: [], |
|||
// 堤防项目 |
|||
dikeNameOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
dikeCode: null, |
|||
dikeCode: null, |
|||
dikeName: null, |
|||
dikeType: null, |
|||
engineerScale: null, |
|||
personName: null, |
|||
type: null, |
|||
implementationTime: null, |
|||
planContent: null, |
|||
photo: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
cv: { |
|||
type: "like", |
|||
name: "dikeName", |
|||
value: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: {}, |
|||
// 请求头 |
|||
headers: { |
|||
shuili: "water " + getToken(), |
|||
}, |
|||
fileList: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
listJbxx({ data: {} }).then((res) => { |
|||
// console.log(111, res); |
|||
this.dikeNameOptions = res.records; |
|||
}); |
|||
this.getDicts("prePlan_type").then((response) => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
dikeCodeFormat(row) { |
|||
const id = row.dikeCode; |
|||
let data = this.dikeNameOptions.find((res) => res.id == id); |
|||
if (data) return data.dikeName; |
|||
}, |
|||
// 类型字典翻译 |
|||
typeFormat(row, column) { |
|||
return this.selectDictLabel(this.typeOptions, row.type); |
|||
}, |
|||
/** 查询堤防预案列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listYaxx(this.queryParams).then((response) => { |
|||
this.yaxxList = response.records; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.fileList = []; |
|||
this.form = { |
|||
id: null, |
|||
dikeCode: null, |
|||
dikeCode: null, |
|||
dikeName: null, |
|||
dikeType: null, |
|||
engineerScale: null, |
|||
personName: null, |
|||
type: null, |
|||
implementationTime: null, |
|||
planContent: null, |
|||
photo: 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, |
|||
dikeCode: null, |
|||
dikeCode: null, |
|||
dikeName: null, |
|||
dikeType: null, |
|||
engineerScale: null, |
|||
personName: null, |
|||
type: null, |
|||
implementationTime: null, |
|||
planContent: null, |
|||
photo: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
createTime: null, |
|||
updateTime: null, |
|||
owerDept: null, |
|||
remark: null, |
|||
relation: null, |
|||
}, |
|||
cv: { |
|||
type: "like", |
|||
name: "dikeName", |
|||
value: 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(); |
|||
const id = row.id || this.ids; |
|||
getYaxx(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) { |
|||
updateYaxx(this.form).then((response) => { |
|||
if (response.code === 200) { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
} |
|||
}); |
|||
} else { |
|||
addYaxx(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 delYaxx(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"; |
|||
</style> |
|||
@ -0,0 +1,658 @@ |
|||
<template> |
|||
<div> |
|||
<el-breadcrumb separator="/" style="margin-bottom: 20px"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in routeList" |
|||
:key="item + index" |
|||
:to="{ path: item.path }" |
|||
> |
|||
{{ item.routeName }} |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<el-form |
|||
:model="queryParams" |
|||
ref="queryForm" |
|||
:inline="true" |
|||
v-show="showSearch" |
|||
label-width="68px" |
|||
> |
|||
<el-form-item label="关联堤防" prop="dikeName"> |
|||
<el-input |
|||
v-model="queryParams.cv.value" |
|||
placeholder="请输入堤防名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
size="small" |
|||
@click="handleQuery" |
|||
></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="关联堤防" prop="dikeCode"> |
|||
<el-select |
|||
v-model="queryParams.data.dikeCode" |
|||
placeholder="请选择关联堤防" |
|||
style="width: 100%" |
|||
@change="handleQuery" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="物资名称" prop="materialName"> |
|||
<el-input |
|||
v-model="queryParams.data.materialName" |
|||
placeholder="请输入物资名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
size="small" |
|||
@click="handleQuery" |
|||
></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="负责人名称" prop="personName" label-width="84px"> |
|||
<el-input |
|||
v-model="queryParams.data.personName" |
|||
placeholder="请输入负责人名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
size="small" |
|||
@click="handleQuery" |
|||
></el-button> |
|||
</el-input> |
|||
</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="['df:fxwz: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="['df:fxwz: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="['df:fxwz:remove']" |
|||
>删除</el-button |
|||
> |
|||
</el-col> |
|||
<right-toolbar |
|||
:showSearch.sync="showSearch" |
|||
@queryTable="getList" |
|||
></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="fxwzList" |
|||
@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="dikeName" |
|||
min-width="120" |
|||
/> |
|||
<!-- <el-table-column |
|||
label="关联堤防" |
|||
align="center" |
|||
prop="dikeCode" |
|||
:formatter="dikeCodeFormat" |
|||
min-width="120" |
|||
/> --> |
|||
<el-table-column |
|||
label="物资名称" |
|||
align="center" |
|||
prop="materialName" |
|||
min-width="120" |
|||
/> |
|||
<!-- <el-table-column |
|||
label="堤防名称" |
|||
align="center" |
|||
prop="dikeName" |
|||
min-width="120" |
|||
/> --> |
|||
<el-table-column |
|||
label="负责人名称" |
|||
align="center" |
|||
prop="personName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人电话" |
|||
align="center" |
|||
prop="personPhone" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人职务" |
|||
align="center" |
|||
prop="personLevel" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="物资数量" |
|||
align="center" |
|||
sortable |
|||
prop="materialNumber" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="采购时间" |
|||
align="center" |
|||
sortable |
|||
prop="procurementTime" |
|||
min-width="120" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.procurementTime, "{y}-{m}-{d}") }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
label="物资种类" |
|||
align="center" |
|||
prop="materialType" |
|||
:formatter="materialTypeFormat" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="保质期" |
|||
align="center" |
|||
sortable |
|||
prop="shelfLife" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
width="180" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['df:fxwz:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['df:fxwz: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="96px"> |
|||
<el-form-item label="关联堤防" prop="dikeCode"> |
|||
<linkDike :form="form" v-if="open" /> |
|||
<!-- <el-select |
|||
v-model="form.dikeCode" |
|||
placeholder="请选择关联堤防" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
></el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
<el-form-item label="物资名称" prop="materialName"> |
|||
<el-input v-model="form.materialName" placeholder="请输入物资名称" /> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="堤防名称" prop="dikeName"> |
|||
<el-input v-model="form.dikeName" placeholder="请输入堤防名称" /> |
|||
</el-form-item> --> |
|||
<el-form-item label="负责人名称" prop="personName"> |
|||
<el-input v-model="form.personName" placeholder="请输入负责人名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="负责人电话" prop="personPhone"> |
|||
<el-input v-model="form.personPhone" placeholder="请输入负责人电话" /> |
|||
</el-form-item> |
|||
<el-form-item label="负责人职务" prop="personLevel"> |
|||
<el-input v-model="form.personLevel" placeholder="请输入负责人职务" /> |
|||
</el-form-item> |
|||
<el-form-item label="物资数量" prop="materialNumber"> |
|||
<el-input |
|||
v-model="form.materialNumber" |
|||
placeholder="请输入物资数量" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="采购时间" prop="procurementTime"> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
v-model="form.procurementTime" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择采购时间" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="materialType"> |
|||
<el-select |
|||
v-model="form.materialType" |
|||
placeholder="请选择物资种类" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in materialTypeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="保质期" prop="shelfLife"> |
|||
<el-input v-model="form.shelfLife" placeholder="请输入保质期" /> |
|||
</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 { |
|||
listFxwz, |
|||
getFxwz, |
|||
delFxwz, |
|||
addFxwz, |
|||
updateFxwz, |
|||
exportFxwz, |
|||
} from "@/api/yg/dike/fxwz"; |
|||
import { listJbxx, getJbxx } from "@/api/yg/dike/jbxx"; |
|||
import linkDike from "@/components/linkNameSelect/linkDike.vue"; |
|||
|
|||
export default { |
|||
name: "Fxwz", |
|||
components: { |
|||
linkDike, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 面包屑，路由信息 |
|||
routeList: [ |
|||
{ |
|||
path: "/dike/safetyManage/floodControlManagement/supplies", |
|||
routeName: "防汛物资管理", |
|||
}, |
|||
], |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 堤防防汛物资表格数据 |
|||
fxwzList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 物资种类字典 |
|||
materialTypeOptions: [], |
|||
// 堤防项目 |
|||
dikeNameOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
dikeCode: null, |
|||
materialName: null, |
|||
dikeName: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: null, |
|||
materialNumber: null, |
|||
procurementTime: null, |
|||
materialType: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
cv: { |
|||
type: "like", |
|||
name: "dikeName", |
|||
value: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择关联堤防", trigger: "blur" }, |
|||
], |
|||
materialName: [ |
|||
{ required: true, message: "请输入物资名称", trigger: "blur" }, |
|||
], |
|||
personName: [ |
|||
{ required: true, message: "请输入负责人名称", trigger: "blur" }, |
|||
], |
|||
personPhone: [ |
|||
{ |
|||
pattern: |
|||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, |
|||
message: "手机号格式不正确", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
materialNumber: [ |
|||
{ |
|||
pattern: /^[1-9]\d*$/, |
|||
message: "请输入正整数,不包含0", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
listJbxx({ data: {} }).then((res) => { |
|||
// console.log(111, res); |
|||
this.dikeNameOptions = res.records; |
|||
}); |
|||
this.getDicts("types_materials").then((response) => { |
|||
this.materialTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询堤防防汛物资列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listFxwz(this.queryParams).then((response) => { |
|||
this.fxwzList = response.records; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
dikeCodeFormat(row) { |
|||
const dikeCode = row.dikeCode; |
|||
let data = this.dikeNameOptions.find((res) => res.dikeCode == dikeCode); |
|||
if (data) return data.dikeName; |
|||
}, |
|||
// 物资种类字典翻译 |
|||
materialTypeFormat(row, column) { |
|||
return this.selectDictLabel(this.materialTypeOptions, row.materialType); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
id: null, |
|||
dikeCode: null, |
|||
materialName: null, |
|||
dikeName: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: null, |
|||
materialNumber: null, |
|||
procurementTime: null, |
|||
materialType: 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, |
|||
dikeCode: null, |
|||
materialName: null, |
|||
dikeName: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: null, |
|||
materialNumber: null, |
|||
procurementTime: null, |
|||
materialType: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
createTime: null, |
|||
updateTime: null, |
|||
owerDept: null, |
|||
remark: null, |
|||
relation: null, |
|||
}, |
|||
cv: { |
|||
type: "like", |
|||
name: "dikeName", |
|||
value: 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(); |
|||
const id = row.id || this.ids; |
|||
getFxwz(id).then((response) => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改堤防防汛物资"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm() { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
if (this.form.id != null) { |
|||
updateFxwz(this.form).then((response) => { |
|||
if (response.code === 200) { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
} |
|||
}); |
|||
} else { |
|||
addFxwz(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 delFxwz(ids); |
|||
}) |
|||
.then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}) |
|||
.catch(function () {}); |
|||
} else { |
|||
this.$message.warning("请选择要删除的数据！！"); |
|||
} |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
let message = "是否确认导出所有的数据项?"; |
|||
if (this.ids) { |
|||
message = "是否确认导出选中的数据项?"; |
|||
queryParams.ids = this.ids; |
|||
} |
|||
this.$confirm(message, "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(function () { |
|||
return exportFxwz(queryParams); |
|||
}) |
|||
.then((response) => { |
|||
this.downloadFile(response, true, response.msg); |
|||
// this.download(response.msg); |
|||
}) |
|||
.catch(function () {}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/css/dialog.scss"; |
|||
</style> |
|||
@ -0,0 +1,818 @@ |
|||
<template> |
|||
<div> |
|||
<el-breadcrumb separator="/" style="margin-bottom: 20px"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in routeList" |
|||
:key="item + index" |
|||
:to="{ path: item.path }" |
|||
> |
|||
{{ item.routeName }} |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<el-form |
|||
:model="queryParams" |
|||
ref="queryForm" |
|||
:inline="true" |
|||
v-show="showSearch" |
|||
label-width="68px" |
|||
> |
|||
<el-form-item label="组织名称" prop="organizationName"> |
|||
<el-input |
|||
v-model="queryParams.data.organizationName" |
|||
placeholder="请输入组织名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
size="small" |
|||
@click="handleQuery" |
|||
></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="所属区划" prop="adcd"> |
|||
<!-- <el-input |
|||
v-model="queryParams.data.adcd" |
|||
placeholder="请输入所属区划" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> --> |
|||
<el-cascader |
|||
v-model="queryParams.data.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择所属区划" |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
@change="handleQuery" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<!-- <el-form-item |
|||
label="负责人职务" |
|||
prop="chargePersonDuites" |
|||
label-width="84px" |
|||
> |
|||
<el-input |
|||
v-model="queryParams.data.chargePersonDuites" |
|||
placeholder="请输入负责人职务" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</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="['df:fxzz: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="['df:fxzz: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="['df:fxzz:remove']" |
|||
>删除</el-button |
|||
> |
|||
</el-col> |
|||
<right-toolbar |
|||
:showSearch.sync="showSearch" |
|||
@queryTable="getList" |
|||
></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="fxzzList" |
|||
@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="dikeName" |
|||
min-width="120" |
|||
/> |
|||
<!-- <el-table-column |
|||
label="堤防名称" |
|||
align="center" |
|||
prop="dikeCode" |
|||
:formatter="dikeCodeFormat" |
|||
min-width="120" |
|||
/> --> |
|||
<el-table-column |
|||
label="组织名称" |
|||
align="center" |
|||
prop="organizationName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="所属区划" |
|||
align="center" |
|||
prop="adcd" |
|||
:formatter="$formatAdcd" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人名称" |
|||
align="center" |
|||
prop="chargePersonName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人电话" |
|||
align="center" |
|||
prop="chargePersonPhone" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人职务" |
|||
align="center" |
|||
prop="chargePersonDuites" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="负责人类型" |
|||
align="center" |
|||
prop="chargePersonType" |
|||
:formatter="typeFormat" |
|||
min-width="120" |
|||
/> |
|||
<!-- <el-table-column |
|||
label="成员" |
|||
align="center" |
|||
prop="member" |
|||
min-width="120" |
|||
/> --> |
|||
|
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
width="180" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['df:fxzz:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['df:fxzz: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" |
|||
@close="close" |
|||
> |
|||
<div class="listTitle"> |
|||
<span>防汛组织信息</span> |
|||
<!-- <span class="addBtn" @click="handleAdd('0')"> |
|||
<i class="el-icon-plus"></i> |
|||
添加 |
|||
</span> --> |
|||
</div> |
|||
<el-row :gutter="15"> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="96px"> |
|||
<el-form-item label="堤防名称" prop="dikeCode"> |
|||
<linkDike :form="form" v-if="open" /> |
|||
<!-- <el-select |
|||
v-model="form.dikeCode" |
|||
placeholder="请选择堤防名称" |
|||
style="width: 100%" |
|||
v-scroll="selectSearch" |
|||
filterable |
|||
clearable |
|||
remote |
|||
reserve-keyword |
|||
:remote-method="remoteMethod" |
|||
:loading="selectLoading" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
@click.native="chooseDike(dict)" |
|||
></el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
<el-col :span="12"> |
|||
<el-form-item label="组织名称" prop="organizationName"> |
|||
<el-input |
|||
v-model="form.organizationName" |
|||
placeholder="请输入组织名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所属区划" prop="adcd"> |
|||
<!-- <el-input v-model="form.adcd" placeholder="请输入所属区划" /> --> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="form.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择所属区划" |
|||
clearable |
|||
size="small" |
|||
style="width: 100%" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人名称" prop="chargePersonName"> |
|||
<el-input |
|||
v-model="form.chargePersonName" |
|||
placeholder="请输入负责人名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人电话" prop="chargePersonPhone"> |
|||
<el-input |
|||
v-model="form.chargePersonPhone" |
|||
placeholder="请输入负责人电话" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人职务" prop="chargePersonDuites"> |
|||
<el-input |
|||
v-model="form.chargePersonDuites" |
|||
placeholder="请输入负责人职务" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人类型" prop="chargePersonType"> |
|||
<el-select |
|||
v-model="form.chargePersonType" |
|||
placeholder="请选择负责人类型" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</el-row> |
|||
|
|||
<div class="listTitle"> |
|||
<span>防汛组织成员</span> |
|||
<!-- <span class="addBtn" @click="handleAdd('0')"> |
|||
<i class="el-icon-plus"></i> |
|||
添加 |
|||
</span> --> |
|||
</div> |
|||
<div class="member" ref="member"> |
|||
<template v-for="(item, index) in counter"> |
|||
<msFxzzMember |
|||
:ref="'msFxzzMember' + index" |
|||
:key="item + index" |
|||
:index="index" |
|||
:isFirst="index == 0 ? isFirst : false" |
|||
:status="isEdit" |
|||
:editItem="item" |
|||
:addForm="addForm" |
|||
@delForm="delForm" |
|||
/> |
|||
</template> |
|||
</div> |
|||
|
|||
<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 { |
|||
listFxzz, |
|||
getFxzz, |
|||
delFxzz, |
|||
addFxzz, |
|||
updateFxzz, |
|||
exportFxzz, |
|||
} from "@/api/yg/dike/fxzz"; |
|||
import { |
|||
listFxzzcy, |
|||
getFxzzcy, |
|||
delFxzzcy, |
|||
addFxzzcy, |
|||
updateFxzzcy, |
|||
updataAllFxzzcy, |
|||
exportFxzzcy, |
|||
} from "@/api/yg/dike/fxzzcy"; |
|||
import { listJbxx, getJbxx } from "@/api/yg/dike/jbxx"; |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import msFxzzMember from "./components/msFxzzMember.vue"; |
|||
import linkDike from "@/components/linkNameSelect/linkDike.vue"; |
|||
import { cascaderLazyLoad } from "@/utils/elUtils"; |
|||
|
|||
export default { |
|||
name: "Fxzz", |
|||
components: { |
|||
msFxzzMember, |
|||
linkDike, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 面包屑，路由信息 |
|||
routeList: [ |
|||
{ |
|||
path: "/dike/safetyManage/floodControlManagement/tissue", |
|||
routeName: "防汛组织管理", |
|||
}, |
|||
], |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
expandTrigger: "hover", |
|||
lazy: true, |
|||
lazyLoad: cascaderLazyLoad, |
|||
}, |
|||
areasOptions: [], |
|||
// 遮罩层 |
|||
loading: true, |
|||
selectLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 防汛组织表格数据 |
|||
fxzzList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型字典 |
|||
typeOptions: [], |
|||
// 堤防项目 |
|||
dikeNameOptions: [], |
|||
// 堤防查询参数 |
|||
dikeNameQueryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
dikeName: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
organizationName: null, |
|||
adcd: null, |
|||
chargePersonName: null, |
|||
chargePersonPhone: null, |
|||
chargePersonDuites: null, |
|||
chargePersonType: null, |
|||
member: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
proCode: null, |
|||
proNo: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
|||
], |
|||
organizationName: [ |
|||
{ required: true, message: "请输入组织名称", trigger: "blur" }, |
|||
], |
|||
chargePersonPhone: [ |
|||
{ |
|||
pattern: |
|||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, |
|||
message: "手机号格式不正确", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
counter: [{}], |
|||
delIdList: [], |
|||
isFirst: true, |
|||
isEdit: false, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
// console.log(111, res); |
|||
this.dikeNameOptions = res.records; |
|||
}); |
|||
this.getTreeData(); |
|||
this.getDicts("person_dept").then((response) => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
remoteMethod(query) { |
|||
if (query !== "") { |
|||
this.selectLoading = true; |
|||
// console.log(444, query); |
|||
this.dikeNameQueryParams.data.dikeName = query; |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
this.dikeNameOptions = res.records; |
|||
this.selectLoading = false; |
|||
}); |
|||
} |
|||
}, |
|||
selectSearch() { |
|||
this.dikeNameQueryParams.pageNum += 1; |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
// console.log(111, res); |
|||
this.dikeNameOptions = [...this.dikeNameOptions, ...res.records]; |
|||
// console.log(111, this.dikeNameOptions); |
|||
}); |
|||
}, |
|||
chooseDike(item) { |
|||
this.form.dikeName = item.dikeName; |
|||
}, |
|||
addForm(index) { |
|||
// console.log(44444, this.$refs.noticePart.$refs["noticeForm0"]); |
|||
// 重新赋值每种标牌首项 |
|||
if (this.counter.length == 1) { |
|||
console.log(this.$refs, this.$refs.msFxzzMember0[0]); |
|||
this.counter[0] = this.$refs.msFxzzMember0[0].form; |
|||
} |
|||
|
|||
// 先增加节点 |
|||
this.counter.push({}); |
|||
// 再改变其存储的值 |
|||
this.$nextTick(() => { |
|||
this.counter[this.counter.length - 1] = |
|||
this.$refs["msFxzzMember" + (index + 1)][0].form; |
|||
console.log( |
|||
66666, |
|||
this.counter, |
|||
this.$refs["msFxzzMember" + (index + 1)][0].form |
|||
); |
|||
}); |
|||
}, |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
// console.log("getAreasData", items.data); |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
console.log(66666666666, res); |
|||
this.areasOptions = res; |
|||
// return res; |
|||
}); |
|||
}, |
|||
// 类型字典翻译 |
|||
typeFormat(row, column) { |
|||
return this.selectDictLabel(this.typeOptions, row.chargePersonType); |
|||
}, |
|||
dikeCodeFormat(row) { |
|||
const dikeCode = row.dikeCode; |
|||
// const name = await new Promise(function (resolve, reject) { |
|||
// getJbxx(id).then((res) => { |
|||
// // console.log(111, res); |
|||
// resolve(res.data.dikeName); |
|||
// }); |
|||
// }); |
|||
let data = this.dikeNameOptions.find((res) => res.dikeCode == dikeCode); |
|||
if (data) return data.dikeName; |
|||
}, |
|||
/** 查询防汛组织列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
// this.queryParams.data.dikeCode = this.$route.query.baseDataId; |
|||
listFxzz(this.queryParams).then((response) => { |
|||
this.fxzzList = response.records; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.delIdList = []; |
|||
this.counter = [{}]; |
|||
this.form = { |
|||
id: null, |
|||
organizationName: null, |
|||
adcd: null, |
|||
chargePersonName: null, |
|||
chargePersonPhone: null, |
|||
chargePersonDuites: null, |
|||
chargePersonType: null, |
|||
member: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
createTime: null, |
|||
updateTime: null, |
|||
proCode: null, |
|||
proNo: null, |
|||
owerDept: null, |
|||
remark: null, |
|||
relation: null, |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
// 查询表单重置 |
|||
resetQueryForm() { |
|||
this.queryParams = { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
data: { |
|||
id: null, |
|||
organizationName: null, |
|||
adcd: null, |
|||
chargePersonName: null, |
|||
chargePersonPhone: null, |
|||
chargePersonDuites: null, |
|||
chargePersonType: null, |
|||
member: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
createTime: null, |
|||
updateTime: null, |
|||
proCode: null, |
|||
proNo: 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.isEdit = false; |
|||
this.open = true; |
|||
this.title = "添加防汛组织"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
this.isEdit = true; |
|||
const id = row.id || this.ids; |
|||
const organizationId = row.id || this.ids[0]; |
|||
console.log(444, id); |
|||
getFxzz(id).then((response) => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改防汛组织"; |
|||
}); |
|||
listFxzzcy({ data: { organizationId: organizationId } }).then((res) => { |
|||
console.log(6666, res); |
|||
this.counter = res.records; |
|||
}); |
|||
}, |
|||
close() { |
|||
this.$refs.msFxzzMember0[0].validClear(); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm() { |
|||
// 且运算 |
|||
let isAllTrue = true; |
|||
this.counter.forEach((item, index) => { |
|||
this.$refs["msFxzzMember" + index][0].validateForm(); |
|||
isAllTrue = isAllTrue && this.$refs["msFxzzMember" + index][0].valid; |
|||
}); |
|||
console.log("全部表单是否通过校验", isAllTrue); |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid && isAllTrue) { |
|||
const C0 = |
|||
this.counter.length > 1 |
|||
? this.counter |
|||
: this.$refs["msFxzzMember0"][0].form.name |
|||
? [this.$refs["msFxzzMember0"][0].form] |
|||
: []; |
|||
if (this.isEdit) { |
|||
updateFxzz(this.form).then((response) => { |
|||
if (response.code === 200) { |
|||
C0.forEach((item, index) => { |
|||
if (!item.organizationId) { |
|||
C0[index].organizationId = this.form.id; |
|||
} |
|||
}); |
|||
updataAllFxzzcy(C0).then((res) => { |
|||
if (res.code === 200) { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
if (this.delIdList.length > 0) delFxzzcy(this.delIdList); |
|||
} else { |
|||
this.form.cy = C0; |
|||
// this.form.dikeCode = this.$route.query.baseDataId; |
|||
addFxzz(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 delFxzz(ids); |
|||
}) |
|||
.then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}) |
|||
.catch(function () {}); |
|||
} else { |
|||
this.$message.warning("请选择要删除的数据！！"); |
|||
} |
|||
}, |
|||
// 弹出框每一个小表单的减号 删除 |
|||
delForm(itemId, index) { |
|||
console.log(111, itemId, index); |
|||
this.counter.splice(index, 1); |
|||
if (itemId) this.delIdList.push(itemId); |
|||
console.log(222, this.delIdList); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/css/dialog.scss"; |
|||
|
|||
.listTitle { |
|||
font-size: 14px; |
|||
padding-left: 10px; |
|||
padding-right: 30px; |
|||
margin: 20px 0; |
|||
border-left: 2px solid #36b29e; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
span:nth-child(1) { |
|||
font-weight: bold; |
|||
} |
|||
.addBtn { |
|||
color: #36b29e; |
|||
cursor: pointer; |
|||
} |
|||
.addBtn:hover { |
|||
color: #31a08e; |
|||
} |
|||
} |
|||
.listTitle:nth-child(1) { |
|||
margin-top: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<Layout> |
|||
<router-view /> |
|||
</Layout> |
|||
</template> |
|||
|
|||
<script> |
|||
import Layout from "@/layout"; |
|||
|
|||
export default { |
|||
components: { Layout }, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue