addUser.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <div>
  3. <el-dialog v-dialog-drag class="dialog" :title="popTitle" :visible.sync="dialogVisible" width="32%"
  4. append-to-body center>
  5. <el-divider></el-divider>
  6. <div style="height: 550px; padding: 20px">
  7. <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="75px">
  8. <el-form-item style="margin-bottom: 0;" label="用户名:" prop="username">
  9. <div>
  10. <el-input class="username" type="text" v-model="form.username" placeholder="用户名"></el-input>
  11. <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最大长度64个字符,允许英文字母、数字或特殊字符</p>
  12. </div>
  13. </el-form-item>
  14. <el-form-item style="margin-bottom: 0; width: 380px; " label-width="65px" label="密码:" prop="password">
  15. <div>
  16. <el-input class="password" v-model="form.password" placeholder="密码" show-password></el-input>
  17. <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最小长度8个字符,需带有英文字母、数字与特殊字符</p>
  18. </div>
  19. </el-form-item>
  20. <el-form-item label="姓名:" prop="name">
  21. <el-input class="name" v-model="form.name" placeholder="姓名"></el-input>
  22. </el-form-item>
  23. <el-form-item label="电话:" prop="phone">
  24. <div style="display: flex;">
  25. <el-select class="select" v-model="select">
  26. <el-option value="CN+86"></el-option>
  27. </el-select>
  28. <el-input class="phone" v-model="form.phone" placeholder="请输入手机号">
  29. </el-input>
  30. </div>
  31. </el-form-item>
  32. <el-form-item label="邮箱:" prop="email">
  33. <el-input v-model="form.email" placeholder="请输入"></el-input>
  34. </el-form-item>
  35. <el-form-item label="公司:" prop="corporation">
  36. <el-input v-model="form.corporation" placeholder="公司"></el-input>
  37. </el-form-item>
  38. <el-form-item label="部门:" prop="department">
  39. <el-input v-model="form.department" placeholder="部门"></el-input>
  40. </el-form-item>
  41. <div style="display: flex;">
  42. <el-form-item label="角色:" prop="role">
  43. <el-select v-model="form.role">
  44. <el-option value="用户组"></el-option>
  45. </el-select>
  46. </el-form-item>
  47. <el-form-item label="权限:" prop="permission">
  48. <el-select v-model="form.permission">
  49. <el-option value="权限级别"></el-option>
  50. </el-select>
  51. </el-form-item>
  52. </div>
  53. <div style="display: flex;">
  54. <el-form-item label="在职状态:" prop="working_status">
  55. <el-select v-model="form.working_status">
  56. <el-option value="在职"></el-option>
  57. </el-select>
  58. </el-form-item>
  59. <el-form-item label="职务:" prop="post">
  60. <el-select v-model="form.post">
  61. <el-option value="职务"></el-option>
  62. </el-select>
  63. </el-form-item>
  64. </div>
  65. <div style="display: flex;">
  66. <el-form-item label="账户状态:" prop="account_status">
  67. <el-select v-model="form.account_status">
  68. <el-option value="正常"></el-option>
  69. </el-select>
  70. </el-form-item>
  71. <el-form-item label="国籍:" prop="nationality">
  72. <el-select v-model="form.nationality">
  73. <el-option value="中国"></el-option>
  74. </el-select>
  75. </el-form-item>
  76. </div>
  77. <div class="avatar">
  78. <el-avatar :size="110" :src="form.photograph" @click=""></el-avatar>
  79. <span>
  80. <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
  81. </span>
  82. </div>
  83. </el-form>
  84. </div>
  85. <div slot="footer" class="dialog-footer">
  86. <el-button class="reset" @click="resetForm('form')">重置</el-button>
  87. <el-button class="update" @click="submitForm('form')">确认</el-button>
  88. </div>
  89. </el-dialog>
  90. </div>
  91. </template>
  92. <script>
  93. export default {
  94. props:{
  95. popTitle:String,
  96. default:''
  97. },
  98. data() {
  99. return {
  100. dialogVisible: false,
  101. select: '',
  102. form: {
  103. username: '',
  104. password: '',
  105. name: '',
  106. phone: '',
  107. email: '',
  108. corporation: '',
  109. department: '',
  110. role: '',
  111. permission: '',
  112. working_status: '',
  113. post: '',
  114. account_status: '',
  115. nationality: '',
  116. photograph: require('@/assets/images/头像上传@3x.png')
  117. },
  118. rules: {
  119. username: [{ required: true, trigger: 'blur' }],
  120. password: [{ required: true, trigger: 'blur' }]
  121. }
  122. }
  123. },
  124. watch: {
  125. },
  126. methods: {
  127. handleNodeClick() {
  128. },
  129. resetForm() {
  130. this.$refs.form.resetFields();
  131. },
  132. submitForm() {
  133. this.$refs.form.validate((valid) => {
  134. if (valid) {
  135. this.$emit('confirmEvent', this.form);
  136. } else {
  137. return false;
  138. }
  139. })
  140. },
  141. currentTime() {
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="less" scoped>
  147. /deep/.el-dialog {
  148. height: 750px !important;
  149. }
  150. .next {
  151. background-color: #2EA8E6;
  152. color: #FFFFFF;
  153. }
  154. .reset {
  155. background-color: #B3B3B3;
  156. color: #FFFFFF;
  157. }
  158. .update {
  159. background-color: #2EA8E6;
  160. color: #FFFFFF;
  161. }
  162. .avatar {
  163. position: absolute;
  164. right: 40px;
  165. top: 100px;
  166. }
  167. .select {
  168. /deep/.el-input__inner {
  169. width: 100px;
  170. border-right: 0;
  171. border-top-right-radius: 0;
  172. border-bottom-right-radius: 0;
  173. }
  174. }
  175. .phone {
  176. /deep/.el-input__inner {
  177. border-left: 0;
  178. border-top-left-radius: 0;
  179. border-bottom-left-radius: 0;
  180. }
  181. }
  182. .username {
  183. /deep/.el-input__inner {
  184. width: 300px !important;
  185. }
  186. }
  187. .password {
  188. margin-left: 10px;
  189. /deep/.el-input__inner {
  190. width: 300px !important;
  191. }
  192. /deep/.el-input__suffix-inner {
  193. position: absolute;
  194. right: 15px !important;
  195. }
  196. }
  197. .name {
  198. /deep/.el-input__inner {
  199. width: 300px !important;
  200. }
  201. }
  202. .el-form {
  203. .el-form-item {
  204. margin-bottom: 15px;
  205. /deep/.el-form-item__label {
  206. padding: 0;
  207. font-size: 15px;
  208. }
  209. /deep/.el-input__inner {
  210. height: 30px;
  211. background-color: #F7F9FA;
  212. }
  213. }
  214. }
  215. /deep/.el-dialog {
  216. height: 30vh;
  217. }
  218. /deep/.el-dialog__title {
  219. margin-right: 450px;
  220. }
  221. /deep/.el-dialog__headerbtn {
  222. font-size: 25px;
  223. }
  224. /deep/.el-dialog__body {
  225. padding: 0;
  226. }
  227. /deep/.el-divider--horizontal {
  228. display: block;
  229. height: 1px;
  230. width: 95%;
  231. margin: 0;
  232. margin-left: 2.5%;
  233. }
  234. /deep/.el-dialog__footer {
  235. margin-top: 0px;
  236. }
  237. .el-button {
  238. width: 100px;
  239. height: 30px;
  240. text-align: center;
  241. margin: 30px;
  242. padding: 5px;
  243. }
  244. </style>