对接茂名市智慧应急项目中屏新建三防责任人类别选择功能接口

src/api/setting/PreventionResponsible/tree.ts

@@ -10,3 +10,21 @@ export function getZoning(id): AxiosPromise<UserInfo> {
     params: data
   });
 }
+
+//获取责任人类别
+export function getPersonRespon(): AxiosPromise<any> {
+  return request({
+    url: '/api/ThreeProofingResponsible/type_data/treeData',
+    method: 'get',
+    params: data
+  });
+}
+
+//提交新建责任人信息
+export function createNewPerson(data) {
+  return request({
+    url: '/api/ThreeProofingResponsible/person/create',
+    method: 'post',
+    data: data
+  });
+}

src/types/components.d.ts

@@ -45,11 +45,14 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -59,9 +62,13 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -73,6 +80,8 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/setting/PreventionResponsible/add.vue

@@ -5,7 +5,7 @@
         <i class="common-dialog-title-icon" />
         <div>{{ props.id ? '修改三防责任人信息' : '新建三防责任人信息' }}</div>
       </div>
-      <div class="common-dialog-box">
+      <div class="common-dialog-box" style="width: 1000px">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
           <el-form-item label="姓名：" prop="name">
             <el-input v-model="form.name" placeholder="请输入姓名" />
@@ -55,26 +55,70 @@
           </el-form-item>
           <el-form-item label="选择类别：" prop="category">
             <div>
-              <el-checkbox-group v-model="checkboxGroup2">
-                <el-checkbox-button v-for="type in category" :key="type" :value="type">
-                  {{ type }}
+              <el-checkbox-group v-model="checkboxGroup2" @change="changeChildType" >
+                <el-checkbox-button v-for="type in category" :key="type" :value="type" @click="deleteOne(type)" >
+                  {{ type.label }}
                 </el-checkbox-button>
               </el-checkbox-group>
-              <el-card style="margin-top: 10px">
-                <template #header>
-                  <div class="card-header">
-                    <span>Card name</span>
+              <el-tabs v-model="childType" class="demo-tabs" @tab-click="handleClick">
+                <el-tab-pane v-for="item in checkboxGroup2" :label="item.label" :name="item.label">
+                  <el-checkbox-group v-model="item.checked"  @change="getSubOption()">
+                    <el-checkbox-button v-for="item2 in item.children" :key="item2.id" :value="item2.id">
+                      {{ item2.label }}
+                    </el-checkbox-button>
+                  </el-checkbox-group>
+                  <div v-if="item.label === '成员单位'">
+                    <span>请填写单位名称：</span>
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如：茂名供电局" @change="memberUnits" />
                   </div>
-                </template>
-                <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
-                <template #footer>Footer content</template>
-              </el-card>
+                  <div v-if="item.label === '重点部门'">
+                    <span>请填写单位名称：</span>
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如：茂名市中心小学" @change="memberUnits" />
+                    <div style="display: flex">
+                      <span>请选择责任类别：</span>
+                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                        <el-checkbox-button v-if="item.id === '5'" v-for="item2 in item.children2" :key="item2" :value="item2.id">
+                          {{ item2.label }}
+                        </el-checkbox-button>
+                      </el-checkbox-group>
+                    </div>
+                  </div>
+                  <div v-if="item.label === '水利工程'">
+                    <span >请填写单位名称：</span>
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如：北江大堰" @change="memberUnits" />
+                    <div style="display: flex">
+                      <span v-if="item.label === '水利工程'">请选择责任类别：</span>
+                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                        <el-checkbox-button v-if="item.id === '7'" v-for="item2 in item.children2" :key="item2" :value="item2.id">
+                          {{ item2.label }}
+                        </el-checkbox-button>
+                      </el-checkbox-group>
+                    </div>
+                  </div>
+                  <div v-if="item.label === '抢险队伍'" style="display: flex">
+                    <span>请选择责任类别：</span>
+                    <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                      <el-checkbox-button v-if="item.id === '9'" v-for="item2 in item.children2" :key="item2" :value="item2.id">
+                        {{ item2.label }}
+                      </el-checkbox-button>
+                    </el-checkbox-group>
+                  </div>
+                  <div v-if="item.label === '地质灾害'">
+                    <span>请填写隐患点名称：</span>
+                    <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="memberUnits" />
+                  </div>
+                  <div v-if="item.label === '其他'">
+                    <span>请填写具体类型：</span>
+                    <el-input v-model="item.other_type_2_name" style="width: 240px" placeholder="请填写责任类型，如：重点单位等" @change="memberUnits" />
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
             </div>
           </el-form-item>
         </el-form>
         <div class="common-dialog-footer">
           <el-button @click="closeDialog">取消</el-button>
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm(formRef)">确定</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitNewPerson()">确定</el-button>
         </div>
       </div>
     </div>
@@ -89,18 +133,30 @@ import {
   getMaterialWarehouseInfo,
   updateMaterialWarehouse
 } from '@/api/comprehensiveGuarantee/materialReserveManagement/godownManagement';
-
+import type { TabsPaneContext } from 'element-plus'
 import { crateData, updateData } from '@/api/PreventionResponsible';
-import { getZoning } from '@/api/setting/PreventionResponsible/tree';
-const category = ['党委政府', '三防指挥部', '应急部门', '成员单位', '重点部门', '行政村', '水利工程', '受威胁转移', '抢险队伍', '地质灾害', '其他']
+import { createNewPerson, getPersonRespon, getZoning } from '@/api/setting/PreventionResponsible/tree';
+
+const category = ref([]);
+const checkboxGroup2 = ref([]);
+const checkboxGroup3 = ref([]);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
   id: String
 });
 const buttonLoading = ref(false);
+const inputUnitName1 = ref("");
+const inputUnitName2 = ref("");
+const inputUnitName3 = ref("");
+const inputUnitName4 = ref("");
+const inputUnitName5 = ref("");
 const data1 = ref();
 const data2 = ref();
 const data3 = ref();
+const responType1 = ref();
+const responType2 = ref();
+const responType3 = ref();
+
 // 表单数据
 const data = reactive({
   form: {
@@ -121,6 +177,7 @@ const data = reactive({
   }
 });
 const { form } = toRefs(data);
+// const type_list = ref([]);
 const emits = defineEmits(['close']);
 const closeDialog = () => {
   emits('close');
@@ -208,13 +265,108 @@ watch(data2, (newdata2, olddata2) => {
   data3.value = "";
   options3.value = undefined;
 })
+const getCategory = () => {
+  getPersonRespon().then(res => {
+    category.value = res.rows;
+  })
+}
+
+const childType = ref()
+const changeChildType = () => {
+
+  category.value.forEach((item) => {
+    let index = checkboxGroup2.value.findIndex((item2) => item2.id === item.id);
+    if (index === -1) {
+      delete item.checked;
+    }
+  })
+  childType.value = checkboxGroup2.value[checkboxGroup2.value.length - 1].label;
+}
+
+const getSubOption = () => {
+  let datatemp = [];
+  let childrentemp = [];
+  const obj = {
+    type_parent_id: "",
+    children: ""
+  };
+  for (let i = 0; i < checkboxGroup2.value.length; i++) {
+    obj.type_parent_id = checkboxGroup2.value[i].id;
+    obj.children = checkboxGroup2.value[i].checked;
+    form.value.type_list[i] = obj;
+  }
+  // form.value.type_list = [...new Set(datatemp.map(item => JSON.stringify(item)))].map(item => JSON.parse(item)); //去重
+}
+const memberUnits = () => {
+  let datatemp = [];
+  for (let i = 0; i < checkboxGroup2.value.length; i++) {
+    if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].children.length > 0) {
+      const obj = {
+        type_parent_id: checkboxGroup2.value[i].id,
+        children: checkboxGroup2.value[i].checked
+      };
+      if(['4', '5', '7'].includes(checkboxGroup2.value[i].id) &&  checkboxGroup2.value[i].dept_name) {   //成员单位
+        obj.dept_name =  checkboxGroup2.value[i].dept_name;
+      } else if (checkboxGroup2.value[i].id === "10" &&  checkboxGroup2.value[i].denger_point_name) {  //地质灾害
+        obj.denger_point_name =  checkboxGroup2.value[i].denger_point_name;
+      } else if (checkboxGroup2.value[i].id === "11" &&  checkboxGroup2.value[i].other_type_2_name) {  //其他
+        obj.other_type_2_name =  checkboxGroup2.value[i].other_type_2_name;
+      }
+      datatemp.push(obj)
+    }
+  }
+  form.value.type_list = datatemp;
+}
+
+const deleteOne = (type) => {
+  const index = form.value.type_list.findIndex(item => item.type_parent_id === type.id);
+  if (index !== -1){
+    form.value.type_list.splice(index, 1);
+  }
+}
+const getChOption = () => {
+  debugger
+  let datatemp = [];
+  for (let i = 0; i < checkboxGroup2.value.length; i++) {
+    if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].other_type_id.length > 0) {
+      const obj = {
+        type_parent_id: checkboxGroup2.value[i].id,
+        other_type_id: checkboxGroup2.value[i].other_type_id
+      };
+      datatemp.push(obj)
+    }
+  }
+  form.value.type_list = datatemp;
+}
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const personType = ref([]);
+for (const i in category.value) {
+  personType.value.push(category.value[i].label);
+}
+
+const submitNewPerson = () => {
+  createNewPerson(form).then(res => {
+    proxy.$modal.msgSuccess('新增成功');
+    emits('close',true);
+  })
+}
 
 onMounted(() => {
   getMaterialWarehouseInfo(props.id).then((res) => {
     form.value = res.data;
   });
   getOptions1(2);
+  getCategory();
 });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>