0317样式更改

src/main/resources/templates/EditViewTemplate.ftl

@@ -1,6 +1,7 @@
 <template>
     <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="${labelWidth}" label-position="right" size="small"
+        <el-form :model="formData" :rules="rules" ref="form" label-width="${labelWidth}" label-position="right"
+                 size="small"
                  style="max-width: 500px;">
             <#list model.fields as field>
                 <el-form-item prop="${field.modelName}" label="${field.remark}">
@@ -26,7 +27,7 @@
                                     placeholder="选择日期时间">
                             </el-date-picker>
                         <#elseif field.formType == 'select'>
-                            <el-select v-model="formData.${field.modelName}" clearable filterable  placeholder="请选择">
+                            <el-select v-model="formData.${field.modelName}" clearable filterable placeholder="请选择">
                                 <el-option
                                         v-for="item in ${field.modelName}Options"
                                         :key="item.value"
@@ -36,7 +37,8 @@
                             </el-select>
                         <#elseif field.formType == 'multiSelect'>
                             <template>
-                                <el-select v-model="formData.${field.modelName}" multiple clearable filterable  placeholder="请选择">
+                                <el-select v-model="formData.${field.modelName}" multiple clearable filterable
+                                           placeholder="请选择">
                                     <el-option
                                             v-for="item in ${field.modelName}Options"
                                             :key="item.value"
@@ -55,7 +57,7 @@
                                     action="../upload/file"
                                     :on-change="handleChange"
                                     :file-list="fileList3">
-                                <el-button size="small" type="primary" >
+                                <el-button size="small" type="primary">
                                     点击上传
                                 </el-button>
                             </el-upload>
@@ -83,13 +85,14 @@
                     </#if>
                 </el-form-item>
             </#list>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
+            <el-form-item class="form-submit">
+                <el-button @click="onSave" :loading="saving" size="default"
+                           type="primary">保存
+                </el-button>
+                <el-button @click="onDelete" :loading="saving" size="default"
                            type="danger" v-if="formData.id">删除
                 </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
+                <el-button @click="$router.go(-1)" size="default">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -100,16 +103,16 @@
         created() {
             if (this.$route.query.id) {
                 this.$http
-                    .get('${model.className?uncap_first}/get/'+${r'this.$route.query.id'})
+                    .get('${model.className?uncap_first}/get/' + ${r'this.$route.query.id'})
                     .then(res => {
                         <#list model.fields as field>
-                            <#if field.formType == 'multiSelect'>
-                            if(res.${field.modelName}) {
-                                res.${field.modelName} = res.${field.modelName}.split(',');
-                            } else {
-                                res.${field.modelName} = [];
-                            }
-                            </#if>
+                        <#if field.formType == 'multiSelect'>
+                        if (res.${field.modelName}) {
+                            res.${field.modelName} = res.${field.modelName}.split(',');
+                        } else {
+                            res.${field.modelName} = [];
+                        }
+                        </#if>
                         </#list>
                         this.formData = res;
                     })
@@ -119,13 +122,13 @@
                     });
             }
             <#list model.fields as field>
-                <#if (field.formType == 'select' || field.formType == 'multiSelect') && field.apiFlag == '2'>
-            this.$http.get('${field.optionsMethod}', { size: 1000, query: { del: false } }).then(res => {
+            <#if (field.formType == 'select' || field.formType == 'multiSelect') && field.apiFlag == '2'>
+            this.$http.get('${field.optionsMethod}', {size: 1000, query: {del: false}}).then(res => {
                 if (res.content.length > 0) {
-                res.content.forEach(item => {
+                    res.content.forEach(item => {
                         this.${field.modelName}Options.push({
                             label: item.${field.optionsLabel},
-                            value: item.${field.optionsValue}<#if field.formType == 'multiSelect'>+ ''</#if>
+                            value: item.${field.optionsValue}<#if field.formType == 'multiSelect'> + ''</#if>
                         });
                     })
                 }
@@ -133,7 +136,7 @@
                 console.log(e);
                 this.$message.error(e.error);
             });
-                </#if>
+            </#if>
             </#list>
         },
         data() {
@@ -141,99 +144,99 @@
                 saving: false,
                 formData: {
                     <#list model.fields as field>
-                        <#if field.formType == 'loginName'>
-                            ${field.modelName}: '',
-                        </#if>
+                    <#if field.formType == 'loginName'>
+                    ${field.modelName}: '',
+                    </#if>
                     </#list>
                 },
                 rules: {
-                <#list model.fields as field>
+                    <#list model.fields as field>
                     <#if field.required!false == true || field.validate!false == true>
-                        ${field.modelName}: [
+                    ${field.modelName}: [
                         <#if field.required!false == true>
-                            {
-                                required: true,
-                                message: '请输入${field.remark!field.modelName}',
-                                trigger: 'blur'
-                            },
+                        {
+                            required: true,
+                            message: '请输入${field.remark!field.modelName}',
+                            trigger: 'blur'
+                        },
                         </#if>
                         <#if field.validate!false == true>
-                            <#if field.maxLength?? && field.minLength??>
-                                {
-                                    min: ${field.minLength},
-                                    max: ${field.maxLength},
-                                    message: '长度在 ${field.minLength} 到 ${field.maxLength} 个字符',
-                                    trigger: 'blur'
-                                },
-                            </#if>
-                            <#if field.min?? && field.max??>
-                                {
-                                    validator: (rule, value, callback) => {
-                                    if(value) {
-                                        if (value <= ${field.max} && value >= ${field.min}) {
-                                            callback();
-                                        } else {
-                                            callback(new Error('值在 ${field.min} 到 ${field.max} 之间'));
-                                        }
+                        <#if field.maxLength?? && field.minLength??>
+                        {
+                            min: ${field.minLength},
+                            max: ${field.maxLength},
+                            message: '长度在 ${field.minLength} 到 ${field.maxLength} 个字符',
+                            trigger: 'blur'
+                        },
+                        </#if>
+                        <#if field.min?? && field.max??>
+                        {
+                            validator: (rule, value, callback) => {
+                                if (value) {
+                                    if (value <= ${field.max} && value >= ${field.min}) {
+                                        callback();
+                                    } else {
+                                        callback(new Error('值在 ${field.min} 到 ${field.max} 之间'));
                                     }
-                                }, trigger: 'blur'
-                            },
-                            </#if>
-                            <#if field.validatorType == 'phone'>
-                                {
-                                    pattern: /^1[3-9]\d{9}$/,
-                                    message: "请输入正确的手机号",
-                                    trigger: "blur"
-                                },
-                            </#if>
-                            <#if field.validatorType == 'number'>
-                                {
-                                    type: "number",
-                                    message: "输入有误",
-                                    trigger: "blur"
-                                },
-                            </#if>
-                            <#if field.validatorType == 'url'>
-                                {
-                                    pattern: /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
-                                    message: "请输入正确的URL",
-                                    trigger: "blur"
-                                },
-                            </#if>
-                            <#if field.validatorType == 'email'>
-                                {
-                                    type: "email",
-                                    message: "请输入正确的邮箱地址",
-                                    trigger: "blur"
-                                },
-                            </#if>
-                            <#if field.validatorType == 'id'>
-                                {
-                                    pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/,
-                                    message: "请输入正确的身份证号码",
-                                    trigger: "blur"
-                                },
-                            </#if>
-                            <#if field.validatorType == 'english'>
-                                {
-                                    pattern: /^[A-Za-z].+$/,
-                                    message: "输入有误",
-                                    trigger: "blur"
-                                },
-                            </#if>
+                                }
+                            }, trigger: 'blur'
+                        },
+                        </#if>
+                        <#if field.validatorType == 'phone'>
+                        {
+                            pattern: /^1[3-9]\d{9}$/,
+                            message: "请输入正确的手机号",
+                            trigger: "blur"
+                        },
+                        </#if>
+                        <#if field.validatorType == 'number'>
+                        {
+                            type: "number",
+                            message: "输入有误",
+                            trigger: "blur"
+                        },
+                        </#if>
+                        <#if field.validatorType == 'url'>
+                        {
+                            pattern: /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
+                            message: "请输入正确的URL",
+                            trigger: "blur"
+                        },
+                        </#if>
+                        <#if field.validatorType == 'email'>
+                        {
+                            type: "email",
+                            message: "请输入正确的邮箱地址",
+                            trigger: "blur"
+                        },
+                        </#if>
+                        <#if field.validatorType == 'id'>
+                        {
+                            pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/,
+                            message: "请输入正确的身份证号码",
+                            trigger: "blur"
+                        },
+                        </#if>
+                        <#if field.validatorType == 'english'>
+                        {
+                            pattern: /^[A-Za-z].+$/,
+                            message: "输入有误",
+                            trigger: "blur"
+                        },
+                        </#if>
                         </#if>
                     ],
-                </#if>
-                </#list>
+                    </#if>
+                    </#list>
                 },
                 <#list model.fields as field>
-                    <#if (field.formType == 'select' || field.formType=='multiSelect')>
-                        <#if (field.apiFlag == '2' || field.apiFlag == '3')>
-                            ${field.modelName}Options:[],
-                        <#else>
-                            ${field.modelName}Options:${field.optionsValue},
-                        </#if>
-                    </#if>
+                <#if (field.formType == 'select' || field.formType=='multiSelect')>
+                <#if (field.apiFlag == '2' || field.apiFlag == '3')>
+                ${field.modelName}Options: [],
+                <#else>
+                ${field.modelName}Options: ${field.optionsValue},
+                </#if>
+                </#if>
                 </#list>
             }
         },
@@ -251,11 +254,11 @@
                 let data = {...this.formData};
 
                 <#list model.fields as field>
-                    <#if field.formType == 'currentTime"||${field.formType}=="currentDate'>
-                        if (data.${field.modelName}) {
-                            data.${field.modelName} = Date.parse(new Date(data.${field.modelName}));
-                        }
-                    </#if>
+                <#if field.formType == 'currentTime"||${field.formType}=="currentDate'>
+                if (data.${field.modelName}) {
+                    data.${field.modelName} = Date.parse(new Date(data.${field.modelName}));
+                }
+                </#if>
                 </#list>
                 this.saving = true;
                 this.$http

src/main/resources/templates/ListViewTemplate.ftl

@@ -1,18 +1,19 @@
 <template>
     <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <el-button @click="download" type="primary" icon="el-icon-download"
-                       :loading="downloading" class="filter-item">导出EXCEL
+        <div class="header-btn-right">
+            <el-button @click="addRow" type="primary" icon="el-icon-plus" :loading="downloading" class="filter-item">新增</el-button>
+            <el-button @click="download" icon="el-icon-upload2" :loading="downloading" class="filter-item"
+            >导出
             </el-button>
         </div>
+        <div class="filters-container">
+            <div class="filter-left"></div>
+            <div class="filter-right">
+                <el-input placeholder="搜索..." v-model="search" clearable class="filter-item search">
+                    <el-button @click="getData" slot="append" icon="el-icon-search"> </el-button>
+                </el-input>
+            </div>
+        </div>
         <el-table :data="tableData" row-key="id" ref="table"
                   header-row-class-name="table-header-row"
                   header-cell-class-name="table-header-cell"

src/main/vue/src/styles/app.less

@@ -1,8 +1,8 @@
 html {
     width: 100%;
     height: 100%;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+        sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin: 0;
@@ -14,8 +14,8 @@ body {
     width: 100%;
     height: 100%;
     background: white;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+        sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin: 0;
@@ -77,6 +77,7 @@ li {
 }
 
 .filters-container {
+    display: flex;
     .filter-item {
         margin-bottom: 10px;
         margin-right: 10px;
@@ -90,6 +91,38 @@ li {
     .filter-item.el-input {
         width: 200px;
     }
+    .filter-left {
+        flex-grow: 1;
+    }
+    .filter-right {
+        .el-input.search {
+            // width: 245px;
+
+            .el-input__inner {
+                border-radius: 4px;
+            }
+            .el-input-group__append {
+                background-color: transparent;
+                border-width: 0px;
+
+                &:hover {
+                    .el-button {
+                        color: #303133;
+                    }
+                }
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                bottom: 0;
+                display: flex;
+                align-items: center;
+            }
+
+            .el-input__suffix {
+                right: -10px;
+            }
+        }
+    }
 }
 
 .table-column-filter {
@@ -109,6 +142,8 @@ li {
 .pagination-wrapper {
     padding-top: 16px;
     position: relative;
+    background-color: #fff;
+    padding-bottom: 46px;
 }
 
 .multiple-mode-wrapper {
@@ -185,7 +220,7 @@ li {
             position: relative;
 
             &::after {
-                content: "";
+                content: '';
                 width: 100%;
                 height: 6px;
                 position: absolute;
@@ -204,7 +239,7 @@ li {
             position: relative;
 
             &::after {
-                content: "";
+                content: '';
                 width: 100%;
                 height: 6px;
                 position: absolute;
@@ -226,9 +261,9 @@ li {
     white-space: nowrap !important;
 }
 .list-view {
-    background: white;
+    // background: white;
     border-radius: 5px;
-    padding: 20px 20px 16px 20px;
+    // padding: 20px 20px 16px 20px;
     box-sizing: border-box;
     height: 100%;
     display: flex;
@@ -238,14 +273,35 @@ li {
         flex-basis: 0;
     }
 }
+.header-btn-right {
+    position: fixed;
+    top: 88px;
+    right: 20px;
+
+    .el-button--small {
+        min-width: 100px;
+    }
+    .el-button + .el-button {
+        margin-left: 12px;
+    }
+}
 .edit-view {
     background: white;
     border-radius: 5px;
     padding: 20px;
     box-sizing: border-box;
+    min-height: 100%;
+
+    .form-submit {
+        .el-button {
+            min-width: 120px;
+            border-radius: 2px;
+            font-size: 13px;
+        }
+    }
 }
 .table-header-cell {
-    background: #f5f7fa !important;
+    // background: #f5f7fa !important;
     color: black !important;
 }
 .table-cell {
@@ -288,12 +344,7 @@ li {
 
 .light-blue {
     body {
-        background: url(../assets/bg_body.svg),
-            radial-gradient(
-                farthest-side ellipse at 10% 0,
-                #e1e5e8 10%,
-                #9aacbf
-            ) !important;
+        background: url(../assets/bg_body.svg), radial-gradient(farthest-side ellipse at 10% 0, #e1e5e8 10%, #9aacbf) !important;
         background-attachment: fixed !important;
         background-size: cover !important;
         background-repeat: no-repeat !important;
@@ -321,7 +372,7 @@ li {
         position: relative;
         &::after {
             position: absolute;
-            content: "";
+            content: '';
             top: 15px;
             bottom: 15px;
             right: 0;
@@ -340,15 +391,13 @@ li {
     .el-card {
         background: rgba(255, 255, 255, 0.3) !important;
         border: none !important;
-        box-shadow: 0 23px 20px -20px rgba(153, 166, 177, 0.1),
-            0 0 15px rgba(153, 166, 177, 0.06);
+        box-shadow: 0 23px 20px -20px rgba(153, 166, 177, 0.1), 0 0 15px rgba(153, 166, 177, 0.06);
     }
     .edit-view,
     .list-view {
         background: rgba(255, 255, 255, 0.3) !important;
         border: none !important;
-        box-shadow: 0 23px 20px -20px rgba(153, 166, 177, 0.1),
-            0 0 15px rgba(153, 166, 177, 0.06);
+        box-shadow: 0 23px 20px -20px rgba(153, 166, 177, 0.1), 0 0 15px rgba(153, 166, 177, 0.06);
     }
     .el-tree {
         background: transparent !important;

src/main/vue/src/views/Admin.vue

@@ -17,41 +17,47 @@
             </el-menu>
         </el-aside>
         <el-container>
-            <el-header class="header">
-                <div class="header-btn" @click="collapse = !collapse">
-                    <div :style="{ transform: collapse ? 'rotate(90deg)' : '' }">
-                        <i class="fas fa-bars" style="font-size: 20px;"></i>
+            <el-header class="header" height="146px">
+                <div class="header-top">
+                    <div class="header-btn" @click="collapse = !collapse">
+                        <div :style="{ transform: collapse ? 'rotate(90deg)' : '' }">
+                            <i class="fas fa-bars" style="font-size: 20px;"></i>
+                        </div>
                     </div>
-                </div>
-                <div style="flex-grow: 1; margin-left: 20px;">
-                    <el-breadcrumb separator-class="el-icon-arrow-right">
-                        <el-breadcrumb-item :to="{ path: '/dashboard' }">
-                            首页
-                        </el-breadcrumb-item>
-                        <el-breadcrumb-item v-if="$route.name !== 'dashboard'">{{
-                            $route.meta.title || $route.name
-                        }}</el-breadcrumb-item>
-                    </el-breadcrumb>
-                </div>
+                    <div style="flex-grow: 1; margin-left: 20px;"></div>
 
-                <el-tooltip
-                    effect="dark"
-                    :content="isFullscreen ? '退出全屏' : '全屏'"
-                    placement="bottom"
-                    :open-delay="1000"
-                >
-                    <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
-                        <i class="fas fa-expand" style="font-size: 20px;"></i>
-                    </div>
-                </el-tooltip>
+                    <el-tooltip
+                        effect="dark"
+                        :content="isFullscreen ? '退出全屏' : '全屏'"
+                        placement="bottom"
+                        :open-delay="1000"
+                    >
+                        <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
+                            <i class="fas fa-expand" style="font-size: 20px;"></i>
+                        </div>
+                    </el-tooltip>
 
-                <el-dropdown @command="onCommand" style="margin-left: 20px;" trigger="click">
-                    <img :src="userInfo ? userInfo.avatar || '' : ''" class="avatar" />
-                    <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="pwd" style="word-break:keep-all">修改密码 </el-dropdown-item>
-                        <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
-                    </el-dropdown-menu>
-                </el-dropdown>
+                    <el-dropdown @command="onCommand" style="margin-left: 20px;" trigger="click">
+                        <img :src="userInfo ? userInfo.avatar || '' : ''" class="avatar" />
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item command="pwd" style="word-break:keep-all">修改密码 </el-dropdown-item>
+                            <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
+                <div class="head-page">
+                    <div class="head-title">
+                        <div class="head-name">{{ $route.meta.title || $route.name }}</div>
+                        <el-breadcrumb separator="/">
+                            <el-breadcrumb-item :to="{ path: '/dashboard' }">
+                                首页
+                            </el-breadcrumb-item>
+                            <el-breadcrumb-item v-if="$route.name !== 'dashboard'">{{
+                                $route.meta.title || $route.name
+                            }}</el-breadcrumb-item>
+                        </el-breadcrumb>
+                    </div>
+                </div>
             </el-header>
             <el-main style="background: #f2f4f5; height: 100%;">
                 <router-view></router-view>
@@ -311,7 +317,7 @@ export default {
     height: 100%;
 }
 
-.header {
+.header-top {
     color: #303133;
     background: #fff;
     display: flex;
@@ -364,4 +370,21 @@ export default {
 .aside::-webkit-scrollbar {
     display: none;
 }
+
+.head-page {
+    display: flex;
+    align-items: center;
+    padding: 22px 20px;
+
+    .head-name {
+        font-size: 18px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+    }
+    .el-breadcrumb {
+        margin-top: 8px;
+        font-size: 12px;
+    }
+}
 </style>