xzt
1 year ago
6 changed files with 1542 additions and 13 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> |
|||
@ -1,3 +1,673 @@ |
|||
<template> |
|||
<div>物资</div> |
|||
<div class="app-container"> |
|||
<el-form |
|||
:model="queryParams" |
|||
ref="queryForm" |
|||
:inline="true" |
|||
v-show="showSearch" |
|||
label-width="68px" |
|||
> |
|||
<el-form-item label="水闸id" prop="wagaId"> |
|||
<el-input |
|||
v-model="queryParams.data.wagaId" |
|||
placeholder="请输入水闸id" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</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-form-item> |
|||
<el-form-item label="水闸名称" prop="wagaName"> |
|||
<el-input |
|||
v-model="queryParams.data.wagaName" |
|||
placeholder="请输入水闸名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="负责人名称" prop="personName"> |
|||
<el-input |
|||
v-model="queryParams.data.personName" |
|||
placeholder="请输入负责人名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="负责人电话" prop="personPhone"> |
|||
<el-input |
|||
v-model="queryParams.data.personPhone" |
|||
placeholder="请输入负责人电话" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="负责人职务" prop="personLevel"> |
|||
<el-input |
|||
v-model="queryParams.data.personLevel" |
|||
placeholder="请输入负责人职务" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物资数量" prop="materialNumber"> |
|||
<el-input |
|||
v-model="queryParams.data.materialNumber" |
|||
placeholder="请输入物资数量" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="采购时间" prop="procurementTime"> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
style="width: 200px" |
|||
v-model="queryParams.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="queryParams.data.materialType" |
|||
placeholder="请选择物资种类" |
|||
clearable |
|||
size="small" |
|||
> |
|||
<el-option |
|||
v-for="dict in materialTypeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="createUid"> |
|||
<el-input |
|||
v-model="queryParams.data.createUid" |
|||
placeholder="请输入物资种类" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="updateUid"> |
|||
<el-input |
|||
v-model="queryParams.data.updateUid" |
|||
placeholder="请输入物资种类" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="owerDept"> |
|||
<el-input |
|||
v-model="queryParams.data.owerDept" |
|||
placeholder="请输入物资种类" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="relation"> |
|||
<el-input |
|||
v-model="queryParams.data.relation" |
|||
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="['fxwz: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="['fxwz: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="['fxwz:fxwz:remove']" |
|||
>删除</el-button |
|||
> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
@click="handleExport" |
|||
v-hasPermi="['fxwz:fxwz:export']" |
|||
>导出</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="水闸id" |
|||
align="center" |
|||
prop="wagaId" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="物资名称" |
|||
align="center" |
|||
prop="materialName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="水闸名称" |
|||
align="center" |
|||
prop="wagaName" |
|||
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" |
|||
prop="materialNumber" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="采购时间" |
|||
align="center" |
|||
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" |
|||
prop="createUid" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="物资种类" |
|||
align="center" |
|||
prop="updateUid" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="物资种类" |
|||
align="center" |
|||
prop="owerDept" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="物资种类" |
|||
align="center" |
|||
prop="remark" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="物资种类" |
|||
align="center" |
|||
prop="relation" |
|||
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="['fxwz:fxwz:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['fxwz: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="80px"> |
|||
<el-form-item label="水闸id" prop="wagaId"> |
|||
<el-input v-model="form.wagaId" placeholder="请输入水闸id" /> |
|||
</el-form-item> |
|||
<el-form-item label="物资名称" prop="materialName"> |
|||
<el-input v-model="form.materialName" placeholder="请输入物资名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="水闸名称" prop="wagaName"> |
|||
<el-input v-model="form.wagaName" 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: 200px" |
|||
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="createUid"> |
|||
<el-input v-model="form.createUid" placeholder="请输入物资种类" /> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="updateUid"> |
|||
<el-input v-model="form.updateUid" placeholder="请输入物资种类" /> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="owerDept"> |
|||
<el-input v-model="form.owerDept" placeholder="请输入物资种类" /> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="remark"> |
|||
<el-input v-model="form.remark" placeholder="请输入物资种类" /> |
|||
</el-form-item> |
|||
<el-form-item label="物资种类" prop="relation"> |
|||
<el-input v-model="form.relation" 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/fxwz"; |
|||
|
|||
export default { |
|||
name: "Fxwz", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 水闸防汛物资表格数据 |
|||
fxwzList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 物资种类字典 |
|||
materialTypeOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
wagaId: null, |
|||
materialName: null, |
|||
wagaName: null, |
|||
personName: null, |
|||
personPhone: null, |
|||
personLevel: null, |
|||
materialNumber: null, |
|||
procurementTime: null, |
|||
materialType: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: {}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
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; |
|||
}); |
|||
}, |
|||
// 物资种类字典翻译 |
|||
materialTypeFormat(row, column) { |
|||
return this.selectDictLabel(this.materialTypeOptions, row.materialType); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
id: null, |
|||
wagaId: null, |
|||
materialName: null, |
|||
wagaName: 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, |
|||
wagaId: null, |
|||
materialName: null, |
|||
wagaName: 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"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
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"; |
|||
// ::v-deep { |
|||
// .el-dialog { |
|||
// margin-top: 2vh !important; |
|||
// } |
|||
// } |
|||
</style> |
|||
|
|||
@ -1,3 +1,699 @@ |
|||
<template> |
|||
<div>组织</div> |
|||
<div> |
|||
<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 |
|||
:options="areasOptions" |
|||
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="['yg: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="['yg: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="['yg: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="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="['yg:fxzz:edit']" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['yg: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-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/fxzz"; |
|||
import { |
|||
listFxzzcy, |
|||
getFxzzcy, |
|||
delFxzzcy, |
|||
addFxzzcy, |
|||
updateFxzzcy, |
|||
updataAllFxzzcy, |
|||
exportFxzzcy, |
|||
} from "@/api/yg/fxzzcy"; |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import msFxzzMember from "./components/msFxzzMember.vue"; |
|||
|
|||
export default { |
|||
name: "Fxzz", |
|||
components: { |
|||
msFxzzMember, |
|||
}, |
|||
data() { |
|||
return { |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
}, |
|||
areasOptions: [], |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 防汛组织表格数据 |
|||
fxzzList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型字典 |
|||
typeOptions: [], |
|||
// 查询参数 |
|||
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 |
|||
sort: "desc", |
|||
}, |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
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(); |
|||
this.getTreeData(); |
|||
this.getDicts("person_dept").then((response) => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
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); |
|||
}, |
|||
/** 查询防汛组织列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
// this.queryParams.data.wagaId = 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, |
|||
}, |
|||
}; |
|||
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; |
|||
getFxzz(id).then((response) => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改防汛组织"; |
|||
}); |
|||
listFxzzcy({ data: { organizationId: id } }).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.wagaId = 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"; |
|||
// ::v-deep { |
|||
// .el-dialog { |
|||
// margin-top: 10vh !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> |
|||
|
|||
Loading…
Reference in new issue