@corgicoding-el/dialog-form-grid/README.md

基于 @corgicoding-el/data-form-grid 和 @corgicoding-el/custom-dialog 的弹窗表单组件

# @corgicoding-el/dialog-form-grid

为 `@corgicoding/web-quick-start` 工程模板设定的远程数据下拉组件，基于 `@corgicoding-el/data-form-grid` 和 `@corgicoding-el/custom-dialog` 封装。

阅读请先参考两者使用文档

- [DataFormGrid](https://www.npmjs.com/package/@corgicoding-el/data-form-grid)
- [CustomDialog](https://www.npmjs.com/package/@corgicoding-el/custom-dialog)

## 绑定依赖

1. `@corgicoding/web-types`
   - NormalizedError: 统一错误返回
   - NormalizedResponse: 统一接口返回
2. `@corgicoding/axios-hook`
   - useService: 获取当前 axios 实例
3. `@corgicoding-el/data-form-grid`
   - 表单组件
4. `@corgicoding-el/custom-dialog`
   - 弹窗组件

## 如何使用

安装工程到本地，并按需使用或全局使用

### 前置依赖

- element-plus
- axios
- @vueuse/core
- vue (3.x)
- vue-i18n
- lodash-es

如果没有以上依赖，工程执行以下命令进行安装

```shell
pnpm install element-plus vue @vueuse/core axios lodash-es vue-i18n -S
```

### 安装

使用 `pnpm` 下载

```shell
pnpm install @corgicoding-el/dialog-form-grid -S
```

## 使用

待完善

### props入参

```ts
export type FormActionType = 'new' | 'edit' | 'detail';
export type DialogFormProps = {
  type: FormActionType; // 表单显示类型
  modelValue: boolean; // 弹窗显示
  formValue: any; // 表单双向绑定值
  configs: Array<FormGridConfig>;
  submitApi: any; // 提交触发的异步函数
  width?: number; // 宽度显示
  title: string; // 标题
  loading?: boolean; // loading
  noMessage?: boolean; // 不显示消息返回
  noTypeTitle?: boolean; // 原生title显示
  formWidth?: number | string; // 表单限制宽度
  dialogOptions?: DialogOptions; // custom-dialog配置
  configOptions?: {
    configs?: Array<FormGridConfig>; // 配置项
    labelWidth?: string | number; // 表单默认label宽度
    labelPosition?: 'left' | 'right' | 'top'; // label位置
    disabled?: boolean; // 禁用
    formName?: string; // 表单名（用于提示）
    type?: 'text' | 'form'; // 文本值显示模式 / 表单编辑模式
    autoTrim?: boolean; // 自动去除空格检验
    componentOptions?: FormProps;
    eventOptions?: FormEmits;
  };
};
```

### emits 事件

- reload
  - 提交后触发的 `reload` 事件，一般用来列表刷新

```ts
const Emits = defineEmits(['update:modelValue', 'update:formValue', 'reload']);
```

### 暴露参数

```ts
defineExpose({
  elRef: formRef,
  submitForm
});
```

## 场景说明

```vue
<script setup lang="ts">
import { DialogFormGrid } from '@corgicoding/el-libs';
import type {
  FormActionType,
  FormGridConfig
} from '@corgicoding/el-libs/types.d';
import { ref } from 'vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { addDict, editDict } from '@/services/api/system/dict';

const props = defineProps<{
  modelValue: boolean;
  type: FormActionType;
  data: any;
}>();

const { t, locale } = useI18n();
const Emits = defineEmits<{
  (event: 'update:modelValue', value: boolean): void;
  (event: 'success'): void;
}>();
const showActionDialog = computed({
  get: () => {
    return props.modelValue;
  },
  set: nv => {
    Emits('update:modelValue', nv);
  }
});

const dictTypeOptions = computed(() => [
  {
    label: t('data.string'),
    value: 0
  },
  {
    label: t('data.number'),
    value: 1
  }
]);

/**
 * @description 表单绑定值
 * @description 过滤参数
 */
const formValue = ref({
  id: props.type === 'edit' ? props.data.id : undefined,
  dictCode: props.data.dictCode,
  dictName: props.data.dictName,
  type: props.data.type || 0,
  description: props.data.description
});

/**
 * @description 表单配置定义
 */
const actionConfigs = computed<FormGridConfig[]>(() => [
  {
    type: 'input',
    name: t('system.dictName'),
    key: 'dictName',
    required: true,
    componentOptions: {
      maxlength: 100,
      showWordLimit: true
    }
  },
  {
    type: 'input',
    name: t('system.dictCode'),
    key: 'dictCode',
    required: true,
    componentOptions: {
      maxlength: 100,
      showWordLimit: true
    }
  },
  {
    type: 'radio',
    name: t('system.dictType'),
    key: 'type',
    options: dictTypeOptions.value
  },
  {
    type: 'textarea',
    name: t('system.description'),
    key: 'description',
    componentOptions: {
      rows: 6,
      maxlength: 100,
      showWordLimit: true
    }
  }
]);

/**
 * @description 提交触发函数
 */
const submitApi = computed(() => {
  return props.type === 'new' ? addDict : editDict;
});
</script>

<template>
  <DialogFormGrid
    v-model="showActionDialog"
    v-model:form-value="formValue"
    :title="t('system.dataDict')"
    :width="560"
    :type="type"
    form-width="488px"
    :configs="actionConfigs"
    :submit-api="submitApi"
    :config-options="{
      labelWidth: locale === 'en' ? '158px' : '100px'
    }"
    @reload="$emit('success')"
  ></DialogFormGrid>
</template>
```

待完善