|
|
|
|
@ -12,6 +12,19 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:pid>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Parent：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-select style="width:100%" clearable filterable v-model="form.pid" placeholder="Please Select">
|
|
|
|
|
<el-option v-for="item in familyOptions" :key="item.id" :label="item.title" :value="item.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:sort>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
@ -49,48 +62,48 @@
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:family_product_lines>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Product Lines：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">Add</el-button>
|
|
|
|
|
<xy-table style="width:850px" :list="form.family_product_lines" :isPage="false" :height="350"
|
|
|
|
|
:table-item="detail_item">
|
|
|
|
|
<template v-slot:product_category_id>
|
|
|
|
|
<el-table-column align='left' label="Product Line" width="340">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-select style="width:100%" @change="(e)=>{changeKey(e,scope.row)}" v-model="scope.row.product_category_id"
|
|
|
|
|
placeholder="Please Select">
|
|
|
|
|
<el-option v-for="(pvalue,index) in productPhaseList" :key="index" :label="pvalue.name"
|
|
|
|
|
:value="pvalue.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:sort>
|
|
|
|
|
<el-table-column align='left' label="Sort" width="340">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input placeholder="Please Input" style="width:100%" v-model="scope.row.sort"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:btns>
|
|
|
|
|
<el-table-column align='center' label="operate" width="120" header-align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
|
|
|
|
|
@confirm="delRow(scope.$index)" title="Are you sure to delete it?">
|
|
|
|
|
<el-button type="danger" size="small" slot="reference">delete</el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
</xy-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:family_product_lines>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Product Lines：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">Add</el-button>
|
|
|
|
|
<xy-table style="width:850px" :list="form.family_product_lines" :isPage="false" :height="350"
|
|
|
|
|
:table-item="detail_item">
|
|
|
|
|
<template v-slot:product_category_id>
|
|
|
|
|
<el-table-column align='left' label="Product Line" width="340">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-select style="width:100%" @change="(e)=>{changeKey(e,scope.row)}" v-model="scope.row.product_category_id"
|
|
|
|
|
placeholder="Please Select">
|
|
|
|
|
<el-option v-for="(pvalue,index) in productPhaseList" :key="index" :label="pvalue.name"
|
|
|
|
|
:value="pvalue.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:sort>
|
|
|
|
|
<el-table-column align='left' label="Sort" width="340">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input placeholder="Please Input" style="width:100%" v-model="scope.row.sort"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:btns>
|
|
|
|
|
<el-table-column align='center' label="operate" width="120" header-align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
|
|
|
|
|
@confirm="delRow(scope.$index)" title="Are you sure to delete it?">
|
|
|
|
|
<el-button type="danger" size="small" slot="reference">delete</el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
</xy-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:description>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
@ -122,12 +135,13 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
index as familyIndex,
|
|
|
|
|
save,
|
|
|
|
|
show
|
|
|
|
|
} from "@/api/family"
|
|
|
|
|
import {
|
|
|
|
|
index,
|
|
|
|
|
destroy
|
|
|
|
|
} from "@/api/family"
|
|
|
|
|
import {
|
|
|
|
|
index,
|
|
|
|
|
destroy
|
|
|
|
|
} from "@/api/product/category.js"
|
|
|
|
|
import {
|
|
|
|
|
getToken
|
|
|
|
|
@ -142,33 +156,36 @@
|
|
|
|
|
showWang: false,
|
|
|
|
|
type: 'add',
|
|
|
|
|
id: '',
|
|
|
|
|
defaultPid: 0,
|
|
|
|
|
familyOptions: [],
|
|
|
|
|
uploadOther: {
|
|
|
|
|
token: ""
|
|
|
|
|
},
|
|
|
|
|
showWang: false,
|
|
|
|
|
action: `${process.env.VUE_APP_UPLOAD_API}`,
|
|
|
|
|
pictureList: [],
|
|
|
|
|
productPhaseList:[],
|
|
|
|
|
detail_item: [{
|
|
|
|
|
type: 'index',
|
|
|
|
|
width: 50,
|
|
|
|
|
}, {
|
|
|
|
|
prop: 'product_category_id',
|
|
|
|
|
label: 'Product Line',
|
|
|
|
|
align: 'left',
|
|
|
|
|
width: 620
|
|
|
|
|
}, {
|
|
|
|
|
prop: 'sort',
|
|
|
|
|
label: 'Sort',
|
|
|
|
|
align: 'left',
|
|
|
|
|
width: 620
|
|
|
|
|
pictureList: [],
|
|
|
|
|
productPhaseList:[],
|
|
|
|
|
detail_item: [{
|
|
|
|
|
type: 'index',
|
|
|
|
|
width: 50,
|
|
|
|
|
}, {
|
|
|
|
|
prop: 'product_category_id',
|
|
|
|
|
label: 'Product Line',
|
|
|
|
|
align: 'left',
|
|
|
|
|
width: 620
|
|
|
|
|
}, {
|
|
|
|
|
prop: 'sort',
|
|
|
|
|
label: 'Sort',
|
|
|
|
|
align: 'left',
|
|
|
|
|
width: 620
|
|
|
|
|
}],
|
|
|
|
|
form: {
|
|
|
|
|
title: '',
|
|
|
|
|
pid: 0,
|
|
|
|
|
sort: 0,
|
|
|
|
|
is_visible: 1,
|
|
|
|
|
|
|
|
|
|
file_ids: [],
|
|
|
|
|
file_ids: [],
|
|
|
|
|
family_product_lines:[],
|
|
|
|
|
description: '',
|
|
|
|
|
content: ''
|
|
|
|
|
@ -182,21 +199,43 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.uploadOther.token = getToken();
|
|
|
|
|
this.uploadOther.token = getToken();
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getList() {
|
|
|
|
|
const res = await index({
|
|
|
|
|
page_size: 999,
|
|
|
|
|
page: 1,
|
|
|
|
|
type:2,
|
|
|
|
|
sort_type: 'asc',
|
|
|
|
|
sort_name: 'sort',
|
|
|
|
|
is_visible: 1,
|
|
|
|
|
// family_id:this.select.family_id
|
|
|
|
|
})
|
|
|
|
|
this.productPhaseList = res.data
|
|
|
|
|
methods: {
|
|
|
|
|
async loadFamilyOptions() {
|
|
|
|
|
const res = await familyIndex({
|
|
|
|
|
page_size: 999,
|
|
|
|
|
page: 1,
|
|
|
|
|
sort_name: 'sort',
|
|
|
|
|
sort_type: 'asc',
|
|
|
|
|
is_tree: 0
|
|
|
|
|
}, false)
|
|
|
|
|
const list = res.data || []
|
|
|
|
|
const excludeIds = this.id ? this.getDescendantIds(list, Number(this.id)) : []
|
|
|
|
|
this.familyOptions = [{
|
|
|
|
|
id: 0,
|
|
|
|
|
title: 'Top Level'
|
|
|
|
|
}].concat(list.filter(item => !excludeIds.includes(item.id)))
|
|
|
|
|
},
|
|
|
|
|
getDescendantIds(list, currentId) {
|
|
|
|
|
const ids = [currentId]
|
|
|
|
|
list.filter(item => Number(item.pid) === currentId).forEach(item => {
|
|
|
|
|
ids.push(...this.getDescendantIds(list, item.id))
|
|
|
|
|
})
|
|
|
|
|
return ids
|
|
|
|
|
},
|
|
|
|
|
async getList() {
|
|
|
|
|
const res = await index({
|
|
|
|
|
page_size: 999,
|
|
|
|
|
page: 1,
|
|
|
|
|
type:2,
|
|
|
|
|
sort_type: 'asc',
|
|
|
|
|
sort_name: 'sort',
|
|
|
|
|
is_visible: 1,
|
|
|
|
|
// family_id:this.select.family_id
|
|
|
|
|
})
|
|
|
|
|
this.productPhaseList = res.data
|
|
|
|
|
},
|
|
|
|
|
handleRemoveP(file, fileList) {
|
|
|
|
|
this.pictureList = fileList
|
|
|
|
|
@ -212,18 +251,18 @@
|
|
|
|
|
|
|
|
|
|
changeEditor(e, type) {
|
|
|
|
|
this.form[type] = e
|
|
|
|
|
},
|
|
|
|
|
addRow() {
|
|
|
|
|
this.form.family_product_lines.push({
|
|
|
|
|
product_category_id: '',
|
|
|
|
|
sort: 0
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
delRow(index) {
|
|
|
|
|
this.form.family_product_lines.splice(index, 1)
|
|
|
|
|
},
|
|
|
|
|
changeKey(e, row) {
|
|
|
|
|
console.log(e,row)
|
|
|
|
|
},
|
|
|
|
|
addRow() {
|
|
|
|
|
this.form.family_product_lines.push({
|
|
|
|
|
product_category_id: '',
|
|
|
|
|
sort: 0
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
delRow(index) {
|
|
|
|
|
this.form.family_product_lines.splice(index, 1)
|
|
|
|
|
},
|
|
|
|
|
changeKey(e, row) {
|
|
|
|
|
console.log(e,row)
|
|
|
|
|
},
|
|
|
|
|
submit() {
|
|
|
|
|
if (this.id) {
|
|
|
|
|
@ -247,7 +286,8 @@
|
|
|
|
|
}
|
|
|
|
|
// return
|
|
|
|
|
save({
|
|
|
|
|
...this.form
|
|
|
|
|
...this.form,
|
|
|
|
|
pid: this.form.pid || 0
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
@ -264,13 +304,14 @@
|
|
|
|
|
show_relation: ['familyProductLines'],
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.form = this.base.requestToForm(res, this.form)
|
|
|
|
|
this.form.pid = res.pid ? res.pid : 0
|
|
|
|
|
this.form.description = res.description ? res.description : ''
|
|
|
|
|
this.form.content = res.content ? res.content : ''
|
|
|
|
|
this.form.family_product_lines = res.family_product_lines?res.family_product_lines:[]
|
|
|
|
|
if(this.form.family_product_lines.length>0){
|
|
|
|
|
this.form.family_product_lines.sort((a,b)=>{
|
|
|
|
|
return a.sort - b.sort
|
|
|
|
|
})
|
|
|
|
|
this.form.content = res.content ? res.content : ''
|
|
|
|
|
this.form.family_product_lines = res.family_product_lines?res.family_product_lines:[]
|
|
|
|
|
if(this.form.family_product_lines.length>0){
|
|
|
|
|
this.form.family_product_lines.sort((a,b)=>{
|
|
|
|
|
return a.sort - b.sort
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.form.is_visible = res.is_visible ? res.is_visible : 0
|
|
|
|
|
this.form.sort = res.sort ? res.sort : 0
|
|
|
|
|
@ -292,21 +333,25 @@
|
|
|
|
|
watch: {
|
|
|
|
|
isShow(newVal) {
|
|
|
|
|
if (newVal) {
|
|
|
|
|
this.loadFamilyOptions()
|
|
|
|
|
if (this.type === 'editor') {
|
|
|
|
|
this.getDetail()
|
|
|
|
|
} else {
|
|
|
|
|
this.form.pid = this.defaultPid || 0
|
|
|
|
|
this.showWang = true
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.id = ''
|
|
|
|
|
this.type = "add"
|
|
|
|
|
this.defaultPid = 0
|
|
|
|
|
this.pictureList = []
|
|
|
|
|
this.showWang = false
|
|
|
|
|
this.form = {
|
|
|
|
|
title: '',
|
|
|
|
|
pid: 0,
|
|
|
|
|
sort: 0,
|
|
|
|
|
is_visible: 1,
|
|
|
|
|
file_ids: [],
|
|
|
|
|
file_ids: [],
|
|
|
|
|
family_product_lines:[],
|
|
|
|
|
description: '',
|
|
|
|
|
content: ''
|
|
|
|
|
@ -326,4 +371,4 @@
|
|
|
|
|
::v-deep .content {
|
|
|
|
|
flex-basis: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</style>
|
|
|
|
|
|
