yos_web/src/HDrpManagement/productMoneyOdd/components/editPrice.vue

<template>
  <div>
    <el-button size="mini" type="text" :disabled="isEdit()" @click="editBtn">编 辑 价 格</el-button>
    <el-drawer title="编辑价格调整单商品价格" append-to-body :visible.sync="dialogFormVisible" width="50%">
      <div class="container">
        <el-row>
          <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="right" size="mini">
            <!-- <el-col :span="24">
              <el-form-item label="价格等级" prop="pricegrade">
                <el-select v-model="form.pricegrade" placeholder="请选择价格等级">
                  <el-option
                      v-for="item in priceGrade()"
                      :key="item.rowindex"
                      :label="item.value"
                      :value="item.rowindex">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="一级原价" prop="price">
                <el-input size="mini" :disabled="true" placeholder="请输入调整价" v-model="form.oldprice1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="一级调整价" prop="price1">
                <el-input size="mini" placeholder="请输入调整价" v-model="form.price1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="二级原价" prop="price">
                <el-input size="mini" placeholder="请输入调整价"  :disabled="true" v-model="form.oldprice2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="二级调整价" prop="price2">
                <el-input size="mini" placeholder="请输入调整价" v-model="form.price2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三级原价" disabled prop="price">
                <el-input size="mini" placeholder="请输入调整价"  :disabled="true" v-model="form.oldprice3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三级调整价" prop="price3">
                <el-input size="mini" placeholder="请输入调整价" v-model="form.price3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="四级原价" disabled prop="price">
                <el-input size="mini" placeholder="请输入调整价"  :disabled="true"  v-model="form.oldprice4"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="四级调整价" prop="price4">
                <el-input size="mini" placeholder="请输入调整价"  v-model="form.price4"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="五级原价" disabled prop="oldprice5">
                <el-input size="mini" placeholder="请输入调整价" :disabled="true" v-model="form.oldprice5"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="五级调整价" prop="price5">
                <el-input size="mini" placeholder="请输入调整价" v-model="form.price5"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "add",
  components:{},
  props:['data'],
  inject:['priceGrade','isEdit'],
  data(){
    return {
      dialogFormVisible:false,
      projectAddress:[],
      priceArr:['price1','price2','price3','price4','price5'],
      form:{
        "price1":'',
        "price2":'',
        "price3":'',
        "price4":'',
        "price5":'',
        "oldprice1":'',
        "oldprice2":'',
        "oldprice3":'',
        "oldprice4":'',
        "oldprice5":'',
      },
      rules:{
        price1:[
          { required: true, message: '请输入1级调整价', trigger: 'blur'},
        ],
        price2:[
          { required: true, message: '请输入2级调整价', trigger: 'blur'},
        ],
        price3:[
          { required: true, message: '请输入3级调整价', trigger: 'blur'},
        ],
        price4:[
          { required: true, message: '请输入4级调整价', trigger: 'blur'},
        ],
        price5:[
          { required: true, message: '请输入5级调整价', trigger: 'blur'},
        ]
      }
    }
  },
  created () {
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        let content = this.priceArr.map((item,index) => {
          if (this.form[item] !== 0) {
            return {
              "sa_itempriceadjust_itemsid":this.data.sa_itempriceadjust_itemsid,
              "pricegrade":index + 1,
              "price":this.form[item]
            }
          }          
        }).filter(item => item)
        const res = await this.$api.requested({
            "id": "20221025165904",
            "content": {
                "sa_itempriceadjustid": this.$route.query.id,
                "sa_itempriceadjust_itemprice": content
            }
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    },
  }
}
</script>

<style scoped>
/deep/.el-select {
  height: 28px !important;
  width: 100%;
}
/deep/.el-input__inner {
  height: 28px !important;
}
</style>