🔥 完成

src/components/AMap/src/Amap.vue

@@ -8,7 +8,7 @@
     <div id="mapview" ref="mapview">
       <div id="mapPanel" ref="mapPanel"/>
     </div>
-    <div class="operatePanel">
+    <div v-show="mapProps.sidebarControl" class="operatePanel">
       <div class="operatePanel-arrow" @click="toggleOperatePanel()">
         <span title="展开">‹</span>
         <p title="隐藏">›</p>
@@ -45,7 +45,7 @@
 </template>
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
-  import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
+  import { reactive, watchEffect, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
   import { largeHospitalMapList, smallHospitalMapList, specimenMapList,  columns } from './map.data';
   import hospital from '/@/assets/images/hospital.svg';
   import medicalKit from '/@/assets/images/medical-kit.svg';
@@ -56,6 +56,11 @@
   import { BasicTable, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import TaskModal from './TaskModal.vue';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const mapProps = defineProps({
+    sidebarControl: propTypes.bool.def(true)
+  });
 
   let map;
   let largeHospitalMarkerCluster;
@@ -340,6 +345,11 @@
     }
   }
 
+  /** 监听内部响应式数据 */
+  watchEffect(() => {
+    if (!mapProps.sidebarControl) mapState.toggleOperatePanelClass.siderWidth = 0;
+  });
+
   /** 处理切换操作面板 */
   function toggleOperatePanel() {
     mapState.toggleStatus = !mapState.toggleStatus;

src/components/AMap/src/MapDataSettingsModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <BasicModal v-bind="$attrs"
+              defaultFullscreen
+              @register="registerModal"
+              @ok="handleSubmit"
+  >
+    <ARow>
+      <ACol :span="12">
+        <AMap :sidebarControl="false"/>
+      </ACol>
+      <ACol :span="12">
+        <BasicTable @register="registerTable"/>
+      </ACol>
+    </ARow>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Form, Select, Row, Col } from 'ant-design-vue';
+  import { AMap } from '/@/components/AMap';
+  import { formMapDataSettingsColumns } from '/@/components/AMap/src/map.data';
+
+  const AForm = Form;
+  const AFormItem = Form.Item;
+  const ASelect = Select;
+  const ARow = Row;
+  const ACol = Col;
+
+  const [ registerTable, { reload, getDataSource, setProps }] = useTable({
+    title: '地图标记点数据',
+    columns: formMapDataSettingsColumns,
+    pagination: false,
+    dataSource: [{
+      markId: '001',
+      markName: '标记点1'
+    },{
+      markId: '002',
+      markName: '标记点2'
+    }],
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false
+  });
+
+  const emit = defineEmits(['success', 'register']);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    props.title = '地图标记点数据设置弹出框';
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+
+</script>

src/components/AMap/src/MutualTaskModal.vue

@@ -0,0 +1,105 @@
+<template>
+  <BasicModal v-bind="$attrs"
+              :width="920"
+              @register="registerModal"
+              @ok="handleSubmit"
+  >
+
+    <AForm :labelCol="{ style: { width: '80px' } }"
+           :wrapperCol="{ style: { width: '100%', 'margin-right': '10px' } }"
+           :model="mutualState.modelRef"
+    >
+      <AFormItem label="收样员">
+        <ASelect v-model:value="mutualState.modelRef.smallHospitalId"
+                 :options="[
+                   { value: '001', label: '收样员:小狗' },
+                   { value: '002', label: '收样员:小明' },
+                   { value: '003', label: '收样员:小红' }
+                 ]"
+        />
+      </AFormItem>
+    </AForm>
+    <BasicTable @register="registerTable"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable, EditRecordRow, BasicColumn, ActionItem, TableAction } from '/@/components/Table';
+  import { formTaskColumns, formMutualTaskColumns, largeHospitalMapList, smallHospitalMapList, formMutualTaskSettingColumns } from './map.data';
+  import { Form, Select } from 'ant-design-vue';
+
+  const AForm = Form;
+  const AFormItem = Form.Item;
+  const ASelect = Select;
+
+  /** 类型规范统一声明定义区域 */
+  interface WindowState {
+    currentEditKeyRef: string;
+    formData: Recordable;
+    modelRef: Recordable;
+  }
+
+  /** 通用变量统一声明区域 */
+  const mutualState = reactive<WindowState>({
+    currentEditKeyRef: '',
+    formData: {},
+    modelRef: {
+      smallHospitalId: ''
+    }
+  });
+  const emit = defineEmits(['success', 'register']);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    props.title = '交接任务弹出框';
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+  const [registerTable, { reload, getDataSource }] = useTable({
+    title: '交接任务表格',
+    columns: formMutualTaskSettingColumns,
+    pagination: {
+      pageSize: 3,
+      showSizeChanger: false
+    },
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    }
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    console.log(getDataSource());
+    /*try {
+      // 提取验证数据
+      const formData = await formElRef.value.validate();
+      console.log(formData);
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (state.tag) {
+        case 'add':
+          //await addConfig(formData);
+          break;
+        case 'edit':
+          //await editConfig(formData);
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }*/
+  }
+
+</script>

src/components/AMap/src/TaskModal.vue

@@ -6,6 +6,9 @@
   >
     <BasicTable @register="registerTable">
       <template #toolbar>
+        <a-button type="primary"
+                  @click="handleMapDataSettings()"
+        >调整地图标记点数据</a-button>
         <a-button type="primary"
                   @click="handleTaskAdd()"
         >新增任务</a-button>
@@ -25,21 +28,25 @@
           {
             label: '设置为交接任务',
             icon: 'fa6-regular:pen-to-square',
-            onClick: handlePathPreview.bind(null, record)
+            onClick: handleMutualTask.bind(null, record)
           }]"
         />
         <TableAction :actions="createMutualActions(record, column)"/>
       </template>
     </BasicTable>
+    <MutualTaskModal @register="mutualRegisterModal" @success="handleRefreshTable"/>
+    <MapDataSettingsModal @register="mapDataRegisterModal"/>
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { reactive } from 'vue';
-  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import {BasicModal, ModalProps, useModal, useModalInner} from '/@/components/Modal';
   import { BasicTable, useTable, EditRecordRow, BasicColumn, ActionItem, TableAction } from '/@/components/Table';
   import { formTaskColumns, formMutualTaskColumns, largeHospitalMapList, smallHospitalMapList, } from './map.data';
   import { buildUUID } from '/@/utils/uuid';
   import { add, divide } from 'lodash-es';
+  import MutualTaskModal from './MutualTaskModal.vue';
+  import MapDataSettingsModal from './MapDataSettingsModal.vue';
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {
@@ -67,6 +74,8 @@
     // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
+  const [mutualRegisterModal, { openModal }] = useModal();
+  const [mapDataRegisterModal, { openModal: mapDataOpenModal }] = useModal();
   const [registerTable, { reload, getDataSource }] = useTable({
     title: '任务设置',
     columns: formTaskColumns,
@@ -194,7 +203,6 @@
     }
   }
 
-
   function handleMutualEdit(record: EditRecordRow) {
     mutualState.currentEditKeyRef = record.key;
     record.onEdit?.(true);
@@ -213,7 +221,6 @@
     }
   }
 
-
   /** 智能计算方案 */
   function computeScheme() {
     const scheme = [];
@@ -294,6 +301,15 @@
     return ans;
   }
 
+  /** 处理打开交接任务 */
+  function handleMutualTask() {
+    openModal(true, { driving });
+  }
+
+  /** 处理打开地图数据设置 */
+  function handleMapDataSettings() {
+    mapDataOpenModal(true, { driving });
+  }
 
   /** 处理路线预览 */
   function handlePathPreview() {

src/components/AMap/src/map.data.ts

@@ -168,3 +168,77 @@ export const formMutualTaskColumns: BasicColumn[] = [
     }
   }
 ];
+
+export const formMutualTaskSettingColumns: BasicColumn[] = [
+  {
+    title: '收样员',
+    dataIndex: 'userId'
+  },
+  {
+    title: '预设点1',
+    dataIndex: 'smallHospitalId',
+    editRow: true,
+    editRule: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        {
+          label: 'Option1',
+          value: '1'
+        },
+        {
+          label: 'Option2',
+          value: '2'
+        },
+        {
+          label: 'Option3',
+          value: '3'
+        }
+      ]
+    }
+  },
+  {
+    title: '预设点2',
+    dataIndex: 'largeHospitalId',
+    editRow: true,
+    editRule: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      'options': [
+        {
+          'label': 'Option1',
+          'value': '1'
+        },
+        {
+          'label': 'Option2',
+          'value': '2'
+        },
+        {
+          'label': 'Option3',
+          'value': '3'
+        }
+      ]
+    }
+  },
+  {
+    title: '要求时间',
+    dataIndex: 'timeRequired',
+    editRow: true,
+    editComponent: 'DatePicker',
+    editComponentProps: {
+      valueFormat: 'YYYY-MM-DD',
+      format: 'YYYY-MM-DD',
+    }
+  }
+];
+
+export const formMapDataSettingsColumns: BasicColumn[] = [
+  {
+    title: '标记点ID',
+    dataIndex: 'markId'
+  },
+  {
+    title: '标记点名称',
+    dataIndex: 'markName'
+  }
+];