feat: 项目列表、统一4种状态color色值

2025-07-23 11:32:37 +08:00
parent db00888ca9
commit 9ffe5be94e
8 changed files with 321 additions and 41 deletions
--- 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;
+      }
    }
  }
 }
--- 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;
 }

--- 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;
--- 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 = () => {
--- 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>
--- 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
@ -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>
--- a/src/views/property-marketing/project-manage/project-list/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/index.vue
@ -39,6 +39,7 @@
    </div>

    <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,6 +65,7 @@ const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } =
 });

 const addProjectModalRef = ref(null);
+const deleteProjectModalRef = ref(null);

 const query = ref(cloneDeep(INITIAL_QUERY));

@ -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(() => {
--- 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"