<template>
|
<a-modal
|
:title="title"
|
:width="800"
|
:ok="false"
|
:visible="visible"
|
:confirm-loading="confirmLoading"
|
:okButtonProps="{ props: { disabled: disableSubmit } }"
|
@ok="handleSubmit"
|
@cancel="handleCancel"
|
cancelText="关闭"
|
>
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标签类型">
|
<a-input placeholder="请输入标签类型" v-decorator="['labelType', validatorRules.labelType]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标签内容">
|
<a-input style="width: calc(80%);" placeholder="请输入标签内容" v-model="model.labelName"></a-input>
|
<a-button style="margin-left: 3%" @click="labelContentAdd" type="primary" icon="plus">添加</a-button>
|
</a-form-item>
|
<a-form-item style="padding-left: 155px" :labelCol="labelCol" :wrapperCol="wrapperCol" label="">
|
<a-tag
|
closable
|
color="#108ee9"
|
@close="labelContentRemove(item)"
|
v-for="(item, index) in labelContentList"
|
:key="item"
|
style="width: 100px;height: 40px;line-height: 40px;text-align: center;font-size: 14px"
|
>
|
{{ item.length > 4 ? item.substring(0, 4) + '...' : item }}
|
</a-tag>
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import {postAction, putAction} from '@tievd/cube-block/lib/api/manage'
|
import {validateTxtSpec} from "@/utils/util";
|
|
export default {
|
name: 'LabelModal',
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
title: '操作',
|
visible: false,
|
confirmLoading: false,
|
drawerWidth: 700,
|
disableSubmit: false,
|
model: {},
|
labelContentList: [],
|
validatorRules: {
|
labelType: {
|
rules: [
|
{required: true, message: '标签类型不能为空'},
|
{min: 1, max: 32, message: '名称需在1到32个字符之间'},
|
{required: true, validator: validateTxtSpec}
|
]
|
},
|
labelName: {
|
rules: [
|
{required: true, message: '标签内容不能为空'},
|
{min: 1, max: 32, message: '名称需在1到32个字符之间'},
|
{required: true, validator: validateTxtSpec}
|
]
|
},
|
},
|
labelCol: {
|
xs: {span: 24},
|
sm: {span: 5}
|
},
|
wrapperCol: {
|
xs: {span: 24},
|
sm: {span: 16}
|
},
|
}
|
},
|
|
methods: {
|
validateTxtSpec,
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
add() {
|
this.edit({})
|
},
|
edit(record) {
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
this.form.resetFields()
|
// if (record.id !== undefined) {
|
// // 新增编辑的特殊操作写在这里
|
// }
|
this.visible = true
|
this.model = Object.assign({}, record)
|
this.string2List(this.model.labelName);
|
this.model.labelName = ''
|
this.$nextTick(() => {
|
this.form.setFieldsValue(
|
pick(this.model, 'labelType')
|
)
|
})
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.disableSubmit = false
|
this.model = {}
|
this.labelContentList = []
|
},
|
handleSubmit() {
|
// 触发表单验证
|
this.form.validateFields(async (err, values) => {
|
if (!err) {
|
try {
|
this.confirmLoading = true
|
let formData = Object.assign(this.model, values)
|
formData.labelName = this.list2String(this.labelContentList)
|
let res = null
|
if (!this.model.id) {
|
// 新增
|
res = await postAction('/jyz/label/add', formData)
|
} else {
|
// 编辑
|
res = await putAction('/jyz/label/edit', formData)
|
}
|
if (res.success) {
|
this.labelContentList = []
|
this.$message.success(res.message)
|
this.$emit('ok')
|
this.confirmLoading = false
|
this.close()
|
} else {
|
this.$message.error(res.message);
|
this.confirmLoading = false
|
}
|
} catch (err) {
|
console.log(err)
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
labelContentAdd() {
|
let val = this.model.labelName;
|
this.model.labelName = "";
|
if (typeof val === "undefined" || val.length == 0) {
|
this.$message.error("标签内容不得为空")
|
return
|
}
|
if (val.indexOf(" ") != -1) {
|
this.$message.error("标签内容不得包含空格")
|
return
|
}
|
if (val.length > 32) {
|
this.$message.error("标签内容不得超过32个字符")
|
return
|
}
|
if (this.labelContentList.includes(val)) {
|
this.$message.error("标签内容重复")
|
return
|
}
|
if (this.labelContentList.length === 5) {
|
this.$message.error("标签内容最多5个")
|
return
|
}
|
this.labelContentList.push(val);
|
},
|
labelContentRemove(removeTag) {
|
console.log(removeTag)
|
this.labelContentList = this.labelContentList.filter(tag => tag !== removeTag);
|
},
|
list2String(list) {
|
let str = ''
|
for (let i = 0; i < list.length; i++) {
|
str += list[i]
|
if (i < list.length - 1) {
|
str += ","
|
}
|
}
|
return str
|
},
|
string2List(string) {
|
if (typeof string !== "undefined" && string.length > 0) {
|
this.labelContentList = string.split(",")
|
} else {
|
this.labelContentList = []
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less"></style>
|
