editModal.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <a-modal
  3. centered
  4. class="productLevelEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑价格"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <!-- 编辑价格 -->
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="productLevelEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="产品编码">
  23. {{ nowData&&nowData.code ? nowData.code : '--' }}
  24. </a-form-model-item>
  25. <a-form-model-item label="产品名称">
  26. {{ nowData&&nowData.name ? nowData.name : '--' }}
  27. </a-form-model-item>
  28. <a-form-model-item label="产品级别" prop="level">
  29. <v-select code="PRODUCT_LEVEL" id="productLevelEdit-level" v-model="form.level" allowClear placeholder="请选择产品级别"></v-select>
  30. </a-form-model-item>
  31. </a-form-model>
  32. <div class="btn-cont">
  33. <a-button id="productLevelEdit-cancel" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  34. <a-button type="primary" id="productLevelEdit-save" @click="handleSave">保存</a-button>
  35. </div>
  36. </a-spin>
  37. </div>
  38. </a-modal>
  39. </template>
  40. <script>
  41. import { VSelect } from '@/components'
  42. import { productLevelSave } from '@/api/product'
  43. export default {
  44. name: 'ProductLevelEditModal',
  45. components: { VSelect },
  46. props: {
  47. openModal: { // 弹框显示状态
  48. type: Boolean,
  49. default: false
  50. },
  51. itemId: {
  52. type: [Number, String],
  53. default: ''
  54. },
  55. nowData: {
  56. type: Object,
  57. default: () => {
  58. return {}
  59. }
  60. }
  61. },
  62. data () {
  63. return {
  64. isShow: this.openModal, // 是否打开弹框
  65. spinning: false,
  66. formItemLayout: {
  67. labelCol: { span: 4 },
  68. wrapperCol: { span: 16 }
  69. },
  70. form: {
  71. level: undefined
  72. },
  73. rules: {
  74. level: [
  75. { required: true, message: '请选择产品级别', trigger: 'change' }
  76. ]
  77. }
  78. }
  79. },
  80. methods: {
  81. // 保存
  82. handleSave () {
  83. const _this = this
  84. this.$refs.ruleForm.validate(valid => {
  85. if (valid) {
  86. const params = _this.nowData
  87. params.level = _this.form.level
  88. _this.spinning = true
  89. productLevelSave(params).then(res => {
  90. if (res.status == 200) {
  91. _this.$message.success(res.message)
  92. setTimeout(() => {
  93. _this.$emit('ok')
  94. _this.isShow = false
  95. _this.spinning = false
  96. }, 1000)
  97. } else {
  98. _this.spinning = false
  99. }
  100. })
  101. } else {
  102. console.log('error submit!!')
  103. return false
  104. }
  105. })
  106. }
  107. },
  108. watch: {
  109. // 父页面传过来的弹框状态
  110. openModal (newValue, oldValue) {
  111. this.isShow = newValue
  112. },
  113. // 重定义的弹框状态
  114. isShow (newValue, oldValue) {
  115. if (!newValue) {
  116. this.$emit('close')
  117. }
  118. },
  119. itemId (newValue, oldValue) {
  120. if (this.isShow && newValue) {
  121. this.form.level = this.nowData.level || undefined
  122. }
  123. }
  124. }
  125. }
  126. </script>
  127. <style lang="less">
  128. .productLevelEdit-modal{
  129. .ant-modal-body {
  130. padding: 40px 40px 24px;
  131. }
  132. .btn-cont {
  133. text-align: center;
  134. margin: 35px 0 30px;
  135. }
  136. }
  137. </style>