[Update] Merge

package.json

@@ -39,6 +39,7 @@
     "vue": "2.6.10",
     "vue-i18n": "^8.15.5",
     "vue-router": "3.0.6",
+    "vue-select": "^3.9.5",
     "vuex": "3.1.0"
   },
   "devDependencies": {

src/components/DataForm/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <elFormRender ref="dataForm" :content="content" v-bind="$attrs" v-on="$listeners">
+    <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')">reset</el-button>
+    </el-form-item>
+    <slot name="Actions" />
+  </elFormRender>
+</template>
+
+<script>
+import elFormRender from './components/el-form-renderer'
+export default {
+  components: {
+    elFormRender
+  },
+  props: {
+    defaultButton: {
+      type: Boolean,
+      default: true
+    },
+    content: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$message('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-form /deep/ .el-form-item {
+    margin-bottom: 12px;
+}
+
+</style>

src/components/DataTable/index.vue

@@ -86,7 +86,7 @@ export default {
 
   .el-table /deep/ .el-table__row > td {
     line-height: 1.5;
-    padding: 8px;
+    padding: 8px 0;
   }
   .el-table /deep/ .el-table__row > td> div > span {
     text-overflow: ellipsis;
@@ -95,7 +95,7 @@ export default {
     white-space: nowrap;
   }
   .el-table /deep/ .el-table__header > thead > tr >th {
-    padding: 8px;
+    padding: 8px 0;
     background-color: #F5F5F6;
     font-size: 13px;
     line-height: 1.5;

src/components/Select2/index.vue

@@ -2,14 +2,15 @@
   <el-select
     v-model="vaultOrDefault"
     v-loadmore="loadMore"
-    :placeholder="placeholder"
     :options="options"
     :remote-method="filterOptions"
     :loading="loading"
     multiple
     filterable
     remote
+    v-bind="$attrs"
     class="select2"
+    v-on="$listeners"
   >
     <el-option
       v-for="item in options"
@@ -45,10 +46,6 @@ export default {
     }
   },
   props: {
-    placeholder: {
-      type: String,
-      default: null
-    },
     url: {
       type: String,
       required: true

src/components/formGroupHeader/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div v-if="line" class="hr-line-dashed" />
+    <h3>{{ title }}</h3>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'Title'
+    },
+    line: {
+      type: Boolean,
+      default: true
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hr-line-dashed {
+    border-top: 1px dashed #e7eaec;
+    color: #ffffff;
+    background-color: #ffffff;
+    height: 1px;
+    margin: 20px 0;
+}
+</style>

src/views/users/UserGroupEdit.vue

@@ -1,162 +1,83 @@
 <template>
-  <IBox :title="title">
+  <Page>
-    <el-form
+    <template>
-      ref="usergroup"
+      <el-card>
-      size="small"
+        <dataform :content="content" label-position="right" label-width="100px" :form="form" />
-      :rules="rules"
+      </el-card>
-      label-position="left"
+    </template>
-      label-width="80px"
+  </page>
-      :model="usergroup"
-      class="form"
-    >
-      <el-form-item label="名称" prop="name" required>
-        <el-input v-model="usergroup.name" />
-      </el-form-item>
-      <el-form-item label="用户">
-        <el-select
-          v-model="usergroup.users"
-          multiple
-          remote
-          :remote-method="remoteSerach"
-          :loading="loading"
-          filterable
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in tableData"
-            :key="item.id"
-            :label="item.name+ '(' + item.username + ')' "
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注">
-        <el-input
-          v-model="usergroup.comment"
-          type="textarea"
-          :rows="3"
-        />
-      </el-form-item>
-      <el-form-item class="foot_button">
-        <el-button @click="resetForm('usergroup')">重置</el-button>
-        <el-button type="primary" @click="submitForm('usergroup')">{{ buttonTitle }}</el-button>
-      </el-form-item>
-    </el-form>
-  </IBox>
 </template>
 
 <script>
-import { IBox } from '@/layout/components'
+/* eslint-disable vue/no-unused-components */
-import { getUserList, editUserGroup, getUserGroup, updateUserGroup } from '@/api/user'
+import { Page } from '@/layout/components'
+import dataform from '@/components/DataForm'
+import select2 from '@/components/Select2'
 export default {
   components: {
-    IBox
+    Page,
+    dataform,
+    select2
   },
   data() {
     return {
-      rules: {
+      content: [
-        name: [
+        {
-          { required: true, message: '请输入名称', trigger: 'blur' }
+          type: 'input',
+          id: 'name',
+          label: 'name',
+          attrs: { 'data-name': 'form1' },
+          el: {
+            size: 'mini',
+            placeholder: 'test placeholder'
+          },
+          rules: [
+            { required: true, message: 'miss name', trigger: 'blur' },
+            { min: 3, max: 5, message: 'length between 3 to 5', trigger: 'blur' }
           ]
         },
-      usergroup: {
+        {
-        name: '',
+          id: 'users',
-        users: {},
+          label: this.$t('users.user'),
-        comment: ''
+          el: {
+            size: 'mini',
+            value: [
+              {
+                label: 'hello',
+                value: '1a775bbf-6861-4acb-8ae4-2f684794c8cc'
               },
-      tableData: [],
+              {
-      loading: false
+                label: 'test',
-    }
+                value: '4dccdf84-7728-4de0-a507-67c905b3091b'
               },
-  computed: {
+              {
-    title() {
+                label: 'whold',
-      if (this.$route.params.id === 'create') {
+                value: 'c5ec4b91-1fb2-478e-89bc-5a4abc0f9c6c'
-        return this.$t('users.createusergroup')
-      } else {
-        return this.$t('usergroup.update_user_group')
               }
+            ],
+            url: '/api/v1/users/users/'
           },
-    buttonTitle() {
+          // 自定义组件
-      if (this.$route.params.id === 'create') {
+          component: select2
-        return this.$t('users.createusergroup')
-      } else {
-        return this.$t('usergroup.update')
-      }
-    }
         },
-  mounted() {
+        {
-    this.init()
+          type: 'input',
+          id: 'comment',
+          el: {
+            type: 'textarea',
+            rows: 3
+          },
+          label: this.$t('users.comment')
+        }
+      ]
+    }
   },
   methods: {
-    remoteSerach(word) {
+
-      this.loading = true
-      getUserList({ search: word, limit: 10, offset: 0 }).then(response => {
-        this.loading = false
-        this.tableData = response.results
-      })
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          if (this.$route.params.id === 'create') {
-            editUserGroup(this.usergroup).then(response => {
-              this.$message({
-                message: '创建成功',
-                type: 'success',
-                duration: 5 * 1000
-              })
-              this.$router.push({ name: 'UserGroupList' })
-            }).catch(error => {
-              console.log(error)
-            })
-          } else {
-            updateUserGroup(this.$route.params.id, this.usergroup).then(response => {
-              this.$message({
-                message: '创建成功',
-                type: 'success',
-                duration: 5 * 1000
-              })
-              this.$router.push({ name: 'UserGroupList' })
-            }).catch(error => {
-              console.log(error)
-            })
-          }
-        } else {
-          // console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
-    init() {
-      if (this.$route.params.id === 'create') {
-        // Do Nothing
-      } else {
-        getUserGroup(this.$route.params.id).then(response => {
-          this.usergroup.name = response.name
-          // 这里差一个API
-          this.usergroup.comment = response.comment
-        })
-      }
-    }
   }
 }
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
-.form{
-  margin-top: 20px;
-  width: 80%;
-  margin-left: 10%;
-}
-.foot_button{
-  padding-bottom: 18px ;
-}
-//重置El-select宽度
-.el-select{
-  width: 100%;
-}
 
 </style>

src/views/users/UserGroupList_Backup.vue

@@ -1,132 +0,0 @@
-<template>
-  <Page>
-    <template slot="content">
-      <IBox :title="$t('users.usergrouplist')">
-        <ListTables
-          :tablebutton="$t('users.createusergroup')"
-          tableroute="UserGroupEdit"
-          @SizeChange="handleSizeChange"
-          @CurrentChange="handleCurrentChange"
-        >
-          <el-table
-            v-loading="listLoading"
-            :data="tableData"
-            stripe
-            border
-            class="userTable"
-          >
-            <el-table-column
-              type="selection"
-              width="55"
-              align="center"
-              header-align="center"
-            />
-            <el-table-column
-              :label="this.$t('usergroup.name')"
-              sortable
-              align="center"
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="this.$t('usergroup.user')"
-              align="center"
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <span>{{ scope.row.users_amount }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="this.$t('usergroup.comment')"
-              align="center"
-              sortable
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <span>{{ scope.row.comment }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="this.$t('usergroup.action')"
-              align="center"
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  type="primary"
-                  @click="handleEdit(scope.$index, scope.row)"
-                >{{ $t('usergroup.update') }}</el-button>
-                <el-button
-                  size="mini"
-                  type="danger"
-                  @click="handleDelete(scope.$index, scope.row)"
-                >{{ $t('usergroup.delete') }}</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </ListTables>
-      </IBox>
-    </template>
-  </Page>
-</template>
-
-<script>
-import { ListTables, IBox, Page } from '@/layout/components'
-import { getUserGroupList } from '@/api/user'
-import Tables from '@/layout/mixin/ListTables'
-export default {
-  components: {
-    ListTables,
-    IBox,
-    Page
-  },
-  mixins: [Tables],
-  data() {
-    return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getUsers(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'UserGroupDetail', params: { id: row.id }})
-    },
-    handleEdit: function(index, row) {
-      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
-    },
-    handleDelete: function(index, row) {
-      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getUsers(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getUsers(val, this.page_size, this.offset)
-    },
-    getUsers(draw, limit, offset) {
-      this.listLoading = true
-      getUserGroupList({ draw, limit, offset, row: 1 }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/users/UserList.vue

@@ -48,7 +48,10 @@ export default {
           }
         ],
         columns: [
-          { type: 'selection' },
+          {
+            type: 'selection',
+            align: 'center'
+          },
           // Bug
           // 应该让我插入Slot,使这个用户名可点击
           {

yarn.lock

@@ -9090,6 +9090,11 @@ vue-router@3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
 
+vue-select@^3.9.5:
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.9.5.tgz#d70a3815c2cd9ad3eae75adf47dab6f787b30f98"
+  integrity sha512-r392oaLYepNxY+uY1EN7r05VPOqSWGEfZ3LtJ3NqhrRbWCpWQ5EPSMN3QL80HdN3H+o1ueQA9P58K1vgGZ5P3Q==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"