From 9ffe5be94e8b5e6c77984e4cad8d409663fde818 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Wed, 23 Jul 2025 11:32:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E3=80=81=E7=BB=9F=E4=B8=804=E7=A7=8D=E7=8A=B6=E6=80=81color?=
 =?UTF-8?q?=E8=89=B2=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/components/button.scss             | 144 ++++++++++++++++--
 src/styles/lib/reset.scss                     |   2 +-
 src/styles/lib/variable.scss                  |  42 ++++-
 .../components/add-project-modal/index.vue    |  64 +++++++-
 .../components/add-project-modal/stepOne.vue  |  13 +-
 .../project-table/delete-project-modal.vue    |  63 ++++++++
 .../project-manage/project-list/index.vue     |  30 ++--
 .../account-table/delete-account.vue          |   4 -
 8 files changed, 321 insertions(+), 41 deletions(-)
 create mode 100644 src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue

diff --git a/src/styles/components/button.scss b/src/styles/components/button.scss
index 46e0ba7..b5fb0c3 100644
--- a/src/styles/components/button.scss
+++ b/src/styles/components/button.scss
@@ -1,5 +1,3 @@
-$disabled-ele: '.arco-btn-disabled';
-
 .arco-btn {
   border-radius: 2px;
   border: 1px solid #d7d7d9 !important;
@@ -22,32 +20,114 @@ $disabled-ele: '.arco-btn-disabled';
 }
 
 .arco-btn-primary {
-  background-color: #6d4cfe !important;
+  background-color: $color-primary !important;
   border: none !important;
   color: #fff !important;
   &.arco-btn-disabled {
     color: #fff !important;
-    background-color: #c5b7ff !important;
+    background-color: $color-primary-3 !important;
   }
   &:not(.arco-btn-disabled) {
     &:hover {
       color: #fff !important;
-      background-color: #8a70fe !important;
+      background-color: $color-primary-5 !important;
+    }
+  }
+
+  //success
+  &.arco-btn-status-success {
+    background-color: $color-success !important;
+    &.arco-btn-disabled {
+      background-color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-success-5 !important;
+      }
+    }
+  }
+
+  // danger
+  &.arco-btn-status-danger {
+    background-color: $color-error !important;
+    &.arco-btn-disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-error-5 !important;
+      }
+    }
+  }
+
+  // warning
+  &.arco-btn-status-warning {
+    background-color: $color-warning !important;
+    &.arco-btn-disabled {
+      background-color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-warning-5 !important;
+      }
     }
   }
 }
 
 .arco-btn-outline {
-  border: 1px solid #6d4cfe !important;
-  color: #6d4cfe !important;
+  border: 1px solid $color-primary !important;
+  color: $color-primary !important;
   &.arco-btn-disabled {
-    border-color: #c5b7ff !important;
-    color: #c5b7ff !important;
+    border-color: $color-primary-3 !important;
+    color: $color-primary-3 !important;
   }
   &:not(.arco-btn-disabled) {
     &:hover {
-      border-color: #8a70fe !important;
-      color: #8a70fe !important;
+      border-color: $color-primary-5 !important;
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    border: 1px solid $color-success !important;
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      border-color: $color-success-3 !important;
+      color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-success-5 !important;
+        color: $color-success-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-danger {
+    border: 1px solid $color-error !important;
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      border-color: $color-error-3 !important;
+      color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-warning {
+    border: 1px solid $color-warning !important;
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      border-color: $color-warning-3 !important;
+      color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-warning-5 !important;
+        color: $color-warning-5 !important;
+      }
     }
   }
 }
@@ -55,13 +135,49 @@ $disabled-ele: '.arco-btn-disabled';
 .arco-btn-text {
   background-color: transparent !important;
   border: none !important;
-  color: #6d4cfe !important;
+  color: $color-primary !important;
   &.arco-btn-disabled {
-    color: #c5b7ff !important;
+    color: $color-primary-2 !important;
   }
   &:not(.arco-btn-disabled) {
     &:hover {
-      color: #8a70fe !important;
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      color: $color-success-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-success-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-danger {
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-warning {
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      color: $color-warning-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-warning-5 !important;
+      }
     }
   }
 }
diff --git a/src/styles/lib/reset.scss b/src/styles/lib/reset.scss
index 89d6024..5c3b861 100644
--- a/src/styles/lib/reset.scss
+++ b/src/styles/lib/reset.scss
@@ -11,7 +11,7 @@ html,
 body {
   background: $color-background;
   font-family: $font-family-regular;
-  font-size: $font-size-14;
+  font-size: 14px;
   -webkit-print-color-adjust: exact;
 }
 
diff --git a/src/styles/lib/variable.scss b/src/styles/lib/variable.scss
index f1d0368..96e71de 100644
--- a/src/styles/lib/variable.scss
+++ b/src/styles/lib/variable.scss
@@ -12,4 +12,44 @@ $font-family-manrope-semiBold: 'Manrope-SemiBold';
 
 $color-background: #f9f9f9;
 
-$font-size-14: 14px;
+$color-primary: #6d4cfe;   // 常规
+$color-primary-5: #8A70FE; // hover
+$color-primary-7: #573DCB; // click
+$color-primary-3: #A794FE; // disabled
+$color-primary-2: #C5B7FF; // text disabled
+$color-primary-1: #F0EDFF; // 浅色
+
+$color-success: #25C883;      
+$color-success-5: #57CF9C;
+$color-success-7: #1BAE71;
+$color-success-3: #81DBB5;
+$color-success-2: #ABE7CE;
+$color-success-1: #EBF7F2;  
+
+$color-warning: #FFAE00;
+$color-warning-5: #FFBE33;
+$color-warning-7: #CC8B00;
+$color-warning-3: #FFCF66;
+$color-warning-2: #FFDF99;  
+$color-warning-1: #FFF7E5;  
+
+$color-error: #F64B31;
+$color-error-5: #F86F5A;
+$color-error-7: #C53C27;
+$color-error-3: #FA9383;
+$color-error-2: #FBB7AD;
+$color-error-1: #FFE9E7;
+
+$color-blue: #2A59F3;
+$color-blue-5: #557AF6;
+$color-blue-7: #2247C2;
+$color-blue-3: #7F9CF8;
+$color-blue-2: #AABDFA;
+$color-blue-1: #E5ECFF;
+
+$color-teal: #39C6E9;
+$color-teal-5: #60D2ED;
+$color-teal-7: #2E9EBA;
+$color-teal-3: #88DDF2;
+$color-teal-2: #B0E8F6;
+$color-teal-1: #E1F9FF;
\ No newline at end of file
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
index 2bbce70..15cb4f9 100644
--- a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
@@ -12,7 +12,7 @@
         <a-step v-for="(step, index) in STEPS" :key="index">{{ step.label }}</a-step>
       </a-steps>
 
-      <component :is="activeComp" v-model:formQuery="formQuery" />
+      <component :is="activeComp" v-model:formQuery="formQuery" ref="compRef" />
     </div>
     <template #footer>
       <div class="flex justify-between items-center w-100%">
@@ -29,6 +29,8 @@
 </template>
 
 <script setup>
+import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
+
 import StepOne from './stepOne.vue';
 import StepTwo from './stepTwo.vue';
 import StepThree from './stepThree.vue';
@@ -66,21 +68,40 @@ const INITIAL_QUERY = {
   work_ids: [],
 };
 
+const update = inject('update');
+
 const visible = ref(false);
-const emits = defineEmits(['update']);
 const currentStep = ref(1);
 const formQuery = ref(cloneDeep(INITIAL_QUERY));
+const compRef = ref(null);
+const projectId = ref(null);
 
 const isFirstStep = computed(() => currentStep.value === 1);
+const isEdit = computed(() => projectId.value);
 const isLastStep = computed(() => currentStep.value === STEPS.length);
 const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
 
-const open = () => {
+const open = (id = null) => {
+  projectId.value = id;
+
+  if (id) {
+    getDetail();
+  }
+
   visible.value = true;
 };
+const getDetail = (id) => {
+  getProjectDetail(projectId.value).then((res) => {
+    if (res.code === 200) {
+      formQuery.value = res.data;
+    }
+  });
+};
 const onClose = () => {
   currentStep.value = 1;
   formQuery.value = cloneDeep(INITIAL_QUERY);
+  projectId.value = '';
+  compRef.value?.reset?.();
 
   visible.value = false;
 };
@@ -88,15 +109,44 @@ const onCancel = () => {
   visible.value = false;
 };
 
-const onSubmit = () => {
-  console.log(formQuery.value);
+const onSubmit = async () => {
+  if (isFirstStep.value) {
+    const valid = await compRef.value.validate();
+    if (!valid) {
+      return;
+    }
+  }
+
   if (isLastStep.value) {
-    console.log('onSubmit');
+    isEdit.value ? handleEdit() : handleAdd();
   } else {
     currentStep.value++;
   }
 };
-const setCurrent = (current) => {
+const handleAdd = () => {
+  postAddProject(formQuery.value).then((res) => {
+    if (res.code === 200) {
+      onClose();
+      update();
+    }
+  });
+};
+const handleEdit = () => {
+  putProject({ id: projectId.value, ...formQuery.value }).then((res) => {
+    if (res.code === 200) {
+      onClose();
+      update();
+    }
+  });
+};
+
+const setCurrent = async (current) => {
+  if (isFirstStep.value) {
+    const valid = await compRef.value.validate();
+    if (!valid) {
+      return;
+    }
+  }
   currentStep.value = current;
 };
 const onPrev = () => {
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
index 2790c27..13be379 100644
--- a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
@@ -38,6 +38,17 @@ const props = defineProps({
 const formRef = ref(null);
 
 const rules = {
-  name: [{ required: true, message: '项目名称' }],
+  name: [{ required: true, message: '请输入项目名称' }],
 };
+
+const validate = async () => {
+  const errors = await formRef.value.validate();
+ return !errors
+};
+
+const reset = () => {
+  formRef.value.resetFields();
+};
+
+defineExpose({ validate, reset });
 </script>
diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue b/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue
new file mode 100644
index 0000000..a2a7a9a
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue
@@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:44:16
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="删除项目"
+    width="480px"
+    modal-class="project-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ projectName }} 这个项目吗？</span>  
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteProject } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const update = inject('update');
+
+const visible = ref(false);
+const projectId = ref(null);
+const projectName = ref('');
+
+const isBatch = computed(() => Array.isArray(projectId.value));
+
+function onClose() {
+  visible.value = false;
+  projectId.value = null;
+  projectName.value = '';
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  projectId.value = id;
+  projectName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteProject(projectId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    update()
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/views/property-marketing/project-manage/project-list/index.vue b/src/views/property-marketing/project-manage/project-list/index.vue
index 12736e8..404ccd3 100644
--- a/src/views/property-marketing/project-manage/project-list/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/index.vue
@@ -38,7 +38,8 @@
       </div>
     </div>
 
-    <AddProjectModal ref="addProjectModalRef"/>
+    <AddProjectModal ref="addProjectModalRef" />
+    <DeleteProjectModal ref="deleteProjectModalRef" />
   </div>
 </template>
 
@@ -50,6 +51,7 @@ import { getProjects } from '@/api/all/propertyMarketing';
 import FilterBlock from './components/filter-block';
 import ProjectTable from './components/project-table';
 import AddProjectModal from './components/add-project-modal';
+import DeleteProjectModal from './components/project-table/delete-project-modal.vue';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 
@@ -63,20 +65,21 @@ const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } =
 });
 
 const addProjectModalRef = ref(null);
+const deleteProjectModalRef = ref(null);
 
 const query = ref(cloneDeep(INITIAL_QUERY));
 
 const getData = async () => {
-    const { page, page_size } = pageInfo.value;
-    const { code, data } = await getProjects({
-      ...query.value,
-      page,
-      page_size,
-    });
-    if (code === 200) {
-      dataSource.value = data?.data ?? [];
-      pageInfo.value.total = data.total;
-    }
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await getProjects({
+    ...query.value,
+    page,
+    page_size,
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data.total;
+  }
 };
 const handleSearch = () => {
   reload();
@@ -103,10 +106,11 @@ const handleSorterChange = (column, order) => {
 };
 
 const handleDelete = (item) => {
-  console.log('handleDelete', item);
+  const { id, name } = item;
+  deleteProjectModalRef.value?.open({ id, name: `“${name}”` });
 };
 const handleEdit = (item) => {
-  console.log('handleDelete', item);
+  addProjectModalRef.value?.open(item.id);
 };
 
 onMounted(() => {
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
index 9b0bb2a..9946880 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
@@ -2,10 +2,6 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-26 17:44:16
 -->
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-26 17:23:52
--->
 <template>
   <a-modal
     v-model:visible="visible"