初始化项目

2024-11-14 11:06:38 +08:00
parent 988b9e6799
commit 4ffac789e1
320 changed files with 34244 additions and 0 deletions
--- a/src/views/manage/post/modules/post-operate-drawer.vue
+++ b/src/views/manage/post/modules/post-operate-drawer.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { SimpleScrollbar } from '@sa/materials';
+import { useAntdForm, useFormRules } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { enableStatusOptions } from '@/constants/business';
+import type { PostSubmitModel } from '@/service/api/post';
+
+defineOptions({
+  name: 'PostOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: AntDesign.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.SystemManage.Post | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, resetFields } = useAntdForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<AntDesign.TableOperateType, string> = {
+    add: $t('page.manage.post.addPost'),
+    edit: $t('page.manage.post.editPost')
+  };
+  return titles[props.operateType];
+});
+
+const model = ref<PostSubmitModel>(createDefaultModel());
+
+function createDefaultModel(): PostSubmitModel {
+  return {
+    postCode: '',
+    postName: '',
+    postSort: 0,
+    status: '0',
+    remark: ''
+  };
+}
+
+type RuleKey = Exclude<keyof PostSubmitModel, 'remark'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  postCode: defaultRequiredRule,
+  postName: defaultRequiredRule,
+  postSort: defaultRequiredRule,
+  status: defaultRequiredRule
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    model.value = createDefaultModel();
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    model.value = { ...props.rowData };
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  const { error } = await (props.operateType === 'edit' ? doEditPost : doAddPost)(model.value);
+
+  if (!error) {
+    $message?.success($t(props.operateType === 'add' ? 'common.addSuccess' : 'common.updateSuccess'));
+    closeDrawer();
+    emit('submitted');
+  }
+}
+
+watch(
+  () => visible.value,
+  val => {
+    if (val) {
+      handleUpdateModelWhenEdit();
+      resetFields();
+    }
+  }
+);
+</script>
+
+<template>
+  <ADrawer
+    v-model:open="visible"
+    :body-style="{ paddingRight: '0px', paddingTop: '0', paddingBottom: '0' }"
+    :title="title"
+    :width="460"
+  >
+    <SimpleScrollbar>
+      <AForm ref="formRef" py-20px pr-20px layout="vertical" :model="model" :rules="rules">
+        <AFormItem :label="$t('page.manage.post.postCode')" name="postCode">
+          <AInput v-model:value="model.postCode" :placeholder="$t('page.manage.post.form.postCode')" />
+        </AFormItem>
+        <AFormItem :label="$t('page.manage.post.postName')" name="postName">
+          <AInput v-model:value="model.postName" :placeholder="$t('page.manage.post.form.postName')" />
+        </AFormItem>
+        <AFormItem :label="$t('page.manage.post.postSort')" name="postSort">
+          <AInputNumber v-model:value="model.postSort" :placeholder="$t('page.manage.post.form.postSort')" />
+        </AFormItem>
+        <AFormItem :label="$t('page.manage.post.status')" name="status">
+          <ARadioGroup v-model:value="model.status">
+            <ARadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value">
+              {{ $t(item.label) }}
+            </ARadio>
+          </ARadioGroup>
+        </AFormItem>
+        <AFormItem :label="$t('page.manage.post.remark')" name="remark">
+          <ATextarea v-model:value="model.remark" :placeholder="$t('page.manage.post.form.remark')" />
+        </AFormItem>
+      </AForm>
+    </SimpleScrollbar>
+
+    <template #footer>
+      <div class="flex-y-center justify-end gap-12px">
+        <AButton @click="closeDrawer">{{ $t('common.cancel') }}</AButton>
+        <AButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</AButton>
+      </div>
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped>
+:deep(.ant-input-number) {
+  width: 100%;
+}
+</style>