组织架构 树形数据加载、责任类别选择

src/components/RegionSelect/index.vue

@@ -29,11 +29,6 @@ const props = defineProps({
 });
 
 const emits = defineEmits(['update:modelValue','confirm']);
-const customFieldName = {
-  text: 'label',
-  value: 'value',
-  children: 'cities',
-};
 let show = computed({
   get() {
     return props.modelValue;

src/views/threePreventionResponsiblePerson/editPersonInformation.vue

@@ -94,14 +94,7 @@
                   :rules="rules.responsibilityType"
                   @click="showPicker2 = true"
               />
-              <van-popup v-model:show="showPicker2" destroy-on-close round position="bottom">
-                <van-picker
-                    :model-value="pickerValue2"
-                    :columns="region"
-                    @cancel="showPicker2 = false"
-                    @confirm="onConfirm2"
-                />
-              </van-popup>
+              <responsibility-type v-model="showPicker2" @confirm="onConfirm2" />
             </div>
           </div>
         </div>
@@ -119,6 +112,7 @@ import selectIcon from "@/assets/images/selectIcon.png";
 import {showSuccessToast} from "vant";
 import {useRouter} from "vue-router";
 import {Numeric} from "vant/es/utils";
+import ResponsibilityType from "@/views/threePreventionResponsiblePerson/responsibilityType.vue";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { region } = toRefs<any>(proxy?.useDict('region'));
@@ -182,8 +176,8 @@ const onSubmit = () => {
 
 <style lang="scss" scoped>
 .common-form-container {
-  height: 100vh;
-  padding: 0 0 89px 0;
+  height: calc(100vh - 89px);
+  padding: 0;
   .item {
     display: flex;
     align-items: center;

src/views/threePreventionResponsiblePerson/organizationalStructure.vue

@@ -23,7 +23,6 @@
       <div style="margin-top: 1px">
         <el-tree
           :props="defaultProps"
-          default-expand-all
           style="
             height: calc(-145px - 10px + 100vh);
             overflow: scroll;
@@ -100,13 +99,13 @@ let defaultProps = reactive({
   personSum: "personSum",
   isLeaf: "isShowSelect"
 });
-const getList = async (node: Node, resolve: (data: Tree[]) => void) => {
-  const id = node.level === 0 ? "1" : node.id;
-   let res = await getTree(id)
-  resolve(res.data);
+const getList =  (node: Node, resolve: (data: Tree[]) => void) => {
+  const id = node.level === 0 ? "1" : node.data.id;
+  fetchData(resolve, id)
 };
-const fetchData = async () => {
-
+const fetchData = async (resolve, id) => {
+  let res =  await getTree(id)
+  return resolve(res.data);
 }
 const handleCheckChange = data => {
   emits("confirm", {

src/views/threePreventionResponsiblePerson/responsibilityType.vue

@@ -0,0 +1,550 @@
+<template>
+  <van-popup v-model:show="show" destroy-on-close position="bottom" style="height:100%;border-radius: 0;background-color: #f4f8fa;">
+    <div class="popup-header">
+      <div class="btn-text1" @click="onCancel">取消</div>
+      <div class="btn-text2" @click="onConfirm">确定</div>
+    </div>
+    <div class="title-box">请选择您的应急（三防）责任类别</div>
+    <div class="select-container">
+      <div v-for="(item, index) in selectOptions" :key="index" class="select-box">
+        <div class="item" @click="item.open = !item.open">
+          <van-checkbox v-model="item.checked" :indeterminate="item.isIndeterminate" disabled class="custom-checkbox">
+            <div class="label-box">
+              <i :class="'icon ' + item.icon" />
+              <span>{{item.label}}</span>
+            </div>
+          </van-checkbox>
+          <i :class="item.open ? 'icon-up' : 'icon-down'" />
+        </div>
+        <div v-show="item.open" class="item2-box">
+          <van-checkbox-group v-model="selectData[item.key].data" @change="checkBoxChange(item)">
+            <div v-for="(item2, index2) in item.list" :key="index2" class="item2">
+              <div class="select-item">
+                <van-checkbox :name="item2.value">{{ item2.label }}</van-checkbox>
+              </div>
+            </div>
+          </van-checkbox-group>
+          <div v-if="item.label === '成员单位'" class="text-box">
+            <div class="text1">请填写单位名称</div>
+            <div class="filed-box">
+              <van-field v-model="selectData.memberUnit.name" placeholder="如：茂名供电局" />
+            </div>
+          </div>
+          <div v-if="item.label === '重点部门'" class="text-box">
+            <div class="text1">请填写单位名称</div>
+            <div class="filed-box">
+              <van-field v-model="selectData.keyDepartment.name" placeholder="如：茂名市中心小学" />
+            </div>
+            <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
+            <div class="tag-box">
+              <div :class="selectData.keyDepartment.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '1')">主要负责人</div>
+              <div :class="selectData.keyDepartment.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '2')">分管负责人</div>
+              <div :class="selectData.keyDepartment.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '3')">具体负责人</div>
+            </div>
+          </div>
+          <div v-if="item.label === '水利部门'" class="text-box">
+            <div class="text1">请填写单位名称</div>
+            <div class="filed-box">
+              <van-field v-model="selectData.waterResourcesDepartment.name" placeholder="如：北江大堤" />
+            </div>
+            <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
+            <div class="tag-box">
+              <div :class="selectData.waterResourcesDepartment.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '1')">管理单位责任人</div>
+              <div :class="selectData.waterResourcesDepartment.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '2')">行政责任人</div>
+              <div :class="selectData.waterResourcesDepartment.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '3')">技术责任人</div>
+              <div :class="selectData.waterResourcesDepartment.tagData.includes('4') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '4')">巡查责任人</div>
+              <div :class="selectData.waterResourcesDepartment.tagData.includes('5') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '5')">其他</div>
+            </div>
+          </div>
+          <div v-if="item.label === '抢救队伍'" class="text-box">
+            <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
+            <div class="tag-box">
+              <div :class="selectData.rescueTeam.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '1')">主要负责人</div>
+              <div :class="selectData.rescueTeam.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '2')">分管负责人</div>
+              <div :class="selectData.rescueTeam.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '3')">具体联系人</div>
+              <div :class="selectData.rescueTeam.tagData.includes('4') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '4')">抢险队员</div>
+            </div>
+          </div>
+          <div v-if="item.label === '地质灾害'" class="text-box">
+            <div class="text1">请填写隐患点名称</div>
+            <div class="filed-box">
+              <van-field v-model="selectData.geologicalDisaster.name" />
+            </div>
+          </div>
+          <div v-if="item.label === '其他'" class="text-box">
+            <div class="text1">请填写具体类型</div>
+            <div class="filed-box">
+              <van-field v-model="selectData.other.name" placeholder="请填写责任类型、如：重点单位等" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: Boolean
+});
+
+const emits = defineEmits(['update:modelValue','confirm']);
+let show = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits('update:modelValue', value);
+  }
+})
+const selectOptions = ref([
+  {
+    label: '党委政府',
+    value: '党委政府',
+    key: 'government',
+    icon: 'icon1',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+        { label: '主要负责人', value: '主要负责人' },
+        { label: '分管负责人', value: '分管负责人' },
+        { label: '包片负责人', value: '包片负责人' }
+    ]
+  },
+  {
+    label: '三防指挥部',
+    value: '三防指挥部',
+    key: 'headquarters',
+    icon: 'icon2',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '总指挥', value: '总指挥' },
+      { label: '副总指挥', value: '副总指挥' },
+      { label: '秘书长', value: '秘书长' },
+      { label: '副秘书长', value: '副秘书长' },
+      { label: '成员', value: '成员' },
+      { label: '成员单位内设对口机构负责人', value: '成员单位内设对口机构负责人' },
+      { label: '成员单位的联络员', value: '成员单位的联络员' },
+      { label: '工作督导组成员', value: '工作督导组成员' },
+      { label: '三防专家组成员', value: '三防专家组成员' },
+      { label: '北江大堤前线抗洪指挥部总指挥', value: '北江大堤前线抗洪指挥部总指挥' },
+      { label: '北江大堤前线抗洪指挥部副总指挥', value: '北江大堤前线抗洪指挥部副总指挥' },
+      { label: '北江大堤前线抗洪指挥部成员', value: '北江大堤前线抗洪指挥部成员' }
+    ]
+  },
+  {
+    label: '应急部门',
+    value: '应急部门',
+    key: 'emergencyDepartment',
+    icon: 'icon3',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '领导', value: '领导' },
+      { label: '机关处室', value: '机关处室' },
+      { label: '直属单位', value: '直属单位' },
+      { label: '其他', value: '其他' }
+    ]
+  },
+  {
+    label: '成员单位',
+    value: '成员单位',
+    key: 'memberUnit',
+    icon: 'icon4',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '领导成员', value: '领导成员' },
+      { label: '对口处室主要负责人', value: '对口处室主要负责人' },
+      { label: '对口处室分管负责人', value: '对口处室分管负责人' },
+      { label: '联系人', value: '联系人' },
+      { label: '其他', value: '其他' }
+    ]
+  },
+  {
+    label: '重点部门',
+    value: '重点部门',
+    key: 'keyDepartment',
+    icon: 'icon5',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '学校', value: '学校' },
+      { label: '在建基建工程', value: '在建基建工程' },
+      { label: '养老院', value: '养老院' },
+      { label: '石油、化工、核电等高危行业', value: '石油、化工、核电等高危行业' },
+      { label: '企业', value: '企业' },
+      { label: '农场', value: '农场' },
+      { label: '林场', value: '林场' },
+      { label: '矿场', value: '矿场' },
+      { label: '养殖场', value: '养殖场' },
+      { label: '旅游景区', value: '旅游景区' },
+      { label: '其他', value: '其他' },
+    ]
+  },
+  {
+    label: '行政村',
+    value: '行政村',
+    key: 'administrativeVillage',
+    icon: 'icon6',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '党支部书记', value: '党支部书记' },
+      { label: '村居委主任', value: '村居委主任' },
+      { label: '村居委其他负责人', value: '村居委其他负责人' },
+      { label: '村民居委组长', value: '村民居委组长' },
+      { label: '简易雨量水位计观测人员', value: '简易雨量水位计观测人员' },
+      { label: '鸣锣和手摇报警器负责人', value: '鸣锣和手摇报警器负责人' },
+      { label: '小型水利设施管理人员', value: '小型水利设施管理人员' },
+      { label: '巡查抢险队员', value: '巡查抢险队员' },
+      { label: '灾害信息员', value: '灾害信息员' },
+      { label: '其他', value: '其他' },
+    ]
+  },
+  {
+    label: '水利部门',
+    value: '水利部门',
+    key: 'waterResourcesDepartment',
+    icon: 'icon7',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '省管水利工程', value: '省管水利工程' },
+      { label: '大型水库', value: '大型水库' },
+      { label: '中型水库', value: '中型水库' },
+      { label: '小一型水库', value: '小一型水库' },
+      { label: '广东省十大堤围', value: '广东省十大堤围' },
+      { label: '万亩以上提围', value: '万亩以上提围' },
+      { label: '其他', value: '其他' }
+    ]
+  },
+  {
+    label: '受威胁转移',
+    value: '受威胁转移',
+    key: 'threatenedTransfer',
+    icon: 'icon8',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '山洪地质灾害隐患点群众', value: '山洪地质灾害隐患点群众' },
+      { label: '独居老人', value: '独居老人' },
+      { label: '留守儿童', value: '留守儿童' },
+      { label: '低洼易涝区域群众', value: '低洼易涝区域群众' },
+      { label: '泥砖房、危房、工棚居住人员', value: '泥砖房、危房、工棚居住人员' },
+      { label: '海上养殖、作业人员', value: '海上养殖、作业人员' },
+      { label: '出海渔船', value: '出海渔船' },
+      { label: '外来务工人员', value: '外来务工人员' },
+      { label: '出租屋', value: '出租屋' },
+      { label: '其他', value: '其他' }
+    ]
+  },
+  {
+    label: '抢救队伍',
+    value: '抢救队伍',
+    key: 'rescueTeam',
+    icon: 'icon9',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '飞行队', value: '飞行队' },
+      { label: '工程抢险', value: '独居老人' },
+      { label: '海上救助单位', value: '海上救助单位' },
+      { label: '军队、武警', value: '军队、武警' },
+      { label: '消防', value: '消防' },
+      { label: '潜水队伍', value: '潜水队伍' },
+      { label: '轻舟队伍', value: '轻舟队伍' },
+      { label: '水文应急监测队伍', value: '水文应急监测队伍' },
+      { label: '物资仓库', value: '物资仓库' },
+      { label: '其他', value: '其他' }
+    ]
+  },
+  {
+    label: '地质灾害',
+    value: '地质灾害',
+    key: 'geologicalDisaster',
+    icon: 'icon10',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '主要负责人', value: '主要负责人' },
+      { label: '监测人', value: '监测人' },
+      { label: '其他', value: '其他' },
+    ]
+  },
+  {
+    label: '其他',
+    value: '其他',
+    key: 'other',
+    icon: 'icon11',
+    open: false,
+    checked: false,
+    isIndeterminate: false,
+    list: [
+      { label: '主要负责人', value: '主要负责人' },
+      { label: '分管负责人', value: '分管负责人' },
+      { label: '具体联系人', value: '具体联系人' },
+      { label: '其他', value: '其他' }
+    ]
+  }
+]);
+const selectData = ref({
+  government: {
+    data: []
+  },
+  headquarters: {
+    data: []
+  },
+  emergencyDepartment: {
+    data: []
+  },
+  memberUnit: {
+    name: '',
+    data: []
+  },
+  keyDepartment: {
+    name: '',
+    tagData: [],
+    data: []
+  },
+  administrativeVillage: {
+    data: []
+  },
+  waterResourcesDepartment: {
+    name: '',
+    tagData: [],
+    data: []
+  },
+  threatenedTransfer: {
+    data: []
+  },
+  rescueTeam: {
+    tagData: [],
+    data: []
+  },
+  geologicalDisaster: {
+    name: '',
+    data: []
+  },
+  other: {
+    name: '',
+    data: []
+  },
+})
+// 子项选中变化
+const checkBoxChange = (data) => {
+  let checked = selectData.value[data.key] && selectData.value[data.key].data && data.list.length === selectData.value[data.key].data.length;
+  data.isIndeterminate = !checked && selectData.value[data.key].data.length > 0;
+  data.checked = checked;
+};
+
+const handleClickTag = (key, value) => {
+  let index = selectData.value[key].tagData.findIndex(item => item === value);
+  if (index > -1) {
+    selectData.value[key].tagData.splice(index, 1);
+  } else {
+    selectData.value[key].tagData.push(value);
+  }
+}
+
+const onCancel = () => {
+  emits('update:modelValue', false)
+}
+const onConfirm = () => {
+  onCancel();
+  emits('confirm')
+};
+</script>
+
+<style lang="scss" scoped>
+.popup-header {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f2f2f2;
+  .btn-text1 {
+    padding: 0 16px;
+    font-size: 14px;
+    color: #969799;
+  }
+  .btn-text2 {
+    padding: 0 16px;
+    font-size: 14px;
+    color: #1989fa;
+  }
+}
+.title-box {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid #EEEEEE;
+  padding: 0 16px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #323233;
+  background-color: #ffffff;
+}
+.select-container {
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+}
+.select-box {
+  margin-top: 6px;
+  &:first-child {
+    margin-top: 0;
+  }
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 10px;
+    background-color: #fff;
+    font-size: 16px;
+    .label-box {
+      display: flex;
+      align-items: center;
+      color: #323233;
+    }
+  }
+  .item2-box {
+    background-color: #ffffff;
+    padding: 0 10px 0 36px;
+    .item2 {
+      padding: 12px 0;
+      border-bottom: 1px solid #EEEEEE;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+.icon {
+  display: inline-block;
+  width: 15px;
+  height: 16px;
+  margin-right: 3px;
+}
+.icon1 {
+  width: 16px;
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon1.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon2 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon2.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon3 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon3.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon4 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon4.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon5 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon5.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon6 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon6.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon7 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon7.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon8 {
+  width: 16px;
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon8.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon9 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon9.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon10 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon10.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon11 {
+  background: url('@/assets/images/threePreventionResponsiblePerson/icon11.png') no-repeat;
+  background-size: 100% 100%;
+}
+.icon-down {
+  background: url('@/assets/images/down.png') no-repeat;
+}
+.icon-up {
+  background: url('@/assets/images/up.png') no-repeat;
+}
+.icon-down,
+.icon-up {
+  width: 17px;
+  height: 16px;
+  background-size: 100% 100%;
+}
+.custom-checkbox {
+  cursor: default;
+  :deep(.van-checkbox__icon--disabled) {
+    .van-icon {
+      background-color: transparent !important;
+    }
+  }
+  :deep(.van-checkbox__icon--indeterminate) {
+    .van-icon {
+      border-color: #1989fa !important;
+      background-color: #1989fa !important;
+    }
+  }
+  :deep(.van-checkbox__icon--checked) {
+    .van-icon {
+      color: #ffffff;
+      border-color: #1989fa !important;
+      background-color: #1989fa !important;
+    }
+  }
+}
+.text-box {
+  padding-bottom: 8px;
+  .text1 {
+    font-size: 16px;
+    padding-bottom: 8px;
+    color: #323233;
+  }
+  .filed-box {
+    padding: 5px 8px;
+    border: 1px solid #EEEEEE;
+    border-radius: 2px;
+  }
+}
+.tag-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  .tag {
+    margin-right: 5px;
+    padding: 3px 8px;
+    background-color: #f2f3f5;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+    color: #323233;
+    margin-top: 5px;
+  }
+  .tag-active {
+    background-color: #1989fa;
+    border: 1px solid #1989fa;
+    color: #ffffff;
+  }
+}
+</style>