userList.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="table-page-search-wrapper">
  4. <a-form layout="inline">
  5. <a-row :gutter="48">
  6. <a-col :md="6" :sm="24">
  7. <a-form-item label="所在网点">
  8. <a-select placeholder="请选择" allowClear v-model="queryParam.storeId">
  9. <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  10. </a-select>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="手机号码/员工姓名">
  15. <a-input allowClear v-model.trim="queryParam.queryWord" placeholder="请输入手机号码"/>
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-button type="primary" @click="$refs.table.refresh(true)" style="margin-right: 10px;">查询</a-button>
  20. <a-button @click="reset">重置</a-button>
  21. </a-col>
  22. </a-row>
  23. </a-form>
  24. </div>
  25. <a-divider/>
  26. <div class="table-operator">
  27. <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
  28. </div>
  29. <s-table
  30. ref="table"
  31. size="default"
  32. rowKey="id"
  33. :columns="columns"
  34. :data="loadData"
  35. bordered
  36. >
  37. <div slot="roleNames" slot-scope="text, record" :title="record.roleNames">
  38. <span v-if="record.roleNames">{{ record.roleNames.substr(0,12) + '...' }}</span>
  39. <span v-else>无</span>
  40. </div>
  41. <!-- 性别 -->
  42. <span slot="sex" slot-scope="text,record">
  43. <template v-if="record.sex == 0 ">女</template>
  44. <template v-if="record.sex==1">男</template>
  45. </span>
  46. <!-- 操作 -->
  47. <span slot="action" slot-scope="text, record">
  48. <template>
  49. <div >
  50. <a class="action-button" @click="handleEdit(record)">修改</a>
  51. <a class="action-button reset-text" @click="resetPassword(record)">重置密码</a>
  52. <a class="action-button red-text" @click="delect(record)">删除</a>
  53. </div>
  54. </template>
  55. </span>
  56. </s-table>
  57. <userModal :visible="showModal" :storeOptionData="storeOptionData" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
  58. </a-card>
  59. </template>
  60. <script>
  61. import { STable, VSelect } from '@/components'
  62. import userModal from './userModal.vue'
  63. import { resetPSD, getUserList, delectUser, storeList } from '@/api/send-coupon-user.js'
  64. export default {
  65. name: 'UserList',
  66. components: {
  67. STable, VSelect, userModal
  68. },
  69. data () {
  70. return {
  71. // 查询参数
  72. queryParam: {
  73. storeId: undefined,
  74. queryWord: ''
  75. },
  76. showModal: false,
  77. itemData: {}, // 编辑行数据
  78. storeOptionData: [],
  79. // 表头
  80. columns: [
  81. {
  82. title: '序号',
  83. dataIndex: 'no',
  84. width: '40',
  85. align: 'center'
  86. },
  87. {
  88. title: '创建时间',
  89. dataIndex: 'createDate',
  90. width: '120',
  91. align: 'center'
  92. },
  93. {
  94. title: '员工姓名',
  95. dataIndex: 'name',
  96. width: '100',
  97. align: 'center'
  98. },
  99. {
  100. title: '手机号码',
  101. dataIndex: 'mobile',
  102. width: '100',
  103. align: 'center'
  104. },
  105. {
  106. title: '角色',
  107. width: '100',
  108. align: 'center',
  109. scopedSlots: { customRender: 'roleNames' }
  110. },
  111. {
  112. title: '性别',
  113. dataIndex: 'sex',
  114. width: '120',
  115. align: 'center',
  116. scopedSlots: { customRender: 'sex' }
  117. },
  118. {
  119. title: '所在网点',
  120. dataIndex: 'store.name',
  121. width: '120',
  122. align: 'center'
  123. },
  124. {
  125. title: '操作',
  126. width: '100',
  127. align: 'center',
  128. scopedSlots: { customRender: 'action' }
  129. }
  130. ],
  131. // 加载数据方法 必须为 Promise 对象
  132. loadData: parameter => {
  133. return getUserList(Object.assign(parameter, this.queryParam)).then(res => {
  134. const no = (res.data.pageNo - 1) * res.data.pageSize
  135. for (let i = 0; i < res.data.list.length; i++) {
  136. const _item = res.data.list[i]
  137. _item.no = no + i + 1
  138. // _item.loginFlag = _item.loginFlag + '' === '1'
  139. }
  140. return res.data
  141. })
  142. },
  143. optionAlertShow: false
  144. }
  145. },
  146. methods: {
  147. // 刷新列表
  148. refreshTable () {
  149. this.$refs.table.refresh(true)
  150. },
  151. // 新建
  152. openModal () {
  153. this.showModal = true
  154. this.itemData = {}
  155. },
  156. // 获取网点名称数据
  157. getStoreListData () {
  158. storeList({
  159. pageNo: 1,
  160. pageSize: 1000
  161. }).then(res => {
  162. console.log(res, '-----------')
  163. if (res.status == 200) {
  164. this.storeOptionData = res.data.list || []
  165. } else {
  166. this.storeOptionData = []
  167. }
  168. })
  169. },
  170. // 重置密码
  171. resetPassword (record) {
  172. resetPSD({
  173. id: record.id
  174. }).then(res => {
  175. if (res.status == 200) {
  176. this.$message.success('密码重置成功')
  177. } else {
  178. this.$message.error(res.message)
  179. }
  180. }).catch(() => {
  181. this.$message.success('密码重置失败, 请稍后重试')
  182. })
  183. },
  184. // 删除
  185. delect (record) {
  186. const _this = this
  187. this.$confirm({
  188. title: '警告',
  189. content: '删除后无法恢复,确认删除?',
  190. okText: '确定',
  191. cancelText: '取消',
  192. onOk () {
  193. delectUser({
  194. id: record.id
  195. }).then(res => {
  196. if (res.status == 200) {
  197. _this.$message.success('删除成功')
  198. _this.$refs.table.refresh()
  199. } else {
  200. _this.$message.error(res.message)
  201. }
  202. }).catch(() => {
  203. _this.$message.success('删除失败, 请稍后重试')
  204. })
  205. }
  206. })
  207. },
  208. getBizStr (storeBizList) {
  209. const str = []
  210. storeBizList.forEach(item => {
  211. str.push(item.bizTypeName)
  212. })
  213. return str.join(',')
  214. },
  215. // 编辑
  216. handleEdit (record) {
  217. console.log(record)
  218. this.showModal = true
  219. this.itemData = record
  220. },
  221. // 重置
  222. reset () {
  223. this.queryParam = {
  224. storeId: undefined,
  225. queryWord: ''
  226. }
  227. this.refreshTable()
  228. }
  229. },
  230. beforeRouteEnter (to, from, next) {
  231. next(vm => {
  232. vm.getStoreListData()
  233. vm.reset()
  234. })
  235. }
  236. }
  237. </script>
  238. <style scoped>
  239. .table-page-search-wrapper .ant-form-inline .ant-form-item{
  240. margin-bottom: 0;
  241. }
  242. .action-button{
  243. line-height: 40px;
  244. white-space: nowrap;
  245. padding: 5px 10px;
  246. background-color: #1890ff;
  247. border-radius: 4px;
  248. color: #fff;
  249. margin-right: 5px;
  250. }
  251. .red-text{
  252. background-color: red;
  253. }
  254. .reset-text {
  255. background-color: #31b50b;
  256. }
  257. </style>