@utogether/udp-core 2.0.0-beta.24 → 2.0.0-beta.25

package/src/api/index.ts

@@ -1,51 +1,51 @@
-/*
- * @Author: wei.li
- * @Date: 2021-11-17 16:24:43
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2026-03-31 10:11:22
- * @Description: API封装
- */
-import { http } from '@utogether/utils';
-// import { http } from '../utils/udp/http';
-import { getEnv } from '../config';
-
-// 路由相关服务
-export const getServiceApi = () => {
-  return {
-    post: (url: string, data: object, config?) => http.post(`${getBaseURL(url)}${url}`, data, config),
-    get: (url: string, params: object, config?) => http.get(`${getBaseURL(url)}${url}`, params, config),
-    put: (url: string, params: object) => http.put(`${getBaseURL(url)}${url}`, params),
-    delete: (url: string, params: object) => http.delete(`${getBaseURL(url)}${url}`, params)
-  };
-};
-
-export const setRouter = router => {
-  http.setRouter(router);
-};
-export const setBaseUrl = router => {
-  http.setBaseUrl(router);
-};
-
-const origin = window.location.origin + '/gateway';
-
-export const getBaseURL = (url?) => {
-  const whiteList = ['/uums/', '/upfm/', '/urpt/', '/usch/'];
-  if (url && getEnv().VITE_DEBUG === 'true' && !whiteList.some(item => url.includes(item))) {
-    return getEnv().VITE_DEBUG_URL;
-  }
-  return getEnv().VITE_BASE_URL === 'origin' ? origin : getEnv().VITE_BASE_URL;
-};
-
-export const getDebugBaseURL = () => {
-  console.log('getDebugBaseURL', getDebugURL());
-  return {
-    post: (url: string, data: object, config?) => http.post(`${getDebugURL()}${url}`, data, config),
-    get: (url: string, params: object, config?) => http.get(`${getDebugURL()}${url}`, params, config),
-    put: (url: string, params: object) => http.put(`${getDebugURL()}${url}`, params),
-    delete: (url: string, params: object) => http.delete(`${getDebugURL()}${url}`, params)
-  };
-};
-
-const getDebugURL = () => {
-  return getEnv().VITE_DEBUG_URL;
-};
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:24:43
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2026-03-31 10:11:22
+ * @Description: API封装
+ */
+import { http } from '@utogether/utils';
+// import { http } from '../utils/udp/http';
+import { getEnv } from '../config';
+
+// 路由相关服务
+export const getServiceApi = () => {
+  return {
+    post: (url: string, data: object, config?) => http.post(`${getBaseURL(url)}${url}`, data, config),
+    get: (url: string, params: object, config?) => http.get(`${getBaseURL(url)}${url}`, params, config),
+    put: (url: string, params: object) => http.put(`${getBaseURL(url)}${url}`, params),
+    delete: (url: string, params: object) => http.delete(`${getBaseURL(url)}${url}`, params)
+  };
+};
+
+export const setRouter = router => {
+  http.setRouter(router);
+};
+export const setBaseUrl = router => {
+  http.setBaseUrl(router);
+};
+
+const origin = window.location.origin + '/gateway';
+
+export const getBaseURL = (url?) => {
+  const whiteList = ['/uath/', '/uwfl/', '/uums/', '/upfm/', '/urpt/', '/usch/'];
+  if (url && getEnv().VITE_DEBUG === 'true' && !whiteList.some(item => url.includes(item))) {
+    return getEnv().VITE_DEBUG_URL;
+  }
+  return getEnv().VITE_BASE_URL === 'origin' ? origin : getEnv().VITE_BASE_URL;
+};
+
+export const getDebugBaseURL = () => {
+  console.log('getDebugBaseURL', getDebugURL());
+  return {
+    post: (url: string, data: object, config?) => http.post(`${getDebugURL()}${url}`, data, config),
+    get: (url: string, params: object, config?) => http.get(`${getDebugURL()}${url}`, params, config),
+    put: (url: string, params: object) => http.put(`${getDebugURL()}${url}`, params),
+    delete: (url: string, params: object) => http.delete(`${getDebugURL()}${url}`, params)
+  };
+};
+
+const getDebugURL = () => {
+  return getEnv().VITE_DEBUG_URL;
+};

package/src/components/udp/index.ts

@@ -1,8 +1,9 @@
-import UtGrid2 from './grid/index.vue';
-import UtForm2 from './form/form.vue';
-import UtContent2 from './content/index.vue';
-import FormUpload2 from './form-upload/form-upload.vue';
-import UtStampBadge2 from './ut-stamp-badge/index.vue';
-import UtUpload2 from './upload/index.vue';
-
-export { UtGrid2, UtForm2, UtContent2, FormUpload2, UtStampBadge2, UtUpload2 };
+import UtGrid2 from './grid/index.vue';
+import UtForm2 from './form/form.vue';
+import UtContent2 from './content/index.vue';
+import FormUpload2 from './form-upload/form-upload.vue';
+import UtStampBadge2 from './ut-stamp-badge/index.vue';
+import UtUpload2 from './upload/index.vue';
+import UtLov2 from './lov/index.vue';
+
+export { UtGrid2, UtForm2, UtContent2, FormUpload2, UtStampBadge2, UtUpload2, UtLov2 };

package/src/components/udp/lov/index.vue

@@ -0,0 +1,430 @@
+<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="80%"
+      resize
+      esc-closable
+      show-footer
+      :class-name="className"
+      :before-hide-method="beforeHideMethod"
+    >
+      <template #default>
+        <vxe-grid ref="xgrid" v-bind="data" @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"
+            :column-config="{ resizable: true }"
+            @cell-dblclick="onCellClick"
+            @columns-change="onColumnChange"
+          />
+        </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"
+      :editable="editable"
+      :placeholder="placeholder"
+      style="width: 100%"
+      type="search"
+      @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, nextTick } from 'vue';
+import { VxeGridProps } from 'vxe-table';
+import to from 'await-to-js';
+import { clone, toDateString, isEmpty, isFunction } 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;
+  editable?: boolean;
+  transfer?: boolean;
+  checkMethod?: Function;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  record: () => {
+    return {};
+  },
+  defaultParams: () => {
+    return {};
+  },
+  mode: 'vxe',
+  placeholder: '请选择',
+  clearable: true,
+  multiple: false,
+  disabled: false,
+  editable: false,
+  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' },
+  columnConfig: {
+    resizable: true,
+    // 鼠标移到行是否要高亮显示
+    isHover: true
+  },
+  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')) : {};
+        const params = { pageNum: page.currentPage, pageSize: page.pageSize };
+        let queryParams = Object.assign(params, commonParam, props.defaultParams, form);
+        if (!props.readonly) {
+          const { field, displayName } = props;
+          // 非只读时,意味着可录入文本，此时查询是需要加上录入的文本内容作为条件
+          queryParams[displayName || field] = props.record[displayName || field];
+        }
+        // console.log(queryParams);
+        queryParams = formatterParam(queryParams);
+        // console.log("-------------------------------------");
+        // console.log("lovData=", lovData);
+        // console.log("-------------------------------------");
+        if (lovData.lovType !== 'url') {
+          queryParams.lovCode = props.code;
+          return serviceApi.get('/upfm/v1/lovViewHeader/listBySql', queryParams);
+        }
+        return serviceApi.get(lovData.lovUrl, queryParams);
+      }
+    }
+  },
+  checkboxConfig: {
+    checkMethod: ({ row }) => onCheckMethod(row, props)
+  },
+  radioConfig: {
+    checkMethod: ({ row }) => onCheckMethod(row, props)
+  },
+  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 () => {
+  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();
+  data.loading = true;
+  lovTitle.value = res?.lovTitle || res?.lovName;
+  dataList = res?.lineList || [];
+  lovData = res;
+  getColumns();
+  getFormItem();
+  await delay(30);
+  await nextTick();
+  // console.log("-------------------------------------");
+  // console.log("props=", props);
+  // console.log("xgrid=", xgrid.value);
+  // console.log("-------------------------------------");
+  props.autoLoad && xgrid.value?.commitProxy('query');
+  data.loading = false;
+};
+
+const onCheckMethod = (row, props) => {
+  if (isFunction(props.checkMethod)) {
+    return props.checkMethod(row);
+  }
+  return true;
+};
+
+const onSeach = async () => {
+  if (props.disabled) return;
+  getGridConfig();
+  await nextTick();
+  showLovModal.value = true;
+};
+
+const onClear = () => {
+  emit('clear', '');
+};
+
+// 双击
+const onCellClick = ({ row }) => {
+  const record = !props.multiple ? row : [row];
+  // 禁止选中的数据,双击也不能选中
+  if (isFunction(props.checkMethod) && !props.checkMethod(row)) return;
+  emit('change', record, lovData.valueField);
+  onClose();
+};
+
+const onColumnChange = async () => {
+  await nextTick();
+  xgrid.value?.commitProxy('query');
+};
+
+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;
+}>();
+
+console.log('props --lov');
+</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>