</div> <div class="contents"> <el-row :gutter="30"> <el-col :span="5"> <div class="tree"> <el-tree :data="data" :default-expand-all="true" :props="defaultProps" highlight-current icon-class="el-icon-arrow-right" node-key="value" @node-click="handleNodeClick" /> </div> </el-col> <el-col :span="19"> <div class="table"> <el-table v-loading="loading" :data="list" element-loading-background="rgba(0, 0, 0, 0.3)" max-height="600px"> <el-table-column label="资源类型" min-width="120" prop="personnelType"> <template slot-scope="{row}"> {{ (row.personnelType ? data[0].children.filter(item => item.value === row.personnelType)[0].label : '') || peopleTypeLabel }} </template> </el-table-column> <el-table-column v-if="peopleType !== '4' && peopleType !== '5'" label="所属组织" min-width="180" prop="orgName"/> <el-table-column v-if="peopleType !== '4' && peopleType !== '5'" label="姓名/名称" min-width="120" prop="name"/> <el-table-column v-if="peopleType !== '4' && peopleType !== '5'" label="联系电话" min-width="120" prop="mobile"> <template slot-scope="scope"> {{ $sensitive(scope.row.mobile, 3, 7) }} </template> </el-table-column>   <el-table-column v-if="peopleType === '4'" label="所属组织" min-width="180" prop="agencyName"/> <el-table-column v-if="peopleType === '4'" label="负责人" min-width="120" prop="principalName"/> <el-table-column v-if="peopleType === '4'" label="联系电话" min-width="120" prop="principalPhone"> <template slot-scope="scope"> {{ $sensitive(scope.row.principalPhone, 3, 7) }} </template> </el-table-column> <el-table-column v-if="peopleType === '5'" label="所属组织" min-width="180" prop="agencyName"/> <el-table-column v-if="peopleType === '5'" label="联系人" min-width="120" prop="contact"/> <el-table-column v-if="peopleType === '5'" label="联系电话" min-width="120" prop="contactMobile"> <template slot-scope="scope"> {{ $sensitive(scope.row.contactMobile, 3, 7) }} </template> </el-table-column> <el-table-column label="操作" prop="op" width="250"> <template slot-scope="scope"> <CallPhone :mobile="scope.row.mobile" text="拨打电话"/> <span class="handle" @click="handleHandle">处理</span> <span class="view" @click="handleViews(scope.row)">查看</span> </template> </el-table-column> </el-table> </div> <Pagination v-if="peopleType === '5' || peopleType === '4'" v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" @pagination="pageChange" /> </el-col> </el-row> </div> </div> </el-dialog> <ResourceInfo ref="ResourceInfo" :currentLevelData="currentLevelData" @ok="handleHandle"/> </div> </template> <script> import Title from "@/views/dataBoard/satisfactionEval/components/Title"; import CallPhone from "@/views/dataBoard/cpts/CallPhone"; import ResourceInfo from "@/views/dataBoard/overview/components/ResourceInfo.vue"; import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; export default { name: "ResourceScheduling", components: {Title, CallPhone, ResourceInfo, Pagination}, props: { currentLevelData: { type: Object, default: () => { }, } }, data() { return { loading: false, total: 0, dialogVisible: false, list: [], queryParams: { pageNo: 1, pageSize: 20 }, peopleType: "staffGrid", data: [ { label: '人资源', children: [{ label: "网格员", value: "staffGrid", }, { label: "公益岗", value: "publicWelfareNum", }, { label: "志愿者", value: "volunteer", }, { label: "社区自组织", value: "4", }, { label: "联建单位", value: "5", }, { label: "15分钟生活圈商家", value: "6", },] }, { label: '物资源', children: [] }, { label: '场所资源', children: [] }], defaultProps: { children: 'children', label: 'label' }, peopleTypeLabel: '' }; }, methods: { handleClose(done) { this.dialogVisible = false; }, open(id) { this.dialogVisible = true; this.getList(); }, getList() { this.loading = true; console.log(this.currentLevelData, 'this.currentLevelData') const {level,orgId} = this.$store.state.chooseArea.chooseName this.$http.get("/actual/base/streetOverview/queryPersonnelGroup" + "?level=" + (this.currentLevelData.orgLevel || level) + "&orgId=" + (this.currentLevelData.orgId || orgId) + "&personnelType=" + this.peopleType) .then(({data: {data}}) => { this.loading = false; this.list = data.personnelInfoVOList; }); }, getZzzList() { this.loading = true; this.$http.post('/actual/base/iccommunityselforganization/communityselforganizationlist', { agencyId: this.currentLevelData.orgId, ...this.queryParams }).then(res => { this.loading = false; this.list = res.data.data.list; this.total = res.data.data.total; }) }, getLjdwList() { this.loading = true; this.$http.post('/actual/base/icpartyunit/list', { agencyId: this.currentLevelData.orgId, ...this.queryParams }).then(res => { this.loading = false; this.list = res.data.data.list; this.total = res.data.data.total; }) }, pageChange() { this.list = [] if (this.peopleType === '4') { this.getZzzList(); } else if (this.peopleType === '5') { this.getLjdwList(); } else { this.getList() } }, handleViews(data) { // 1志愿者、2联建单位、3社区自组织、4网格员、5公益岗 let type = this.peopleType === 'volunteer' ? 1 : this.peopleType === '5' ? 2 : this.peopleType === '4' ? 3 : this.peopleType === 'staffGrid' ? 4 : this.peopleType === 'publicWelfareNum' ? 5 : '' this.$refs.ResourceInfo.open(type === 3 ? data.orgId : data.id, type, data) }, /* handleViews() { this.$refs.ResourceInfo.open() },*/ handleNodeClick(data) { console.log(data.value) if (data.value) { this.list = [] this.peopleTypeLabel = data.label this.peopleType = data.value; console.log(data); if (this.peopleType === '4') { this.getZzzList(); } else if (this.peopleType === '5') { this.getLjdwList(); } else { this.getList() } } }, handleHandle(data) { this.handleClose() this.$emit('handle', data); } }, }; </script> <style lang="scss" scoped> @import "@/assets/scss/dataBoard/dialog.scss"; @import "@/assets/scss/dataBoard/tree.scss"; @import "@/assets/scss/dataBoard/table2.scss"; .handle { font-size: 14px; margin-left: 10px; cursor: pointer; color: #9A69EC; } .view { font-size: 14px; margin-left: 10px; cursor: pointer; color: #007FF1; } </style>