fuliqi
2024-01-24 29c1e7eb5ac16e90d8991a86c1c071bc312ec8d9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!--
 * @Author: wuyue
 * @Date: 2022-12-12 16:25:40
 * @LastEditTime: 2022-12-22 11:03:23
 * @LastEditors: wuyue
 * @Descripttion:
 * @version:
-->
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="红线价格调整" :close-on-click-modal="false"
               :modal-append-to-body="false" v-if="dialogVisible">
      <el-form size="mini" :model="form" label-width="120px" ref="form" :rules="formRules">
        <el-form-item label="商品主编码:" prop="spuNum">
          {{form.spuNum}}
        </el-form-item>
        <el-form-item label="商品名称:" prop="spuName">
          {{form.spuName}}
        </el-form-item>
        <el-form-item label="商品规格:" prop="spuName">
          <el-table border size="mini" :data="form.tableData">
            <el-table-column prop="spec" label="规格"></el-table-column>
            <el-table-column label="红线价格(瓶)">
              <template slot-scope="scope">
                <el-form-item class="tableInput" :prop="`tableData.${scope.$index}.redLinePrice`"
                              :rules="formRules.redLinePrice">
                  ¥ <el-input-number :min="0" :max="999999999" :disabled="scope.row.disabled"
                                   v-model="scope.row.redLinePrice"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80px">
              <template slot-scope="scope">
                <wly-btn @click="scope.row.disabled = !scope.row.disabled">调整</wly-btn>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input v-model="form.remark" type="textarea" :autosize="{minRows:2,maxRows:4}"
                    placeholder="请输入备注" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="buttonPosition">
        <el-button size="mini" @click="submit" type="primary" :loading="loading">保存</el-button>
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import priceManagementApi from '@/api/priceManagement'
import { vailInputRuleFloat } from '@/utils/validator'
 
export default {
  props: {
    row: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        brandName: null,
        remark: null,
        tableData: []
      },
      formRules: {
        redLinePrice: [{ validator: vailInputRuleFloat }],
        remark: [{ max: 120, message: '备注最多只能输入 120 个字' }]
      },
      loading: false
    }
  },
  methods: {
    // 弹出框打开关闭事件
    toggleDialog() {
      this.dialogVisible = !this.dialogVisible
      if (this.dialogVisible) {
        this.$nextTick(() => {
          this.form.spuName = this.row.spuName
          this.form.spuNum = this.row.spuNum
          this.form.remark = this.row.remark
          this.form.tableData = [{
            spec: this.row.spec,
            redLinePrice: this.row.redLinePrice,
            disabled: true
          }]
        })
      }
    },
    /**
       * 提交
       */
    submit() {
      this.$refs.form.validate().then(async res => {
        this.loading = true
        try {
          const params = {
            spuNum: this.form.spuNum,
            redLinePrice: this.form.tableData[0].redLinePrice,
            remark: this.form.remark
          }
          const resQuest = await priceManagementApi.adjustredLinePrice(params)
          if (resQuest.data) {
            this.$emit('submit')
            this.dialogVisible = false
          }
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.tableInput.el-form-item--mini.el-form-item {
  margin-top: 15px !important;
}
</style>