feat✨: 1.对接全域布控下菜单的增删查改功能，以及用户操作流程优化。2.对接人力情报采集系统采集流转列表，搜索，新增接口

src/views/backOfficeSystem/IntelligentControl/MyControlInfo/components/drawerAreaModel.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="drawer-model">
+    <el-drawer v-model="drawer" title="范围模型(3)" direction="rtl" style="width: 300px">
+      <div class="project-list">
+        <!-- 搜索区域 -->
+        <div class="search-area">
+          <!-- 搜索区域 -->
+          <el-form :model="searchForm" label-width="auto" style="max-width: 600px">
+            <el-form-item label="模型名称">
+              <el-input v-model="searchForm.projectName" />
+            </el-form-item>
+            <el-form-item label="启用状态">
+              <el-select v-model="searchForm.status" placeholder="启用状态">
+                <el-option label="启用" value="shanghai" />
+                <el-option label="禁用" value="beijing" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div>
+            <el-button type="primary" icon="Search">查询</el-button>
+            <el-button type="primary" icon="CirclePlus" @click="areaModel">添加应用模型</el-button>
+          </div>
+
+          <!-- <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" /> -->
+        </div>
+        <!-- 列表区域 -->
+        <div class="list-area">
+          <div v-for="(item, index) in pageData.tableData" :key="index" class="list-item">
+            <div class="model-info">
+              <div class="model-name">巴宜区公路外国模型</div>
+              <div class="model-type">模型类型：重点区域城规模型</div>
+            </div>
+            <el-divider border-style="dotted"></el-divider>
+            <div class="actions flexcb">
+              <el-checkbox v-model="item.checked" label="启用" />
+              <div class="btns">
+                <span class="set">设置</span>
+                <span class="delete">删除</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <!-- 添加范围模型 -->
+    <AreaModel ref="areaModelRef"></AreaModel>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive } from "vue";
+  import Search from "@/components/aboutTable/Search.vue";
+  import AreaModel from "./areaModel.vue";
+  const areaModelRef = ref();
+  const areaModel = () => {
+    areaModelRef.value.init();
+  };
+  const searchConfiger = ref([
+    {
+      label: "项目名称",
+      prop: "name",
+      placeholder: "请选择经营状况",
+      showType: "input"
+    },
+    {
+      label: "启用状态",
+      prop: "jyzt",
+      placeholder: "请选择经营状况",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    }
+  ]);
+  // 搜索
+  const onSearch = val => {
+    searchForm.value = { ...val };
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+  const searchForm = ref({
+    projectName: "",
+    status: ""
+  });
+  // 获取列表
+  const getList = val => {
+    // pageData.tableConfiger.loading = true;
+    // let data = { ...pageData.pageConfiger, ...queryFrom.value };
+    // let url = '/mosty-lzcj/tbDwMbkf/queryList';
+    // qcckPost(data,url).then(res=>{
+    //   pageData.tableData = res.records || [];
+    //   pageData.total = res.total;
+    //   pageData.tableConfiger.loading = false;
+    // }).catch(()=>{ pageData.tableConfiger.loading = false; })
+  };
+
+  const pageData = reactive({
+    tableData: [
+      { checked: false },
+      { checked: false },
+      { checked: false },
+      { checked: false },
+      { checked: false },
+      { checked: false }
+    ], //表格数据
+    keyCount: 0,
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    } //分页
+  });
+  const drawer = ref(false);
+  // 初始化数据
+  const init = () => {
+    drawer.value = true;
+    // 根据type和row初始化表单数据
+  };
+  defineExpose({ init });
+</script>
+<style lang="scss" scoped>
+  .drawer-model {
+    header {
+      background: none;
+    }
+    :deep(.el-drawer) {
+      width: 400px !important;
+    }
+  }
+
+  .search-area {
+    margin-bottom: 20px;
+  }
+
+  .list-area {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    .model-name {
+      color: rgb(64, 158, 255);
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+    .model-type {
+      font-size: 18px;
+      color: #ccc;
+    }
+  }
+
+  .list-item {
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    padding: 16px;
+    .el-divider--horizontal {
+      margin: 10px 0;
+    }
+  }
+
+  .actions {
+    .btns {
+      .set {
+        color: rgb(64, 158, 255);
+      }
+      .delete {
+        margin-left: 10px;
+        color: rgb(245, 108, 108);
+      }
+    }
+  }
+</style>