实习笔记②

1
const formOptions: VbenFormProps = {
2
  commonConfig: {
3
    labelWidth: 80,
4
    componentProps: {
5
      allowClear: true,
6
    },
7
  },
8
  schema: querySchema(),
9
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
10
  fieldMappingTime: [
11
    [
12
      'uploadTime',
13
      ['params[beginTime]', 'params[endTime]'],
14
      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
15
    ],
16
  ],
17
};

1
const gridOptions: VxeGridProps = {
2
  checkboxConfig: {
3
    highlight: true,
4
    reserve: true,
5
  },
6
  columns,
7
  height: 'auto',
8
  border: true,
9
  keepSource: true,
10
  pagerConfig: {},
11
  proxyConfig: {
12
    ajax: {
13
      query: async ({ page }, formValues = {}) => {
14
        return await popularizationResourceList({
15
          pageNum: page.currentPage,
16
          pageSize: page.pageSize,
17
          ...formValues,
18
          sourceDeptId: getAllDeptId() ?? ''
19
        });
20
      },
21
    },
22
  },
23
  rowConfig: {
24
    keyField: 'id',
25
  },
26
  id: 'resources-upload-index',
27
};

1
<template>
2
  <Page :auto-content-height="true">
3
    <BasicTable table-title="资源列表">
4
      <template #toolbar-tools>
5
        <Space>
6
          <a-button type="primary" @click="handleAdd">
7
            {{ $t('pages.common.add') }}
8
          </a-button>
9
          <a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary" @click="handleMultiDelete">
10
            {{ $t('pages.common.delete') }}
11
          </a-button>
12
        </Space>
13
      </template>
14
      <template #action="{ row }">
15
        <Space>
16
          <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
17
          <ghost-button @click.stop="handleEdit(row)">
18
            {{ $t('pages.common.edit') }}
19
          </ghost-button>
20
        </Space>
21
      </template>
22
    </BasicTable>
23
  </Page>
24
</template>

1
async function getDictData() {
2
  const res = await dictDataList({
3
    dictType: 'popularization_resource_category',
4
  });
5
  const res2 = await dictDataList({
6
    dictType: 'popularization_resource_tags',
7
  });
8
  let data = res.rows || [];
9
  let data2 = res2.rows || [];
10
  if (data.length) {
11
    data = JSON.parse(
12
      JSON.stringify(data)
13
        .replace(/dictLabel/g, 'label')
14
        .replace(/dictValue/g, 'value'),
15
    );
16
  }
17
  if (data2.length) {
18
    data2 = JSON.parse(
19
      JSON.stringify(data2)
20
        .replace(/dictLabel/g, 'label')
21
        .replace(/dictValue/g, 'value'),
22
    );
23
  }
24
  categoryOptions.value = data as [];
25
  tagOptions.value = data2 as [];
26
}

1
const INITIAL_FORM_DATA = {
2
  id: undefined,
3
  resourceCategory: undefined,
4
  resourceTags: undefined,
5
  resourceType: undefined,
6
  resourceName: undefined,
7
  imageFileId: undefined,
8
  resourceContent: undefined,
9
  resourceFileId: undefined,
10
  imageFileIds: [] as string[],
11
  resourceFileIds: undefined as string[] | undefined,
12
  audioResourceFileIds: undefined as string[] | undefined,
13
  videoResourceFileIds: undefined as string | undefined,
14
};
15
const formData = ref({...INITIAL_FORM_DATA});

1
async function initFormData() {
2
  const id = route.query.id as '';
3
  const resource = await queryPopularizationResourceById(id);
4
  formData.value = resource;
5
  formData.value.resourceTags =
6
    formData.value.resourceTags && parseAndConvert(formData.value.resourceTags);
7
  if (formData.value.imageFileId) {
8
    let params = {
9
      bizId: formData.value.imageFileId,
10
    };
11
    const res = await fileData(params);
12
    formData.value.imageFileIds = res.rows[0].ossId;
13
  }
14
  if (formData.value.resourceFileId) {
15
    let params = {
16
      bizId: formData.value.resourceFileId,
17
    };
18
    const res = await fileData(params);
19
    let tempResourceIds = res.rows?.map((item: any) => {
20
      return item.ossId;
21
    });
22
    if (formData.value.resourceType == '3') {
23
      formData.value.videoResourceFileIds = tempResourceIds?.toString();
24
    }
25
    if (formData.value.resourceType == '2') {
26
      formData.value.audioResourceFileIds = tempResourceIds;
27
    }
28
  }
29
}

1
function handleSubmit() {
2
  formRef.value
3
    .validate()
4
    .then(async () => {
5
      let tags = formData.value.resourceTags || [];
6
      let resourceFileIds = undefined;
7
      if (formData.value.resourceType == '2') {
8
        resourceFileIds = formData.value.audioResourceFileIds;
9
      }
10
      if (formData.value.resourceType == '3') {
11
        resourceFileIds = formData.value.videoResourceFileIds?.length
12
          ? [formData.value.videoResourceFileIds]
13
          : undefined;
14
      }
15
      const allDept = getAllDept();
16
      let params = {
17
        id: formData.value.id,
18
        resourceCategory: formData.value.resourceCategory,
19
        resourceTags: `[${tags.join(',')}]`,
20
        resourceType: formData.value.resourceType,
21
        resourceName: formData.value.resourceName,
22
        resourceContent:
23
          formData.value.resourceType == '1'
24
            ? formData.value.resourceContent
25
            : undefined,
26
        imageFileIds: [formData.value.imageFileIds],
27
        resourceFileIds: resourceFileIds,
28
        audioResourceFileIds: undefined,
29
        videoResourceFileIds: undefined,
30
        sourceDeptId: allDept?.deptId ?? '',
31
        sourceDeptName: allDept?.deptName ?? ''
32
      };
33
      if (params.id) {
34
        //添加异步
35
        await update(params);
36
      } else {
37
        await add(params);
38
      }
39
      handleBack();//添加await后会等待接口响应
40
    })
41
    .catch((error: any) => {
42
      console.log('error', error);
43
    });
44
}

1
<template>
2
  <Page :auto-content-height="true">
3
    <a-card title="科普资源上传">
4
      <a-form
5
        ref="formRef"
6
        :rules="formRules"
7
        :style="{ width: '80%' }"
8
        :model="formData"
9
        :label-col="{ span: 4 }"
10
        :wrapper-col="{ span: 20 }"
11
        autocomplete="off"
12
      >
13
        <a-form-item label="资源名称" name="resourceName">
14
          <a-input v-model:value="formData.resourceName" placeholder="请输入"></a-input>
15
        </a-form-item>
16
        <a-form-item label="所属分类" name="resourceCategory">
17
          <a-select v-model:value="formData.resourceCategory" :options="categoryOptions" placeholder="请选择"></a-select>
18
        </a-form-item>
19
        <a-form-item label="资源标签" name="resourceTags">
20
          <a-select mode="multiple" v-model:value="formData.resourceTags" :options="tagOptions" placeholder="请选择"></a-select>
21
        </a-form-item>
22
        <a-form-item label="资源类型" name="resourceType">
23
          <a-radio-group v-model:value="formData.resourceType" :options="typeOptions" />
24
        </a-form-item>
25
        <a-form-item label="资源封面" name="imageFileIds">
26
          <ImageUpload :multiple="true" :max-count="1" :max-size="5" accept=".png,.jpg,.svg,.gif" v-model:value="formData.imageFileIds">
27
            <template #helpMessage>
28
              <div class="upload-help-message">支持格式：.png，.jpg，.svg，.gif，单个文件不超过5MB</div>
29
            </template>
30
          </ImageUpload>
31
        </a-form-item>
32
        <a-form-item label="文章正文" name="resourceContent" v-if="formData.resourceType == '1'">
33
          <Tinymce v-model="formData.resourceContent"></Tinymce>
34
        </a-form-item>
35
        <a-form-item label="选择文件" name="resourceFileIds" v-if="formData.resourceType == '2'">
36
          <FileUpload :multiple="true" :max-count="10" :max-size="20" accept=".mp3,.wav,.ogg" v-model:value="formData.audioResourceFileIds">
37
            <template #helpMessage>
38
              <div class="upload-help-message">支持格式：.mp3，.wav，.ogg，限制20MB</div>
39
            </template>
40
          </FileUpload>
41
        </a-form-item>
42
        <a-form-item label="选择文件" name="resourceFileIds" v-if="formData.resourceType == '3'">
43
          <FileUpload :max-count="1" :max-size="100" accept=".mp4,.mov" v-model:value="formData.videoResourceFileIds">
44
            <template #helpMessage>
45
              <div class="upload-help-message">支持格式：.mp4，.mov，限制100MB</div>
46
            </template>
47
          </FileUpload>
48
        </a-form-item>
49
      </a-form>
50
      <div class="form-footer">
51
        <a-button @click="handleBack">取消</a-button>
52
        <a-button type="primary" style="margin-left: 40px !important" @click="handleSubmit">提交</a-button>
53
      </div>
54
    </a-card>
55
  </Page>
56
</template>

1
export const querySchema: FormSchemaGetter = () => [
2
  {
3
    component: 'Input',
4
    fieldName: 'resourceName',
5
    label: '资源名称',
6
  },
7
  {
8
    component: 'RangePicker',
9
    fieldName: 'uploadTime',
10
    label: '上传时间',
11
  },
12
  {
13
    component: 'Select',
14
    fieldName: 'resourceStatus',
15
    label: '审核状态',
16
    defaultValue: '',
17
    componentProps: {
18
      getPopupContainer,
19
      options: statusOptions,
20
    },
21
  },
22
];

1
export const columns: VxeGridProps['columns'] = [
2
  { type: 'checkbox', width: 60, align: 'left' },
3
  { title: '资源名称', field: 'resourceName', align: 'left' },
4
  { title: '发布单位', field: 'sourceDeptName', align: 'left', width: 300 },
5
  { title: '上传时间', field: 'uploadTime', align: 'left', width: 200 },
6
  {
7
    title: '审核状态',
8
    field: 'resourceStatus',
9
    align: 'left',
10
    width: 120,
11
    slots: {
12
      default: ({ row }) => {
13
        if (row.resourceStatus) {
14
          return getLabelByValue(row.resourceStatus);
15
        } else {
16
          return '/';
17
        }
18
      },
19
    },
20
  },
21
  {
22
    field: 'action',
23
    fixed: 'right',
24
    width: 'auto',
25
    align: 'left',
26
    slots: { default: 'action' },
27
    title: '操作',
28
    resizable: false,
29
  },
30
];