渝路智管PC端 养护站页面

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

@@ -376,6 +376,10 @@ const getDetailData = async (row) => {
 
 // 打开新增设备弹窗
 const openAddEquipmentModel = () => {
+    if (!selectedYHZData.value) {
+        ElMessage.error('请先选择养护站');
+        return;
+    }
     model.title = `新增设备`;
     model.content = AddDialog;
     const extraData = {

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

@@ -50,7 +50,6 @@
       <div class="form-box">
         <div class="event-box">
           <el-button
-            v-if="selectedYHZData"
             type="primary"
             size="large"
             @click="script.openAddEquipmentModel"

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

@@ -8,7 +8,7 @@
               detailData.material?.wzmc
             }}</el-descriptions-item>
             <el-descriptions-item label="余量: ">{{
-              detailData.material?.ye + ' ' + detailData.material?.dw
+              detailData.material?.ye + " " + detailData.material?.dw
             }}</el-descriptions-item>
             <el-descriptions-item label="所属服务站: ">{{
               detailData.material?.yhzMc
@@ -20,6 +20,7 @@
         </el-col>
         <el-col :span="12" style="position: relative">
           <el-image
+            v-if="detailData.photos?.length > 0"
             style="
               max-width: 180px;
               max-height: 180px;
@@ -34,6 +35,9 @@
             show-progresss
             fit="cover"
           />
+          <div v-else class="no-photo">
+            <span>暂无图片</span>
+          </div>
         </el-col>
       </el-row>
     </el-card>
@@ -81,4 +85,15 @@ const props = defineProps({
   flex-direction: column;
   gap: 30px;
 }
+.no-photo {
+  width: 180px;
+  height: 180px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  font-size: 14px;
+  background-color: #f5f5f5;
+}
 </style>

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

@@ -376,6 +376,10 @@ const getDetailData = async (row) => {
 
 // 打开新增物资弹窗
 const openAddModel = () => {
+    if(!yhzid.value){
+        ElMessage.error('请先选择养护站');
+        return;
+    }
     model.title = `新增物资`;
     model.content = AddDialog;
     resetForm(); // 重置表单

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

@@ -28,7 +28,7 @@
       </div>
       <div class="form-box">
         <div class="event-box">
-          <el-button v-if="script.yhzid.value" type="primary" size="large" @click="script.openAddModel"
+          <el-button type="primary" size="large" @click="script.openAddModel"
             >新增物资</el-button
           >
           <el-button type="info" size="large" @click="script.handelExport"

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="detail-container">
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="150px"
+      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
+    >
+      <el-form-item label="所属服务站：">
+        <span>{{ basicData.mc }}</span>
+      </el-form-item>
+      <el-form-item label="物资名称：">
+        <el-input
+          maxlength="20"
+          show-word-limit
+          v-model="form.material.wzmc"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="数量与单位：">
+        <el-row :gutter="20">
+          <el-col :span="16">
+            <el-input
+              v-model="form.material.sl"
+              type="number"
+              placeholder="请输入数量"
+            ></el-input>
+          </el-col>
+          <el-col :span="8">
+            <el-select
+              v-model="form.material.dw"
+              filterable
+              allow-create
+              clearable
+              placeholder="选择单位"
+            >
+              <el-option label="个" value="个"></el-option>
+              <el-option label="包" value="包"></el-option>
+              <el-option label="盒" value="盒"></el-option>
+              <el-option label="桶" value="桶"></el-option>
+              <el-option label="箱" value="箱"></el-option>
+              <el-option label="袋" value="袋"></el-option>
+            </el-select>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item label="设备经度：">
+        <span>{{ form.material.jd }}</span>
+      </el-form-item>
+      <el-form-item label="设备纬度：">
+        <span>{{ form.material.wd }}</span>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+    
+    <script setup>
+import { ref } from "vue";
+const formRef = ref(null);
+defineExpose({ formRef });
+
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  basicData:{
+    type: Object,
+    default: () => ({})
+  }
+  
+});
+</script>
+    
+    <style>
+</style>

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

@@ -6,7 +6,7 @@
       label-width="150px"
       style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
     >
-      <el-form-item label="人员:">
+      <el-form-item label="负责人:">
         <el-select
           v-model="ryxx"
           filterable
@@ -26,26 +26,23 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="岗位:">
+      <el-form-item label="负责人添加经纬度:">
-        <el-input v-model="form.gw" />
+        <el-select v-model="form.sfjwd">
-      </el-form-item>
+          <el-option label="是" value="是"></el-option>
-
+          <el-option label="否" value="否"></el-option>
-      <el-form-item label="养护站:">
-        <el-input disabled v-model="yhzdata.mc" />
-      </el-form-item>
-
-      <el-form-item label="人员角色:">
-        <el-select v-model="form.ryjs" placeholder="请选择人员角色">
-          <el-option label="负责人" value="1"></el-option>
-          <el-option label="普通工作人员" value="2"></el-option>
         </el-select>
       </el-form-item>
+
+      <el-form-item label="站点经纬度:">
+        <el-input v-model="form.jwd" />
+      </el-form-item>
     </el-form>
   </div>
 </template>
     
     <script setup>
 import { ref, onMounted, watch } from "vue";
+import { request } from "@/utils/request";
 const formRef = ref(null);
 defineExpose({ formRef });
 
@@ -54,19 +51,37 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  getUserList: {
-    type: Function,
-    default: () => () => {},
-  },
-  yhzdata: {
-    type: Object,
-    default: () => ({}),
-  },
 });
 
 const ryxx = ref("");
 const loading = ref(false);
 const selectOptions = ref([]);
+
+// 根据用户信息 查询角色列表
+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 remoteMethod = async (query) => {
   if (query === "") {
@@ -74,7 +89,7 @@ const remoteMethod = async (query) => {
     return [];
   }
   loading.value = true;
-  const res = await props.getUserList(query);
+  const res = await getUserList(query);
   if (res) {
     selectOptions.value = res;
   }

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

@@ -1,37 +0,0 @@
-<template>
-  <div class="detail-container">
-    <el-form
-      label-position="right"
-      label-width="150px"
-      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
-    >
-    <el-form-item label="人员名称:">
-        <el-input disabled v-model="detailData.xm" />
-      </el-form-item>
-      <el-form-item label="岗位:">
-        <el-input disabled v-model="detailData.gw" />
-      </el-form-item>
-      <el-form-item label="手机号码:">
-        <el-input disabled v-model="detailData.sjhm" />
-      </el-form-item>
-      <el-form-item label="人员角色:">
-        <el-input disabled :value="detailData.ryjs === 1 ? '管理员' : '普通用户'" />
-      </el-form-item>
-      <el-form-item label="创建时间:">
-        <el-input disabled v-model="detailData.cjsj" />
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  detailData: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-</script>
-
-<style>
-</style>

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

@@ -1,45 +0,0 @@
-<template>
-  <div class="detail-container">
-    <el-form
-      ref="formRef"
-      label-position="right"
-      label-width="150px"
-      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
-    >
-      <el-form-item label="人员名称:">
-        <el-input disabled v-model="form.xm" />
-      </el-form-item>
-      <el-form-item label="岗位:">
-        <el-input v-model="form.gw" />
-      </el-form-item>
-      <el-form-item label="手机号码:">
-        <el-input disabled v-model="form.sjhm" />
-      </el-form-item>
-      <el-form-item label="人员角色:" prop="ryjs">
-        <el-select v-model="form.ryjs" placeholder="请选择角色">
-          <el-option label="负责人" :value="1" />
-          <el-option label="普通工作人员" :value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间:">
-        <el-input disabled v-model="form.cjsj" />
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-  
-  <script setup>
-import { ref } from "vue";
-const formRef = ref(null);
-defineExpose({ formRef });
-
-const props = defineProps({
-  form: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-</script>
-  
-  <style>
-</style>

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

@@ -2,34 +2,83 @@
   <div class="detail-container">
     <el-card shadow="hover">
       <el-descriptions title="基础信息" :column="3">
-        <el-descriptions-item label="服务站名称">{{
+        <el-descriptions-item label="服务站名称:">{{
           basicData.mc
         }}</el-descriptions-item>
-        <el-descriptions-item label="服务站经度">{{
+        <el-descriptions-item label="服务站经度:">{{
           basicData.jd
         }}</el-descriptions-item>
-        <el-descriptions-item label="服务站纬度">{{
+        <el-descriptions-item label="服务站纬度:">{{
           basicData.wd
         }}</el-descriptions-item>
-        <el-descriptions-item label="设备数">{{}}</el-descriptions-item>
+        <el-descriptions-item label="设备数:">{{
-        <el-descriptions-item label="物资数">{{}}</el-descriptions-item>
+          basicData.sbsl
-        <el-descriptions-item label="人员数">{{}}</el-descriptions-item>
+        }}</el-descriptions-item>
-        <el-descriptions-item label="创建日期">{{}}</el-descriptions-item>
+        <el-descriptions-item label="物资数:">{{
+          basicData.wzsl
+        }}</el-descriptions-item>
+        <el-descriptions-item label="人员数:">{{
+          basicData.rysl
+        }}</el-descriptions-item>
+        <el-descriptions-item label="创建日期:">{{
+          basicData.createTime
+        }}</el-descriptions-item>
       </el-descriptions>
     </el-card>
     <el-card shadow="hover">
       <el-descriptions title="配置信息" :column="3"> </el-descriptions>
       <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="人员信息" name="people">人员信息</el-tab-pane>
+        <div class="button-container">
-        <el-tab-pane label="物资信息" name="second">物资信息</el-tab-pane>
+          <el-button type="primary" @click="handleAdd">新增</el-button>
-        <el-tab-pane label="设备信息" name="third">设备信息</el-tab-pane>
+        </div>
+        <el-tab-pane label="人员信息" name="people">
+          <DynamicTable
+            :dataSource="peopleList"
+            :columns="columns()"
+            :autoHeight="true"
+            :pagination="pagination"
+          ></DynamicTable>
+        </el-tab-pane>
+        <el-tab-pane label="物资信息" name="material">
+          <DynamicTable
+            :dataSource="materialList"
+            :columns="columns()"
+            :autoHeight="true"
+            :pagination="pagination"
+          ></DynamicTable>
+        </el-tab-pane>
+        <el-tab-pane label="设备信息" name="equipment">
+          <DynamicTable
+            :dataSource="equipmentList"
+            :columns="columns()"
+            :autoHeight="true"
+            :pagination="pagination"
+          ></DynamicTable>
+        </el-tab-pane>
       </el-tabs>
     </el-card>
+    <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>
 </template>
   
   <script setup>
 import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import DynamicTable from "../../component/DynamicTable";
+import MyDialog from "../../component/MyDialog";
+import { request } from "@/utils/request";
+import { render } from "less";
+import PersonAddDialog from "./component/PersonAddDialog.vue";
+import MaterialAddDialog from "./component/MaterialAddDialog.vue";
 const props = defineProps({
   basicData: {
     type: Object,
@@ -37,9 +86,349 @@ const props = defineProps({
   },
 });
 
+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;
+    if (activeTab.value === "people") {
+      getPeopleList();
+    }
+  },
+}); // 表格分页
+
+const columns = () => {
+  switch (activeTab.value) {
+    case "people":
+      return [
+        {
+          width: "100px",
+          label: "序号",
+          render: (...args) => {
+            return () => {
+              const actualIndex =
+                (pagination.current - 1) * pagination.pageSize + args[2] + 1;
+              return h("div", {}, actualIndex);
+            };
+          },
+        },
+        {
+          prop: "xm",
+          label: "姓名",
+        },
+        {
+          prop: "sjhm",
+          label: "手机号",
+        },
+        {
+          label: "人员角色",
+          render: (row) => () => {
+            const role = Number(row.ryjs);
+            const config = {
+              1: { type: "danger", text: "负责人" },
+              2: { type: "success", text: "普通工作人员" },
+            }[role] || { type: "info", text: "未知角色" };
+
+            return h(
+              ElTag,
+              {
+                type: config.type,
+                style: { margin: "2px" },
+              },
+              () => config.text
+            );
+          },
+        },
+      ];
+    case "material":
+      return [
+        {
+          width: "100px",
+          label: "序号",
+          render: (...args) => {
+            return () => {
+              const actualIndex =
+                (pagination.current - 1) * pagination.pageSize + args[2] + 1;
+              return h("div", {}, actualIndex);
+            };
+          },
+        },
+        {
+          prop: "wzmc",
+          label: "物资名称",
+        },
+        {
+          prop: "ye",
+          label: "余量",
+          render: (row) => () => {
+            return h("span", {}, row.ye + " " + row.dw);
+          },
+        },
+        {
+          prop: "fzr",
+          label: "负责人",
+        },
+        {
+          prop: "rkrq",
+          label: "入库日期",
+          render: (row) => () => {
+            return h("span", row.rkrq?.substring(0, 10));
+          },
+        },
+      ];
+    case "equipment":
+      return [
+        {
+          width: "100px",
+          label: "序号",
+          render: (...args) => {
+            return () => {
+              const actualIndex =
+                (pagination.current - 1) * pagination.pageSize + args[2] + 1;
+              return h("div", {}, actualIndex);
+            };
+          },
+        },
+        {
+          prop: "sbmc",
+          label: "设备名称",
+        },
+        {
+          prop: "sbxh",
+          label: "设备型号",
+        },
+        {
+          prop: "sbbh",
+          label: "设备编号",
+        },
+        {
+          prop: "sbdl",
+          label: "设备大类",
+        },
+        {
+          prop: "sblx",
+          label: "设备类型",
+        },
+        {
+          prop: "gzrq",
+          label: "购置日期",
+          render: (row) => () => {
+            return h("span", row.gzrq?.substring(0, 10));
+          },
+        },
+      ];
+  }
+};
+
+onMounted(() => {
+  getPeopleList();
+});
+
+const peopleList = ref([]); // 人员列表
+const materialList = ref([]); // 物资列表
+const equipmentList = ref([]); // 设备列表
+
 const activeTab = ref("people");
+
+// 查询养护站人员列表
+const getPeopleList = async () => {
+  try {
+    const data = {
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize,
+      yhzid: Number(props.basicData.id),
+    };
+    const res = await request({
+      url: "/snow-ops-platform/yhzry/list",
+      method: "get",
+      params: data,
+    });
+    if (res.code === "00000") {
+      pagination.total = res.data.total;
+      peopleList.value = res.data.records;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    ElMessage.error(error.message);
+  }
+};
+
+// 查询养护站物资列表
+const getMaterialList = async () => {
+  try {
+    const data = {
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize,
+      yhzid: Number(props.basicData.id),
+    };
+    const res = await request({
+      url: "/snow-ops-platform/yjwz/list",
+      method: "get",
+      params: data,
+    });
+    if (res.code === "00000") {
+      pagination.total = res.data.total;
+      materialList.value = res.data.records;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    ElMessage.error(error.message);
+  }
+};
+
+// 查询养护站设备列表
+const getEquipmentList = async () => {
+  try {
+    const data = {
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize,
+      yhzid: Number(props.basicData.id),
+    };
+    const res = await request({
+      url: "/snow-ops-platform/yjsb/list",
+      method: "get",
+      params: data,
+    });
+    if (res.code === "00000") {
+      pagination.total = res.data.total;
+      equipmentList.value = res.data.records;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    ElMessage.error(error.message);
+  }
+};
+
 const handleClick = (tab, event) => {
-  console.log("tab", tab, "event", event);
+  pagination.current = 1;
+  switch (tab.props.name) {
+    case "people":
+      getPeopleList();
+      break;
+    case "material":
+      getMaterialList();
+      break;
+    case "equipment":
+      getEquipmentList();
+      break;
+  }
+};
+
+// 新增相关
+const peopleForm = reactive({});
+const INIT_FORM_people = {
+  userId: "",
+  ryjs: 1,
+  yhzid: props.basicData.id,
+  sjhm: "",
+  xm: "",
+  sfjwd: "",
+  jwd: "",
+};
+const materialForm = reactive({});
+const INIT_FORM_material = {
+  material: {
+    rkrq: "",
+    rkdw: "",
+    sl: "",
+    dw: "",
+    cfdd: "",
+    fzr: "",
+    lxdh: "",
+    ye: "",
+    qxmc: "",
+    wzmc: "",
+    fzrid: "",
+    yhzid: "",
+    jd: "",
+    wd: "",
+  },
+  photos: [],
+};
+const equipmentForm = reactive({});
+const modelVisible = ref(false);
+const model = reactive({
+  title: "",
+  content: null,
+  props: {},
+  onConfirm: () => {},
+  onCancel: () => {},
+  width: "30%",
+});
+const handleAdd = () => {
+  switch (activeTab.value) {
+    case "people":
+      model.title = "新增人员";
+      model.content = PersonAddDialog;
+      peopleForm.value = { ...INIT_FORM_people };
+      model.props = {
+        form: peopleForm.value,
+      };
+      model.onConfirm = handleAddPeopleConfirm;
+      model.onCancel = handleCancel;
+      model.width = "30%";
+      modelVisible.value = true;
+      break;
+    case "material":
+      model.title = "新增物资";
+      model.content = MaterialAddDialog;
+      // 重置表单
+      materialForm.material = { ...INIT_FORM_material.material };
+      materialForm.photos = [...INIT_FORM_material.photos];
+      materialForm.material.yhzid = props.basicData.id;
+      materialForm.material.jd = props.basicData.jd;
+      materialForm.material.wd = props.basicData.wd;
+      model.props = {
+        form: materialForm,
+        basicData: props.basicData,
+      };
+      model.onConfirm = handleAddMaterialConfirm;
+      model.onCancel = handleCancel;
+      model.width = "40%";
+      modelVisible.value = true;
+      break;
+  }
+};
+
+// 新增负责人
+const handleAddPeopleConfirm = async () => {
+  try {
+    const res = await request({
+      url: "/snow-ops-platform/yhzry/add",
+      method: "post",
+      data: toRaw(peopleForm.value),
+    });
+    if (res.code === "00000") {
+      ElMessage.success("新增成功");
+      modelVisible.value = false;
+      getPeopleList();
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    ElMessage.error(error.message);
+  }
+};
+
+// 新增物资
+const handleAddMaterialConfirm = async () => {
+  console.log('materialForm',toRaw(materialForm));
+};
+
+// 取消
+const handleCancel = () => {
+  modelVisible.value = false;
 };
 </script>
   
@@ -49,4 +438,10 @@ const handleClick = (tab, event) => {
   flex-direction: column;
   gap: 30px;
 }
+.button-container {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 0px 10px 0px;
+}
 </style>

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

@@ -181,18 +181,6 @@ export default () => {
                         },
                         () => "详情"
                     ),
-                    h(
-                        ElButton,
-                        {
-                            type: "success",
-                            link: true,
-                            style: "margin-left: 10px;",
-                            onClick: async () => {
-
-                            },
-                        },
-                        () => "编辑"
-                    ),
                     h(
                         ElButton,
                         {