355 lines
11 KiB
Vue
355 lines
11 KiB
Vue
<!--江河水功能区国家级数据统计-->
|
|
<template>
|
|
<div class="ele-body">
|
|
<a-card :bordered="false">
|
|
<!-- 搜索表单 -->
|
|
<a-form
|
|
:model="where"
|
|
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
|
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }"
|
|
>
|
|
<a-row>
|
|
<!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
|
|
<a-form-item label="城区">
|
|
<a-select v-model:value="where.area" allowClear showSearch>
|
|
<a-select-option
|
|
v-for="item in areaOptions"
|
|
:key="item.value"
|
|
>{{ item.label }}</a-select-option
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col> -->
|
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
|
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
|
<a-space>
|
|
<a-button type="primary" @click="reload">查询</a-button>
|
|
<a-button @click="reset">重置</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
<a-modal
|
|
v-model:visible="showEdit"
|
|
:title="form.nationalLevelWaterFunctionAreaId !== undefined ? '修改记录' : '添加记录'"
|
|
:confirm-loading="loading"
|
|
:width="1000"
|
|
:body-style="{ paddingBottom: '8px' }"
|
|
@ok="save"
|
|
>
|
|
<a-form
|
|
ref="form"
|
|
:model="form"
|
|
:rules="rules"
|
|
:label-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
|
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
|
layout="vertical"
|
|
labelAlign="left"
|
|
>
|
|
<a-row gutter="12" >
|
|
<a-col :md="12" :sm="24">
|
|
<a-form-item label="采样时间" name="monitorDate">
|
|
<a-date-picker
|
|
v-model:value="form.monitorDate"
|
|
:locale="locale"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="12" :sm="24">
|
|
<!-- <a-form-item label="时间" name="monitorTime">-->
|
|
<!-- <a-time-picker-->
|
|
<!-- v-model:value="form.monitorTime"-->
|
|
<!-- format="HH:mm"-->
|
|
<!-- />-->
|
|
<!-- </a-form-item>-->
|
|
</a-col>
|
|
<template v-for="(item,index) in tableColumns" :key="index">
|
|
<template v-if="item.children">
|
|
<a-col v-for="(citem,cindex) in item.children" :key="cindex" :md="12" :sm="24">
|
|
<a-form-item :label="item.title + '-' + citem.title" :name="citem.dataIndex">
|
|
<a-input
|
|
v-model:value="form[citem.dataIndex]"
|
|
:placeholder="'请输入' +item.title + '-' + citem.title"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</template>
|
|
<template v-else>
|
|
<a-col :md="12" :sm="24">
|
|
<a-form-item :label="item.title" :name="item.dataIndex">
|
|
<a-input
|
|
v-model:value="form[item.dataIndex]"
|
|
:placeholder="'请输入' + item.title"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</template>
|
|
</template>
|
|
|
|
</a-row>
|
|
</a-form>
|
|
</a-modal>
|
|
<!-- 表格 -->
|
|
<ele-pro-table
|
|
v-model:selection="selectionList"
|
|
ref="table"
|
|
row-key="nationalLevelWaterFunctionAreaId"
|
|
:datasource="url"
|
|
:columns="columns"
|
|
:where="where"
|
|
:scroll="{ x: 'max-content' }"
|
|
>
|
|
<template v-if="bill.checked != 1" #toolbar>
|
|
<a-space>
|
|
<a-button @click="openEdit" type="primary">新增</a-button>
|
|
<a-popconfirm
|
|
:disabled="selectionList.length == 0"
|
|
:title="`确认删除${selectionList.length}条数据吗?`"
|
|
ok-text="Yes"
|
|
cancel-text="No"
|
|
@confirm="removeBatch"
|
|
>
|
|
<a-button
|
|
:disabled="selectionList.length == 0"
|
|
type="primary"
|
|
ghost
|
|
danger
|
|
>删除</a-button
|
|
>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-button
|
|
@click="openEdit(record)"
|
|
type="primary"
|
|
shape="round"
|
|
size="small"
|
|
>修改</a-button
|
|
>
|
|
<a-popconfirm
|
|
:title="`确认删除这条数据吗?`"
|
|
ok-text="Yes"
|
|
cancel-text="No"
|
|
@confirm="remove(record)"
|
|
>
|
|
<a-button type="primary" danger shape="round" size="small"
|
|
>删除</a-button
|
|
>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
</ele-pro-table>
|
|
</a-card>
|
|
</div>
|
|
<!-- 编辑弹窗 -->
|
|
</template>
|
|
|
|
<script>
|
|
import _ from "lodash";
|
|
import {
|
|
pageWaterFunctionAreaUrl,
|
|
saveWaterFunctionArea,
|
|
removeWaterFunctionArea,
|
|
removeBatchWaterFunctionArea,
|
|
updateWaterFunctionArea,
|
|
getWaterFunctionAreaBill,
|
|
// getColumnOptions,
|
|
} from "@/api/ecology/water-function-area";
|
|
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
|
|
import moment from "moment";
|
|
import { tableColumns } from "./colums";
|
|
// import utils from "./utils";
|
|
export default {
|
|
name: "WaterFunctionAreaCollectWater",
|
|
components: {},
|
|
data() {
|
|
const { billId } = this.$route.params;
|
|
return {
|
|
locale,
|
|
bill: {},
|
|
// 表格数据接口
|
|
url: pageWaterFunctionAreaUrl,
|
|
selection: [],
|
|
tableColumns,
|
|
// 表格列配置
|
|
columns: [
|
|
...tableColumns,
|
|
|
|
{
|
|
title: "创建人",
|
|
dataIndex: "userName",
|
|
sorter: true,
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
width: 150,
|
|
align: "center",
|
|
fixed: "right",
|
|
slots: {
|
|
customRender: "action",
|
|
},
|
|
},
|
|
],
|
|
// 表格搜索条件
|
|
nationalLevelWaterFunctionAreaBillId: billId,
|
|
where: {
|
|
nationalLevelWaterFunctionAreaBillId: billId,
|
|
},
|
|
// 表格选中数据
|
|
selectionList: [],
|
|
// 是否显示编辑弹窗
|
|
showEdit: false,
|
|
// 表单数据
|
|
form: {},
|
|
loading: false,
|
|
rules: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
const { billId } = this.$route.params;
|
|
getWaterFunctionAreaBill(billId).then((res) => {
|
|
this.bill = res.data.data;
|
|
if (res.data.data.checked == 1) {
|
|
this.columns.splice(this.columns.length - 1, 1);
|
|
}
|
|
});
|
|
this.loadOptionData();
|
|
},
|
|
methods: {
|
|
/**获取下来框数据 */
|
|
loadOptionData() {},
|
|
/* 刷新表格 */
|
|
reload() {
|
|
console.log("--------------------------")
|
|
console.log(this.url);
|
|
this.$refs.table.reload({
|
|
where: this.where,
|
|
});
|
|
},
|
|
/* 重置搜索 */
|
|
reset() {
|
|
this.where = {
|
|
nationalLevelWaterFunctionAreaBillId: this.nationalLevelWaterFunctionAreaBillId,
|
|
};
|
|
this.reload();
|
|
},
|
|
/* 显示编辑 */
|
|
openEdit(record) {
|
|
const cloneRecord = _.cloneDeep(record);
|
|
if (record && cloneRecord.samplingTime) {
|
|
console.log(moment(cloneRecord.monitorTime).format("YYYY MM DD"));
|
|
cloneRecord.monitorDate = moment(cloneRecord.samplingTime);
|
|
cloneRecord.monitorTime = moment(cloneRecord.samplingTime);
|
|
}
|
|
// cloneRecord.mi
|
|
this.form = Object.assign({}, cloneRecord);
|
|
this.showEdit = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.form.clearValidate(); // 清除表单验证信息
|
|
});
|
|
},
|
|
|
|
save() {
|
|
console.log("save开始"+this.form)
|
|
const hide = this.$message.loading("请求中..", 0);
|
|
const form = _.cloneDeep(this.form);
|
|
const date = new Date();
|
|
date.setFullYear(form.monitorDate.year());
|
|
date.setMonth(form.monitorDate.month());
|
|
date.setDate(form.monitorDate.date());
|
|
form.samplingTime = date.getTime();
|
|
// form.monitorYear = date.getFullYear();
|
|
// form.monitorMonth = date.getMonth() + 1;
|
|
// form.monitorDay = date.getDate();
|
|
// form.monitorHour = date.getHours();
|
|
// form.monitorMinute = date.getMinutes();
|
|
delete form["monitorDate"];
|
|
delete form["monitorTime"];
|
|
if (form.nationalLevelWaterFunctionAreaId) {
|
|
console.log("编辑开始"+form)
|
|
updateWaterFunctionArea(form)
|
|
.then((res) => {
|
|
if (res.data.code == 0) {
|
|
this.showEdit = false;
|
|
this.$message.success(res.data.msg);
|
|
this.reload();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.$message.error(error.message);
|
|
})
|
|
.finally(() => {
|
|
console.log("finallyfinallyfinallyfinally");
|
|
hide();
|
|
});
|
|
} else {
|
|
console.log("保存开始"+form);
|
|
form.nationalLevelWaterFunctionAreaBillId = this.nationalLevelWaterFunctionAreaBillId;
|
|
form.userId = this.$store.state.user.user.userId
|
|
saveWaterFunctionArea(form)
|
|
.then((res) => {
|
|
if (res.data.code == 0) {
|
|
this.showEdit = false;
|
|
this.$message.success(res.data.msg);
|
|
this.reload();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.$message.error(error.message);
|
|
})
|
|
.finally(() => {
|
|
hide();
|
|
});
|
|
}
|
|
},
|
|
/* 删除单个 */
|
|
remove(row) {
|
|
const hide = this.$message.loading("请求中..", 0);
|
|
removeWaterFunctionArea(row.nationalLevelWaterFunctionAreaId)
|
|
.then((res) => {
|
|
if (res.data.code === 0) {
|
|
this.$message.success(res.data.msg);
|
|
this.reload();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
this.$message.error(e.msg);
|
|
})
|
|
.finally(() => hide());
|
|
},
|
|
removeBatch() {
|
|
const ids = this.selectionList.map((item) => item.nationalLevelWaterFunctionAreaId);
|
|
const hide = this.$message.loading("请求中..", 0);
|
|
removeBatchWaterFunctionArea(ids)
|
|
.then((res) => {
|
|
if (res.data.code === 0) {
|
|
this.$message.success(res.data.msg);
|
|
this.reload();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
this.$message.error(e.msg);
|
|
})
|
|
.finally(() => hide());
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
</style>
|