editModal.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <a-modal
  3. centered
  4. class="productBrandEdit-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="productBrandEdit-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="产品品牌名称" prop="name">
  22. <a-input
  23. id="productBrandEdit-name"
  24. :maxLength="30"
  25. v-model="form.name"
  26. placeholder="请输入产品品牌名称(最多30个字符)"
  27. allowClear />
  28. </a-form-model-item>
  29. </a-form-model>
  30. <div class="btn-cont">
  31. <a-button type="primary" id="product-brand-edit-modal-save" @click="handleSave">保存</a-button>
  32. <a-button id="product-brand-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
  33. </div>
  34. </div>
  35. </a-modal>
  36. </template>
  37. <script>
  38. import { STable } from '@/components'
  39. export default {
  40. name: 'productBrandEditModal',
  41. components: { STable },
  42. props: {
  43. openModal: { // 弹框显示状态
  44. type: Boolean,
  45. default: false
  46. },
  47. itemId: {
  48. type: [Number, String],
  49. default: ''
  50. }
  51. },
  52. computed: {
  53. modalTit () {
  54. return (this.itemId ? '编辑' : '新增') + '产品品牌'
  55. }
  56. },
  57. data () {
  58. return {
  59. isShow: this.openModal, // 是否打开弹框
  60. detailsData: null, // 品牌数据
  61. formItemLayout: {
  62. labelCol: { span: 6 },
  63. wrapperCol: { span: 16 }
  64. },
  65. form: {
  66. name: '', // 产品品牌名称
  67. },
  68. rules: {
  69. name: [
  70. { required: true, message: '请输入产品品牌名称', trigger: 'blur' }
  71. ],
  72. }
  73. }
  74. },
  75. methods: {
  76. // 获取详情
  77. getDetail(){
  78. },
  79. // 保存
  80. handleSave(){
  81. },
  82. },
  83. watch: {
  84. // 父页面传过来的弹框状态
  85. openModal (newValue, oldValue) {
  86. this.isShow = newValue
  87. },
  88. // 重定义的弹框状态
  89. isShow (newValue, oldValue) {
  90. if (!newValue) {
  91. this.$emit('close')
  92. }
  93. },
  94. itemId (newValue, oldValue) {
  95. if (this.isShow && newValue) {
  96. this.getDetail()
  97. }
  98. }
  99. }
  100. }
  101. </script>
  102. <style lang="less">
  103. .productBrandEdit-modal{
  104. .ant-modal-body {
  105. padding: 40px 40px 24px;
  106. }
  107. .btn-cont {
  108. text-align: center;
  109. margin: 35px 0 10px;
  110. }
  111. }
  112. </style>