addPerson.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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. <evanFormItem label="岗位" prop="roleNames">
  25. <u-input type="select" style="width:100%" input-align="right" placeholder="请选择岗位" @click="showRoles=true" v-model="formData.roleNames"/>
  26. <u-popup v-model="showRoles" mode="bottom">
  27. <view style="padding: 1rem;width: 100%;">
  28. <view style="position: relative;padding: 0.5rem;width: 100%;text-align: center;">
  29. <text style="color:#066cff;position: absolute;left:0;top:0;">新增岗位</text>
  30. 选择岗位
  31. </view>
  32. <view v-if="roleList.length">
  33. <u-radio-group v-model="formData.roleIds" @change="radioGroupChange">
  34. <u-radio
  35. v-for="(item, index) in roleList" :key="item.id"
  36. :name="item.name"
  37. :disabled="!item.isEnable"
  38. >
  39. {{item.name}}
  40. </u-radio>
  41. </u-radio-group>
  42. </view>
  43. <view style="color: #999;text-align: center;" v-else>
  44. 暂无岗位信息,请点击“新增岗位”
  45. </view>
  46. </view>
  47. </u-popup>
  48. </evanFormItem>
  49. </evanForm>
  50. </view>
  51. <view class="form-footer-btn flex align_center justify_between">
  52. <u-button shape="circle" @click="delPerson()" :custom-style="{width:'300rpx' }">删除</u-button>
  53. <u-button shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'300rpx' }" @click="save('formData')">保存</u-button>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. import {saveEmployee, delEmployee } from '@/api/employee'
  59. import { getRoleList } from '@/api/powerRole-md.js'
  60. import evanForm from '@/components/evan-form/evan-form.vue'
  61. import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
  62. export default{
  63. components:{
  64. evanForm,
  65. evanFormItem,
  66. },
  67. data(){
  68. return{
  69. showRoles: false,
  70. roleList: [], // 角色 数据列表
  71. roleArr: [], // 当前所选角色
  72. formData:{
  73. name: '',
  74. sex: '1',
  75. mobile: ''
  76. },
  77. ruleValidate: {
  78. name: [{ required: true, message: '请输入员工姓名'}],
  79. mobile: [{required: true, min:11, message: '请输入正确手机号码'}],
  80. sex: [{ required: true, message: '请选择性别' }],
  81. roleNames: [{ required: true, message: '请选择岗位' }]
  82. },
  83. sexList: [
  84. {
  85. value: 1,
  86. name: '男',
  87. disabled: false,
  88. },
  89. {
  90. value: 0,
  91. name: '女',
  92. disabled: false
  93. }
  94. ],
  95. isManager: '',
  96. isEdit: false
  97. }
  98. },
  99. onLoad() {
  100. this.init()
  101. this.getRole()
  102. },
  103. methods:{
  104. // 初始化数据
  105. init(){
  106. let data = this.$store.state.vuex_nowStaffData
  107. console.log(data)
  108. // 编辑信息
  109. if(!!data){
  110. this.isEdit = true
  111. this.formData = Object.assign({},this.formData,data)
  112. }else{
  113. this.isEdit = false
  114. }
  115. uni.setNavigationBarTitle({
  116. title: !!data ? "编辑员工" : '新增员工'
  117. })
  118. },
  119. // 获取角色
  120. getRole(){
  121. getRoleList().then(res => {
  122. this.roleList = res.data || []
  123. })
  124. },
  125. radioGroupChange(e) {
  126. console.log(e);
  127. },
  128. // 保存
  129. save(name){
  130. let data=this.formData
  131. console.log(data)
  132. this.$refs[name].validate((valid) => {
  133. if (valid) {
  134. saveEmployee(data).then(res=>{
  135. console.log(res)
  136. if(res.status == 200){
  137. uni.showToast({icon: 'none', title:'保存成功'})
  138. this.cancel()
  139. }else{
  140. uni.showToast({icon: 'none', title: res.message})
  141. }
  142. }).catch(err=>{
  143. console.log('保存失败')
  144. })
  145. }
  146. })
  147. },
  148. // 删除员工
  149. delPerson(){
  150. let _this = this
  151. const item = this.formData
  152. uni.showModal({
  153. title: '提示',
  154. content: '数据删除后无法恢复, 确认删除吗?',
  155. success: (ret) => {
  156. if(ret.confirm||ret.index==0){
  157. // 删除数据
  158. delEmployee({id: item.id}).then(res=>{
  159. if(res.status == 200){
  160. this.cancel()
  161. }
  162. uni.showToast({icon: 'none', title: res.message})
  163. })
  164. }
  165. }
  166. })
  167. },
  168. cancel(){
  169. setTimeout(function(){
  170. uni.navigateBack()
  171. },100)
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="less">
  177. .evan-form-show {
  178. padding: 0;
  179. background-color: #fff;
  180. height: 100vh;
  181. > view{
  182. padding:0.8rem;
  183. }
  184. .form-footer-btn{
  185. padding: 0.8rem 1.5rem;
  186. }
  187. .form-input {
  188. font-size: 28rpx;
  189. color: #333;
  190. text-align: right;
  191. width: 95%;
  192. box-sizing: border-box;
  193. height: 60rpx;
  194. &.textarea{
  195. height: 240rpx;
  196. padding: 24rpx 0;
  197. text-align: left;
  198. }
  199. }
  200. .form-input-placeholder {
  201. font-size: 28rpx;
  202. color: #999;
  203. }
  204. }
  205. </style>