|
@@ -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
|
|
|
}
|
|
|
})
|
|
|
}
|