@utogether/udp-core 1.0.1-beta.6 → 1.0.1-beta.8

package/src/components/udp/modal-grid.vue

@@ -1,297 +1,288 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-24 17:53:49
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-22 11:42:46
- * @Description: 共用弹框
--->
-<template>
-  <div>
-    <vxe-modal
-      v-model="showModal"
-      :title="title"
-      :width="width"
-      :height="height"
-      :loading="data.loading"
-      :show-footer="showFooter"
-      resize
-      destroy-on-close
-      @close="close"
-    >
-      <template #default>
-        <slot />
-        <vxe-grid
-          ref="xGrid"
-          v-bind="data"
-          resizable
-          v-on="attrs.events || {}"
-          @edit-activated="onEditActived"
-          @toolbarButtonClick="toolbarButtonClick"
-          @toolbarToolClick="toolbarButtonClick"
-          @cell-click="cellClick"
-        />
-      </template>
-      <template #footer>
-        <slot name="bottom" />
-        <ut-button icon="ri-close-line" status="warning" content="cancel" @tap="close" />
-        <ut-button icon="ri-save-3-line" content="confirm" @tap="onConfirm" />
-      </template>
-    </vxe-modal>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'UtModalGrid'
-};
-</script>
-<script lang="ts" setup>
-// @ts-nocheck
-import { onBeforeMount, reactive, ref, toRaw, getCurrentInstance, useAttrs } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { VxeGridProps } from 'vxe-table';
-import { formatGridItems, i18nColums, formatRules, successMessage, warnMessage } from '@utogether/utils';
-import { clone, isFunction } from 'xe-utils';
-import {
-  queryAll,
-  query,
-  del,
-  save,
-  footerSumMethod,
-  getToolBarConfig,
-  onCheckMethod,
-  getAttrs
-} from './utils';
-
-// import type { IRecord, IFormItemProps, ITableColProps } from '../../types';
-
-export interface IProps {
-  checkMethod?: Function;
-  columns: Array<ITableColProps>; // 列表行
-  defaultValue?: IRecord;
-  defaultParams?: IRecord;
-  gridOptions?: IRecord;
-  auth?: IRecord;
-  url?: string; // 查询服务路径
-  submitUrl?: string; // 确认
-  checkRowKeys?: Array<string>; // 默认选中列表
-  items?: Array<IFormItemProps>; // 查询条件
-  title?: string; // 标题
-  width?: number | string;
-  height?: number;
-  editable?: boolean; // 可编辑
-  needExport?: boolean; // 是否需要导出
-  showFooter?: boolean; // 显示底部按钮
-  addChild?: boolean; // 可编辑
-  autoClose?: boolean; // 组件自主关闭
-  autoLoad?: boolean; // 是否自动加载查询数据
-}
-const attrs: IRecord = getAttrs(useAttrs());
-
-const props = withDefaults(defineProps<IProps>(), {
-  gridOptions: () => {
-    return {};
-  },
-  items: () => [],
-  columns: () => [],
-  checkRowKeys: () => [],
-  addChild: false,
-  editable: true,
-  showFooter: false,
-  autoLoad: true,
-  needExport: true,
-  autoClose: true,
-  width: '520',
-  height: 420,
-  title: '数据记录',
-  url: '',
-  submitUrl: ''
-});
-
-const showModal = ref(false);
-
-const xGrid = ref(null);
-const instance = getCurrentInstance()!;
-
-const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
-const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
-const $mode = instance.appContext.config.globalProperties.$mode;
-
-const { t } = useI18n();
-
-/**
- * @description: colum 统一添加国家化
- */
-const getColumns = () => {
-  const col = props.columns.map(m => {
-    if (!props.editable) {
-      m.editRender = { enabled: false };
-    } else if (!m.type && !m.editRender && props.editable && !!m.editable) {
-      m.editRender = { name: 'VxeInput' };
-    }
-    return m;
-  });
-  return i18nColums(col);
-};
-
-const getItems = () => {
-  if (!props.items.length) return props.items;
-  return formatGridItems(clone(props.items, true));
-};
-
-/**
- * @description: 根据items 获取必填选
- */
-const getRules = () => {
-  if (!props.columns.length) return {};
-  return formatRules(props.columns, t);
-};
-
-const data = reactive<VxeGridProps>({
-  loading: false,
-  border: true,
-  pagerConfig: {},
-  formConfig: {},
-  toolbarConfig: { enabled: false },
-  height: 'auto',
-  editConfig: {},
-  rowConfig: { keyField: '_X_ROW_KEY' },
-  editRules: getRules(),
-  proxyConfig: {
-    form: true, // 查询是需要启用表单代理
-    autoLoad: props.autoLoad,
-    ajax: {
-      queryAll: ({ form }) => queryAll(props, serviceApi, form),
-      query: ({ page, form }) => query(props, form, page, serviceApi, $mode),
-      delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
-      save: ({ body }) => Promise.all(save(serviceApi, body, props))
-    }
-  },
-  checkboxConfig: {
-    checkMethod: ({ row }) => onCheckMethod(row, props),
-    checkRowKeys: props.checkRowKeys
-  },
-  columns: getColumns(),
-  ...props.gridOptions
-});
-
-// 确认数据
-const onConfirm = async () => {
-  let records = null;
-  const type = props.columns[0].type;
-  if (type === 'checkbox') {
-    records = xGrid.value.getCheckboxRecords();
-  } else if (type === 'radio') {
-    records = xGrid.value.getRadioRecord();
-  } else {
-    records = xGrid.value.getTableData().fullData;
-  }
-  if (type === 'checkbox' && !records.length && !props.addChild) {
-    return warnMessage(t('message.selectedRecord'));
-  } else if (type === 'radio' && !records) {
-    return warnMessage(t('message.selectedRecord'));
-  }
-  if (isFunction(attrs.beforeConfirm) && !attrs.beforeConfirm(records)) return;
-  const { submitUrl } = props;
-  // 服务submitUrl
-  if (submitUrl) {
-    showLoading();
-    let res;
-    try {
-      records.forEach(record => Object.assign(record, props.defaultParams));
-      res = await serviceApi.post(submitUrl, records);
-    } finally {
-      res && emit('confirm', res);
-      res && successMessage(t('message.operateSuccess'));
-      close();
-      hiddenLoading();
-    }
-  } else {
-    props.autoClose && close();
-    emit('confirm', records);
-  }
-};
-// 请求数据
-const refreshData = () => {
-  xGrid.value.commitProxy('query');
-};
-const refreshColumn = () => {
-  data.editRules = getRules();
-  xGrid.value.refreshColumn();
-};
-const getInstance = () => {
-  return toRaw(xGrid.value);
-};
-const cellClick = ({ row }) => {
-  const type = props.columns[0].type;
-  if (type === 'checkbox') {
-    xGrid.value.setCheckboxRow(row, true);
-  } else if (type === 'radio') {
-    xGrid.value.setRadioRow(row);
-  }
-};
-// 单元格被激活编辑激活回调
-const onEditActived = data => {
-  emit('actived', data);
-};
-const toolbarButtonClick = ({ code }) => {
-  emit('buttonClick', code);
-};
-const showLoading = () => {
-  data.loading = true;
-};
-const hiddenLoading = () => {
-  data.loading = false;
-};
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'confirm', record: any): void;
-  (e: 'actived', record: any): void;
-  (e: 'buttonClick', code: string): void;
-}>();
-// 关闭弹框
-const close = () => {
-  if (isFunction(attrs.beforeClose) && !attrs.beforeClose()) return;
-  showModal.value = false;
-  emit('close');
-};
-
-/**
- * @description: 设置grid参数
- */
-
-const setGridConfig = () => {
-  // 查询
-  if (props.items.length) {
-    data.formConfig = {
-      titleWidth: 100,
-      titleAlign: 'right',
-      items: getItems(),
-      rules: formatRules(props.items, t),
-      validConfig: { showMessage: false }
-    };
-  }
-  // tool bar
-  const obj = getToolBarConfig(data, props, attrs, hasAuthority);
-  Object.assign(data, obj);
-
-  // 合计方法
-  if (attrs.mergeFooter) {
-    data.showFooter = true;
-    data.footerMethod = ({ columns, data }) => footerSumMethod({ columns, data }, attrs.mergeFooter);
-  }
-};
-
-// 子组件需对外暴露方法
-defineExpose({
-  refreshData,
-  refreshColumn,
-  getInstance,
-  showLoading,
-  hiddenLoading,
-  close
-});
-onBeforeMount(() => {
-  showModal.value = true;
-  setGridConfig();
-});
-</script>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-24 17:53:49
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-22 11:42:46
+ * @Description: 共用弹框
+-->
+<template>
+  <div>
+    <vxe-modal
+      v-model="showModal"
+      :title="title"
+      :width="width"
+      :height="height"
+      :loading="data.loading"
+      :show-footer="showFooter"
+      resize
+      destroy-on-close
+      @close="close"
+    >
+      <template #default>
+        <slot />
+        <vxe-grid
+          ref="xGrid"
+          v-bind="data"
+          resizable
+          v-on="attrs.events || {}"
+          @edit-activated="onEditActived"
+          @toolbarButtonClick="toolbarButtonClick"
+          @toolbarToolClick="toolbarButtonClick"
+          @cell-click="cellClick"
+        />
+      </template>
+      <template #footer>
+        <slot name="bottom" />
+        <ut-button icon="ri-close-line" status="warning" content="cancel" @tap="close" />
+        <ut-button icon="ri-save-3-line" content="confirm" @tap="onConfirm" />
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'UtModalGrid'
+};
+</script>
+<script lang="ts" setup>
+// @ts-nocheck
+import { onBeforeMount, reactive, ref, toRaw, getCurrentInstance, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { VxeGridProps } from 'vxe-table';
+import { formatGridItems, i18nColums, formatRules, successMessage, warnMessage } from '@utogether/utils';
+import { clone, isFunction, merge } from 'xe-utils';
+import { queryAll, query, del, save, footerSumMethod, getToolBarConfig, onCheckMethod, getAttrs } from './utils';
+
+// import type { IRecord, IFormItemProps, ITableColProps } from '../../types';
+
+export interface IProps {
+  checkMethod?: Function;
+  columns: Array<ITableColProps>; // 列表行
+  defaultValue?: IRecord;
+  defaultParams?: IRecord;
+  gridOptions?: IRecord;
+  auth?: IRecord;
+  url?: string; // 查询服务路径
+  submitUrl?: string; // 确认
+  checkRowKeys?: Array<string>; // 默认选中列表
+  items?: Array<IFormItemProps>; // 查询条件
+  title?: string; // 标题
+  width?: number | string;
+  height?: number;
+  editable?: boolean; // 可编辑
+  needExport?: boolean; // 是否需要导出
+  showFooter?: boolean; // 显示底部按钮
+  addChild?: boolean; // 可编辑
+  autoClose?: boolean; // 组件自主关闭
+  autoLoad?: boolean; // 是否自动加载查询数据
+}
+const attrs: IRecord = getAttrs(useAttrs());
+
+const props = withDefaults(defineProps<IProps>(), {
+  gridOptions: () => {
+    return {};
+  },
+  items: () => [],
+  columns: () => [],
+  checkRowKeys: () => [],
+  addChild: false,
+  editable: true,
+  showFooter: false,
+  autoLoad: true,
+  needExport: true,
+  autoClose: true,
+  width: '520',
+  height: 420,
+  title: '数据记录',
+  url: '',
+  submitUrl: ''
+});
+
+const showModal = ref(false);
+
+const xGrid = ref(null);
+const instance = getCurrentInstance()!;
+
+const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+const $mode = instance.appContext.config.globalProperties.$mode;
+
+const { t } = useI18n();
+
+/**
+ * @description: colum 统一添加国家化
+ */
+const getColumns = () => {
+  const col = props.columns.map(m => {
+    if (!props.editable) {
+      m.editRender = { enabled: false };
+    } else if (!m.type && !m.editRender && props.editable && !!m.editable) {
+      m.editRender = { name: 'VxeInput' };
+    }
+    return m;
+  });
+  return i18nColums(col);
+};
+
+const getItems = () => {
+  if (!props.items.length) return props.items;
+  return formatGridItems(clone(props.items, true));
+};
+
+/**
+ * @description: 根据items 获取必填选
+ */
+const getRules = () => {
+  if (!props.columns.length) return {};
+  return formatRules(props.columns, t);
+};
+
+const data = reactive<VxeGridProps>({
+  loading: false,
+  border: true,
+  pagerConfig: {},
+  formConfig: {},
+  toolbarConfig: { enabled: false },
+  height: 'auto',
+  editConfig: {},
+  rowConfig: { keyField: '_X_ROW_KEY' },
+  editRules: getRules(),
+  proxyConfig: {
+    form: true, // 查询是需要启用表单代理
+    autoLoad: props.autoLoad,
+    ajax: {
+      queryAll: ({ form }) => queryAll(props, serviceApi, form),
+      query: ({ page, form }) => query(props, form, page, serviceApi, $mode),
+      delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
+      save: ({ body }) => Promise.all(save(serviceApi, body, props))
+    }
+  },
+  checkboxConfig: {
+    checkMethod: ({ row }) => onCheckMethod(row, props),
+    checkRowKeys: props.checkRowKeys
+  },
+  columns: getColumns()
+});
+
+// 确认数据
+const onConfirm = async () => {
+  let records = null;
+  const type = props.columns[0].type;
+  if (type === 'checkbox') {
+    records = xGrid.value.getCheckboxRecords();
+  } else if (type === 'radio') {
+    records = xGrid.value.getRadioRecord();
+  } else {
+    records = xGrid.value.getTableData().fullData;
+  }
+  if (type === 'checkbox' && !records.length && !props.addChild) {
+    return warnMessage(t('message.selectedRecord'));
+  } else if (type === 'radio' && !records) {
+    return warnMessage(t('message.selectedRecord'));
+  }
+  if (isFunction(attrs.beforeConfirm) && !attrs.beforeConfirm(records)) return;
+  const { submitUrl } = props;
+  // 服务submitUrl
+  if (submitUrl) {
+    showLoading();
+    let res;
+    try {
+      records.forEach(record => Object.assign(record, props.defaultParams));
+      res = await serviceApi.post(submitUrl, records);
+    } finally {
+      res && emit('confirm', res);
+      res && successMessage(t('message.operateSuccess'));
+      close();
+      hiddenLoading();
+    }
+  } else {
+    props.autoClose && close();
+    emit('confirm', records);
+  }
+};
+// 请求数据
+const refreshData = () => {
+  xGrid.value.commitProxy('query');
+};
+const refreshColumn = () => {
+  data.editRules = getRules();
+  xGrid.value.refreshColumn();
+};
+const getInstance = () => {
+  return toRaw(xGrid.value);
+};
+const cellClick = ({ row }) => {
+  const type = props.columns[0].type;
+  if (type === 'checkbox') {
+    xGrid.value.setCheckboxRow(row, true);
+  } else if (type === 'radio') {
+    xGrid.value.setRadioRow(row);
+  }
+};
+// 单元格被激活编辑激活回调
+const onEditActived = data => {
+  emit('actived', data);
+};
+const toolbarButtonClick = ({ code }) => {
+  emit('buttonClick', code);
+};
+const showLoading = () => {
+  data.loading = true;
+};
+const hiddenLoading = () => {
+  data.loading = false;
+};
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm', record: any): void;
+  (e: 'actived', record: any): void;
+  (e: 'buttonClick', code: string): void;
+}>();
+// 关闭弹框
+const close = () => {
+  if (isFunction(attrs.beforeClose) && !attrs.beforeClose()) return;
+  showModal.value = false;
+  emit('close');
+};
+
+/**
+ * @description: 设置grid参数
+ */
+
+const setGridConfig = () => {
+  // 查询
+  if (props.items.length) {
+    data.formConfig = {
+      titleWidth: 100,
+      titleAlign: 'right',
+      items: getItems(),
+      rules: formatRules(props.items, t),
+      validConfig: { showMessage: false }
+    };
+  }
+  // tool bar
+  const obj = getToolBarConfig(data, props, attrs, hasAuthority);
+  Object.assign(data, obj);
+
+  // 合计方法
+  if (attrs.mergeFooter) {
+    data.showFooter = true;
+    data.footerMethod = ({ columns, data }) => footerSumMethod({ columns, data }, attrs.mergeFooter);
+  }
+  merge(data, props.gridOptions);
+};
+
+// 子组件需对外暴露方法
+defineExpose({
+  refreshData,
+  refreshColumn,
+  getInstance,
+  showLoading,
+  hiddenLoading,
+  close
+});
+onBeforeMount(() => {
+  showModal.value = true;
+  setGridConfig();
+});
+</script>