806 lines
30 KiB
Vue
806 lines
30 KiB
Vue
<template>
|
||
<el-drawer
|
||
v-model="visible"
|
||
:title="`编辑生成信息 - ${record?.table_comment}`"
|
||
size="100%"
|
||
destroy-on-close
|
||
@close="handleClose"
|
||
>
|
||
<div v-loading="loading" element-loading-text="加载数据中...">
|
||
<el-form ref="formRef" :model="form">
|
||
<el-tabs v-model="activeTab">
|
||
<!-- 配置信息 Tab -->
|
||
<el-tab-pane label="配置信息" name="base_config">
|
||
<el-divider content-position="left">基础信息</el-divider>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="表名称" prop="table_name" label-width="100px">
|
||
<el-input v-model="form.table_name" disabled />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
数据库表的名称，自动读取数据库表名称
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="表描述"
|
||
prop="table_comment"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '表描述必填' }]"
|
||
>
|
||
<el-input v-model="form.table_comment" />
|
||
<div class="text-xs text-gray-400 mt-1"> 表的描述，自动读取数据库表注释 </div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="实体类"
|
||
prop="class_name"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '实体类必填' }]"
|
||
>
|
||
<el-input v-model="form.class_name" />
|
||
<div class="text-xs text-gray-400 mt-1"> 生成的实体类名称，可以修改去掉前缀 </div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="业务名称"
|
||
prop="business_name"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '业务名称必填' }]"
|
||
>
|
||
<el-input v-model="form.business_name" />
|
||
<div class="text-xs text-gray-400 mt-1"> 英文、业务名称、同一个分组包下唯一 </div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="数据源" prop="source" label-width="100px">
|
||
<el-select v-model="form.source" placeholder="请选择数据源" style="width: 100%">
|
||
<el-option
|
||
v-for="item in dataSourceList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1"> 数据库配置文件中配置的数据源 </div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="备注信息" prop="remark" label-width="100px">
|
||
<el-input v-model="form.remark" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-divider content-position="left">生成信息</el-divider>
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item
|
||
label="应用类型"
|
||
prop="template"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '应用类型必选' }]"
|
||
>
|
||
<el-select
|
||
v-model="form.template"
|
||
placeholder="请选择生成模板"
|
||
style="width: 100%"
|
||
clearable
|
||
>
|
||
<el-option label="webman应用[app]" value="app" />
|
||
<el-option label="webman插件[plugin]" value="plugin" />
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1"
|
||
>默认app模板,生成文件放app目录下，plugin应用需要先手动初始化</div
|
||
>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item
|
||
label="应用名称"
|
||
prop="namespace"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '应用名称必填' }]"
|
||
>
|
||
<el-input v-model="form.namespace" />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
plugin插件名称, 或者app下应用名称, 禁止使用saiadmin
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item
|
||
label="分组包名"
|
||
prop="package_name"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '分组包名必填' }]"
|
||
>
|
||
<el-input v-model="form.package_name" placeholder="请输入分组包名" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
生成的文件放在分组包名目录下，功能模块分组
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item
|
||
label="生成类型"
|
||
prop="tpl_category"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '生成类型必填' }]"
|
||
>
|
||
<el-select
|
||
v-model="form.tpl_category"
|
||
placeholder="请选择所属模块"
|
||
style="width: 100%"
|
||
clearable
|
||
>
|
||
<el-option label="单表CRUD" value="single" />
|
||
<el-option label="树表CRUD" value="tree" />
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
单表须有主键，树表须指定id、parent_id、name等字段
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item
|
||
label="生成路径"
|
||
prop="generate_path"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '生成路径必填' }]"
|
||
>
|
||
<el-input v-model="form.generate_path" />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
前端根目录文件夹名称，必须与后端根目录同级
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item label="模型类型" prop="stub" label-width="100px">
|
||
<div class="flex-col">
|
||
<el-radio-group v-model="form.stub">
|
||
<el-radio value="think">ThinkOrm</el-radio>
|
||
<el-radio value="eloquent">EloquentORM</el-radio>
|
||
</el-radio-group>
|
||
<div class="text-xs text-gray-400 mt-1">生成不同驱动模型的代码</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item label="所属菜单" prop="belong_menu_id" label-width="100px">
|
||
<el-cascader
|
||
v-model="form.belong_menu_id"
|
||
:options="menus"
|
||
:props="{
|
||
expandTrigger: 'hover',
|
||
checkStrictly: true,
|
||
value: 'id',
|
||
label: 'label'
|
||
}"
|
||
style="width: 100%"
|
||
placeholder="生成功能所属菜单"
|
||
clearable
|
||
/>
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
默认为工具菜单栏目下的子菜单。不选择则为顶级菜单栏目
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item
|
||
label="菜单名称"
|
||
prop="menu_name"
|
||
label-width="100px"
|
||
:rules="[{ required: true, message: '菜单名称必选' }]"
|
||
>
|
||
<el-input v-model="form.menu_name" placeholder="请输入菜单名称" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
显示在菜单栏目上的菜单名称、以及代码中的业务功能名称
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="表单效果" prop="component_type" label-width="100px">
|
||
<div class="flex-col">
|
||
<el-radio-group v-model="form.component_type">
|
||
<el-radio-button :value="1">弹出框</el-radio-button>
|
||
<el-radio-button :value="2">抽屉</el-radio-button>
|
||
</el-radio-group>
|
||
<div class="text-xs text-gray-400 mt-1">表单显示方式</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="表单宽度" prop="form_width" label-width="100px">
|
||
<div class="flex-col">
|
||
<el-input-number v-model="form.form_width" :min="200" :max="10000" />
|
||
<div class="text-xs text-gray-400 mt-1">表单组件的宽度，单位为px</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="表单全屏" prop="is_full" label-width="100px">
|
||
<div class="flex-col">
|
||
<el-radio-group v-model="form.is_full">
|
||
<el-radio :value="1">否</el-radio>
|
||
<el-radio :value="2">是</el-radio>
|
||
</el-radio-group>
|
||
<div class="text-xs text-gray-400 mt-1">编辑表单是否全屏</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 树表配置 -->
|
||
<template v-if="form.tpl_category === 'tree'">
|
||
<el-divider content-position="left">树表配置</el-divider>
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item label="树主ID" prop="tree_id" label-width="100px">
|
||
<el-select
|
||
v-model="formOptions.tree_id"
|
||
placeholder="请选择树表的主ID"
|
||
style="width: 100%"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in form.columns"
|
||
:key="index"
|
||
:label="`${item.column_name} - ${item.column_comment}`"
|
||
:value="item.column_name"
|
||
/>
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1">指定树表的主要ID，一般为主键</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item label="树父ID" prop="tree_parent_id" label-width="100px">
|
||
<el-select
|
||
v-model="formOptions.tree_parent_id"
|
||
placeholder="请选择树表的父ID"
|
||
style="width: 100%"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in form.columns"
|
||
:key="index"
|
||
:label="`${item.column_name} - ${item.column_comment}`"
|
||
:value="item.column_name"
|
||
/>
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1">指定树表的父ID，比如：parent_id</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :md="8" :xl="8">
|
||
<el-form-item label="树名称" prop="tree_name" label-width="100px">
|
||
<el-select
|
||
v-model="formOptions.tree_name"
|
||
placeholder="请选择树表的名称字段"
|
||
style="width: 100%"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in form.columns"
|
||
:key="index"
|
||
:label="`${item.column_name} - ${item.column_comment}`"
|
||
:value="item.column_name"
|
||
/>
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1">指定树显示的名称字段，比如：name</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</el-tab-pane>
|
||
|
||
<!-- 字段配置 Tab -->
|
||
<el-tab-pane label="字段配置" name="field_config">
|
||
<el-table :data="form.columns" max-height="750">
|
||
<el-table-column prop="sort" label="排序" width="150">
|
||
<template #default="{ row }">
|
||
<el-input-number
|
||
v-model="row.sort"
|
||
style="width: 100px"
|
||
controls-position="right"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="column_name"
|
||
label="字段名称"
|
||
width="160"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column prop="column_comment" label="字段描述" width="160">
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.column_comment" clearable />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="column_type" label="物理类型" width="100" />
|
||
<el-table-column prop="is_required" label="必填" width="80" align="center">
|
||
<template #header>
|
||
<div class="flex-c justify-center items-center gap-1">
|
||
<span>必填</span>
|
||
<el-checkbox @change="(val) => handlerAll(val, 'required')" />
|
||
</div>
|
||
</template>
|
||
<template #default="{ row }">
|
||
<el-checkbox v-model="row.is_required" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="is_insert" label="表单" width="80" align="center">
|
||
<template #header>
|
||
<div class="flex-c justify-center items-center gap-1">
|
||
<span>表单</span>
|
||
<el-checkbox @change="(val) => handlerAll(val, 'insert')" />
|
||
</div>
|
||
</template>
|
||
<template #default="{ row }">
|
||
<el-checkbox v-model="row.is_insert" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="is_list" label="列表" width="80" align="center">
|
||
<template #header>
|
||
<div class="flex-c justify-center items-center gap-1">
|
||
<span>列表</span>
|
||
<el-checkbox @change="(val) => handlerAll(val, 'list')" />
|
||
</div>
|
||
</template>
|
||
<template #default="{ row }">
|
||
<el-checkbox v-model="row.is_list" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="is_query" label="查询" width="80" align="center">
|
||
<template #header>
|
||
<div class="flex-c justify-center items-center gap-1">
|
||
<span>查询</span>
|
||
<el-checkbox @change="(val) => handlerAll(val, 'query')" />
|
||
</div>
|
||
</template>
|
||
<template #default="{ row }">
|
||
<el-checkbox v-model="row.is_query" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="is_sort" label="排序" width="80" align="center">
|
||
<template #header>
|
||
<div class="flex-c justify-center items-center gap-1">
|
||
<span>排序</span>
|
||
<el-checkbox @change="(val) => handlerAll(val, 'sort')" />
|
||
</div>
|
||
</template>
|
||
<template #default="{ row }">
|
||
<el-checkbox v-model="row.is_sort" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="query_type" label="查询方式" width="150">
|
||
<template #default="{ row }">
|
||
<el-select v-model="row.query_type" clearable>
|
||
<el-option
|
||
v-for="item in queryType"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="view_type" label="页面控件">
|
||
<template #default="{ row }">
|
||
<div class="flex items-center gap-2">
|
||
<el-select
|
||
v-model="row.view_type"
|
||
style="width: 140px"
|
||
@change="changeViewType(row)"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in viewComponent"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
<el-link
|
||
v-if="notNeedSettingComponents.includes(row.view_type)"
|
||
@click="settingComponentRef.open(row)"
|
||
>
|
||
设置
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dict_type" label="数据字典">
|
||
<template #default="{ row }">
|
||
<el-select
|
||
v-model="row.dict_type"
|
||
clearable
|
||
placeholder="选择数据字典"
|
||
:disabled="!['saSelect', 'radio', 'checkbox'].includes(row.view_type)"
|
||
>
|
||
<el-option
|
||
v-for="(item, key) in dictStore.dictList"
|
||
:key="key"
|
||
:label="key"
|
||
:value="key"
|
||
/>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
|
||
<!-- 关联配置 Tab -->
|
||
<el-tab-pane label="关联配置" name="relation_config">
|
||
<el-alert type="info" :closable="false">
|
||
模型关联支持：一对一、一对多、一对一（反向）、多对多。
|
||
</el-alert>
|
||
|
||
<el-button type="primary" class="mt-4 mb-4" @click="addRelation">
|
||
<template #icon>
|
||
<ArtSvgIcon icon="ri:add-line" />
|
||
</template>
|
||
新增关联
|
||
</el-button>
|
||
|
||
<div v-for="(item, index) in formOptions.relations" :key="index">
|
||
<el-divider content-position="left">
|
||
{{ item.name ? item.name : '定义新关联' }}
|
||
<el-link type="danger" class="ml-5" @click="delRelation(index)">
|
||
<ArtSvgIcon icon="ri:delete-bin-line" class="mr-1" />
|
||
删除定义
|
||
</el-link>
|
||
</el-divider>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="关联类型" label-width="100px">
|
||
<el-select
|
||
v-model="item.type"
|
||
placeholder="请选择关联类型"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="types in relationsType"
|
||
:key="types.value"
|
||
:label="types.name"
|
||
:value="types.value"
|
||
/>
|
||
</el-select>
|
||
<div class="text-xs text-gray-400 mt-1">指定关联类型</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="关联名称" label-width="100px">
|
||
<el-input v-model="item.name" placeholder="设置关联名称" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">属性名称，代码中with调用的名称</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="关联模型" label-width="100px">
|
||
<el-input v-model="item.model" placeholder="设置关联模型" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">选择要关联的实体模型</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
:label="
|
||
item.type === 'belongsTo'
|
||
? '外键'
|
||
: item.type === 'belongsToMany'
|
||
? '外键'
|
||
: '当前模型主键'
|
||
"
|
||
label-width="100px"
|
||
>
|
||
<el-input v-model="item.localKey" placeholder="设置键名" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
{{
|
||
item.type === 'belongsTo'
|
||
? '关联模型_id'
|
||
: item.type === 'belongsToMany'
|
||
? '关联模型_id'
|
||
: '当前模型主键'
|
||
}}
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col v-show="item.type === 'belongsToMany'" :span="8">
|
||
<el-form-item label="中间模型" label-width="100px">
|
||
<el-input v-model="item.table" placeholder="请输入中间模型" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">多对多关联的中间模型</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
:label="item.type === 'belongsTo' ? '关联主键' : '外键'"
|
||
label-width="100px"
|
||
>
|
||
<el-input v-model="item.foreignKey" placeholder="设置键名" clearable />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
{{ item.type === 'belongsTo' ? '关联模型主键' : '当前模型_id' }}
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 设置组件弹窗 -->
|
||
<SettingComponent ref="settingComponentRef" @confirm="confirmSetting" />
|
||
|
||
<template #footer>
|
||
<el-button @click="handleClose">取消</el-button>
|
||
<el-button type="primary" :loading="submitLoading" @click="save">保存</el-button>
|
||
</template>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ElMessage } from 'element-plus'
|
||
import type { CheckboxValueType, FormInstance } from 'element-plus'
|
||
import { useDictStore } from '@/store/modules/dict'
|
||
|
||
// 接口导入
|
||
import generate from '@/api/tool/generate'
|
||
import database from '@/api/safeguard/database'
|
||
import menuApi from '@/api/system/menu'
|
||
|
||
import SettingComponent from './settingComponent.vue'
|
||
|
||
// 导入变量
|
||
import { relationsType, queryType, viewComponent } from '../js/vars'
|
||
|
||
interface Props {
|
||
modelValue: boolean
|
||
data?: Record<string, any>
|
||
}
|
||
|
||
interface Emits {
|
||
(e: 'update:modelValue', value: boolean): void
|
||
(e: 'success'): void
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
modelValue: false,
|
||
data: undefined
|
||
})
|
||
|
||
const emit = defineEmits<Emits>()
|
||
|
||
const dictStore = useDictStore()
|
||
|
||
const record = ref<any>({})
|
||
const loading = ref(true)
|
||
const submitLoading = ref(false)
|
||
const activeTab = ref('base_config')
|
||
const formRef = ref<FormInstance>()
|
||
const settingComponentRef = ref()
|
||
|
||
const notNeedSettingComponents = ref([
|
||
'uploadFile',
|
||
'uploadImage',
|
||
'imagePicker',
|
||
'chunkUpload',
|
||
'editor',
|
||
'date',
|
||
'userSelect'
|
||
])
|
||
|
||
const form = ref<any>({
|
||
generate_menus: ['index', 'save', 'update', 'read', 'destroy'],
|
||
columns: []
|
||
})
|
||
|
||
// form扩展组
|
||
const formOptions = ref<any>({
|
||
relations: []
|
||
})
|
||
// 菜单列表
|
||
const menus = ref<any[]>([])
|
||
// 数据源
|
||
const dataSourceList = ref<{ label: string; value: string }[]>([])
|
||
|
||
/**
|
||
* 弹窗显示状态双向绑定
|
||
*/
|
||
const visible = computed({
|
||
get: () => props.modelValue,
|
||
set: (value) => emit('update:modelValue', value)
|
||
})
|
||
|
||
/**
|
||
* 监听弹窗打开，初始化表单数据
|
||
*/
|
||
watch(
|
||
() => props.modelValue,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
initPage()
|
||
}
|
||
}
|
||
)
|
||
|
||
/**
|
||
* 初始化页面数据
|
||
*/
|
||
const initPage = async () => {
|
||
loading.value = true
|
||
// 获取数据源
|
||
const data = await database.getDataSource()
|
||
dataSourceList.value = data.map((item: any) => ({
|
||
label: item,
|
||
value: item
|
||
}))
|
||
const response = await generate.read({ id: props.data?.id })
|
||
record.value = response
|
||
initForm()
|
||
loading.value = false
|
||
}
|
||
|
||
/**
|
||
* 设置组件确认
|
||
*/
|
||
const confirmSetting = (name: string, value: any) => {
|
||
form.value.columns.find((item: any, idx: number) => {
|
||
if (item.column_name === name) {
|
||
form.value.columns[idx].options = value
|
||
}
|
||
})
|
||
ElMessage.success('组件设置成功')
|
||
}
|
||
|
||
/**
|
||
* 切换页面控件类型
|
||
*/
|
||
const changeViewType = (record: any) => {
|
||
if (
|
||
record.view_type === 'uploadImage' ||
|
||
record.view_type === 'imagePicker' ||
|
||
record.view_type === 'uploadFile' ||
|
||
record.view_type === 'chunkUpload'
|
||
) {
|
||
record.options = { multiple: false, limit: 1 }
|
||
} else if (record.view_type === 'editor') {
|
||
record.options = { height: 400 }
|
||
} else if (record.view_type === 'date') {
|
||
record.options = { mode: 'date' }
|
||
} else if (record.view_type === 'userSelect') {
|
||
record.options = { multiple: false }
|
||
} else {
|
||
record.options = {}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
const save = async () => {
|
||
if (form.value.namespace === 'saiadmin') {
|
||
ElMessage.error('应用名称不能为saiadmin')
|
||
return
|
||
}
|
||
|
||
const validResult = await formRef.value?.validate().catch((err) => err)
|
||
if (validResult !== true) {
|
||
return
|
||
}
|
||
|
||
submitLoading.value = true
|
||
try {
|
||
form.value.options = formOptions.value
|
||
await generate.update({ ...form.value })
|
||
ElMessage.success('更新成功')
|
||
emit('success')
|
||
handleClose()
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 全选 / 全不选
|
||
*/
|
||
const handlerAll = (value: CheckboxValueType, type: string) => {
|
||
form.value.columns.forEach((item: any) => {
|
||
item['is_' + type] = value
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 新增关联定义
|
||
*/
|
||
const addRelation = () => {
|
||
formOptions.value.relations.push({
|
||
name: '',
|
||
type: 'hasOne',
|
||
model: '',
|
||
foreignKey: '',
|
||
localKey: '',
|
||
table: ''
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 删除关联定义
|
||
*/
|
||
const delRelation = (idx: number | string) => {
|
||
formOptions.value.relations.splice(idx, 1)
|
||
}
|
||
|
||
/**
|
||
* 初始化数据
|
||
*/
|
||
const initForm = () => {
|
||
// 设置form数据
|
||
for (const name in record.value) {
|
||
if (name === 'generate_menus') {
|
||
form.value[name] = record.value[name] ? record.value[name].split(',') : []
|
||
} else {
|
||
form.value[name] = record.value[name]
|
||
}
|
||
}
|
||
|
||
if (record.value.options && record.value.options.relations) {
|
||
formOptions.value.relations = record.value.options.relations
|
||
} else {
|
||
formOptions.value.relations = []
|
||
}
|
||
|
||
if (record.value.tpl_category === 'tree') {
|
||
formOptions.value.tree_id = record.value.options.tree_id
|
||
formOptions.value.tree_name = record.value.options.tree_name
|
||
formOptions.value.tree_parent_id = record.value.options.tree_parent_id
|
||
}
|
||
|
||
// 请求表字段
|
||
generate.getTableColumns({ table_id: record.value.id }).then((data: any) => {
|
||
form.value.columns = []
|
||
data.forEach((item: any) => {
|
||
item.is_required = item.is_required === 2 ? true : false
|
||
item.is_insert = item.is_insert === 2 ? true : false
|
||
item.is_edit = item.is_edit === 2 ? true : false
|
||
item.is_list = item.is_list === 2 ? true : false
|
||
item.is_query = item.is_query === 2 ? true : false
|
||
item.is_sort = item.is_sort === 2 ? true : false
|
||
form.value.columns.push(item)
|
||
})
|
||
})
|
||
|
||
// 请求菜单列表
|
||
menuApi.list({ tree: true, menu: true }).then((data: any) => {
|
||
menus.value = data
|
||
menus.value.unshift({ id: 0, value: 0, label: '顶级菜单' })
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 关闭弹窗
|
||
*/
|
||
const handleClose = () => {
|
||
visible.value = false
|
||
formRef.value?.resetFields()
|
||
}
|
||
</script>
|