editModal.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <a-modal
  3. centered
  4. class="dealerAccountEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="账号信息"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <!-- 表单 -->
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="dealerAccountEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="经销商名称" prop="tenantSn">
  23. <custList ref="custList" v-if="itemId==''" id="dealerAccountEdit-tenantSn" @change="custChange"></custList>
  24. <span v-else>{{ detailData ? (detailData.org ? detailData.org.name : '--') : '--' }}</span>
  25. </a-form-model-item>
  26. <a-form-model-item label="管理员姓名" prop="name">
  27. <a-input
  28. id="dealerAccountEdit-name"
  29. :maxLength="30"
  30. v-model.trim="form.name"
  31. placeholder="请输入管理员姓名(最多30个字符)"
  32. allowClear />
  33. </a-form-model-item>
  34. <a-form-model-item label="管理员手机" prop="phone">
  35. <a-input
  36. id="dealerAccountEdit-phone"
  37. :maxLength="11"
  38. v-model.trim="form.phone"
  39. placeholder="请输入管理员手机(最多11个字符)"
  40. allowClear />
  41. </a-form-model-item>
  42. <a-form-model-item label="管理员账号" prop="loginName">
  43. <a-input
  44. id="dealerAccountEdit-loginName"
  45. :maxLength="50"
  46. v-model.trim="form.loginName"
  47. placeholder="请输入管理员账号,字母/数字(最多50个字符)"
  48. allowClear />
  49. </a-form-model-item>
  50. <a-form-model-item label="管理员密码" :prop="itemId=='' ? 'password' : ''" :extra="itemId ? '说明:已录入的密码不会显示,录入新密码将会覆盖原有密码' : ''" >
  51. <a-input
  52. id="dealerAccountEdit-password"
  53. :maxLength="50"
  54. type="password"
  55. v-model.trim="form.password"
  56. placeholder="请输入管理员密码,字母/数字(最多50个字符)"
  57. allowClear />
  58. </a-form-model-item>
  59. <a-form-model-item label="最大可开通用户数" prop="org.childUserMaxNum" extra="(含管理员账号)">
  60. <a-input-number
  61. id="dealerAccountEdit-childUserMaxNum"
  62. v-model="form.org.childUserMaxNum"
  63. :precision="0"
  64. :min="1"
  65. :max="999999"
  66. placeholder="请输入数量"
  67. style="width: 100%;" />
  68. </a-form-model-item>
  69. </a-form-model>
  70. <div class="btn-cont">
  71. <a-button type="primary" id="dealerAccountEdit-save" @click="handleSave">保存</a-button>
  72. <a-button id="dealerAccountEdit-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  73. </div>
  74. </a-spin>
  75. </div>
  76. </a-modal>
  77. </template>
  78. <script>
  79. import custList from '@/views/common/custList.vue'
  80. import { dealerUserSave, dealerUserDetail } from '@/api/dealer'
  81. export default {
  82. name: 'DealerAccountEditModal',
  83. components: { custList },
  84. props: {
  85. openModal: { // 弹框显示状态
  86. type: Boolean,
  87. default: false
  88. },
  89. itemId: {
  90. type: [Number, String],
  91. default: ''
  92. }
  93. },
  94. data () {
  95. return {
  96. isShow: this.openModal, // 是否打开弹框
  97. spinning: false,
  98. formItemLayout: {
  99. labelCol: { span: 6 },
  100. wrapperCol: { span: 18 }
  101. },
  102. form: {
  103. tenantSn: '',
  104. name: '',
  105. phone: '',
  106. loginName: '',
  107. password: '',
  108. org: {
  109. childUserMaxNum: ''
  110. }
  111. },
  112. rules: {
  113. tenantSn: [{ required: true, message: '请选择经销商', trigger: 'change' }],
  114. name: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
  115. phone: [{ required: true, message: '请输入管理员手机', trigger: 'blur' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号' }],
  116. loginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }, { pattern: /^[0-9a-zA-Z]+$/, message: '管理员账号由字母和数字组成' }],
  117. password: [
  118. { required: true, message: '请输入管理员密码', trigger: 'blur' },
  119. { pattern: /^[0-9a-zA-Z]+$/, message: '管理员密码由字母和数字组成' },
  120. { min: 6, message: '管理员密码为6~50位' }
  121. ],
  122. 'org.childUserMaxNum': [{ required: true, message: '请输入最大可开通用户数', trigger: 'blur' }]
  123. },
  124. detailData: null // 详情数据
  125. }
  126. },
  127. methods: {
  128. custChange (val) {
  129. this.form.tenantSn = val.key
  130. },
  131. // 保存
  132. handleSave () {
  133. const _this = this
  134. _this.$refs.ruleForm.validate(valid => {
  135. if (valid) {
  136. const formData = JSON.parse(JSON.stringify(_this.form))
  137. formData.id = _this.itemId ? _this.itemId : undefined
  138. if (!formData.password) {
  139. delete formData.password
  140. }
  141. _this.spinning = true
  142. dealerUserSave(formData).then(res => {
  143. if (res.status == 200) {
  144. _this.$message.success(res.message)
  145. _this.$emit('ok')
  146. _this.isShow = false
  147. _this.spinning = false
  148. } else {
  149. _this.spinning = false
  150. }
  151. })
  152. } else {
  153. return false
  154. }
  155. })
  156. },
  157. // 获取详情
  158. getDetail () {
  159. dealerUserDetail({ id: this.itemId }).then(res => {
  160. if (res.status == 200) {
  161. this.detailData = res.data
  162. this.form.tenantSn = this.detailData.tenantSn || ''
  163. this.form.name = this.detailData.name || ''
  164. this.form.phone = this.detailData.phone || ''
  165. this.form.loginName = this.detailData.loginName || ''
  166. this.form.password = this.detailData.password || ''
  167. const childUserMaxNum = this.detailData ? (this.detailData.org ? (this.detailData.org.childUserMaxNum ? this.detailData.org.childUserMaxNum : '') : '') : ''
  168. this.form.org.childUserMaxNum = childUserMaxNum
  169. } else {
  170. this.detailData = null
  171. this.$refs.ruleForm.resetFields()
  172. }
  173. })
  174. }
  175. },
  176. watch: {
  177. // 父页面传过来的弹框状态
  178. openModal (newValue, oldValue) {
  179. this.isShow = newValue
  180. },
  181. // 重定义的弹框状态
  182. isShow (newValue, oldValue) {
  183. if (!newValue) {
  184. this.$emit('close')
  185. this.$refs.ruleForm.resetFields()
  186. this.form.tenantSn = ''
  187. this.form.name = ''
  188. this.form.phone = ''
  189. this.form.loginName = ''
  190. this.form.password = ''
  191. this.form.org.childUserMaxNum = ''
  192. if (this.itemId == '') {
  193. this.$refs.custList.resetForm()
  194. }
  195. }
  196. },
  197. itemId (newValue, oldValue) {
  198. if (this.isShow && newValue) {
  199. this.getDetail()
  200. }
  201. }
  202. }
  203. }
  204. </script>
  205. <style lang="less">
  206. .dealerAccountEdit-modal{
  207. .ant-modal-body {
  208. padding: 40px 40px 24px;
  209. }
  210. .btn-cont {
  211. text-align: center;
  212. margin: 35px 0 10px;
  213. }
  214. }
  215. </style>