@ -50,27 +50,72 @@
< / div >
< / div >
< / template >
< template v -slot : picture_id >
< 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 > Poster :
< / div >
< div class = "xy-table-item-content" >
< el -upload :action ="action" class = 'upload-demo' :limit ="1" list -type = " picture -card "
accept = ".PNG,.jpg,.jpeg,.bmp,.svg" : file - list = "pictureList" ref = "pictureUpload" : auto - upload = "true"
: on - success = "handlesuccessP" : on - remove = "handleRemoveP" >
< i class = "el-icon-plus" > < / i >
< / e l - u p l o a d >
< / div >
< / div >
< / template >
< template v -slot : description >
< 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 > Description :
< / div >
< div class = "xy-table-item-content" >
< el -input type = "textarea" :rows ="5" v-model ="form.description" > < / el -input >
<!-- < el -input type = "textarea" :rows ="5" v-model ="form.description" > < / el -input > -- >
< my -tinymce v -if = " showWang " :id ="'description'" @input ="(e)=>{changeEditor(e,'description')}"
: value = "form.description" > < / m y - t i n y m c e >
< / div >
< / div >
< / template >
< template v -slot : picture_id >
< template v -slot : application_note_desc >
< 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 > Poster :
< span style = "color: red;font-weight: bold;padding-right: 4px;" > < / span > Application Note Description :
< / div >
< div class = "xy-table-item-content" >
< el -upload :action ="action" class = 'upload-demo' :limit ="1" list -type = " picture -card "
accept = ".PNG,.jpg,.jpeg,.bmp,.svg" : file - list = "pictureList" ref = "pictureUpload" : auto - upload = "true"
: on - success = "handlesuccessP" : on - remove = "handleRemoveP" >
< i class = "el-icon-plus" > < / i >
< / e l - u p l o a d >
<!-- < el -input type = "textarea" :rows ="5" v-model ="form.application_note_desc" > < / el -input > -- >
< my -tinymce v -if = " showWang " :id ="'application_note_desc'"
@ input = "(e)=>{changeEditor(e,'application_note_desc')}" : value = "form.application_note_desc" > < / m y - t i n y m c e >
< / div >
< / div >
< / template >
< template v -slot : product_category_phase >
< 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 > Sub Phase :
< / div >
< div class = "xy-table-item-content" >
< el -button type = "primary" style = "margin-bottom:10px" size = "small" @click ="addSubPhase" > Add < / el -button >
< xy -table key = "1" style = "width:850px" :list ="form.product_category_phase" :isPage ="false" :height ="350"
: table - item = "sub_detail_item" >
< template v -slot : value >
< el -table -column align = 'left' label = "value" width = "680" >
< template slot -scope = " scope " >
< el -input placeholder = "Please Input" style = "width:100%" v-model ="scope.row.value" > < / el -input >
< / template >
< / e l - t a b l e - c o l u m n >
< / 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 = "delSubPhase(scope.row.id,scope.$index)" title = "Are you sure to delete it?" >
< el -button type = "danger" size = "small" slot = "reference" > delete < / e l - b u t t o n >
< / e l - p o p c o n f i r m >
< / template >
< / e l - t a b l e - c o l u m n >
< / template >
< / x y - t a b l e >
< / div >
< / div >
< / template >
@ -133,8 +178,8 @@
< div class = "xy-table-item-content" >
< el -button type = "primary" style = "margin-bottom:10px" size = "small" @click ="addAppRow('','add')" > Add
Application < / e l - b u t t o n >
< xy -table key= "2" style = "width:850px" :list ="applicationsList" :isPage ="false" :height ="350"
: table- item = "application_detail_item" >
< xy -table ref= "applications" row -key = " id " key= "2" style = "width:850px" :list ="applicationsList"
: isPage= "false" : height = "350" : table- item = "application_detail_item" >
< template v -slot : btns >
< el -table -column align = 'center' label = "operate" width = "180" header -align = " center " >
< template slot -scope = " scope " >
@ -174,7 +219,7 @@
<!-- < wangEditor :isShow ="isShow" v -show = " showWang " :value ="form.character"
@ change = "(e)=>{changeEditor(e,'character')}" > < / wangEditor > -- >
< my -tinymce v -if = " showWang " : key id="'character'" @input ="(e)=>{changeEditor(e,'character')}"
< my -tinymce v -if = " showWang " : id="'character'" @input ="(e)=>{changeEditor(e,'character')}"
: value = "form.character" > < / m y - t i n y m c e >
< / div >
< / div >
@ -185,7 +230,7 @@
< span style = "color: red;font-weight: bold;padding-right: 4px;" > < / span > Packing :
< / div >
< div class = "xy-table-item-content" >
< my -tinymce : key id="'packing'" v -if = " show Wa ng" @input ="(e)=>{changeEditor(e,'packing')}"
< my -tinymce : id="'packing'" v -if = " show Packi ng" @input ="(e)=>{changeEditor(e,'packing')}"
: value = "form.packing" > < / m y - t i n y m c e >
< / div >
< / div >
@ -203,17 +248,21 @@
import {
save ,
show ,
index
index ,
phaseDel
} from "@/api/product/category.js"
import {
getToken
} from '@/utils/auth'
import {
destroy ,
index as getApp
index as getApp ,
batchSort
} from "@/api/product/application.js"
import addApplication from './addApplication.vue' ;
import productMixin from "@/mixin/product.js"
import Sortable from 'sortablejs' ;
export default {
mixins : [ productMixin ] ,
components : {
@ -222,6 +271,7 @@
data ( ) {
return {
showWang : false ,
showPacking : false ,
isShow : false ,
type : 'add' ,
id : '' ,
@ -244,6 +294,15 @@
align : 'left' ,
width : 620
} ] ,
sub _detail _item : [ {
type : 'index' ,
width : 50 ,
} , {
prop : 'value' ,
label : 'Name' ,
align : 'left' ,
width : 680
} ] ,
detail _item : [ {
type : 'index' ,
width : 50 ,
@ -263,13 +322,13 @@
name : '' ,
sort : 0 ,
is _recommend : 0 ,
description : '' ,
picture _id : '' ,
description : '' ,
application _note _desc : '' ,
product _category _phase : [ ] ,
product _category _details : [ ] ,
product _category _applications : [ ] ,
download _ids : [ ] ,
character : '' ,
packing : '' ,
pid : 0 ,
@ -284,9 +343,13 @@
} ,
created ( ) {
this . uploadOther . token = getToken ( ) ;
} ,
mounted( ) {
watch: {
} ,
mounted ( ) {
this . initSort ( )
} ,
methods : {
handleRemoved ( file , fileList ) {
@ -343,14 +406,36 @@
row . list = this . productDetailsKeyList [ e ] . list
row . value = row . type == 'select' ? [ ] : ''
} ,
/ / s u b p h a s e
addSubPhase ( ) {
this . form . product _category _phase . push ( {
value : '' ,
sort : 0
} )
} ,
delSubPhase ( id , index ) {
if ( id ) {
phaseDel ( {
id : id
} ) . then ( res => {
this . form . product _category _phase . splice ( index , 1 )
} )
} else {
this . form . product _category _phase . splice ( index , 1 )
}
} ,
/ / a d d A p p l i c a t i o n
addAppRow ( id , type ) {
if ( id ) {
this . $refs . addApplication . id = id
}
/ / 编 辑 的 时 候 有 i d 就 直 接 绑 定 上 去
if ( this . id ) {
this . $refs . addApplication . setProductCategoryId ( this . id )
}
this . $refs . addApplication . setSort ( this . applicationsList . length + 1 )
this . $refs . addApplication . type = type
this . $refs . addApplication . isShow = true
} ,
delAppRow ( id , index ) {
destroy ( {
@ -366,8 +451,59 @@
reject ( error )
} )
} ,
/ / 移 动 排 序
initSort ( ) {
const el = this . $refs [ 'applications' ] . $el . querySelector ( '.el-table__body-wrapper > table > tbody' )
let _this = this ;
const ops = {
animation : 200 , / / 动 画 时 长
handle : ".el-table__row" , / / 可 拖 拽 区 域 c l a s s
/ / 拖 拽 中 事 件
onMove : ( {
dragged ,
related
} ) => {
const oldRow = _this . applicationsList [ dragged . rowIndex ] / / 旧 位 置 数 据
const newRow = _this . applicationsList [ related . rowIndex ] / / 被 拖 拽 的 新 数 据
} ,
/ / 拖 拽 结 束 事 件
onEnd : evt => {
const curRow = _this . applicationsList . splice ( evt . oldIndex , 1 ) [ 0 ]
_this . applicationsList . splice ( evt . newIndex , 0 , curRow )
this . updateSort ( )
}
}
Sortable . create ( el , ops )
} ,
/ / 批 量 更 新 a p p l i c a t i o n s o r t
async updateSort ( ) {
let sortArr = [ ]
this . applicationsList . map ( ( item , index ) => {
sortArr . push ( {
id : item . id ,
sort : index + 1
} )
} )
await batchSort ( {
data : sortArr
} )
} ,
/ / 根 据 i d 获 取 a p p l i c a i t o n l i s t
async getApplicationList ( id ) {
const res = await getApp ( {
page : 1 ,
page _size : 9999 ,
product _category _id : id ,
sort _name : 'sort' ,
sort _type : 'ASC'
} )
this . applicationsList = res . data
} ,
/ / 创 建 完 a p p l i c a t i o n 返 回 处 理 新 增 的 时 候 需 要 自 动 保 存 p h a s e 一 份 编 辑 的 时 候 直 接 再 调 用 一 遍 列 表
/ / 新 增 完 第 一 条 a p p l i c a t i o n L i s t 提 交 自 动 保 存 后 能 获 取 到 i d , 只 需 要 第 一 次 新 增 的 时 候 做 处 理
getApplication ( res ) {
console . log ( res )
if ( this . type === 'add' ) {
let _arr = this . base . deepCopy ( this . applicationsList )
if ( this . applicationsList . length > 0 ) {
let count = - 1
@ -376,7 +512,6 @@
count = index
}
} )
console . log ( count )
if ( count > - 1 ) {
_arr [ count ] = this . base . deepCopy ( res )
} else {
@ -387,6 +522,13 @@
this . applicationsList . push ( res )
}
this . $forceUpdate ( )
} else {
this . getApplicationList ( this . id )
}
} ,
checkSubmit ( ) {
this . $refs . dialog . submit ( )
} ,
submit ( ) {
if ( this . id ) {
@ -485,11 +627,16 @@
} ) . then ( res => {
this . form = this . base . requestToForm ( res , this . form )
this . form . description = res . description ? res . description : ''
this . form . application _note _desc = res . application _note _desc ? res . application _note _desc : ''
this . form . product _category _phase = res . phase ? res . phase : [ ]
this . form . character = res . character ? res . character : ''
this . form . packing = res . packing ? res . packing : ''
this . applicationsList = res . product _category _application s
/ / t h i s . a p p l i c a t i o n s L i s t = r e s . p r o d u c t _ c a t e g o r y _ a p p l i c a t i o n s
this . form . is _recommend = res . is _recommend ? res . is _recommend : 0
this . showWang = true
this . showPacking = true
/ / 获 取 a p p l i c a i t o n l i s t
/ / 选 择 的 c a t e g o r y
if ( res . product _category _links _by _sub . length > 0 ) {
@ -534,6 +681,7 @@
this . getCategoryList ( )
if ( this . type === 'editor' ) {
this . getDetail ( )
this . getApplicationList ( this . id )
}
for ( var k in this . productDetailsKeyList ) {
if ( this . productDetailsKeyList [ k ] [ "type" ] === 'select' ) {
@ -549,10 +697,13 @@
}
}
this . showWang = true
this . showPacking = true
} else {
this . id = ''
this . type = "add"
this . showWang = false
this . showPacking = false
this . downloadsList = [ ]
this . pictureList = [ ]
this . applicationsList = [ ]
@ -564,10 +715,13 @@
sort : 0 ,
is _recommend : 0 ,
picture _id : '' ,
description : '' ,
application _note _desc : '' ,
product _category _phase : [ ] ,
product _category _details : [ ] ,
product _category _applications : [ ] ,
download _ids : [ ] ,
description : '' ,
character : '' ,
packing : '' ,
pid : 0 ,
@ -587,6 +741,7 @@
: : v - deep . product _category _applications ,
: : v - deep . download _ids ,
: : v - deep . description ,
: : v - deep . application _note _desc ,
: : v - deep . packing ,
: : v - deep . character ,
{