|
@@ -0,0 +1,171 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="visible"
|
|
|
+ v-bind="modalOptions"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formData"
|
|
|
+ :model="formData"
|
|
|
+ size="mini"
|
|
|
+ label-position="left"
|
|
|
+ label-suffix=":"
|
|
|
+ label-width="200px"
|
|
|
+ >
|
|
|
+ <!-- 商品SKU选择 -->
|
|
|
+ <el-form-item label="商品名称" prop="productName">
|
|
|
+ {{ formData.productName || '--' }}
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
|
|
|
+ <div
|
|
|
+ style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div>商品款式</div>
|
|
|
+ </div>
|
|
|
+ <el-row class="detail-box">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-table
|
|
|
+ :data="formData.skus" style="width: 100%"
|
|
|
+ :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
|
|
|
+ >
|
|
|
+ <el-table-column v-for="(skuAttr, index) in formData.names.filter(i => i.skuName && i.values.some((attr) => attr.skuValue))" :key="index" :label="skuAttr.skuName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index]">
|
|
|
+ {{ handleAttrValue(scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index]) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="售价">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.price" maxlength="9" disabled />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="原价">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.originalPrice" maxlength="9" disabled />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="库存">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.stockNumber" maxlength="9" disabled />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="重量(KG)">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.weight" maxlength="9" disabled />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="SKU">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.sku" maxlength="20" disabled />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button
|
|
|
+ type="warning" size="mini"
|
|
|
+ @click="$emit('select', row)"
|
|
|
+ >
|
|
|
+ 选择
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getProductGetById } from '@/api/commodity'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'SkuSelection',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modalOptions: {
|
|
|
+ closeOnClickModal: false,
|
|
|
+ width: '800px',
|
|
|
+ title: '商品SKU选择'
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ formData: {
|
|
|
+ productId: '',
|
|
|
+ productName: '',
|
|
|
+ skus: [],
|
|
|
+ names: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ handleOpen(params = {}) {
|
|
|
+ this.formData = Object.assign(this.$options.data().formData, params)
|
|
|
+ if (params.productId) {
|
|
|
+ this.getInfo(params.productId)
|
|
|
+ }
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ async getInfo(id) {
|
|
|
+ const loading = this.$loading({ text: '加载中' })
|
|
|
+ try {
|
|
|
+ const res = await getProductGetById({ productId: id })
|
|
|
+ this.formData = Object.assign(this.$options.data().formData, res.data, {
|
|
|
+ productId: res.data.productId || '',
|
|
|
+ productName: res.data.productName || '',
|
|
|
+ skus: res.data.skus || [],
|
|
|
+ names: res.data.names || []
|
|
|
+ })
|
|
|
+ } finally {
|
|
|
+ loading.close()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAttrValue(map) {
|
|
|
+ const hasChilds =
|
|
|
+ this.formData.names &&
|
|
|
+ this.formData.names.filter((skuAttr) => {
|
|
|
+ const hasChild = skuAttr.values.some((attr) => attr.skuValue)
|
|
|
+ return skuAttr.skuName && hasChild
|
|
|
+ })
|
|
|
+ if (!map) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ const { code, valueCode } = map
|
|
|
+ let codeStr = ''
|
|
|
+ hasChilds.map((item) => {
|
|
|
+ const { values } = item
|
|
|
+ values &&
|
|
|
+ values.some((attr) => {
|
|
|
+ const isSome = item.code === code && attr.valueCode === valueCode
|
|
|
+ if (isSome) {
|
|
|
+ codeStr = attr.skuValue
|
|
|
+ }
|
|
|
+ return isSome
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return codeStr
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.small-padding {
|
|
|
+ .cell {
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fixed-width {
|
|
|
+ .el-button--mini {
|
|
|
+ padding: 7px 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|