优化多属性的展示和编辑输入框
This commit is contained in:
jishenghua
@@ -47,6 +47,9 @@
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<template slot="customRenderAttributeValue" slot-scope="attributeValue">
|
||||
<a-tag v-for="(item,index) in getTagArr(attributeValue)" color="blue">{{item}}</a-tag>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
@@ -97,8 +100,10 @@
|
||||
align:"center",
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
{title: '属性名', dataIndex: 'attributeName', width: 200},
|
||||
{title: '属性值（用竖线隔开）', dataIndex: 'attributeValue', width: 500}
|
||||
{title: '属性名', dataIndex: 'attributeName', width: 150},
|
||||
{title: '属性值', dataIndex: 'attributeValue', width: 750,
|
||||
scopedSlots: { customRender: 'customRenderAttributeValue' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/materialAttribute/list",
|
||||
@@ -111,6 +116,9 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
getTagArr(attributeValue) {
|
||||
return attributeValue.split('|')
|
||||
},
|
||||
handleEdit: function (record) {
|
||||
this.$refs.modalForm.edit(record);
|
||||
this.$refs.modalForm.title = "编辑";
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
@cancel="handleCancel"
|
||||
cancelText="取消"
|
||||
okText="保存"
|
||||
style="top:100px;height: 50%;">
|
||||
style="top:100px;height: 60%;">
|
||||
<template slot="footer">
|
||||
<a-button key="back" v-if="isReadOnly" @click="handleCancel">
|
||||
取消
|
||||
@@ -28,8 +28,34 @@
|
||||
</a-form>
|
||||
<a-form :form="form">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="属性值">
|
||||
<a-textarea :rows="5" placeholder="请输入属性值" v-decorator.trim="[ 'attributeValue', validatorRules.attributeValue]" />
|
||||
<a-tabs v-model:activeKey="activeKey" size="small">
|
||||
<a-tab-pane key="1" tab="标签模式" forceRender>
|
||||
<template v-for="(tag, index) in tags">
|
||||
<a-tag color="blue" style="margin-bottom: 10px" :key="tag" :closable="true" @close="() => handleClose(tag)">
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<a-input
|
||||
v-if="inputVisible"
|
||||
ref="input"
|
||||
type="text"
|
||||
size="small"
|
||||
:style="{ width: '150px' }"
|
||||
:value="inputValue"
|
||||
@change="handleInputChange"
|
||||
@blur="handleInputConfirm"
|
||||
@keyup.enter="handleInputConfirm"
|
||||
/>
|
||||
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
|
||||
<a-icon type="plus" /> 请输入属性值
|
||||
</a-tag>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="文字模式" forceRender>
|
||||
<a-textarea :rows="8" placeholder="请输入属性值" @change="handleValueChange"
|
||||
v-decorator.trim="[ 'attributeValue', validatorRules.attributeValue]" />
|
||||
注意：属性值请用竖线隔开，比如：红色|橙色|黄色|绿色
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
@@ -38,8 +64,9 @@
|
||||
</template>
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import {addMaterialAttribute,editMaterialAttribute,checkMaterialAttribute } from '@/api/api'
|
||||
import {mixinDevice} from '@/utils/mixin'
|
||||
import { addMaterialAttribute, checkMaterialAttribute, editMaterialAttribute } from '@/api/api'
|
||||
import { mixinDevice } from '@/utils/mixin'
|
||||
|
||||
export default {
|
||||
name: "MaterialAttributeModal",
|
||||
mixins: [mixinDevice],
|
||||
@@ -49,6 +76,10 @@
|
||||
visible: false,
|
||||
model: {},
|
||||
isReadOnly: false,
|
||||
activeKey: '1',
|
||||
tags: [],
|
||||
inputVisible: false,
|
||||
inputValue: '',
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
@@ -69,7 +100,7 @@
|
||||
},
|
||||
attributeValue:{
|
||||
rules: [
|
||||
{ required: true, message: '请输入属性值（用竖线隔开）!' }
|
||||
{ required: true, message: '请输入属性值!' }
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -84,7 +115,13 @@
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.activeKey = '1'
|
||||
this.visible = true;
|
||||
if(this.model.attributeValue) {
|
||||
this.tags = this.model.attributeValue.split('|')
|
||||
} else {
|
||||
this.tags = []
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'attributeName', 'attributeValue'))
|
||||
});
|
||||
@@ -123,10 +160,11 @@
|
||||
this.close()
|
||||
},
|
||||
validateAttributeName(rule, value, callback){
|
||||
if(value) {
|
||||
let params = {
|
||||
name: value,
|
||||
id: this.model.id?this.model.id:0
|
||||
};
|
||||
}
|
||||
checkMaterialAttribute(params).then((res)=>{
|
||||
if(res && res.code===200) {
|
||||
if(!res.data.status){
|
||||
@@ -137,7 +175,47 @@
|
||||
} else {
|
||||
callback(res.data);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
//属性值变更
|
||||
handleValueChange(e) {
|
||||
let attributeValue = e.target.value
|
||||
if(attributeValue) {
|
||||
this.tags = attributeValue.split('|')
|
||||
} else {
|
||||
this.tags = []
|
||||
}
|
||||
},
|
||||
//删除tag
|
||||
handleClose(removedTag) {
|
||||
this.tags = this.tags.filter(tag => tag !== removedTag)
|
||||
this.form.setFieldsValue({'attributeValue': this.tags.join('|')})
|
||||
},
|
||||
//展示tag输入框
|
||||
showInput() {
|
||||
this.inputVisible = true
|
||||
this.$nextTick(function() {
|
||||
this.$refs.input.focus()
|
||||
});
|
||||
},
|
||||
handleInputChange(e) {
|
||||
this.inputValue = e.target.value
|
||||
},
|
||||
handleInputConfirm() {
|
||||
const inputValue = this.inputValue
|
||||
let tags = this.tags
|
||||
if (inputValue && tags.indexOf(inputValue) === -1) {
|
||||
tags = [...tags, inputValue]
|
||||
}
|
||||
Object.assign(this, {
|
||||
tags,
|
||||
inputVisible: false,
|
||||
inputValue: '',
|
||||
})
|
||||
this.form.setFieldsValue({'attributeValue': this.tags.join('|')})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user