代码工具

src/views/tool/generator/columns.ts

@@ -0,0 +1,50 @@
+import { h } from 'vue';
+import { ElTag } from 'element-plus';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed: 'left',
+  },
+  {
+    title: '数据表名称',
+    key: 'tableName',
+    width: 150,
+  },
+  {
+    title: '数据表描述',
+    key: 'tableComment',
+    width: 150,
+  },
+  {
+    title: '数据表引擎',
+    key: 'engine',
+    width: 100,
+  },
+  {
+    title: '数据表行数',
+    key: 'tableRows',
+    width: 100,
+  },
+  {
+    title: '数据表长度',
+    key: 'dataLength',
+    width: 100,
+  },
+  {
+    title: '数据表自增索引',
+    key: 'autoIncrement',
+    width: 120,
+  },
+  {
+    title: '数据表编码',
+    key: 'tableCollation',
+    width: 150,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  },
+];

src/views/tool/generator/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+    </n-card>
+    <n-card :bordered="false" class="proCard">
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.tableName"
+        ref="basicTableRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :autoScrollX="true"
+      >
+        <template #tableTitle>
+          <n-space>
+            <n-button
+              type="primary"
+              @click="handleGenerator"
+              v-perm="['sys:generator:batchGenerator']"
+            >
+              <template #icon>
+                <n-icon>
+                  <PlusOutlined />
+                </n-icon>
+              </template>
+              批量生成
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref } from 'vue';
+  import { useMessage, useDialog } from 'naive-ui';
+  import { TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { getTableList, generator, batchGenerator } from '@/api/tool/generator';
+  import { columns } from './columns';
+  import { schemas } from './querySchemas';
+  import { PlusOutlined } from '@vicons/antd';
+  import { renderIcon } from '@/utils';
+
+  const message = useMessage();
+  const dialog = useDialog();
+  const basicTableRef = ref();
+
+  const rowKeys = ref([]);
+
+  const formParams = reactive({
+    tableName: '',
+    tableComment: '',
+  });
+
+  const actionColumn = reactive({
+    width: 200,
+    title: '操作',
+    align: 'center',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '生成',
+            icon: renderIcon(PlusOutlined),
+            type: 'info',
+            onClick: handleGenerator.bind(null, record),
+            auth: ['sys:generator:generator'],
+          },
+        ],
+      });
+    },
+  });
+
+  const loadDataTable = async (res) => {
+    rowKeys.value = [];
+    const result = await getTableList({ ...formParams, ...res });
+    return result;
+  };
+
+  function onCheckedRow(keys) {
+    rowKeys.value = keys;
+  }
+
+  function reloadTable(noRefresh = '') {
+    basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+  }
+
+  function handleSubmit(values: Recordable) {
+    for (const key in formParams) {
+      formParams[key] = '';
+    }
+    for (const key in values) {
+      formParams[key] = values[key];
+    }
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    for (const key in formParams) {
+      formParams[key] = '';
+    }
+    for (const key in values) {
+      formParams[key] = values[key];
+    }
+    reloadTable();
+  }
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 100,
+    schemas,
+  });
+
+  /**
+   * 执行生成
+   */
+  const handleGenerator = async (record) => {
+    console.log(record);
+    dialog.warning({
+      title: '提示',
+      content: '确定要生成？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        record.tableName
+          ? await generator({ tableNames: [record.tableName] })
+          : await batchGenerator({ tableNames: rowKeys.value });
+        message.success('生成成功');
+        reloadTable();
+      },
+    });
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/tool/generator/querySchemas.ts

@@ -0,0 +1,19 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'tableName',
+    component: 'NInput',
+    label: '数据表名称',
+    componentProps: {
+      placeholder: '请输入数据表名称',
+    },
+  },
+  {
+    field: 'tableComment',
+    component: 'NInput',
+    label: '数据表描述',
+    componentProps: {
+      placeholder: '请输入数据表描述',
+    },
+  },
+];