新增工程弹窗

src/styles/variables.scss

@@ -51,6 +51,7 @@
   --fc-color-4: #A6ABB1;
   --fc-color-5: #333333;
   --fc-color-6: #666666;
+  --fc-color-7: #3b7cff;
 
   --gray-bg-1: #F1F3F5;
 

src/views/modules/home/components/add.vue

@@ -1,41 +1,90 @@
 <template>
-  <form @submit.prevent="handleSubmit">
-    <div>
-      <label for="name">Name:</label>
-      <input type="text" id="name" v-model="form.name" required />
-    </div>
-    <div>
-      <label for="email">Email:</label>
-      <input type="email" id="email" v-model="form.email" required />
-    </div>
-    <button type="submit">Submit</button>
-  </form>
+  <div class="add">
+    <el-dialog
+      v-model="dialogVisible"
+      title="新建测试工程"
+      width="500"
+      @closed="emitHidden"
+    >
+      <el-form
+        :label-position="labelPosition"
+        label-width="auto"
+        :model="formLabelAlign"
+        style="max-width: 600px"
+      >
+        <el-form-item label="产品" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.name" />
+        </el-form-item>
+        <el-form-item label="类型" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.type" />
+        </el-form-item>
+        <el-form-item label="版本" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.region" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="emitHidden">取消</el-button>
+          <el-button type="primary" @click="saveFun"> 保存 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from "vue";
-
-export default defineComponent({
-  name: "AddForm",
-  setup() {
-    const form = reactive({
-      name: "",
-      email: "",
-    });
-
-    const handleSubmit = () => {
-      console.log("Form submitted:", form);
-      // Here you can add code to send the form data to your backend or handle it as needed
-    };
-
-    return {
-      form,
-      handleSubmit,
-    };
+<script lang="ts" setup>
+import { reactive, ref, watch } from "vue";
+
+const dialogVisible = ref(false);
+
+import type { FormItemProps, FormProps } from "element-plus";
+
+const labelPosition = ref<FormProps["labelPosition"]>("right");
+const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+
+interface VersionItem {
+  name: string;
+  type: string;
+  region: string;
+}
+
+const formLabelAlign = ref<VersionItem>({
+  name: "name1",
+  type: "实现基础框架搭建，包含权限管理、路由系统等核心功能。",
+  region: "v2.4.0",
+});
+
+// const handleClose = (done: () => void) => {};
+let { show } = defineProps({
+  show: {
+    type: Boolean,
+    required: false,
   },
 });
-</script>
 
-<style scoped>
-/* Add your styles here */
+watch(
+  () => show,
+  (newVal, oldVal) => {
+    dialogVisible.value = newVal;
+  }
+);
+
+const emit = defineEmits(["handleCancel", "save"]);
+const emitHidden = () => {
+  emit("handleCancel", false);
+};
+
+const saveFun = () => {
+  emit("save", formLabelAlign.value);
+};
+</script>
+<style scoped lang="scss">
+// .add {
+//   // position: fixed;
+//   // width: 100%;
+//   // height: 100%;
+//   // z-index: 10;
+//   // background-color: #000;
+// }
 </style>

src/views/modules/home/components/details.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="add">
+    <el-dialog
+      v-model="dialogVisible"
+      title="新建测试工程"
+      width="500"
+      @closed="emitHidden"
+    >
+      <el-form
+        :label-position="labelPosition"
+        label-width="auto"
+        :model="formLabelAlign"
+        style="max-width: 600px"
+      >
+        <el-form-item label="产品" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.name" />
+        </el-form-item>
+        <el-form-item label="类型" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.type" />
+        </el-form-item>
+        <el-form-item label="版本" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.region" />
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from "vue";
+
+const dialogVisible = ref(false);
+
+import type { FormItemProps, FormProps } from "element-plus";
+
+const labelPosition = ref<FormProps["labelPosition"]>("right");
+const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+
+interface VersionItem {
+  name: string;
+  type: string;
+  region: string;
+}
+
+const formLabelAlign = ref<VersionItem>({
+  name: "name1",
+  type: "实现基础框架搭建，包含权限管理、路由系统等核心功能。",
+  region: "v2.4.0",
+});
+
+let { show } = defineProps({
+  show: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+watch(
+  () => show,
+  (newVal, oldVal) => {
+    dialogVisible.value = newVal;
+  }
+);
+
+const emit = defineEmits(["handleCancel", "save"]);
+const emitHidden = () => {
+  emit("handleCancel", false);
+};
+
+const saveFun = () => {
+  emit("save", formLabelAlign.value);
+};
+</script>
+<style scoped lang="scss">
+// .add {
+//   // position: fixed;
+//   // width: 100%;
+//   // height: 100%;
+//   // z-index: 10;
+//   // background-color: #000;
+// }
+</style>

src/views/modules/home/home.vue

@@ -19,7 +19,12 @@
           v-model="checkedCities"
           @change="handleCheckedCitiesChange"
         >
-          <div class="head-box-item" v-for="city in cities" :key="city">
+          <div
+            class="head-box-item"
+            :class="[checkedCities.includes(city) ? 'active' : '']"
+            v-for="city in cities"
+            :key="city"
+          >
             <el-checkbox label="" :value="city"></el-checkbox>
             <div class="name">射频类</div>
             <div class="num">99+</div>
@@ -31,7 +36,7 @@
       <div class="cotent-btns">
         <div>工程列表</div>
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAddFun">
             <span class="add">+</span>
             新增工程
           </el-button>
@@ -47,10 +52,10 @@
       </div>
 
       <div class="content-list">
-        <div v-for="item in 10" :key="item" class="content-list-item">
+        <div v-for="item in 9" :key="item" class="content-list-item">
           <div class="list-item-flex">
             <div class="list-itme-tit">变频模块</div>
-            <div>
+            <div class="list-item-switch">
               <span class="item-gray">发布</span><el-switch v-model="value" />
             </div>
           </div>
@@ -63,7 +68,7 @@
             <div><span class="item-gray">更新时间：</span>1</div>
           </div>
           <div class="list-item-btns">
-            <span>
+            <span @click="showDetailsFun(item)">
               <el-icon>
                 <Edit />
               </el-icon>
@@ -86,11 +91,30 @@
           </div>
         </div>
       </div>
+      <el-pagination
+        class="content-pag"
+        background
+        layout="prev, pager, next"
+        :page-size="9"
+        :total="1000"
+        @change="handleChange"
+      />
     </div>
   </div>
+
+  <AddComponent
+    :show="showAdd"
+    @handleCancel="showAdd = false"
+    @save="saveFun"
+  />
+
+  <DetailsComponent :show="showDetails" @handleCancel="showDetails = false" />
 </template>
 
 <script lang="ts" setup>
+import AddComponent from "./components/add.vue";
+import DetailsComponent from "./components/details.vue";
+
 import { ref } from "vue";
 
 import type { CheckboxValueType } from "element-plus";
@@ -121,12 +145,48 @@ const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
 
 const value = ref(true);
 
-// import AddComponent from "@/components/add.vue"; // Adjust the path as necessary
+// interface VersionItem {
+//   name: string;
+//   type: string;
+//   region: string;
+// }
+// const formLabelAlign = ref<VersionItem>({
+//   name: "name1",
+//   type: "实现基础框架搭建，包含权限管理、路由系统等核心功能。",
+//   region: "v2.4.0",
+// });
+
+/**
+ * 分页事件,每页9条
+ */
+const handleChange = (currentPage: number, pageSize: number) => {
+  // console.log(currentPage);
+  // console.log(pageSize);
+};
+
+/**
+ * 显示新增弹框
+ */
+let showAdd = ref(false);
+const showAddFun = () => {
+  showAdd.value = true;
+};
 
-// Existing reactive references and methods...
+/**
+ * 新增弹框返回的数据 请求完成后关闭弹框 showAdd.value = false;
+ */
+const saveFun = (data: any) => {
+  // console.log(data.name);
+};
 
-// Register the child component locally
-// const AddComponent = defineAsyncComponent(() => import("@/components/add.vue"));
+/**
+ * 显示新增弹框
+ */
+let showDetails = ref(false);
+const showDetailsFun = (item: any) => {
+  console.log(item);
+  showDetails.value = true;
+};
 </script>
 
 <style scoped lang="scss">
@@ -187,11 +247,10 @@ const value = ref(true);
           padding: 6px;
           margin-left: 12px;
           height: 67px;
-          background: linear-gradient(90deg, #3cbaff 0%, #3b7cff 100%);
+          border: 1px solid #afb9d0;
           border-radius: 4px 4px 4px 4px;
-          color: var(--hj-white-1);
-          text-align: center;
 
+          text-align: center;
           .el-checkbox {
             position: absolute;
             left: 6px;
@@ -202,12 +261,23 @@ const value = ref(true);
             line-height: 16px;
             margin-top: 12px;
             font-size: var(--hj-fs-14);
+            color: var(--fc-color-5);
           }
 
           .num {
             line-height: 26px;
             font-size: var(--hj-fs-20);
             font-weight: bold;
+            color: var(--fc-color-7);
+          }
+          &.active {
+            background: linear-gradient(90deg, #3cbaff 0%, #3b7cff 100%);
+            .name {
+              color: var(--hj-white-1);
+            }
+            .num {
+              color: var(--hj-white-1);
+            }
           }
         }
       }
@@ -287,6 +357,12 @@ const value = ref(true);
         font-size: var(--hj-fs-14);
         font-weight: bold;
       }
+      .list-item-switch {
+        .item-gray {
+          line-height: 32px;
+          margin-right: 4px;
+        }
+      }
 
       .item-gray {
         color: var(--fc-color-3);
@@ -306,5 +382,11 @@ const value = ref(true);
       }
     }
   }
+  .content-pag {
+    float: right;
+    margin-right: 20px;
+    margin-top: 20px;
+    padding-bottom: 30px;
+  }
 }
 </style>