index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="类型" prop="operateCount">
  5. <el-select v-model="queryParams.operateType" clearable placeholder="请选择类型" @keyup.enter.native="handleQuery">
  6. <el-option label="操作次数" value="1"></el-option>
  7. <el-option label="存储总量" value="2"></el-option>
  8. </el-select>
  9. </el-form-item>
  10. <el-form-item>
  11. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  12. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  13. </el-form-item>
  14. </el-form>
  15. <el-row :gutter="10" class="mb8">
  16. <el-col :span="1.5">
  17. <el-button
  18. type="primary"
  19. plain
  20. icon="el-icon-plus"
  21. size="mini"
  22. @click="handleAdd"
  23. >新增
  24. </el-button>
  25. </el-col>
  26. <el-col :span="1.5">
  27. <el-button
  28. type="success"
  29. plain
  30. icon="el-icon-edit"
  31. size="mini"
  32. :disabled="single"
  33. @click="handleUpdate"
  34. >修改
  35. </el-button>
  36. </el-col>
  37. <el-col :span="1.5">
  38. <el-button
  39. type="danger"
  40. plain
  41. icon="el-icon-delete"
  42. size="mini"
  43. :disabled="multiple"
  44. @click="handleDelete"
  45. >删除
  46. </el-button>
  47. </el-col>
  48. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  49. </el-row>
  50. <el-table v-loading="loading" :data="statisticsList" @selection-change="handleSelectionChange">
  51. <el-table-column type="selection" width="55" align="center"/>
  52. <el-table-column label="序号" align="center" type="index"/>
  53. <el-table-column label="类型" align="center" prop="operateType">
  54. <template slot-scope="scope">
  55. <label v-show="scope.row.operateType == '1'">操作次数</label>
  56. <label v-show="scope.row.operateType == '2'">存储总量</label>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="数量" align="center" prop="operateCount"/>
  60. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  61. <template slot-scope="scope">
  62. <el-button
  63. size="mini"
  64. type="text"
  65. icon="el-icon-edit"
  66. @click="handleUpdate(scope.row)"
  67. >修改
  68. </el-button>
  69. <el-button
  70. size="mini"
  71. type="text"
  72. icon="el-icon-delete"
  73. @click="handleDelete(scope.row)"
  74. >删除
  75. </el-button>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. <pagination
  80. v-show="total>0"
  81. :total="total"
  82. :page.sync="queryParams.pageNum"
  83. :limit.sync="queryParams.pageSize"
  84. @pagination="getList"
  85. />
  86. <!-- 添加或修改操作次数和存储总量对话框 -->
  87. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  88. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  89. <el-form-item label="类型" prop="operateType">
  90. <el-select v-model="form.operateType" placeholder="请选择类型">
  91. <el-option label="操作次数" value="1"></el-option>
  92. <el-option label="存储总量" value="2"></el-option>
  93. </el-select>
  94. </el-form-item>
  95. <el-form-item label="数量" prop="operateCount">
  96. <el-input v-model="form.operateCount" 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. </div>
  105. </template>
  106. <script>
  107. import {
  108. listStatistics,
  109. getStatistics,
  110. delStatistics,
  111. addStatistics,
  112. updateStatistics
  113. } from "@/api/operatestatistics/statistics";
  114. export default {
  115. name: "Statistics",
  116. data() {
  117. return {
  118. // 遮罩层
  119. loading: true,
  120. // 选中数组
  121. ids: [],
  122. // 非单个禁用
  123. single: true,
  124. // 非多个禁用
  125. multiple: true,
  126. // 显示搜索条件
  127. showSearch: true,
  128. // 总条数
  129. total: 0,
  130. // 操作次数和存储总量表格数据
  131. statisticsList: [],
  132. // 弹出层标题
  133. title: "",
  134. // 是否显示弹出层
  135. open: false,
  136. // 查询参数
  137. queryParams: {
  138. pageNum: 1,
  139. pageSize: 10,
  140. operateType: null,
  141. operateCount: null
  142. },
  143. // 表单参数
  144. form: {},
  145. // 表单校验
  146. rules: {}
  147. };
  148. },
  149. created() {
  150. this.getList();
  151. },
  152. methods: {
  153. /** 查询操作次数和存储总量列表 */
  154. getList() {
  155. this.loading = true;
  156. listStatistics(this.queryParams).then(response => {
  157. this.statisticsList = response.rows;
  158. this.total = response.total;
  159. this.loading = false;
  160. });
  161. },
  162. // 取消按钮
  163. cancel() {
  164. this.open = false;
  165. this.reset();
  166. },
  167. // 表单重置
  168. reset() {
  169. this.form = {
  170. id: null,
  171. operateType: null,
  172. operateCount: null
  173. };
  174. this.resetForm("form");
  175. },
  176. /** 搜索按钮操作 */
  177. handleQuery() {
  178. this.queryParams.pageNum = 1;
  179. this.getList();
  180. },
  181. /** 重置按钮操作 */
  182. resetQuery() {
  183. this.resetForm("queryForm");
  184. this.handleQuery();
  185. },
  186. // 多选框选中数据
  187. handleSelectionChange(selection) {
  188. this.ids = selection.map(item => item.id)
  189. this.single = selection.length !== 1
  190. this.multiple = !selection.length
  191. },
  192. /** 新增按钮操作 */
  193. handleAdd() {
  194. this.reset();
  195. this.open = true;
  196. this.title = "添加操作次数和存储总量";
  197. },
  198. /** 修改按钮操作 */
  199. handleUpdate(row) {
  200. this.reset();
  201. const id = row.id || this.ids
  202. getStatistics(id).then(response => {
  203. this.form = response.data;
  204. this.open = true;
  205. this.title = "修改操作次数和存储总量";
  206. });
  207. },
  208. /** 提交按钮 */
  209. submitForm() {
  210. this.$refs["form"].validate(valid => {
  211. if (valid) {
  212. if (this.form.id != null) {
  213. updateStatistics(this.form).then(response => {
  214. this.$modal.msgSuccess("修改成功");
  215. this.open = false;
  216. this.getList();
  217. });
  218. } else {
  219. addStatistics(this.form).then(response => {
  220. this.$modal.msgSuccess("新增成功");
  221. this.open = false;
  222. this.getList();
  223. });
  224. }
  225. }
  226. });
  227. },
  228. /** 删除按钮操作 */
  229. handleDelete(row) {
  230. const ids = row.id || this.ids;
  231. this.$modal.confirm('是否确认删除操作次数和存储总量编号为"' + ids + '"的数据项?').then(function () {
  232. return delStatistics(ids);
  233. }).then(() => {
  234. this.getList();
  235. this.$modal.msgSuccess("删除成功");
  236. }).catch(() => {
  237. });
  238. },
  239. }
  240. };
  241. </script>