标签管理 标签分类 修改样式

src/views/label/tag/index.vue

@@ -6,7 +6,7 @@
     <!-- 列表 -->
     <el-table :data="tableData" height="614">
       <el-table-column label="排序" type="index" align="center" />
-      <el-table-column label="一级标签" prop="name" align="center" show-overflow-tooltip/>
+      <el-table-column label="一级标签" prop="name" align="center" show-overflow-tooltip />
       <el-table-column label="二级标签" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span v-for="(item, index) in scope.row.secondTagNames" :key="index">
@@ -32,18 +32,18 @@
     </el-table>
     <!-- 弹窗 -->
     <el-dialog :visible.sync="dialogVisible" title="新增标签" width="500px" :before-close="cancel">
-      <el-form label-width="auto">
-        <el-form-item label="一级标签：">
-          <el-input v-model="dialogForm.firstName" placeholder="请输入一级标签" />
+      <el-form :model="form" label-width="auto" ref="form" :rules="rules">
+        <el-form-item label="一级标签：" prop="firstName">
+          <el-input v-model="form.firstName" placeholder="请输入一级标签" />
         </el-form-item>
-        <el-form-item label="二级标签：" size="mini">
-          <el-tag v-for="item in dialogForm.secondTags" :key="item.secondName" closable
-            @close="getClose(item.secondName)" style="margin: 0 10px 10px 0">
+        <el-form-item label="二级标签：">
+          <el-input v-model="inputTags" placeholder="请输入二级标签">
+            <el-button slot="append" @click="getInput">添加</el-button>
+          </el-input>
+          <el-tag v-for="item in form.secondTags" :key="item.secondName" effect="dark" closable
+            @close="getClose(item.secondName)" style="margin: 0 10px 0 0">
             {{ item.secondName }}
           </el-tag>
-          <el-input v-if="inputVisible" v-model="secondTags" ref="input" @blur="getBlur"
-            style="width: 90px" />
-          <el-button v-else icon="el-icon-plus" @click="showInput">添加</el-button>
         </el-form-item>
         <el-form-item>
           <el-button @click="cancel">取消</el-button>
@@ -61,19 +61,21 @@ export default {
     return {
       // 表单
       form: {
-        pageNum: 1,
-        pageSize: 10
+        firstName: '',
+        secondTags: []
+      },
+      // 校验
+      rules: {
+        firstName: [{
+          required: true, message: '请输入一级标签', trigger: 'blur'
+        }]
       },
+      // 二级标签中间参数
+      inputTags: '',
       // 列表
       tableData: [],
       // 弹窗
       dialogVisible: false,
-      dialogForm: {
-        secondTags: []
-      },
-      secondTags: '',
-      // 控制标签输入框显示
-      inputVisible: false
     }
   },
   mounted() {
@@ -115,48 +117,45 @@ export default {
       })
     },
 
-    // 显示输入框
-    showInput() {
-      this.inputVisible = true
-      this.$nextTick(() => {
-        this.$refs.input.focus()
-      })
-    },
-
-    // 失去焦点保存
-    getBlur() {
-      if (this.secondTags) {
-        if (this.dialogForm.secondTags.indexOf(this.secondTags) == -1) {
-          this.dialogForm.secondTags.push({
-            secondName: this.secondTags
+    // 添加二级标签
+    getInput() {
+      if (this.inputTags) {
+        if (this.form.secondTags.findIndex(i => i.secondName === this.inputTags) === -1) {
+          this.form.secondTags.push({
+            secondName: this.inputTags
           })
         } else {
           this.$message.error('请勿新增相同的标签！')
         }
+        this.inputTags = ''
       }
-      this.inputVisible = false
-      this.secondTags = ''
     },
 
     // 删除标签
     getClose(item) {
-      this.dialogForm.secondTags.splice(this.dialogForm.secondTags.findIndex(i => i.secondName === item), 1)
+      this.form.secondTags.splice(this.form.secondTags.findIndex(i => i.secondName === item), 1)
     },
 
     // 取消
     cancel() {
-      this.dialogVisible = false,
-        this.dialogForm = {
-          secondTags: []
-        }
+      this.dialogVisible = false
+      this.$refs.form.resetFields()
+      this.inputTags = ''
+      this.form.secondTags = []
     },
 
     // 确认
     getSubmit() {
-      create(this.dialogForm).then(res => {
-        if (res.code === 0) {
-          this.$message.success('新增成功！')
-          this.getList()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          create(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('新增成功！')
+              this.getList()
+            }
+          })
+        } else {
+          return false
         }
       })
     }