staffAdd.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. <template>
  2. <view class="container">
  3. <form @submit="onSubmit">
  4. <view class="page-block">
  5. <view class="content">
  6. <view class="cell flex flex-y-center" v-if="type==1">
  7. <view class="title-block required">
  8. <text>所属门店</text>
  9. </view>
  10. <view class="desc">
  11. <picker mode="selector" :range="tableTypeList" range-key="title"
  12. @change="onTableTypeChange">
  13. <view class="box-pack-between">
  14. <text>{{tableTypeActive}}</text>
  15. <text class="iconfont icongengduo"></text>
  16. </view>
  17. </picker>
  18. </view>
  19. </view>
  20. <view class="cell flex flex-y-center">
  21. <view class="title-block">
  22. <text>员工昵称</text>
  23. </view>
  24. <view class="desc">
  25. <input type="text" :value="info.nickname" name="nickname" class="input-box"
  26. placeholder="请输入员工昵称" placeholder-class="desc-placeholder">
  27. </view>
  28. </view>
  29. <view class="cell flex flex-y-center">
  30. <view class="title-block ">
  31. <text>性别</text>
  32. </view>
  33. <view class="desc">
  34. <view class="flex-center">
  35. <view class="checklist-box " @click="choicepay(item.num)"
  36. v-for="(item,index) of integral_arr" :key='index' :class="sex==item.num?'actt':''">
  37. <view class="radio__inner" :class="sex==item.num?'act_border':''">
  38. <view :class="sex==item.num?'is-default-checked':''"
  39. class="radio__inner-icon radio__inner-icon ">
  40. </view>
  41. </view>
  42. <text class="checklist-text">{{item.name}}</text>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="cell flex flex-y-center">
  48. <view class="title-block ">
  49. <text>真实姓名</text>
  50. </view>
  51. <view class="desc">
  52. <input type="text" :value="info.name" name="name" class="input-box" placeholder="请输入真实姓名"
  53. placeholder-class="desc-placeholder">
  54. </view>
  55. </view>
  56. <view class="cell flex flex-y-center">
  57. <view class="title-block ">
  58. <text>手机号码</text>
  59. </view>
  60. <view class="desc">
  61. <input type="number" maxlength="11" :value="info.phone" name="phone" class="input-box"
  62. placeholder="请输入手机号码" placeholder-class="desc-placeholder">
  63. </view>
  64. </view>
  65. <view class="cell flex flex-y-center">
  66. <view class="title-block">
  67. <text>员工登录密码</text>
  68. </view>
  69. <view class="desc">
  70. <input type="text" :value="info.pass" name="pass" class="input-box" placeholder="请输入员工密码"
  71. placeholder-class="desc-placeholder">
  72. </view>
  73. </view>
  74. <view class="cell flex flex-y-center">
  75. <view class="title-block">
  76. <text>员工编号</text>
  77. </view>
  78. <view class="desc">
  79. <input type="text" :value="info.number" name="number" class="input-box"
  80. placeholder="请输入员工编号" placeholder-class="desc-placeholder">
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="footer-bar">
  86. <view class="content flex flex-center" style="background: none;">
  87. <button class="btn" hover-class="none" form-type="submit">
  88. 立即添加
  89. </button>
  90. </view>
  91. </view>
  92. </form>
  93. </view>
  94. </template>
  95. <script>
  96. export default {
  97. data() {
  98. return {
  99. id: "",
  100. store_id: "",
  101. info: {},
  102. integral_arr: [{
  103. num: 1,
  104. name: '男'
  105. }, {
  106. num: 2,
  107. name: '女'
  108. }, ],
  109. sex: 1,
  110. type: 2,
  111. tableTypeList: [],
  112. tableTypeActive: "请选择",
  113. admin_id: '',
  114. }
  115. },
  116. onLoad(e) {
  117. this.store_id = uni.getStorageSync("store_id");
  118. this.admin_id = uni.getStorageSync("admin_id");
  119. this.type = e.type||2;
  120. if (e.id) {
  121. this.id = e.id;
  122. }
  123. this.shop_store_index();
  124. },
  125. methods: {
  126. shop_store_index() {
  127. this.request({
  128. url: 'Smdcshop/shop_store_index',
  129. data: {
  130. admin_id:this.admin_id,
  131. }
  132. }).then(res => {
  133. if (res.code == 200) {
  134. this.tableTypeList = res.data;
  135. if(this.id){
  136. this.getData(this.id)
  137. }
  138. }
  139. })
  140. },
  141. onTableTypeChange(e) {
  142. console.log(e)
  143. this.tableTypeActive = this.tableTypeList[e.detail.value].title;
  144. this.store_id = this.tableTypeList[e.detail.value].id
  145. },
  146. choicepay(e) {
  147. this.sex = e;
  148. },
  149. getData(id) {
  150. this.request({
  151. url: 'Smdcshop/staff_info',
  152. data: {
  153. id: id
  154. }
  155. }).then(res => {
  156. if (res.code == "200") {
  157. this.info = res.data;
  158. this.sex = res.data.sex;
  159. this.store_id = res.data.storeid;
  160. if(this.tableTypeList.length>0){
  161. for (let i of this.tableTypeList) {
  162. if (i.id == Number(res.data.storeid)) {
  163. this.tableTypeActive = i.title;
  164. }
  165. }
  166. }
  167. }
  168. })
  169. },
  170. onSubmit(e) {
  171. let params = e.detail.value,
  172. url;
  173. params.storeid = this.store_id;
  174. params.sex = this.sex;
  175. if (this.id) {
  176. params.id = this.id;
  177. url = "Smdcshop/staff_update";
  178. } else {
  179. url = "Smdcshop/staff_staff";
  180. }
  181. if (!params.nickname || !params.phone || !params.pass || !params.name) {
  182. uni.showToast({
  183. title: "必须不能为空",
  184. icon: 'none'
  185. })
  186. return false
  187. }
  188. var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
  189. if (!myreg.test(params.phone)) {
  190. uni.showToast({
  191. title: "联系电话格式不正确",
  192. icon: 'none'
  193. });
  194. return false;
  195. }
  196. this.request({
  197. url: url,
  198. data: params
  199. }).then(res => {
  200. if (res.code == 200) {
  201. uni.showToast({
  202. title: res.message,
  203. icon: 'none'
  204. })
  205. setTimeout(() => {
  206. uni.navigateBack()
  207. }, 2000)
  208. }
  209. }).catch((res) => {
  210. uni.showToast({
  211. title: res.message,
  212. icon: 'none'
  213. })
  214. });
  215. },
  216. }
  217. }
  218. </script>
  219. <style>
  220. @import url("./static/css/common.css");
  221. page {
  222. background-color: #F4F5F7;
  223. }
  224. .checklist-box {
  225. display: -webkit-box;
  226. display: -webkit-flex;
  227. display: flex;
  228. -webkit-box-orient: horizontal;
  229. -webkit-box-direction: normal;
  230. -webkit-flex-direction: row;
  231. flex-direction: row;
  232. -webkit-box-align: center;
  233. -webkit-align-items: center;
  234. align-items: center;
  235. margin: 5px 0;
  236. margin-right: 22px;
  237. }
  238. .radio__inner {
  239. -webkit-flex-shrink: 0;
  240. flex-shrink: 0;
  241. display: -webkit-box;
  242. display: -webkit-flex;
  243. display: flex;
  244. -webkit-box-pack: center;
  245. -webkit-justify-content: center;
  246. justify-content: center;
  247. -webkit-box-align: center;
  248. -webkit-align-items: center;
  249. align-items: center;
  250. position: relative;
  251. border: 1px solid #DCDFE6;
  252. border-radius: 2px;
  253. box-sizing: border-box;
  254. width: 16px;
  255. height: 16px;
  256. border-radius: 16px;
  257. background-color: #fff;
  258. z-index: 1;
  259. -webkit-transition: border-color .3s;
  260. transition: border-color .3s;
  261. }
  262. .radio__inner-icon {
  263. width: 8px;
  264. height: 8px;
  265. border-radius: 10px;
  266. opacity: 0;
  267. -webkit-transition: -webkit-transform .3s;
  268. transition: -webkit-transform .3s;
  269. transition: transform .3s;
  270. transition: transform .3s, -webkit-transform .3s;
  271. }
  272. .is-default-checked {
  273. opacity: 1;
  274. background-color: #007aff;
  275. -webkit-transform: rotate(45deg) scaleY(1);
  276. transform: rotate(45deg) scaleY(1);
  277. }
  278. .checklist-text {
  279. font-size: 28rpx;
  280. margin-left: 5px;
  281. -webkit-transition: color 0.2s;
  282. transition: color 0.2s;
  283. color: #000;
  284. }
  285. .act_border {
  286. border: 1rpx solid #007aff;
  287. }
  288. </style>