决策信息管理

src/api/DecisionInfo.ts

@@ -0,0 +1,65 @@
+import { api } from 'src/boot/axios';
+import { PageDto, PageQueryDto } from './ApiCommon';
+
+const DraftUriBase = '/api/alertTip';
+
+export interface createParams {
+  alertType: string;
+  timeType: string;
+  locationType: string;
+  infoJson: string;
+}
+
+interface Item {
+  id: number;
+  alertType: string;
+  timeType: string;
+  locationType: string;
+  infoJson: string;
+}
+
+export class PagingQueryParams extends PageQueryDto {
+  alertType?: string;
+  timeType?: string;
+  locationType?: string;
+}
+
+/**
+ * 分页查询决策信息
+ * @param params
+ * @returns
+ */
+export async function alarmInfoPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<Item>> {
+  const response = await api.get(`${DraftUriBase}/page`, {
+    params: params,
+  });
+  return response.data;
+}
+
+/**
+ * 创建决策信息
+ * @param params
+ * @returns
+ */
+export function createAlarmInfo(draftData: createParams) {
+  return api.post(`${DraftUriBase}`, draftData);
+}
+
+/**
+ * 删除决策信息
+ * @param id 草稿id
+ */
+export function deleteAlarmInfo(id: number) {
+  return api.delete(`${DraftUriBase}/id/${id}`);
+}
+
+/**
+ * 更新决策信息
+ * @param data
+ * @returns
+ */
+export function updataAlarmInfo(id: number, data: Item) {
+  return api.put(`${DraftUriBase}/id`, data);
+}

src/components/SysMenu.vue

@@ -74,6 +74,11 @@ const list = reactive([
         label: '线路信息管理',
         icon: 'app_registration',
       },
+      {
+        path: '/dataManage/decisionInfo',
+        label: '决策信息管理',
+        icon: 'app_registration',
+      },
     ],
   },
   {

src/pages/DecisionInfoManage.vue

@@ -0,0 +1,299 @@
+<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.alertType"
+          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="编辑"
+              @click="editData(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-form
+          ref="myForm"
+          @submit="onCreate"
+          @reset="onReset"
+          class="q-gutter-md"
+        >
+          <q-card-section>
+            <div class="text-h6">
+              {{ creatForm.id ? '编辑决策信息' : '新建决策信息' }}
+            </div>
+            <q-input
+              outlined
+              label="故障类型"
+              v-model="creatForm.alertType"
+              lazy-rules
+              :rules="[(val) => val.length > 0 || '请输入名称！']"
+            />
+            <q-input
+              outlined
+              label="时间定义类型"
+              v-model="creatForm.timeType"
+              lazy-rules
+            />
+            <q-input
+              outlined
+              label="地点定义类型"
+              v-model="creatForm.locationType"
+              lazy-rules
+            />
+            <q-input
+              outlined
+              label="提示信息"
+              v-model="creatForm.infoJson"
+              lazy-rules
+            />
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn color="primary" label="创建" type="submit" />
+            <q-btn label="取消" type="reset" v-close-popup />
+          </q-card-actions>
+        </q-form>
+      </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 {
+  alarmInfoPageQuery,
+  deleteAlarmInfo,
+  createAlarmInfo,
+  updataAlarmInfo,
+} from '../api/DecisionInfo';
+import { ApiError } from 'src/boot/axios';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'id',
+    label: '编号',
+    field: 'id',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'alertType',
+    label: '故障类型',
+    field: 'alertType',
+    align: 'center',
+  },
+  {
+    name: 'timeType',
+    label: '时间定义类型',
+    field: 'timeType',
+    align: 'center',
+  },
+  {
+    name: 'locationType',
+    label: '地点定义类型',
+    field: 'locationType',
+    align: 'center',
+  },
+  {
+    name: 'infoJson',
+    label: '提示信息',
+    field: (row) => {
+      if (row.infoJson) {
+        return JSON.parse(row.infoJson);
+      }
+    },
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  alertType: '',
+});
+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 alarmInfoPageQuery({
+      current: page,
+      size: rowsPerPage,
+      alertType: filter.alertType,
+    });
+    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 (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const createFormShow = ref(false);
+const myForm = ref<QForm | null>(null);
+const creatForm = reactive({
+  id: '',
+  alertType: '',
+  timeType: '',
+  locationType: '',
+  infoJson: '',
+});
+
+function onReset() {
+  creatForm.id = '';
+  creatForm.alertType = '';
+  creatForm.timeType = '';
+  creatForm.locationType = '';
+  creatForm.infoJson = '';
+  myForm.value?.resetValidation();
+}
+
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      operateDisabled.value = true;
+      try {
+        const params = {
+          id: +creatForm.id,
+          alertType: creatForm.alertType,
+          timeType: creatForm.timeType,
+          locationType: creatForm.locationType,
+          infoJson: creatForm.infoJson,
+        };
+        if (creatForm.infoJson) {
+          params.infoJson = JSON.stringify(creatForm.infoJson);
+        }
+        if (creatForm.id) {
+          await updataAlarmInfo(+creatForm.id, params);
+        } else {
+          await createAlarmInfo(params);
+        }
+        onReset();
+        createFormShow.value = false;
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        const error = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: error.title,
+        });
+      } finally {
+        operateDisabled.value = false;
+      }
+    }
+  });
+}
+
+function editData(row: any) {
+  creatForm.id = row.id;
+  creatForm.alertType = row.alertType;
+  creatForm.timeType = row.timeType || '';
+  creatForm.locationType = row.locationType || '';
+  creatForm.infoJson = row.infoJson || '';
+  createFormShow.value = true;
+}
+
+async function deleteData(row: any) {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认删除编号是"${row.id}"的决策信息吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await deleteAlarmInfo(row.id);
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        const error = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: error.title,
+        });
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+</script>

src/router/routes.ts

@@ -40,6 +40,11 @@ const routes: RouteRecordRaw[] = [
         name: 'lineInfo',
         component: () => import('pages/LineInfoManage.vue'),
       },
+      {
+        path: 'decisionInfo',
+        name: 'decisionInfo',
+        component: () => import('pages/DecisionInfoManage.vue'),
+      },
     ],
   },
   {