@utogether/udp-core 1.0.0 → 1.0.1-beta.10

package/src/components/udp/lov.vue

@@ -0,0 +1,388 @@
+<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
+      :class-name="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

@@ -0,0 +1,189 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-29 21:02:43
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-14 17:38:19
+ * @Description: file content
+-->
+
+<template>
+  <div>
+    <vxe-modal
+      v-model="showModal"
+      :title="title"
+      :width="width"
+      :height="height"
+      :loading="loading"
+      :show-footer="dataStatus !== 'detail'"
+      v-bind="modalAttrs"
+      min-width="240"
+      min-height="300"
+      destroy-on-close
+      resize
+      @close="onClose"
+    >
+      <template #default>
+        <vxe-form
+          ref="xForm"
+          :data="record"
+          :items="formItems"
+          :rules="rules"
+          title-align="right"
+          :title-width="formAttrs.titleWidth || 90"
+          v-bind="formAttrs"
+        />
+      </template>
+      <template #footer>
+        <vxe-checkbox
+          v-if="!url && dataStatus === 'add'"
+          v-model="continuous"
+          content="连续添加"
+          unchecked-value="0"
+          checked-value="1"
+          style="margin-right: 12px"
+        />
+        <ut-button status="warning" content="cancel" icon="ri-close-line" @tap="onClose" />
+        <ut-button status="u-cyan" content="confirm" icon="ri-save-3-line" @tap="onConfirm" />
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UtModalForm'
+};
+</script>
+<script lang="ts" setup>
+import { onBeforeMount, ref, computed, getCurrentInstance, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getAttrs } from './utils';
+import to from 'await-to-js';
+import { formatRules, successMessage, formatItems } from '@utogether/utils';
+
+// import type { IRecord, IFormItemProps } from '../../types';
+
+export interface IProps {
+  record: IRecord; // 数据对象
+  formAttrs?: IRecord;
+  modalAttrs?: IRecord;
+  items: Array<IFormItemProps>; // form item
+  url?: string; // 服务路径
+  method?: string; // 请求方式
+  title?: string; // 标题
+  dataStatus?: string; // 状态
+  width?: number;
+  height?: number;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  record: (): IRecord => {
+    return {};
+  },
+  formAttrs: (): IRecord => {
+    return {};
+  },
+  items: () => [],
+  title: '数据记录',
+  width: 420,
+  height: 360,
+  dataStatus: 'detail',
+  url: '',
+  method: 'post'
+});
+
+const attrs: IRecord = getAttrs(useAttrs());
+
+const continuous = ref('0');
+const loading = ref(false);
+const instance = getCurrentInstance()!;
+
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+
+/**
+ * @description: 根据items 获取必填选
+ */
+const rules = computed(() => {
+  if (!props.items.length) return {};
+  return formatRules(props.items, t);
+});
+
+const formItems = computed(() => {
+  if (!props.items.length) return props.items;
+  return formatItems(props.items, props.dataStatus);
+});
+
+const { t } = useI18n();
+const showModal = ref(false);
+
+const xForm = ref(null);
+/**
+ * @description: 弹框确认
+ */
+const onConfirm = () => {
+  // @ts-ignore
+  xForm.value.validate(async (valid: boolean) => {
+    if (!valid) {
+      const { record, url, method } = props;
+      if (url) {
+        showLoading();
+        const body = attrs?.dataProcessMethod ? attrs?.dataProcessMethod(record) : record;
+        if (url) {
+          const [err, data] = await to(serviceApi[method](url, body));
+          if (!err) {
+            successMessage();
+            emit('confirm', data);
+          }
+        }
+        hiddenLoading();
+        onClose();
+      } else {
+        emit('confirm');
+      }
+    }
+  });
+};
+
+/**
+ * @description: 显示加载框
+ */
+const showLoading = () => {
+  loading.value = true;
+};
+
+/**
+ * @description: 关闭加载框
+ */
+const hiddenLoading = () => {
+  loading.value = false;
+};
+const validateForm = (cb: Function) => {
+  // @ts-ignore
+  xForm.value.validate(cb);
+};
+
+/**
+ * @description: 关闭弹框
+ */
+const onClose = () => {
+  showModal.value = false;
+  emit('close');
+};
+/**
+ * @description: 打开弹框
+ */
+const openModal = () => {
+  showModal.value = true;
+};
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm', record?: any): void;
+}>();
+
+defineExpose({ showLoading, hiddenLoading, openModal, validateForm });
+
+onBeforeMount(() => {
+  openModal();
+});
+</script>