养护站详情 配置信息三个新增完善

packages/screen/src/views/ServiceStationManagePage/component/EquipmentAddDialog.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div class="area-title-block">
+      所属服务站: <span class="title-text">{{ stationName }}</span>
+    </div>
+    <el-form :model="form" class="equipment-form">
+      <!-- 第一行：设备名称、设备大类、设备类型 -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="设备名称" prop="sbmc">
+            <el-input v-model="form.sbmc" maxlength="20" placeholder="请输入设备名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="设备大类" prop="sbdl">
+            <InputSelect v-model="form.sbdl" placeholder="请选择" :options="options['sbdl']" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="设备类型" prop="sblx">
+            <InputSelect v-model="form.sblx" placeholder="请选择" :options="options['sblx']" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行：设备型号、设备经度（只读）、设备纬度（只读） -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="设备型号" prop="sbxh">
+            <el-input v-model="form.sbxh" placeholder="请输入设备型号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="设备经度" prop="jd">
+            <el-input v-model="form.jd" placeholder="自动填充服务站经纬度" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="设备纬度" prop="wd">
+            <el-input v-model="form.wd" placeholder="自动填充服务站经纬度" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第三行：购置日期、购买费用（万元）、应急设备 -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="购置日期" prop="gzrq">
+            <el-date-picker v-model="form.gzrq" type="date" placeholder="请选择购置日期" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="购买费用（万元）" prop="gmfy">
+            <el-input-number v-model="form.gmfy" :min="0"  controls-position="right" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="应急设备" prop="sfyjsb">
+            <el-select v-model="form.sfyjsb" placeholder="请选择">
+              <el-option label="是" value="是" />
+              <el-option label="否" value="否" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第四行：辐射范围、生产商、纳入市级补助范围 -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="辐射范围" prop="fsfw">
+            <el-input v-model="form.fsfw" placeholder="请输入辐射范围" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="生产商" prop="sccj">
+            <el-input v-model="form.sccj" placeholder="请输入生产商" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="纳入市级补助范围" prop="sfnrsjbz">
+            <el-select v-model="form.sfnrsjbz" placeholder="请选择">
+              <el-option label="是" value="是" />
+              <el-option label="否" value="否" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import InputSelect from "@/component/InputSelect/InputSelect.vue";
+
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 养护站数据
+  basicData: {
+    type: [Object, null],
+    default: null,
+  }
+});
+
+
+const options = ref({
+  'sbdl': [
+    { label: "示例大类1", value: "示例大类1" },
+    { label: "示例大类2", value: "示例大类2" },
+  ],
+  "sblx": [
+    { label: "示例类型1", value: "示例类型1" },
+    { label: "示例类型2", value: "示例类型2" },
+  ]
+})
+
+const stationName = computed(() => {
+  return props.basicData ? props.basicData.mc : ''
+})
+</script>
+
+<style scoped lang="scss">
+.area-title-block {
+  margin-bottom: 20px;
+
+  .title-text {
+    color: rgb(10, 124, 255);
+    font-size: 16px;
+  }
+}
+
+:deep(.equipment-form) {
+  .el-form-item {
+    margin-bottom: 30px;
+  }
+}
+</style>

packages/screen/src/views/ServiceStationManagePage/detailDrawer.vue

@@ -79,6 +79,7 @@ import { request } from "@/utils/request";
 import { render } from "less";
 import PersonAddDialog from "./component/PersonAddDialog.vue";
 import MaterialAddDialog from "./component/MaterialAddDialog.vue";
+import EquipmentAddDialog from "./component/EquipmentAddDialog.vue";
 const props = defineProps({
   basicData: {
     type: Object,
@@ -356,6 +357,30 @@ const INIT_FORM_material = {
   photos: [],
 };
 const equipmentForm = reactive({});
+const INIT_FORM_equipment = {
+  rid: "",
+  qxmc: "",
+  sbbh: "",
+  sbdl: "",
+  sbmc: "",
+  sblx: "",
+  sbxh: "",
+  sbwz: "",
+  jd: props.basicData.jd,
+  wd: props.basicData.wd,
+  glry: "",
+  glryid: "",
+  czy: "",
+  czyid: "",
+  gzrq: "",
+  gmfy: "",
+  sbzt: "",
+  sccj: "",
+  sfyjsb: "",
+  sfnrsjbz: "",
+  fsfw: "",
+  yhzid: props.basicData.id,
+};
 const modelVisible = ref(false);
 const model = reactive({
   title: "",
@@ -397,6 +422,21 @@ const handleAdd = () => {
       model.width = "40%";
       modelVisible.value = true;
       break;
+    case "equipment":
+      console.log("basicData", toRaw(props.basicData));
+      model.title = "新增设备";
+      model.content = EquipmentAddDialog;
+      // 重置表单
+      equipmentForm.value = { ...INIT_FORM_equipment };
+      model.props = {
+        form: equipmentForm,
+        basicData: props.basicData,
+      };
+      model.onConfirm = handleAddEquipmentConfirm;
+      model.onCancel = handleCancel;
+      model.width = "60%";
+      modelVisible.value = true;
+      break;
   }
 };
 
@@ -423,7 +463,46 @@ const handleAddPeopleConfirm = async () => {
 
 // 新增物资
 const handleAddMaterialConfirm = async () => {
-  console.log('materialForm',toRaw(materialForm));
+  try {
+    const res = await request({
+      url: "/snow-ops-platform/yjwz/add",
+      method: "post",
+      data: toRaw(materialForm),
+    });
+    if (res.code === "00000") {
+      ElMessage.success("新增成功");
+      modelVisible.value = false;
+      getMaterialList();
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    ElMessage.error(error.message);
+  }
+};
+
+// 新增设备
+const handleAddEquipmentConfirm = async () => {
+  try {
+    const res = await request({
+      url: "/snow-ops-platform/yjsb/add",
+      method: "post",
+      data: {
+        equipment: toRaw(equipmentForm),
+      },
+    });
+    if (res.code === "00000") {
+      ElMessage.success("新增成功");
+      modelVisible.value = false;
+      getEquipmentList();
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    ElMessage.error(error.message);
+  }
 };
 
 // 取消

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

@@ -17,6 +17,7 @@ const model = reactive({
     onCancel: null,
     onConfirm: null,
 }); // 弹窗内容
+const form = reactive({});
 const drawer = reactive({
     title: '',
     content: null,
@@ -31,6 +32,7 @@ const dialogRef = ref(null); // 弹窗实例
 const drawerType = ref(''); // 抽屉类型
 const drawerRef = ref(null); // 抽屉实例
 
+
 // 站点类型选项
 const zdlxOptions = [
     { label: "服务设施", value: "服务设施" },
@@ -108,6 +110,12 @@ const getYhzDetail = async (row) => {
 
     }
 };
+
+// 打开新增养护站弹窗
+const openAddDialog = () => {
+
+    console.log('新增',)
+};
 export default () => {
 
     const router = useRouter();
@@ -248,7 +256,7 @@ export default () => {
         drawer,
         dialogRef,
         drawerRef,
-
+        openAddDialog,
 
     }
 }

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

@@ -19,7 +19,7 @@
       />
     </div>
     <div class="event-box">
-      <el-button type="primary" size="large" @click="openAddDialog"
+      <el-button type="primary" size="large" @click="script.openAddDialog"
         >新增</el-button
       >
     </div>

packages/screen/src/views/ServiceStationManagePage/personData.vue

@@ -1,462 +0,0 @@
-<template>
-  <div class="root">
-    <div class="event-box">
-      <div class="inline-flex">
-        <label>人员姓名:</label>
-        <el-input v-model="filterData.xm"></el-input>
-      </div>
-      <div class="inline-flex">
-        <el-button type="primary" size="large" @click="openAddModel"
-          >新增人员</el-button
-        >
-      </div>
-    </div>
-    <div class="form-box">
-      <div class="form-content">
-        <DynamicTable
-          :dataSource="yhzryList"
-          :columns="columns"
-          :autoHeight="true"
-          :pagination="pagination"
-        ></DynamicTable>
-      </div>
-    </div>
-
-    <div class="model-box">
-      <MyDialog
-        v-model="modelVisible"
-        :title="model?.title"
-        :dynamicComponent="model?.content"
-        :component-props="model?.props"
-        :onConfirm="model?.onConfirm"
-        :onCancel="model?.onCancel"
-        ref="dialogRef"
-        :width="model?.width"
-      >
-      </MyDialog>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
-import DynamicTable from "../../component/DynamicTable";
-import { request } from "@/utils/request";
-import MyDialog from "../../component/MyDialog";
-import AddDialog from "./component/addDialog.vue";
-import EditDialog from "./component/editDialog.vue";
-import DetailDialog from "./component/detailDialog.vue";
-
-const props = defineProps({
-  yhzData: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-// 养护站ID
-const yhzId = ref(props.yhzData.id);
-// 表格过滤条件
-const filterData = reactive({
-  xm: "", // 姓名
-});
-const pagination = reactive({
-  current: 1,
-  pageSize: 10,
-  total: 0,
-  pageSizes: [10, 20, 50],
-  layout: "prev, pager, next, jumper",
-  onChange: (page, pageSize) => {
-    pagination.current = page;
-    pagination.pageSize = pageSize;
-    getyhzryList(filterData);
-  },
-}); // 表格分页
-
-// 养护站人员列表
-const yhzryList = ref([]);
-
-// 获取养护站人员详情
-const getDetailData = async (row) => {
-  try {
-    const res = await request({
-      url: `/snow-ops-platform/yhzry/getById?id=${row.id}`,
-      method: "GET",
-    });
-    if (!res || res.code !== "00000") {
-      throw new Error("获取人员详情失败");
-    }
-    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;
-        };
-        model.width = "30%";
-        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();
-        };
-        model.width = "30%";
-        modelVisible.value = true;
-      }
-    } 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: "/snow-ops-platform/yhzry/update",
-      method: "POST",
-      data: toRaw(form),
-    });
-    if (res.code === "00000") {
-      ElMessage.success("编辑成功");
-      dialogType.value = "";
-      modelVisible.value = false;
-      getyhzryList(filterData);
-    } else {
-      throw new Error(res.message);
-    }
-  } catch (error) {
-    ElMessage.error(error.message);
-    console.log("error", error);
-  }
-};
-
-const columns = [
-  {
-    prop: "xm",
-    label: "姓名",
-    width: 100,
-  },
-  {
-    prop: "gw",
-    label: "岗位",
-    width: 100,
-  },
-  {
-    prop: "sjhm",
-    label: "手机号码",
-  },
-  {
-    prop: "cjsj",
-    label: "创建时间",
-    render: (row) => () => {
-      // 解析 ISO 时间字符串
-      const date = new Date(row.cjsj);
-
-      // 格式化为 YYYY-MM-DD HH:mm:ss
-      const format = (n) => n.toString().padStart(2, "0");
-      return h(
-        "div",
-        `${date.getFullYear()}-${format(date.getMonth() + 1)}-${format(
-          date.getDate()
-        )} 
-                 ${format(date.getHours())}:${format(
-          date.getMinutes()
-        )}:${format(date.getSeconds())}`
-      );
-    },
-  },
-  {
-    prop: "ryjs",
-    label: "人员角色",
-    width: 150,
-    render: (row) => () => {
-      const roleConfig = {
-        1: { label: "负责人", color: "#f56c6c" },
-        2: { label: "普通工作人员", color: "#409eff" },
-      };
-
-      const config = roleConfig[row.ryjs] || {
-        label: "未知角色",
-        color: "#909399",
-      };
-
-      return h(
-        ElTag,
-        {
-          style: { "margin-right": "5px" },
-          effect: "dark",
-          type: row.ryjs === 1 ? "danger" : "primary",
-        },
-        () => config.label
-      );
-    },
-  },
-
-  {
-    label: "操作",
-    fixed: "right",
-    width: 150,
-    render: (row) => () =>
-      h("div", { class: "action-btns" }, [
-        h(
-          ElButton,
-          {
-            type: "primary",
-            link: true,
-            onClick: async () => {
-              dialogType.value = "detail";
-              await getDetailData(row);
-            },
-          },
-          () => "详情"
-        ),
-        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: `/snow-ops-platform/yhzry/delete`,
-                  method: "POST",
-                  data: {
-                    id: row.id,
-                  },
-                });
-                if (res.code === "00000") {
-                  ElMessage.success("删除成功");
-                  getyhzryList(filterData);
-                } else {
-                  throw new Error(res.message);
-                }
-              } catch (error) {
-                ElMessage.error(error.message);
-                console.log(error);
-              }
-            },
-          },
-          () => "删除"
-        ),
-      ]),
-  },
-];
-
-// 获取养护站人员列表
-const getyhzryList = async (filterData) => {
-  try {
-    const data = {
-      yhzid: yhzId.value,
-      xm: filterData?.xm || "",
-      pageNum: pagination.current,
-      pageSize: pagination.pageSize,
-    };
-    const res = await request({
-      url: "/snow-ops-platform/yhzry/list",
-      method: "GET",
-      params: data,
-    });
-    if (res.code === "00000") {
-      yhzryList.value = res.data.records;
-      pagination.total = res.data.total;
-    } else {
-      throw new Error(res.msg);
-    }
-  } catch (error) {
-    ElMessage.error(error.message);
-    console.log(error);
-  }
-};
-
-// 分页查询养护站
-onMounted(async () => {
-  await getyhzryList();
-});
-
-// 监听过滤条件
-watch(
-  [() => filterData],
-  ([newFilterData]) => {
-    getyhzryList(newFilterData);
-  },
-  { deep: true }
-);
-
-// 弹窗显示状态
-const modelVisible = ref(false);
-const dialogType = ref(""); // 弹窗类型
-const dialogRef = ref(null); // 弹窗实例
-
-// 弹窗
-const model = reactive({
-  title: "",
-  content: null,
-  props: {},
-  onConfirm: () => {},
-  onCancel: () => {},
-  width: "30%",
-});
-
-const INIT_FORM = {
-  xm: "",
-  sjhm: "",
-  gw: "",
-  cjsj: "",
-  yhzid: "",
-  ryjs: null, // 人员角色 1-负责人 2-普通工作人员
-  userId: "",
-}; // 表单初始值
-const form = reactive({ ...INIT_FORM }); // 表单
-
-// 根据用户信息 查询角色列表
-const getUserList = async (key) => {
-  try {
-    const keyword = key;
-    let url = "";
-    if (keyword) {
-      url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
-    } else {
-      url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
-    }
-    const res = await request({
-      url: url,
-      method: "GET",
-    });
-    if (res.code === "00000") {
-      return res.data;
-    } else {
-      throw new Error(res.message);
-    }
-  } catch (error) {
-    ElMessage.error(error.message);
-    console.log(error);
-  }
-};
-
-// 打开新增人员弹窗
-const openAddModel = () => {
-  model.title = `新增人员`;
-  model.content = AddDialog;
-  model.width = "30%";
-  Object.assign(form, INIT_FORM);
-  model.props = {
-    form: form,
-    getUserList: getUserList,
-    yhzdata: props.yhzData,
-  };
-  model.onCancel = () => {
-    dialogType.value = "";
-    modelVisible.value = false;
-  };
-  model.onConfirm = async () => {
-    try {
-      form.cjsj = new Date()
-        .toLocaleString("sv-SE", { hour12: false })
-        .replace("T", " ");
-      console.log("form", toRaw(form));
-      const res = await request({
-        url: "/snow-ops-platform/yhzry/add",
-        method: "POST",
-        data: toRaw(form),
-      });
-      if (res.code === "00000") {
-        ElMessage.success("新增人员成功");
-        dialogType.value = "";
-        modelVisible.value = false;
-        getyhzryList(filterData);
-      } else {
-        throw new Error(res.message);
-      }
-    } catch (error) {
-      ElMessage.error(error.message);
-      console.log("error", error);
-    }
-  };
-  modelVisible.value = true;
-};
-</script>
-
-<style scoped>
-.root {
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  display: flex;
-  gap: 20px;
-  flex-direction: column;
-}
-.inline-flex {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-.inline-flex label {
-  white-space: nowrap; /* 禁止换行 */
-}
-.form-box {
-  width: 100%;
-  height: calc(100% - 60px);
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
-.event-box {
-  width: 100%;
-  height: 60px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 20px;
-  justify-content: space-between;
-}
-.form-content {
-  width: 100%;
-  height: calc(100% - 60px);
-}
-
-.model-box {
-  position: absolute;
-}
-</style>