userCenteraddUnitPersonnel.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <div style="width: 100%;background: #fff;min-height: 700px;" class="userCenterAuthenticationPersonal">
  3. <div style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
  4. {{$t('common.addPersonnel')}}
  5. <!-- <span style="float: right;margin-top: 27px;"> <i class="el-icon-edit"></i> 修改</span> -->
  6. </div>
  7. <div style="width: 600px;" >
  8. <el-form ref="form" :model="unitPersonnel" label-width="160px" class="demo-ruleForm" :rules="rules" style="margin-left: 100px;margin-top: 20px;width: 700px;">
  9. <el-form-item :label="$t('common.name')" prop='name'>
  10. <el-input v-model="unitPersonnel.name" :disabled="false" style="width: 70%;"></el-input>
  11. </el-form-item>
  12. <el-form-item :label="$t('common.MobilePhone')" prop='preferredMobile'>
  13. <el-input v-model="unitPersonnel.preferredMobile" :disabled="false" style="width: 70%;"></el-input>
  14. </el-form-item>
  15. <el-form-item :label="$t('common.emailInfo')" prop='email'>
  16. <el-input v-model="unitPersonnel.email" :disabled="false" style="width: 70%;"></el-input>
  17. </el-form-item>
  18. </el-form>
  19. </div>
  20. <div style="height: 200px;">
  21. <div style="margin-top: 100px;">
  22. <el-button type="warning" style="margin-left: 300px;" @click="save">{{$t('common.Save')}}</el-button>
  23. <el-button type="primary" style="margin-left: 30px;" @click="close">{{$t('common.cancel')}}</el-button>
  24. </div>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. import Base from "@/views/base/Base";
  30. import { saveOrUpdate,getUnitPersonnelById} from "@/api/userCenter/unitPersonnel";
  31. export default {
  32. name: 'userCenterAuthenticationPersonal',
  33. extends: Base,
  34. data () {
  35. return {
  36. informationsClass:'1',
  37. dialogVisible: false,
  38. ifDiaslog:'',
  39. title:'',
  40. id: this.$route.params.key,
  41. unitPersonnel: {
  42. name: '',
  43. preferredMobile:'',
  44. email:'',
  45. baseEntityId:'',
  46. status:'',
  47. statusDict:'',
  48. },
  49. }
  50. },
  51. watch: {
  52. '$i18n.locale'(){
  53. this.toInitData();
  54. }
  55. },
  56. mounted() {
  57. this.initData();
  58. },
  59. computed: {
  60. rules() {
  61. return {
  62. name: [
  63. {required: true, message: this.$t('common.namePlaceholder'), trigger: 'blur'},
  64. {min: 3, max: 5, trigger: 'blur'}
  65. ],
  66. email: [
  67. {required: false, message: this.$t('common.EnterEmail'), trigger: 'blur'}
  68. ],
  69. preferredMobile: [
  70. {required: false, message: this.$t('common.EnterMobile'), trigger: 'blur'}
  71. ]
  72. }
  73. }
  74. },
  75. methods:{
  76. initData(){
  77. if(this.id){
  78. getUnitPersonnelById(this.id).then((result) => {
  79. var data = result.data;
  80. if (data) {
  81. console.log(data.unitPersonnelInformation);
  82. this.unitPersonnel = data.unitPersonnelInformation;
  83. }
  84. }) .catch(error => {
  85. // 此处你的业务代码
  86. this.$message({
  87. message: error.msg,
  88. type: 'error'
  89. });
  90. this.resetToken();
  91. });
  92. }
  93. },
  94. save: function () {
  95. this.$refs["form"].validate((valid) => {
  96. if (valid) {
  97. this.unitPersonnel.status = "未确认";
  98. this.unitPersonnel.statusDict="0";
  99. var users=localStorage.getItem('user');
  100. var user = JSON.parse(users);
  101. this.unitPersonnel.baseEntityId = user.umsUser.unitEntityId;
  102. this.submitHandler(token => {
  103. saveOrUpdate(
  104. JSON.stringify(this.unitPersonnel),
  105. token
  106. )
  107. .then(result => {
  108. this.$message({
  109. message: this.$t('common.addSuccess'),
  110. type: 'success'
  111. });
  112. this.unitPersonnel = {};
  113. this.$router.go(-1);//返回上一层
  114. })
  115. .catch(error => {
  116. // 此处你的业务代码
  117. this.$message({
  118. message: error.msg,
  119. type: 'error'
  120. });
  121. this.resetToken();
  122. });
  123. });
  124. }
  125. });
  126. },
  127. close(){
  128. this.$router.go(-1);
  129. },
  130. goAithentication(num){
  131. this.$router.go(-1);//返回上一层
  132. },
  133. handleChange (value) {
  134. console.log(value)
  135. },
  136. photoSuccess(res, file) {
  137. this.baseProjectView.reserveTwo = res.data;
  138. },
  139. handleAvatarSuccessAnnex(res, file) {
  140. this.baseProjectView.reserveThree = res.data;
  141. },
  142. dialogVisibles(){
  143. this.dialogVisible=true
  144. },
  145. }
  146. }
  147. </script>
  148. <style scoped>
  149. .el-button {
  150. width: 200px;
  151. height: 45px;
  152. }
  153. .authenticationBox1 {
  154. margin-left: 35px;
  155. margin-right: 150px;
  156. height: 100px;
  157. border: 1px solid rgba(153, 153, 153, 1);
  158. border-radius: 10px;
  159. margin-top: 50px;
  160. position: relative;
  161. }
  162. .authenticationBox2 {
  163. margin: 50px 150px 0 35px;
  164. height: 100px;
  165. border: 1px solid rgba(153, 153, 153, 1);
  166. border-radius: 10px;
  167. position: relative;
  168. }
  169. .authenticationBox1:hover,
  170. .authenticationBox2:hover {
  171. border: 1px solid #ff8400;
  172. }
  173. .avatar-uploader .el-upload {
  174. border: 1px dashed #d9d9d9;
  175. border-radius: 6px;
  176. cursor: pointer;
  177. position: relative;
  178. overflow: hidden;
  179. }
  180. .avatar-uploader .el-upload:hover {
  181. border-color: #409EFF;
  182. }
  183. .userCenterAuthenticationPersonal>>>.el-upload {
  184. border: 1px solid rgba(204, 204, 204, 1);
  185. }
  186. .avatar-uploader-icon {
  187. font-size: 28px;
  188. color: #8c939d;
  189. width: 178px;
  190. height: 178px;
  191. line-height: 178px;
  192. text-align: center;
  193. }
  194. .avatar {
  195. width: 178px;
  196. height: 178px;
  197. display: block;
  198. }
  199. </style>