范围列表

src/components/RangeList.vue

@@ -1,21 +1,93 @@
 <script setup lang="ts">
-import { getDeviceAreaList } from 'src/api/ConfigApi';
-import { onMounted } from 'vue';
+import { IAreaConfigListItem, getDeviceAreaList } from 'src/api/ConfigApi';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DraggableDialog from './common/DraggableDialog.vue';
+import { QTable } from 'quasar';
 
 const lineId = useRoute().params.id as string;
-console.log(lineId);
-
-onMounted(async () => {
-  const resp = await getDeviceAreaList({ lineId, current: 1, size: 10 });
-  console.log(resp);
+const tableRef = ref<QTable>();
+const columns: QTable['columns'] = [
+  { name: 'id', label: 'ID', field: 'id', align: 'center' },
+  { name: 'lineId', label: '线路ID', field: 'lineId', align: 'center' },
+  { name: 'areaName', label: '名称', field: 'areaName', align: 'center' },
+  {
+    name: 'deviceType',
+    label: '设备类型',
+    field: 'deviceType',
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+const rows = ref<IAreaConfigListItem[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
 });
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage } = props.pagination;
+  loading.value = true;
+  const resp = await getDeviceAreaList({
+    lineId,
+    current: page,
+    size: rowsPerPage,
+  });
+
+  pagination.value.page = resp.current;
+  pagination.value.rowsNumber = resp.total;
+  pagination.value.rowsPerPage = resp.size;
+
+  rows.value = resp.records;
+  loading.value = false;
+};
+
+const onDialogShow = () => {
+  tableRef.value?.requestServerInteraction();
+};
+
+const dialogRef = ref<InstanceType<typeof DraggableDialog>>();
+const props = defineProps<{
+  onEditClick: (row: IAreaConfigListItem) => void;
+}>();
+function onEdit(row: IAreaConfigListItem) {
+  props.onEditClick(row);
+}
 </script>
 
 <template>
-  <q-card>
-    <q-card-section>
-      <div class="text-h6">范围列表</div>
-    </q-card-section>
-  </q-card>
+  <draggable-dialog
+    ref="dialogRef"
+    @show="onDialogShow"
+    title="范围列表"
+    :width="800"
+  >
+    <q-table
+      ref="tableRef"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :rows="rows"
+      :columns="columns"
+      @request="onRequest"
+      :rows-per-page-options="[10, 20, 50, 100]"
+    >
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn color="primary" label="编辑" @click="onEdit(props.row)" />
+            <!-- <q-btn
+              color="red"
+              label="删除"
+              @click="deleteData(props.row)"
+            /> -->
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+  </draggable-dialog>
 </template>

src/components/common/DraggableDialog.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { QBar, useDialogPluginComponent } from 'quasar';
-import { ref, onMounted, onUnmounted, reactive, withDefaults } from 'vue';
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
 
-const emit = defineEmits([...useDialogPluginComponent.emits]);
+const emit = defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+  show: () => true,
+});
 
 const props = withDefaults(
   defineProps<{
@@ -70,6 +73,7 @@ function onHide() {
     ref="dialogRef"
     @hide="onHide"
     v-bind="$attrs"
+    @show="emit('show')"
     transitionShow="jump-up"
     transitionHide="jump-down"
     class="column"

src/components/rangeConfig.vue

@@ -75,12 +75,16 @@ const props = defineProps({
 const route = useRoute();
 const lineStore = useLineStore();
 const $q = useQuasar();
-const rangeConfig = reactive({
+const rangeConfig = reactive<{
+  areaName: string;
+  deviceType: `${DeviceType}` | '';
+  device: string;
+}>({
   areaName: '',
   deviceType: '',
   device: '',
 });
-const device = ref([] as string[]);
+const device = ref<string[]>([]);
 
 const optionsType = [
   { label: '逻辑区段', value: LogicSection.Type },
@@ -89,8 +93,8 @@ const optionsType = [
   { label: '站台', value: Platform.Type },
 ];
 
-enum deviceType {
-  station = 'DEVICE_TYPE_RTU',
+enum DeviceType {
+  Station = 'DEVICE_TYPE_RTU',
   Turnout = 'DEVICE_TYPE_SWITCH',
   LogicSection = 'DEVICE_TYPE_TRACK',
   Platform = 'DEVICE_TYPE_PLATFORM',
@@ -108,6 +112,7 @@ watch(props, () => {
 watch(
   () => lineStore.selectedGraphics,
   (val) => {
+    console.log(11);
     if (val && val.length > 0) {
       const deviceFilter = lineStore.selectedGraphics?.filter(
         (g) => g.type == rangeConfig.deviceType
@@ -147,7 +152,7 @@ async function onSubmit() {
         await deviceRangeSet({
           lineId: lineId,
           areaName: rangeConfig.areaName,
-          deviceType: (deviceType as never)[rangeConfig.deviceType + ''],
+          deviceType: (DeviceType as never)[rangeConfig.deviceType + ''],
           data: rangeConfig.device,
         });
         $q.notify({

src/layouts/LineLayout.vue

@@ -3,6 +3,9 @@
     <q-header reveal class="bg-primary text-white">
       <q-toolbar>
         <q-toolbar-title> {{ mapName }} </q-toolbar-title>
+        <q-btn class="q-mr-xl" color="primary" @click="openRangeList"
+          >范围列表</q-btn
+        >
         <q-btn color="info" label="返回" @click="backConfirm" />
       </q-toolbar>
       <q-resize-observer @resize="onHeaderResize" />
@@ -26,7 +29,10 @@ import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
 import { loadLineNetDatas, getLineNetApp } from 'src/drawApp/lineNetApp';
 import rangeConfig from 'src/components/rangeConfig.vue';
 import RangeList from 'src/components/RangeList.vue';
+import { useQuasar } from 'quasar';
+import { IAreaConfigListItem } from 'src/api/ConfigApi';
 
+const $q = useQuasar();
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
 const headerHeight = ref(0);
@@ -36,12 +42,7 @@ const mapType = ref(route.params.type as string);
 const lineStore = useLineStore();
 const lineNetStore = useLineNetStore();
 const drawerRight = ref();
-const rangeConfigEdit = reactive({
-  id: '',
-  areaName: '',
-  deviceType: '',
-  device: [] as string[],
-});
+const rangeConfigEdit = ref<IAreaConfigListItem & { device: string[] }>();
 
 const mapName = computed(() => lineStore.lineName || lineNetStore.lineNetName);
 
@@ -92,4 +93,20 @@ onMounted(() => {
     lineStore.setLineId(null);
   }
 });
+
+function openRangeList() {
+  const dialog = $q.dialog({
+    component: RangeList,
+    componentProps: {
+      onEditClick: (row: IAreaConfigListItem) => {
+        // dialog.hide();
+        console.log(row.data);
+        // rangeConfigEdit.value = {
+        //   ...row,
+        //   device: [row.data],
+        // };
+      },
+    },
+  });
+}
 </script>