我的布控。四色预警

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

@@ -0,0 +1,107 @@
+<template>
+  <el-drawer
+    v-model="drawerShow"
+    title="范围模型(3)"
+    size="16%"
+    :direction="direction"
+    :before-close="handleClose"
+    custom-class="bk_drawer_box"
+  >
+    <MOSTY.FormItem
+      :formData="formData"
+      ref="elform"
+      :modelKey="listQuery"
+      :rules="rules"
+    >
+    </MOSTY.FormItem>
+    <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 { 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>