Browse Source

修改form模板 调整form基本样式

main
蒋吉兆 3 years ago
parent
commit
4ec4d2de32
  1. 2
      server/resource/template/web/form.vue.tpl
  2. 18
      web/src/style/main.scss
  3. 2
      web/src/view/superAdmin/menu/icon.vue
  4. 7
      web/src/view/superAdmin/menu/menu.vue
  5. 11
      web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
  6. 16
      web/src/view/systemTools/autoCode/index.vue

2
server/resource/template/web/form.vue.tpl

@ -1,5 +1,6 @@
<template> <template>
<div> <div>
<div class="gva-form-box">
<el-form :model="formData" label-position="right" label-width="80px"> <el-form :model="formData" label-position="right" label-width="80px">
{{- range .Fields}} {{- range .Fields}}
<el-form-item label="{{.FieldDesc}}:"> <el-form-item label="{{.FieldDesc}}:">
@ -32,6 +33,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div>
</template> </template>
<script> <script>

18
web/src/style/main.scss

@ -761,11 +761,6 @@ li {
.upload { .upload {
padding: 0; padding: 0;
} }
.el-form.el-form--inline {
.el-form-item:last-child {
margin-bottom: 0;
}
}
.edit_container, .edit_container,
.edit { .edit {
padding: 0; padding: 0;
@ -1419,6 +1414,13 @@ $mainHight: 100vh;
} }
.gva-search-box { .gva-search-box {
.el-collapse {
border: none;
.el-collapse-item__header,
.el-collapse-item__wrap {
border-bottom: none;
}
}
padding: 24px; padding: 24px;
padding-bottom: 2px; padding-bottom: 2px;
background-color: #fff; background-color: #fff;
@ -1431,6 +1433,12 @@ $mainHight: 100vh;
} }
} }
.gva-form-box {
padding: 24px;
background-color: #fff;
border-radius: 2px;
}
.gva-table-box { .gva-table-box {
padding: 24px; padding: 24px;
background-color: #fff; background-color: #fff;

2
web/src/view/superAdmin/menu/icon.vue

@ -5,7 +5,7 @@
:class="'el-icon-'+ metaData.icon" :class="'el-icon-'+ metaData.icon"
style="position: absolute; z-index: 9999; padding: 5px 10px; " style="position: absolute; z-index: 9999; padding: 5px 10px; "
/> />
<el-select v-model="metaData.icon" clearable filterable class="gva-select" placeholder="请选择">
<el-select v-model="metaData.icon" style="width:100%" clearable filterable class="gva-select" placeholder="请选择">
<el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key"> <el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key">
<span class="icon" :class="item.label" /> <span class="icon" :class="item.label" />
<span style="float: left">{{ item.key }}</span> <span style="float: left">{{ item.key }}</span>

7
web/src/view/superAdmin/menu/menu.vue

@ -96,6 +96,7 @@
<el-form-item label="父节点ID" style="width:30%"> <el-form-item label="父节点ID" style="width:30%">
<el-cascader <el-cascader
v-model="form.parentId" v-model="form.parentId"
style="width:100%"
:disabled="!isEdit" :disabled="!isEdit"
:options="menuOption" :options="menuOption"
:props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}" :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
@ -111,19 +112,19 @@
<el-input v-model="form.meta.title" autocomplete="off" /> <el-input v-model="form.meta.title" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="图标" prop="meta.icon" style="width:30%"> <el-form-item label="图标" prop="meta.icon" style="width:30%">
<icon :meta="form.meta" />
<icon :meta="form.meta" style="width:100%" />
</el-form-item> </el-form-item>
<el-form-item label="排序标记" prop="sort" style="width:30%"> <el-form-item label="排序标记" prop="sort" style="width:30%">
<el-input v-model.number="form.sort" autocomplete="off" /> <el-input v-model.number="form.sort" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="KeepAlive" prop="meta.keepAlive" style="width:30%"> <el-form-item label="KeepAlive" prop="meta.keepAlive" style="width:30%">
<el-select v-model="form.meta.keepAlive" placeholder="是否keepAlive缓存页面">
<el-select v-model="form.meta.keepAlive" style="width:100%" placeholder="是否keepAlive缓存页面">
<el-option :value="false" label="否" /> <el-option :value="false" label="否" />
<el-option :value="true" label="是" /> <el-option :value="true" label="是" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="CloseTab" prop="meta.closeTab" style="width:30%"> <el-form-item label="CloseTab" prop="meta.closeTab" style="width:30%">
<el-select v-model="form.meta.closeTab" placeholder="是否自动关闭tab">
<el-select v-model="form.meta.closeTab" style="width:100%" placeholder="是否自动关闭tab">
<el-option :value="false" label="否" /> <el-option :value="false" label="否" />
<el-option :value="true" label="是" /> <el-option :value="true" label="是" />
</el-select> </el-select>

11
web/src/view/systemTools/autoCode/component/previewCodeDialg.vue

@ -1,10 +1,5 @@
<template> <template>
<div class="previewCode"> <div class="previewCode">
<div class="previewCodeTool">
<p>操作栏</p>
<el-button @click="selectText">全选</el-button>
<el-button @click="copy">复制</el-button>
</div>
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane v-for="(item, key) in previewCode" :key="key" :label="key" :name="key"> <el-tab-pane v-for="(item, key) in previewCode" :key="key" :label="key" :name="key">
<div :id="key" class="tab-info" /> <div :id="key" class="tab-info" />
@ -82,12 +77,6 @@ export default {
<style lang="scss"> <style lang="scss">
.previewCode { .previewCode {
.previewCodeTool {
display: flex;
align-items: center;
padding: 5px 0;
margin-top: -40px;
}
.tab-info { .tab-info {
height: 50vh; height: 50vh;
background: #fff; background: #fff;

16
web/src/view/systemTools/autoCode/index.vue

@ -42,6 +42,8 @@
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div>
<div class="gva-search-box">
<!-- 初始版本自动化代码工具 --> <!-- 初始版本自动化代码工具 -->
<el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true"> <el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
<el-form-item label="Struct名称" prop="structName"> <el-form-item label="Struct名称" prop="structName">
@ -146,9 +148,16 @@
</el-dialog> </el-dialog>
<el-dialog v-model="previewFlag"> <el-dialog v-model="previewFlag">
<template #title>
<div class="previewCodeTool">
<p>操作栏</p>
<el-button size="mini" type="primary" @click="selectText">全选</el-button>
<el-button size="mini" type="primary" @click="copy">复制</el-button>
</div>
</template>
<PreviewCodeDialog v-if="previewFlag" :preview-code="preViewCode" /> <PreviewCodeDialog v-if="previewFlag" :preview-code="preViewCode" />
<template #footer> <template #footer>
<div class="dialog-footer">
<div class="dialog-footer" style="padding-top:14px;padding-right:14px">
<el-button size="small" type="primary" @click="previewFlag = false"> </el-button> <el-button size="small" type="primary" @click="previewFlag = false"> </el-button>
</div> </div>
</template> </template>
@ -427,6 +436,11 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.previewCodeTool {
display: flex;
align-items: center;
padding: 5px 0;
}
.button-box { .button-box {
padding: 10px 20px; padding: 10px 20px;
.el-button { .el-button {

Loading…
Cancel
Save