index.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="处罚企业名称" prop="companyName" label-width="200">
  5. <el-input
  6. v-model="queryParams.companyName"
  7. placeholder="请输入处罚企业名称"
  8. clearable
  9. @keyup.enter="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" label-width="200">
  13. <el-input
  14. v-model="queryParams.unifiedSocialCreditCode"
  15. placeholder="请输入统一社会信用代码"
  16. clearable
  17. @keyup.enter="handleQuery"
  18. />
  19. </el-form-item>
  20. <!-- <el-form-item label="处罚对象名称" prop="punishedEntityName" label-width="200">-->
  21. <!-- <el-input-->
  22. <!-- v-model="queryParams.punishedEntityName"-->
  23. <!-- placeholder="请输入处罚对象名称"-->
  24. <!-- clearable-->
  25. <!-- @keyup.enter="handleQuery"-->
  26. <!-- />-->
  27. <!-- </el-form-item>-->
  28. <el-form-item>
  29. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  30. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  31. </el-form-item>
  32. </el-form>
  33. <el-row :gutter="10" class="mb8">
  34. <el-col :span="1.5">
  35. <el-popconfirm
  36. title="你确定清除所有数据?"
  37. confirm-button-text="是的"
  38. cancel-button-text="不是"
  39. :icon="InfoFilled"
  40. icon-color="#626AEF"
  41. @confirm="handleDelete"
  42. >
  43. <template #reference>
  44. <el-button
  45. type="danger"
  46. plain
  47. icon="Delete"
  48. v-hasPermi="['basicData:information:remove']"
  49. >清除全表
  50. </el-button>
  51. </template>
  52. </el-popconfirm>
  53. </el-col>
  54. <el-col :span="1.5">
  55. <el-button
  56. type="danger"
  57. plain
  58. icon="Delete"
  59. @click="batchDelete"
  60. v-hasPermi="['basicData:information:remove']"
  61. :disabled="ids.length === 0"
  62. >批量删除
  63. </el-button>
  64. </el-col>
  65. <el-col :span="1.5">
  66. <el-button
  67. type="warning"
  68. plain
  69. icon="Download"
  70. @click="handleExport"
  71. :disabled="!informationList.length"
  72. v-hasPermi="['basicData:information:export']"
  73. >导出
  74. </el-button>
  75. </el-col>
  76. <el-col :span="1.5">
  77. <el-button type="info" plain icon="Upload" @click="handleImport"
  78. v-hasPermi="['system:user:import']">导入
  79. </el-button>
  80. </el-col>
  81. <el-col :span="1.5">
  82. <el-button type="success" plain icon="Download" @click="downloadTemplate">
  83. 下载导入模版
  84. </el-button>
  85. </el-col>
  86. </el-row>
  87. <el-table v-loading="loading" :data="informationList" height="650" @selection-change="handleSelectionChange">
  88. <el-table-column type="selection" width="55" align="center"/>
  89. <el-table-column label="处罚企业名称" align="center" prop="companyName" :show-overflow-tooltip='true'/>
  90. <el-table-column label="统一社会信用代码" align="center" prop="unifiedSocialCreditCode" width="200"/>
  91. <el-table-column label="处罚对象名称" align="center" prop="punishedEntityName" :show-overflow-tooltip='true'/>
  92. <el-table-column label="文书字号" align="center" prop="documentNumber" :show-overflow-tooltip='true'/>
  93. <el-table-column label="处罚机关" align="center" prop="penaltyAuthority" :show-overflow-tooltip='true'/>
  94. <el-table-column label="处罚时间" align="center" prop="penaltyTime" width="180">
  95. <template #default="scope">
  96. <span>{{ parseTime(scope.row.penaltyTime, '{y}-{m}-{d}') }}</span>
  97. </template>
  98. </el-table-column>
  99. <el-table-column label="处罚事由" align="center" prop="penaltyReason" :show-overflow-tooltip='true'/>
  100. <el-table-column label="处罚依据" align="center" prop="legalBasis" :show-overflow-tooltip='true'/>
  101. <el-table-column label="处罚结果" align="center" prop="penaltyResult" :show-overflow-tooltip='true'/>
  102. </el-table>
  103. <div style="position: fixed;bottom: 20px;right: 10px;">
  104. <pagination
  105. v-show="total>0"
  106. :total="total"
  107. v-model:page="queryParams.pageNum"
  108. v-model:limit="queryParams.pageSize"
  109. @pagination="getList"
  110. />
  111. </div>
  112. <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
  113. <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
  114. :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
  115. :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
  116. <el-icon class="el-icon--upload">
  117. <upload-filled/>
  118. </el-icon>
  119. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  120. <template #tip>
  121. <div class="el-upload__tip text-center">
  122. <span>仅允许导入xls、xlsx格式文件。</span>
  123. </div>
  124. </template>
  125. </el-upload>
  126. <template #footer>
  127. <div class="dialog-footer">
  128. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  129. <el-button @click="upload.open = false">取 消</el-button>
  130. </div>
  131. </template>
  132. </el-dialog>
  133. <!-- 添加或修改公安治安处罚信息对话框 -->
  134. </div>
  135. </template>
  136. <script setup name="Information">
  137. import {
  138. listInformation,
  139. getInformation,
  140. delInformation,
  141. delInformationBatch
  142. } from "@/api/basicData/information28";
  143. import {reactive, ref, toRaw} from "vue";
  144. import {getToken} from "@/utils/auth";
  145. import {ElMessage} from "element-plus";
  146. import {likeQueryMethod} from "@/utils/likeQueryMethod";
  147. const {proxy} = getCurrentInstance();
  148. const informationList = ref([]);
  149. const open = ref(false);
  150. const loading = ref(true);
  151. const showSearch = ref(true);
  152. const ids = ref([]);
  153. const single = ref(true);
  154. const multiple = ref(true);
  155. const total = ref(0);
  156. const title = ref("");
  157. const upload = reactive({
  158. // 是否显示弹出层(用户导入)
  159. open: false,
  160. // 弹出层标题(用户导入)
  161. title: '',
  162. // 是否禁用上传
  163. isUploading: false,
  164. // 设置上传的请求头部
  165. headers: {Authorization: getToken()},
  166. // 上传的地址
  167. url: import.meta.env.VITE_APP_BASE_API + '/crmPublicSecurityPenaltyInformation/importData'
  168. })
  169. const handleFileSuccess = (e) => {
  170. if (e.code == 200) {
  171. ElMessage({
  172. type: "success",
  173. message: e.msg
  174. })
  175. getList()
  176. proxy.$refs['uploadRef']?.clearFiles()
  177. } else {
  178. ElMessage({
  179. type: "error",
  180. message: e.msg
  181. })
  182. proxy.$refs['uploadRef']?.clearFiles()
  183. }
  184. }
  185. function submitFileForm() {
  186. proxy.$refs['uploadRef']?.submit();
  187. upload.open = false;
  188. }
  189. function handleImport() {
  190. upload.open = true
  191. }
  192. const data = reactive({
  193. form: {},
  194. queryParams: {
  195. pageNum: 1,
  196. pageSize: 20,
  197. companyName: null,
  198. unifiedSocialCreditCode: '',
  199. punishedEntityName: null,
  200. documentNumber: null,
  201. penaltyAuthority: null,
  202. penaltyTime: null,
  203. penaltyReason: null,
  204. legalBasis: null,
  205. penaltyResult: null
  206. },
  207. rules: {
  208. }
  209. });
  210. const {queryParams, form, rules} = toRefs(data);
  211. /** 查询公安治安处罚信息列表 */
  212. function getList() {
  213. loading.value = true;
  214. let toServerObj = likeQueryMethod('unified_social_credit_code', queryParams.value.unifiedSocialCreditCode, queryParams.value.pageNum, queryParams.value.pageSize,'company_name',queryParams.value.companyName);
  215. listInformation(toServerObj).then(response => {
  216. informationList.value = response.records;
  217. total.value = response.total;
  218. loading.value = false;
  219. });
  220. }
  221. // 表单重置
  222. function reset() {
  223. form.value = {
  224. id: null,
  225. companyName: null,
  226. unifiedSocialCreditCode: '',
  227. punishedEntityName: null,
  228. documentNumber: null,
  229. penaltyAuthority: null,
  230. penaltyTime: null,
  231. penaltyReason: null,
  232. legalBasis: null,
  233. penaltyResult: null
  234. };
  235. proxy.resetForm("informationRef");
  236. }
  237. /** 搜索按钮操作 */
  238. function handleQuery() {
  239. queryParams.value.pageNum = 1;
  240. getList();
  241. }
  242. /** 重置按钮操作 */
  243. function resetQuery() {
  244. proxy.resetForm("queryRef");
  245. handleQuery();
  246. }
  247. // 多选框选中数据
  248. function handleSelectionChange(selection) {
  249. ids.value = selection.map(item => item.id);
  250. single.value = selection.length != 1;
  251. multiple.value = !selection.length;
  252. }
  253. /** 删除按钮操作 */
  254. async function handleDelete(row) {
  255. const res = await delInformation();
  256. if(res.code == 200){
  257. ElMessage({
  258. type:'success',
  259. message:'删除成功'
  260. })
  261. getList();
  262. }
  263. }
  264. /** 批量删除*/
  265. const batchDelete = (row)=>{
  266. const idsToS = row.id || ids.value;
  267. (proxy.$modal).confirm('是否确认删除这' + idsToS.length+'条的数据项?').then(function() {
  268. return delInformationBatch(toRaw(idsToS));
  269. }).then(() => {
  270. getList();
  271. proxy.$modal.msgSuccess("删除成功");
  272. }).catch(() => {});
  273. }
  274. /** 导出按钮操作 */
  275. function handleExport() {
  276. proxy.download('crmPublicSecurityPenaltyInformation/exportData', {
  277. ...queryParams.value
  278. }, `公安治安处罚信息_${new Date().getTime()}.xlsx`)
  279. }
  280. const downloadTemplate = ()=>{
  281. proxy.download('crmPublicSecurityPenaltyInformation/getUploadTemplate',{}, `公安治安处罚信息模板.xlsx`)
  282. }
  283. getList();
  284. </script>