addZoneModal.vue 5.1 KB

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