优化规格绑定耗材样式
This commit is contained in:
parent
9c561ff725
commit
ef53332726
|
|
@ -16,7 +16,8 @@
|
|||
<div class="name_wrap">
|
||||
<div class="name">商品名：{{ goodsDetail.name }}</div>
|
||||
</div>
|
||||
<el-table :data="tableData.cons">
|
||||
<!-- 绑定到商品 -->
|
||||
<el-table :data="tableData.cons" v-if="type == 1">
|
||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="规格名称" prop="specSnap" v-if="type == 2"></el-table-column>
|
||||
<el-table-column label="耗材名称">
|
||||
|
|
@ -54,6 +55,91 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 绑定到规格 -->
|
||||
<el-table :data="tableData.cons" border v-if="type == 2">
|
||||
<el-table-column label="序号" type="index" width="100"></el-table-column>
|
||||
<el-table-column label="规格名称" prop="specSnap"></el-table-column>
|
||||
<el-table-column label="耗材" width="600">
|
||||
<el-table-column label="耗材信息">
|
||||
<template v-slot="scope">
|
||||
<div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
|
||||
<el-select v-model="item.conInfoId" filterable remote reserve-keyword placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod" :loading="loading"
|
||||
@change="skuSelectionChange($event, item)">
|
||||
<el-option v-for="item in options" :key="item.consId" :label="item.conName"
|
||||
:value="item.consId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗材单位">
|
||||
<template v-slot="scope">
|
||||
<div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
|
||||
<div class="t">
|
||||
<span v-if="item.conInfoId">{{ item.conUnit }}</span>
|
||||
<span v-else>请选择耗材</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="消耗量">
|
||||
<template v-slot="scope">
|
||||
<div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
|
||||
<el-input-number v-model="item.surplusStock" :min="0" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template v-slot="scope">
|
||||
<div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
|
||||
<div class="table_btn_wrap">
|
||||
<div class="btn sub" v-if="index > 0" @click="scope.row.consList.splice(index, 1)">
|
||||
<i class="el-icon-remove-outline"></i>
|
||||
</div>
|
||||
<div class="btn add" @click="skuCreateItem(scope.$index)">
|
||||
<i class="el-icon-circle-plus-outline"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <template v-slot="scope">
|
||||
<div class="cons_list_wrap">
|
||||
<div class="row" v-for="(item, index) in scope.row.consList" :key="index">
|
||||
<div class="item">
|
||||
<el-select v-model="item.conInfoId" filterable remote reserve-keyword
|
||||
placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"
|
||||
@change="skuSelectionChange($event, item)">
|
||||
<el-option v-for="item in options" :key="item.consId" :label="item.conName"
|
||||
:value="item.consId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span v-if="item.conInfoId">{{ item.conUnit }}</span>
|
||||
<span v-else>请选择耗材</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-input-number v-model="item.surplusStock" :min="0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="table_btn_wrap">
|
||||
<div class="btn sub" v-if="index > 0" @click="scope.row.consList.splice(index, 1)">
|
||||
<i class="el-icon-remove-outline"></i>
|
||||
</div>
|
||||
<div class="btn add" @click="skuCreateItem(scope.$index)">
|
||||
<i class="el-icon-circle-plus-outline"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading=formLoading @click="onSubmitHandle">确 定</el-button>
|
||||
|
|
@ -98,8 +184,33 @@ export default {
|
|||
// this.$message.error('请完善信息')
|
||||
// return
|
||||
// }
|
||||
|
||||
let res = null
|
||||
this.formLoading = true
|
||||
const res = await tbProskuConV2(this.tableData)
|
||||
if (this.type == 1) {
|
||||
res = await tbProskuConV2(this.tableData)
|
||||
} else if (this.type == 2) {
|
||||
let data = { ...this.tableData }
|
||||
|
||||
let arr = []
|
||||
|
||||
data.cons.map(item => {
|
||||
item.consList.map(val => {
|
||||
if (val.name) {
|
||||
let obj = { ...item }
|
||||
obj.id = val.id
|
||||
obj.name = val.name
|
||||
obj.productSkuId = item.productSkuId
|
||||
obj.conInfoId = val.conInfoId
|
||||
obj.surplusStock = val.surplusStock
|
||||
arr.push(obj)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
data.cons = arr
|
||||
res = await tbProskuConV2(data)
|
||||
}
|
||||
this.formLoading = false
|
||||
this.$message.success('编辑成功')
|
||||
this.dialogVisible = false
|
||||
|
|
@ -109,12 +220,18 @@ export default {
|
|||
this.formLoading = false
|
||||
}
|
||||
},
|
||||
// 选择耗材
|
||||
// 商品选择耗材
|
||||
selectionChange(e, row) {
|
||||
let item = this.options.find(item => item.consId == e)
|
||||
row.name = item.conName
|
||||
row.conUnit = item.conUnit
|
||||
},
|
||||
// 规格选择耗材
|
||||
skuSelectionChange(e, row) {
|
||||
let item = this.options.find(item => item.consId == e)
|
||||
row.name = item.conName
|
||||
row.conUnit = item.conUnit
|
||||
},
|
||||
// 远程搜索耗材
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
|
|
@ -202,9 +319,6 @@ export default {
|
|||
}
|
||||
} else {
|
||||
// 添加至规格
|
||||
if (this.goodsDetail.conInfos.length) {
|
||||
this.tableData.cons = [...this.goodsDetail.conInfos]
|
||||
}
|
||||
this.goodsDetail.skuList.map(val => {
|
||||
let item = {}
|
||||
|
||||
|
|
@ -219,8 +333,35 @@ export default {
|
|||
item.status = 1
|
||||
item.specSnap = val.name
|
||||
|
||||
item.consList = [
|
||||
{
|
||||
surplusStock: 0,
|
||||
conInfoId: '',
|
||||
name: '',
|
||||
conUnit: ''
|
||||
}
|
||||
]
|
||||
|
||||
this.tableData.cons.push(item)
|
||||
})
|
||||
|
||||
|
||||
|
||||
if (this.goodsDetail.conInfos.length) {
|
||||
this.tableData.cons.map(val => {
|
||||
this.goodsDetail.conInfos.map(item => {
|
||||
if (item.productSkuId == val.productSkuId) {
|
||||
val.consList.unshift({
|
||||
id: item.id,
|
||||
surplusStock: item.surplusStock,
|
||||
conInfoId: item.conInfoId,
|
||||
name: item.conName,
|
||||
conUnit: item.conUnit
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 生成新关系项
|
||||
|
|
@ -253,10 +394,27 @@ export default {
|
|||
item.surplusStock = 0
|
||||
item.status = 1
|
||||
item.specSnap = val.specSnap
|
||||
item.consList = [
|
||||
{
|
||||
conInfoId: '',
|
||||
name: '',
|
||||
conUnit: '',
|
||||
surplusStock: 0
|
||||
}
|
||||
]
|
||||
|
||||
this.tableData.cons.push(item)
|
||||
}
|
||||
},
|
||||
// 规格生成新关系项
|
||||
skuCreateItem($index) {
|
||||
this.tableData.cons[$index].consList.push({
|
||||
conInfoId: '',
|
||||
name: '',
|
||||
conUnit: '',
|
||||
surplusStock: 0
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.goodsDetail = ''
|
||||
this.tableData.productId = ''
|
||||
|
|
@ -321,4 +479,29 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cons_list_wrap {
|
||||
.row {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku_table_item {
|
||||
padding: 10px 0;
|
||||
|
||||
.t {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue