feat: 接口

wupengfei

2 天以前 f35680f356168af8d4a3d5f34456e561af40fbba

 src/views/OperationManage/components/AddOrEditAdvertisementDialog.vue

@@ -1,66 +1,46 @@
<template>
  <ProDialog
    :title="innerForm.title"
    v-model="innerVisible"
    @close="onDialogClose"
    destroy-on-close
  >
    <ProForm :rules="rules" :model="innerForm" ref="dialogForm" label-width="120px">
      <ProFormItemV2
        label="广告页面:"
        prop="pageType"
        :check-rules="[{ message: '请选择广告页面' }]"
      >
  <ProDialog :title="form.title" v-model="visible" @close="onDialogClose" destroy-on-close>
    <ProForm :model="form" ref="dialogForm" label-width="120px">
      <ProFormItemV2 label="广告页面:" prop="page" :check-rules="[{ message: '请选择广告页面' }]">
        <ProFormSelect
          placeholder="请选择广告页面"
          :value-enum="FlexWorkerEleSignEnumText"
          :value-enum="EnumAdvertisementPageText"
          clearable
          v-model="innerForm.pageType"
          v-model="form.page"
        ></ProFormSelect>
      </ProFormItemV2>
      <ProFormItemV2
        label="广告名称:"
        prop="advertiseName"
        prop="name"
        :check-rules="[{ message: '请输入广告名称' }, { max: 20, message: '不能超过20个字符' }]"
      >
        <ProFormText
          placeholder="请输入广告名称"
          v-model.trim="innerForm.advertiseName"
          v-model.trim="form.name"
          :maxlength="20"
        ></ProFormText>
      </ProFormItemV2>
      <ProFormItemV2
        label="广告产品链接:"
        prop="advertiseLink"
        :check-rules="[
          { type: 'urlWithParams', message: '请输入广告产品链接' },
          { message: '请输入正确的广告产品链接' },
        ]"
      >
      <ProFormItemV2 label="广告产品链接:" prop="url">
        <ProFormText
          placeholder="请输入广告产品链接"
          v-model.trim="innerForm.advertiseLink"
          v-model.trim="form.url"
          :maxlength="150"
        ></ProFormText>
      </ProFormItemV2>
      <ProFormItemV2
        label="广告图片:"
        prop="imgInfo"
        prop="file"
        :check-rules="[{ type: 'array', message: '请选择广告图片' }]"
      >
        <ProFormImageUpload
          :fileDirectory="OssAdvertise"
          v-model:file-url="innerForm.imgInfo"
          :limitFileCount="1"
        ></ProFormImageUpload>
        <ProFormImageUpload v-model:file-url="form.file" :limitFileCount="1"></ProFormImageUpload>
      </ProFormItemV2>
      <ProFormItemV2
        label="广告日期:"
        prop="date"
        prop="time"
        :check-rules="[{ type: 'array', message: '请选择广告日期' }]"
      >
        <ProFormDatePicker
          v-model="innerForm.date"
          v-model="form.time"
          type="daterange"
          range-separator="~"
          start-placeholder="广告起始日期"
@@ -75,7 +55,7 @@
        :check-rules="[{ message: '请输入排序' }]"
      >
        <ProFormInputNumber
          v-model="innerForm.sort"
          v-model="form.sort"
          :controls="false"
          :min="0"
          :max="99"
@@ -92,7 +72,7 @@
</template>

<script setup lang="ts">
import { FormRules, FormInstance } from 'element-plus';
import { FormInstance } from 'element-plus';
import {
  ProDialog,
  ProForm,
@@ -105,64 +85,65 @@
  ProFormImageUpload,
} from '@bole-core/components';
import { ModelValueType } from 'element-plus';
import { OssAdvertise, FlexWorkerEleSignEnumText } from '@/constants';
import { BoleRegExp } from '@bole-core/core';
import { EnumAdvertisementPageText } from '@/constants';
import { useQuery } from '@tanstack/vue-query';
import * as advertisementServices from '@/services/api/advertisement';
import { convertApi2FormUrlOnlyOne, format } from '@/utils';

defineOptions({
  name: 'AddOrEditAdvertisementDialog',
});

type Props = {
  modelValue: boolean;
  form?: {
    title?: string;
    id: string;
    pageType: number;
    advertiseName: string;
    advertiseLink: string;
    imgInfo: UploadUserFile[];
    date: ModelValueType;
    sort: number;
  };
type Form = {
  title?: string;
  id: string;
  page?: number;
  name?: string;
  url?: string;
  file?: UploadUserFile[];
  time?: ModelValueType;
  sort?: number;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});
const form = defineModel<Form>('form');
const visible = defineModel<boolean>('modelValue');

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'update:form', value: Props['form']): void;
  (e: 'onConfirm'): void;
  (e: 'onCancel'): void;
}>();

const dialogForm = ref<FormInstance>();

const innerVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
});
watch(
  () => visible.value,
  (val) => {
    if (val && form.value?.id) {
      refetch();
    }
  }
);

const innerForm = computed({
  get() {
    return props.form;
const { data: detail, refetch } = useQuery({
  queryKey: ['advertisementServices/getAdvertisement', form.value.id],
  queryFn: async () => {
    return await advertisementServices.getAdvertisement({ id: form.value.id });
  },
  set(val) {
    emit('update:form', val);
  placeholderData: () => ({} as API.GetAdvertisementQueryResult),
  enabled: computed(() => !!form.value.id),
  onSuccess(data) {
    form.value.page = data.page;
    form.value.name = data.name;
    form.value.url = data.url;
    form.value.file = data.file ? convertApi2FormUrlOnlyOne(data.file) : [];
    form.value.time = [
      format(data.beginTime, 'YYYY-MM-DD 00:00:00'),
      format(data.endTime, 'YYYY-MM-DD 23:59:59'),
    ];
    form.value.sort = data.sort;
  },
});

const rules = reactive<FormRules>({
  contacterPhone: [
    { message: '请输入正确的联系电话', trigger: 'blur', pattern: BoleRegExp.RegTelNumber },
  ],
});

function onDialogClose() {
  if (!dialogForm.value) return;
  dialogForm.value.resetFields();