nl-admin-view/apps/web-antd/src/views/code-generation/components/fileds.vue

<script lang="ts" setup>
import type { JsonViewerAction, JsonViewerValue } from '@vben/common-ui';

import { computed, ref } from 'vue';

import { JsonViewer, Page } from '@vben/common-ui';

import { Button, Input, message, Select, Switch, Table } from 'ant-design-vue';

import filedType from '#/util/json/filedType.json';
import formType from '#/util/json/formType.json';

interface RowType {
  name: string;
  type: string;
  type_length: string;
  default: string;
  comment: string;
  not_null: boolean;
  formShow: boolean;
  tableShow: boolean;
  formType: string;
  search: boolean;
  searchValue: string;
}
const createEmptyRow = (): RowType => ({
  name: '',
  type: 'varchar',
  type_length: '',
  default: '',
  comment: '',
  not_null: true,
  formShow: true,
  tableShow: true,
  formType: 'VbenInput',
  search: true,
  searchValue: '=',
});

const tableData = ref<RowType[]>([createEmptyRow()]);
// 暴露常量
defineExpose({
  tableData,
});

// 添加行
const addRow = () => tableData.value.push(createEmptyRow());

// 删除行
const deleteRow = (index: number) => {
  if (tableData.value.length > 1) {
    tableData.value.splice(index, 1);
  }
};

// 表格列配置
const columns = computed(() => [
  { title: '字段名', dataIndex: 'name', width: 150 },
  { title: '类型', dataIndex: 'type', width: 120 },
  { title: '字段长度', dataIndex: 'type_length', width: 120 },
  { title: '默认值', dataIndex: 'default', width: 120 },
  { title: '注释', dataIndex: 'comment', width: 200 },
  { title: '基础配置', dataIndex: 'base', width: 100 },
  { title: '搜索配置', dataIndex: 'search', width: 120 },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    fixed: 'right',
  },
]);

function handleKeyClick(key: string) {
  message.info(`点击了Key ${key}`);
}

function handleValueClick(value: JsonViewerValue) {
  message.info(`点击了Value ${JSON.stringify(value)}`);
}

function handleCopied(_event: JsonViewerAction) {
  message.success('已复制JSON');
}
const jsonValue = ref('');

const changeJsonValue = () => {
  tableData.value = JSON.parse(jsonValue.value);
};
</script>

<template>
  <Page auto-content-height>
    <Input v-model:value="jsonValue" />
    <Button @click="changeJsonValue">写入json</Button>
    <JsonViewer
      :value="tableData"
      :expand-depth="3"
      copyable
      :sort="false"
      @key-click="handleKeyClick"
      @value-click="handleValueClick"
      @copied="handleCopied"
      boxed
    />
    <Table
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      bordered
      row-key="index"
    >
      <template #bodyCell="{ column, record, index }">
        <!-- 操作列 -->
        <template v-if="column.dataIndex === 'action'">
          <div class="flex gap-2">
            <Button danger @click="deleteRow(index)">删除</Button>
            <Button type="primary" @click="addRow"> 添加行 </Button>
          </div>
        </template>

        <!-- 字段名编辑 -->
        <template v-if="column.dataIndex === 'name'">
          <Input v-model:value="record.name" autofocus />
        </template>

        <!-- 类型选择 -->
        <template v-if="column.dataIndex === 'type'">
          <Select
            v-model:value="record.type"
            :options="filedType"
            show-search
            style="width: 100%"
            autofocus
          />
        </template>

        <!-- 默认值编辑 -->
        <template v-if="column.dataIndex === 'type_length'">
          <Input v-model:value="record.type_length" autofocus />
        </template>

        <!-- 默认值编辑 -->
        <template v-if="column.dataIndex === 'default'">
          <Input v-model:value="record.default" autofocus />
        </template>

        <!-- 注释编辑 -->
        <template v-if="column.dataIndex === 'comment'">
          <Input v-model:value="record.comment" autofocus />
        </template>

        <!-- 基础配置 -->
        <template v-if="column.dataIndex === 'base'">
          <!-- 开关控件 -->
          <div>不能为空： <Switch v-model:checked="record.not_null" /></div>
          <div class="mt-2">
            表单显示： <Switch v-model:checked="record.formShow" />
          </div>
          <div class="mt-2">
            表格显示： <Switch v-model:checked="record.tableShow" />
          </div>
          <div class="mt-2">
            开启查询： <Switch v-model:checked="record.search" />
          </div>
        </template>
        <!-- 搜索配置 -->
        <template v-if="column.dataIndex === 'search'">
          <!-- 开关控件 -->
          <div class="mt-2">
            表单类型：
            <Select
              v-model:value="record.formType"
              :options="formType"
              show-search
              style="width: 100%"
              :disabled="!record.formShow"
              autofocus
            />
          </div>
          <div class="mt-2">
            查询类型：
            <Select
              v-model:value="record.searchValue"
              :options="[
                {
                  label: '绝对查询',
                  value: '=',
                },
                {
                  label: '模糊查询',
                  value: 'like',
                },
              ]"
              style="width: 100%"
              :disabled="!record.search"
              autofocus
            />
          </div>
        </template>
        <!-- 搜索配置 -->
        <template v-if="column.dataIndex === 'formType'">
          <!-- 开关控件 -->
        </template>
      </template>
    </Table>
  </Page>
</template>

<style scoped>
.ant-table-cell {
  min-height: 45px;
  padding: 8px 16px !important;
  cursor: pointer;
}
</style>