feat: 原料库-添加标签管理功能和相关组件

- 在 `raw-material` 组件中添加标签管理按钮和模态框 - 新增 `tags-manage-modal` 组件及其子组件 `add-tag` 和 `delete-tag` - 添加原料库标签相关的 API 接口 - 更新样式文件以支持新的标签管理界面
2025-09-15 17:02:48 +08:00
parent 984e0c27b8
commit 2f66c7af11
7 changed files with 392 additions and 5 deletions
--- a/src/views/material-center/components/raw-material/components/tags-manage-modal/add-tag.vue
+++ b/src/views/material-center/components/raw-material/components/tags-manage-modal/add-tag.vue
@ -0,0 +1,75 @@
+<template>
+  <Modal
+    v-model:open="visible"
+    :title="isEdit ? '编辑标签' : '添加新标签'"
+    centered
+    width="400px"
+    wrapClassName="tags-manage-modal"
+    @cancel="onClose"
+  >
+    <Form ref="formRef" :model="form" :rules="rules" auto-label-width layout="horizontal">
+      <FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
+        <Input v-model:value="form.name" placeholder="请输入…" />
+      </FormItem>
+    </Form>
+    <template #footer>
+      <Button @click="onClose">取消</Button>
+      <Button class="ml-16px" type="primary" @click="onSubmit">确认</Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
+import { posRawMaterialTags, putRawMaterialTag } from '@/api/all/generationWorkshop';
+
+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().then(async () => {
+    const _fn = isEdit.value ? putRawMaterialTag : posRawMaterialTags;
+    const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
+    const { code } = await _fn(_params);
+    if (code === 200) {
+      message.success(isEdit.value ? '编辑成功' : '添加成功');
+      emits('success');
+      onClose();
+    }
+  });
+}
+
+defineExpose({ open });
+</script>
--- a/src/views/material-center/components/raw-material/components/tags-manage-modal/delete-tag.vue
+++ b/src/views/material-center/components/raw-material/components/tags-manage-modal/delete-tag.vue
@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:23:52
+-->
+<template>
+  <Modal
+    v-model:open="visible"
+    centered
+    title="删除标签"
+    width="400px"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" class="mr-12px" height="20" width="20" />
+      <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
+    </div>
+    <template #footer>
+      <Button size="large" @click="onClose">取消</Button>
+      <Button class="ml-16px" danger size="large" type="primary" @click="onDelete">确认删除</Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Button, message } from 'ant-design-vue';
+import { deleteRawMaterialTag } from '@/api/all/generationWorkshop';
+
+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 deleteRawMaterialTag(tagId.value);
+  if (code === 200) {
+    message.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
--- a/src/views/material-center/components/raw-material/components/tags-manage-modal/index.vue
+++ b/src/views/material-center/components/raw-material/components/tags-manage-modal/index.vue
@ -0,0 +1,132 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:58:28
+-->
+<template>
+  <Modal
+    v-model:open="visible"
+    :footer="null"
+    :maskClosable="false"
+    centered
+    title="标签管理"
+    width="800px"
+    wrapClassName="raw-material-tags-manage-modal"
+    @cancel="close"
+  >
+    <div class="flex items-center justify-between mb-16px">
+      <div class="filter-row-item flex items-center">
+        <span class="s1 !color-#211F24 mr-12px">标签名称</span>
+        <Input
+          v-model:value="query.name"
+          allowClear
+          class="w-240px"
+          placeholder="请输入..."
+          size="medium"
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </Input>
+      </div>
+      <Button type="primary" @click="openAdd">
+        <template #icon>
+          <icon-plus class="mr-8px" size="16" />
+        </template>
+        <template #default>添加新标签</template>
+      </Button>
+    </div>
+
+    <div class="h-300px">
+      <div v-if="showDataSource.length" class="tag-list">
+        <Tooltip v-for="tag in showDataSource" :key="tag.id" placement="bottom" title="双击修改标签名">
+          <div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
+            <span>{{ tag.name }}</span>
+            <img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
+          </div>
+        </Tooltip>
+      </div>
+      <template v-else>
+        <NoData>
+          <span class="s1 mb-32px mt-8px">暂无标签</span>
+          <Button size="large" type="primary" @click="openAdd">
+            <template #icon>
+              <icon-plus class="mr-8px" size="16" />
+            </template>
+            <template #default>去添加</template>
+          </Button>
+        </NoData>
+      </template>
+    </div>
+
+    <AddTag ref="addTagRef" @success="update" />
+    <DeleteTag ref="deleteTagRef" @success="update" />
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Button, Modal, Input, Tooltip } from 'ant-design-vue';
+import { getRawMaterialTagsList } from '@/api/all/generationWorkshop';
+import AddTag from './add-tag.vue';
+import DeleteTag from './delete-tag.vue';
+
+import iconDelete from '@/assets/img/media-account/icon-delete-1.png';
+
+const emit = defineEmits(['update']);
+
+const visible = ref(false);
+const allDataSource = ref([]);
+const showDataSource = ref([]);
+const addTagRef = ref(null);
+const deleteTagRef = ref(null);
+const query = ref({
+  name: '',
+});
+
+const getData = async () => {
+  const { code, data } = await getRawMaterialTagsList();
+  if (code === 200) {
+    allDataSource.value = data ?? [];
+    showDataSource.value = allDataSource.value;
+  }
+};
+
+const handleSearch = () => {
+  showDataSource.value = allDataSource.value.filter((item) => item.name.includes(query.value.name));
+};
+
+const open = () => {
+  visible.value = true;
+  getData();
+};
+const close = () => {
+  showDataSource.value = [];
+  allDataSource.value = [];
+  query.value.name = '';
+  visible.value = false;
+};
+const openAdd = () => {
+  // 打开新增标签弹窗
+  addTagRef.value.open();
+};
+
+function openEdit(record) {
+  addTagRef.value.open(record);
+}
+
+function openDelete(record) {
+  deleteTagRef.value.open(record);
+}
+
+const update = () => {
+  getData();
+  emit('update');
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
--- a/src/views/material-center/components/raw-material/components/tags-manage-modal/style.scss
+++ b/src/views/material-center/components/raw-material/components/tags-manage-modal/style.scss
@ -0,0 +1,51 @@
+.raw-material-tags-manage-modal {
+  border-radius: 8px;
+
+  .ant-modal-body {
+    // padding: 24px 24px 44px !important;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .arcanto-btn {
+      width: fit-content;
+
+      .ant-btn-icon {
+        line-height: 16px;
+      }
+    }
+
+    .tag-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+
+      .tag-item {
+        height: 24px;
+        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;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/views/material-center/components/raw-material/index.vue
+++ b/src/views/material-center/components/raw-material/index.vue
@ -1,14 +1,18 @@
 <script lang="tsx">
-import { provide } from 'vue';
-import { Tabs, TabPane, Button, Pagination } from 'ant-design-vue';
+import { provide, ref } from 'vue';
 import { TABS_LIST, RawMaterialType, INITIAL_QUERY, TABLE_COLUMNS } from './constants';
+
+import { Tabs, TabPane, Button, Pagination } from 'ant-design-vue';
 import FilterBlock from './components/filter-block/index.vue';
 import RawMaterialTable from './components/table/index.vue';
 import DeleteRawMaterialModal from './components/table/delete-file-modal.vue';
+import TagsManageModal from './components/tags-manage-modal';

 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { getRawMaterialsPage } from '@/api/all/generationWorkshop';

+import icon3 from '@/assets/img/media-account/icon-tag.png';
+
 export default defineComponent({
  setup(_, { attrs, slots, expose }) {
    const {
@ -27,6 +31,8 @@ export default defineComponent({
    });

    const deleteRawMaterialModalRef = ref(null);
+    const tagsManageModalRef = ref(null);
+
    const query = ref(cloneDeep(INITIAL_QUERY));
    const handleSearch = () => {
      getData();
@ -81,6 +87,13 @@ export default defineComponent({
      getData();
    };

+    const handleOpenTagsModal = () => {
+      tagsManageModalRef.value?.open();
+    };
+    const handleAddMaterial = () => {
+      console.log('handleAddMaterial');
+    };
+
    onMounted(() => {
      getData();
    });
@ -88,7 +101,37 @@ export default defineComponent({
    return () => (
      <div class="raw-material-wrap h-full flex flex-col">
        <div class="bg-white rounded-t-8px">
-          <Tabs v-model:activeKey={query.value.type} onTabClick={handleTabClick}>
+          <Tabs
+            v-model:activeKey={query.value.type}
+            onTabClick={handleTabClick}
+            v-slots={{
+              rightExtra: () => (
+                <div class="flex items-center">
+                  <Button
+                    type="primary"
+                    ghost
+                    size="medium"
+                    onClick={handleOpenTagsModal}
+                    v-slots={{
+                      icon: () => <img src={icon3} width="16" height="16" class="mr-8px" />,
+                    }}
+                  >
+                    标签管理
+                  </Button>
+                  <Button
+                    type="primary"
+                    size="medium"
+                    class="ml-12px"
+                    onClick={handleAddMaterial}
+                    v-slots={{
+                      icon: () => <icon-plus size="16" class="mr-8px" />,
+                      default: () => '上传原料',
+                    }}
+                  />
+                </div>
+              ),
+            }}
+          >
            {TABS_LIST.map((item) => (
              <TabPane key={item.value} tab={item.label}>
                {item.label}
@ -137,6 +180,8 @@ export default defineComponent({
            </div>
          )}
        </div>
+
+        <TagsManageModal ref={tagsManageModalRef} />
        <DeleteRawMaterialModal ref={deleteRawMaterialModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
      </div>
    );
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
@ -15,10 +15,10 @@
  >
    <div class="flex items-center justify-between mb-16px">
      <div class="filter-row-item flex items-center">
-        <span class="s1 !color-#211F24 mr-12px">分组名称</span>
+        <span class="s1 !color-#211F24 mr-12px">标签名称</span>
        <Input
          v-model:value="query.name"
-          placeholder="请搜索..."
+          placeholder="请输入..."
          class="w-240px"
          size="medium"
          allowClear