add-server-to-hd.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <a-modal
  3. :footer="null"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :zIndex="5000"
  8. @cancel="cancle"
  9. v-model="isShow">
  10. <a-form :form="form">
  11. <a-form-item label="原价" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
  12. <a-input-number
  13. style="width: 90%;"
  14. :min=0
  15. :precision="2"
  16. v-decorator="[
  17. 'formValidate.itemSrcPrice',
  18. { initialValue: formValidate.itemSrcPrice,
  19. rules: [{ required: true, type: 'number', message: '请输入原价', trigger: 'change' }] },
  20. ]">
  21. </a-input-number >
  22. </a-form-item>
  23. <a-form-item label="数量" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
  24. <a-input-number
  25. style="width: 90%;"
  26. :precision="0"
  27. :min=1
  28. v-decorator="[
  29. 'formValidate.itemNum',
  30. { initialValue: formValidate.itemNum,
  31. rules: [{ required: true, type: 'number', message: '请输入数量', trigger: 'change' }] },
  32. ]"
  33. >
  34. </a-input-number>
  35. </a-form-item>
  36. <a-form-item :wrapper-col="{ span: 18, offset:3}">
  37. <a-button v-if="!checked" type="primary" style="width:100px;" @click="handleSubmit()">加入</a-button>
  38. <a-button v-if="checked" type="primary" style="width:100px;" @click="handleSubmit()">保存</a-button>
  39. <a-button v-if="checked" type="error" style="margin-left: 20px;width:100px;" @click="del()">删除</a-button>
  40. <a-button @click="cancle()" style="margin-left: 20px;width:100px;">取消</a-button>
  41. </a-form-item>
  42. </a-form>
  43. </a-modal>
  44. </template>
  45. <script>
  46. export default {
  47. name: 'addServerToHd',
  48. props: {
  49. openModal: {
  50. type: Boolean,
  51. default: false
  52. },
  53. index: {
  54. type: [String, Number]
  55. },
  56. },
  57. components: { },
  58. watch: {
  59. isShow (newValue, oldValue) {
  60. if (!newValue){
  61. this.$emit('closeModal')
  62. this.clearData()
  63. }
  64. },
  65. openModal (newValue, oldValue) {
  66. this.isShow = newValue
  67. }
  68. },
  69. data () {
  70. return {
  71. isShow: this.openModal,
  72. modal_loading: false,
  73. title: '加入活动内容',
  74. checked: false,
  75. form: this.$form.createForm(this, { name: 'serverToHd' }),
  76. formValidate: {
  77. itemSrcPrice: 0,
  78. itemNum: 1
  79. },
  80. serverData: {},
  81. }
  82. },
  83. methods: {
  84. // 设置数据
  85. setServerData (item, checked){
  86. console.log(item,'000')
  87. this.checked = checked
  88. this.title = item.itemName
  89. this.serverData = item
  90. this.formValidate.itemSrcPrice = item.itemSrcPrice
  91. this.formValidate.itemNum = item.itemNum
  92. },
  93. // 清空数据
  94. clearData (){
  95. this.title = ''
  96. this.checked = false
  97. this.serverData = {}
  98. this.form.resetFields()
  99. },
  100. // 关闭弹窗触发
  101. cancle (){
  102. this.isShow = false
  103. },
  104. // 加入套餐,type 1新增,0编辑
  105. handleSubmit () {
  106. this.form.validateFields((valid,vaules) => {
  107. if (!valid) {
  108. console.log(vaules.formValidate)
  109. vaules.formValidate.itemSrcPrice = Number(vaules.formValidate.itemSrcPrice)
  110. if (!vaules.formValidate.itemNum){
  111. this.$message.info('请输入数量')
  112. return
  113. }
  114. if (!vaules.formValidate.itemSrcPrice){
  115. this.$message.info('请输入原价')
  116. return
  117. }
  118. this.serverData = Object.assign({}, this.serverData, vaules.formValidate)
  119. this.$emit('addServer', this.serverData, this.checked)
  120. this.cancle()
  121. }
  122. })
  123. },
  124. // 取消工单
  125. del (){
  126. this.$emit('delServer', this.serverData, this.index)
  127. this.cancle()
  128. }
  129. },
  130. mounted (){
  131. }
  132. }
  133. </script>
  134. <style lang="less" scoped>
  135. .ant-btn-error{
  136. background: red;
  137. color: #fff;
  138. border: none;
  139. &:hover{
  140. background: firebrick;
  141. }
  142. }
  143. </style>