添加发布管理和线路信息管理

src/api/LineInfoApi.ts

@@ -0,0 +1,80 @@
+import { api } from 'src/boot/axios';
+import { PageDto, PageQueryDto } from './ApiCommon';
+
+const UriBase = '/api/lineInfo';
+
+interface Item {
+  id: number;
+  name: string;
+  lineId: number;
+  config: string;
+  createdAt: string;
+  updateAt: string;
+}
+
+export class PagingQueryParams extends PageQueryDto {
+  name?: string;
+}
+
+/**
+ * 分页查询
+ * @param params
+ * @returns
+ */
+export async function pageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<Item>> {
+  const response = await api.get(`${UriBase}/paging`, {
+    params: params,
+  });
+  return response.data;
+}
+
+/**
+ * 创建线路
+ * @param params
+ * @returns
+ */
+export function createLine(data: {
+  name: string;
+  lineId: number;
+  config: string;
+}) {
+  return api.post(`${UriBase}`, data);
+}
+
+/**
+ * 删除线路
+ * @param id 线路id
+ */
+export function deleteLine(id: number) {
+  return api.delete(`${UriBase}/${id}`);
+}
+
+/**
+ * 保存线路数据
+ * @param id 草稿id
+ */
+export function saveLineData(id: number, data: Item) {
+  return api.put(`${UriBase}/${id}`, data);
+}
+
+/**
+ * 获取线路数据详情
+ * @param params
+ * @returns
+ */
+export async function getLineInfo(id: number): Promise<Item> {
+  const response = await api.get(`${UriBase}/${id}`);
+  return response.data;
+}
+
+/**
+ * 获取线路信息列表
+ * @param params
+ * @returns
+ */
+export async function getLineList(): Promise<Item> {
+  const response = await api.get(`${UriBase}/list`);
+  return response.data;
+}

src/components/SysMenu.vue

@@ -64,6 +64,16 @@ const list = reactive([
         label: '草稿管理',
         icon: 'app_registration',
       },
+      {
+        path: '/dataManage/publish',
+        label: '发布管理',
+        icon: 'app_registration',
+      },
+      {
+        path: '/dataManage/lineInfo',
+        label: '线路信息管理',
+        icon: 'app_registration',
+      },
     ],
   },
 ]);

src/configs/UrlManage.ts

@@ -1,5 +1,6 @@
 function getHost(): string {
-  return '192.168.3.7:9081';
+  // return '192.168.3.7:9081';
+  return '192.168.3.233:9081';
 }
 
 export function getHttpBase() {

src/layouts/DrawLayout.vue

@@ -9,7 +9,7 @@
                 <q-item clickable v-close-popup @click="saveAllDrawDatas">
                   <q-item-section>保存并校验</q-item-section>
                 </q-item>
-                <!--   <q-item clickable v-close-popup>
+                <!-- <q-item clickable v-close-popup @click="saveAsDialog = true">
                   <q-item-section>另存为</q-item-section>
                 </q-item> -->
                 <q-item clickable v-close-popup>
@@ -129,6 +129,33 @@
     <q-page-container>
       <div id="draw-app-container"></div>
     </q-page-container>
+
+    <q-dialog
+      v-model="saveAsDialog"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">另存为</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input
+            outlined
+            label="草稿名称"
+            v-model.number="saveAsName"
+            :rules="[(val) => val.trim() != '' || '草稿名称不能为空']"
+          />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn color="primary" label="提交" @click="saveAs(saveAsName)" />
+          <q-btn label="取消" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </q-layout>
 </template>
 
@@ -139,6 +166,8 @@ import { JlDrawApp } from 'src/jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import { saveAsDraft } from 'src/api/DraftApi';
 
 const route = useRoute();
 const router = useRouter();
@@ -250,6 +279,23 @@ function backConfirm() {
   router.go(-1);
 }
 
+const saveAsDialog = ref(false);
+const saveAsName = ref('');
+
+async function saveAs(name: string) {
+  try {
+    const record = await saveAsDraft(+route.params.id as number, { name });
+    console.log('🚀 ~ file: DrawLayout.vue:288 ~ saveAs ~ record:', record);
+    // if (record) {
+    //   router.replace(`/painting/${record.id}`);
+    // }
+    successNotify('另存为成功');
+    saveAsDialog.value = false;
+  } catch (e) {
+    errorNotify('另存为异常', e);
+  }
+}
+
 onUnmounted(() => {
   drawStore.destroy();
 });

src/pages/DraftManage.vue

@@ -34,12 +34,12 @@
               label="编辑"
               :to="`/painting/${props.row.id}`"
             />
-            <!-- <q-btn
+            <q-btn
               color="primary"
               :disable="operateDisabled"
               label="发布"
               @click="prePublish(props.row)"
-            /> -->
+            />
             <q-btn
               color="red"
               :disable="operateDisabled"
@@ -138,6 +138,20 @@ const tableHeight = computed(() => {
   return props.sizeHeight - 32;
 });
 
+const typeOptions = [
+  { label: '线路', value: 'Line' },
+  { label: '线网', value: 'LineNetwork' },
+];
+const createType = ref('Line');
+
+const typeOptionsMap = computed(() => {
+  const obj: { [k: string]: string } = {};
+  typeOptions.forEach((item: { value: string; label: string }) => {
+    obj[item.value] = item.label;
+  });
+  return obj;
+});
+
 onMounted(() => {
   tableRef.value.requestServerInteraction();
 });
@@ -150,7 +164,15 @@ const columnDefs: QTableColumn[] = [
     required: true,
     align: 'center',
   },
-  { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
+  // { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
+  {
+    name: 'type',
+    label: '类型',
+    field: (row) => {
+      return typeOptionsMap.value[row.type];
+    },
+    align: 'center',
+  },
   {
     name: 'createdAt',
     label: '创建时间',
@@ -240,7 +262,7 @@ const publishForm = reactive({
   id: '',
   draftName: '',
   pubName: '',
-  overwrite: true,
+  lineId: '',
 });
 function prePublish(row: any) {
   publishFormShow.value = true;
@@ -252,9 +274,9 @@ function prePublish(row: any) {
 async function publishGraphics() {
   try {
     await publishDraft({
-      layoutId: publishForm.id,
+      draftingId: publishForm.id,
       name: publishForm.pubName,
-      overwrite: publishForm.overwrite,
+      lineId: publishForm.lineId,
     });
     publishFormShow.value = false;
     $q.notify({
@@ -291,9 +313,4 @@ async function deleteData(row: any) {
       operateDisabled.value = false;
     });
 }
-const typeOptions = [
-  { label: '线路', value: 'Line' },
-  { label: '线网', value: 'LineNetwork' },
-];
-const createType = ref('Line');
 </script>

src/pages/LineInfoManage.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="草稿图"
+      :style="{ height: tableHeight + 'px' }"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      :filter="filter"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <q-input
+          dense
+          debounce="1000"
+          v-model="filter.name"
+          label="名称"
+        ></q-input>
+        <q-btn flat round color="primary" icon="search" />
+        <q-btn color="primary" label="新建" @click="createFormShow = true" />
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="编辑"
+              :to="`/painting/${props.row.id}`"
+            />
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="发布"
+              @click="prePublish(props.row)"
+            />
+            <q-btn
+              color="red"
+              :disable="operateDisabled"
+              label="删除"
+              @click="deleteData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog
+      v-model="createFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">新建草稿图</div>
+          <q-form ref="myForm" class="q-gutter-md">
+            <q-input
+              outlined
+              label="名称"
+              v-model="draftName"
+              lazy-rules
+              :rules="[(val) => val.length > 0 || '请输入名称！']"
+            />
+            <q-select
+              v-model="createType"
+              :options="typeOptions"
+              emit-value
+              map-options
+              label="类型"
+            />
+          </q-form>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn color="primary" label="创建" type="submit" @click="onCreate" />
+          <q-btn label="取消" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <q-dialog
+      v-model="publishFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">草稿发布</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input
+            outlined
+            disable
+            label="草稿名称"
+            v-model="publishForm.draftName"
+          />
+          <q-input outlined label="发布名称" v-model="publishForm.pubName" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn color="primary" label="发布" @click="publishGraphics" />
+          <q-btn label="取消" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn, QForm } from 'quasar';
+import {
+  pageQuery,
+  publishDraft,
+  createDraft,
+  deleteDraft,
+} from '../api/DraftApi';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+const typeOptions = [
+  { label: '线路', value: 'Line' },
+  { label: '线网', value: 'LineNetwork' },
+];
+const createType = ref('Line');
+
+const typeOptionsMap = computed(() => {
+  const obj: { [k: string]: string } = {};
+  typeOptions.forEach((item: { value: string; label: string }) => {
+    obj[item.value] = item.label;
+  });
+  return obj;
+});
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'name',
+    label: '名称',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  // { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
+  {
+    name: 'type',
+    label: '类型',
+    field: (row) => {
+      return typeOptionsMap.value[row.type];
+    },
+    align: 'center',
+  },
+  {
+    name: 'createdAt',
+    label: '创建时间',
+    field: 'createdAt',
+    align: 'center',
+  },
+  {
+    name: 'updateAt',
+    label: '更新时间',
+    field: 'updateAt',
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  name: '',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  const filter = props.filter;
+
+  loading.value = true;
+  try {
+    let response = await pageQuery({
+      current: page,
+      size: rowsPerPage,
+      name: filter.name,
+    });
+    const pageData = response;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error.message,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const createFormShow = ref(false);
+const draftName = ref('');
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      operateDisabled.value = true;
+      try {
+        await createDraft({
+          name: draftName.value,
+          type: createType.value,
+        });
+        createFormShow.value = false;
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message,
+        });
+      } finally {
+        operateDisabled.value = false;
+      }
+    }
+  });
+}
+
+const publishFormShow = ref(false);
+const publishForm = reactive({
+  id: '',
+  draftName: '',
+  pubName: '',
+  lineId: '',
+});
+function prePublish(row: any) {
+  publishFormShow.value = true;
+  publishForm.id = row.id;
+  publishForm.draftName = row.name;
+  publishForm.pubName = row.name;
+}
+
+async function publishGraphics() {
+  try {
+    await publishDraft({
+      draftingId: publishForm.id,
+      name: publishForm.pubName,
+      lineId: publishForm.lineId,
+    });
+    publishFormShow.value = false;
+    $q.notify({
+      type: 'positive',
+      message: '发布成功',
+    });
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error.message,
+    });
+  }
+}
+
+async function deleteData(row: any) {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认删除草稿图 "${row.name}" 吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await deleteDraft(row.id);
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message,
+        });
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+</script>

src/pages/PublishManage.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="草稿图"
+      :style="{ height: tableHeight + 'px' }"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      :filter="filter"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <q-input
+          dense
+          debounce="1000"
+          v-model="filter.name"
+          label="名称"
+        ></q-input>
+        <q-btn flat round color="primary" icon="search" />
+        <q-btn color="primary" label="新建" @click="createFormShow = true" />
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="编辑"
+              :to="`/painting/${props.row.id}`"
+            />
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="发布"
+              @click="prePublish(props.row)"
+            />
+            <q-btn
+              color="red"
+              :disable="operateDisabled"
+              label="删除"
+              @click="deleteData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn, QForm } from 'quasar';
+import { pageQuery, createDraft, deleteDraft } from '../api/DraftApi';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+const typeOptions = [
+  { label: '线路', value: 'Line' },
+  { label: '线网', value: 'LineNetwork' },
+];
+const createType = ref('Line');
+
+const typeOptionsMap = computed(() => {
+  const obj: { [k: string]: string } = {};
+  typeOptions.forEach((item: { value: string; label: string }) => {
+    obj[item.value] = item.label;
+  });
+  return obj;
+});
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'name',
+    label: '名称',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  // { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
+  {
+    name: 'type',
+    label: '类型',
+    field: (row) => {
+      return typeOptionsMap.value[row.type];
+    },
+    align: 'center',
+  },
+  {
+    name: 'createdAt',
+    label: '创建时间',
+    field: 'createdAt',
+    align: 'center',
+  },
+  {
+    name: 'updateAt',
+    label: '更新时间',
+    field: 'updateAt',
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  name: '',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  const filter = props.filter;
+
+  loading.value = true;
+  try {
+    let response = await pageQuery({
+      current: page,
+      size: rowsPerPage,
+      name: filter.name,
+    });
+    const pageData = response;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error.message,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const createFormShow = ref(false);
+const draftName = ref('');
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      operateDisabled.value = true;
+      try {
+        await createDraft({
+          name: draftName.value,
+          type: createType.value,
+        });
+        createFormShow.value = false;
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message,
+        });
+      } finally {
+        operateDisabled.value = false;
+      }
+    }
+  });
+}
+
+const publishFormShow = ref(false);
+const publishForm = reactive({
+  id: '',
+  draftName: '',
+  pubName: '',
+  lineId: '',
+});
+function prePublish(row: any) {
+  publishFormShow.value = true;
+  publishForm.id = row.id;
+  publishForm.draftName = row.name;
+  publishForm.pubName = row.name;
+}
+
+async function deleteData(row: any) {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认删除草稿图 "${row.name}" 吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await deleteDraft(row.id);
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message,
+        });
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+</script>

src/router/routes.ts

@@ -29,6 +29,16 @@ const routes: RouteRecordRaw[] = [
         name: 'draft',
         component: () => import('pages/DraftManage.vue'),
       },
+      {
+        path: 'publish',
+        name: 'publish',
+        component: () => import('pages/PublishManage.vue'),
+      },
+      {
+        path: 'lineInfo',
+        name: 'lineInfo',
+        component: () => import('pages/LineInfoManage.vue'),
+      },
     ],
   },
   {