indexPage.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. module.exports = function (inputName, compoenntName) {
  2. return `<template>
  3. <div class="${compoenntName} pagePadding">
  4. <ex-table
  5. v-loading="loading"
  6. :table="table"
  7. :data="tableData"
  8. :columns="columns"
  9. :page="pageInfo"
  10. :size="size"
  11. @page-curr-change="handlePageChange"
  12. @page-size-change="handleSizeChange"
  13. @screen-reset="
  14. pageInfo.curr = 1;
  15. parmValue.page = 1;
  16. searchList();
  17. "
  18. @screen-submit="
  19. pageInfo.curr = 1;
  20. parmValue.page = 1;
  21. searchList();
  22. "
  23. >
  24. <template #table-header="{}">
  25. <div style="width: 100%">
  26. <el-row style="padding: 0 0 0 80px">
  27. <el-col :span="24">
  28. <el-col :span="4" style="width: 120px">
  29. <el-select
  30. :size="searchSize"
  31. v-model="parmValue.status"
  32. filterable
  33. clearable
  34. placeholder="账号状态"
  35. style="width: 100%"
  36. @change="
  37. pageInfo.curr = 1;
  38. parmValue.page = 1;
  39. searchList();
  40. "
  41. >
  42. <el-option
  43. v-for="item in statusList"
  44. :key="'status' + item.code"
  45. :label="item.name"
  46. :value="item.code"
  47. />
  48. </el-select>
  49. </el-col>
  50. <el-col :span="4" style="width: 150px; padding: 0 0 0 10px">
  51. <el-input
  52. :size="searchSize"
  53. v-model="parmValue.name"
  54. :maxlength="40"
  55. placeholder="业务员姓名"
  56. />
  57. </el-col>
  58. <el-col :span="4" style="width: 160px; padding: 0 0 0 10px">
  59. <el-input
  60. :size="searchSize"
  61. v-model="parmValue.username"
  62. :maxlength="40"
  63. placeholder="手机号"
  64. />
  65. </el-col>
  66. <el-col :span="4" style="width: 54px">
  67. <el-button
  68. :size="searchSize"
  69. type="primary"
  70. class="fr"
  71. icon="el-icon-search"
  72. @click="searchList"
  73. /></el-col>
  74. <el-col
  75. :span="4"
  76. style="width: 66px"
  77. >
  78. <el-button
  79. type="warning"
  80. class="fr"
  81. :size="searchSize"
  82. @click="restSearch"
  83. >
  84. 重置
  85. </el-button>
  86. </el-col>
  87. <el-col
  88. :span="3"
  89. style="width: 66px; float: right"
  90. >
  91. <el-button
  92. :size="searchSize"
  93. type="primary"
  94. style="float: right; margin-left: 5px"
  95. @click="searchList"
  96. >
  97. 刷新
  98. </el-button>
  99. </el-col>
  100. </el-col>
  101. </el-row>
  102. </div>
  103. </template>
  104. <template #status="{ scope }">
  105. <el-tag
  106. :size="tablebtnSize"
  107. :type="scope.row.status == '0' ? 'warning' : ''"
  108. v-text="
  109. (statusOptions.find((i)=> i.id == scope.row.status) || {})
  110. .label || '--'
  111. "
  112. ></el-tag>
  113. </template>
  114. <template #operation="{ scope }">
  115. <el-tooltip
  116. effect="dark"
  117. content="重置密码"
  118. placement="top"
  119. >
  120. <i
  121. class="el-icon-refresh-left tb-icon"
  122. @click="openPasswordModal(scope.row.id, false)"
  123. ></i>
  124. </el-tooltip>
  125. <el-tooltip
  126. effect="dark"
  127. content="详情"
  128. placement="top"
  129. >
  130. <i
  131. class="el-icon-view tb-icon"
  132. @click="openModal(scope.row.id, true, scope.row)"
  133. ></i>
  134. </el-tooltip>
  135. <el-tooltip
  136. effect="dark"
  137. content="修改"
  138. placement="top"
  139. >
  140. <i
  141. class="el-icon-edit tb-icon"
  142. @click="openModal(scope.row.id, false, scope.row)"
  143. ></i>
  144. </el-tooltip>
  145. <el-tooltip
  146. v-if="scope.row.status === '1'
  147. effect="dark"
  148. content="禁用"
  149. placement="top"
  150. >
  151. <i
  152. class="el-icon-video-pause tb-icon"
  153. @click="statusConfirm(scope.row.id, scope.row.status)"
  154. ></i>
  155. </el-tooltip>
  156. <el-tooltip
  157. v-if="scope.row.status === '0'
  158. "
  159. effect="dark"
  160. content="启用"
  161. placement="top"
  162. >
  163. <i
  164. class="el-icon-video-play tb-icon"
  165. @click="statusConfirm(scope.row.id, scope.row.status)"
  166. ></i>
  167. </el-tooltip>
  168. </template>
  169. </ex-table>
  170. <add-edit
  171. :id="modelId"
  172. :sitem="sitem"
  173. :show-model="showModel"
  174. :is-detail="isDetail"
  175. @refresh="searchList"
  176. @cancel="showModel = false"
  177. />
  178. </div>
  179. <div v-else>
  180. <no-auth></no-auth>
  181. </div>
  182. </div>
  183. </template>
  184. <script>
  185. import mixinPage from "@/mixins/elPaginationHandle";
  186. import resToken from "@/mixins/resToken";
  187. import {statusList} from "@/assets/js/statusList";
  188. import asyncRequest from "@/apis${inputName}";
  189. import addEdit from "./addEdit";
  190. import { mapGetters } from "vuex";
  191. export default {
  192. name: '${compoenntName}',
  193. mixins: [mixinPage, resToken],
  194. components: {
  195. addEdit,
  196. },
  197. computed: {
  198. ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  199. },
  200. data() {
  201. return {
  202. sitem: null,
  203. // 状态
  204. statusOptions: [
  205. { id: "0", label: "禁用" },
  206. { id: "1", label: "启用" },
  207. ],
  208. statusList: statusList,
  209. loading: true,
  210. showModel: false,
  211. isDetail: false,
  212. modelId: 0,
  213. parmValue: {
  214. name: "", // 业务员名字
  215. username: "", // 账号
  216. status: "", //
  217. page: 1, // 页码
  218. size: 15, // 每页显示条数
  219. },
  220. tableData: [],
  221. passwordModel: false,
  222. passwordModelId: 0,
  223. isPasswordDetail: false,
  224. // 表格 - 数据
  225. tableData: [],
  226. // 表格 - 参数
  227. table: {
  228. stripe: true,
  229. border: true,
  230. _defaultHeader_: ["setcol"],
  231. },
  232. // 表格 - 分页
  233. pageInfo: {
  234. size: 15,
  235. curr: 1,
  236. total: 0,
  237. },
  238. // 表格 - 列参数
  239. columns: [
  240. {
  241. prop: "nickname",
  242. label: "真实姓名",
  243. },
  244. {
  245. prop: "role_name",
  246. label: "角色名称",
  247. },
  248. {
  249. prop: "mobile",
  250. label: "联系电话",
  251. },
  252. {
  253. prop: "email",
  254. label: "邮箱",
  255. },
  256. {
  257. prop: "status",
  258. label: "状态",
  259. _slot_: "status",
  260. width: "80px",
  261. },
  262. {
  263. prop: "addtime",
  264. label: "创建时间",
  265. sortable: true,
  266. },
  267. {
  268. prop: "",
  269. label: "操作",
  270. fixed: "right",
  271. _noset_: true,
  272. _slot_: "operation",
  273. },
  274. ],
  275. };
  276. },
  277. mounted() {
  278. this.searchList();
  279. },
  280. methods: {
  281. restSearch() {
  282. this.parmValue = {
  283. name: "", // 业务员名字
  284. username: "", // 账号
  285. status: "", //
  286. page: 1, // 页码
  287. size: 15, // 每页显示条数
  288. };
  289. // 表格 - 分页
  290. this.pageInfo = {
  291. size: 15,
  292. curr: 1,
  293. total: 0,
  294. };
  295. this.searchList();
  296. },
  297. openModal(id, isDetail, sitem) {
  298. this.showModel = true;
  299. this.modelId = id;
  300. this.isDetail = isDetail;
  301. this.sitem = sitem;
  302. },
  303. async deleteById(id, status) {
  304. await this.$confirm("确定要删除?", {
  305. confirmButtonText: "确定",
  306. cancelButtonText: "取消",
  307. type: "warning",
  308. })
  309. .then(async () => {
  310. const model = {
  311. id: id,
  312. status: status === "1" ? "0" : "1",
  313. };
  314. const res = await asyncRequest.status(model);
  315. if (res && res.code === 0) {
  316. this.$notify.success({
  317. title: "删除成功",
  318. message: "",
  319. });
  320. this.searchList();
  321. } else if (res && res.code >= 101 && res.code <= 104) {
  322. await this.logout();
  323. } else {
  324. this.$message.warning(res.message);
  325. }
  326. })
  327. .catch(() => {
  328. console.log("取消");
  329. });
  330. },
  331. async searchList() {
  332. this.loading = true;
  333. const res = await asyncRequest.list(this.parmValue);
  334. if (res && res.code === 0 && res.data) {
  335. this.tableData = res.data.list;
  336. this.pageInfo.total = Number(res.data.count);
  337. } else if (res && res.code >= 101 && res.code <= 104) {
  338. await this.logout();
  339. } else {
  340. this.tableData = [];
  341. this.pageInfo.total = 0;
  342. }
  343. this.loading = false;
  344. },
  345. async statusConfirm(id, status) {
  346. let str= status === "1" ? "禁用" : "启用"
  347. await this.$confirm('确定要改为'+str+'?',{
  348. confirmButtonText: "确定",
  349. cancelButtonText: "取消",
  350. type: "warning",
  351. })
  352. .then(async () => {
  353. this.loading = true;
  354. const model = {
  355. id: id,
  356. status: status === "1" ? "0" : "1",
  357. };
  358. const res = await asyncRequest.status(model);
  359. if (res && res.code === 0) {
  360. this.loading = false;
  361. this.$notify.success({
  362. title: "状态修改成功!",
  363. message: "",
  364. });
  365. await this.searchList();
  366. } else if (res && res.code >= 101 && res.code <= 104) {
  367. await this.logout();
  368. } else {
  369. this.$message.warning(res.message);
  370. }
  371. })
  372. .catch(() => {
  373. console.log("取消");
  374. });
  375. },
  376. }
  377. }
  378. </script>
  379. <style lang="scss" scoped>
  380. .${compoenntName} {
  381. }
  382. </style>
  383. `;
  384. };