报表设计-报表管理

Report-V3-TS/src/api/report/reportManage.ts

@@ -0,0 +1,48 @@
+import { http } from '@/utils/http/axios';
+
+export function toGetPageList(params) {
+  return http.request({
+    url: '/report/pageList',
+    method: 'GET',
+    params,
+  })
+}
+
+export function toAddApi(data) {
+  return http.request({
+    url: '/report',
+    method: 'post',
+    data
+  })
+}
+
+export function toDeleteApi(data) {
+  return http.request({
+    url: '/report/delete/batch',
+    method: 'post',
+    data
+  })
+}
+
+export function toUpdateApi(data) {
+  return http.request({
+    url: '/report',
+    method: 'put', data,
+  })
+}
+
+export function toGetDataDetailApi(data) {
+  return http.request({
+    url: '/report/' + data.id,
+    method: 'get',
+    params: { accessKey: data.accessKey }
+  })
+}
+
+export function reportCopy(data) {
+  return http.request({
+    url: '/report/copy',
+    method: 'post',
+    data
+  })
+}

Report-V3-TS/src/views/report/reportManage/index.vue

@@ -3,13 +3,68 @@
  * @Author: qianlishi
  * @Date: 2024-12-08 16:34:50
  * @LastEditors: qianlishi
- * @LastEditTime: 2024-12-08 16:36:34
+ * @LastEditTime: 2025-01-10 15:35:08
 -->
 <template>
-  <div>报表管理</div>
+  <div class="view-container">
+    <JsqCrud @register="register" />
+  </div>
 </template>
 <script lang="ts" setup>
+  import { JsqCrud, useCrud } from '@/components/Base/Jsq-crud';
+  import { getFormSchemas, getTableButtons, getDialogRecordingSchemas, getTableColumns } from './utils/schemas';
+  import { toGetPageList, toAddApi, toDeleteApi, toUpdateApi, toGetDataDetailApi } from '@/api/report/reportManage'
 
+  // 新增
+  const addClick = () => {
+    toAdd()
+  }
+
+  // 批量删除
+  const removeAll = () => {
+    toRemoveAll()
+  }
+
+  // 编辑
+  const updateClick = (row) => {
+    toUpdate(row)
+  }
+
+  // 删除
+  const removeSingle = (row) => {
+    toRemove(row)
+  }
+
+  const { rowsButtons } = getTableButtons({ addClick, removeAll })
+  const { columns } = getTableColumns({ updateClick, removeSingle })
+
+  const [register, { toAdd, toUpdate, toRemoveAll, toRemove }] = useCrud({
+    searchFormOption: {
+      schemas: getFormSchemas({}).value,
+    },
+    tableButtonsOptions: {
+      // 添加naive 按钮其他属性
+      tableButtons: rowsButtons
+    },
+    dialogRecordingData: {
+      width: 800,
+      size: "small",
+      labelPlacement: "left",
+      labelWidth: 100,
+      schemas: getDialogRecordingSchemas()
+    },
+    tableOptions: {
+      // navie table配置
+      columns: columns, // 表格配置
+    },
+    apiOptions: {
+      queryApi: toGetPageList, // 查询
+      addApi: toAddApi, // 新增
+      removeApi: toDeleteApi, // 删除
+      updateApi: toUpdateApi, // 修改
+      getDataByIdApi: toGetDataDetailApi // 查询详情页
+    }
+  });
 </script>
 <style lang="less" scoped></style>
 

Report-V3-TS/src/views/report/reportManage/utils/schemas.ts

@@ -0,0 +1,252 @@
+/*
+ * @Description: 
+ * @Author: qianlishi
+ * @Date: 2025-01-03 01:01:14
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2025-01-10 15:35:28
+ */
+import { computed, h } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { isObject } from '@/utils/is';
+import { NButton } from 'naive-ui'
+import { editFormShow } from '@/enums/common'
+import { FormSchema } from '@/components/Base/Jsq-crud/src/components/Jsq-searchForm';
+
+// 表单配置
+export const getFormSchemas = ({ params }: Record<string, any>) => {
+  const schemas = computed<FormSchema[]>(() => {
+    const formItems: FormSchema[] = [
+      {
+        label: '报表类型',
+        field: 'reportType',
+        component: 'JsqSelect',
+        componentProps: {
+          dictCode: "REPORT_TYPE"
+        },
+      },
+      {
+        label: '报表名称',
+        field: 'reportName',
+        component: 'NInput',
+        componentProps: {
+          placeholder: '请输入报表名称',
+        },
+      },
+      {
+        label: '报表编码',
+        field: 'reportCode',
+        component: 'NInput',
+        componentProps: {
+          placeholder: '请输入报表编码',
+        },
+      },
+      {
+        label: '制作人',
+        field: 'reportAuthor',
+        component: 'NInput',
+        componentProps: {
+          placeholder: '请输入制作人',
+        },
+      },
+    ].map((item: any) => {
+      const tempObj = cloneDeep(item);
+      for (const key in params) {
+        if (tempObj.field == key) {
+          for (const n in params[key]) {
+            if (isObject(params[key][n])) {
+              tempObj[n] = { ...params[key][n], ...tempObj[n] };
+            } else {
+              tempObj[n] = params[key][n];
+            }
+          }
+        }
+      }
+      return tempObj;
+    });
+    return formItems;
+  });
+  return schemas;
+};
+
+
+// 批量操作
+export const getTableButtons = ({ addClick, removeAll }) => {
+  const rowsButtons = computed(() => {
+    return [
+      {
+        label: '新增',
+        type: '',
+        permission: 'asd', // 权限嘛
+        plain: true,
+        click: () => {
+          addClick()
+        }
+      },
+      {
+        label: '删除',
+        type: 'warning',
+        permission: '', // 权限嘛
+        plain: true,
+        click: () => {
+          removeAll()
+        }
+      }
+    ]
+  })
+  return {rowsButtons}
+}
+
+// 新增表单数据
+export const getDialogRecordingSchemas = () => {
+  const schemas = [
+    {
+      label: '报表名称',
+      field: 'reportName',
+      component: "NInput", // 表单类型
+      componentProps: {  // 组件配置
+        placeholder: '',
+      },
+      rules: [
+        { required: true, message: "请输入报表名称", trigger: "blur" },
+        { min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
+      ],
+    },
+    {
+      label: '报表编码',
+      field: 'reportCode',
+      component: 'NInput',
+      componentProps: {  // 组件配置
+        placeholder: '',
+      },
+      rules: [
+        { required: true, message: "请输入报表编码", trigger: "blur" },
+        { min: 1, max: 100, message: "不超过100个字符", trigger: "blur" },
+      ],
+    },
+    {
+      label: '报表类型',
+      field: "reportType",
+      component: 'JsqSelect',
+      componentProps: {  // 组件配置
+        placeholder: '',
+        dictCode: 'REPORT_TYPE',
+      },
+      rules: [
+        { required: true, message: "请输入报表类型", trigger: "blur" },
+        { min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
+      ],
+    },
+    {
+      label: '制作人',
+      field: 'reportDesc',
+      component: "NInput",
+      componentProps: {  // 组件配置
+        placeholder: '',
+      },
+    },
+    {
+      label: '描述',
+      field: 'createTime',
+      component: "NInput",
+      componentProps: {  // 组件配置
+        placeholder: '',
+      },
+    },
+    {
+      label: '状态',
+      field: 'enableFlag',
+      component: "JsqSelect",
+      componentProps: {  // 组件配置
+        dictCode: "ENABLE_FLAG"
+      },
+    },
+  ]
+
+  return schemas
+}
+
+// 表格
+export const getTableColumns = ({ updateClick, removeSingle }) => {
+  const columns= [
+    {
+      type: 'selection',
+      align: 'center',
+    },
+    {
+      title: '序号',
+      width: '60px',
+      align: 'center',
+      key: 'key',
+      render: (_, index) => {
+        return `${index + 1}`
+      },
+    },
+    {
+      title: '报表名称',
+      key: 'reportName', // 表格展示字段
+      align: 'center',
+    },
+    {
+      title: '报表编码',
+      key: 'reportCode',
+      align: 'center',
+    },
+    {
+      title: '报表类型',
+      key: 'reportType',
+      align: 'center'
+    },
+    {
+      title: '制作人',
+      key: 'reportAuthor',
+      align: 'center',
+    },
+    {
+      title: '描述',
+      key: 'reportDesc',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      key: 'enableFlag',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      align: 'center',
+      width: "120px",
+      editHide: true,
+      render(row) {
+        return [
+          h(
+            NButton,
+            {
+              size: 'small',
+              quaternary: true,
+              type:"primary",
+              onClick: () => {
+                updateClick(row)
+              }
+            },
+            { default: () => '编辑' }
+          ),
+          h(
+            NButton,
+            {
+              size: 'small',
+              quaternary: true,
+              'v-permission': 'asd',
+              type:"primary",
+              onClick: () => {
+                removeSingle(row)
+              }
+            },
+            { default: () => '删除' }
+          )
+        ]
+      }
+    }
+  ];
+  return { columns };
+};