[Update] 修改一些布局

src/components/DataForm/index.vue

@@ -1,18 +1,20 @@
 <template>
   <elFormRender
     ref="dataForm"
-    :content="content"
+    :content="fields"
     v-bind="$attrs"
     :form="basicForm"
+    label-position="right"
+    label-width="17%"
     v-on="$listeners"
   >
     <!-- slot 透传 -->
-    <slot v-for="item in content" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
+    <slot v-for="item in fields" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
-    <slot v-for="item in content" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
+    <slot v-for="item in fields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
 
     <el-form-item v-if="defaultButton">
-      <el-button size="small" type="primary" @click="submitForm('dataForm')">submit</el-button>
+      <el-button size="small" @click="resetForm('dataForm')">{{ $tc('Reset') }}</el-button>
-      <el-button size="small" @click="resetForm('dataForm')">reset</el-button>
+      <el-button size="small" type="primary" @click="submitForm('dataForm')">{{ $tc('Submit') }}</el-button>
     </el-form-item>
     <slot name="Actions" />
   </elFormRender>
@@ -29,7 +31,7 @@ export default {
       type: Boolean,
       default: true
     },
-    content: {
+    fields: {
       type: Array,
       default: () => []
     },
@@ -69,8 +71,13 @@ export default {
 <style lang="less" scoped>
   .el-form /deep/ .el-form-item {
     margin-bottom: 12px;
+  }
 
-    margin-left:12%;
+  .el-form /deep/ .el-form-item__content {
-    width:73%;
+    width: 75%;
+  }
+
+  .el-form /deep/ .el-form-item__label {
+    padding: 0 30px 0 0;
   }
 </style>

src/i18n/langs/cn.js

@@ -46,7 +46,9 @@ const cn = {
     'Run': '执行',
     'Are you sure to delete': '你确定要删除',
     'Info': '提示',
-    'More': '更多'
+    'More': '更多',
+    'Submit': '提交',
+    'Reset': '重置'
   },
   route: {
     'dashboard': '仪表盘',
@@ -87,6 +89,7 @@ const cn = {
     'OperateLog': '操作日志',
     'PasswordChangeLog': '改密日志',
     'Settings': '系统设置',
+    'UserCreate': '创建用户'
   },
   // 用户模块翻译
   users: {

src/router/index.js

@@ -67,14 +67,14 @@ export const constantRoutes = [
       },
       {
         path: 'users/create',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserCreate',
         hidden: true,
-        meta: { title: 'UserCreate' }
+        meta: { title: 'UserCreate', activeMenu: '/users/users'}
       },
       {
         path: 'users/update/:id',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserEdit',
         hidden: true,
         meta: { title: 'UserEdit' }
@@ -108,7 +108,7 @@ export const constantRoutes = [
       },
       {
         path: 'groups/create',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserGroupCreate',
         hidden: true,
         meta: { title: 'UserGroupCreate' }

src/styles/element-ui.scss

@@ -162,7 +162,15 @@ td .el-button.el-button--mini {
   width: 100%;
   font-size: 14px;
   line-height: 1.5;
-  height: 35px;
+  height: 34px;
+}
+
+.el-input--small .el-input__inner {
+  height: 34px;
+}
+
+.el-input--small .el-input__icon {
+  line-height: 34px;
 }
 
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
@@ -223,3 +231,7 @@ td .el-button.el-button--mini {
 .text-success {
   color: $--color-success;
 }
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: inherit;
+}

src/views/users/UserCreateUpdate.vue

@@ -1,49 +1,47 @@
 <template>
   <Page>
-    <template>
+    <IBox>
-      <el-card>
+      <DataForm :form="form" :fields="fields" label-position="left" label-width="140px">
-        <dataform :form="form" :content="content" label-position="left" label-width="140px">
+        <FormGroupHeader slot="id:name" title="账户" :line="false" style="margin:0 50px;" />
-          <formgroupheader slot="id:name" title="账户" :line="false" style="margin:0 50px;" />
+        <FormGroupHeader slot="id:passwordrule" title="认证" :line="true" style="margin:0 50px;" />
-          <formgroupheader slot="id:passwordrule" title="认证" :line="true" style="margin:0 50px;" />
+        <FormGroupHeader slot="id:role" title="角色安全" :line="true" style="margin:0 50px;" />
-          <formgroupheader slot="id:role" title="角色安全" :line="true" style="margin:0 50px;" />
+        <FormGroupHeader slot="id:phone" title="认证" :line="true" style="margin:0 50px;" />
-          <formgroupheader slot="id:phone" title="认证" :line="true" style="margin:0 50px;" />
+      </DataForm>
-        </dataform>
+    </IBox>
-      </el-card>
-    </template>
-    <el-button @click="debug" />
   </page>
 </template>
 
 <script>
 /* eslint-disable vue/no-unused-components */
-import formgroupheader from '@/components/formGroupHeader'
+import FormGroupHeader from '@/components/formGroupHeader'
-import { Page } from '@/layout/components'
+import { Page, IBox } from '@/layout/components'
-import dataform from '@/components/DataForm'
+import DataForm from '@/components/DataForm'
 import select2 from '@/components/Select2'
 export default {
   components: {
     Page,
-    dataform,
+    IBox,
+    DataForm,
     select2,
-    formgroupheader
+    FormGroupHeader
   },
   data() {
     return {
       form: {
-        name: '姓名',
         passwordrule: '1',
         mfa_level: 0,
         source: 'local',
         role: 'Admin',
         date_expired: '2099-12-31 00:00:00 +0800'
       },
-      content: [
+      fields: [
         {
           type: 'input',
           id: 'name',
           label: this.$t('users.name'),
           el: {
-            size: 'small'
+            size: 'small',
+            placeholder: 'hello',
           },
           rules: [
             { required: true, message: 'miss name', trigger: 'blur' }

src/views/users/UserGroupUpdate.vue

@@ -2,7 +2,7 @@
   <Page>
     <template>
       <el-card>
-        <dataform :content="content" label-position="right" label-width="100px" :form="form" />
+        <dataform fields="content" label-position="right" label-width="100px" :form="form" />
       </el-card>
     </template>
   </page>
@@ -11,7 +11,7 @@
 <script>
 /* eslint-disable vue/no-unused-components */
 import { Page } from '@/layout/components'
-import dataform from '@/components/DataForm'
+import DataForm from '@/components/DataForm'
 import select2 from '@/components/Select2'
 export default {
   components: {