ReligiousPeopleReportList.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <van-nav-bar
  3. fixed
  4. title="信教群众异常"
  5. right-text="上报"
  6. left-arrow
  7. @click-left="onClickLeft"
  8. @click-right="onClickRight"
  9. >
  10. <template #right>
  11. <van-icon name="plus" size="18" />
  12. </template>
  13. </van-nav-bar>
  14. <div class="main">
  15. <van-search
  16. v-model="searchVal"
  17. clearable
  18. show-action
  19. shape="round"
  20. placeholder="请输入搜索关键词"
  21. label="姓名"
  22. input-align="center"
  23. @search="onSearch"
  24. @cancel="onCancel"
  25. />
  26. <van-tabs
  27. v-show="!searchShow"
  28. v-model:active="active"
  29. title-inactive-color="#bdbdbd"
  30. title-active-color="#36a7f3"
  31. >
  32. <van-tab title="未审核" name="0">
  33. <van-list
  34. v-model:loading="loading"
  35. :finished="finished"
  36. finished-text="没有更多了"
  37. @load="onLoad"
  38. >
  39. <van-swipe-cell v-for="item in list" :key="item">
  40. <div class="list_item" @click="goInfo(item.id)">
  41. <div class="item-left">
  42. <p v-show="item.partyTime != ''" style="color: #c4c4c4">
  43. {{ item.partyTime }}
  44. </p>
  45. <p style="color: red">待审核</p>
  46. </div>
  47. <van-cell>
  48. <template #title>
  49. <van-text-ellipsis
  50. rows="2"
  51. :content="`${item.abnormalName}存在${item.abnormalBehavior}异常行为`"
  52. />
  53. </template>
  54. <template #label>
  55. {{ item.currentResidence }}
  56. </template>
  57. </van-cell>
  58. </div>
  59. <template #right>
  60. <van-button
  61. square
  62. type="danger"
  63. text="删除"
  64. class="button"
  65. @click="deleteItem(item.id)"
  66. />
  67. <van-button
  68. square
  69. type="primary"
  70. text="修改"
  71. class="button"
  72. @click="updateItem(item)"
  73. />
  74. </template>
  75. </van-swipe-cell>
  76. </van-list>
  77. </van-tab>
  78. <van-tab title="已审核" name="1">
  79. <van-list
  80. v-model:loading="loading1"
  81. :finished="finished1"
  82. finished-text="没有更多了"
  83. @load="onLoad1"
  84. >
  85. <van-swipe-cell v-for="item in readList" :key="item">
  86. <div class="list_item" @click="goInfo(item.id)">
  87. <div class="item-left">
  88. <p style="color: #c4c4c4">{{ item.partyTime }}</p>
  89. <p style="color: red">已审核</p>
  90. </div>
  91. <van-cell>
  92. <template #title>
  93. <van-text-ellipsis
  94. rows="2"
  95. :content="`${item.abnormalName}存在${item.abnormalBehavior}异常行为`"
  96. />
  97. </template>
  98. <template #label>
  99. {{ item.currentResidence }}
  100. </template>
  101. </van-cell>
  102. </div>
  103. </van-swipe-cell>
  104. </van-list>
  105. </van-tab>
  106. </van-tabs>
  107. <!-- 搜索结果 -->
  108. <van-list
  109. v-show="searchShow"
  110. v-model:loading="loading"
  111. :finished="finished"
  112. finished-text="没有更多了"
  113. @load="onLoad"
  114. >
  115. <van-swipe-cell v-for="item in searchList" :key="item">
  116. <div class="list_item" @click="goInfo(item.id)">
  117. <div class="item-left">
  118. <p style="color: #c4c4c4">{{ item.partyTime }}</p>
  119. <p style="color: red">已审核</p>
  120. </div>
  121. <van-cell>
  122. <template #title>
  123. <van-text-ellipsis
  124. rows="2"
  125. :content="`${item.abnormalName}存在${item.abnormalBehavior}异常行为`"
  126. />
  127. </template>
  128. <template #label>
  129. {{ item.currentResidence }}
  130. </template>
  131. </van-cell>
  132. </div>
  133. </van-swipe-cell>
  134. </van-list>
  135. <van-dialog
  136. v-model:show="showDel"
  137. show-cancel-button
  138. confirmButtonText="删除"
  139. message="请确认删除该记录"
  140. @confirm="Itemdel"
  141. >
  142. </van-dialog>
  143. </div>
  144. </template>
  145. <script>
  146. import { ref } from "vue";
  147. import ReligiousPeopleReportService from "@/api/differentbelievers/ReligiousPeopleReportService";
  148. import { useRouter } from "vue-router";
  149. export default {
  150. name: "ReligiousPeopleReportList",
  151. setup() {
  152. const onClickLeft = () => {
  153. history.back();
  154. };
  155. // 上报
  156. const onClickRight = () => {
  157. router.push("/differentbelievers");
  158. };
  159. // 切换
  160. let active = ref(0);
  161. // 未审核列表
  162. let list = ref([]);
  163. // 已审核列表
  164. let readList = ref([]);
  165. const loading = ref(false);
  166. const finished = ref(false);
  167. let index = 0;
  168. const onLoad = () => {
  169. loading.value = true;
  170. finished.value = false;
  171. // 异步更新数据
  172. new ReligiousPeopleReportService()
  173. .list({
  174. current: index + 1,
  175. size: 10,
  176. assessment: 0,
  177. })
  178. .then(({ records, pages }) => {
  179. list.value.push(...records);
  180. // 加载状态结束
  181. loading.value = false;
  182. // 数据全部加载完成
  183. if (index + 1 >= pages) {
  184. finished.value = true;
  185. }
  186. index++;
  187. });
  188. };
  189. const loading1 = ref(false);
  190. const finished1 = ref(false);
  191. let index1 = 0;
  192. const onLoad1 = () => {
  193. loading1.value = true;
  194. finished1.value = false;
  195. // 异步更新数据
  196. new ReligiousPeopleReportService()
  197. .list({
  198. current: index1 + 1,
  199. size: 10,
  200. assessment: 1,
  201. })
  202. .then(({ records, pages }) => {
  203. readList.value.push(...records);
  204. // 加载状态结束
  205. loading1.value = false;
  206. // 数据全部加载完成
  207. if (index1 + 1 >= pages) {
  208. finished1.value = true;
  209. }
  210. index1++;
  211. });
  212. };
  213. // 搜索
  214. let searchShow = ref(false);
  215. let searchList = ref([]);
  216. const searchVal = ref("");
  217. const onSearch = () => {
  218. searchShow.value = true;
  219. searchList.value = [];
  220. new ReligiousPeopleReportService()
  221. .list({
  222. current: 1,
  223. size: 10000,
  224. abnormalName: searchVal.value,
  225. })
  226. .then(({ records }) => {
  227. searchList.value.push(...records);
  228. // 加载状态结束
  229. loading.value = false;
  230. });
  231. };
  232. const onCancel = () => {
  233. searchVal.value = "";
  234. searchShow.value = false;
  235. };
  236. // 删除确认
  237. let showDel = ref(false);
  238. let ids = ref("");
  239. const deleteItem = (val) => {
  240. showDel.value = true;
  241. ids.value = val;
  242. };
  243. // 删除
  244. const Itemdel = () => {
  245. new ReligiousPeopleReportService().delete(ids.value).then((res) => {
  246. console.log("删除", res);
  247. index = 0;
  248. loading.value = true;
  249. list.value = [];
  250. readList.value = [];
  251. onLoad();
  252. });
  253. };
  254. let router = useRouter();
  255. // 修改跳转
  256. const updateItem = (val) => {
  257. router.push({
  258. path: "/differentbelievers",
  259. query: { id: val.id },
  260. });
  261. };
  262. // 详情跳转
  263. const goInfo = (val) => {
  264. router.push({
  265. path: "/differentbelieversInfo",
  266. query: { id: val },
  267. });
  268. };
  269. return {
  270. active,
  271. onClickLeft,
  272. list,
  273. readList,
  274. onLoad,
  275. loading,
  276. finished,
  277. onLoad1,
  278. loading1,
  279. finished1,
  280. searchShow,
  281. searchVal,
  282. searchList,
  283. onSearch,
  284. onCancel,
  285. onClickRight,
  286. updateItem,
  287. goInfo,
  288. showDel,
  289. deleteItem,
  290. Itemdel,
  291. };
  292. },
  293. };
  294. </script >
  295. <style scope>
  296. </style>