报表设计-数据集

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

@@ -0,0 +1,57 @@
+import { http } from '@/utils/http/axios';
+
+
+export function toGetPageList(params) {
+  return http.request({
+    url: 'dataSet/pageList',
+    method: 'GET',
+    params,
+  })
+}
+
+export function toAddApi(data) {
+  return http.request({
+    url: 'dataSet',
+    method: 'post',
+    data
+  })
+}
+
+export function toDeleteApi(data) {
+  return http.request({
+    url: 'dataSet/delete/batch',
+    method: 'post',
+    data
+  })
+}
+
+export function toUpdateApi(data) {
+  return http.request({
+    url: 'dataSet',
+    method: 'put', data,
+  })
+}
+
+export function toGetDataDetailApi(data) {
+  return http.request({
+    url: 'dataSet/' + data.id,
+    method: 'get',
+    params: { accessKey: data.accessKey }
+  })
+}
+
+export function reportDataSetCopy(data) {
+  return http.request({
+    url: '/dataSet/copy',
+    method: 'post',
+    data
+  })
+}
+
+// 数据源
+export function getReportData() {
+  return http.request({
+    url: '/dataSource/queryAllDataSource',
+    method: 'get'
+  })
+}

Report-V3-TS/src/views/report/resultSet/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:17:45
 -->
 <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/resultSet'
 
+  // 新增
+  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/resultSet/utils/schemas.ts

@@ -0,0 +1,270 @@
+/*
+ * @Description: 
+ * @Author: qianlishi
+ * @Date: 2025-01-03 01:01:14
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2025-01-10 15:16:58
+ */
+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';
+import { getReportData } from '@/api/report/resultSet'
+
+// 表单配置
+export const getFormSchemas = ({ params }: Record<string, any>) => {
+  const schemas = computed<FormSchema[]>(() => {
+    const formItems: FormSchema[] = [
+      {
+        label: '数据集编码',
+        field: 'setCode',
+        component: 'NInput',
+        componentProps: {
+          placeholder: '请输入数据源编码',
+        },
+      },
+      {
+        label: '数据集名称',
+        field: 'setName',
+        component: 'NInput',
+        componentProps: {
+          placeholder: '请输入数据源名称',
+        },
+      },
+      {
+        label: '数据源',
+        component: 'JsqSelect',
+        field: 'enableFlag',
+        componentProps: {
+          api: getReportData,
+          labelField: "sourceName",
+          valueField: "sourceCode",
+        },
+      },
+      {
+        label: '数据集类型',
+        component: 'JsqSelect',
+        field: 'setType',
+        componentProps: {
+          dictCode: "SET_TYPE"
+        },
+      },
+    ].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: 'roleCode',
+      component: "NInput", // 表单类型
+      componentProps: {  // 组件配置
+        placeholder: '',
+      },
+      rules: [
+        { required: true, message: "角色编码必填", trigger: "blur" },
+        { min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
+      ],
+    },
+    {
+      label: '角色名称',
+      field: 'roleName',
+      component: 'NInput',
+      componentProps: {  // 组件配置
+        placeholder: '',
+      },
+      rules: [
+        { required: true, message: "角色名称必填", trigger: "blur" },
+        { min: 1, max: 128, message: "不超过128个字符", trigger: "blur" }
+      ],
+    },
+    {
+      label: '启用状态',
+      field: "enableFlag",
+      component: 'JsqSelect',
+      componentProps: {  // 组件配置
+        placeholder: '',
+        dictCode: 'ENABLE_FLAG',
+      },
+      rules: [
+        { required: true, message: "启用状态必填", trigger: ['blur', 'change'] }
+      ],
+    },
+    {
+      label: '创建人',
+      field: 'createBy',
+      component: "NInput",
+      componentProps: {  // 组件配置
+        placeholder: '',
+        disabled: true
+      },
+      editHide: editFormShow.HIDE_ON_ADD,
+    },
+    {
+      label: '创建时间',
+      field: 'createTime',
+      component: "NInput",
+      componentProps: {  // 组件配置
+        placeholder: '',
+        disabled: true
+      },
+      editHide: editFormShow.HIDE_ON_ADD,
+    },
+    {
+      label: '修改人',
+      field: 'updateBy',
+      component: "NInput",
+      componentProps: {  // 组件配置
+        placeholder: '',
+        disabled: true
+      },
+      editHide: editFormShow.HIDE_ON_ADD,
+    },
+    {
+      label: '修改时间',
+      field: 'updateTime',
+      component: "NInput",
+      componentProps: {  // 组件配置
+        placeholder: '',
+        disabled: true
+      },
+      editHide: editFormShow.HIDE_ON_ADD,
+    },
+  ]
+
+  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: 'setCode', // 表格展示字段
+      align: 'center',
+    },
+    {
+      title: '数据集名称',
+      key: 'setName',
+      align: 'center',
+    },
+    {
+      title: '描述',
+      key: 'setDesc',
+      align: 'center'
+    },
+    {
+      title: '数据源编码',
+      key: 'sourceCode',
+      align: 'center',
+    },
+    {
+      title: '数据集类型',
+      key: 'setType',
+      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 };
+};