addZoneModal.vue 4.6 KB

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