refactor: category and tag form. (#193)

2020-06-08 11:24:01 +08:00 · 2020-06-08 11:24:01 +08:00 · dc4d1e2d98
parent 6c626b76cb
commit dc4d1e2d98
6 changed files with 183 additions and 177 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -16623,6 +16623,11 @@
        "codemirror": "^5.22.0"
      }
    },
+    "vue-contextmenujs": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/vue-contextmenujs/-/vue-contextmenujs-1.3.9.tgz",
+      "integrity": "sha512-Y5QMBLsxnSFD+NIebYsqL6nA6hu9N8Kf4i+wB9WhqUkoyIRpBJVu2ZazU9tduHOp6kai2yJYzIgvfCOJDi18ag=="
+    },
    "vue-count-to": {
      "version": "1.0.13",
      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
--- a/package.json
+++ b/package.json
@ -29,7 +29,6 @@
    "vue-router": "^3.1.6",
    "vuejs-logger": "^1.5.3",
    "vuex": "^3.1.1",
-    "flv.js": "^1.5.0",
    "vue-contextmenujs": "^1.3.9"
  },
  "devDependencies": {
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@ -275,10 +275,16 @@ export default {
      this.queryParam.size = this.pagination.size
      this.queryParam.sort = this.pagination.sort
      this.listLoading = true
-      attachmentApi.query(this.queryParam).then(response => {
+      attachmentApi
+        .query(this.queryParam)
+        .then(response => {
          this.attachments = response.data.data.content
          this.pagination.total = response.data.data.total
+        })
+        .finally(() => {
+          setTimeout(() => {
            this.listLoading = false
+          }, 200)
        })
    },
    loadMediaTypes() {
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@ -13,28 +13,39 @@
          :title="title"
          :bodyStyle="{ padding: '16px' }"
        >
-          <a-form layout="horizontal">
-            <a-form-item
+          <a-form-model
+            ref="categoryForm"
+            :model="categoryToCreate"
+            :rules="categoryRules"
+            layout="horizontal"
+          >
+            <a-form-model-item
              label="名称："
              help="* 页面上所显示的名称"
+              prop="name"
            >
              <a-input v-model="categoryToCreate.name" />
-            </a-form-item>
-            <a-form-item
+            </a-form-model-item>
+            <a-form-model-item
              label="别名："
              help="* 一般为单个分类页面的标识，最好为英文"
+              prop="slug"
            >
              <a-input v-model="categoryToCreate.slug" />
-            </a-form-item>
-            <a-form-item label="上级目录：">
+            </a-form-model-item>
+            <a-form-model-item
+              label="上级目录："
+              prop="parentId"
+            >
              <category-select-tree
                :categories="categories"
                v-model="categoryToCreate.parentId"
              />
-            </a-form-item>
-            <a-form-item
+            </a-form-model-item>
+            <a-form-model-item
              label="封面图："
              help="* 在分类页面可展示，需要主题支持"
+              prop="thumbnail"
            >
              <a-input v-model="categoryToCreate.thumbnail">
                <a
@ -45,22 +56,23 @@
                  <a-icon type="picture" />
                </a>
              </a-input>
-            </a-form-item>
-            <a-form-item
+            </a-form-model-item>
+            <a-form-model-item
              label="描述："
              help="* 分类描述，部分主题可显示"
+              prop="description"
            >
              <a-input
                type="textarea"
                v-model="categoryToCreate.description"
                :autoSize="{ minRows: 3 }"
              />
-            </a-form-item>
-            <a-form-item>
+            </a-form-model-item>
+            <a-form-model-item>
              <a-button
                type="primary"
                @click="handleSaveClick"
-                v-if="formType==='create'"
+                v-if="!isUpdateForm"
              >保存</a-button>
              <a-button-group v-else>
                <a-button
@ -69,12 +81,11 @@
                >更新</a-button>
                <a-button
                  type="dashed"
-                  @click="handleAddCategory"
-                  v-if="formType==='update'"
+                  @click="categoryToCreate = {}"
                >返回添加</a-button>
              </a-button-group>
-            </a-form-item>
-          </a-form>
+            </a-form-model-item>
+          </a-form-model>
        </a-card>
      </a-col>
      <a-col
@ -118,7 +129,7 @@
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a
-                        href="javascript:;"
+                        href="javascript:void(0);"
                        @click="handleEditCategory(item)"
                      >编辑</a>
                    </a-menu-item>
@ -274,13 +285,20 @@ export default {
  mixins: [mixin, mixinDevice],
  data() {
    return {
-      formType: 'create',
      categories: [],
      categoryToCreate: {},
      thumbnailDrawerVisible: false,
-      menu: {},
      loading: false,
-      columns
+      columns,
+      categoryRules: {
+        name: [
+          { required: true, message: '* 分类名称不能为空', trigger: ['change', 'blur'] },
+          { max: 255, message: '* 分类名称的字符长度不能超过 255', trigger: ['change', 'blur'] }
+        ],
+        slug: [{ max: 255, message: '* 分类别名的字符长度不能超过 255', trigger: ['change', 'blur'] }],
+        thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change', 'blur'] }],
+        description: [{ max: 100, message: '* 分类描述的字符长度不能超过 100', trigger: ['change', 'blur'] }]
+      }
    }
  },
  computed: {
@ -289,6 +307,9 @@ export default {
        return '修改分类'
      }
      return '添加分类'
+    },
+    isUpdateForm() {
+      return this.categoryToCreate.id
    }
  },
  created() {
@ -297,56 +318,68 @@ export default {
  methods: {
    loadCategories() {
      this.loading = true
-      categoryApi.listAll(true).then(response => {
+      categoryApi
+        .listAll(true)
+        .then(response => {
          this.categories = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
            this.loading = false
+          }, 200)
        })
    },
    handleSaveClick() {
      this.createOrUpdateCategory()
    },
-    handleAddCategory() {
-      this.formType = 'create'
-      this.categoryToCreate = {}
-    },
    handleEditCategory(category) {
      this.categoryToCreate = category
-      this.formType = 'update'
    },
    handleDeleteCategory(id) {
-      categoryApi.delete(id).then(response => {
+      categoryApi
+        .delete(id)
+        .then(response => {
          this.$message.success('删除成功！')
+          this.categoryToCreate = {}
+        })
+        .finally(() => {
          this.loadCategories()
-        this.handleAddCategory()
        })
    },
    createOrUpdateCategory() {
-      if (!this.categoryToCreate.name) {
-        this.$notification['error']({
-          message: '提示',
-          description: '分类名称不能为空！'
-        })
-        return
-      }
+      this.$refs.categoryForm.validate(valid => {
+        if (valid) {
          if (this.categoryToCreate.id) {
-        categoryApi.update(this.categoryToCreate.id, this.categoryToCreate).then(response => {
+            categoryApi
+              .update(this.categoryToCreate.id, this.categoryToCreate)
+              .then(response => {
                this.$message.success('更新成功！')
+                this.categoryToCreate = {}
+              })
+              .finally(() => {
                this.loadCategories()
              })
          } else {
-        categoryApi.create(this.categoryToCreate).then(response => {
+            categoryApi
+              .create(this.categoryToCreate)
+              .then(response => {
                this.$message.success('保存成功！')
+                this.categoryToCreate = {}
+              })
+              .finally(() => {
                this.loadCategories()
              })
          }
-      this.handleAddCategory()
+        }
+      })
    },
    handleCategoryToMenu(category) {
-      this.menu['name'] = category.name
-      this.menu['url'] = `${category.fullPath}`
-      menuApi.create(this.menu).then(response => {
+      const menu = {
+        name: category.name,
+        url: `${category.fullPath}`
+      }
+      menuApi.create(menu).then(response => {
        this.$message.success('添加到菜单成功！')
-        this.menu = {}
      })
    },
    handleSelectThumbnail(data) {
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@ -13,22 +13,30 @@
          :title="title"
          :bodyStyle="{ padding: '16px' }"
        >
-          <a-form layout="horizontal">
-            <a-form-item
+          <a-form-model
+            ref="tagForm"
+            :model="tagToCreate"
+            :rules="tagRules"
+            layout="horizontal"
+          >
+            <a-form-model-item
              label="名称："
              help="* 页面上所显示的名称"
+              prop="name"
            >
              <a-input v-model="tagToCreate.name" />
-            </a-form-item>
-            <a-form-item
+            </a-form-model-item>
+            <a-form-model-item
              label="别名："
              help="* 一般为单个标签页面的标识，最好为英文"
+              prop="slug"
            >
              <a-input v-model="tagToCreate.slug" />
-            </a-form-item>
-            <a-form-item
+            </a-form-model-item>
+            <a-form-model-item
              label="封面图："
              help="* 在标签页面可展示，需要主题支持"
+              prop="thumbnail"
            >
              <a-input v-model="tagToCreate.thumbnail">
                <a
@ -39,12 +47,12 @@
                  <a-icon type="picture" />
                </a>
              </a-input>
-            </a-form-item>
-            <a-form-item>
+            </a-form-model-item>
+            <a-form-model-item>
              <a-button
                type="primary"
                @click="handleSaveClick"
-                v-if="formType==='create'"
+                v-if="!isUpdateForm"
              >保存</a-button>
              <a-button-group v-else>
                <a-button
@ -53,8 +61,7 @@
                >更新</a-button>
                <a-button
                  type="dashed"
-                  @click="handleAddTag"
-                  v-if="formType==='update'"
+                  @click="tagToCreate = {}"
                >返回添加</a-button>
              </a-button-group>
              <a-popconfirm
@ -62,15 +69,15 @@
                @confirm="handleDeleteTag(tagToCreate.id)"
                okText="确定"
                cancelText="取消"
-                v-if="formType==='update'"
+                v-if="isUpdateForm"
              >
                <a-button
                  type="danger"
                  style="float:right"
                >删除</a-button>
              </a-popconfirm>
-            </a-form-item>
-          </a-form>
+            </a-form-model-item>
+          </a-form-model>
        </a-card>
      </a-col>
      <a-col
@ -121,10 +128,17 @@ export default {
  components: { AttachmentSelectDrawer },
  data() {
    return {
-      formType: 'create',
      tags: [],
      tagToCreate: {},
-      thumbnailDrawerVisible: false
+      thumbnailDrawerVisible: false,
+      tagRules: {
+        name: [
+          { required: true, message: '* 标签名称不能为空', trigger: ['change', 'blur'] },
+          { max: 255, message: '* 标签名称的字符长度不能超过 255', trigger: ['change', 'blur'] }
+        ],
+        slug: [{ max: 255, message: '* 标签别名的字符长度不能超过 255', trigger: ['change', 'blur'] }],
+        thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change', 'blur'] }]
+      }
    }
  },
  computed: {
@ -133,6 +147,9 @@ export default {
        return '修改标签'
      }
      return '添加标签'
+    },
+    isUpdateForm() {
+      return this.tagToCreate.id
    }
  },
  created() {
@ -147,43 +164,41 @@ export default {
    handleSaveClick() {
      this.createOrUpdateTag()
    },
-    handleAddTag() {
-      this.formType = 'create'
-      this.tagToCreate = {}
-    },
    handleEditTag(tag) {
      this.tagToCreate = tag
-      this.formType = 'update'
    },
    handleDeleteTag(tagId) {
-      tagApi.delete(tagId).then(response => {
+      tagApi
+        .delete(tagId)
+        .then(response => {
          this.$message.success('删除成功！')
+          this.tagToCreate = {}
+        })
+        .finally(() => {
          this.loadTags()
-        this.handleAddTag()
        })
    },
    createOrUpdateTag() {
-      if (!this.tagToCreate.name) {
-        this.$notification['error']({
-          message: '提示',
-          description: '标签名称不能为空！'
-        })
-        return
-      }
+      this.$refs.tagForm.validate(valid => {
+        if (valid) {
          if (this.tagToCreate.id) {
            tagApi.update(this.tagToCreate.id, this.tagToCreate).then(response => {
              this.$message.success('更新成功！')
-          this.loadTags()
              this.tagToCreate = {}
            })
          } else {
-        tagApi.create(this.tagToCreate).then(response => {
+            tagApi
+              .create(this.tagToCreate)
+              .then(response => {
                this.$message.success('保存成功！')
-          this.loadTags()
                this.tagToCreate = {}
              })
+              .finally(() => {
+                this.loadTags()
+              })
          }
-      this.handleAddTag()
+        }
+      })
    },
    handleSelectThumbnail(data) {
      this.$set(this.tagToCreate, 'thumbnail', encodeURI(data.path))
--- a/src/views/system/Installation.vue
+++ b/src/views/system/Installation.vue
@ -234,86 +234,34 @@ export default {

      generalRules: {
        username: [
-          {
-            required: true,
-            message: '用户名不能为空',
-            trigger: 'change'
-          },
-          {
-            max: 50,
-            message: '用户名的字符长度不能超过 50',
-            trigger: 'change'
-          }
+          { required: true, message: '* 用户名不能为空', trigger: ['change', 'blur'] },
+          { max: 50, message: '* 用户名的字符长度不能超过 50', trigger: ['change', 'blur'] }
        ],
        nickname: [
-          {
-            required: true,
-            message: '用户昵称不能为空',
-            trigger: 'change'
-          },
-          {
-            max: 255,
-            message: '用户昵称的字符长度不能超过 255',
-            trigger: 'change'
-          }
+          { required: true, message: '* 用户昵称不能为空', trigger: ['change', 'blur'] },
+          { max: 255, message: '* 用户昵称的字符长度不能超过 255', trigger: ['change', 'blur'] }
        ],
        email: [
-          {
-            required: true,
-            message: '电子邮件地址不能为空',
-            trigger: 'change'
-          },
-          {
-            max: 127,
-            message: '电子邮件地址的字符长度不能超过 127',
-            trigger: 'change'
-          },
+          { required: true, message: '* 电子邮件地址不能为空', trigger: ['change', 'blur'] },
+          { max: 127, message: '* 电子邮件地址的字符长度不能超过 127', trigger: ['change', 'blur'] },
          {
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g,
-            message: '电子邮件地址的格式不正确',
-            trigger: 'change'
+            message: '* 电子邮件地址的格式不正确',
+            trigger: ['change', 'blur']
          }
        ],
        password: [
-          {
-            required: true,
-            message: '密码不能为空',
-            trigger: 'change'
-          },
-          {
-            min: 8,
-            max: 100,
-            message: '密码的字符长度必须在 8 - 100 之间',
-            trigger: 'change'
-          }
+          { required: true, message: '* 密码不能为空', trigger: ['change', 'blur'] },
+          { min: 8, max: 100, message: '* 密码的字符长度必须在 8 - 100 之间', trigger: ['change', 'blur'] }
        ],
        confirmPassword: [
-          {
-            required: true,
-            message: '确认密码不能为空',
-            trigger: 'change'
-          },
-          {
-            validator: confirmPasswordValidate,
-            trigger: 'change'
-          }
+          { required: true, message: '* 确认密码不能为空', trigger: ['change', 'blur'] },
+          { validator: confirmPasswordValidate, trigger: ['change', 'blur'] }
        ]
      },
      blogRules: {
-        url: [
-          {
-            required: true,
-            message: '博客地址不能为空',
-            trigger: 'change'
-          }
-        ],
-        title: [
-          {
-            required: true,
-            message: '博客标题不能为空',
-            trigger: 'change'
-          }
-        ]
+        url: [{ required: true, message: '* 博客地址不能为空', trigger: ['change', 'blur'] }],
+        title: [{ required: true, message: '* 博客标题不能为空', trigger: ['change', 'blur'] }]
      }
    }
  },