@utogether/udp-core 1.0.1-beta.1 → 1.0.1-beta.11

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

@@ -34,6 +34,14 @@
         />
       </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>
@@ -49,9 +57,10 @@ 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 { clone } from 'xe-utils';
 
 // import type { IRecord, IFormItemProps } from '../../types';
 
@@ -86,6 +95,7 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const attrs: IRecord = getAttrs(useAttrs());
 
+const continuous = ref('0');
 const loading = ref(false);
 const instance = getCurrentInstance()!;
 
@@ -101,7 +111,7 @@ const rules = computed(() => {
 
 const formItems = computed(() => {
   if (!props.items.length) return props.items;
-  return formatItems(props.items, props.dataStatus);
+  return formatItems(clone(props.items, true), props.dataStatus);
 });
 
 const { t } = useI18n();