原型改了

2024-03-20 08:42:11 +00:00 · 2024-03-20 08:42:11 +00:00 · d602b88806
parent 32f990826e
commit d602b88806
7 changed files with 226 additions and 3 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "element-plus": "^2.6.1",
+        "pinia": "^2.1.7",
        "vue": "^3.4.21",
        "vue-router": "^4.3.0"
      },
@ -1009,6 +1010,56 @@
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.36",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz",
@ -1764,6 +1815,23 @@
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
+    "pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+          "requires": {}
+        }
+      }
+    },
    "postcss": {
      "version": "8.4.36",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
  },
  "dependencies": {
    "element-plus": "^2.6.1",
+    "pinia": "^2.1.7",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
--- a/src/main.js
+++ b/src/main.js
@ -4,5 +4,6 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import { createPinia } from 'pinia'

-createApp(App).use(router).use(ElementPlus).mount('#app')
+createApp(App).use(router).use(ElementPlus).use(createPinia()).mount('#app')
--- a/src/store/project.js
+++ b/src/store/project.js
@ -0,0 +1,7 @@
+import { defineStore } from "pinia"
+
+export const usrProjectStore = defineStore("project", {
+    state: () => ({
+        list: [],
+    }),
+})
--- a/src/views/Home
+++ b/src/views/Home
@ -0,0 +1,52 @@
+<template>
+    <el-button type="success" round @click="new_project.name = ''; new_project.description = ''; add_project_enable = true;"
+        :icon="Plus">新建</el-button>
+    <el-table :data="project_data.list" style="width: 100%">
+        <el-table-column prop="name" label="项目名称" width="300" />
+        <el-table-column prop="description" label="项目描述" width="500" />
+        <el-table-column label="菜单" width="200">
+            <template #default="scope">
+                <el-button type="primary" size="small" round @click="remove_project(scope)">管理</el-button>
+                <el-button type="danger" size="small" round @click="remove_project(scope.$index)">删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <el-dialog v-model="add_project_enable" title="新增项目" width="500">
+        <el-form :model="new_project">
+            <el-form-item label="项目名称">
+                <el-input v-model="new_project.name" />
+            </el-form-item>
+            <el-form-item label="项目描述">
+                <el-input v-model="new_project.description" type="textarea" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="add_project">确定</el-button>
+                <el-button @click="add_project_enable = false">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
+<script setup>
+import { ref, reactive } from 'vue'
+import { usrProjectStore } from '../store/project'
+import { Plus } from '@element-plus/icons-vue'
+
+const project_data = usrProjectStore();
+
+const add_project_enable = ref(false);
+const new_project = reactive({
+    name: '',
+    description: '',
+});
+const add_project = () => {
+    project_data.list.push({
+        name: new_project.name,
+        description: new_project.description,
+        room:[],
+    });
+    add_project_enable.value = false;
+}
+const remove_project = (index) => {
+    project_data.list.splice(index, 1);
+}
+</script>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,6 +1,52 @@
 <template>
-    home
+    <el-card>
+        <el-row>
+            <el-col :span="6">
+                <el-card>
+                    <el-button :icon="Plus" circle @click="new_project.name = ''; new_project.description = ''; add_project_enable = true;" />
+                </el-card>
+            </el-col>
+            <el-col :span="6" v-for="item in project_data.list">
+                <el-card>
+                    <p>{{ item.name }}</p>
+                    <p>{{ item.description }}</p>
+                    <el-button type="primary" round>管理</el-button>
+                    <el-button type="danger" round @click="console.log("11",item,index)">删除</el-button>
+                </el-card>
+            </el-col>
+        </el-row>
+    </el-card>
+    <el-dialog v-model="add_project_enable" title="新增项目" width="500">
+        <el-form :model="new_project">
+            <el-form-item label="项目名称">
+                <el-input v-model="new_project.name" />
+            </el-form-item>
+            <el-form-item label="项目描述">
+                <el-input v-model="new_project.description" type="textarea" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="add_project">确定</el-button>
+                <el-button @click="add_project_enable = false">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
 </template>
 <script setup>
+import { Plus } from '@element-plus/icons-vue'
+import { ref, reactive } from 'vue'
+import { usrProjectStore } from '../store/project'

+const project_data = usrProjectStore();
+const add_project_enable = ref(false);
+const new_project = reactive({
+    name: '',
+    description: '',
+});
+const add_project = () => {
+    project_data.list.push({
+        name: new_project.name,
+        description: new_project.description,
+    });
+    add_project_enable.value = false;
+}
 </script>
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@ -1,6 +1,54 @@
 <template>
-    project
+    <el-card header="项目信息">
+        <p>项目信息:{{ project_data.list[0].name }}</p>
+        <p>项目描述:{{ project_data.list[0].description }}</p>
+        <el-button type="success" round :icon="CircleCheck">保存</el-button>
+        <el-button type="success" round :icon="Printer">预览</el-button>
+    </el-card>
+
+    <el-card>
+        <el-row>
+            <el-col :span="6">
+                <el-card>
+                    <el-button :icon="Plus" circle @click="add_room" />
+                </el-card>
+            </el-col>
+            <el-col :span="6" v-for="item in rooms">
+                <el-card>
+                    <p>{{ item.name }}</p>
+                    <p>{{ item.count }}</p>
+                    <el-button type="primary" round>设计</el-button>
+                    <el-button type="danger" round>删除</el-button>
+                </el-card>
+            </el-col>
+        </el-row>
+
+    </el-card>
 </template>
 <script setup>
+import { Printer, CircleCheck, Plus } from '@element-plus/icons-vue'
+import { ref, reactive } from 'vue'
+import { usrProjectStore } from '../store/project'
+import { ElMessage } from 'element-plus'

+const project_data = usrProjectStore();
+project_data.list.push({
+    name: "222",
+    description: "333",
+    room: [],
+});
+const rooms = project_data.list[0].room;
+const add_room = () => {
+    if (rooms.length > 6) {
+        ElMessage({
+            message: '房型数量已达上限！',
+            type: 'warning',
+        })
+    } else {
+        rooms.push({
+            name: "123",
+            count: 123,
+        });
+    }
+}
 </script>