Browse Source

update

master_tdsql
awsl 1 month ago
parent
commit
2fe9aa2ac5
  1. 180
      src/views/dike/engineeringCondition/identificationPlate/components/markForm.vue
  2. 563
      src/views/dike/engineeringCondition/identificationPlate/index.vue

180
src/views/dike/engineeringCondition/identificationPlate/components/markForm.vue

@ -56,12 +56,16 @@
</el-col>
<el-col :span="12">
<el-button-group>
<el-button icon="el-icon-plus" @click="addFormFarther"></el-button>
<el-button @click="addFormFarther" type="primary">{{
!rowIsEdit ? "添加" : "修改"
}}</el-button>
<!-- <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> -->
</el-button-group>
</el-col>
</el-form>
@ -109,10 +113,26 @@ export default {
},
},
index: {},
type: {},
type: {
type: Number,
default() {
return 1;
},
},
editItem: {},
status: {},
status: {
type: Boolean,
default() {
return false;
},
},
comForm: {},
rowIsEdit: {
type: Boolean,
default() {
return false;
},
},
},
data() {
return {
@ -127,43 +147,45 @@ export default {
},
created() {
//
if (this.status) {
this.form = this.editItem;
// if (this.status) {
// this.form = this.editItem;
this.form.type = this.type;
this.form.dikeName = this.comForm.dikeName;
this.form.dikeCode = this.comForm.dikeCode;
this.form.adcd = this.comForm.adcd;
if (this.form.photo) {
this.fileList = JSON.parse(this.form.photo);
}
} else {
this.form = {
id: null,
adcd: null,
dikeCode: null,
markName: null,
dikeName: null,
markLocation: null,
type: null,
markType: null,
photo: null,
markCode: null,
proNo: null,
proCode: null,
createUid: null,
updateUid: null,
createTime: null,
updateTime: null,
owerDept: null,
remark: null,
};
this.form.type = this.type;
// console.log(7777777777, this.comForm);
this.form.dikeName = this.comForm.dikeName;
this.form.dikeCode = this.comForm.dikeCode;
this.form.adcd = this.comForm.adcd;
}
// this.form.type = this.type;
// this.form.dikeName = this.comForm.dikeName;
// this.form.dikeCode = this.comForm.dikeCode;
// this.form.adcd = this.comForm.adcd;
// if (this.editItem.photo) {
// console.log("", this.editItem.photo);
// this.fileList = this.editItem.photo;
// }
// } else {
this.form = {
id: null,
adcd: null,
dikeCode: null,
markName: null,
dikeName: null,
markLocation: null,
type: null,
markType: null,
photo: null,
markCode: null,
proNo: null,
proCode: null,
createUid: null,
updateUid: null,
createTime: null,
updateTime: null,
owerDept: null,
remark: null,
};
this.form.type = this.type;
// console.log(7777777777, this.comForm);
this.form.dikeName = this.comForm.dikeName;
this.form.dikeCode = this.comForm.dikeCode;
this.form.adcd = this.comForm.adcd;
// }
console.log("this.form in components", this.form);
// form
// if (this.isFirst) {
@ -174,12 +196,42 @@ export default {
// console.log("markTypeOptions", this.markTypeOptions);
},
watch: {
// status: {
// handler(newVal, oldVal) {
// console.log("status", newVal, oldVal);
// console.log("this.editItem", this.editItem);
// if (newVal) {
// this.form = this.editItem;
// this.form.type = this.type;
// this.form.dikeName = this.comForm.dikeName;
// this.form.dikeCode = this.comForm.dikeCode;
// this.form.adcd = this.comForm.adcd;
// if (this.editItem.photo) {
// console.log("", this.editItem.photo);
// this.fileList = this.editItem.photo;
// }
// }
// },
// },
editItem: {
deep: true,
handler(newVal, oldVal) {
//
// this.form = newVal;
this.form = newVal;
// console.log("name", newVal);
this.form.type = this.type;
this.form.dikeName = this.comForm.dikeName;
this.form.dikeCode = this.comForm.dikeCode;
this.form.adcd = this.comForm.adcd;
if (newVal.photo) {
console.log("文件列表", newVal.photo);
this.fileList = JSON.parse(newVal.photo);
}
},
},
"comForm.dikeName": {
@ -238,8 +290,52 @@ export default {
// },
},
methods: {
resetForm() {
this.$refs["form"].resetFields();
this.form = {
id: null,
adcd: null,
dikeCode: null,
markName: null,
dikeName: null,
markLocation: null,
type: null,
markType: null,
photo: null,
markCode: null,
proNo: null,
proCode: null,
createUid: null,
updateUid: null,
createTime: null,
updateTime: null,
owerDept: null,
remark: null,
};
this.fileList = [];
this.$nextTick(() => {
this.form.type = this.type;
console.log(7777777777, this.comForm, this.type);
this.form.dikeName = this.comForm.dikeName;
this.form.dikeCode = this.comForm.dikeCode;
this.form.adcd = this.comForm.adcd;
});
},
addFormFarther() {
this.addForm(this.index, this.type, this.formName);
this.$refs["form"].validate((valid) => {
if (valid) {
// this.addForm(this.index, this.type, this.form)
this.form.photo = JSON.stringify(this.fileList);
this.addForm({
formData: JSON.parse(JSON.stringify(this.form)),
type: this.type,
});
this.resetForm();
} else {
console.log("error submit!!");
return false;
}
});
},
delFormFarther() {
this.$emit("delForm", this.form.id, this.type, this.index);

563
src/views/dike/engineeringCondition/identificationPlate/index.vue

@ -11,7 +11,6 @@
</el-breadcrumb-item>
</el-breadcrumb>
<div class="mainCon">
<div class="list">
<el-form
:model="queryParams"
@ -105,7 +104,7 @@
>搜索</el-button
> -->
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>重置</el-button
>
</el-form-item>
</el-form>
@ -118,7 +117,7 @@
size="mini"
@click="handleAdd"
v-hasPermi="['yg:dikeMark:add']"
>新增</el-button
>新增</el-button
>
</el-col>
<el-col :span="1.5">
@ -129,7 +128,7 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['yg:dikeMark:edit']"
>修改</el-button
>修改</el-button
>
</el-col>
<el-col :span="1.5">
@ -140,7 +139,7 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['yg:dikeMark:remove']"
>删除</el-button
>删除</el-button
>
</el-col>
<right-toolbar
@ -235,7 +234,7 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['yg:dikeMark:edit']"
>修改</el-button
>修改</el-button
>
<el-button
size="mini"
@ -243,7 +242,7 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['yg:dikeMark:remove']"
>删除</el-button
>删除</el-button
>
</template>
</el-table-column>
@ -297,249 +296,115 @@
</el-col>
</el-form>
</el-row>
<!-- ========================水闸公告类======================== -->
<div class="listTitle" style="margin-top: 0">
<span>堤防公告类</span>
</div>
<div class="noticePart" ref="noticePart">
<template v-for="(item, index) in counter0">
<markForm
:ref="'noticeForm' + index"
:key="item + index"
:editItem="item"
:status="isEdit"
:formName="'noticeForm'"
:rules="rules"
:markTypeOptions="markTypeOptions1"
:isFirst="index == 0 ? isFirst : false"
:addForm="addForm"
:index="index"
:type="0"
:comForm="comForm"
@delForm="delForm"
/>
</template>
</div>
<!-- ========================水闸警告类======================== -->
<div class="listTitle" style="margin-top: 0">
<span>堤防警告类</span>
</div>
<div class="warnPart" ref="warnPart">
<template v-for="(item, index) in counter1">
<markForm
:ref="'warnForm' + index"
:key="item + index"
:editItem="item"
:status="isEdit"
:formName="'warnForm'"
:rules="rules"
:markTypeOptions="markTypeOptions2"
:isFirst="index == 0 ? isFirst : false"
:addForm="addForm"
:index="index"
:type="1"
:comForm="comForm"
@delForm="delForm"
/>
</template>
<!-- <el-row :gutter="15">
<el-form
ref="warnForm"
:model="warnForm"
:rules="rules"
label-width="80px"
>
<el-col :span="12">
<el-form-item label="标志名称" prop="markName">
<el-input
v-model="warnForm.markName"
placeholder="请输入标志名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标识位置" prop="markLocation">
<el-input
v-model="warnForm.markLocation"
placeholder="请输入标识位置"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标识类型" prop="markType">
<el-select
v-model="warnForm.markType"
placeholder="请选择标识类型"
style="width: 100%"
>
<el-option
v-for="dict in markTypeOptions2"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上传图片" prop="photo">
<el-input
v-model="warnForm.photo"
placeholder="请输入上传图片"
/>
</el-form-item>
</el-col>
</el-form>
</el-row> -->
</div>
<!-- ========================水闸指引类======================== -->
<div class="listTitle" style="margin-top: 0">
<span>堤防指引类</span>
</div>
<div class="guidePart">
<template v-for="(item, index) in counter2">
<markForm
:ref="'guideForm' + index"
:key="item + index"
:editItem="item"
:status="isEdit"
:formName="'guideForm'"
:rules="rules"
:markTypeOptions="markTypeOptions3"
:isFirst="index == 0 ? isFirst : false"
:addForm="addForm"
:index="index"
:type="2"
:comForm="comForm"
@delForm="delForm"
/>
</template>
<!-- <el-row :gutter="15">
<el-form
ref="guideForm"
:model="guideForm"
:rules="rules"
label-width="80px"
>
<el-col :span="12">
<el-form-item label="标志名称" prop="markName">
<el-input
v-model="guideForm.markName"
placeholder="请输入标志名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标识位置" prop="markLocation">
<el-input
v-model="guideForm.markLocation"
placeholder="请输入标识位置"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标识类型" prop="markType">
<el-select
v-model="guideForm.markType"
placeholder="请选择标识类型"
style="width: 100%"
>
<el-option
v-for="dict in markTypeOptions3"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上传图片" prop="photo">
<el-input
v-model="guideForm.photo"
placeholder="请输入上传图片"
/>
</el-form-item>
</el-col>
</el-form>
</el-row> -->
</div>
<!-- ========================水闸名称类======================== -->
<div class="listTitle" style="margin-top: 0">
<span>堤防名称类</span>
</div>
<div class="namePart">
<template v-for="(item, index) in counter3">
<div class="biaopai-wrap">
<div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in tabsOpt"
:key="item.type"
:label="`${item.label}(${getCounterLen(item.type)})`"
:name="item.name"
></el-tab-pane>
</el-tabs>
</div>
<div class="form-wrap">
<markForm
:ref="'nameForm' + index"
:key="item + index"
:editItem="item"
ref="markForm"
:status="isEdit"
:formName="'nameForm'"
:formName="getTabsOpt.name"
:rules="rules"
:markTypeOptions="markTypeOptions4"
:isFirst="index == 0 ? isFirst : false"
:addForm="addForm"
:index="index"
:type="3"
:markTypeOptions="getTabsOpt.markTypeOptions"
:isFirst="true"
:addForm="addForm1"
:type="getTabsOpt.type"
:editItem="editItem"
:rowIsEdit="rowIsEdit"
:comForm="comForm"
@delForm="delForm"
/>
</template>
<!-- <el-row :gutter="15">
<el-form
ref="nameForm"
:model="nameForm"
:rules="rules"
label-width="80px"
>
<el-col :span="12">
<el-form-item label="标志名称" prop="markName">
<el-input
v-model="nameForm.markName"
placeholder="请输入标志名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标识位置" prop="markLocation">
<el-input
v-model="nameForm.markLocation"
placeholder="请输入标识位置"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标识类型" prop="markType">
<el-select
v-model="nameForm.markType"
placeholder="请选择标识类型"
style="width: 100%"
>
<el-option
v-for="dict in markTypeOptions4"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上传图片" prop="photo">
<el-input
v-model="nameForm.photo"
placeholder="请输入上传图片"
/>
</el-form-item>
</el-col>
</el-form>
</el-row> -->
</div>
<div class="table-wrap">
<el-table
:data="
getDialogTabelData.filter(
(data) =>
!search ||
data.markName.toLowerCase().includes(search.toLowerCase())
)
"
border
style="width: 100%"
height="290"
>
<el-table-column prop="markName" label="标志名称" width="250">
</el-table-column>
<el-table-column
prop="markLocation"
label="标识位置"
width="200"
>
</el-table-column>
<el-table-column prop="markType" label="标识类型">
<template slot-scope="scope">
{{ formatType(scope.row) }}
</template>
</el-table-column>
<el-table-column prop="photo" label="图片文件">
<template slot-scope="scope">
{{ JSON.parse(scope.row.photo).length ? "已上传" : "" }}
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="220"
fixed="right"
>
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入标志名称搜索"
clearable
/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="
handleDialogUpdate(
scope.row,
scope.column,
scope.$index
)
"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="
handleDialogDelete(
scope.row,
scope.column,
scope.$index
)
"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button type="primary" @click="submitForm1"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
@ -606,7 +471,7 @@ export default {
//
title: "",
//
open: false,
open: true,
//
typeOptions: [],
//
@ -658,13 +523,66 @@ export default {
},
dikeNameOptions: [],
isEdit: false,
counter0: [{}],
counter1: [{}],
counter2: [{}],
counter3: [{}],
counter0: [],
counter1: [],
counter2: [],
counter3: [],
delIdList: [],
activeName: "noticeForm",
editItem: {},
editIndex: null,
rowIsEdit: false,
search: "",
};
},
computed: {
tabsOpt() {
return [
{
label: "堤防公告类",
name: "noticeForm",
type: 0,
markTypeOptions: this.markTypeOptions1,
},
{
label: "堤防警告类",
name: "warnForm",
type: 1,
markTypeOptions: this.markTypeOptions2,
},
{
label: "堤防指引类",
name: "guideForm",
type: 2,
markTypeOptions: this.markTypeOptions3,
},
{
label: "堤防名称类",
name: "nameForm",
type: 3,
markTypeOptions: this.markTypeOptions4,
},
];
},
getTabsOpt() {
return this.tabsOpt.filter((item) => {
return item.name === this.activeName;
})[0];
},
getDialogTabelData() {
return this[`counter${this.getTabsOpt.type}`];
// switch (this.activeName) {
// case "noticeForm":
// return this.counter0;
// case "noticeForm":
// return this.counter0;
// case "noticeForm":
// return this.counter0;
// case "noticeForm":
// return this.counter0;
// }
},
},
created() {
this.getList();
this.getDicts("breastplate_type").then((response) => {
@ -691,6 +609,47 @@ export default {
// this.counter1[0] = this.noticeForm;
// },
methods: {
formatType(row) {
console.log("row", row);
let { type, markType } = row;
if (markType) {
const markTypeOptions = "markTypeOptions" + (parseInt(type) + 1);
return this[markTypeOptions].filter((item) => {
return item.dictValue == markType;
})[0].dictLabel;
} else {
return "--";
}
},
handleDialogUpdate(row, col, index) {
console.log("row", row, col, index);
this.rowIsEdit = true;
this.editIndex = index;
this.editItem = JSON.parse(JSON.stringify(row));
},
handleDialogDelete(row, col, index) {
let { type } = row;
const counterType = "counter" + type;
this.$confirm("是否删除选中的数据?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
console.log("删除", row, index);
this[counterType].splice(index, 1);
})
.catch(function () {});
},
getCounterLen(type) {
const counterType = "counter" + type;
return this[counterType].length;
},
handleClick() {
this.search = "";
this.$refs.markForm.resetForm();
},
formatAdcd(row) {
if (row.adcd) {
let provinceCode = row.adcd.slice(0, 2);
@ -713,6 +672,19 @@ export default {
}
}
},
addForm1(rowData) {
console.log("rowData", rowData);
let { type, formData } = rowData;
const counterType = "counter" + type;
console.log(formData);
if (this.rowIsEdit) {
this[counterType].splice(this.editIndex, 1, formData);
this.rowIsEdit = false;
} else {
this[counterType].push(formData);
}
},
addForm(index, type, formName) {
console.log("index和type", index, type);
const counterType = "counter" + type;
@ -837,10 +809,10 @@ export default {
//
reset() {
this.delIdList = [];
this.counter0 = [{}];
this.counter1 = [{}];
this.counter2 = [{}];
this.counter3 = [{}];
this.counter0 = [];
this.counter1 = [];
this.counter2 = [];
this.counter3 = [];
this.comForm = {
dikeName: null,
dikeCode: null,
@ -1001,13 +973,13 @@ export default {
this.comForm.adcd = response.data[0].adcd;
console.log("this.comForm", this.comForm);
this.counter0 = response.data.filter((item) => item.type == 0);
if (this.counter0.length == 0) this.counter0 = [{}];
if (this.counter0.length == 0) this.counter0 = [];
this.counter1 = response.data.filter((item) => item.type == 1);
if (this.counter1.length == 0) this.counter1 = [{}];
if (this.counter1.length == 0) this.counter1 = [];
this.counter2 = response.data.filter((item) => item.type == 2);
if (this.counter2.length == 0) this.counter2 = [{}];
if (this.counter2.length == 0) this.counter2 = [];
this.counter3 = response.data.filter((item) => item.type == 3);
if (this.counter3.length == 0) this.counter3 = [{}];
if (this.counter3.length == 0) this.counter3 = [];
console.log("回显的数据时的counter0", this.counter0);
console.log("回显的数据时的counter1", this.counter1);
console.log("回显的数据时的counter2", this.counter2);
@ -1017,6 +989,73 @@ export default {
});
},
/** 提交按钮 */
submitForm1() {
let isAllTrue =
this.counter0.length ||
this.counter1.length ||
this.counter2.length ||
this.counter3.length
? true
: false;
this.$refs["comForm"].validate((valid0) => {
if (valid0) {
if (!isAllTrue) {
this.msgError("堤防标识标牌列表数据为空");
return;
}
this.counter0.forEach((item) => {
if (item) {
item = { ...item, ...this.comForm };
}
});
this.counter1.forEach((item) => {
if (item) {
item = { ...item, ...this.comForm };
}
});
this.counter2.forEach((item) => {
if (item) {
item = { ...item, ...this.comForm };
}
});
this.counter3.forEach((item) => {
if (item) {
item = { ...item, ...this.comForm };
}
});
if (this.isEdit) {
updateDikeMark([
...this.counter0,
...this.counter1,
...this.counter2,
...this.counter3,
]).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
if (this.delIdList.length > 0) delDikeMark(this.delIdList);
} else {
addDikeMark([
...this.counter0,
...this.counter1,
...this.counter2,
...this.counter3,
]).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
submitForm() {
// console.log(1111111111, this.$refs.noticeForm0[0].$refs.form);
//
@ -1065,26 +1104,26 @@ export default {
this.counter0.length > 1
? this.counter0
: this.$refs["noticeForm0"][0].form.markName
? [this.$refs["noticeForm0"][0].form]
: [];
? [this.$refs["noticeForm0"][0].form]
: [];
const C1 =
this.counter1.length > 1
? this.counter1
: this.$refs["warnForm0"][0].form.markName
? [this.$refs["warnForm0"][0].form]
: [];
? [this.$refs["warnForm0"][0].form]
: [];
const C2 =
this.counter2.length > 1
? this.counter2
: this.$refs["guideForm0"][0].form.markName
? [this.$refs["guideForm0"][0].form]
: [];
? [this.$refs["guideForm0"][0].form]
: [];
const C3 =
this.counter3.length > 1
? this.counter3
: this.$refs["nameForm0"][0].form.markName
? [this.$refs["nameForm0"][0].form]
: [];
? [this.$refs["nameForm0"][0].form]
: [];
// console.log("C0C0", C0, C1);
if (this.isEdit) {

Loading…
Cancel
Save