indexPage.js 11 KB

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