editModal.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  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="password" :extra="itemId ? '说明:已录入的密码不会显示,录入新密码将会覆盖原有密码' : ''" >
  51. <a-input
  52. id="dealerAccountEdit-password"
  53. :maxLength="50"
  54. :minLength="6"
  55. type="password"
  56. v-model.trim="form.password"
  57. placeholder="请输入管理员密码,字母/数字(最少6个字符,最多50个字符)"
  58. allowClear />
  59. </a-form-model-item>
  60. <a-form-model-item label="最大可开通用户数" prop="org.childUserMaxNum" extra="(含管理员账号)">
  61. <a-input-number
  62. id="dealerAccountEdit-childUserMaxNum"
  63. v-model="form.org.childUserMaxNum"
  64. :precision="0"
  65. :min="1"
  66. :max="999999"
  67. placeholder="请输入数量"
  68. style="width: 100%;" />
  69. </a-form-model-item>
  70. </a-form-model>
  71. <div class="btn-cont">
  72. <a-button type="primary" id="dealerAccountEdit-save" @click="handleSave">保存</a-button>
  73. <a-button id="dealerAccountEdit-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  74. </div>
  75. </a-spin>
  76. </div>
  77. </a-modal>
  78. </template>
  79. <script>
  80. import { commonMixin } from '@/utils/mixin'
  81. import custList from '@/views/common/custList.vue'
  82. import { dealerUserSave, dealerUserDetail } from '@/api/dealer'
  83. export default {
  84. name: 'DealerAccountEditModal',
  85. mixins: [commonMixin],
  86. components: { custList },
  87. props: {
  88. openModal: { // 弹框显示状态
  89. type: Boolean,
  90. default: false
  91. },
  92. itemId: {
  93. type: [Number, String],
  94. default: ''
  95. }
  96. },
  97. data () {
  98. return {
  99. isShow: this.openModal, // 是否打开弹框
  100. spinning: false,
  101. formItemLayout: {
  102. labelCol: { span: 6 },
  103. wrapperCol: { span: 18 }
  104. },
  105. form: {
  106. tenantSn: '',
  107. name: '',
  108. phone: '',
  109. loginName: '',
  110. password: '',
  111. org: {
  112. childUserMaxNum: ''
  113. }
  114. },
  115. rules: {
  116. tenantSn: [{ required: true, message: '请选择经销商', trigger: 'change' }],
  117. name: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
  118. phone: [{ required: true, message: '请输入管理员手机', trigger: 'blur' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号' }],
  119. loginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }, { pattern: /^[0-9a-zA-Z]+$/, message: '管理员账号由字母和数字组成' }],
  120. password: [
  121. // { validator: this.passwordValid }
  122. // // { required: true, message: '请输入管理员密码', trigger: 'blur' },
  123. // // { pattern: /^[0-9a-zA-Z]+$/, message: '管理员密码由字母和数字组成' },
  124. // // { min: 6, message: '管理员密码为6~50位' }
  125. ],
  126. 'org.childUserMaxNum': [{ required: true, message: '请输入最大可开通用户数', trigger: 'blur' }]
  127. },
  128. detailData: null // 详情数据
  129. }
  130. },
  131. methods: {
  132. // 密码位数校验
  133. passwordValid (rule, value, callback) {
  134. if ((this.itemId && value) || (!this.itemId && value)) {
  135. var reg = /^[0-9a-zA-Z]+$/
  136. if ((reg.test(value)) && !(value.length < 6 || value.length > 50)) {
  137. callback()
  138. }
  139. if (!reg.test(value)) {
  140. callback('管理员密码由字母和数字组成')
  141. }
  142. if (value.length < 6 || value.length > 50) {
  143. callback('管理员密码为6~50位')
  144. }
  145. } else {
  146. if (!this.itemId && !value) {
  147. callback('请输入管理员密码')
  148. } else {
  149. callback()
  150. }
  151. }
  152. },
  153. custChange (val) {
  154. this.form.tenantSn = val.key
  155. },
  156. // 保存
  157. handleSave () {
  158. const _this = this
  159. _this.$refs.ruleForm.validate(valid => {
  160. if (valid) {
  161. const formData = JSON.parse(JSON.stringify(_this.form))
  162. formData.id = _this.itemId ? _this.itemId : undefined
  163. if (!formData.password) {
  164. delete formData.password
  165. }
  166. _this.spinning = true
  167. dealerUserSave(formData).then(res => {
  168. if (res.status == 200) {
  169. _this.$message.success(res.message)
  170. _this.$emit('ok')
  171. _this.isShow = false
  172. _this.spinning = false
  173. } else {
  174. _this.spinning = false
  175. }
  176. })
  177. } else {
  178. return false
  179. }
  180. })
  181. },
  182. // 获取详情
  183. getDetail () {
  184. dealerUserDetail({ id: this.itemId }).then(res => {
  185. if (res.status == 200) {
  186. this.detailData = res.data
  187. this.form.tenantSn = this.detailData.tenantSn || ''
  188. this.form.name = this.detailData.name || ''
  189. this.form.phone = this.detailData.phone || ''
  190. this.form.loginName = this.detailData.loginName || ''
  191. this.form.password = this.detailData.password || ''
  192. const childUserMaxNum = this.detailData ? (this.detailData.org ? (this.detailData.org.childUserMaxNum ? this.detailData.org.childUserMaxNum : '') : '') : ''
  193. this.form.org.childUserMaxNum = childUserMaxNum
  194. } else {
  195. this.detailData = null
  196. this.$refs.ruleForm.resetFields()
  197. }
  198. })
  199. }
  200. },
  201. watch: {
  202. // 父页面传过来的弹框状态
  203. openModal (newValue, oldValue) {
  204. if (this.itemId) {
  205. this.rules.password = [
  206. { required: false },
  207. { validator: this.passwordValid }
  208. ]
  209. } else {
  210. this.rules.password = [
  211. { required: true, message: '请输入管理员密码', trigger: 'blur' },
  212. { validator: this.passwordValid }
  213. ]
  214. }
  215. this.isShow = newValue
  216. },
  217. // 重定义的弹框状态
  218. isShow (newValue, oldValue) {
  219. if (!newValue) {
  220. this.$emit('close')
  221. this.$refs.ruleForm.resetFields()
  222. this.form.tenantSn = ''
  223. this.form.name = ''
  224. this.form.phone = ''
  225. this.form.loginName = ''
  226. this.form.password = ''
  227. this.form.org.childUserMaxNum = ''
  228. if (this.itemId == '') {
  229. this.$refs.custList.resetForm()
  230. }
  231. }
  232. },
  233. itemId (newValue, oldValue) {
  234. if (this.isShow && newValue) {
  235. this.getDetail()
  236. }
  237. }
  238. }
  239. }
  240. </script>
  241. <style lang="less">
  242. .dealerAccountEdit-modal{
  243. .ant-modal-body {
  244. padding: 40px 40px 24px;
  245. }
  246. .btn-cont {
  247. text-align: center;
  248. margin: 35px 0 10px;
  249. }
  250. }
  251. </style>