change

components.d.ts

@@ -22,6 +22,8 @@ declare module '@vue/runtime-core' {
     InParamConfig: typeof import('./src/components/ApiFlow/components/ApiEditer/components/InParamConfig.vue')['default']
     InParamsConfigCard: typeof import('./src/components/ApiFlow/components/ApiEditer/components/InParamsConfigCard.vue')['default']
     MultipleSelect: typeof import('./src/components/EditTabel/multipleSelect.vue')['default']
+    NCode: typeof import('naive-ui')['NCode']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NumberArrayInput: typeof import('./src/components/ApiFlow/components/ApiEditer/components/NumberArrayInput.vue')['default']
     OutParamConfig: typeof import('./src/components/ApiFlow/components/ApiEditer/components/OutParamConfig.vue')['default']
     OutParamsConfigCard: typeof import('./src/components/ApiFlow/components/ApiEditer/components/OutParamsConfigCard.vue')['default']

src/api/crudApi.ts

@@ -1,47 +1,62 @@
-import { api } from "./api"
-
-interface QueryParam{
-  name: string
-  type: "=" | ">" | "<" | "<=" | ">=" | "like" | "in" | "range" | "find_in_set"
-  model?: "and" | "or"
-  value:any
+import { api } from "./api";
+type QueryExpress =
+  | "="
+  | ">"
+  | "<"
+  | "<="
+  | ">="
+  | "like"
+  | "in"
+  | "range"
+  | "find_in_set";
+interface QueryParam {
+  name: string;
+  type: QueryExpress;
+  model?: "and" | "or";
+  value: any;
 }
 
-interface OrderParam{
-  order_by: string
-  type:'asc'|'desc'
+interface OrderParam {
+  order_by: string;
+  type: "asc" | "desc";
 }
 
-interface QueryParams{
-  param_list?: QueryParam[]
-  order?:OrderParam
-  page: number
-  page_size: number
+interface QueryParams {
+  param_list?: QueryParam[];
+  order?: OrderParam;
+  page: number;
+  page_size: number;
 }
-class CrudApi{
-  baseUrl: string
-  idKey:string
-  constructor(baseUrl: string,idKey="id") {
-    this.baseUrl = baseUrl
-    this.idKey=idKey
+class CrudApi {
+  baseUrl: string;
+  idKey: string;
+  constructor(baseUrl: string, idKey = "id") {
+    this.baseUrl = baseUrl;
+    this.idKey = idKey;
   }
   async get(itemId: any) {
-    return await api.post<any,any>(this.baseUrl+"/get",{[this.idKey]:itemId})
+    return await api.post<any, any>(this.baseUrl + "/get", {
+      [this.idKey]: itemId
+    });
   }
   async add(newData: any) {
-    return await api.post<any,any>(this.baseUrl+"/add",newData)
+    return await api.post<any, any>(this.baseUrl + "/add", newData);
   }
   async update(newData) {
-    return await api.post<any,any>(this.baseUrl + "/update", newData)
-   }
+    return await api.post<any, any>(this.baseUrl + "/update", newData);
+  }
   async delete(itemId: any) {
-    return await api.post<any,any>(this.baseUrl+"/delete",{[this.idKey]:itemId})
-   }
+    return await api.post<any, any>(this.baseUrl + "/delete", {
+      [this.idKey]: itemId
+    });
+  }
   async queryCommon(queryParams: QueryParams) {
-    return await api.post<any,any>(this.baseUrl+"/query_common",queryParams)
-    
+    return await api.post<any, any>(
+      this.baseUrl + "/query_common",
+      queryParams
+    );
   }
 }
 
-export { CrudApi }
-export type { QueryParams,QueryParam }
+export { CrudApi };
+export type { QueryParams, QueryParam, queryExpress };

src/components/EditTabelPlus/EditTablePlus.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-col" style="height: calc(100% - 48px)">
+    <el-table class="flex-1" :data="tableData" style="width: 100%">
+      <el-form-item v-for="column in props.tableModel.columns">
+        <template #header>
+          <table-header-query-cell @change="getTableData" :column-config="column" v-model="query[column.key]" />
+        </template>
+        <template #default="{ row }">
+          <table-colunm-show-cell :column-config="column" v-model="row[column.key]" />
+        </template>
+      </el-form-item>
+    </el-table>
+    <div class="flex justify-center">
+      <el-pagination v-model:current-page="query.page" :page-size="query.page_size" :small="false"
+        layout="prev, pager, next" :total="count" @current-change="getTableData" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { TableModel } from './types';
+import { queryTypeDefaultValueDic, queryTypeExpressDic } from './config';
+import { CrudApi, QueryParam, QueryParams } from '@/api/crudApi';
+import { ElMessage } from 'element-plus';
+const props = defineProps<{ tableModel: TableModel }>()
+const tableData = ref([])
+const count = ref(0)
+const query = ref({ page: 1, page_size: 10 })
+const crudApi = new CrudApi("");
+watch(() => props.tableModel, (newVal) => {
+  initCrudApi()
+  query.value = initQuery(newVal, query.value)
+})
+
+function initCrudApi() {
+  crudApi.idKey = props.tableModel.idKey
+  crudApi.baseUrl = props.tableModel.baseUrl
+}
+
+function initQuery(tableModel: TableModel, oldQuery = {}) {
+  let newQuery = { page: query.value.page, page_size: query.value.page_size }
+  tableModel.columns.forEach(item => {
+    if (item.query?.type) {
+      const queryType = item.query.type
+      if ([null, undefined].indexOf(query.value[item.key]) == -1) {
+        newQuery[item.key] = query.value[item.key]
+      } else {
+        newQuery[item.key] = queryTypeDefaultValueDic[queryType]
+      }
+    }
+  })
+  return newQuery
+}
+
+const queryParams = computed(() => {
+  let queryParamsValue: QueryParams = {
+    param_list: [],
+    page: 0,
+    page_size: 0
+  };
+  props.tableModel.columns.forEach(col => {
+    if (
+      col.query?.type &&
+      [undefined, null, "", ""].indexOf(query.value[col.key]) == -1
+    ) {
+      let queryType = col.query.type
+      let param: QueryParam = {
+        name: col.key,
+        type: queryTypeExpressDic[queryType] || '=',
+        value: query.value[col.key]
+      };
+      queryParamsValue.param_list.push(param);
+    }
+  });
+  queryParamsValue.page = query.value.page;
+  queryParamsValue.page_size = query.value.page_size;
+  return queryParamsValue;
+});
+async function getTableData() {
+  try {
+    const res = await crudApi.queryCommon(queryParams.value)
+    tableData.value = res.data.items;
+    count.value = res.data.count;
+  } catch (e) {
+    console.warn(e)
+    ElMessage.warning(e.response?.data?.detail)
+  }
+}
+</script>

src/components/EditTabelPlus/config.ts

@@ -0,0 +1,13 @@
+import type { QueryTypeEnum, ColumnTypeEnum } from "./types";
+const queryTypeDefaultValueDic: { [key in QueryTypeEnum]?: any } = {
+  date: [null, null],
+  datetime: [null, null]
+};
+const queryTypeExpressDic: { [key in QueryTypeEnum]?: QueryExpress } = {
+  date: "range",
+  datetime: "range",
+  find_in_set: "find_in_set",
+  enum: "="
+};
+
+export { queryTypeDefaultValueDic, queryTypeExpressDic };

src/components/EditTabelPlus/types.ts

@@ -1,10 +1,27 @@
+type QueryTypeEnum = "like" | "date" | "datetime" | "enum" | "find_in_set";
+type ColumnTypeEnum =
+  | "string"
+  | "text"
+  | "float"
+  | "int"
+  | "date"
+  | "datetime"
+  | "file"
+  | "enum"
+  | "set";
 interface QueryConfigBase {
-  type: string;
+  type: QueryTypeEnum;
 }
 
 interface QueryLike extends QueryConfigBase {
   type: "like";
 }
+interface QueryDate extends QueryConfigBase {
+  type: "date";
+}
+interface QueryDatetime extends QueryConfigBase {
+  type: "datetime";
+}
 interface QueryEnum extends QueryConfigBase {
   type: "enum";
   options: any[] | { name: string; value: any }[];
@@ -13,12 +30,16 @@ interface QueryFindInSet extends QueryConfigBase {
   type: "find_in_set";
   options: any[] | { name: string; value: any }[];
 }
-type QueryType = QueryLike | QueryEnum | QueryFindInSet;
+type QueryType =
+  | QueryLike
+  | QueryEnum
+  | QueryFindInSet
+  | QueryDate
+  | QueryDatetime;
 interface TableColumnConfigBase {
   key: string;
-  type: string;
+  type: ColumnTypeEnum;
   name: string;
-  showInTable?: boolean;
   query?: QueryType;
   addNeed?: boolean;
   updateNeed?: boolean;
@@ -32,6 +53,9 @@ interface ColumnString extends TableColumnConfigBase {
     maxLenght: number;
   };
 }
+interface ColumnText extends TableColumnConfigBase {
+  type: "text";
+}
 
 interface ColumnFloat extends TableColumnConfigBase {
   type: "float";
@@ -51,6 +75,10 @@ interface ColumnDateTime extends TableColumnConfigBase {
   type: "datetime";
   config?: {};
 }
+interface ColumnFile extends TableColumnConfigBase {
+  type: "file";
+  config?: {};
+}
 
 interface ColumnEnum extends TableColumnConfigBase {
   type: "enum";
@@ -73,9 +101,12 @@ type TableColumnConfig =
   | ColumnDate
   | ColumnDateTime
   | ColumnEnum
-  | ColumnSet;
+  | ColumnSet
+  | ColumnFile
+  | ColumnText;
 
 interface TableModel {
+  baseUrl?: string;
   idKey: string;
   tableName: string;
   name: string;
@@ -114,4 +145,4 @@ let BookTableModel: TableModel = {
     }
   ]
 };
-export type { TableModel };
+export type { TableModel, QueryTypeEnum, ColumnTypeEnum };

src/components/EditTabelPlus2/types.ts

@@ -0,0 +1,117 @@
+interface QueryConfigBase {
+  type: string;
+}
+
+interface QueryLike extends QueryConfigBase {
+  type: "like";
+}
+interface QueryEnum extends QueryConfigBase {
+  type: "enum";
+  options: any[] | { name: string; value: any }[];
+}
+interface QueryFindInSet extends QueryConfigBase {
+  type: "find_in_set";
+  options: any[] | { name: string; value: any }[];
+}
+type QueryType = QueryLike | QueryEnum | QueryFindInSet;
+interface TableColumnConfigBase {
+  key: string;
+  type: string;
+  name: string;
+  showInTable?: boolean;
+  query?: QueryType;
+  addNeed?: boolean;
+  updateNeed?: boolean;
+  config?: {};
+  default?: any;
+}
+
+interface ColumnString extends TableColumnConfigBase {
+  type: "string";
+  config?: {
+    maxLenght: number;
+  };
+}
+
+interface ColumnFloat extends TableColumnConfigBase {
+  type: "float";
+  config?: {};
+}
+
+interface ColumnInt extends TableColumnConfigBase {
+  type: "int";
+  config?: {};
+}
+
+interface ColumnDate extends TableColumnConfigBase {
+  type: "date";
+  config?: {};
+}
+interface ColumnDateTime extends TableColumnConfigBase {
+  type: "datetime";
+  config?: {};
+}
+
+interface ColumnEnum extends TableColumnConfigBase {
+  type: "enum";
+  config: {
+    options: any[] | { name: string; value: any }[];
+  };
+}
+
+interface ColumnSet extends TableColumnConfigBase {
+  type: "set";
+  config: {
+    options: any[] | { name: string; value: any }[];
+  };
+}
+
+type TableColumnConfig =
+  | ColumnString
+  | ColumnFloat
+  | ColumnInt
+  | ColumnDate
+  | ColumnDateTime
+  | ColumnEnum
+  | ColumnSet;
+
+interface TableModel {
+  idKey: string;
+  tableName: string;
+  name: string;
+  columns: TableColumnConfig[];
+}
+let BookTableModel: TableModel = {
+  tableName: "book",
+  name: "书",
+  idKey: "id",
+  columns: [
+    {
+      key: "id",
+      type: "int",
+      name: "ID"
+    },
+    {
+      key: "name",
+      type: "string",
+      name: "名称"
+    },
+    {
+      key: "price",
+      type: "float",
+      name: "价格"
+    },
+    {
+      key: "belong",
+      type: "enum",
+      name: "所属分类",
+      config: {
+        options: [
+          { value: 1, lable: "悬疑" },
+          { value: 2, lable: "科普" }
+        ]
+      }
+    }
+  ]
+};
+export type { TableModel };

tsconfig.json

@@ -19,6 +19,7 @@
     "resolveJsonModule": true,
     "lib": ["dom", "esnext"],
     "incremental": true,
+    "noImplicitAny": false,
     "paths": {
       "@/*": ["src/*"],
       "@build/*": ["build/*"]