bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

养护站设备管理页面

Browse Source
This commit is contained in:
huangchenhao 2025-11-03 17:56:26 +08:00
parent d0260c181c
commit be3089178f
6 changed files with 519 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/screen/src/component/MyDialog/index.vue
View File

@ -1,5 +1,17 @@
<template>
<el-dialog :visible.sync="visible" :title="title" :width="width">
<el-dialog
:visible.sync="visible"
:title="title"
:width="width"
destroy-on-close
>
<component
v-if="dynamicComponent"
:is="dynamicComponent"
ref="dynamicComponentRef"
v-bind="componentProps"
@vue:mounted="handleComponentMount"
/>
<slot></slot>
<template #footer>
<div class="dialog-footer">
@ -11,6 +23,12 @@
</template>
<script setup>
import { computed, ref, } from "vue";
const dynamicComponentRef = ref(null);
defineExpose({
dynamicComponentRef // 暴露给父组件
});
const props = defineProps({
visible: {
type: Boolean,
@ -24,6 +42,14 @@ const props = defineProps({
type: String,
default: "",
},
dynamicComponent: {
type: [Object, Function],
default: null,
},
componentProps: {
type: Object,
default: () => ({}),
},
onConfirm: {
type: Function,
default: () => {},
@ -33,6 +59,10 @@ const props = defineProps({
default: () => {},
},
});
const normalizedComponent = computed(() =>
props.dynamicComponent ? markRaw(props.dynamicComponent) : null
);
</script>
<style>

88
packages/screen/src/views/EquipmentManagement/addDialog.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="detail-container">
<el-form
ref="formRef"
label-position="right"
label-width="auto"
style="
max-width: 600px;
max-height: 60vh;
overflow-y: auto;
padding-right: 12px;
"
>
<el-form-item label="操作员">
<el-input v-model="form.czy" />
</el-form-item>
<el-form-item label="辐射范围">
<el-input v-model="form.fsfw" />
</el-form-item>
<el-form-item label="管理人员">
<el-input v-model="form.glry" />
</el-form-item>
<el-form-item label="购买费用（万元）">
<el-input v-model="form.gmfy" />
</el-form-item>
<el-form-item label="购置日期">
<el-input v-model="form.gzrq" />
</el-form-item>
<el-form-item label="区县名称">
<el-input v-model="form.qxmc" />
</el-form-item>
<el-form-item label="设备编号">
<el-input v-model="form.sbbh" />
</el-form-item>
<el-form-item label="设备大类">
<el-input v-model="form.sbdl" />
</el-form-item>
<el-form-item label="设备小类">
<el-input v-model="form.sbxl" />
</el-form-item>
<el-form-item label="设备名称">
<el-input v-model="form.sbmc" />
</el-form-item>
<el-form-item label="设备位置">
<el-input v-model="form.sbwz" />
</el-form-item>
<el-form-item label="设备经度">
<el-input v-model="form.jd" />
</el-form-item>
<el-form-item label="设备纬度">
<el-input v-model="form.wd" />
</el-form-item>
<el-form-item label="设备型号">
<el-input v-model="form.sbxh" />
</el-form-item>
<el-form-item label="设备状态">
<el-input v-model="form.sbzt" />
</el-form-item>
<el-form-item label="生产厂家">
<el-input v-model="form.sccj" />
</el-form-item>
<el-form-item label="是否应急设备">
<el-input v-model="form.sfyjsb" />
</el-form-item>
<el-form-item label="是否纳入市级补助范围">
<el-input v-model="form.sfnrsjbz" />
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
detailData: {
type: Object,
default: () => ({}),
},
form: {
type: Object,
default: () => ({}),
},
});
</script>
<style>
</style>

81
packages/screen/src/views/EquipmentManagement/detailDialog.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="detail-container">
<el-form
label-position="right"
label-width="auto"
style="
max-width: 600px;
max-height: 60vh;
overflow-y: auto;
padding-right: 12px;
"
>
<el-form-item label="操作员">
<el-input disabled v-model="detailData.czy" />
</el-form-item>
<el-form-item label="辐射范围">
<el-input disabled v-model="detailData.fsfw" />
</el-form-item>
<el-form-item label="管理人员">
<el-input disabled v-model="detailData.glry" />
</el-form-item>
<el-form-item label="购买费用（万元）">
<el-input disabled v-model="detailData.gmfy" />
</el-form-item>
<el-form-item label="购置日期">
<el-input disabled v-model="detailData.gzrq" />
</el-form-item>
<el-form-item label="区县名称">
<el-input disabled v-model="detailData.qxmc" />
</el-form-item>
<el-form-item label="设备编号">
<el-input disabled v-model="detailData.sbbh" />
</el-form-item>
<el-form-item label="设备大类">
<el-input disabled v-model="detailData.sbdl" />
</el-form-item>
<el-form-item label="设备小类">
<el-input disabled v-model="detailData.sbxl" />
</el-form-item>
<el-form-item label="设备名称">
<el-input disabled v-model="detailData.sbmc" />
</el-form-item>
<el-form-item label="设备位置">
<el-input disabled v-model="detailData.sbwz" />
</el-form-item>
<el-form-item label="设备经度">
<el-input disabled v-model="detailData.jd" />
</el-form-item>
<el-form-item label="设备纬度">
<el-input disabled v-model="detailData.wd" />
</el-form-item>
<el-form-item label="设备型号">
<el-input disabled v-model="detailData.sbxh" />
</el-form-item>
<el-form-item label="设备状态">
<el-input disabled v-model="detailData.sbzt" />
</el-form-item>
<el-form-item label="生产厂家">
<el-input disabled v-model="detailData.sccj" />
</el-form-item>
<el-form-item label="是否应急设备">
<el-input disabled v-model="detailData.sfyjsb" />
</el-form-item>
<el-form-item label="是否纳入市级补助范围">
<el-input disabled v-model="detailData.sfnrsjbz" />
</el-form-item>
</el-form>
</div>
</template>
<script setup>
const props = defineProps({
detailData: {
type: Object,
default: () => ({}),
},
});
</script>
<style>
</style>

90
packages/screen/src/views/EquipmentManagement/editDialog.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div class="detail-container">
<el-form
ref="formRef"
label-position="right"
label-width="auto"
style="
max-width: 600px;
max-height: 60vh;
overflow-y: auto;
padding-right: 12px;
"
>
<el-form-item label="操作员">
<el-input v-model="form.czy" />
</el-form-item>
<el-form-item label="辐射范围">
<el-input v-model="form.fsfw" />
</el-form-item>
<el-form-item label="管理人员">
<el-input v-model="form.glry" />
</el-form-item>
<el-form-item label="购买费用（万元）">
<el-input v-model="form.gmfy" />
</el-form-item>
<el-form-item label="购置日期">
<el-input v-model="form.gzrq" />
</el-form-item>
<el-form-item label="区县名称">
<el-input v-model="form.qxmc" />
</el-form-item>
<el-form-item label="设备编号">
<el-input v-model="form.sbbh" />
</el-form-item>
<el-form-item label="设备大类">
<el-input v-model="form.sbdl" />
</el-form-item>
<el-form-item label="设备小类">
<el-input v-model="form.sbxl" />
</el-form-item>
<el-form-item label="设备名称">
<el-input v-model="form.sbmc" />
</el-form-item>
<el-form-item label="设备位置">
<el-input v-model="form.sbwz" />
</el-form-item>
<el-form-item label="设备经度">
<el-input v-model="form.jd" />
</el-form-item>
<el-form-item label="设备纬度">
<el-input v-model="form.wd" />
</el-form-item>
<el-form-item label="设备型号">
<el-input v-model="form.sbxh" />
</el-form-item>
<el-form-item label="设备状态">
<el-input v-model="form.sbzt" />
</el-form-item>
<el-form-item label="生产厂家">
<el-input v-model="form.sccj" />
</el-form-item>
<el-form-item label="是否应急设备">
<el-input v-model="form.sfyjsb" />
</el-form-item>
<el-form-item label="是否纳入市级补助范围">
<el-input v-model="form.sfnrsjbz" />
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formRef = ref(null);
defineExpose({ formRef });
const props = defineProps({
detailData: {
type: Object,
default: () => ({}),
},
form: {
type: Object,
default: () => ({}),
},
});
</script>
<style>
</style>

209
packages/screen/src/views/EquipmentManagement/index.js
View File

@ -1,8 +1,9 @@
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import { request } from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import { ElMessage } from "element-plus";
import DetailDialog from "./detailDialog.vue";
import EditDialog from "./editDialog.vue";
import AddDialog from "./addDialog.vue";
const treeData = ref([]);
const treeProps = {
@ -29,9 +30,47 @@ const pagination = reactive({
onChange: (page, pageSize) => {
pagination.current = page;
pagination.pageSize = pageSize;
getyhzsbList(filterData);
getyhzsbList(qxmc.value, yhzid.value, filterData);
},
});
}); // 表格分页
const modelVisible = ref(false); // 弹窗显示状态
const model = reactive({
title: '',
content: null,
props: {},
onCancel: null,
onConfirm: null,
}); // 弹窗内容
const dialogType = ref(''); // 弹窗类型
const dialogRef = ref(null); // 弹窗实例
const INIT_FORM = {
rid: "",
qxmc: "",
sbbh: "",
sbdl: "",
sbmc: "",
sblx: "",
sbxh: "",
sbwz: "",
jd: "",
wd: "",
glry: "",
glryid: "",
czy: "",
czyid: "",
gzrq: "",
gmfy: "",
sbzt: "",
sccj: "",
sfyjsb: "",
sfnrsjbz: "",
fsfw: "",
yhzid: "",
}; // 表单初始值
const form = reactive({ ...INIT_FORM }); // 表单
// 节点过滤函数
const filterNode = (value, node) => {
@ -177,16 +216,172 @@ const columns = [
type: "primary",
link: true,
onClick: async () => {
dialogType.value = 'detail'
await getDetailData(row);
dialogVisible.value = true;
},
},
() => "详情"
),
h(
ElButton,
{
type: "primary",
link: true,
onClick: async () => {
dialogType.value = 'edit'
await getDetailData(row);
},
},
() => "编辑"
),
h(
ElButton,
{
type: "danger",
link: true,
onClick: async () => {
try {
await ElMessageBox.confirm("确定要删除该设备吗？", "删除确认", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
});
const res = await request({
url: `/api/yjsb/${row.rid}`,
method: 'DELETE',
});
if (res.code === '00000') {
ElMessage.success('删除成功');
getyhzsbList(qxmc.value, yhzid.value, filterData);
} else {
throw new Error(res.message);
}
} catch (error) {
ElMessage.error(error.message);
console.log(error);
}
},
},
() => "删除"
),
]),
},
]
const handleEdit = async () => {
try {
await dialogRef?.value?.dynamicComponentRef?.formRef.validate();
console.log('form', toRaw(form))
const res = await request({
url: '/api/yjsb',
method: 'PUT',
data: toRaw(form),
});
if (res.code === '00000') {
ElMessage.success('编辑成功');
dialogType.value = '';
modelVisible.value = false;
getyhzsbList(qxmc.value, yhzid.value, filterData);
} else {
throw new Error(res.message);
}
} catch (error) {
ElMessage.error(error.message);
console.log('error', error)
}
};
// 获取养护站设备详情
const getDetailData = async (row) => {
try {
const res = await request({
url: `/api/yjsb/${row.rid}`,
method: 'GET',
});
if (res.code === '00000') {
if (dialogType.value === 'detail') {
model.title = `设备详情`;
model.content = DetailDialog;
model.props = {
detailData: res.data,
};
model.onCancel = () => {
dialogType.value = '';
modelVisible.value = false;
};
model.onConfirm = () => {
dialogType.value = '';
modelVisible.value = false;
};
modelVisible.value = true;
}
if (dialogType.value === 'edit') {
model.title = `编辑设备`;
model.content = EditDialog;
Object.assign(form, res.data);
model.props = {
detailData: res.data,
form: form,
};
model.onCancel = () => {
dialogType.value = '';
modelVisible.value = false;
};
model.onConfirm = async () => {
await handleEdit();
};
modelVisible.value = true;
}
} else {
throw new Error(res.message);
}
} catch (error) {
ElMessage.error(error.message);
console.log(error);
}
};
// 打开新增设备弹窗
const openAddEquipmentModel = () => {
model.title = `新增设备`;
model.content = AddDialog;
Object.assign(form, INIT_FORM);
model.props = {
detailData: {},
form: form,
};
model.onCancel = () => {
dialogType.value = '';
modelVisible.value = false;
};
model.onConfirm = async () => {
try {
console.log('form', toRaw(form))
const res = await request({
url: '/api/yjsb',
method: 'POST',
data: toRaw(form),
});
if (res.code === '00000') {
ElMessage.success('新增成功');
dialogType.value = '';
modelVisible.value = false;
getyhzsbList(qxmc.value, yhzid.value, filterData);
} else {
throw new Error(res.message);
}
} catch (error) {
ElMessage.error(error.message);
console.log('error', error)
}
};
modelVisible.value = true;
}
export default () => {
@ -220,5 +415,9 @@ export default () => {
filterData,
pagination,
columns,
modelVisible,
dialogRef,
model,
openAddEquipmentModel,
}
}

29
packages/screen/src/views/EquipmentManagement/index.vue
View File

@ -39,7 +39,7 @@
v-model="script.filterData.sbzt"
placeholder="请选择"
clearable
style="width: 150px;"
style="width: 150px"
>
<el-option label="完好" value="完好" />
<el-option label="损坏" value="损坏" />
@ -48,10 +48,13 @@
</div>
<div class="form-box">
<div class="event-box">
<el-button type="primary" size="large" @click="openAddEquipmentModel"
<el-button
type="primary"
size="large"
@click="script.openAddEquipmentModel"
>新增设备</el-button
>
<el-button type="info" size="large" @click="handelExport"
<el-button type="info" size="large" @click="script.handelExport"
>导出</el-button
>
</div>
@ -65,14 +68,29 @@
</div>
</div>
</div>
<div class="model-box">
<MyDialog
v-model="script.modelVisible.value"
:title="script.model?.title"
:dynamicComponent="script.model?.content"
:component-props="script.model?.props"
:onConfirm="script.model?.onConfirm"
:onCancel="script.model?.onCancel"
ref="dialogRef"
width="40%"
>
</MyDialog>
</div>
</div>
</template>
<script setup>
import scriptFn from "./index.js";
import DynamicTable from "../../component/DynamicTable";
import MyDialog from "../../component/MyDialog";
const script = scriptFn();
const { treeRef } = script;
const { treeRef, dialogRef } = script;
</script>
<style>
/* * {
@ -148,4 +166,7 @@ const { treeRef } = script;
width: 100%;
height: calc(100% - 60px);
}
.model-box {
position: absolute;
}
</style>