editModal.vue 8.7 KB

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