feat: 标签管理

src/api/all/propertyMarketing.ts

@@ -60,7 +60,7 @@ export const postAccountGroups = (params = {}) => {
 };
 
 // 媒体账号分组-编辑
-export const putGroupList = (params = {}) => {
+export const putGroup = (params = {}) => {
   const { id, ...rest } = params as { id: string; [key: string]: any };
   return Http.put(`/v1/media-account-groups/${id}`, rest);
 };
@@ -69,3 +69,24 @@ export const putGroupList = (params = {}) => {
 export const deleteGroup = (id: string) => {
   return Http.delete(`/v1/media-account-groups/${id}`);
 };
+
+// 媒体账号标签-列表
+export const getTagsList = (params = {}) => {
+  return Http.get('/v1/media-account-tags/list', params);
+};
+
+// 媒体账号标签-添加
+export const postAccountTags = (params = {}) => {
+  return Http.post('/v1/media-account-tags', params);
+};
+
+// 媒体账号标签-修改
+export const putTag = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/media-account-tags/${id}`, rest);
+};
+
+// 媒体账号标签-删除
+export const deleteTag = (id: string) => {
+  return Http.delete(`/v1/media-account-tags/${id}`);
+};

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue

@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref, watch, nextTick } from 'vue';
-import { postAccountGroups, putGroupList } from '@/api/all/propertyMarketing';
+import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
 
 const emits = defineEmits(['success', 'close']);
 
@@ -64,7 +64,7 @@ const open = (record = {}) => {
 async function onSubmit() {
   formRef.value.validate(async (errors) => {
     if (!errors) {
-      const _fn = isEdit.value ? putGroupList : postAccountGroups;
+      const _fn = isEdit.value ? putGroup : postAccountGroups;
       const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
       const { code } = await _fn(_params);
       if (code === 200) {

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue

@@ -0,0 +1,80 @@
+<!--
+ * @Author: AI
+ * @Date: 2025-06-27
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isEdit ? '编辑标签' : '添加新标签'"
+    modal-class="tags-manage-modal"
+    width="400px"
+    :footer="false"
+    @close="onClose"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
+        <a-input v-model="form.name" placeholder="请输入…" />
+      </a-form-item>
+      <div class="text-right">
+        <a-button class="cancel-btn" @click="onClose">取消</a-button>
+        <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+      </div>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const isEdit = ref(false);
+const formRef = ref();
+const form = ref({ name: '' });
+const tagId = ref('');
+
+const rules = {
+  name: [{ required: true, message: '请输入标签名称' }],
+};
+
+function resetForm() {
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+}
+
+function onClose() {
+  visible.value = false;
+  form.value.name = '';
+  tagId.value = '';
+  isEdit.value = false;
+  resetForm();
+}
+
+const open = (record = {}) => {
+  const { id = '', name = '' } = record;
+  tagId.value = id;
+  isEdit.value = !!id;
+  form.value.name = name;
+  visible.value = true;
+};
+
+async function onSubmit() {
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = isEdit.value ? putTag : postAccountTags;
+      const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
+      const { code } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
+        emits('success');
+        onClose();
+      }
+    }
+  });
+}
+
+defineExpose({ open });
+</script>

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:23:52
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="删除标签"
+    width="400px"
+    :footer="false"
+    modal-class="account-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center mb-24px">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
+    </div>
+    <div class="text-right">
+      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTag } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const tagId = ref('');
+const tagName = ref('');
+
+function onClose() {
+  visible.value = false;
+  tagId.value = '';
+  tagName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = '', name = '' } = record;
+  tagId.value = id;
+  tagName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteTag(tagId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue

@@ -1,6 +1,6 @@
 <!--
  * @Author: RenXiaoDong
- * @Date: 2025-06-25 17:51:46
+ * @Date: 2025-06-25 17:58:28
 -->
 <template>
   <a-modal
@@ -12,27 +12,126 @@
     @close="close"
   >
     <template #title>标签管理</template>
+    <template v-if="!list.length">
+      <div class="flex items-center justify-center flex-col">
+        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+          <img :src="iconEmpty" width="106" height="72" />
+        </div>
+        <span class="s1 mb-16px">暂无标签</span>
+        <a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
+          <template #icon>
+            <img :src="iconAdd" width="16" height="16" />
+          </template>
+          <template #default>去添加</template>
+        </a-button>
+      </div>
+    </template>
+    <template v-else>
+      <a-button type="primary" size="medium" @click="openAdd">
+        <template #icon>
+          <img :src="iconAdd" width="16" height="16" />
+        </template>
+        <template #default>添加新标签</template>
+      </a-button>
+      <div class="tag-list">
+        <a-tooltip v-for="tag in list" :key="tag.id" content="双击修改标签名">
+          <div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
+            <span>{{ tag.name }}</span>
+            <img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
+          </div>
+        </a-tooltip>
+      </div>
+    </template>
+    <AddTag ref="addTagRef" @success="getData" />
+    <DeleteTag ref="deleteTagRef" @success="getData" />
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose } from 'vue';
+import { ref } from 'vue';
+import { getTagsList } from '@/api/all/propertyMarketing';
+
+import AddTag from './add-tag.vue';
+import DeleteTag from './delete-tag.vue';
+
+import iconAdd from '@/assets/img/media-account/icon-add.png';
+import iconEmpty from '@/assets/img/media-account/icon-empty.png';
+import iconDelete from '@/assets/img/media-account/icon-delete-1.png';
 
 const visible = ref(false);
+const list = ref([]);
+const addTagRef = ref(null);
+const deleteTagRef = ref(null);
+
+const getData = async () => {
+  list.value = [
+    { id: 1, name: '测试1' },
+    { id: 2, name: '测试2' },
+    { id: 3, name: '测试3' },
+    { id: 4, name: '测试4' },
+    { id: 5, name: '测试5' },
+    { id: 6, name: '测试6' },
+    { id: 7, name: '测试7' },
+    { id: 8, name: '测试8' },
+    { id: 9, name: '测试9' },
+    { id: 10, name: '测试10' },
+  ];
+  // const { code, data } = await getTagsList();
+  // if (code === 200) list.value = data.list;
+};
+
 const open = () => {
   visible.value = true;
+  getData();
 };
 const close = () => {
   visible.value = false;
 };
-const handleOk = () => {
+const openAdd = () => {
-  console.log('handleOk');
+  // 打开新增标签弹窗
+  addTagRef.value.open();
 };
-defineExpose({
+
-  open,
+function openEdit(record) {
-});
+  addTagRef.value.open(record);
+}
+
+function openDelete(record) {
+  deleteTagRef.value.open(record);
+}
+
+defineExpose({ open });
 </script>
 
 <style lang="scss">
 @import './style.scss';
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 16px;
+  .tag-item {
+    display: flex;
+    align-items: center;
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 4px 12px;
+    position: relative;
+    .delete-icon {
+      position: absolute;
+      z-index: 1;
+      top: -6px;
+      right: -6px;
+      cursor: pointer;
+      width: 12px;
+      height: 12px;
+      display: none;
+    }
+    &:hover {
+      .delete-icon {
+        display: block;
+      }
+    }
+  }
+}
 </style>

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss

@@ -1,19 +1,42 @@
+@import '@/views/property-marketing/component.scss';
+
 .tags-manage-modal {
   border-radius: 8px;
 
-  .arco-modal-header {
-    border-bottom: none;
-    height: 56px;
-    padding: 22px 24px 16px 24px;
-    .arco-modal-title {
-      justify-content: flex-start;
-    }
-  }
   .arco-modal-body {
-    padding: 16px 24px 20px;
+    padding: 24px 24px 44px !important;
-  }
+    max-height: 304px;
-  .arco-modal-footer {
+    overflow: hidden;
-    border-top: none;
+    display: flex;
-    padding: 0;
+    flex-direction: column;
+    .arco-btn {
+      width: fit-content;
+      .arco-btn-icon {
+        line-height: 16px;
+      }
+    }
+    .tag-list {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      .tag-item {
+        display: flex;
+        height: 32px;
+        padding: 0px 8px;
+        align-items: center;
+        border-radius: 2px;
+        background: var(--BG-200, #f2f3f5);
+        gap: 12px;
+        .text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+      }
+    }
   }
 }