index.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <div id="index">
  3. <el-row>
  4. <el-col
  5. :span="24"
  6. class="main animate__animated animate__backInRight"
  7. v-loading="loadings"
  8. element-loading-text="拼命加载中"
  9. element-loading-spinner="el-icon-loading"
  10. >
  11. <el-col :span="24" class="one"> <span>用户管理</span> </el-col>
  12. <el-col :span="24" class="two">
  13. <data-search :fields="searchFields" v-model="searchInfo" @query="search"> </data-search>
  14. </el-col>
  15. <el-col :span="24" class="four">
  16. <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @del="toDel" @puton="toPuton" @cash="toCash"> </data-table>
  17. </el-col>
  18. </el-col>
  19. </el-row>
  20. <e-dialog :dialog="dialog" @toClose="toClose">
  21. <template v-slot:info>
  22. <data-form :span="24" :fields="fieldsForm" :rules="fieldRules" v-model="fieldform" labelWidth="150px" @save="onSubmit"> </data-form>
  23. </template>
  24. </e-dialog>
  25. </div>
  26. </template>
  27. <script>
  28. const _ = require('lodash');
  29. import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
  30. const { mapActions } = createNamespacedHelpers('users');
  31. const { mapActions: admin } = createNamespacedHelpers('admins');
  32. const { mapActions: dictData } = createNamespacedHelpers('dictData');
  33. export default {
  34. name: 'index',
  35. props: {},
  36. components: {},
  37. data: function () {
  38. const that = this;
  39. return {
  40. loadings: true,
  41. // 列表
  42. opera: [
  43. { label: '流水', method: 'cash' },
  44. { label: '设为团长', method: 'puton', display: (i) => i.is_leader != '0', type: 'success' },
  45. { label: '取消团长', method: 'puton', display: (i) => i.is_leader == '0', type: 'warning' },
  46. { label: '删除', method: 'del', confirm: true, type: 'danger' },
  47. ],
  48. fields: [
  49. { label: 'openid', model: 'openid', showTip: false },
  50. { label: '用户姓名', model: 'name', showTip: false },
  51. { label: '电话', model: 'phone' },
  52. { label: '邮箱', model: 'email' },
  53. { label: '出生年月', model: 'birth' },
  54. {
  55. label: '性别',
  56. model: 'gender',
  57. format: (i) => {
  58. let data = that.genderList.find((f) => f.value == i);
  59. if (data) return data.label;
  60. else return '';
  61. },
  62. },
  63. {
  64. label: '是否是团长',
  65. model: 'is_leader',
  66. format: (i) => {
  67. let data = that.is_useList.find((f) => f.value == i);
  68. if (data) return data.label;
  69. else return '';
  70. },
  71. },
  72. {
  73. label: '状态',
  74. model: 'status',
  75. format: (i) => {
  76. let data = that.useList.find((f) => f.value == i);
  77. if (data) return data.label;
  78. else return '';
  79. },
  80. },
  81. ],
  82. list: [],
  83. total: 0,
  84. // 查询
  85. searchInfo: {},
  86. searchFields: [{ label: '用户姓名', model: 'name' }],
  87. // 性别
  88. genderList: [],
  89. // 用户状态
  90. useList: [],
  91. // 是否
  92. is_useList: [],
  93. // 弹框
  94. dialog: { title: '信息管理', show: false, type: '1' },
  95. fieldform: {},
  96. fieldsForm: [{ label: '密码', model: 'password', type: 'password' }],
  97. fieldRules: { password: [{ required: true, message: '请输入密码', trigger: 'blur' }] },
  98. };
  99. },
  100. async created() {
  101. await this.searchOther();
  102. await this.search();
  103. },
  104. methods: {
  105. ...dictData({ dictQuery: 'query' }),
  106. ...admin({ adminPass: 'pass' }),
  107. ...mapActions(['query', 'delete', 'fetch', 'update', 'create']),
  108. async search({ skip = 0, limit = this.$limit, ...info } = {}) {
  109. let condition = _.cloneDeep(this.searchInfo);
  110. let res = await this.query({ skip, limit, ...condition, ...info });
  111. if (this.$checkRes(res)) {
  112. this.$set(this, 'list', res.data);
  113. this.$set(this, 'total', res.total);
  114. }
  115. this.loadings = false;
  116. },
  117. // 查看流水
  118. toCash({ data }) {
  119. this.$router.push({ path: `/platmanag/user/detail`, query: { id: data._id } });
  120. },
  121. // 设置是否团长
  122. async toPuton({ data }) {
  123. this.$confirm('是否确认设置/取消该用户为团长?', '提示', {
  124. confirmButtonText: '确定',
  125. cancelButtonText: '取消',
  126. type: 'warning',
  127. }).then(async () => {
  128. if (data.is_leader != '0') data.is_leader = '0';
  129. else data.is_leader = '1';
  130. let res;
  131. if (data._id) res = await this.update(data);
  132. if (this.$checkRes(res)) this.$message({ type: `success`, message: `修改成功` });
  133. this.search();
  134. });
  135. },
  136. // 删除用户
  137. async toDel({ data }) {
  138. this.$confirm('是否确认删除,需确认密码', '提示', {
  139. confirmButtonText: '确定',
  140. cancelButtonText: '取消',
  141. type: 'warning',
  142. }).then(async () => {
  143. this.$set(this.fieldform, 'target', data.id);
  144. this.dialog = { title: '信息管理', show: true, type: '1' };
  145. });
  146. },
  147. async onSubmit({ data }) {
  148. let res;
  149. res = await this.adminPass(data);
  150. if (this.$checkRes(res)) {
  151. if (res.errcode == 0) {
  152. this.$confirm('是否确认删除', '提示', {
  153. confirmButtonText: '确定',
  154. cancelButtonText: '取消',
  155. type: 'warning',
  156. }).then(async () => {
  157. let info = { key: res.data, target: data.target };
  158. res = await this.delete(info);
  159. if (this.$checkRes(res)) {
  160. this.$message({ type: `success`, message: `删除成功` });
  161. this.toClose();
  162. }
  163. });
  164. }
  165. }
  166. },
  167. // 重置
  168. toClose() {
  169. this.fieldform = {};
  170. this.dialog = { title: '信息管理', show: false, type: '1' };
  171. this.search();
  172. },
  173. async searchOther() {
  174. let res;
  175. // 性别
  176. res = await this.dictQuery({ code: 'gender' });
  177. if (this.$checkRes(res)) this.$set(this, `genderList`, res.data);
  178. // 用户状态
  179. res = await this.dictQuery({ code: 'user_status' });
  180. if (this.$checkRes(res)) this.$set(this, `useList`, res.data);
  181. // 是否使用
  182. res = await this.dictQuery({ code: 'use' });
  183. if (this.$checkRes(res)) this.$set(this, `is_useList`, res.data);
  184. },
  185. },
  186. computed: {
  187. ...mapState(['user']),
  188. },
  189. metaInfo() {
  190. return { title: this.$route.meta.title };
  191. },
  192. watch: {
  193. test: {
  194. deep: true,
  195. immediate: true,
  196. handler(val) {},
  197. },
  198. },
  199. };
  200. </script>
  201. <style lang="less" scoped>
  202. .main {
  203. .one {
  204. margin: 0 0 10px 0;
  205. span:nth-child(1) {
  206. font-size: 20px;
  207. font-weight: 700;
  208. margin-right: 10px;
  209. }
  210. }
  211. .two {
  212. margin: 0 0 10px 0;
  213. }
  214. .thr {
  215. margin: 0 0 10px 0;
  216. }
  217. }
  218. .el-col {
  219. margin: 10px 0;
  220. }
  221. </style>