addPerson.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <view class="evan-form-show flex flex_column">
  3. <view class="flex_1">
  4. <evanForm ref="formData" :rules="ruleValidate" :model="formData">
  5. <evanFormItem label="员工姓名" prop="name">
  6. <input class="form-input" placeholder-class="form-input-placeholder" :maxlength="30" placeholder="请输入姓名(最多30个字符)" v-model="formData.name" />
  7. </evanFormItem>
  8. <evanFormItem label="手机号码" prop="mobile">
  9. <input type="number" :disabled="formData.isManager==1 && formData.id?true:false" class="form-input" placeholder="请输入您的手机号码" placeholder-class="form-input-placeholder" v-model="formData.mobile" :maxlength="11"/>
  10. </evanFormItem>
  11. <evanFormItem label="性别" prop="sex">
  12. <view style="width: 100%;display:flex;justify-content: flex-end;">
  13. <u-radio-group v-model="formData.sex">
  14. <u-radio
  15. v-for="(item, index) in sexList" :key="index"
  16. :name="item.value"
  17. shape="circle"
  18. >
  19. {{item.name}}
  20. </u-radio>
  21. </u-radio-group>
  22. </view>
  23. </evanFormItem>
  24. </evanForm>
  25. </view>
  26. <view class="form-footer-btn flex align_center justify_between">
  27. <u-button shape="circle" @click="cancel()" :custom-style="{width:'300rpx' }">取消</u-button>
  28. <u-button shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'300rpx' }" @click="save('formData')">保存</u-button>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import {saveEmployee } from '@/api/employee'
  34. import evanForm from '@/components/evan-form/evan-form.vue'
  35. import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
  36. export default{
  37. components:{
  38. evanForm,
  39. evanFormItem
  40. },
  41. data(){
  42. return{
  43. roleList: [], // 角色 数据列表
  44. roleArr: [], // 当前所选角色
  45. formData:{
  46. name: '',
  47. sex: '1',
  48. mobile: ''
  49. },
  50. ruleValidate: {
  51. name: [{ required: true, message: '请输入员工姓名'}],
  52. mobile: [{required: true, pattern:/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/, min:11, message: '请输入正确手机号码'}],
  53. sex: [{ required: true, message: '请选择性别' }],
  54. },
  55. sexList: [
  56. {
  57. value: 1,
  58. name: '男',
  59. disabled: false,
  60. },
  61. {
  62. value: 0,
  63. name: '女',
  64. disabled: false
  65. }
  66. ],
  67. isManager: '',
  68. isEdit: false
  69. }
  70. },
  71. onLoad() {
  72. this.init()
  73. },
  74. methods:{
  75. // 初始化数据
  76. init(){
  77. let data = this.$store.state.vuex_nowStaffData
  78. // 编辑信息
  79. if(data){
  80. this.isEdit = true
  81. this.formData = Object.assign({},this.formData,data)
  82. console.log(this.formData)
  83. }else{
  84. this.isEdit = false
  85. }
  86. uni.setNavigationBarTitle({
  87. title:data ? "编辑员工" : '新增员工'
  88. })
  89. },
  90. // 保存
  91. save(name){
  92. let data=this.formData
  93. console.log(data)
  94. this.$refs[name].validate((valid) => {
  95. if (valid) {
  96. saveEmployee(data).then(res=>{
  97. console.log(res)
  98. if(res.status == 200){
  99. uni.showToast({icon: 'none', title:'保存成功'})
  100. this.cancel()
  101. }else{
  102. uni.showToast({icon: 'none', title: res.message})
  103. }
  104. }).catch(err=>{
  105. console.log('保存失败')
  106. })
  107. }
  108. })
  109. },
  110. cancel(){
  111. setTimeout(function(){
  112. uni.navigateBack()
  113. },100)
  114. }
  115. }
  116. }
  117. </script>
  118. <style lang="less">
  119. .evan-form-show {
  120. padding: 0;
  121. background-color: #fff;
  122. height: 100vh;
  123. > view{
  124. padding:0.8rem;
  125. }
  126. .form-footer-btn{
  127. padding:0.8rem;
  128. }
  129. .form-input {
  130. font-size: 28rpx;
  131. color: #333;
  132. text-align: right;
  133. width: 95%;
  134. box-sizing: border-box;
  135. height: 60rpx;
  136. &.textarea{
  137. height: 240rpx;
  138. padding: 24rpx 0;
  139. text-align: left;
  140. }
  141. }
  142. .form-input-placeholder {
  143. font-size: 28rpx;
  144. color: #999;
  145. }
  146. }
  147. </style>