sgxt_web/src/views/backOfficeManage/ControlManage/myControl/components/drawer.vue

<template>
  <el-drawer
    v-model="drawerShow"
    title="范围模型(3)"
    size="16%"
    :direction="direction"
    :before-close="handleClose"
    custom-class="bk_drawer_box"
  >
   <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules"></FormMessage>
    <el-button type="primary" @click="addEdit('add', '')">
      <el-icon style="vertical-align: middle"><Search /></el-icon>
      <span style="vertical-align: middle">查询</span>
    </el-button>
    <el-button type="primary" @click="addEdit('add', '')">
      <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
      <span style="vertical-align: middle">添加范围模型</span>
    </el-button>
    <ul>
      <li v-for="item in listData" :key="item">
        <div class="title_text">{{ item.title }}</div>
        <div class="mxlx_text">模型类型:{{ item.mxlx }}</div>
        <div class="line"></div>
        <div class="flex just-between">
          <el-checkbox v-model="checked1" label="启用" size="large" />
          <div class="flex">
            <el-link class="mr10" type="primary">设置</el-link>
            <el-link type="danger">删除</el-link>
          </div>
        </div>
      </li>
    </ul>
  </el-drawer>
</template>
<script setup>
import FormMessage from '@/components/aboutTable/FormMessage/index.vue'
import { ref, reactive, onMounted, defineProps } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
  modelValue: {
    default: false,
    type: Boolean
  }
});
const drawerShow = ref(false);
const direction = ref("rtl");
const formData = ref([
  {
    text: "模型名称",
    prop: "czjsdw",
    type: "input",
    width: "100%"
  },
  {
    text: "启用状态",
    prop: "czjsdw",
    type: "select",
    width: "100%",
    optionList: [
      { label: "消息推送", value: "1" },
      { label: "短信发送", value: "0" }
    ]
  }
]);
const listData = ref([
  { title: "巴宜区公园外围模型", mxlx: "重点区域预警模型" }
]);
const init = (row) => {
  drawerShow.value = true;
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.title_text {
  color: #0386fb;
  font-size: 16px;
  font-weight: 400;
}
.mxlx_text {
  color: #777575;
  font-size: 14px;
}
::v-deep .el-form-item__label {
  width: 90px !important;
}
ul {
  margin-top: 10px;
  li {
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #c8cfdc;
    padding: 6px;
    box-sizing: border-box;
    .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #c8cfdc;
      margin: 6px 0;
    }
  }
}

</style>