editModal.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <a-modal
  3. centered
  4. class="productCategoryEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <!-- 表单 -->
  12. <div>
  13. <a-form-model
  14. id="productCategoryEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-form-model-item label="所属分类" v-if="parentType">
  22. {{ parentType }}
  23. </a-form-model-item>
  24. <a-form-model-item label="产品分类名称" prop="productTypeName">
  25. <a-input v-model.trim="form.productTypeName" id="productCategoryEdit-name" :maxLength="30" allowClear placeholder="请输入产品分类名称(最多30个字符)" />
  26. </a-form-model-item>
  27. </a-form-model>
  28. <div class="btn-cont">
  29. <a-button type="primary" id="product-category-edit-modal-save" @click="handleSave">保存</a-button>
  30. <a-button id="product-category-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
  31. </div>
  32. </div>
  33. </a-modal>
  34. </template>
  35. <script>
  36. import { STable } from '@/components'
  37. import { dealerProductTypeSave } from '@/api/dealerProductType'
  38. export default {
  39. name: 'ProductCategoryEditModal',
  40. components: { STable },
  41. props: {
  42. openModal: { // 弹框显示状态
  43. type: Boolean,
  44. default: false
  45. },
  46. itemId: {
  47. type: [Number, String],
  48. default: ''
  49. },
  50. nowData: {
  51. type: Object,
  52. default: null
  53. }
  54. },
  55. computed: {
  56. modalTit () {
  57. return (this.itemId ? '编辑' : '新增') + '产品分类'
  58. }
  59. },
  60. data () {
  61. return {
  62. isShow: this.openModal, // 是否打开弹框
  63. formItemLayout: {
  64. labelCol: { span: 6 },
  65. wrapperCol: { span: 16 }
  66. },
  67. form: {
  68. productTypeName: '' // 产品分类名称
  69. },
  70. rules: {
  71. productTypeName: [
  72. { required: true, message: '请输入产品分类名称', trigger: 'blur' }
  73. ]
  74. },
  75. parentType: '' // 父级分类
  76. }
  77. },
  78. methods: {
  79. // 保存
  80. handleSave () {
  81. const _this = this
  82. _this.$refs.ruleForm.validate(valid => {
  83. if (valid) {
  84. const formData = JSON.parse(JSON.stringify(_this.form))
  85. formData.id = _this.itemId ? _this.itemId : undefined
  86. formData.psn = _this.nowData && _this.nowData.psn ? _this.nowData.psn : undefined
  87. dealerProductTypeSave(formData).then(res => {
  88. if (res.status == 200) {
  89. _this.$message.success(res.message)
  90. _this.$emit('ok')
  91. _this.isShow = false
  92. }
  93. })
  94. } else {
  95. return false
  96. }
  97. })
  98. }
  99. },
  100. watch: {
  101. // 父页面传过来的弹框状态
  102. openModal (newValue, oldValue) {
  103. this.isShow = newValue
  104. },
  105. // 重定义的弹框状态
  106. isShow (newValue, oldValue) {
  107. if (!newValue) {
  108. this.$emit('close')
  109. } else {
  110. // 获取父级分类 名称
  111. if (this.nowData && this.nowData.namePaths) {
  112. let namePathsArr = []
  113. namePathsArr = this.nowData.namePaths.split(',')
  114. this.parentType = ''
  115. namePathsArr.map((item, index) => {
  116. this.parentType += item + ' > '
  117. })
  118. this.parentType = this.parentType ? this.parentType.substr(0, this.parentType.length - 3) : ''
  119. } else {
  120. this.parentType = ''
  121. }
  122. }
  123. },
  124. itemId (newValue, oldValue) {
  125. if (this.isShow && newValue) {
  126. this.form.productTypeName = this.nowData && this.nowData.productTypeName ? this.nowData.productTypeName : ''
  127. } else {
  128. this.form.productTypeName = ''
  129. }
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="less">
  135. .productCategoryEdit-modal{
  136. .ant-modal-body {
  137. padding: 40px 40px 24px;
  138. }
  139. .btn-cont {
  140. text-align: center;
  141. margin: 35px 0 10px;
  142. }
  143. }
  144. </style>