4 changed files with 190 additions and 5 deletions
			
			
		@ -0,0 +1,58 @@
					 | 
				
			||||
<script lang="ts" setup> | 
				
			||||
import { ref, unref } from 'vue' | 
				
			||||
import { formSchema } from './tag.data' | 
				
			||||
import { useI18n } from '@/hooks/web/useI18n' | 
				
			||||
import { useMessage } from '@/hooks/web/useMessage' | 
				
			||||
import { BasicForm, useForm } from '@/components/Form' | 
				
			||||
import { BasicModal, useModalInner } from '@/components/Modal' | 
				
			||||
import { createMemberTag, getMemberTag, updateMemberTag } from '@/api/member/tag' | 
				
			||||
 | 
				
			||||
defineOptions({ name: 'MemberTagModal' }) | 
				
			||||
 | 
				
			||||
const emit = defineEmits(['success', 'register']) | 
				
			||||
const { t } = useI18n() | 
				
			||||
const { createMessage } = useMessage() | 
				
			||||
const isUpdate = ref(true) | 
				
			||||
 | 
				
			||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ | 
				
			||||
  labelWidth: 120, | 
				
			||||
  baseColProps: { span: 24 }, | 
				
			||||
  schemas: formSchema, | 
				
			||||
  showActionButtonGroup: false, | 
				
			||||
  actionColOptions: { span: 23 }, | 
				
			||||
}) | 
				
			||||
 | 
				
			||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { | 
				
			||||
  resetFields() | 
				
			||||
  setModalProps({ confirmLoading: false }) | 
				
			||||
  isUpdate.value = !!data?.isUpdate | 
				
			||||
  if (unref(isUpdate)) { | 
				
			||||
    const res = await getMemberTag(data.record.id) | 
				
			||||
    setFieldsValue({ ...res }) | 
				
			||||
  } | 
				
			||||
}) | 
				
			||||
 | 
				
			||||
async function handleSubmit() { | 
				
			||||
  try { | 
				
			||||
    const values = await validate() | 
				
			||||
    setModalProps({ confirmLoading: true }) | 
				
			||||
    if (unref(isUpdate)) | 
				
			||||
      await updateMemberTag(values) | 
				
			||||
    else | 
				
			||||
      await createMemberTag(values) | 
				
			||||
 | 
				
			||||
    closeModal() | 
				
			||||
    emit('success') | 
				
			||||
    createMessage.success(t('common.saveSuccessText')) | 
				
			||||
  } | 
				
			||||
  finally { | 
				
			||||
    setModalProps({ confirmLoading: false }) | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<template> | 
				
			||||
  <BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit"> | 
				
			||||
    <BasicForm @register="registerForm" /> | 
				
			||||
  </BasicModal> | 
				
			||||
</template> | 
				
			||||
@ -1,3 +1,78 @@
					 | 
				
			||||
<script lang="ts" setup> | 
				
			||||
defineOptions({ name: 'MemberPointConfig' }) | 
				
			||||
import TagModal from './TagModal.vue' | 
				
			||||
import { columns, searchFormSchema } from './tag.data' | 
				
			||||
import { useI18n } from '@/hooks/web/useI18n' | 
				
			||||
import { useMessage } from '@/hooks/web/useMessage' | 
				
			||||
import { useModal } from '@/components/Modal' | 
				
			||||
import { IconEnum } from '@/enums/appEnum' | 
				
			||||
import { BasicTable, TableAction, useTable } from '@/components/Table' | 
				
			||||
import { deleteMemberTag, getMemberTagPage } from '@/api/member/tag' | 
				
			||||
 | 
				
			||||
defineOptions({ name: 'MemberTag' }) | 
				
			||||
 | 
				
			||||
const { t } = useI18n() | 
				
			||||
const { createMessage } = useMessage() | 
				
			||||
const [registerModal, { openModal }] = useModal() | 
				
			||||
const [registerTable, { reload }] = useTable({ | 
				
			||||
  title: '标签列表', | 
				
			||||
  api: getMemberTagPage, | 
				
			||||
  columns, | 
				
			||||
  formConfig: { labelWidth: 120, schemas: searchFormSchema }, | 
				
			||||
  useSearchForm: true, | 
				
			||||
  showTableSetting: true, | 
				
			||||
  showIndexColumn: false, | 
				
			||||
  actionColumn: { | 
				
			||||
    width: 140, | 
				
			||||
    title: t('common.action'), | 
				
			||||
    dataIndex: 'action', | 
				
			||||
    fixed: 'right', | 
				
			||||
  }, | 
				
			||||
}) | 
				
			||||
 | 
				
			||||
function handleCreate() { | 
				
			||||
  openModal(true, { isUpdate: false }) | 
				
			||||
} | 
				
			||||
 | 
				
			||||
function handleEdit(record: Recordable) { | 
				
			||||
  openModal(true, { record, isUpdate: true }) | 
				
			||||
} | 
				
			||||
 | 
				
			||||
async function handleDelete(record: Recordable) { | 
				
			||||
  await deleteMemberTag(record.id) | 
				
			||||
  createMessage.success(t('common.delSuccessText')) | 
				
			||||
  reload() | 
				
			||||
} | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<template> | 
				
			||||
  <div> | 
				
			||||
    <BasicTable @register="registerTable"> | 
				
			||||
      <template #toolbar> | 
				
			||||
        <a-button v-auth="['system:notice:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> | 
				
			||||
          {{ t('action.create') }} | 
				
			||||
        </a-button> | 
				
			||||
      </template> | 
				
			||||
      <template #bodyCell="{ column, record }"> | 
				
			||||
        <template v-if="column.key === 'action'"> | 
				
			||||
          <TableAction | 
				
			||||
            :actions="[ | 
				
			||||
              { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'system:notice:update', onClick: handleEdit.bind(null, record) }, | 
				
			||||
              { | 
				
			||||
                icon: IconEnum.DELETE, | 
				
			||||
                color: 'error', | 
				
			||||
                label: t('action.delete'), | 
				
			||||
                auth: 'system:notice:delete', | 
				
			||||
                popConfirm: { | 
				
			||||
                  title: t('common.delMessage'), | 
				
			||||
                  placement: 'left', | 
				
			||||
                  confirm: handleDelete.bind(null, record), | 
				
			||||
                }, | 
				
			||||
              }, | 
				
			||||
            ]" | 
				
			||||
          /> | 
				
			||||
        </template> | 
				
			||||
      </template> | 
				
			||||
    </BasicTable> | 
				
			||||
    <TagModal @register="registerModal" @success="reload()" /> | 
				
			||||
  </div> | 
				
			||||
</template> | 
				
			||||
					 | 
				
			||||
@ -0,0 +1,52 @@
					 | 
				
			||||
import type { BasicColumn, FormSchema } from '@/components/Table' | 
				
			||||
import { useRender } from '@/components/Table' | 
				
			||||
 | 
				
			||||
export const columns: BasicColumn[] = [ | 
				
			||||
  { | 
				
			||||
    title: '编号', | 
				
			||||
    dataIndex: 'id', | 
				
			||||
    width: 100, | 
				
			||||
  }, | 
				
			||||
  { | 
				
			||||
    title: '标签名称', | 
				
			||||
    dataIndex: 'name', | 
				
			||||
    width: 180, | 
				
			||||
  }, | 
				
			||||
  { | 
				
			||||
    title: '创建时间', | 
				
			||||
    dataIndex: 'createTime', | 
				
			||||
    customRender: ({ text }) => { | 
				
			||||
      return useRender.renderDate(text) | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
] | 
				
			||||
 | 
				
			||||
export const searchFormSchema: FormSchema[] = [ | 
				
			||||
  { | 
				
			||||
    label: '标签名称', | 
				
			||||
    field: 'name', | 
				
			||||
    component: 'Input', | 
				
			||||
    colProps: { span: 8 }, | 
				
			||||
  }, | 
				
			||||
  { | 
				
			||||
    label: '创建时间', | 
				
			||||
    field: 'createTime', | 
				
			||||
    component: 'RangePicker', | 
				
			||||
    colProps: { span: 8 }, | 
				
			||||
  }, | 
				
			||||
] | 
				
			||||
 | 
				
			||||
export const formSchema: FormSchema[] = [ | 
				
			||||
  { | 
				
			||||
    label: '编号', | 
				
			||||
    field: 'id', | 
				
			||||
    show: false, | 
				
			||||
    component: 'Input', | 
				
			||||
  }, | 
				
			||||
  { | 
				
			||||
    label: '标签名称', | 
				
			||||
    field: 'name', | 
				
			||||
    required: true, | 
				
			||||
    component: 'Input', | 
				
			||||
  }, | 
				
			||||
] | 
				
			||||
		Reference in new issue