网格管理调整完毕
This commit is contained in:
		| @@ -1,76 +0,0 @@ | ||||
| <template> | ||||
|   <div class="AppGridBlock"> | ||||
|     <keep-alive include="List"> | ||||
|       <component | ||||
|         ref="component" | ||||
|         :is="component" | ||||
|         @change="onChange" | ||||
|         :params="params" | ||||
|         :instance="instance" | ||||
|         :dict="dict" | ||||
|         :isEdit="isEdit" | ||||
|       ></component> | ||||
|     </keep-alive> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import List from "./components/list"; | ||||
| import Add from "./components/add"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppGridBlock", | ||||
|   label: "网格区块(saas)", | ||||
|  | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       component: "List", | ||||
|       params: {}, | ||||
|       include: [], | ||||
|       isEdit: false | ||||
|     }; | ||||
|   }, | ||||
|  | ||||
|   components: { | ||||
|     Add, | ||||
|     List, | ||||
|   }, | ||||
|  | ||||
|   mounted() {}, | ||||
|  | ||||
|   methods: { | ||||
|     onChange(data) { | ||||
|       if (data.type === "Add") { | ||||
|         this.component = "Add"; | ||||
|         this.params = data.params; | ||||
|         this.isEdit = data.isEdit | ||||
|       } | ||||
|  | ||||
|       if (data.type === "list") { | ||||
|         this.component = "List"; | ||||
|         this.params = data.params; | ||||
|  | ||||
|         this.$nextTick(() => { | ||||
|           if (data.isRefresh) { | ||||
|             this.$refs.component.getTreeList(); | ||||
|             this.$refs.component.getList(); | ||||
|           } | ||||
|         }); | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss"> | ||||
| .AppGridBlock { | ||||
|   height: 100%; | ||||
|   background: #f3f6f9; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,6 +0,0 @@ | ||||
| import component from './AppGridBlock.vue' | ||||
|  | ||||
| component.install = function (Vue) { | ||||
|   Vue.component(component.name, component) | ||||
| } | ||||
| export default component | ||||
| @@ -1,199 +0,0 @@ | ||||
| <template> | ||||
|   <ai-list class="list"> | ||||
|     <template slot="title"> | ||||
|       <ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-search-bar bottomBorder> | ||||
|         <template slot="left"> | ||||
|           <el-date-picker | ||||
|             v-model="searchObj.selectionDate" | ||||
|             type="date" | ||||
|             @change="(page.current = 1), getList()" | ||||
|             value-format="yyyy-MM-dd" | ||||
|             size="small" | ||||
|             placeholder="选用时间"> | ||||
|           </el-date-picker> | ||||
|         </template> | ||||
|         <template slot="right"> | ||||
|           <el-input | ||||
|             v-model="searchObj.name" | ||||
|             size="small" | ||||
|             placeholder="责任网格" | ||||
|             @keyup.enter.native="(page.current = 1), getList()" | ||||
|             clearable | ||||
|             @clear="(searchObj.name = '', page.current = 1), getList()" | ||||
|             suffix-icon="iconfont iconSearch" /> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-search-bar style="padding: 16px 0 0"> | ||||
|         <template slot="left"> | ||||
|           <el-button | ||||
|             icon="iconfont iconAdd" | ||||
|             type="primary" | ||||
|             size="small" | ||||
|             @click="add('')" | ||||
|             >添加</el-button | ||||
|           > | ||||
|           <el-button | ||||
|             icon="iconfont iconDelete" | ||||
|             @click="deleteById(ids.join(','))" | ||||
|             :disabled="!Boolean(ids.length)" | ||||
|             >删除</el-button | ||||
|           > | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-table | ||||
|         :tableData="tableData" | ||||
|         :col-configs="colConfigs" | ||||
|         :total="page.total" | ||||
|         ref="aitableex" | ||||
|         :current.sync="page.current" | ||||
|         :size.sync="page.size" | ||||
|         @selection-change="(v) => (ids = v.map((e) => e.id))" | ||||
|         @getList="getList()"> | ||||
|         <el-table-column label="操作" slot="options" align="center" fixed="right" width="170"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-options"> | ||||
|               <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button> | ||||
|               <el-button type="text" @click="add(row.id)">查看</el-button> | ||||
|               <el-button type="text" @click="deleteById(row.id)">删除</el-button> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </ai-table> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "list", | ||||
|   label: "网格员管理", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       searchObj: { | ||||
|         name: "", | ||||
|         selectionDate: "", | ||||
|       }, | ||||
|       page: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         total: 0, | ||||
|       }, | ||||
|       goAdd: false, | ||||
|       tableData: [], | ||||
|       fileList: [], | ||||
|       ids: [], | ||||
|       detail: {}, | ||||
|     }; | ||||
|   }, | ||||
|   created() { | ||||
|     this.dict.load("sex", "girdMemberType", "politicsStatus", "education"); | ||||
|     this.getList(); | ||||
|   }, | ||||
|   computed: { | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         { | ||||
|           type: "selection", | ||||
|         }, | ||||
|         { | ||||
|           prop: "wxUserId", | ||||
|           label: "网格员姓名", | ||||
|           openType: 'userName' | ||||
|         }, | ||||
|         { | ||||
|           prop: "girdInfoListStr", | ||||
|           align: "center", | ||||
|           label: "责任网格", | ||||
|         }, | ||||
|         { | ||||
|           prop: "phone", | ||||
|           align: "center", | ||||
|           label: "联系电话", | ||||
|         }, | ||||
|         { | ||||
|           prop: "selectionDate", | ||||
|           align: "center", | ||||
|           label: "选用时间", | ||||
|         }, | ||||
|       ]; | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     getList() { | ||||
|       this.instance | ||||
|         .post("/app/appgirdmemberinfo/list", null, { | ||||
|           params: { | ||||
|             ...this.searchObj, | ||||
|             ...this.page, | ||||
|           }, | ||||
|         }) | ||||
|         .then((res) => { | ||||
|           if (res.code == 0) { | ||||
|             this.tableData = res.data.records; | ||||
|             this.page.total = res.data.total; | ||||
|           } | ||||
|         }); | ||||
|     }, | ||||
|     deleteById(ids) { | ||||
|       ids && | ||||
|         this.$confirm("是否要删除该网格员?", { | ||||
|           type: "error", | ||||
|         }) | ||||
|           .then(() => { | ||||
|             this.instance | ||||
|               .post("/app/appgirdmemberinfo/delete", null, { | ||||
|                 params: { ids }, | ||||
|               }) | ||||
|               .then((res) => { | ||||
|                 if (res?.code == 0) { | ||||
|                   this.$message.success("删除成功!"); | ||||
|                   this.getList(); | ||||
|                 } | ||||
|               }); | ||||
|           }) | ||||
|           .catch(() => {}); | ||||
|     }, | ||||
|     add(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Add', | ||||
|         params: { | ||||
|           id: id || '' | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     toFamily (id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Family', | ||||
|         params: { | ||||
|           id | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     handleSelectionChange(val) { | ||||
|       this.ids = []; | ||||
|       val.map((e) => { | ||||
|         this.ids.push(e.id); | ||||
|       }); | ||||
|     }, | ||||
|     resetSearch() { | ||||
|       Object.keys(this.searchObj).map((e) => { | ||||
|         this.searchObj[e] = ""; | ||||
|       }); | ||||
|       this.getList(); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| </style> | ||||
							
								
								
									
										39
									
								
								project/sass/apps/grid/AppGridBlock/AppGridBlock.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										39
									
								
								project/sass/apps/grid/AppGridBlock/AppGridBlock.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,39 @@ | ||||
| <template> | ||||
|   <div class="AppGridBlock"> | ||||
|     <component :is="currentPage" :instance="instance" :dict="dict"/> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import List from "./components/list"; | ||||
| import Add from "./components/add"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppGridBlock", | ||||
|   label: "网格区块(saas)", | ||||
|  | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|   }, | ||||
|   computed: { | ||||
|     currentPage() { | ||||
|       return this.$route.hash == "#add" ? Add : List | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       component: "List", | ||||
|     }; | ||||
|   }, | ||||
|   components: {Add, List}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss"> | ||||
| .AppGridBlock { | ||||
|   height: 100%; | ||||
|   background: #f3f6f9; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -3,150 +3,53 @@ | ||||
|     <ai-detail> | ||||
|       <template #title> | ||||
|         <ai-title | ||||
|             :title="title" | ||||
|             :title="pageTitle" | ||||
|             :isShowBack="true" | ||||
|             :isShowBottomBorder="true" | ||||
|             @onBackClick="cancel(false)" | ||||
|         ></ai-title> | ||||
|         /> | ||||
|       </template> | ||||
|       <template #content> | ||||
|         <ai-card title="层级信息"> | ||||
|           <template slot="content"> | ||||
|             <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px"> | ||||
|               <ai-info-item label="上级层级单位:"><span>{{ forms.parentGirdName }}</span></ai-info-item> | ||||
|             </ai-wrapper> | ||||
|           </template> | ||||
|         </ai-card> | ||||
| 
 | ||||
|         <el-form | ||||
|             ref="rules" | ||||
|             :model="forms" | ||||
|             :rules="formRules" | ||||
|             size="small" | ||||
|             label-suffix=":" | ||||
|             label-width="120px" | ||||
|         > | ||||
|         <el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix=":" label-width="120px"> | ||||
|           <ai-card title="基础信息"> | ||||
|             <template slot="content"> | ||||
|               <div class="above"> | ||||
|                 <div class="left"> | ||||
|                   <el-form-item label="网格名称" prop="girdName"> | ||||
|                     <el-input | ||||
|                         v-model="forms.girdName" | ||||
|                         placeholder="请输入…" | ||||
|                         :maxlength="50" | ||||
|                         show-word-limit | ||||
|                     ></el-input> | ||||
|                   </el-form-item> | ||||
|                   <el-form-item label="网格类型" prop="girdType"> | ||||
|                     <el-select | ||||
|                         v-model="forms.girdType" | ||||
|                         placeholder="请选择" | ||||
|                         clearable | ||||
|                         style="width: 100%;" | ||||
|                     > | ||||
|                       <el-option | ||||
|                           v-for="(item, i) in dict.getDict('girdType')" | ||||
|                           :key="i" | ||||
|                           :label="item.dictName" | ||||
|                           :value="item.dictValue" | ||||
|                       ></el-option> | ||||
|                     </el-select> | ||||
|                   </el-form-item> | ||||
|                   <el-form-item label="是否最后一级" prop="isLastLevel"> | ||||
|                     <el-select | ||||
|                         v-model="forms.isLastLevel" | ||||
|                         placeholder="请选择" | ||||
|                         clearable | ||||
|                         style="width: 100%;" | ||||
|                     > | ||||
|                       <el-option | ||||
|                           v-for="(item, i) in dict.getDict('isLastLevel')" | ||||
|                           :key="i" | ||||
|                           :label="item.dictName" | ||||
|                           :value="item.dictValue" | ||||
|                       ></el-option> | ||||
|                     </el-select> | ||||
|                   </el-form-item> | ||||
|                 </div> | ||||
|                 <div class="right"> | ||||
|                   <el-form-item label="网格编码" prop="girdCode"> | ||||
|                     <el-input | ||||
|                         v-model="forms.girdCode" | ||||
|                         placeholder="请输入…" | ||||
|                         maxlength="30" | ||||
|                         show-word-limit | ||||
|                     ></el-input> | ||||
|                   </el-form-item> | ||||
|                   <el-form-item label="网格层级" prop="girdLevel"> | ||||
|                     <el-select | ||||
|                         v-model="forms.girdLevel" | ||||
|                         placeholder="请选择" | ||||
|                         :disabled="isEdit" | ||||
|                         clearable | ||||
|                         style="width: 100%;" | ||||
|                     > | ||||
|                       <el-option | ||||
|                           v-for="(item, i) in dict.getDict('girdLevel')" | ||||
|                           :key="i" | ||||
|                           :label="item.dictName" | ||||
|                           :value="item.dictValue" | ||||
|                       ></el-option> | ||||
|                     </el-select> | ||||
|                   </el-form-item> | ||||
|                 </div> | ||||
|               </div> | ||||
|               <el-form-item label="网格名称" prop="girdName"> | ||||
|                 <el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/> | ||||
|               </el-form-item> | ||||
|               <el-form-item label="网格长" prop="girdMemberManageList"> | ||||
|                 <AiUserGet :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'wxUserId'}"/> | ||||
|               </el-form-item> | ||||
|               <el-form-item label="网格员" prop="girdMemberList"> | ||||
|                 <AiUserGet :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'wxUserId'}"/> | ||||
|               </el-form-item> | ||||
|             </template> | ||||
|           </ai-card> | ||||
| 
 | ||||
|           <ai-card title="其他信息"> | ||||
|             <template slot="content"> | ||||
|               <div class="above"> | ||||
|                 <div class="left"> | ||||
|                   <!-- <el-form-item label="事件上报主体" prop="eventReportUnitId"> | ||||
|                     <el-cascader | ||||
|                       style="width: 100%" | ||||
|                       :options="unitOps" | ||||
|                       ref="cascader" | ||||
|                       v-model="forms.eventReportUnitId" | ||||
|                       :props="unitProps" | ||||
|                       :show-all-levels="false" | ||||
|                     /> | ||||
|                   </el-form-item> --> | ||||
|               <el-row type="flex"> | ||||
|                 <div class="fill"> | ||||
|                   <el-form-item label="初始日期" prop="startDate"> | ||||
|                     <el-date-picker | ||||
|                         v-model="forms.startDate" | ||||
|                         type="date" | ||||
|                         value-format="yyyy-MM-dd" | ||||
|                         placeholder="选择日期" | ||||
|                         style="width: 100%;" | ||||
|                     > | ||||
|                     </el-date-picker> | ||||
|                         style="width: 100%;"/> | ||||
|                   </el-form-item> | ||||
|                   <el-form-item label="终止日期" prop="endDate"> | ||||
|                     <el-date-picker | ||||
|                         v-model="forms.endDate" | ||||
|                         type="date" | ||||
|                         value-format="yyyy-MM-dd" | ||||
|                         placeholder="选择日期" | ||||
|                         style="width: 100%;" | ||||
|                     > | ||||
|                     </el-date-picker> | ||||
|                     <el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/> | ||||
|                   </el-form-item> | ||||
|                 </div> | ||||
|                 <div class="right"> | ||||
|                 <div class="fill"> | ||||
|                   <el-form-item label="面积" prop="area"> | ||||
|                     <el-input | ||||
|                         v-model="forms.area" | ||||
|                         placeholder="面积㎡" | ||||
|                     ></el-input> | ||||
|                     <el-input v-model="forms.area" placeholder="面积㎡" clearable/> | ||||
|                   </el-form-item> | ||||
|                 </div> | ||||
|               </div> | ||||
|               </el-row> | ||||
|               <el-form-item label="网格地址" prop="address"> | ||||
|                 <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input> | ||||
|               </el-form-item> | ||||
|               <el-form-item label="网格范围" prop="enclosure" v-if="forms.girdLevel === '2' || isAddLastLevel"> | ||||
|               <el-form-item label="网格范围" prop="enclosure"> | ||||
|                 <el-button size="small" @click="showMap = true">地图标绘</el-button> | ||||
|               </el-form-item> | ||||
|             </template> | ||||
| @@ -181,41 +84,26 @@ | ||||
|               id="tipinput" | ||||
|               size="medium" | ||||
|               style="width: 200px" | ||||
|           ></el-input> | ||||
|           /> | ||||
|         </div> | ||||
|         <div id="panel"></div> | ||||
|         <div id="panel"/> | ||||
|         <div class="container" id="container"></div> | ||||
|         <el-button-group | ||||
|             style="margin-top: 8px" | ||||
|             v-if="forms.plottingStatus == 1" | ||||
|         > | ||||
|           <el-button type="primary" size="mini" @click="polyEditor.open()" | ||||
|           >开始编辑 | ||||
|           </el-button | ||||
|           > | ||||
|           <el-button size="mini" @click="polyEditor.close()" | ||||
|           >结束编辑 | ||||
|           </el-button | ||||
|           > | ||||
|         <el-button-group style="margin-top: 8px" v-if="forms.plottingStatus==1"> | ||||
|           <el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button> | ||||
|           <el-button size="mini" @click="polyEditor.close()">结束编辑</el-button> | ||||
|         </el-button-group> | ||||
|         <el-button-group | ||||
|             style="margin-top: 8px" | ||||
|             v-if="forms.plottingStatus == 0" | ||||
|         > | ||||
|           <el-button size="mini" @click="draw('polygon')" | ||||
|           >开始绘制多边形 | ||||
|           </el-button | ||||
|           > | ||||
|           <el-button size="mini" @click="draw('polygon')">开始绘制多边形</el-button> | ||||
|           <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> --> | ||||
|           <el-button size="mini" @click="clear()">清除绘制</el-button> | ||||
|         </el-button-group> | ||||
|       </div> | ||||
|       <div class="dialog-footer" slot="footer"> | ||||
|         <el-button size="medium" @click="showMap = false">取消</el-button> | ||||
|         <el-button type="primary" size="medium" @click="surePotting()" | ||||
|         >确认 | ||||
|         </el-button | ||||
|         > | ||||
|         <el-button type="primary" size="medium" @click="surePotting()">确认</el-button> | ||||
|       </div> | ||||
|     </ai-dialog> | ||||
|   </div> | ||||
| @@ -231,27 +119,12 @@ export default { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     params: Object, | ||||
|     isEdit: Boolean | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       forms: { | ||||
|         address: "", | ||||
|         area: "", | ||||
|         points: [], | ||||
|         endDate: "", | ||||
|         eventReportUnit: "", | ||||
|         eventReportUnitId: "", | ||||
|         girdCode: "", | ||||
|         girdLevel: "", | ||||
|         girdList: [], | ||||
|         girdName: "", | ||||
|         girdType: "", | ||||
|         isLastLevel: "", | ||||
|         parentGirdId: "", | ||||
|         parentGirdName: "", | ||||
|         startDate: "", | ||||
|         plottingStatus: "0", | ||||
|         girdMemberManageList: [], | ||||
|         girdMemberList: [] | ||||
|       }, | ||||
|       showMap: false, | ||||
|       map: "", | ||||
| @@ -265,7 +138,6 @@ export default { | ||||
|       polyEditor: "", | ||||
|       title: "添加网格区块", | ||||
|       parentGirdInfo: {}, | ||||
|       isAddLastLevel: false | ||||
|     }; | ||||
|   }, | ||||
|   computed: { | ||||
| @@ -297,28 +169,24 @@ export default { | ||||
|       ops.map((e) => this.addChild(e, initData)); | ||||
|       return ops; | ||||
|     }, | ||||
|     pageTitle() { | ||||
|       return this.isEdit ? "编辑网格区块" : "添加网格区块" | ||||
|     }, | ||||
|     isEdit() { | ||||
|       return !!this.$route.query.id; | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.getCorpLocation() | ||||
|     if (this.isEdit) { | ||||
|       this.title = "编辑网格区块"; | ||||
|       this.searchDetail(); | ||||
|     } else { | ||||
|       this.forms.parentGirdId = this.params.id; | ||||
|       this.forms.parentGirdName = this.params.girdName; | ||||
|       this.isAddLastLevel = this.params.girdLevel === '1' | ||||
|       // this.forms.girdLevel = Number(this.info.girdLevel) + 1 +''; | ||||
|       // this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1'; | ||||
|       this.title = "添加网格区块"; | ||||
|       this.forms = this.$route.query | ||||
|     } | ||||
|     // this.getAllUnit(this.user.info.areaId); | ||||
|   }, | ||||
|   methods: { | ||||
|     cancel(isRefresh) { | ||||
|       this.$emit('change', { | ||||
|         type: 'list', | ||||
|         isRefresh: !!isRefresh, | ||||
|       }) | ||||
|     cancel() { | ||||
|       this.$router.push({}) | ||||
|     }, | ||||
|     // 获取所有单位 | ||||
|     getAllUnit(data) { | ||||
| @@ -389,7 +257,7 @@ export default { | ||||
|     }, | ||||
|     getCorpLocation() { | ||||
|       this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => { | ||||
|         if (res.code == 0) { | ||||
|         if (res?.data) { | ||||
|           this.location = res.data | ||||
|         } | ||||
|       }) | ||||
| @@ -499,8 +367,9 @@ export default { | ||||
|       }); | ||||
|     }, | ||||
|     searchDetail() { | ||||
|       let {id} = this.$route.query | ||||
|       this.instance.post(`/app/appgirdinfo/queryDetailById`, null, { | ||||
|         params: {id: this.params.id}, | ||||
|         params: {id}, | ||||
|       }).then((res) => { | ||||
|         if (res?.data) { | ||||
|           this.forms = {...res.data}; | ||||
| @@ -526,21 +395,6 @@ export default { | ||||
|     display: none !important; | ||||
|   } | ||||
| 
 | ||||
|   .above { | ||||
|     overflow: hidden; | ||||
|     padding: 8px 0; | ||||
| 
 | ||||
|     .left { | ||||
|       width: 380px; | ||||
|       float: left; | ||||
|     } | ||||
| 
 | ||||
|     .right { | ||||
|       width: 380px; | ||||
|       float: right; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .footer-btn { | ||||
|     width: 92px; | ||||
|   } | ||||
| @@ -116,8 +116,8 @@ | ||||
|               width="160"> | ||||
|             <template slot-scope="{ row }"> | ||||
|               <div class="table-options"> | ||||
|                 <el-button type="text" @click="see(row)">编辑</el-button> | ||||
|                 <el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button> | ||||
|                 <el-button type="text" @click="showEdit(row.id)">编辑</el-button> | ||||
|                 <el-button type="text" @click="poltting(row)">标绘</el-button> | ||||
|                 <el-button type="text" @click="deleteById(row.id)">删除</el-button> | ||||
|               </div> | ||||
|             </template> | ||||
| @@ -184,7 +184,7 @@ | ||||
|                 :isShowPagination="false" :show-header="false"> | ||||
|         <el-table-column slot="tags"> | ||||
|           <template slot-scope="{row}"> | ||||
|             <el-tag v-if="row.tags" effect="dark">{{ row.tags || '标签' }}</el-tag> | ||||
|             <el-tag v-if="row.label" effect="dark" size="small">{{ row.label }}</el-tag> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </ai-table> | ||||
| @@ -374,10 +374,9 @@ export default { | ||||
|       this.toAdd() | ||||
|     }, | ||||
|     toAdd() { | ||||
|       this.$emit('change', { | ||||
|         type: 'Add', | ||||
|         params: this.info, | ||||
|         isEdit: this.isEdit | ||||
|       let {id: parentGirdId, girdName: parentGirdName} = this.info | ||||
|       this.$router.push({ | ||||
|         hash: "#add", query: {parentGirdId, parentGirdName} | ||||
|       }) | ||||
|     }, | ||||
|     goBack() { | ||||
| @@ -442,10 +441,8 @@ export default { | ||||
|         console.log(e); | ||||
|       }); | ||||
|     }, | ||||
|     see(row) { | ||||
|       this.info = {...row}; | ||||
|       this.isEdit = true; | ||||
|       this.toAdd() | ||||
|     showEdit(id) { | ||||
|       this.$router.push({hash: "#add", query: {id}}) | ||||
|     }, | ||||
|     draw(type) { | ||||
|       switch (type) { | ||||
| @@ -8,7 +8,7 @@ | ||||
|           :params="params" | ||||
|           :instance="instance" | ||||
|           :dict="dict" | ||||
|       ></component> | ||||
|       /> | ||||
|     </keep-alive> | ||||
|   </div> | ||||
| </template> | ||||
							
								
								
									
										216
									
								
								project/sass/apps/grid/AppGridMember/components/list.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										216
									
								
								project/sass/apps/grid/AppGridMember/components/list.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,216 @@ | ||||
| <template> | ||||
|   <ai-list class="list"> | ||||
|     <template slot="title"> | ||||
|       <ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-search-bar bottomBorder> | ||||
|         <template slot="left"> | ||||
|           <el-date-picker | ||||
|               v-model="searchObj.selectionDate" | ||||
|               type="date" | ||||
|               @change="(page.current = 1), getList()" | ||||
|               value-format="yyyy-MM-dd" | ||||
|               size="small" | ||||
|               placeholder="选用时间"> | ||||
|           </el-date-picker> | ||||
|         </template> | ||||
|         <template slot="right"> | ||||
|           <el-input | ||||
|               v-model="searchObj.name" | ||||
|               size="small" | ||||
|               placeholder="责任网格" | ||||
|               @keyup.enter.native="(page.current = 1), getList()" | ||||
|               clearable | ||||
|               @clear="(searchObj.name = '', page.current = 1), getList()" | ||||
|               suffix-icon="iconfont iconSearch"/> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-search-bar style="padding: 16px 0 0"> | ||||
|         <template slot="left"> | ||||
|           <el-button | ||||
|               icon="iconfont iconAdd" | ||||
|               type="primary" | ||||
|               size="small" | ||||
|               @click="add('')" | ||||
|           >添加 | ||||
|           </el-button | ||||
|           > | ||||
|           <el-button | ||||
|               icon="iconfont iconDelete" | ||||
|               @click="deleteById(ids.join(','))" | ||||
|               :disabled="!Boolean(ids.length)" | ||||
|           >删除 | ||||
|           </el-button | ||||
|           > | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-table :tableData="tableData" | ||||
|                 :col-configs="colConfigs" | ||||
|                 :total="page.total" | ||||
|                 ref="aitableex" | ||||
|                 :current.sync="page.current" | ||||
|                 :size.sync="page.size" | ||||
|                 @selection-change="(v) => (ids = v.map((e) => e.id))" | ||||
|                 @getList="getList()"> | ||||
|         <el-table-column label="操作" slot="options" align="center" fixed="right" width="200"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-options"> | ||||
|               <el-button type="text" @click="setTag(row)">标签</el-button> | ||||
|               <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button> | ||||
|               <el-button type="text" @click="add(row.id)">查看</el-button> | ||||
|               <el-button type="text" @click="deleteById(row.id)">删除</el-button> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </ai-table> | ||||
|       <ai-dialog title="设置标签" :visible.sync="dialog" @closed="form={}" @onConfirm="submit" | ||||
|                  width="400px"> | ||||
|         <el-form :model="form" size="small" ref="DialogForm" :rules="rules" label-width="0"> | ||||
|           <el-form-item prop="label"> | ||||
|             <el-input v-model="form.label" maxlength="10" show-word-limit clearable placeholder="请输入标签信息,最多10个字"/> | ||||
|           </el-form-item> | ||||
|         </el-form> | ||||
|       </ai-dialog> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "list", | ||||
|   label: "网格员管理", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       searchObj: { | ||||
|         name: "", | ||||
|         selectionDate: "", | ||||
|       }, | ||||
|       page: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         total: 0, | ||||
|       }, | ||||
|       goAdd: false, | ||||
|       tableData: [], | ||||
|       fileList: [], | ||||
|       ids: [], | ||||
|       detail: {}, | ||||
|       dialog: false, | ||||
|       form: {}, | ||||
|       rules: {} | ||||
|     }; | ||||
|   }, | ||||
|   created() { | ||||
|     this.dict.load("sex", "girdMemberType", "politicsStatus", "education"); | ||||
|     this.getList(); | ||||
|   }, | ||||
|   computed: { | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         {type: "selection"}, | ||||
|         {prop: "wxUserId", label: "网格员姓名", openType: 'userName'}, | ||||
|         {prop: "girdInfoListStr", align: "center", label: "责任网格"}, | ||||
|         {prop: "phone", align: "center", label: "联系电话"}, | ||||
|         {prop: "label", align: "center", label: "标签信息"}, | ||||
|         {prop: "selectionDate", align: "center", label: "选用时间"}, | ||||
|       ]; | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     getList() { | ||||
|       this.instance | ||||
|       .post("/app/appgirdmemberinfo/list", null, { | ||||
|         params: { | ||||
|           ...this.searchObj, | ||||
|           ...this.page, | ||||
|         }, | ||||
|       }) | ||||
|       .then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.tableData = res.data.records; | ||||
|           this.page.total = res.data.total; | ||||
|         } | ||||
|       }); | ||||
|     }, | ||||
|     deleteById(ids) { | ||||
|       ids && | ||||
|       this.$confirm("是否要删除该网格员?", { | ||||
|         type: "error", | ||||
|       }) | ||||
|       .then(() => { | ||||
|         this.instance | ||||
|         .post("/app/appgirdmemberinfo/delete", null, { | ||||
|           params: {ids}, | ||||
|         }) | ||||
|         .then((res) => { | ||||
|           if (res?.code == 0) { | ||||
|             this.$message.success("删除成功!"); | ||||
|             this.getList(); | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|       .catch(() => { | ||||
|       }); | ||||
|     }, | ||||
|     add(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Add', | ||||
|         params: { | ||||
|           id: id || '' | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     toFamily(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Family', | ||||
|         params: { | ||||
|           id | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handleSelectionChange(val) { | ||||
|       this.ids = []; | ||||
|       val.map((e) => { | ||||
|         this.ids.push(e.id); | ||||
|       }); | ||||
|     }, | ||||
|     resetSearch() { | ||||
|       Object.keys(this.searchObj).map((e) => { | ||||
|         this.searchObj[e] = ""; | ||||
|       }); | ||||
|       this.getList(); | ||||
|     }, | ||||
|     setTag(row) { | ||||
|       this.form = this.$copy(row) | ||||
|       this.dialog = true | ||||
|     }, | ||||
|     submit() { | ||||
|       this.$refs.DialogForm.validate(v => { | ||||
|         if (v) { | ||||
|           let loading = this.$loading({text: "提交中...", background: 'rgba(0,0,0,.8)'}) | ||||
|           let {id, label} = this.form | ||||
|           this.instance.post("/app/appgirdmemberinfo/updateGirdMemberLabelById", null, { | ||||
|             params: {id, label} | ||||
|           }).then(res => { | ||||
|             loading.close() | ||||
|             if (res?.code == 0) { | ||||
|               this.$message.success("提交成功!") | ||||
|               this.dialog = false | ||||
|               this.getList() | ||||
|             } | ||||
|           }).catch(() => loading.close()) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user