修改新版样式

This commit is contained in:
蒋吉兆
2021-09-18 00:10:17 +08:00
parent 122c284cd0
commit 983e343373
20 changed files with 948 additions and 1964 deletions
+130 -128
View File
@@ -1,136 +1,138 @@
<template>
<div>
<!-- 从数据库直接获取字段 -->
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template #title>
<div :style="{fontSize:'16px',paddingLeft:'20px'}">
点这里从现有数据库创建代码
<i class="header-icon el-icon-thumb" />
</div>
</template>
<el-form ref="getTableForm" :inline="true" :model="dbform" label-width="120px">
<el-form-item label="数据库名" prop="structName">
<el-select v-model="dbform.dbName" filterable placeholder="请选择数据库" @change="getTable">
<el-option
v-for="item in dbOptions"
:key="item.database"
:label="item.database"
:value="item.database"
/>
</el-select>
</el-form-item>
<el-form-item label="表名" prop="structName">
<el-select
v-model="dbform.tableName"
:disabled="!dbform.dbName"
filterable
placeholder="请选择表"
>
<el-option
v-for="item in tableOptions"
:key="item.tableName"
:label="item.tableName"
:value="item.tableName"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="getColumn">使用此表创建</el-button>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<el-divider />
<!-- 初始版本自动化代码工具 -->
<el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
<el-form-item label="Struct名称" prop="structName">
<el-input v-model="form.structName" placeholder="首字母自动转换大写" />
</el-form-item>
<el-form-item label="tableName" prop="tableName">
<el-input v-model="form.tableName" placeholder="指定表名(非必填)" />
</el-form-item>
<el-form-item label="Struct简称" prop="abbreviation">
<el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group" />
</el-form-item>
<el-form-item label="Struct中文名称" prop="description">
<el-input v-model="form.description" placeholder="中文描述作为自动api描述" />
</el-form-item>
<el-form-item label="文件名称" prop="packageName">
<el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" />
</el-form-item>
<el-form-item>
<template #label>
<el-tooltip content="注:把自动生成的API注册进数据库" placement="bottom" effect="light">
<div> 自动创建API </div>
</el-tooltip>
</template>
<el-checkbox v-model="form.autoCreateApiToSql" />
</el-form-item>
<el-form-item>
<template #label>
<el-tooltip content="注:自动迁移生成的文件到ymal配置的对应位置" placement="bottom" effect="light">
<div> 自动移动文件 </div>
</el-tooltip>
</template>
<el-checkbox v-model="form.autoMoveFile" />
</el-form-item>
</el-form>
<!-- 组件列表 -->
<div class="gva-btn-list">
<el-button size="mini" type="primary" @click="editAndAddField()">新增Field</el-button>
</div>
<el-table :data="form.fields" border stripe>
<el-table-column type="index" label="序列" width="100" />
<el-table-column prop="fieldName" label="Field名" />
<el-table-column prop="fieldDesc" label="中文名" />
<el-table-column prop="fieldJson" label="FieldJson" />
<el-table-column prop="fieldType" label="Field数据类型" width="130" />
<el-table-column prop="dataType" label="数据库字段类型" width="130" />
<el-table-column prop="dataTypeLong" label="数据库字段长度" width="130" />
<el-table-column prop="columnName" label="数据库字段" width="130" />
<el-table-column prop="comment" label="数据库字段描述" width="130" />
<el-table-column prop="fieldSearchType" label="搜索条件" width="130" />
<el-table-column prop="dictType" label="字典" width="130" />
<el-table-column label="操作" width="300">
<template #default="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
@click="editAndAddField(scope.row)"
>编辑</el-button>
<el-button
size="mini"
type="text"
:disabled="scope.$index === 0"
@click="moveUpField(scope.$index)"
>上移</el-button>
<el-button
size="mini"
type="text"
:disabled="(scope.$index + 1) === form.fields.length"
@click="moveDownField(scope.$index)"
>下移</el-button>
<el-popover v-model:visible="scope.row.visible" placement="top">
<p>确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
<div class="gva-search-box">
<el-collapse v-model="activeNames" style="margin-bottom:12px">
<el-collapse-item name="1">
<template #title>
<div :style="{fontSize:'16px',paddingLeft:'20px'}">
点这里从现有数据库创建代码
<i class="header-icon el-icon-thumb" />
</div>
<template #reference>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-popover>
</template>
</el-table-column>
</el-table>
<el-tag type="danger">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
</template>
<el-form ref="getTableForm" style="margin-top:24px" :inline="true" :model="dbform" label-width="120px">
<el-form-item label="数据库名" prop="structName">
<el-select v-model="dbform.dbName" filterable placeholder="请选择数据库" @change="getTable">
<el-option
v-for="item in dbOptions"
:key="item.database"
:label="item.database"
:value="item.database"
/>
</el-select>
</el-form-item>
<el-form-item label="表名" prop="structName">
<el-select
v-model="dbform.tableName"
:disabled="!dbform.dbName"
filterable
placeholder="请选择表"
>
<el-option
v-for="item in tableOptions"
:key="item.tableName"
:label="item.tableName"
:value="item.tableName"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="getColumn">使用此表创建</el-button>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<!-- 初始版本自动化代码工具 -->
<el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
<el-form-item label="Struct名称" prop="structName">
<el-input v-model="form.structName" placeholder="首字母自动转换大写" />
</el-form-item>
<el-form-item label="tableName" prop="tableName">
<el-input v-model="form.tableName" placeholder="指定表名(非必填)" />
</el-form-item>
<el-form-item label="Struct简称" prop="abbreviation">
<el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group" />
</el-form-item>
<el-form-item label="Struct中文名称" prop="description">
<el-input v-model="form.description" placeholder="中文描述作为自动api描述" />
</el-form-item>
<el-form-item label="文件名称" prop="packageName">
<el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" />
</el-form-item>
<el-form-item>
<template #label>
<el-tooltip content="注:把自动生成的API注册进数据库" placement="bottom" effect="light">
<div> 自动创建API </div>
</el-tooltip>
</template>
<el-checkbox v-model="form.autoCreateApiToSql" />
</el-form-item>
<el-form-item>
<template #label>
<el-tooltip content="注:自动迁移生成的文件到ymal配置的对应位置" placement="bottom" effect="light">
<div> 自动移动文件 </div>
</el-tooltip>
</template>
<el-checkbox v-model="form.autoMoveFile" />
</el-form-item>
</el-form>
</div>
<!-- 组件列表 -->
<div class="gva-btn-list">
<el-button size="mini" type="primary" @click="enterForm(true)">预览代码</el-button>
<el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="mini" type="primary" @click="editAndAddField()">新增Field</el-button>
</div>
<el-table :data="form.fields">
<el-table-column type="index" label="序列" width="100" />
<el-table-column prop="fieldName" label="Field名" />
<el-table-column prop="fieldDesc" label="中文名" />
<el-table-column prop="fieldJson" label="FieldJson" />
<el-table-column prop="fieldType" label="Field数据类型" width="130" />
<el-table-column prop="dataType" label="数据库字段类型" width="130" />
<el-table-column prop="dataTypeLong" label="数据库字段长度" width="130" />
<el-table-column prop="columnName" label="数据库字段" width="130" />
<el-table-column prop="comment" label="数据库字段描述" width="130" />
<el-table-column prop="fieldSearchType" label="搜索条件" width="130" />
<el-table-column prop="dictType" label="字典" width="130" />
<el-table-column label="操作" width="300">
<template #default="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="editAndAddField(scope.row)"
>编辑</el-button>
<el-button
size="mini"
type="text"
:disabled="scope.$index === 0"
@click="moveUpField(scope.$index)"
>上移</el-button>
<el-button
size="mini"
type="text"
:disabled="(scope.$index + 1) === form.fields.length"
@click="moveDownField(scope.$index)"
>下移</el-button>
<el-popover v-model:visible="scope.row.visible" placement="top">
<p>确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
</div>
<template #reference>
<el-button size="mini" type="text" icon="el-icon-delete">删除</el-button>
</template>
</el-popover>
</template>
</el-table-column>
</el-table>
<el-tag type="danger" style="margin:12px 0;">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
<!-- 组件列表 -->
<div class="gva-btn-list justify-content-flex-end">
<el-button size="mini" type="primary" @click="enterForm(true)">预览代码</el-button>
<el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
</div>
</div>
<!-- 组件弹窗 -->
<el-dialog v-model="dialogFlag" title="组件内容">