index.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索工作栏 -->
  4. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
  5. <el-form-item label="上报时间" prop="eventTime">
  6. <el-date-picker
  7. v-model="queryParams.reporttime"
  8. style="width: 240px"
  9. value-format="yyyy-MM-dd HH:mm:ss"
  10. type="daterange"
  11. range-separator="-"
  12. start-placeholder="开始日期"
  13. end-placeholder="结束日期"
  14. :default-time="['00:00:00', '23:59:59']"
  15. />
  16. </el-form-item>
  17. <el-form-item>
  18. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  19. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  20. </el-form-item>
  21. </el-form>
  22. <!-- 操作工具栏 -->
  23. <el-row :gutter="10" class="mb8">
  24. <!-- <el-col :span="1.5">
  25. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  26. v-hasPermi="['backend:street-czfpczl:create']">新增</el-button>
  27. </el-col> -->
  28. <el-col :span="1.5">
  29. <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
  30. v-hasPermi="['backend:street-czfpczl:export']">导出</el-button>
  31. </el-col>
  32. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  33. </el-row>
  34. <!-- 列表 -->
  35. <el-table v-loading="loading" :data="list">
  36. <el-table-column label="id" align="center" prop="id" width="100px"/>
  37. <el-table-column label="检查出租房屋" align="center" prop="jcczfw" />
  38. <el-table-column label="发现隐患(处)" align="center" prop="fxyh" />
  39. <el-table-column label="整改隐患(处)" align="center" prop="zgyh" />
  40. <el-table-column label="发现违规群租房(处)" align="center" prop="fxwgqzf" />
  41. <el-table-column label="整改违规群租房(处)" align="center" prop="zgwgqzf" />
  42. <el-table-column label="上报时间" align="center" prop="reporttime" width="150px"/>
  43. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
  44. <template v-slot="scope">
  45. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  46. v-hasPermi="['backend:street-czfpczl:update']">修改</el-button>
  47. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  48. v-hasPermi="['backend:street-czfpczl:delete']">删除</el-button>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52. <!-- 分页组件 -->
  53. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  54. @pagination="getList"/>
  55. <!-- 对话框(添加 / 修改) -->
  56. <el-dialog :title="title" :visible.sync="open" width="40%" v-dialogDrag append-to-body class="details">
  57. <el-form ref="form" :model="form" :rules="rules" label-width="auto">
  58. <el-form-item label="检查出租房屋" prop="jcczfw">
  59. <el-input v-model="form.jcczfw" placeholder="请输入检查出租房屋" />
  60. </el-form-item>
  61. <el-form-item label="发现隐患(处)" prop="fxyh">
  62. <el-input v-model="form.fxyh" placeholder="请输入发现隐患(处)" />
  63. </el-form-item>
  64. <el-form-item label="整改隐患(处)" prop="zgyh">
  65. <el-input v-model="form.zgyh" placeholder="请输入整改隐患(处)" />
  66. </el-form-item>
  67. <el-form-item label="发现违规群租房(处)" prop="fxwgqzf">
  68. <el-input v-model="form.fxwgqzf" placeholder="请输入发现违规群租房(处)" />
  69. </el-form-item>
  70. <el-form-item label="整改违规群租房(处)" prop="zgwgqzf">
  71. <el-input v-model="form.zgwgqzf" placeholder="请输入整改违规群租房(处)" />
  72. </el-form-item>
  73. <el-form-item label="报告时间" prop="reporttime">
  74. <el-date-picker clearable v-model="form.reporttime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"
  75. style="width: 100%" />
  76. </el-form-item>
  77. </el-form>
  78. <div slot="footer" class="dialog-footer">
  79. <el-button type="primary" @click="submitForm">确 定</el-button>
  80. <el-button @click="cancel">取 消</el-button>
  81. </div>
  82. </el-dialog>
  83. </div>
  84. </template>
  85. <script>
  86. import { createStreetCzfpczl, updateStreetCzfpczl, deleteStreetCzfpczl, getStreetCzfpczl, getStreetCzfpczlPage, exportStreetCzfpczlExcel } from "@/api/backend/streetCzfpczl";
  87. export default {
  88. name: "StreetCzfpczl",
  89. components: {
  90. },
  91. data() {
  92. return {
  93. // 遮罩层
  94. loading: true,
  95. // 导出遮罩层
  96. exportLoading: false,
  97. // 显示搜索条件
  98. showSearch: true,
  99. // 总条数
  100. total: 0,
  101. // 出租房排查治理列表
  102. list: [],
  103. // 弹出层标题
  104. title: "",
  105. // 是否显示弹出层
  106. open: false,
  107. // 查询参数
  108. queryParams: {
  109. pageNo: 1,
  110. pageSize: 10,
  111. jcczfw: null,
  112. fxyh: null,
  113. zgyh: null,
  114. fxwgqzf: null,
  115. zgwgqzf: null,
  116. reporttime:null
  117. },
  118. // 表单参数
  119. form: {},
  120. // 表单校验
  121. rules: {
  122. }
  123. };
  124. },
  125. created() {
  126. this.getList();
  127. },
  128. methods: {
  129. /** 查询列表 */
  130. getList() {
  131. this.loading = true;
  132. // 执行查询
  133. getStreetCzfpczlPage(this.queryParams).then(response => {
  134. this.list = response.data.list;
  135. this.total = response.data.total;
  136. this.loading = false;
  137. });
  138. },
  139. /** 取消按钮 */
  140. cancel() {
  141. this.open = false;
  142. this.reset();
  143. },
  144. /** 表单重置 */
  145. reset() {
  146. this.form = {
  147. id: undefined,
  148. jcczfw: undefined,
  149. fxyh: undefined,
  150. zgyh: undefined,
  151. fxwgqzf: undefined,
  152. zgwgqzf: undefined,
  153. reporttime:undefined
  154. };
  155. this.resetForm("form");
  156. },
  157. /** 搜索按钮操作 */
  158. handleQuery() {
  159. this.queryParams.pageNo = 1;
  160. this.getList();
  161. },
  162. /** 重置按钮操作 */
  163. resetQuery() {
  164. this.resetForm("queryForm");
  165. this.handleQuery();
  166. this.queryParams.reporttime=''
  167. this.getList();
  168. },
  169. /** 新增按钮操作 */
  170. handleAdd() {
  171. this.reset();
  172. this.open = true;
  173. this.title = "添加出租房排查治理";
  174. },
  175. /** 修改按钮操作 */
  176. handleUpdate(row) {
  177. this.reset();
  178. const id = row.id;
  179. getStreetCzfpczl(id).then(response => {
  180. this.form = response.data;
  181. this.open = true;
  182. this.title = "修改出租房排查治理";
  183. });
  184. },
  185. /** 提交按钮 */
  186. submitForm() {
  187. this.$refs["form"].validate(valid => {
  188. if (!valid) {
  189. return;
  190. }
  191. // 修改的提交
  192. if (this.form.id != null) {
  193. updateStreetCzfpczl(this.form).then(response => {
  194. this.$modal.msgSuccess("修改成功");
  195. this.open = false;
  196. this.getList();
  197. });
  198. return;
  199. }
  200. // 添加的提交
  201. createStreetCzfpczl(this.form).then(response => {
  202. this.$modal.msgSuccess("新增成功");
  203. this.open = false;
  204. this.getList();
  205. });
  206. });
  207. },
  208. /** 删除按钮操作 */
  209. handleDelete(row) {
  210. const id = row.id;
  211. this.$modal.confirm('是否确认删除出租房排查治理编号为"' + id + '"的数据项?').then(function() {
  212. return deleteStreetCzfpczl(id);
  213. }).then(() => {
  214. this.getList();
  215. this.$modal.msgSuccess("删除成功");
  216. }).catch(() => {});
  217. },
  218. /** 导出按钮操作 */
  219. handleExport() {
  220. // 处理查询参数
  221. let params = {...this.queryParams};
  222. params.pageNo = undefined;
  223. params.pageSize = undefined;
  224. this.$modal.confirm('是否确认导出所有出租房排查治理数据项?').then(() => {
  225. this.exportLoading = true;
  226. return exportStreetCzfpczlExcel(params);
  227. }).then(response => {
  228. this.$download.excel(response, '出租房排查治理.xls');
  229. this.exportLoading = false;
  230. }).catch(() => {});
  231. }
  232. }
  233. };
  234. </script>
  235. <style lang="scss" scoped>
  236. @import "~@/assets/styles/dialog.scss";
  237. </style>