caimei-mall-admin-ui/src/views/goods/components/price-edit.vue

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="1000px">
    <el-form ref="dataForm" :model="formData" :rules="rules" size="mini" label-width="120px">
      <el-form-item label="商品名称：">
        <div class="text" v-text="product.productName" />
      </el-form-item>
      <el-form-item label="商品图片：">
        <el-popover
          placement="top-start"
          title=""
          width="120"
          trigger="hover"
        >
          <img :src="product.mainImage" alt="" style="width:100px;height:100px;">
          <img slot="reference" :src="product.mainImage" alt="" style="width:50px;height:50px;">
        </el-popover>
      </el-form-item>
      <el-form-item label="供应商名称：">
        <div class="text" v-text="product.shopName" />
      </el-form-item>
      <el-form-item label="商品状态:" prop="validFlag">
        <el-select v-model="formData.validFlag" placeholder="请选择" disabled="true" @change="handleChange($event)">
          <el-option label="已上架" :value="2" />
          <el-option label="已下架" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格:" prop="skus">
        <el-table row-key="title" :data="formData.skus" border height="250">
          <el-table-column label="商品规格" prop="title" align="center">
            <template slot-scope="{row}">
              <span>{{ row.unit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="起订量" prop="name" align="center">
            <template slot-scope="{row}">
              <span>{{ row.minBuyNumber }}</span>
            </template>
            <!-- <template slot-scope="{row}">
              <el-input v-model="row.minBuyNumber" disabled="true" @input="e => (row.name= checkedInput(e))" />
            </template> -->
          </el-table-column>
          <el-table-column label="成本价" prop="name" align="center">
            <template slot-scope="{row}">
              <span> ¥{{ row.costPrice | toThousandFloatFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="售价" prop="name" align="center">
            <template slot-scope="{row}">
              <span> ¥{{ row.price | toThousandFloatFilter }}</span>
            </template>
            <!-- <template slot-scope="{row}">
              <el-input v-model="row.price" disabled="true" @input="e => (row.price= checkedInput(e))">
                <template slot="prepend">¥</template>
              </el-input>
            </template> -->
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
      <el-button v-if="isDetail" type="primary" @click="handleSave"> 保存 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveGoods } from '@/api/goods'
export default {
  props: {
    dialogTitle: {
      type: String,
      default: '编辑'
    },
    isVisible: {
      type: Boolean,
      default: false
    },
    product: {
      type: Object,
      default: () => {}
    },
    classify: {
      type: Array,
      default: () => []
    },
    isDetail: {
      type: Boolean,
      default: () => true
    }
  },
  data: function() {
    return {
      postData: null,
      formData: {
        skus: [],
        validFlag: ''
      },
      rules: {
        classifyID: [{ required: true, message: '*必填', trigger: 'change' }],
        ladderPriceFlag: [{ required: true, message: '*必填', trigger: 'change' }],
        retailPrice: [{ validator: this.checkSinglePrice, type: 'float', trigger: 'blur' }],
        minBuyNumber: [{ validator: this.checkSingleNumber, type: 'number', trigger: 'blur' }]
      }
    }
  },
  computed: {
    dialogFormVisible: {
      get() {
        return this.isVisible
      },
      set(val) {
        this.$emit('update:isVisible', val)
      }
    }
  },
  watch: {
    product: function(val) {
      this.postData = JSON.parse(JSON.stringify(val))
      this.formData.skus = this.postData.skus
      this.formData.validFlag = this.postData.validFlag
    }
  },
  methods: {
    handleChange(value) {
      console.log('value', value)
    },
    handleSave() {
      // 保存商品
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.saveGoods()
        }
      })
    },
    async saveGoods() {
      try {
        await saveGoods(this.formData)
        this.$message.success('操作成功')
        this.$parent.getList()
        this.dialogFormVisible = false
      } catch (error) {
        console.log('error', error)
      }
    },
    checkedInput(event) {
      const pattern = /[^0-9.]/g
      return event.replace(pattern, '')
    }
  }
}
</script>
<style scoped>
.group label{
    white-space: nowrap;
    font-weight: normal;
  }
.text{
  line-height: 20px;
  padding: 4px 0 0;
}
.line{
  display: flex;
}
.single{
  width:280px;
}
.multiple{
  display: flex;
  padding-left: 120px;
  justify-content: left;
  align-items: flex-end;
}
.group{
  white-space: nowrap;
  font-weight: normal;
}
.group button{
  padding:0 15px;
}
</style>