taais-web/src/views/tool/gen/components/genInfoForm.vue

<template>
  <ProForm ref="formRef" :items-options="items" :model="model" :form-options="_formOptions"> </ProForm>
  <template v-if="model.tplCategory !== 'crud'">
    <h4 class="form-header">其他信息</h4>
  </template>
  <ProForm ref="formRef2" :items-options="treeItemsOptions" :model="infoForm" :form-options="_formOptions"> </ProForm>
</template>
<script lang="ts" name="GenBasicInfo" setup>
import { defineProps, ref, computed, watch } from 'vue'
import ProForm from '@/components/ProForm/index.vue'
const formRef = ref<InstanceType<typeof ProForm> | null>(null)
const formRef2 = ref<InstanceType<typeof ProForm> | null>(null)
export interface InfoProps {
  tables: any[] // 表格数据
  menus: any[] // 菜单
  model: any // 详情数据
}

const props = withDefaults(defineProps<InfoProps>(), {
  tables: () => [],
  menus: () => [],
  model: () => null
})
const subColumns = ref<any>([])
const setSubTableColumns = (value: string) => {
  props.tables.forEach((item: any) => {
    const name = item.tableName
    if (value === name) {
      subColumns.value = item.columns
      return
    }
  })
}
const infoForm = computed(() => props.model)
watch(
  () => infoForm.value.subTableName,
  val => {
    setSubTableColumns(val)
  }
)
const tplData = [
  {
    label: '单表（增删改查）',
    value: 'crud'
  },
  {
    label: '树表（增删改查）',
    value: 'tree'
  },
  {
    label: '主子表（增删改查）',
    value: 'sub'
  }
]
const genTypeData = [
  {
    label: 'zip压缩包',
    value: '0'
  },
  {
    label: '自定义路径',
    value: '1'
  }
]
const _formOptions = {
  hasFooter: false,
  labelWidth: 160
}
let treeItemsOptions: ProForm.ItemsOptions[] = []
const setItemsOptions = () => {
  treeItemsOptions = [
    {
      label: '树编码字段',
      prop: 'treeCode',
      span: 12,
      tooltip: '树显示的编码字段名， 如：dept_id',
      rules: [{ required: true, message: '树编码字段为空', trigger: 'change' }],
      show: () => {
        return props.model.tplCategory === 'tree'
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        style: 'width: 80%',
        enum: props.model.columns.map((item: any) => {
          return {
            label: `${item.columnName}：${item.columnComment}`,
            value: item.columnName
          }
        }),
        placeholder: '请选择'
      }
    },
    {
      label: '树父编码字段',
      prop: 'treeParentCode',
      span: 12,
      tooltip: '树显示的父编码字段名， 如：parent_Id',
      show: () => {
        return props.model.tplCategory === 'tree'
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        style: 'width: 80%',
        enum: infoForm.value.columns.map((item: any) => {
          return {
            label: `${item.columnName}：${item.columnComment}`,
            value: item.columnName
          }
        }),
        placeholder: '请选择'
      }
    },
    {
      label: '树名称字段',
      prop: 'treeName',
      span: 12,
      tooltip: '树节点的显示名称字段名， 如：dept_name',
      show: () => {
        return props.model.tplCategory === 'tree'
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        style: 'width: 80%',
        enum: props.model.columns.map((item: any) => {
          return {
            label: `${item.columnName}：${item.columnComment}`,
            value: item.columnName
          }
        }),
        placeholder: '请选择'
      }
    },
    {
      label: '关联子表的表名',
      prop: 'subTableName',
      span: 12,
      tooltip: '关联子表的表名， 如：sys_user',
      show: () => {
        return props.model.tplCategory === 'sub'
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        style: 'width: 80%',
        enum: props.tables.map((item: any) => {
          return {
            label: `${item.tableName}：${item.tableComment}`,
            value: item.tableName
          }
        }),
        placeholder: '请选择',
        onChange: () => {
          setItemsOptions()
          infoForm.value.subTableFkName = ''
        }
      }
    },
    {
      label: '子表关联的外键名',
      prop: 'subTableFkName',
      span: 12,
      tooltip: '子表关联的外键名， 如：user_id',
      show: () => {
        return props.model.tplCategory === 'sub'
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        style: 'width: 80%',
        enum: subColumns.value.map((item: any) => {
          return {
            label: `${item.columnName}：${item.columnComment}`,
            value: item.columnName
          }
        }),
        placeholder: '请选择'
      }
    }
  ]
}

let items: ProForm.ItemsOptions[] = []
const setItem = () => {
  items = [
    {
      label: '生成模板',
      prop: 'tplCategory',
      span: 12,
      rules: [{ required: true, message: '生成模板不能为空', trigger: 'change' }],
      compOptions: {
        elTagName: 'select',
        clearable: true,
        style: 'width: 80%',
        enum: tplData,
        placeholder: '请输入生成模板',
        onChange: (val: string) => {
          if (val !== 'sub') {
            infoForm.value.subTableName = ''
            infoForm.value.subTableFkName = ''
          }
        }
      }
    },
    {
      label: '生成包路径',
      prop: 'packageName',
      tooltip: '生成在哪个java包下，例如 com.km.system',
      span: 12,
      rules: [{ required: true, message: '生成包路径不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'input',
        clearable: true,
        placeholder: '请输入生成包路径'
      }
    },
    {
      label: '生成模块名',
      prop: 'moduleName',
      span: 12,
      tooltip: '可理解为子系统名，例如 system',
      rules: [{ required: true, message: '生成模块名不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'input',
        clearable: true,
        placeholder: '请输入生成模块名'
      }
    },
    {
      label: '生成业务名',
      prop: 'businessName',
      tooltip: '可理解为功能英文名，例如 user',
      span: 12,
      rules: [{ required: true, message: '生成业务名不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'input',
        clearable: true,
        placeholder: '请输入生成业务名'
      }
    },
    {
      label: '生成功能名',
      prop: 'functionName',
      tooltip: '用作类描述，例如 用户',
      span: 12,
      rules: [{ required: true, message: '生成功能名不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'input',
        clearable: true,
        placeholder: '请输入生成功能名'
      }
    },
    {
      label: '上级菜单',
      prop: 'parentMenuId',
      span: 10,
      tooltip: '分配到指定菜单下，例如 系统管理',
      compOptions: {
        elTagName: 'tree-select',
        clearable: true,
        valueKey: 'menuId',
        placeholder: '请选择上级菜单',
        appendToBody: true,
        checkStrictly: true,
        enum: props.menus,
        filterable: true,
        props: {
          value: 'menuId',
          label: 'menuName',
          children: 'children'
        }
      }
    },
    {
      label: '生成方式',
      prop: 'functionAuthor',
      tooltip: '默认为zip压缩包下载，也可以自定义生成路径',
      span: 12,
      compOptions: {
        elTagName: 'radio-group',
        value: '0',
        enum: genTypeData,
        clearable: true,
        placeholder: '请输入作者'
      }
    }
  ]
}
setItem()
setItemsOptions()
defineExpose({
  formRef,
  formRef2
})
</script>