养护站设备管理页面

packages/screen/src/component/MyDialog/index.vue

@@ -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>

packages/screen/src/views/EquipmentManagement/addDialog.vue

@@ -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>

packages/screen/src/views/EquipmentManagement/detailDialog.vue

@@ -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>

packages/screen/src/views/EquipmentManagement/editDialog.vue

@@ -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>

packages/screen/src/views/EquipmentManagement/index.js

@@ -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 DetailDialog from "./detailDialog.vue";
-import { ElMessage } from "element-plus";
+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,
     }
 }

packages/screen/src/views/EquipmentManagement/index.vue

@@ -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>