addZoneModal.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <a-modal
  3. centered
  4. class="marketingDivisionSetEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="500">
  11. <!-- 表单 -->
  12. <a-form-model
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="zoneRules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol"
  18. >
  19. <a-form-model-item label="所属区域">
  20. {{ parentData&&parentData.subareaName }}
  21. </a-form-model-item>
  22. <a-form-model-item label="分区名称" prop="subareaAreaName">
  23. <a-input
  24. :maxLength="30"
  25. v-model.trim="form.subareaAreaName"
  26. @change="filterEmpty"
  27. placeholder="请输入分区名称(最多30个字符)"
  28. allowClear />
  29. </a-form-model-item>
  30. </a-form-model>
  31. <div class="btn-cont">
  32. <a-button id="marketingDivisionSetEdit-modal-back" @click="isShow = false" >取消</a-button>
  33. <a-button type="primary" style="margin-left: 15px;" id="marketingDivisionSetEdit-modal-save" @click="handleSave">保存</a-button>
  34. </div>
  35. </a-modal>
  36. </template>
  37. <script>
  38. import { subareaSaveSubareaArea, subareaQuerySubareaArea } from '@/api/subarea'
  39. export default {
  40. name: 'MarketingDivisionSetEditModal',
  41. components: { },
  42. props: {
  43. openModal: { // 弹框显示状态
  44. type: Boolean,
  45. default: false
  46. },
  47. parentData: {
  48. type: Object,
  49. default: function(){
  50. return null
  51. }
  52. }
  53. },
  54. computed: {
  55. modalTit () {
  56. return (this.parentData&&this.parentData.subareaAreaSn ? '编辑' : '新增') + '分区'
  57. }
  58. },
  59. data () {
  60. return {
  61. isShow: this.openModal, // 是否打开弹框
  62. spinning: false,
  63. formItemLayout: {
  64. labelCol: { span: 4 },
  65. wrapperCol: { span: 18 }
  66. },
  67. form: {
  68. subareaAreaName: '' // 分区名称
  69. },
  70. zoneRules: {
  71. subareaAreaName: [
  72. { required: true, message: '请输入分区名称', trigger: 'blur' }
  73. ]
  74. }
  75. }
  76. },
  77. methods: {
  78. filterEmpty () {
  79. let str = this.form.subareaAreaName
  80. str = str.replace(/\ +/g, '')
  81. str = str.replace(/[ ]/g, '')
  82. str = str.replace(/[\r\n]/g, '')
  83. this.form.subareaAreaName = str
  84. },
  85. // 保存
  86. handleSave () {
  87. const _this = this
  88. _this.$refs.ruleForm.validate(valid => {
  89. if (valid) {
  90. const formData = JSON.parse(JSON.stringify(_this.form))
  91. // 编辑
  92. if (this.parentData.subareaAreaSn) {
  93. formData.subareaAreaSn = this.parentData.subareaAreaSn
  94. }
  95. formData.subareaSn = this.parentData.subareaSn
  96. // console.log(formData, 'formData')
  97. _this.spinning = true
  98. subareaSaveSubareaArea(formData).then(res => {
  99. if (res.status == 200) {
  100. _this.$message.success(res.message)
  101. _this.$emit('ok')
  102. _this.isShow = false
  103. _this.spinning = false
  104. } else {
  105. _this.spinning = false
  106. }
  107. })
  108. } else {
  109. return false
  110. }
  111. })
  112. }
  113. },
  114. watch: {
  115. // 父页面传过来的弹框状态
  116. openModal (newValue, oldValue) {
  117. this.isShow = newValue
  118. },
  119. // 重定义的弹框状态
  120. isShow (newValue, oldValue) {
  121. if (!newValue) {
  122. this.$emit('close')
  123. this.$refs.ruleForm.resetFields()
  124. this.form.subareaAreaName = ''
  125. }else{
  126. if (this.parentData.subareaAreaSn) {
  127. this.form.subareaAreaName = this.parentData.subareaAreaName
  128. }
  129. }
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="less">
  135. .marketingDivisionSetEdit-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. .tree-node{
  144. height: 300px;
  145. overflow: auto;
  146. .tree-box{
  147. .tree-parent{
  148. display: flex;
  149. align-items: center;
  150. border-bottom: 1px solid #eee;
  151. padding: 0 10px;
  152. > span{
  153. margin:0 5px;
  154. &:first-child{
  155. flex-grow: 1;
  156. }
  157. &:last-child{
  158. cursor: pointer;
  159. }
  160. }
  161. }
  162. .tree-child{
  163. padding: 10px 10px 10px 35px;
  164. display: flex;
  165. align-items: center;
  166. flex-wrap:wrap ;
  167. > div{
  168. margin:0 5px;
  169. }
  170. }
  171. }
  172. }
  173. }
  174. </style>