Browse Source

feat: 添加用户标签创建和删除功能,优化数据表单组件

EvilDragon 3 months ago
parent
commit
4ddc06b723

+ 1 - 0
packages/app/src/components/data-form.ts

@@ -11,6 +11,7 @@ export interface DataFormSchema {
   [key: symbol | string]: {
     type: 'TextField' | 'Select' | 'Radio' | 'Submit' | 'TimePick' | 'Textarea' | 'Checkbox'
     label?: string
+    hiddenLabel?: boolean
     existing?: boolean
     props?: DataFormProps
   }

+ 5 - 3
packages/app/src/components/data-form.vue

@@ -16,7 +16,7 @@ withDefaults(
     schema: DataFormSchema
     direction?: 'horizontal' | 'vertical'
   }>(),
-  { direction: 'vertical' },
+  { direction: 'vertical', labelShow: true },
 )
 const emits = defineEmits(['submit'])
 const form = ref()
@@ -88,7 +88,9 @@ defineExpose({
   <wd-config-provider :theme-vars="themeVars">
     <wd-form ref="form" :model="modelValue">
       <template
-        v-for="([prop, { type, label, existing, props }], index) in Object.entries(schema)"
+        v-for="([prop, { type, label, hiddenLabel, existing, props }], index) in Object.entries(
+          schema,
+        )"
         :key="index"
       >
         <div
@@ -102,7 +104,7 @@ defineExpose({
           "
         >
           <label
-            v-if="type !== 'Submit'"
+            v-if="type !== 'Submit' && !hiddenLabel"
             class="text-sm font-normal leading-relaxed"
             :class="[direction === 'horizontal' ? 'text-black/60' : 'mb-1 text-black/40']"
             :for="prop"

+ 15 - 0
packages/app/src/core/libs/requests.ts

@@ -294,6 +294,21 @@ export const getMemberTags = (query: { stylistId: string }) =>
       createTime: string
     }[]
   >('/app-api/member/circle/pageUerTag', query)
+/**
+ * 创建用户标签
+ */
+export const createMemberTag = (
+  data: Partial<{
+    stylistId: number
+    stylistName: string
+    tagName: string
+  }>,
+) => httpPost('/app-api/member/circle/createUserTag', data)
+/**
+ * 删除用户标签
+ */
+export const deleteMemberTag = (id: string) =>
+  httpDelete('/app-api/member/circle/deleteUserTag', { id })
 export const getSetIndexConfigs = (query = {}) =>
   httpGet<{
     list: {

+ 64 - 17
packages/app/src/pages/publish/tags/index.vue

@@ -5,17 +5,26 @@ style:
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { getByDictType, getCircleTags, getMemberTags } from '../../../core/libs/requests'
+import {
+  createMemberTag,
+  deleteMemberTag,
+  getByDictType,
+  getCircleTags,
+  getMemberTags,
+} from '../../../core/libs/requests'
 import { DictType } from '../../../core/libs/models'
 import { ref } from 'vue'
 import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import { useMessage } from 'wot-design-uni'
 import FormMessageBox from '@/components/form-message-box.vue'
+import { requestToast } from '../../../core/utils/common'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const { confirm } = useMessage('wd-message-box-slot')
+const { confirm: deleteConfirm } = useMessage()
+const formData = ref({})
 const { data: tagTypes, run: setTagTypes } = useRequest(() => getByDictType(DictType.circleTag), {
   initialData: [],
 })
@@ -45,19 +54,40 @@ const handleAddTag = async () => {
   await confirm({
     title: '添加标签',
     beforeConfirm: async ({ resolve }) => {
-      // if (!cancelReason.value) {
-      //   resolve(false)
-      //   uni.showToast({ title: '请输入驳回原因', icon: 'none' })
-      //   return
-      // }
-      // await requestToast(
-      //   () =>
-      //     orderPointsCancel({
-      //       id: message.businessId.toString(),
-      //       cancelReason: cancelReason.value,
-      //     }),
-      //   { success: true, successTitle: '积分确认已驳回' },
-      // )
+      const { code } = await requestToast(
+        () =>
+          createMemberTag({
+            ...formData.value,
+            stylistId: userInfo.value?.userId,
+            stylistName: userInfo.value?.nickname,
+          }),
+        {
+          success: true,
+          successTitle: '添加成功',
+        },
+      )
+      if (code === 0) {
+        await setMemberTags()
+        formData.value = {}
+        resolve(true)
+      }
+      resolve(false)
+    },
+  })
+}
+const handleDeleteTag = async (tag: any) => {
+  deleteConfirm({
+    title: '删除标签',
+    msg: '确定删除该标签吗?',
+    beforeConfirm: async ({ resolve }) => {
+      const { code } = await requestToast(() => deleteMemberTag(tag.id), {
+        success: true,
+        successTitle: '删除成功',
+      })
+      if (code === 0) {
+        await setMemberTags()
+        resolve(true)
+      }
       resolve(false)
     },
   })
@@ -96,8 +126,22 @@ onLoad(async (query: { tagName: string }) => {
     <SectionHeading title="自定义标签" custom-class="my-6" size="base"></SectionHeading>
     <div class="flex flex-wrap">
       <template v-for="(it, i) in memberTags" :key="i">
-        <div>
-          <wd-tag custom-class="m-1">{{ it.tagName }}</wd-tag>
+        <div class="relative">
+          <div class="absolute right-0">
+            <div
+              class="w-5 h-5 bg-red-6 rounded-full flex items-center justify-center"
+              @click="handleDeleteTag(it)"
+            >
+              <wd-icon name="close" color="#fff" size="12"></wd-icon>
+            </div>
+          </div>
+          <wd-tag
+            custom-class="m-1"
+            @click="handleClick(it.tagName)"
+            :type="selected.includes(it.tagName) ? 'primary' : 'default'"
+          >
+            {{ it.tagName }}
+          </wd-tag>
         </div>
       </template>
       <wd-tag custom-class="m-1" @click="handleAddTag">
@@ -106,6 +150,9 @@ onLoad(async (query: { tagName: string }) => {
     </div>
     <div class="flex-1"></div>
     <div><wd-button block :round="false" @click="handleSubmit()">确定</wd-button></div>
-    <FormMessageBox :schema="{ test: { type: 'TextField' } }"></FormMessageBox>
+    <FormMessageBox
+      v-model="formData"
+      :schema="{ tagName: { type: 'TextField', label: '标签', hiddenLabel: true } }"
+    ></FormMessageBox>
   </div>
 </template>