|
|
@@ -0,0 +1,336 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div v-show="!isShowStructure" class="page-head">
|
|
|
+ <van-search
|
|
|
+ v-model="keywords"
|
|
|
+ placeholder="请输入搜索关键词"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ :right-icon="closeImg"
|
|
|
+ @search="onSearch"
|
|
|
+ />
|
|
|
+ <div class="select-box">
|
|
|
+ <div class="adress-box" @click="showStructure">
|
|
|
+ <div class="blue-rectangle" />
|
|
|
+ <div v-if="!!requestParameters.checkedId" class="block1">
|
|
|
+ <div>{{ upOneLevel }}</div>
|
|
|
+ <div style="margin: 0 5px">{{ ">" }}</div>
|
|
|
+ <div style="color: #1d92ff">{{ adressContent }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="block1" style="height: 27px">
|
|
|
+ <div>广东省</div>
|
|
|
+ <div style="margin: 0 5px">{{ ">" }}</div>
|
|
|
+ <div style="color: #1d92ff">茂名市</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div />
|
|
|
+ </div>
|
|
|
+ <hr style="color: #f9f9f9" />
|
|
|
+ </div>
|
|
|
+ <div v-show="!isShowStructure" class="scroll-list">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <div v-for="(item, index) in list" :key="item.id">
|
|
|
+ <div class="person-box2" @click="personInform(item)">
|
|
|
+ <div class="circle">
|
|
|
+ <img :src="onlineUser" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="information-card2">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div style="font-weight: bold">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <div style="font-size: 13px; margin-top: 5px; color: #979797">
|
|
|
+ {{ item.unit }} {{ item.position }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="link-top" />
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ <organizationalStructure
|
|
|
+ v-if="isShowStructure"
|
|
|
+ v-model:isShowStructure="isShowStructure"
|
|
|
+ @confirm="handleSelect"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import offlineUser from "@/assets/images/threePreventionResponsiblePerson/offlineUsers.png";
|
|
|
+import onlineUser from "@/assets/images/threePreventionResponsiblePerson/onlineUsers.png";
|
|
|
+import { getDicts } from "@/api/system/dict/data";
|
|
|
+import { getEventList } from "@/api/event";
|
|
|
+import searchImg from "@/assets/images/search.png";
|
|
|
+import closeImg from "@/assets/images/close.png";
|
|
|
+import OrganizationalStructure from "@/views/threePreventionResponsiblePerson/organizationalStructure.vue";
|
|
|
+import { getPersonalData, getPersonalType } from "@/api/persons";
|
|
|
+
|
|
|
+const list = ref([
|
|
|
+ {
|
|
|
+ id: "1",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "2",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "3",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "4",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "5",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "6",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "7",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "8",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "9",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "10",
|
|
|
+ name: "谢和平",
|
|
|
+ unit: "茂名市应急管理局",
|
|
|
+ position: "一级科员",
|
|
|
+ title: "教授",
|
|
|
+ expertType: "其它突发事件"
|
|
|
+ }
|
|
|
+]);
|
|
|
+const router = useRouter();
|
|
|
+const keywords = ref("");
|
|
|
+let responsibility_type = ref([]);
|
|
|
+const fieldValue = ref("三防指挥部");
|
|
|
+const showPicker = ref(false);
|
|
|
+const onConfirm = ({ selectedValues, selectedOptions }) => {
|
|
|
+ showPicker.value = false; //用于控制 van-picker 组件的显示状态,将其设置为 false 表示隐藏选择器。
|
|
|
+ requestParameters.value.type_parent_id = selectedValues.toString(); //将用户选择的值（selectedValues）保存到 requestParameters 对象的 type_content 属性中
|
|
|
+ fieldValue.value = selectedOptions[0].dictLabel; //将用户选择的第一个选项的 dictLabel 属性值保存到 fieldValue 中
|
|
|
+ requestParameters.value.page = 1;
|
|
|
+ onLoad();
|
|
|
+};
|
|
|
+const loading = ref(false);
|
|
|
+const finished = ref(false);
|
|
|
+const customFieldName = {
|
|
|
+ text: "dictLabel",
|
|
|
+ value: "dictValue"
|
|
|
+};
|
|
|
+const requestParameters = ref({
|
|
|
+ name: "",
|
|
|
+ type: [],
|
|
|
+ type_parent_id: "",
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ Name: keywords,
|
|
|
+ checkedId: ""
|
|
|
+});
|
|
|
+const personInform = item => {
|
|
|
+ router.push({ name: "CadreInformation", query: { id: item.id } });
|
|
|
+};
|
|
|
+const persons = ref([]);
|
|
|
+const onLoad = () => {
|
|
|
+ getPersonalData(requestParameters.value).then(res => {
|
|
|
+ var item = res.data || [];
|
|
|
+ // 重置 persons 数组（如果是第一页）
|
|
|
+ if (requestParameters.value.page == 1) {
|
|
|
+ persons.value = [];
|
|
|
+ }
|
|
|
+ // 将新数据添加到 persons 数组中
|
|
|
+ item.forEach(temp => {
|
|
|
+ persons.value.push(temp);
|
|
|
+ });
|
|
|
+ // 检查是否加载了所有数据
|
|
|
+ if (persons.value.length >= res.total) {
|
|
|
+ finished.value = true;
|
|
|
+ } else {
|
|
|
+ finished.value = false;
|
|
|
+ }
|
|
|
+ requestParameters.value.page++;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ getDicts("responsibility_type").then(res => {
|
|
|
+ res.data.unshift({ dictLabel: "所有类型", dictValue: "" });
|
|
|
+ responsibility_type.value = res.data;
|
|
|
+ });
|
|
|
+ getPersonalType(requestParameters.value).then(res => {
|
|
|
+ responsibility_type = res.data || [];
|
|
|
+ });
|
|
|
+});
|
|
|
+const onSearch = keywords => {
|
|
|
+ requestParameters.value.page = 1;
|
|
|
+ onLoad();
|
|
|
+};
|
|
|
+const showPersonalInformation = item => {
|
|
|
+ router.push({ name: "PersonInformation", query: { id: item.id } });
|
|
|
+};
|
|
|
+let keyword = ref("");
|
|
|
+let treeRef = ref();
|
|
|
+let checkData = ref([]);
|
|
|
+const isShowStructure = ref(false);
|
|
|
+const showStructure = () => {
|
|
|
+ isShowStructure.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const adressContent = ref();
|
|
|
+const upOneLevel = ref();
|
|
|
+
|
|
|
+const filterNode = (value, data) => {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+};
|
|
|
+let selectedTreeId = ref([]);
|
|
|
+const handleSelect = data => {
|
|
|
+ adressContent.value = data.label;
|
|
|
+ upOneLevel.value = data.value;
|
|
|
+ requestParameters.value.checkedId = data.id;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.container {
|
|
|
+ height: calc(100vh - 55px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.select-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: -2px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.circle {
|
|
|
+ width: 55px;
|
|
|
+ height: 55px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #eaeaea;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: black;
|
|
|
+ font-size: 15px;
|
|
|
+ margin: 15px 5px 15px;
|
|
|
+}
|
|
|
+.person-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.person-box2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding-left: 8px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.information-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 250px;
|
|
|
+}
|
|
|
+.block {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+.page-head {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.blue-rectangle {
|
|
|
+ width: 6px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: linear-gradient(180deg, #00fce7 0%, #2c81ff 100%);
|
|
|
+ border-radius: 0 3px 0 0;
|
|
|
+ margin-left: -10px;
|
|
|
+}
|
|
|
+
|
|
|
+.adress-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding-top: 10px;
|
|
|
+ width: 50%;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.link-top {
|
|
|
+ height: 0.5px;
|
|
|
+ border-top: solid #f2f2f2 1px;
|
|
|
+}
|
|
|
+.block1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.scroll-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow: scroll;
|
|
|
+}
|
|
|
+.information-card2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 230px;
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+</style>
|
