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

<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>