@utogether/udp-core 1.0.1-beta.2 → 1.0.1-beta.3

package/src/components/udp/lov.vue

@@ -0,0 +1,410 @@
+<template>
+  <div class="ut-lov-wrapper">
+    <vxe-modal
+      v-if="mode === 'vxe'"
+      v-model="showLovModal"
+      :width="modalWidth"
+      :destroy-on-close="false"
+      :title="lovTitle"
+      :transfer="transfer"
+      height="66%"
+      resize
+      esc-closable
+      show-footer
+      :className="className"
+      :before-hide-method="beforeHideMethod"
+    >
+      <template #default>
+        <vxe-grid ref="xgrid" v-bind="data" resizable @cell-dblclick="onCellClick" />
+      </template>
+      <template #footer>
+        <vxe-button
+          :content="$t('message.btn.cancel')"
+          icon="ri-close-line"
+          status="warning"
+          @click="onClose"
+        />
+        <vxe-button
+          :content="$t('message.btn.confirm')"
+          icon="ri-save-3-line"
+          status="primary"
+          @click="onConfirm"
+        />
+      </template>
+    </vxe-modal>
+    <el-dialog
+      v-else
+      v-model="showLovModal"
+      :width="modalWidth"
+      :show-close="false"
+      :title="lovTitle"
+      :append-to-body="transfer"
+      draggable
+      destroy-on-close
+      close-on-press-escape
+    >
+      <template #default>
+        <div style="height: 360px">
+          <vxe-grid ref="xgrid" v-bind="data" resizable @cell-dblclick="onCellClick" />
+        </div>
+      </template>
+      <template #footer>
+        <vxe-button
+          :content="$t('message.btn.cancel')"
+          icon="ri-close-line"
+          status="warning"
+          @click="onClose"
+        />
+        <vxe-button
+          :content="$t('message.btn.confirm')"
+          icon="ri-save-3-line"
+          status="primary"
+          @click="onConfirm"
+        />
+      </template>
+    </el-dialog>
+    <vxe-input
+      v-model="record[displayName || field]"
+      :clearable="!disabled && clearable"
+      :disabled="disabled"
+      :readonly="readonly"
+      :placeholder="placeholder"
+      style="width: 100%"
+      type="search"
+      size="mini"
+      @search-click="onSeach"
+      @clear="onClear"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UtLov'
+};
+</script>
+
+<script setup lang="ts">
+// @ts-nocheck
+import { ref, reactive, getCurrentInstance } from 'vue';
+import { VxeGridProps } from 'vxe-table';
+import to from 'await-to-js';
+import { clone, toDateString, isEmpty } from 'xe-utils';
+import { useRender, cookies, delay } from '@utogether/utils';
+// import type { IFormItemProps, IRecord } from '../../types';
+
+export interface IProps {
+  record: object;
+  defaultParams?: object;
+  code: string;
+  field: string;
+  displayName?: string;
+  placeholder?: string;
+  mode?: string;
+  clearable?: boolean;
+  multiple?: boolean;
+  disabled?: boolean;
+  autoLoad?: boolean;
+  readonly?: boolean;
+  transfer?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  record: () => {
+    return {};
+  },
+  defaultParams: () => {
+    return {};
+  },
+  mode: 'vxe',
+  placeholder: '请选择',
+  clearable: true,
+  multiple: false,
+  disabled: false,
+  readonly: true,
+  autoLoad: true
+});
+
+const instance = getCurrentInstance()!;
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+
+const minWidth = 600;
+const showLovModal = ref(false);
+const modalWidth = ref(minWidth);
+const lovTitle = ref('');
+const className = ref('vxe-table--ignore-clear');
+
+const data = reactive<VxeGridProps>({
+  loading: false,
+  border: true,
+  pagerConfig: {},
+  formConfig: { titleWidth: 90, titleAlign: 'right', items: [] },
+  height: 'auto',
+  editConfig: {},
+  rowConfig: { keyField: '_X_ROW_KEY' },
+  proxyConfig: {
+    form: true, // 查询是需要启用表单代理
+    autoLoad: false,
+    response: {
+      result: 'list',
+      total: 'total'
+    },
+    ajax: {
+      query: ({ page, form }) => {
+        const commonParam = cookies.get('kCookies_param')
+          ? JSON.parse(cookies.get('kCookies_param'))
+          : {};
+        let queryParams = Object.assign({}, form, commonParam, props.defaultParams);
+        queryParams.pageNum = page?.currentPage || 1;
+        queryParams.pageSize = page?.pageSize || 20;
+        if (!props.readonly) {
+          const { field, displayName } = props;
+          // 非只读时,意味着可录入文本，此时查询是需要加上录入的文本内容作为条件
+          queryParams[displayName || field] = props.record[displayName || field];
+        }
+        // console.log(queryParams);
+        queryParams = formatterParam(queryParams);
+        if (lovData.lovType !== 'url') {
+          queryParams.lovCode = props.code;
+          return serviceApi.get('/upfm/v1/lovViewHeader/listBySql', queryParams);
+        }
+        return serviceApi.get(lovData.lovUrl, queryParams);
+      }
+    }
+  },
+  checkboxConfig: {},
+  columns: []
+});
+
+// const displayName = ref(null);
+let lovData = undefined;
+let dataList = [];
+
+const formatterParam = params => {
+  const columns = dataList.filter(col => ['date', 'month'].includes(col.fieldType) && col.isSearch);
+  columns.forEach(col => {
+    if (col.fieldType === 'date') {
+      params[col.field] = toDateString(params[col.field], 'yyyy-MM-dd 00:00:00');
+    } else if (col.fieldType === 'month') {
+      params[col.field] = toDateString(params[col.field], 'yyyy-MM');
+    }
+  });
+  return params;
+};
+// 查询字段
+const getFormItem = () => {
+  const items = clone(dataList, true).filter(col => col.isSearch === 'Y');
+  if (!items.length) return;
+  // console.log(items);
+  const isCollapse = items.length > 2;
+  const forItems: IFormItemProps[] = items
+    .sort((a, b) => a.seqNo - b.seqNo)
+    .map((item: IRecord, idx) => {
+      return {
+        field: item.colField,
+        title: item.colTitle,
+        span: 8,
+        folding: idx > 1,
+        itemRender: getItemRender(item)
+      };
+    });
+  searchBtn.collapseNode = isCollapse;
+  if (isCollapse) {
+    // 按钮设置为	折叠节点并将搜索按钮插入到第一列的最后
+    forItems.splice(2, 0, searchBtn);
+  } else {
+    forItems.push(searchBtn);
+  }
+  data.formConfig.items = forItems;
+};
+const searchBtn: IFormItemProps = {
+  span: 8,
+  align: 'right',
+  collapseNode: false,
+  itemRender: {
+    name: 'VxeButtonGroup',
+    options: [
+      {
+        type: 'submit',
+        submit: 'submit',
+        content: 'message.btn.search',
+        status: 'primary',
+        icon: 'ri-search-line'
+        // props: {
+        // },
+      },
+      {
+        type: 'reset',
+        name: 'reset',
+        content: 'message.btn.reset',
+        status: 'info',
+        icon: 'ri-refresh-line'
+        // props: {
+        // },
+      }
+    ]
+  }
+};
+
+// console.log("useRender", useRender);
+const renderHook = useRender();
+
+const getItemRender = item => {
+  if (['date', 'month'].includes(item.fieldType)) {
+    const valueFormat = item.fieldType === 'date' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM';
+    return renderHook.renderDate({ type: item.fieldType, valueFormat });
+  } else if (item.fieldType === 'dictCode') {
+    return renderHook.renderDict(item.dictCode);
+  }
+  return { name: 'VxeInput' };
+};
+
+// 获取columns
+const getColumns = () => {
+  const columns = clone(dataList, true).filter((col: IRecord) => col.isCol === 'Y');
+  const colWidth = columns.reduce((curv, prev: IRecord) => curv + +prev.colWidth, 65);
+  modalWidth.value = colWidth < minWidth ? minWidth : colWidth > 900 ? 900 : colWidth;
+  data.columns = columns
+    .sort((a, b) => a.seqNo - b.seqNo)
+    .map(col => {
+      const fieldType = col.fieldType;
+      const dictCode = ['formatDict', col.dictCode];
+      return {
+        field: col.colField,
+        title: col.colTitle,
+        minWidth: col.colWidth,
+        formatter: fieldType === 'date' ? ['formatDate'] : col.fieldType === 'dictCode' ? dictCode : null
+      };
+    });
+  if (props.multiple) {
+    data.columns.unshift({ type: 'checkbox', width: 45, align: 'center' });
+  } else {
+    data.columns.unshift({ type: 'radio', width: 45, align: 'center' });
+  }
+};
+
+// 获取grid配置
+const xgrid = ref(null);
+
+const getGridConfig = async () => {
+  console.log('88888');
+  data.loading = true;
+  const url = '/upfm/v1/lovViewHeader/detailByViewCode';
+  const [err, res]: [Error, any] = await to(serviceApi.get(url, { lovCode: props.code }));
+  data.loading = false;
+  if (err) onClose();
+  lovTitle.value = res?.lovTitle || res.lovName;
+  dataList = res.lineList;
+  lovData = res;
+  props.autoLoad && xgrid.value.commitProxy('query');
+  getColumns();
+  getFormItem();
+};
+
+const onSeach = async () => {
+  if (props.disabled) return;
+  getGridConfig();
+  await delay(64);
+  showLovModal.value = true;
+};
+
+const onClear = () => {
+  emit('clear', '');
+};
+
+// 双击
+const onCellClick = ({ row }) => {
+  const record = !props.multiple ? row : [row];
+  emit('change', record, lovData.valueField);
+  onClose();
+};
+
+const onConfirm = () => {
+  const grid = xgrid.value;
+  const record = !props.multiple ? grid.getRadioRecord() : grid.getCheckboxRecords();
+  !isEmpty(record) && emit('change', record, lovData.valueField);
+  onClose();
+};
+/** 输入框显示值 */
+// const setDisplayLabel = row => {
+//   let value = row[lovData.valueField];
+//   if (props.multiple) {
+//     value = row.map(m => m[lovData.valueField]).join();
+//   }
+//   Object.assign(props.record, { [props.field]: value });
+// };
+
+// 关闭Lov
+const onClose = () => {
+  dataList.length = 0;
+  showLovModal.value = false;
+};
+
+const beforeHideMethod = ({ type }) => {
+  // console.log("cccc", type);
+};
+
+const emit = defineEmits<{
+  (e: 'clear', str: ''): void;
+  (e: 'change', record: any, field: string): void;
+}>();
+</script>
+
+<style lang="scss">
+.ut-lov-wrapper {
+  .vxe-pager .vxe-pager--sizes {
+    display: inline-block;
+    width: 7em !important;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .el-dialog__header {
+    padding: 0.6em 4.6em 0.6em 1em;
+    margin-right: 0;
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #ebeef5;
+
+    .el-dialog__title {
+      font-size: 1.1em;
+      font-weight: 600;
+      color: #000 !important;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 5px 6px;
+  }
+
+  .el-dialog__footer {
+    padding: 5px 6px;
+  }
+
+  .vxe-grid {
+    .vxe-form {
+      .vxe-form--item {
+        .vxe-form--item-title-label {
+          font-weight: 500 !important;
+          color: #000 !important;
+        }
+
+        .vxe-input--date-picker-suffix {
+          color: #000 !important;
+        }
+      }
+    }
+
+    .vxe-cell {
+      .vxe-cell--label {
+        font-weight: 500 !important;
+        color: #000 !important;
+      }
+    }
+  }
+
+  .vxe-input {
+    i[class*='vxe-icon-'] {
+      color: #6a6a6a !important;
+    }
+  }
+}
+</style>

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

@@ -49,9 +49,9 @@ export default {
 <script lang="ts" setup>
 import { onBeforeMount, ref, computed, getCurrentInstance, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { getAttrs, formatItems } from './utils';
+import { getAttrs } from './utils';
 import to from 'await-to-js';
-import { formatRules, successMessage } from '@utogether/utils';
+import { formatRules, successMessage, formatItems } from '@utogether/utils';
 
 // import type { IRecord, IFormItemProps } from '../../types';
 

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

@@ -0,0 +1,297 @@
+<!--
+ * @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>