wangmingchuan
/
yanzong_vue_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

备份

Browse Source
main
陈伟 11 months ago
parent e331c86047
commit 05579109c3
1 changed files with 419 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 419
      src/views/dataCenter/goods/modules/MultiSpec copy.vue

419
src/views/dataCenter/goods/modules/MultiSpec copy.vue
Unescape View File

@ -0,0 +1,419 @@
<template>
<div>
<a-form-item label="商品规格" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div v-if="true" class="form-item-help" style="line-height: 36px">
<small>最多添加3个商品规格组，生成的SKU数量不能超出50个</small>
</div>
<!-- 规格组 -->
<div class="spec-group" v-for="(item, index) in multiSpecData.specList" :key="index">
<div class="spec-group-item clearfix">
<a-input
class="group-item-input"
v-model="item.spec_name"
:readOnly="isSpecLocked"
placeholder="请输入规格名称"
@change="onChangeSpecGroupIpt"
/>
<a
v-if="!isSpecLocked"
class="group-item-delete"
href="javascript:;"
@click="handleDeleteSpecGroup(index)"
>删除规格组</a
>
</div>
<div class="spec-value clearfix">
<div class="spec-value-item" v-for="(itm, idx) in item.valueList" :key="idx">
<a-input
class="value-item-input"
v-model="itm.spec_value"
:readOnly="isSpecLocked"
placeholder="请输入规格值"
@change="onChangeSpecValueIpt"
/>
<a-icon
v-if="!isSpecLocked"
class="icon-close"
theme="filled"
type="close-circle"
@click="handleDeleteSpecValue(index, idx)"
/>
</div>
<div v-if="!isSpecLocked" class="spec-value-add">
<a class="group-item-delete" href="javascript:;" @click="handleAddSpecValue(index)">新增规格值</a>
</div>
</div>
</div>
<!-- 添加规格按钮 -->
<a-button
v-if="!isSpecLocked && multiSpecData.specList.length < 3"
class="spec-group-add-btn"
icon="plus"
@click="handleAddSpecGroup"
>添加规格组</a-button
>
</a-form-item>
<a-form-item v-show="multiSpecData.skuList.length" label="SKU列表" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- 批量设置 -->
<div v-if="multiSpecData.skuList.length > 1" class="sku-batch">
<span class="title">批量设置:</span>
<a-input-number
v-model="multiSpecData.skuBatchForm.goods_price"
placeholder="商品价格"
:min="0.01"
:precision="2"
/>
<a-input-number
v-model="multiSpecData.skuBatchForm.cost_price"
placeholder="成本价"
:min="0"
:precision="2"
/>
<!-- <a-input-number
v-model="multiSpecData.skuBatchForm.line_price"
placeholder="划线价格"
:min="0"
:precision="2"
/> -->
<a-input-number
v-model="multiSpecData.skuBatchForm.stock_num"
placeholder="库存数量"
:min="0"
:precision="0"
/>
<a-input-number
v-model="multiSpecData.skuBatchForm.goods_weight"
placeholder="商品重量"
:min="0"
:precision="2"
/>
<a-input v-model="multiSpecData.skuBatchForm.goods_sku_no" placeholder="sku编码" />
<a-button @click="handleSkuBatch">立即设置</a-button>
</div>
<div style="margin-bottom: 15px;display: flex;">
<span class="title" style="margin-right: 8px">选择商品Id:</span>
<SelectGoods :defaultList="checkList" :multiple="true" />
</div>
<!-- sku列表table -->
<a-table
class="sku-list"
:columns="multiSpecData.skuColumns"
:dataSource="multiSpecData.skuList"
:scroll="{ x: true }"
:pagination="false"
bordered
>
<!-- 预览图 -->
<template slot="image" slot-scope="text, item">
<SelectImage
v-model="item.image_id"
:defaultList="item.image_id > 0 && item.image ? [item.image] : []"
:width="50"
/>
</template>
<!-- 商品价格 -->
<template slot="goods_price" slot-scope="text, item">
<a-input-number v-model="item.goods_price" size="small" :min="0.01" :precision="2" />
</template>
<!-- 成本价 -->
<template slot="cost_price" slot-scope="text, item">
<a-input-number v-model="item.cost_price" size="small" :min="0" :precision="2" />
</template>
<!-- 划线价格 -->
<!-- <template slot="line_price" slot-scope="text, item">
<a-input-number v-model="item.line_price" size="small" :min="0" :precision="2" />
</template> -->
<!-- 库存数量 -->
<template slot="stock_num" slot-scope="text, item">
<a-input-number v-model="item.stock_num" size="small" :min="0" :precision="0" />
</template>
<!-- 商品重量 -->
<template slot="goods_weight" slot-scope="text, item">
<a-input-number v-model="item.goods_weight" size="small" :min="0" :precision="2" />
</template>
<!-- sku编码 -->
<template slot="goods_sku_no" slot-scope="text, item">
<a-input v-model="item.goods_sku_no" size="small" />
</template>
</a-table>
</a-form-item>
</div>
</template>
<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import MultiSpecModel from '@/common/model/goods/MultiSpec'
import { SelectImage } from '@/components'
import SelectGoods from '@/components/SelectGoods/SelectGoods.vue'
export default {
components: {
SelectImage,
SelectGoods
},
props: {
// 默认的规格列表
defaultSpecList: PropTypes.array.def([]),
// 默认的SKU列表
defaultSkuList: PropTypes.array.def([]),
// 商品规格是否锁定(锁定状态下不允许编辑规格)
isSpecLocked: PropTypes.bool.def(false),
checkList: PropTypes.array.def([])
},
data () {
return {
// 标签布局属性
labelCol: { span: 3 },
// 输入框布局属性
wrapperCol: { span: 21 },
// 商品多规格模型
MultiSpecModel: new MultiSpecModel(),
// MultiSpecModel: Object,
multiSpecData: {
// 规格列表
specList: [],
// SKU列表
skuList: []
},
visible: false
}
},
watch: {
defaultSpecList (val) {
if (val.length && this.MultiSpecModel.isEmpty()) {
this.getData()
}
}
},
// 初始化数据
created () {
// 获取规格及SKU信息
this.getData()
},
methods: {
// 获取规格及SKU信息(展示)
getData () {
const { defaultSpecList, defaultSkuList } = this
this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList)
},
// 获取规格及SKU信息(表单提交)
getFromSpecData () {
return this.MultiSpecModel.getFromSpecData()
},
// 添加规格组
handleAddSpecGroup () {
if (this.checkSkuMaxNum()) {
this.MultiSpecModel.handleAddSpecGroup()
}
},
// 删除规格组
handleDeleteSpecGroup (groupIndex) {
const app = this
const modal = this.$confirm({
title: '您确定要删除该规格组吗?',
content: '删除后不可恢复',
onOk () {
// 删除元素
app.MultiSpecModel.handleDeleteSpecGroup(groupIndex)
// 关闭对话框
modal.destroy()
}
})
},
// 新增规格值
handleAddSpecValue (groupIndex) {
if (this.checkSkuMaxNum()) {
this.MultiSpecModel.handleAddSpecValue(groupIndex)
}
},
// 删除规格值
handleDeleteSpecValue (groupIndex, valueIndex) {
const app = this
const modal = this.$confirm({
title: '您确定要删除该规格值吗?',
content: '删除后不可恢复',
onOk () {
// 删除元素
app.MultiSpecModel.handleDeleteSpecValue(groupIndex, valueIndex)
// 关闭对话框
modal.destroy()
}
})
},
// 规格组输入框change事件
onChangeSpecGroupIpt () {
// 更新skuList
this.MultiSpecModel.onUpdate(true)
},
// 规格值输入框change事件
onChangeSpecValueIpt (event, itm) {
// 更新skuList
this.MultiSpecModel.onUpdate(true)
},
// 验证最大sku数量
checkSkuMaxNum () {
const skuList = this.multiSpecData.skuList
if (skuList.length >= 50) {
this.$message.error(`生成的sku列表数量不能大于50个，当前数量：${skuList.length}个`, 2.5)
return false
}
return true
},
// 批量设置sku事件
handleSkuBatch () {
this.MultiSpecModel.handleSkuBatch()
},
// 验证多规格表单
verifyForm () {
if (!this.MultiSpecModel.verifyForm()) {
this.$message.error(this.MultiSpecModel.getError(), 2)
return false
}
return true
},
showModal () {
this.visible = true
}
}
}
</script>
<style lang="less" scoped>
// 商品多规格
.spec-group {
width: 895px;
margin-bottom: 15px;
line-height: normal;
.ant-input {
height: 28px;
padding: 4px 11px;
font-size: @font-size-base;
line-height: 1.5;
&::placeholder {
font-size: @font-size-base;
}
}
.form-item-help {
line-height: 36px;
}
.spec-group-item {
background: #f4f5f9;
padding: 7px 12px;
line-height: 28px;
.group-item-input {
float: left;
width: 180px;
}
.group-item-delete {
font-size: 12px;
float: right;
}
}
.spec-value {
background: #fbfbfb;
padding: 8px 35px;
.spec-value-add,
.spec-value-item {
float: left;
margin-bottom: 6px;
margin-top: 6px;
}
.spec-value-add {
height: 28px;
line-height: 28px;
a {
font-size: 12px;
}
}
.spec-value-item {
position: relative;
margin-right: 20px;
.value-item-input {
width: 186px;
}
&:hover {
.icon-close {
display: block;
}
}
.icon-close {
display: none;
position: absolute;
top: -8px;
right: -8px;
cursor: pointer;
font-size: 16px;
color: #7d7d7d;
}
}
}
}
// 添加规格按钮
.spec-group-add-btn {
font-size: @font-size-base;
}
// 批量设置sku
.sku-batch {
line-height: 40px;
margin-bottom: 12px;
.title {
line-height: 28px;
margin-right: 15px;
font-size: @font-size-base;
}
/deep/.ant-input,
/deep/.ant-input-number {
width: 120px;
margin-right: 15px;
}
/deep/.ant-input {
width: 140px;
}
}
// sku列表
.sku-list {
width: 895px;
/deep/.ant-table-thead > tr > th,
/deep/.ant-table-tbody > tr > td {
white-space: nowrap;
}
/deep/.ant-table-tbody > tr > td {
padding: 12px 18px;
}
/deep/.ant-input-sm,
/deep/.ant-input-number-sm {
height: 28px;
}
/deep/.ant-input-number-sm input {
height: 26px;
}
}
</style>
Write Preview
Loading…
Cancel
Save