sortTab-editor-item.vue
2.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<Form :model="formItem" :label-width="60">
<FormItem label="标题">
<Input :value="formItem.category_name" @input="onChangeCate" placeholder="标题"/>
</FormItem>
<FormItem label="more">
<Input :value="formItem.productListTitle" @input="onChangeTitle" placeholder="跳转列表标题"/>
</FormItem>
<FormItem >
<Select :value="formItem.type" @input="onChangeSelect">
<Option value="sort">分类</Option>
<Option value="series">系列</Option>
</Select>
</FormItem>
<FormItem >
<Input :value="formItem.type_id" placeholder="ID" @input="onChangeType" />
</FormItem>
<FormItem label="商品编码">
<Input :value="formItem.product_ids" type="textarea" @input="onChangeIds" :rows="4" placeholder="多个商品以英文逗号分隔"/>
</FormItem>
<Button type="error" @click="onDelete">删除</Button> 提示：可拖动排序
</Form>
</template>
<script>
export default {
props: ["value", "id"],
data() {
let type = 'sort' in this.value.more_url.params ? 'sort' : 'series';
let type_id = this.value.more_url.params[type] || ''
let productListTitle = this.value.more_url.params.productListTitle || '';
return {
formItem: {
category_name: this.value.category_name,
product_ids: this.value.product_ids,
productListTitle,
type,
type_id,
}
};
},
methods: {
onDelete() {
this.$emit('on-remove', this.id);
},
getValue() {
let vm = this;
return {
category_name: vm.formItem.category_name,
product_ids: vm.formItem.product_ids,
more_url: {
action: "go.ufo",
params: {
pagename: "productList",
productListTitle: vm.formItem.productListTitle,
[vm.formItem.type]: vm.formItem.type_id
}
}
};
},
onChangeCate(v) {
this.formItem.category_name = v;
this.$emit('on-change', this.getValue());
},
onChangeTitle(v) {
this.formItem.productListTitle = v;
this.$emit('on-change', this.getValue());
},
onChangeSelect(v) {
this.formItem.type = v;
this.formItem.type_id = null;
this.$emit('on-change', this.getValue());
},
onChangeType(v) {
this.formItem.type_id = v;
this.$emit('on-change', this.getValue());
},
onChangeIds(v) {
this.formItem.product_ids = v;
this.$emit('on-change', this.getValue());
},
}
};
</script>
<style scoped>
.ivu-form-item {
margin-bottom: 10px !important;
}
</style>