This commit is contained in:
parent
85bd434543
commit
60cc53b7b0
|
|
@ -21,7 +21,7 @@
|
||||||
<el-table-column v-if="item.type === 'slot'" :width="item.width" :label="item.label" :sortable="item.sortable"
|
<el-table-column v-if="item.type === 'slot'" :width="item.width" :label="item.label" :sortable="item.sortable"
|
||||||
:sort-method="item.sortableMethod" :prop="item.name">
|
:sort-method="item.sortableMethod" :prop="item.name">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<slot :currentCol="item" :currentData="scope.row[item.name]"></slot>
|
<slot :currentCol="item" :currentData="scope.row"></slot>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column :prop="item.name" :label="item.label" :width="item.width" :sortable="item.sortable"
|
<el-table-column :prop="item.name" :label="item.label" :width="item.width" :sortable="item.sortable"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,297 @@
|
||||||
|
<template>
|
||||||
|
<div id="content" ref="content">
|
||||||
|
<TableBody v-bind="data" @handleTableHeader="handleTableHeader">
|
||||||
|
<template #doIt="{ currentCol, currentData }">
|
||||||
|
<span
|
||||||
|
style="
|
||||||
|
font-size: 14px;
|
||||||
|
color: #409eff;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
@click.stop="handleGg(currentData)"
|
||||||
|
>
|
||||||
|
编辑</span
|
||||||
|
>
|
||||||
|
<el-popconfirm
|
||||||
|
title="是否删除"
|
||||||
|
confirm-button-text="是"
|
||||||
|
cancel-button-text="否"
|
||||||
|
@confirm="remove(currentData)"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<span
|
||||||
|
style="font-size: 14px; color: #f56c6c; cursor: pointer"
|
||||||
|
@click.stop
|
||||||
|
>删除</span
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</TableBody>
|
||||||
|
<el-dialog
|
||||||
|
v-model="state.Monitoring"
|
||||||
|
title="监测点管理"
|
||||||
|
width="30%"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
class="form"
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:rules="rules"
|
||||||
|
:model="state.formState"
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<el-form-item label="监测点名称" prop="monitoringPointName">
|
||||||
|
<el-input
|
||||||
|
v-model="state.formState.monitoringPointName"
|
||||||
|
style="width: 220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="监测点编码" prop="monitoringPointCode">
|
||||||
|
<el-input
|
||||||
|
v-model="state.formState.monitoringPointCode"
|
||||||
|
style="width: 220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="视频通道编码" prop="channelId">
|
||||||
|
<el-input v-model="state.formState.channelId" style="width: 220px" />
|
||||||
|
</el-form-item>
|
||||||
|
<div style="display: flex; justify-content: center">
|
||||||
|
<el-button type="primary" @click="onAffirm(ruleFormRef)"
|
||||||
|
>提交</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
// import { message } from "ant-design-vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import TableBody from "@/components/TableBody/TableBody.vue";
|
||||||
|
import http from "@/utils/request";
|
||||||
|
import tools from "@/utils/tools";
|
||||||
|
const state = reactive({
|
||||||
|
Monitoring: false,
|
||||||
|
formState: {
|
||||||
|
monitoringPointName: "",
|
||||||
|
monitoringPointCode: "",
|
||||||
|
channelId: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const ruleFormRef = ref();
|
||||||
|
const rules = reactive({
|
||||||
|
monitoringPointName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "不能为空",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
monitoringPointCode: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "不能为空",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
channelId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "不能为空",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
/**
|
||||||
|
* @type {Object}
|
||||||
|
* @description 表格头部
|
||||||
|
*/
|
||||||
|
tableHeader: [
|
||||||
|
{
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
type: "custom", // 自定义按钮（目前只支持 custom ）,
|
||||||
|
name: "addOne", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||||
|
title: "新建", // 按钮名称
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
buttons: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
/**
|
||||||
|
* @type {Array}
|
||||||
|
* @description 表格参数
|
||||||
|
*/
|
||||||
|
tableType: {
|
||||||
|
selection: false, // 是否多选
|
||||||
|
tableLoading: false, // 表格 loading
|
||||||
|
dbclick: true, //是否开启选中双击
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @type {Array}
|
||||||
|
* @description 表格配置
|
||||||
|
*/
|
||||||
|
tableList: [
|
||||||
|
{
|
||||||
|
label: "设备监测点名称",
|
||||||
|
name: "monitoringPointName",
|
||||||
|
show: true,
|
||||||
|
// type: "slot",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备监测点编码",
|
||||||
|
name: "monitoringPointCode",
|
||||||
|
show: true,
|
||||||
|
// type: "slot",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "视频通道编码",
|
||||||
|
name: "channelId",
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "slot", // 设置为 slot 即可使用插槽
|
||||||
|
name: "doIt", // name 是作用域插槽的名字
|
||||||
|
label: "操作",
|
||||||
|
show: true, // 是否显示
|
||||||
|
sortable: false,
|
||||||
|
width: "170px",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {Array}
|
||||||
|
* @description 表格数据(模拟数据)
|
||||||
|
*/
|
||||||
|
tableData: [],
|
||||||
|
/**
|
||||||
|
* @type {Object}
|
||||||
|
* @description 分页数据
|
||||||
|
*/
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
current: 1,
|
||||||
|
total: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 表格头部处理事件
|
||||||
|
const handleTableHeader = ({ type, data }) => {
|
||||||
|
switch (type) {
|
||||||
|
case "addOne":
|
||||||
|
addNew();
|
||||||
|
break;
|
||||||
|
case "addMore":
|
||||||
|
break;
|
||||||
|
case "downloadMb":
|
||||||
|
break;
|
||||||
|
case "search":
|
||||||
|
break;
|
||||||
|
case "refresh":
|
||||||
|
break;
|
||||||
|
case "advanced":
|
||||||
|
break;
|
||||||
|
case "download":
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNew = () => {
|
||||||
|
state.Monitoring = true;
|
||||||
|
};
|
||||||
|
//监测点列表
|
||||||
|
const get = () => {
|
||||||
|
http.get(`/api/monitoring/point`).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
if (res.code === 200) {
|
||||||
|
data.tableData = res.data.records;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAffirm = async (formEl) => {
|
||||||
|
console.log(formEl);
|
||||||
|
if (!formEl) return;
|
||||||
|
await formEl.validate((valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
console.log(state.formState);
|
||||||
|
if (state.formState.id) {
|
||||||
|
onAlter();
|
||||||
|
} else {
|
||||||
|
onFinish();
|
||||||
|
}
|
||||||
|
console.log("submit!");
|
||||||
|
} else {
|
||||||
|
console.log("error submit!", fields);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//新建监测点
|
||||||
|
const onFinish = () => {
|
||||||
|
http.post(`/api/monitoring/point`, state.formState).then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success(res.message);
|
||||||
|
state.Monitoring = false;
|
||||||
|
get();
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 编辑监测点
|
||||||
|
const onAlter = () => {
|
||||||
|
http
|
||||||
|
.put(`/api/monitoring/point/${state.formState.id}`, {
|
||||||
|
channelId: state.formState.channelId,
|
||||||
|
monitoringPointCode: state.formState.monitoringPointCode,
|
||||||
|
monitoringPointName: state.formState.monitoringPointName,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success(res.message);
|
||||||
|
state.Monitoring = false;
|
||||||
|
get();
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//编辑详情
|
||||||
|
const handleGg = (data) => {
|
||||||
|
console.log(data);
|
||||||
|
state.Monitoring = true;
|
||||||
|
http.get(`/api/monitoring/point/${data.id}`).then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
state.formState = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//删除
|
||||||
|
const remove = (data) => {
|
||||||
|
console.log(data);
|
||||||
|
http.delete(`/api/monitoring/point/${data.id}`).then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success(res.message);
|
||||||
|
get();
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
get();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -30,7 +30,7 @@ export default defineConfig({
|
||||||
'/api': {
|
'/api': {
|
||||||
// target: 'http://10.0.0.29:9999',
|
// target: 'http://10.0.0.29:9999',
|
||||||
// target: 'http://demo35.ydool.net/',
|
// target: 'http://demo35.ydool.net/',
|
||||||
target: 'http://192.168.1.27:7777',
|
target: 'http://192.168.1.11:10875',
|
||||||
// target: 'http://10.0.0.63:7777', // 刘进
|
// target: 'http://10.0.0.63:7777', // 刘进
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
// rewrite: (path) => path.replace(/^\/api/, '')
|
// rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue