addPerson.vue 6.9 KB

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