Browse Source

可视化话题详情组件3

shibei_master
dai 4 years ago
parent
commit
147b4e120e
  1. 503
      src/views/modules/visual/basicinfo/cpts/demand-info.vue
  2. 8
      src/views/modules/visual/basicinfo/people.vue
  3. 2
      src/views/modules/visual/measure/volunteer.vue

503
src/views/modules/visual/basicinfo/cpts/demand-info.vue

@ -1,503 +0,0 @@
<template>
<div class="m-pop">
<div class="wrap">
<cpt-card>
<div class="title">
<img src="@/assets/img/shuju/title-tip.png" />
<span>更多信息</span>
</div>
<div class="btn-close" @click="handleClose">
<img src="@/assets/img/shuju/people/close.png" />
</div>
<div
:key="'fieldSubList' + index"
v-for="(fieldSubList, index) in fieldList"
>
<div class="list">
<div class="item" v-if="index == 0">
<span class="item-field">所属网格</span>
<span>{{ gridName }}</span>
</div>
<div class="item" v-if="index == 0">
<span class="item-field">所属小区</span>
<span>{{ xiaoquName }}</span>
</div>
<div class="item" v-if="index == 0">
<span class="item-field">所属楼宇</span>
<span>{{ louName }}-{{ danyuanName }}</span>
</div>
<div class="item" v-if="index == 0">
<span class="item-field">所属家庭</span>
<span>{{ homeName }}</span>
</div>
<div class="item" :key="field.itemId" v-for="field in fieldSubList">
<span class="item-field">{{ field.label }}</span>
<span
v-if="
field.itemType == 'select' ||
field.itemType == 'radio' ||
field.itemType == 'checkbox' ||
field.itemType == 'cascader'
"
>{{
info[field.columnName] == null
? "--"
: getOptionLabel(
field.options,
info[field.columnName],
field.itemType
)
}}</span
>
<span v-else>{{
info[field.columnName] == null ? "--" : info[field.columnName]
}}</span>
</div>
</div>
<div class="line"></div>
</div>
<div class="tabs">
<div
class="tab-btn"
@click="subStartGroupIndex"
v-if="groupList.length > 9"
>
<img src="@/assets/img/shuju/people/arrow-double-left.png" />
</div>
<div
v-show="index >= startGroupIndex && index < startGroupIndex + 9"
class="tab"
:class="groupIndex % groupList.length == index ? 'z-on' : ''"
:key="'tab' + index"
@click="groupIndex = index"
v-for="(item, index) in groupList"
>
{{ item.label }}
</div>
<div
class="tab-btn"
@click="addStartGroupIndex"
v-if="groupList.length > 9"
>
<img src="@/assets/img/shuju/people/arrow-double-right.png" />
</div>
</div>
<div
:key="'group' + index"
v-show="groupIndex % groupList.length == index"
v-for="(group, index) in groupList"
>
<div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
<div
class="list"
:key="'ic_resi_demand' + infoIndex"
v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
>
<div
class="item"
:key="field.itemId"
v-for="field in group.itemList"
>
<span class="item-field">{{ field.label }}</span>
<span
v-if="
field.itemType == 'select' ||
field.itemType == 'radio' ||
field.itemType == 'checkbox' ||
field.itemType == 'cascader'
"
>{{
infoItem[field.columnName] == null
? "--"
: getOptionLabel(
field.options,
infoItem[field.columnName],
field.itemType
)
}}</span
>
<span v-else>{{
infoItem[field.columnName] == null
? "--"
: infoItem[field.columnName]
}}</span>
</div>
</div>
</div>
<div class="list" v-else>
<div
class="item"
:key="field.itemId"
v-for="field in group.itemList"
>
<span class="item-field">{{ field.label }}</span>
<span
v-if="
field.itemType == 'select' ||
field.itemType == 'radio' ||
field.itemType == 'checkbox' ||
field.itemType == 'cascader'
"
>{{
!allInfo[group.tableName] ||
allInfo[group.tableName][0][field.columnName] == null
? "--"
: getOptionLabel(
field.options,
allInfo[group.tableName][0][field.columnName],
field.itemType
)
}}</span
>
<span v-else>{{
!allInfo[group.tableName] ||
allInfo[group.tableName][0][field.columnName] == null
? "--"
: allInfo[group.tableName][0][field.columnName]
}}</span>
</div>
</div>
</div>
</cpt-card>
</div>
</div>
</template>
<script>
import cptCard from "@/views/modules/visual/cpts/card";
import { requestPost } from "@/js/dai/request";
export default {
name: "demandInfo",
props: {
userId: {
type: String,
default: "",
},
gridName: {
type: String,
default: "",
},
},
components: {
cptCard,
},
data() {
return {
fieldList: [],
groupList: [],
groupIndex: 0,
startGroupIndex: 0,
info: {},
allInfo: {},
xiaoquList: [],
louList: [],
danyuanList: [],
homeList: [],
};
},
computed: {
xiaoquName() {
const {
xiaoquList,
info: { VILLAGE_ID },
} = this;
if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
if (item) {
return item.label;
}
}
return "";
},
louName() {
const {
louList,
info: { BUILD_ID },
} = this;
if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
let item = louList.find((item) => item.value == BUILD_ID);
if (item) {
return item.label;
}
}
return "";
},
danyuanName() {
const {
danyuanList,
info: { UNIT_ID },
} = this;
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
let item = danyuanList.find((item) => item.value == UNIT_ID);
if (item) {
return item.label;
}
}
return "";
},
danyuanName() {
const {
danyuanList,
info: { UNIT_ID },
} = this;
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
let item = danyuanList.find((item) => item.value == UNIT_ID);
if (item) {
return item.label;
}
}
return "";
},
homeName() {
const {
homeList,
info: { HOME_ID },
} = this;
if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
let item = homeList.find((item) => item.value == HOME_ID);
if (item) {
return item.label;
}
}
return "";
},
},
watch: {
userId() {
this.getApiData();
},
},
mounted() {
this.getApiData();
},
methods: {
addStartGroupIndex() {
const { startGroupIndex, groupList } = this;
if (startGroupIndex < groupList.length - 9) {
this.startGroupIndex = startGroupIndex + 1;
} else {
this.startGroupIndex = groupList.length - 9;
}
},
subStartGroupIndex() {
const { startGroupIndex, groupList } = this;
if (startGroupIndex > 0) {
this.startGroupIndex = startGroupIndex - 1;
} else {
this.startGroupIndex = 0;
}
},
handleClose() {
this.$emit("close");
},
async getApiData() {
await this.getField();
await this.getInfo();
this.getXiaoquList();
this.getLouList();
this.getDanyuanList();
this.getHomeList();
},
getOptionLabel(options, value, type = "") {
if (Array.isArray(options)) {
let valueArr = value.split(",");
if (type == "cascader") {
if (valueArr.length > 0) {
let level1 = options.find((item) => item.value == valueArr[0]);
if (level1) {
if (valueArr.length > 1 && level1.children) {
let level2 = level1.children.find(
(item) => item.value == valueArr[1]
);
if (level2) {
return level1.label + "-" + level2.label;
}
}
return level1.label;
}
}
} else {
return valueArr
.map((val) => {
let item = options.find((item) => item.value == val);
if (item && item.label) {
return item.label;
}
return "--";
})
.join("、");
}
}
return "--";
},
//
async getField() {
const url = "/oper/customize/icform/getcustomerform";
const { data, code, msg } = await requestPost(url, {
dynamic: true,
formCode: "resi_base_info",
});
if (code === 0) {
this.groupList = data.groupList;
this.fieldList = (function (arr) {
let col = [];
let ele = [];
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
if (item.itemType == "divider" || i == arr.length - 1) {
col.push([...ele]);
ele = [];
} else {
ele.push(item);
}
}
return col;
})(data.itemList);
this.fieldList.forEach((subList, index) => {
subList.forEach(async (item, subIndex) => {
if (item.optionSourceType == "remote" && item.optionSourceValue) {
this.fieldList[index][subIndex].options = await this.getOptions(
item.optionSourceValue
);
}
});
});
} else {
this.$message.error(msg);
}
},
//
async getInfo() {
const url = "/epmetuser/icresiuser/detail";
const { data, code, msg } = await requestPost(url, {
icResiUserId: this.userId,
formCode: "resi_base_info",
});
if (code === 0) {
this.info = data.ic_resi_user[0];
this.allInfo = data;
this.fieldList.forEach((subList, index) => {
subList.forEach((item, subIndex) => {
if (
item.itemType == "radio" &&
item.childGroup &&
this.allInfo[item.tableName] &&
this.allInfo[item.tableName][0][item.columnName] == "1"
) {
this.groupList = [...this.groupList, item.childGroup];
}
});
});
console.log("1111111111111111111111111", this.groupList);
this.groupList.forEach((subList, index) => {
subList.itemList.forEach(async (item, subIndex) => {
if (item.optionSourceType == "remote" && item.optionSourceValue) {
this.groupList[index].itemList[subIndex].options =
await this.getOptions(item.optionSourceValue);
}
});
});
} else {
this.$message.error(msg);
}
},
//
async getOptions(url) {
if (!url) return [];
const { data, code, msg } = await requestPost(url, {});
if (code === 0) {
return data;
} else {
return [];
}
},
async getXiaoquList() {
const url = "/gov/org/icneighborhood/neighborhoodoption";
const { data, code, msg } = await requestPost(url, {
agencyId: this.info.AGENCY_ID,
gridId: this.info.GRID_ID,
});
if (code === 0) {
this.xiaoquList = data;
} else {
this.$message.error(msg);
}
},
async getLouList() {
const url = "/gov/org/icbuilding/buildingoption";
const { data, code, msg } = await requestPost(url, {
neighborHoodId: this.info.VILLAGE_ID,
});
if (code === 0) {
this.louList = data;
} else {
this.$message.error(msg);
}
},
async getDanyuanList() {
const url = "/gov/org/icbuildingunit/unitoption";
const { data, code, msg } = await requestPost(url, {
buildingId: this.info.BUILD_ID,
});
if (code === 0) {
this.danyuanList = data;
} else {
this.$message.error(msg);
}
},
async getHomeList() {
const url = "/gov/org/ichouse/houseoption";
const { data, code, msg } = await requestPost(url, {
unitId: this.info.UNIT_ID,
});
if (code === 0) {
this.homeList = data;
} else {
this.$message.error(msg);
}
},
},
};
</script>
<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>

8
src/views/modules/visual/basicinfo/people.vue

@ -440,10 +440,10 @@
</div> </div>
<demand-info <demand-info
v-show="showedDemandInfo" v-if="demand.list.length > 0 && showedDemandInfo"
v-if="userId"
:userId="userId" :userId="userId"
:gridName="info.gridName" queryOrigin="personal-data"
:demandId="demand.srcList[demand.currentIndex].demandRecId"
@close="showedDemandInfo = false" @close="showedDemandInfo = false"
/> />
@ -470,7 +470,7 @@ import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card"; import cptCard from "@/views/modules/visual/cpts/card";
import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more"; import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
import demandInfo from "@/views/modules/visual/basicinfo/cpts/demand-info"; import demandInfo from "@/views/modules/visual/measure/dialogInfo";
import incidentInfo from "@/views/modules/visual/basicinfo/cpts/incident-info"; import incidentInfo from "@/views/modules/visual/basicinfo/cpts/incident-info";
import topicInfo from "@/views/modules/visual/basicinfo/cpts/topic-info"; import topicInfo from "@/views/modules/visual/basicinfo/cpts/topic-info";
import cptTb from "@/views/modules/visual/cpts/tb"; import cptTb from "@/views/modules/visual/cpts/tb";

2
src/views/modules/visual/measure/volunteer.vue

@ -568,7 +568,7 @@ export default {
.map-tips { .map-tips {
width: 700px; width: 700px;
display: flex; display: flex;
justify-content: start; // justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 10px; padding-top: 10px;
padding-bottom: 20px; padding-bottom: 20px;

Loading…
Cancel
Save