8 changed files with 356 additions and 10 deletions
			
			
		| Before Width: | Height: | Size: 403 KiB After Width: | Height: | Size: 403 KiB | 
| @ -0,0 +1,118 @@ | |||||
|  | <template> | ||||
|  |   <Dialog v-model="modelVisible" :title="data ? '修改' : '新增'"> | ||||
|  |     <div class='AddNEditDialog'> | ||||
|  |       <Form :value="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" /> | ||||
|  |     </div> | ||||
|  | 
 | ||||
|  |     <template #footer> | ||||
|  |       <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false"> | ||||
|  |         取消 | ||||
|  |       </Button> | ||||
|  |       <Button @click.native="handleSubmit" :loading="submitting"> | ||||
|  |         确定 | ||||
|  |       </Button> | ||||
|  |     </template> | ||||
|  |   </Dialog> | ||||
|  | </template> | ||||
|  | 
 | ||||
|  | <script> | ||||
|  | import Dialog from "@screen/components/Dialog/index.vue"; | ||||
|  | import Button from "@screen/components/Buttons/Button.vue" | ||||
|  | import Form from '@screen/components/FormConfig'; | ||||
|  | 
 | ||||
|  | import request from "@/utils/request"; | ||||
|  | import { Message } from "element-ui"; | ||||
|  | import { addEditFormList } from "./../data" | ||||
|  | import { stakeMarkToArray, findPathIdByTreeId } from "@screen/utils/index.js" | ||||
|  | 
 | ||||
|  | export default { | ||||
|  |   name: 'AddNEditDialog', | ||||
|  |   components: { | ||||
|  |     Dialog, | ||||
|  |     Button, | ||||
|  |     Form | ||||
|  |   }, | ||||
|  |   model: { | ||||
|  |     prop: 'visible', | ||||
|  |     event: "update:value" | ||||
|  |   }, | ||||
|  |   props: { | ||||
|  |     visible: Boolean, | ||||
|  |     data: Object | ||||
|  |   }, | ||||
|  |   data() { | ||||
|  |     return { | ||||
|  |       submitting: false, | ||||
|  |       formData: {}, | ||||
|  |       formList: addEditFormList | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   computed: { | ||||
|  |     modelVisible: { | ||||
|  |       get() { | ||||
|  |         return this.visible | ||||
|  |       }, | ||||
|  |       set(val) { | ||||
|  |         this.$emit('update:value', val) | ||||
|  |       } | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   watch: { | ||||
|  |     modelVisible: { | ||||
|  |       immediate: true, | ||||
|  |       handler(bool) { | ||||
|  |         if (!bool) return; | ||||
|  | 
 | ||||
|  |         this.formData = !this.data ? {} : { | ||||
|  |           ...this.data | ||||
|  |         } | ||||
|  |       } | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   methods: { | ||||
|  |     handleSubmit() { | ||||
|  |       this.$refs.FormConfigRef.validate() | ||||
|  |         .then((data) => { | ||||
|  |           this.submitting = true; | ||||
|  | 
 | ||||
|  |           if (this.data) data.id = this.data.id; | ||||
|  | 
 | ||||
|  |           request({ | ||||
|  |             url: `/business/dcInfoBoardVocabulary`, | ||||
|  |             method: this.data ? 'PUT' : 'POST', | ||||
|  |             data | ||||
|  |           }) | ||||
|  |             .then(result => { | ||||
|  |               if (result.code != 200) return Message.error(`提交失败!`); | ||||
|  | 
 | ||||
|  |               Message.success(`提交成功!`); | ||||
|  |               this.$emit("afterSubmit"); | ||||
|  | 
 | ||||
|  |               this.modelVisible = false; | ||||
|  | 
 | ||||
|  |             }) | ||||
|  |             .catch((err) => { | ||||
|  |               console.log("%c [ err ]-110-「DeviceControlDialog.vue」", "font-size:15px; background:#547bf2; color:#98bfff;", err); | ||||
|  |               Message.error(`提交失败!`); | ||||
|  |             }) | ||||
|  |             .finally(() => { | ||||
|  |               this.submitting = false; | ||||
|  |             }) | ||||
|  |         }) | ||||
|  |     } | ||||
|  |   }, | ||||
|  | } | ||||
|  | </script> | ||||
|  | 
 | ||||
|  | <style lang='scss' scoped> | ||||
|  | .AddNEditDialog { | ||||
|  |   width: 450px; | ||||
|  |   display: flex; | ||||
|  |   flex-direction: column; | ||||
|  |   gap: 15px; | ||||
|  | 
 | ||||
|  |   .tips { | ||||
|  |     font-size: 12px; | ||||
|  |   } | ||||
|  | } | ||||
|  | </style> | ||||
| @ -0,0 +1,17 @@ | |||||
|  | import { cloneDeep, merge } from "lodash"; | ||||
|  | import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; | ||||
|  | 
 | ||||
|  | export const searchFormList = [ | ||||
|  |   { | ||||
|  |     label: "关键词:", | ||||
|  |     key: "word", | ||||
|  |   } | ||||
|  | ]; | ||||
|  | 
 | ||||
|  | export const addEditFormList = [ | ||||
|  |   { | ||||
|  |     label: "关键词:", | ||||
|  |     key: "word", | ||||
|  |     required: true, | ||||
|  |   } | ||||
|  | ]; | ||||
| @ -0,0 +1,205 @@ | |||||
|  | <template> | ||||
|  |   <div class='sensitiveWord'> | ||||
|  |     <div class="filter"> | ||||
|  |       <div> | ||||
|  |         <ButtonGradient @click.native="handleAddEdit(true)"> | ||||
|  |           <template #prefix> | ||||
|  |             <img src="@screen/images/insert.svg" /> | ||||
|  |           </template> | ||||
|  |           新增 | ||||
|  |         </ButtonGradient> | ||||
|  |         <ButtonGradient @click.native="handleExport"> | ||||
|  |           <template #prefix> | ||||
|  |             <img src="@screen/images/export.svg" /> | ||||
|  |           </template> | ||||
|  |           导出 | ||||
|  |         </ButtonGradient> | ||||
|  |         <ButtonGradient @click.native="getData"> | ||||
|  |           <template #prefix> | ||||
|  |             <img src="@screen/images/refresh.svg" /> | ||||
|  |           </template> | ||||
|  |           刷新 | ||||
|  |         </ButtonGradient> | ||||
|  |       </div> | ||||
|  | 
 | ||||
|  |       <InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{ labelWidth: '90px' }" | ||||
|  |         @handleSearch="handleSearch" /> | ||||
|  |     </div> | ||||
|  | 
 | ||||
|  | 
 | ||||
|  |     <div class="body"> | ||||
|  |       <Empty v-if="!data.length && !isFirst" class="no-data" style="position: absolute">暂无数据</Empty> | ||||
|  |       <template v-else> | ||||
|  |         <div class="cardBox" v-for="(item, index) in data" :key="index"> | ||||
|  |           <Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card" | ||||
|  |           buttonText="详情"> | ||||
|  |           <template #form-word="{ data }"> | ||||
|  |             <div class="keyword"> | ||||
|  |               {{ data.word }} | ||||
|  |             </div> | ||||
|  |           </template> | ||||
|  |           <template #button> | ||||
|  |             <Button @click.native="() => handleAddEdit(true, item)"> | ||||
|  |               修改 | ||||
|  |             </Button> | ||||
|  |             <Button style="background-color: #FF5F5F;" @click.native="handleDelete(item)"> | ||||
|  |               删除 | ||||
|  |             </Button> | ||||
|  |           </template> | ||||
|  |         </Card> | ||||
|  |       </div> | ||||
|  |       </template> | ||||
|  |     </div> | ||||
|  |     <AddNEditDialog v-model="isShowDialog" :data="dialogData" @afterSubmit = "getData" />; | ||||
|  |   </div> | ||||
|  | </template> | ||||
|  | 
 | ||||
|  | <script> | ||||
|  | import Card from "@screen/components/Card1/index.vue" | ||||
|  | import AddNEditDialog from "./components/AddNEditDialog.vue" | ||||
|  | import InputSearch from '@screen/components/InputSearch/index.vue'; | ||||
|  | import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; | ||||
|  | import Button from '@screen/components/Buttons/Button.vue'; | ||||
|  | 
 | ||||
|  | import { searchFormList } from "./data"; | ||||
|  | import request from "@/utils/request"; | ||||
|  | import { setLoading } from "@screen/utils/index.js" | ||||
|  | import { delay, exportFile, confirm } from "@screen/utils/common"; | ||||
|  | import { Message } from "element-ui"; | ||||
|  | 
 | ||||
|  | // 辖段管理 | ||||
|  | export default { | ||||
|  |   name: 'sensitiveWord', | ||||
|  |   components: { | ||||
|  |     Card, | ||||
|  |     ButtonGradient, | ||||
|  |     InputSearch, | ||||
|  |     AddNEditDialog, | ||||
|  |     Button | ||||
|  |   }, | ||||
|  |   data() { | ||||
|  |     return { | ||||
|  |       searchFormList, | ||||
|  |       keyMap: [ | ||||
|  |         { | ||||
|  |           key: "word", | ||||
|  |           label: "关键词" | ||||
|  |         }, | ||||
|  |         { | ||||
|  |           key: "location", | ||||
|  |           label: "id" | ||||
|  |         }, | ||||
|  |         { | ||||
|  |           key: "createTime", | ||||
|  |           label: "创建时间" | ||||
|  |         } | ||||
|  |       ], | ||||
|  |       data: [], | ||||
|  |       dialogData: null, | ||||
|  |       isShowDialog: false, | ||||
|  |       isFirst: true | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   created() { | ||||
|  |     this.getData(); | ||||
|  |     // this.getSearchOptions(); | ||||
|  |   }, | ||||
|  |   methods: { | ||||
|  |     getSearchData() { | ||||
|  |       let result = { | ||||
|  |         ...this.searchData, | ||||
|  |       }; | ||||
|  |       if(!result.word){ | ||||
|  |         result = {}; | ||||
|  |       } | ||||
|  |       return result | ||||
|  |     }, | ||||
|  |     async handleDelete(data) { | ||||
|  |       await confirm({ message: "是否要删除该辖段信息?" }); | ||||
|  | 
 | ||||
|  |       request({ | ||||
|  |         url: `/business/roadSection/${data.id}`, | ||||
|  |         method: "DELETE", | ||||
|  |         data: {} | ||||
|  |       }) | ||||
|  |         .then(result => { | ||||
|  |           if (result.code != 200) return Message.error("删除失败"); | ||||
|  | 
 | ||||
|  |           Message.success("删除成功") | ||||
|  |         }) | ||||
|  |         .catch(() => { | ||||
|  |           Message.error("删除失败") | ||||
|  |         }) | ||||
|  |     }, | ||||
|  |     handleAddEdit(bool, data) { | ||||
|  |       this.isShowDialog = bool; | ||||
|  |       this.dialogData = data; | ||||
|  |     }, | ||||
|  |     handleExport() { | ||||
|  |       exportFile({ | ||||
|  |         url: "/business/roadSection/export", | ||||
|  |         filename: "管辖路段", | ||||
|  |         data: this.getSearchData() | ||||
|  |       }); | ||||
|  |     }, | ||||
|  |     handleSearch(data) { | ||||
|  |       this.searchData = data; | ||||
|  |       this.getData(); | ||||
|  |     }, | ||||
|  |     async getData() { | ||||
|  |       const closeLoading = setLoading(); | ||||
|  | 
 | ||||
|  |       await delay(150); | ||||
|  | 
 | ||||
|  |       request({ | ||||
|  |         url: `/business/dcInfoBoardVocabulary/list`, | ||||
|  |         method: "get", | ||||
|  |         params: this.getSearchData() | ||||
|  |       }).then(result => { | ||||
|  |         if (result.code != 200) return; | ||||
|  |         this.data = result.rows; | ||||
|  |         // this.data = [ | ||||
|  |         //   ...result.rows,...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows | ||||
|  |         //   , ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows | ||||
|  |         // ]; | ||||
|  |         Array.from(result.rows); | ||||
|  |       }).finally(() => { | ||||
|  |         this.isFirst = false; | ||||
|  |         closeLoading(); | ||||
|  |       }) | ||||
|  |     } | ||||
|  |   } | ||||
|  | 
 | ||||
|  | } | ||||
|  | </script> | ||||
|  | 
 | ||||
|  | <style lang='scss' scoped> | ||||
|  | .sensitiveWord { | ||||
|  |   padding: 20px; | ||||
|  |   display: flex; flex-direction: column; | ||||
|  |   .filter { | ||||
|  |       height: 60px; | ||||
|  |       display: flex; | ||||
|  |       justify-content: space-between; | ||||
|  |       align-items: center; | ||||
|  | 
 | ||||
|  |       div { | ||||
|  |         display: flex; | ||||
|  |         gap: 6px; | ||||
|  |       } | ||||
|  |     } | ||||
|  | 
 | ||||
|  |   .body { | ||||
|  |     height: 0; flex: 1; overflow-y: scroll; | ||||
|  |     display: flex; flex-wrap: wrap; align-items: flex-start; | ||||
|  |     .cardBox{ | ||||
|  |       flex-basis: percentage(1/7); width: 0; padding-right: 10px; padding-bottom: 10px; | ||||
|  |     } | ||||
|  |     .keyword { | ||||
|  |       font-size: 14px; | ||||
|  |       font-weight: bold; | ||||
|  |       color: #00B3CC; | ||||
|  |     } | ||||
|  |   } | ||||
|  | } | ||||
|  | </style> | ||||
					Loading…
					
					
				
		Reference in new issue