antd引入

src/views/station/device/index.vue

@@ -1,69 +1,41 @@
 <template>
   <PageWrapper dense>
-    <a-row>
-      <a-col :span="4" style="margin-top: 1%">
-        <a-tree
-          :show-icon="true"
-          :tree-data="treeData"
-          v-model:selectedKeys="checkedTree"
-          @select="onSelect"
-          :fieldNames="{
-            children: 'children',
-            title: 'projectName',
-            key: 'projectId',
-            disabled: 'disabled',
-          }"
-        />
-      </a-col>
-      <a-col :span="20">
     <BasicTable @register="registerTable">
       <template #toolbar>
-            <a-button type="primary" @click="handleAdd" v-if="checkedTree[0]">新增</a-button>
-            <!-- <a-button type="primary">导入</a-button>
-            <a-button type="primary">导出</a-button> -->
+        <a-button type="primary" @click="showFaultModal">故障上报</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column && record && column.key === 'action'">
-              <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
-              <a-popconfirm
-                title="确定要删除吗?"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="handleDelete(record.id)"
-              >
-                <a-button type="link">删除</a-button>
-              </a-popconfirm>
+          <a-button type="link" @click="showSendModal(record.id)">派遣</a-button>
+          <a-button type="link" @click="showDrawer(record.id)">详情</a-button>
         </template>
       </template>
     </BasicTable>
-        <addModal ref="addModalRef" @success="reload()"/>
-      </a-col>
-    </a-row>
+    <faultModal ref="faultModalRef" @success="reload()"/>
+    <detailDrawer ref="detailDrawerRef"  />
+    <sendModal  ref="sendModalRef"  @success="reload()"/>
   </PageWrapper>
 </template>
 
 <script setup lang="ts">
   import { PageWrapper } from '@/components/Page';
   import { BasicTable, useTable } from '@/components/Table';
-  import { list, tree,removeByIds } from './api';
+  import { list,getProjectInfo} from './api';
   import { formSchemas, columns } from './data';
-  import addModal from './addModal.vue';
-  import { ref, onMounted } from 'vue';
-
-  defineOptions({ name: 'meterial' });
+  import faultModal from './faultModal.vue';
+  import detailDrawer from './detailDrawer.vue';
+  import sendModal from './sendModal.vue';
+  import { ref,onActivated } from 'vue';
 
   const [registerTable,{reload}] = useTable({
-    rowSelection: {
-      type: 'checkbox',
-    },
-    title: '材料库',
+    title: '工单派遣',
     api: list,
     showIndexColumn: true,
     rowKey: 'id',
     useSearchForm: true,
     formConfig: {
       schemas: formSchemas,
-      name: 'meterial',
+      name: 'orderSend',
       baseColProps: {
         xs: 24,
         sm: 24,
@@ -71,54 +43,46 @@
         lg: 6,
       },
     },
-    beforeFetch(params: any) {
-      if (checkedTree.value.length === 1) {
-        params.projectId = checkedTree.value[0];
-      }
-      return params;
-    },
-    immediate: false,
     columns: columns,
     actionColumn: {
-      width: 300,
+      width: 200,
       title: '操作',
       key: 'action',
       fixed: 'right',
     },
   });
-  //新增编辑弹窗
-  const addModalRef = ref();
-  const handleAdd = () => {
-    addModalRef.value.showModal(1, null, checkedTree.value[0]);
+  //弹窗内容
+  const faultModalRef = ref();
+  const showFaultModal = () => {
+    faultModalRef.value.showModal();
   };
-  const handleEdit = (id: any) => {
-    addModalRef.value.showModal(2, id, checkedTree.value[0]);
+  const sendModalRef = ref()
+  const showSendModal = (id:any) => {
+    sendModalRef.value.showModal(id);
   };
-  const handleDelete = async (id: any) => {
-    await removeByIds([id]);
-    reload();
+  //详情抽屉
+  const detailDrawerRef = ref();
+  const showDrawer = (id: any) => {
+    detailDrawerRef.value.showDrawer(id);
   };
-
-  //tree
-  const checkedTree = ref([]);
-  const treeData = ref([]);
-  const getTree = async () => {
-    const res = await tree();
-    treeData.value = res;
-    treeData.value.forEach((i: any) => {
-      i.disabled = true;
+  const projectOptions = ref([]);
+  const getProjectOptions = async () => {
+    const res = await getProjectInfo();
+    res.forEach((i: any) => {
+      i.value = i.projectName;
+      i.label = i.projectName;
     });
-    console.log(res);
+    projectOptions.value = res;
+    formSchemas[0].componentProps.options = projectOptions.value;
   };
-  const onSelect = (selectedKeys: any, info: any) => {
-    console.log('selected', selectedKeys, info);
-    console.log(checkedTree.value);
-    reload();
+  const getOptions = () => {
+    getProjectOptions();
   };
-  onMounted(() => {
-    getTree();
-  });
-  //抽屉
+  getOptions();
+  onActivated(()=>{
+    reload()
+  })
+  // 前往审批记录页面
 </script>
 
 <style scoped></style>

src/views/station/info/detailDrawer.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <!-- 抽屉组件 -->
+    <a-drawer
+      title="基本信息"
+      placement="right"
+      :closable="true"
+      :open="visible"
+      @close="onClose"
+      width="600px"
+    >
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">所属区域：</span>{{ detail.area }}</div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">站点地址：</span>{{ detail.station }}</div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">站点经度：</span>{{ detail.longitude }}</div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">站点纬度：</span>{{ detail.latitude }}</div>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">运维公司：</span>{{ detail.ioCompany }}</div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">运维人员：</span>{{ detail.ioPerson }}</div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">监理公司：</span>{{ detail.superviseCompany }}</div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <div><span class="titleLabel">状态：</span>{{ detail.status }}</div>
+        </a-col>
+      </a-row>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+  import { reactive, ref } from 'vue';
+  import { getInfo } from './api';
+
+  export default {
+    setup() {
+      //抽屉详情
+      let detail = reactive({
+        area: '',
+        station: '',
+        longitude: '',
+        latitude: '',
+        ioCompany: '',
+        ioPerson: '',
+        superviseCompany: '',
+        status: null,
+      });
+
+      // 打开抽屉的方法
+      const visible = ref(false);
+      const showDrawer = async (id) => {
+         visible.value = true;
+        // const data = await getInfo(id);
+        // for (let i in detail) {
+        //   detail[i] = data[i];
+        // }
+
+        console.log(detail);
+      };
+      // 关闭抽屉的方法
+      const onClose = () => {
+        visible.value = false;
+      };
+
+      return {
+        visible,
+        showDrawer,
+        onClose,
+        detail,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  /* 可选样式调整 */
+  .ant-btn {
+    margin: 20px;
+  }
+
+  /* .singerDetail{
+  margin-bottom: 10px;
+} */
+  div {
+    margin-bottom: 10px;
+  }
+
+  .timeText {
+    margin: 0 0 40px 20px;
+    color: red;
+  }
+
+  .titleLabel {
+    color: gray;
+  }
+</style>

src/views/station/info/index.vue

@@ -1,69 +1,41 @@
 <template>
   <PageWrapper dense>
-    <a-row>
-      <a-col :span="4" style="margin-top: 1%">
-        <a-tree
-          :show-icon="true"
-          :tree-data="treeData"
-          v-model:selectedKeys="checkedTree"
-          @select="onSelect"
-          :fieldNames="{
-            children: 'children',
-            title: 'projectName',
-            key: 'projectId',
-            disabled: 'disabled',
-          }"
-        />
-      </a-col>
-      <a-col :span="20">
     <BasicTable @register="registerTable">
       <template #toolbar>
-            <a-button type="primary" @click="handleAdd" v-if="checkedTree[0]">新增</a-button>
         <!-- <a-button type="primary">导入</a-button>
             <a-button type="primary">导出</a-button> -->
+            <a-button type="link" @click="showDrawer(1)">基本信息</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column && record && column.key === 'action'">
-              <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
-              <a-popconfirm
-                title="确定要删除吗?"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="handleDelete(record.id)"
-              >
-                <a-button type="link">删除</a-button>
-              </a-popconfirm>
+          <a-button type="link" @click="showDrawer(record.id)">基本信息</a-button>
+          <a-button type="link" @click="handleCheck(record.id)">核查情况</a-button>
         </template>
       </template>
     </BasicTable>
-        <addModal ref="addModalRef" @success="reload()"/>
-      </a-col>
-    </a-row>
+    <detailDrawer ref="detailDrawerRef" />
   </PageWrapper>
 </template>
 
 <script setup lang="ts">
   import { PageWrapper } from '@/components/Page';
   import { BasicTable, useTable } from '@/components/Table';
-  import { list, tree,removeByIds } from './api';
+  import { list, removeByIds } from './api';
   import { formSchemas, columns } from './data';
-  import addModal from './addModal.vue';
-  import { ref, onMounted } from 'vue';
-
-  defineOptions({ name: 'meterial' });
+  import detailDrawer from './detailDrawer.vue';
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  defineOptions({ name: 'info' });
 
   const [registerTable, { reload }] = useTable({
-    rowSelection: {
-      type: 'checkbox',
-    },
-    title: '材料库',
+    title: '子站信息管理',
     api: list,
     showIndexColumn: true,
     rowKey: 'id',
     useSearchForm: true,
     formConfig: {
       schemas: formSchemas,
-      name: 'meterial',
+      name: 'info',
       baseColProps: {
         xs: 24,
         sm: 24,
@@ -71,13 +43,7 @@
         lg: 6,
       },
     },
-    beforeFetch(params: any) {
-      if (checkedTree.value.length === 1) {
-        params.projectId = checkedTree.value[0];
-      }
-      return params;
-    },
-    immediate: false,
+    immediate: true,
     columns: columns,
     actionColumn: {
       width: 300,
@@ -87,38 +53,16 @@
     },
   });
   //新增编辑弹窗
-  const addModalRef = ref();
-  const handleAdd = () => {
-    addModalRef.value.showModal(1, null, checkedTree.value[0]);
+  //
+  //详情，跳转
+  const detailDrawerRef = ref();
+  const showDrawer = (id: any) => {
+    detailDrawerRef.value.showDrawer(id);
   };
-  const handleEdit = (id: any) => {
-    addModalRef.value.showModal(2, id, checkedTree.value[0]);
+  const { push } = useRouter();
+  const handleCheck = (id: any) => {
+    push({ name: 'device',query:{stationID:id} });
   };
-  const handleDelete = async (id: any) => {
-    await removeByIds([id]);
-    reload();
-  };
-
-  //tree
-  const checkedTree = ref([]);
-  const treeData = ref([]);
-  const getTree = async () => {
-    const res = await tree();
-    treeData.value = res;
-    treeData.value.forEach((i: any) => {
-      i.disabled = true;
-    });
-    console.log(res);
-  };
-  const onSelect = (selectedKeys: any, info: any) => {
-    console.log('selected', selectedKeys, info);
-    console.log(checkedTree.value);
-    reload();
-  };
-  onMounted(() => {
-    getTree();
-  });
-  //抽屉
 </script>
 
 <style scoped></style>