indexForPic.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索工作栏 -->
  4. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  5. <el-form-item label="模块名称" prop="name">
  6. <el-input v-model="queryParams.name" placeholder="请输入模块名称" clearable @keyup.enter.native="handleQuery" />
  7. </el-form-item>
  8. <el-form-item label="状态" prop="status">
  9. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @keyup.enter.native="handleQuery">
  10. <el-option v-for="dict in this.isEnable" :key="dict.value" :label="dict.label" :value="dict.value" />
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item>
  14. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  15. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  16. </el-form-item>
  17. </el-form>
  18. <!-- 操作工具栏 -->
  19. <el-row :gutter="10" class="mb8">
  20. <el-col :span="1.5">
  21. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  22. v-hasPermi="['system:module-config:create']">新增</el-button>
  23. </el-col>
  24. <!-- <el-col :span="1.5">
  25. <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
  26. :loading="exportLoading" v-hasPermi="['system:module-config:export']">导出</el-button>
  27. </el-col> -->
  28. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  29. </el-row>
  30. <!-- 列表 -->
  31. <el-table v-loading="loading" :data="list">
  32. <el-table-column label="序号" align="center">
  33. <template slot-scope="scope">{{ scope.$index + 1 }}</template>
  34. </el-table-column>
  35. <el-table-column label="模块分类" align="center" prop="category">
  36. <template v-slot="scope">
  37. <el-tag v-if="scope.row.category == 0">跳转模块</el-tag>
  38. <el-tag v-if="scope.row.category == 1" type="success">轮播图</el-tag>
  39. </template>
  40. </el-table-column>
  41. <el-table-column label="模块名称" align="center" prop="name" />
  42. <el-table-column label="排序" align="center" prop="sort" />
  43. <!-- <el-table-column label="图标" align="center" prop="icon" /> -->
  44. <el-table-column label="状态" align="center" width="100">
  45. <template v-slot="scope">
  46. <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1"
  47. @change="handleStatusChange(scope.row)" />
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="路径" align="center" prop="path" />
  51. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  52. <template v-slot="scope">
  53. <span>{{ parseTime(scope.row.createTime) }}</span>
  54. </template>
  55. </el-table-column>
  56. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  57. <template v-slot="scope">
  58. <el-button size="mini" type="text" @click="handelDetail(scope.row)">详情</el-button>
  59. <el-button size="mini" type="text" @click="handleEnable(scope.row)"
  60. v-if="scope.row.status === 1">启用</el-button>
  61. <el-button size="mini" type="text" @click="handleDisable(scope.row)"
  62. v-if="scope.row.status === 0">停用</el-button>
  63. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  64. v-hasPermi="['system:module-config:update']" v-if="scope.row.status === 1">修改</el-button>
  65. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  66. v-hasPermi="['system:module-config:delete']" v-if="scope.row.status === 1">删除</el-button>
  67. </template>
  68. </el-table-column>
  69. </el-table>
  70. <!-- 分页组件 -->
  71. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  72. @pagination="getList" />
  73. <!-- 对话框(添加 / 修改) -->
  74. <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
  75. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  76. <!-- <el-form-item label="模块分类" prop="category">
  77. <el-select v-model="form.category" placeholder="请选择模块分类" clearable>
  78. <el-option v-for="dict in this.category" :key="dict.value" :label="dict.label" :value="dict.value" />
  79. </el-select>
  80. </el-form-item> -->
  81. <!-- <el-form-item label="模块名称" prop="name" v-if="this.form.category == 0">
  82. <el-input v-model="form.name" placeholder="请输入模块名称" />
  83. </el-form-item> -->
  84. <el-form-item label="排序" prop="sort">
  85. <el-input-number :min="0" :precision="0" v-model="form.sort" />
  86. </el-form-item>
  87. <el-form-item label="图标" prop="icon">
  88. <imageUpload v-model="form.icon" />
  89. </el-form-item>
  90. <el-form-item label="状态" prop="status">
  91. <el-select v-model="form.status" placeholder="请选择状态" clearable>
  92. <el-option v-for="dict in this.isEnable" :key="dict.value" :label="dict.label" :value="dict.value" />
  93. </el-select>
  94. </el-form-item>
  95. <el-form-item label="路径" prop="path" >
  96. <el-input v-model="form.path" placeholder="请输入路径" />
  97. </el-form-item>
  98. </el-form>
  99. <div slot="footer" class="dialog-footer">
  100. <el-button type="primary" @click="submitForm">确 定</el-button>
  101. <el-button @click="cancel">取 消</el-button>
  102. </div>
  103. </el-dialog>
  104. <!-- 对话框(详情) -->
  105. <el-dialog title="详情" :visible.sync="openDetail" width="600px" v-dialogDrag append-to-body>
  106. <el-form ref="formDetail" :model="formDetail" label-width="80px">
  107. <el-form-item label="模块分类" prop="category">
  108. <el-select v-model="formDetail.category" disabled clearable>
  109. <el-option v-for="dict in this.category" :key="dict.value" :label="dict.label" :value="dict.value" />
  110. </el-select>
  111. </el-form-item>
  112. <!-- <el-form-item label="模块名称" prop="name" v-if="this.formDetail.category == 0">
  113. <el-input v-model="formDetail.name" disabled />
  114. </el-form-item> -->
  115. <el-form-item label="排序" prop="sort">
  116. <el-input-number :min="0" :precision="0" v-model="formDetail.sort" disabled />
  117. </el-form-item>
  118. <el-form-item label="图标" prop="icon">
  119. <img :src="formDetail.icon" class="avatar" width="450" />
  120. </el-form-item>
  121. <el-form-item label="状态" prop="status">
  122. <el-select v-model="formDetail.status" disabled clearable>
  123. <el-option v-for="dict in this.isEnable" :key="dict.value" :label="dict.label" :value="dict.value" />
  124. </el-select>
  125. </el-form-item>
  126. <!-- <el-form-item label="路径" prop="path" v-if="this.formDetail.category == 0">
  127. <el-input v-model="formDetail.path" disabled />
  128. </el-form-item> -->
  129. </el-form>
  130. </el-dialog>
  131. </div>
  132. </template>
  133. <script>
  134. import {
  135. createModuleConfigForPic,
  136. updateModuleConfigForPic,
  137. deleteModuleConfigForPic,
  138. getModuleConfigForPic,
  139. getModuleConfigPageForPic,
  140. } from "@/api/system/moduleConfigForPic";
  141. import {changeCategoryStatus,} from "@/api/system/moduleConfig";
  142. import { CommonStatusEnum } from "@/utils/constants";
  143. import ImageUpload from "@/components/ImageUpload/index";
  144. export default {
  145. name: "ModuleConfig",
  146. components: {
  147. ImageUpload,
  148. },
  149. data() {
  150. return {
  151. SysCommonStatusEnum: CommonStatusEnum,
  152. isEnable: [
  153. { value: 0, label: "开启" },
  154. { value: 1, label: "禁用" }
  155. ],
  156. category: [
  157. { value: 0, label: "跳转模块" },
  158. { value: 1, label: "轮播图" }
  159. ],
  160. // 遮罩层
  161. loading: true,
  162. // 导出遮罩层
  163. exportLoading: false,
  164. // 显示搜索条件
  165. showSearch: true,
  166. // 总条数
  167. total: 0,
  168. // 业务模块配置列表
  169. list: [],
  170. // 弹出层标题
  171. title: "",
  172. // 是否显示弹出层
  173. open: false,
  174. openDetail: false,
  175. // 查询参数
  176. queryParams: {
  177. pageNo: 1,
  178. pageSize: 10,
  179. name: null,
  180. status: null,
  181. category: null,
  182. },
  183. // 表单参数
  184. form: {},
  185. formDetail: {},
  186. // 表单校验
  187. rules: {
  188. sort: [
  189. { required: true, message: "排序不能为空", trigger: "blur" }
  190. ],
  191. icon: [
  192. { required: true, message: "图标不能为空", trigger: "blur" }
  193. ],
  194. status: [
  195. { required: true, message: "状态不能为空", trigger: "blur" }
  196. ],
  197. }
  198. };
  199. },
  200. created() {
  201. this.getList();
  202. },
  203. methods: {
  204. handelDetail(row) {
  205. this.resetDetail();
  206. const id = row.id;
  207. getModuleConfigForPic(id).then(response => {
  208. this.formDetail = response.data;
  209. this.openDetail = true;
  210. });
  211. },
  212. // 模块状态修改
  213. handleStatusChange(row) {
  214. // 此时,row 已经变成目标状态了,所以可以直接提交请求和提示
  215. let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
  216. this.$modal
  217. .confirm('确认要"' + text + '"此轮播图吗?')
  218. .then(function () {
  219. return changeCategoryStatus(row.id, row.status);
  220. })
  221. .then(() => {
  222. this.$modal.msgSuccess(text + "成功");
  223. this.getList();
  224. })
  225. .catch(function () {
  226. // 异常时,需要将 row.status 状态重置回之前的
  227. row.status =
  228. row.status === CommonStatusEnum.ENABLE
  229. ? CommonStatusEnum.DISABLE
  230. : CommonStatusEnum.ENABLE;
  231. });
  232. },
  233. //启用
  234. handleEnable(row) {
  235. this.$modal.confirm('是否确认启用此轮播图').then(function () {
  236. return changeCategoryStatus(row.id, 0);
  237. }).then(() => {
  238. this.getList();
  239. this.$modal.msgSuccess("启用成功");
  240. }).catch(() => { });
  241. },
  242. //停用
  243. handleDisable(row) {
  244. this.$modal.confirm('是否确认停用此轮播图').then(function () {
  245. return changeCategoryStatus(row.id, 1);
  246. }).then(() => {
  247. this.getList();
  248. this.$modal.msgSuccess("停用成功");
  249. }).catch(() => { });
  250. },
  251. /** 查询列表 */
  252. getList() {
  253. this.loading = true;
  254. // 执行查询
  255. getModuleConfigPageForPic(this.queryParams).then(response => {
  256. this.list = response.data.list;
  257. this.total = response.data.total;
  258. this.loading = false;
  259. });
  260. },
  261. /** 取消按钮 */
  262. cancel() {
  263. this.open = false;
  264. this.reset();
  265. },
  266. /** 表单重置 */
  267. reset() {
  268. this.form = {
  269. name: undefined,
  270. sort: undefined,
  271. icon: undefined,
  272. status: undefined,
  273. path: undefined,
  274. category: undefined,
  275. };
  276. this.resetForm("form");
  277. },
  278. /** 表单重置 */
  279. resetDetail() {
  280. this.formDetail = {
  281. name: undefined,
  282. sort: undefined,
  283. icon: undefined,
  284. status: undefined,
  285. path: undefined,
  286. category: undefined,
  287. };
  288. this.resetForm("formDetail");
  289. },
  290. /** 搜索按钮操作 */
  291. handleQuery() {
  292. this.queryParams.pageNo = 1;
  293. this.getList();
  294. },
  295. /** 重置按钮操作 */
  296. resetQuery() {
  297. this.resetForm("queryForm");
  298. this.handleQuery();
  299. },
  300. /** 新增按钮操作 */
  301. handleAdd() {
  302. this.reset();
  303. console.log(this.form)
  304. this.open = true;
  305. this.title = "添加轮播图配置";
  306. },
  307. /** 修改按钮操作 */
  308. handleUpdate(row) {
  309. this.reset();
  310. const id = row.id;
  311. getModuleConfigForPic(id).then(response => {
  312. this.form = response.data;
  313. this.open = true;
  314. this.title = "修改轮播图配置";
  315. });
  316. },
  317. /** 提交按钮 */
  318. submitForm() {
  319. this.$refs["form"].validate(valid => {
  320. if (!valid) {
  321. return;
  322. }
  323. // 修改的提交
  324. if (this.form.id != null) {
  325. updateModuleConfigForPic(this.form).then(response => {
  326. this.$modal.msgSuccess("修改成功");
  327. this.open = false;
  328. this.getList();
  329. });
  330. return;
  331. }
  332. // 添加的提交
  333. createModuleConfigForPic(this.form).then(response => {
  334. this.$modal.msgSuccess("新增成功");
  335. this.open = false;
  336. this.getList();
  337. });
  338. });
  339. },
  340. /** 删除按钮操作 */
  341. handleDelete(row) {
  342. const id = row.id;
  343. this.$modal.confirm('是否确认删除编号为"' + id + '"的轮播图?').then(function () {
  344. return deleteModuleConfigForPic(id);
  345. }).then(() => {
  346. this.getList();
  347. this.$modal.msgSuccess("删除成功");
  348. }).catch(() => { });
  349. },
  350. /** 导出按钮操作 */
  351. handleExport() {
  352. // 处理查询参数
  353. let params = { ...this.queryParams };
  354. params.pageNo = undefined;
  355. params.pageSize = undefined;
  356. this.$modal.confirm('是否确认导出所有轮播图配置数据项?').then(() => {
  357. this.exportLoading = true;
  358. return exportModuleConfigExcel(params);
  359. }).then(response => {
  360. this.$download.excel(response, '轮播图配置.xls');
  361. this.exportLoading = false;
  362. }).catch(() => { });
  363. }
  364. }
  365. };
  366. </script>