yjxp-web/src/views/threePreventionResponsiblePerson/index.vue

<template>
  <div class="page-head">
    <van-search
      v-model="keywords"
      placeholder="请输入搜索关键词"
      :left-icon="searchImg"
      :right-icon="closeImg"
      @search="onSearch"
    />
    <div class="select-box">
      <div
        style="padding-top: 10px; width: 50%; margin-left: 20px"
        @click="showStructure"

      >
        {{adressContent}}
      </div>
      <div>
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          placeholder="选择类型"
          @click="showPicker = true"
        />
        <van-popup
          v-model:show="showPicker"
          destroy-on-close
          round
          position="bottom"
        >
          <van-picker
            :columns="responsibility_type"
            title="类型选择"
            :columns-field-names="customFieldName"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
    </div>
  </div>
  <div
    style="
      margin-top: 90px;
      height: calc(100vh - 55px - 90px);
      overflow: scroll;
    "
  >
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="item in persons" :key="item.id">
        <div class="person-box" @click="showPersonalInformation(item)">
          <div class="circle">
            <img :src="item.profile_picture" alt="" />
          </div>
          <div class="information-card">
            <div class="one">
              <div>{{ item.name }}</div>
              <div class="isOnline" :class="{ notOnline: item.state }">
                {{ item.state === false ? "离线" : "在线" }}
              </div>
            </div>
            <div class="text-ellipsis">{{ item.position }}</div>
            <div style="margin-top: 5px">
              <span v-for="i in item.type" :key="i" class="type-name">
                {{ i }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>

  <div>
    <van-overlay :show="isShowStructure">
      <div class="block1">
        <van-search
          v-model="keywords"
          placeholder="请输入关键字"
          :left-icon="searchImg"
          :right-icon="closeImg"
          :clearable="false"
          @search="onSearchKeyword"
          @click-right-icon.stop="onSearchCancel"
        />
        <div class="head-card">
          <div class="structure-head">
            <div class="blue-rectangle" />
            <div style="margin-top: 5px; margin-left: 5px">组织架构</div>
          </div>
          <div style="color: #b7c0c4; padding: 8px 13px; font-size: 13px">
            [总人数]
          </div>
        </div>
        <hr />
        <div style="margin-top: 1px">
          <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="treeData"
            show-checkbox
            :props="defaultProps"
            :filter-node-method="filterNode"
            node-key="uuid"
            default-expand-all
            @check-change="handleCheckChange"
            style="
              height: calc(-145px - 70px + 100vh);
              overflow: scroll;
              margin-left: 10px;
            "
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>
                  <a @click="append(data)" style="color: #d6d6d7"> [{{ data.personSum }}] </a>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="footer">
          <div class="cancel-btn" @click="handleCancel">取消</div>
          <div class="confirm-btn" @click="handleConfirm">确认</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import profile from "@/assets/images/tempImage/用户.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 { ElTree } from "element-plus";
import {showConfirmDialog, showFailToast, showToast} from "vant";
import {create_by_dept_ids} from "@/api/onlineRollCall";

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_content = selectedValues.toString(); //将用户选择的值（selectedValues）保存到 requestParameters 对象的 type_content 属性中
  fieldValue.value = selectedOptions[0].dictLabel; //将用户选择的第一个选项的 dictLabel 属性值保存到 fieldValue 中
  onLoad();
};
const loading = ref(false);
const finished = ref(false);
const customFieldName = {
  text: "dictLabel",
  value: "dictValue"
};
const requestParameters = ref({
  name: "",
  type: [],
  type_content: "",
  page: 1,
  page_size: 10,
  keyword: keywords
});
const persons = ref([]);
const onLoad = () => {
  getEventList(requestParameters.value)
    .then(res => {
      res.data = [
        {
          id: 1,
          name: "张嘉佳",
          unit: "茂名市委员会",
          position: "茂名市市委常委 市人民政府副市长 党组副书记",
          type: ["三防指挥部", "应急部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 2,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委 茂名市委常委",
          type: ["党委政府"],
          profile_picture: profile,
          state: false
        },
        {
          id: 3,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 4,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 5,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 6,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门", "成员单位"],
          profile_picture: profile,
          state: true
        },
        {
          id: 7,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 8,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 9,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        },
        {
          id: 10,
          name: "王长青",
          unit: "茂名市委员会",
          position: "茂名市委员会 茂名市委常委",
          type: ["重点部门"],
          profile_picture: profile,
          state: true
        }
      ];
      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;
    })
    .catch(error => {
      // 处理错误（例如，显示错误消息或重置加载状态）
      console.error("加载事件列表时出错:", error);
      loading.value = false;
    });
};
onMounted(() => {
  getDicts("responsibility_type").then(res => {
    res.data.unshift({ dictLabel: "所有类型", dictValue: "" });
    responsibility_type.value = 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 treeData = ref([
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 1,
    deptType: true,
    label: "茂南区",
    personSum: 34643,
    children: [
      {
        id: 2,
        deptType: true,
        label: "茂南区政府",
        personSum: 343,
        children: [
          {
            id: 3,
            deptType: true,
            label: "茂南区应急管理局",
            personSum: 5687,
            children: [
              {
                id: 3,
                deptType: true,
                label: "茂南区应急管理局",
                personSum: 5687
              }
            ]
          }
        ]
      }
    ]
  }
]);
let treeRef = ref();
let checkData = ref([]);
const isShowStructure = ref(false);
const showStructure = () => {
  isShowStructure.value = true;
};
const onSearchKeyword = () => {};
const onSearchCancel = () => {};
const handleCancel = () => {
  isShowStructure.value = false;
};
const adressContent = ref("");
const handleConfirm = () => {
  if (checkData.value.length > 0) {
    showConfirmDialog({
      title: '提示',
      message: '确认选择？'
    })
        .then(() => {
          // create_by_dept_ids({depts: checkData.value, remark:''}).then((res) => {
          //   showToast({type: 'success', message: res.msg, onClose:()=>{
          //       router.push({ name : 'RollCallDetails', query: { id: res.data }})
          //     }});
          // })
          adressContent.value = checkData.value;
          isShowStructure.value = false;
    });
    // router.push({ name : 'RollCallDetails', query: { id: 'test' }})
  } else {
    showFailToast('请先选择点名单位')
  }
}

let defaultProps = reactive({
  children: "children",
  label: "label",
  personSum: "personSum"
});
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
watch(keyword, (val) => {
  treeRef.value!.filter(val);
});
const handleCheckChange = () => {
  const data = [];
  const treeData = treeRef.value.getCheckedNodes(false, false);
  treeData.forEach((item) => {
    data.push(item.id);
  });
  checkData.value = data;
};
</script>

<style scoped lang="scss">
.select-box {
  display: flex;
  flex-direction: row;
  margin-top: -2px;
  background: #fff;
}
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 15px;
  margin: 15px 5px 15px;
}
.circle2 {
  width: 100px;
  height: 100px;
  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;
}
.information-card {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.type-name {
  background-color: #eff2fc;
  padding: 3px 15px;
  font-size: 13px;
  color: #8d9bc8;
  margin-left: 5px;
  &:nth-child(1) {
    margin-left: 0;
  }
}
.text-ellipsis {
  margin-top: 5px;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.one {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  align-items: center;
}
.isOnline {
  font-size: 12px;
  background-color: #b3b3b3;
  padding: 0px 10px;
  height: 15px;
}
.notOnline {
  background-color: limegreen;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.block1 {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.information-box {
  display: flex;
  flex-direction: row;
  padding: 10px 10px;
}
.unit-box {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  height: 35px;
  width: 100%;
  margin-top: 5px;
}
.unit1-box {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  height: 35px;
  width: 100%;
  margin-top: 1px;
}
.info-content {
  margin: 5px 20px;
}
.text {
  color: grey;
  width: 84.04px;
  padding: 5px 10px;
  text-align-last: justify;
}
.page-head {
  position: fixed;
  top: 0;
  width: 100%;
}
.structure-head {
  display: flex;
  background-color: #ffffff;
  padding-left: 10px;
  padding-bottom: 5px;
  align-items: center;
}
.blue-rectangle {
  width: 6px;
  height: 17px;
  background-image: linear-gradient(180deg, #00fce7 0%, #2c81ff 100%);
  border-radius: 0 3px 0 0;
}
.head-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: white;
}
.footer {
  position: absolute;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  .cancel-btn {
    width: 90px;
    height: 40px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    font-size: 16px;
    color: #b3b3b3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .confirm-btn {
    width: 90px;
    height: 40px;
    background: #2c81ff;
    border-radius: 2px;
    font-size: 16px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 80px;
  }
}
.custom-tree-node {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-right: 12px;
}
</style>