@utogether/udp-core 2.0.0-beta.21 → 2.0.0-beta.22

package/src/components/SuTable/SuTable.vue

@@ -1,334 +0,0 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-12-01 18:49:48
- * @LastEditors: wei.li
- * @LastEditTime: 2024-06-27 15:08:50
- * @Description: file content
--->
-<template>
-  <div class="page-content">
-    <vxe-form
-      v-if="data.items.length"
-      ref="xSearchFrom"
-      :data="data.listQuery"
-      :items="data.items"
-      size="mini"
-      class="ut-seach-from"
-      title-colon
-      title-align="right"
-      title-width="90"
-      @submit="onSubmit"
-      @reset="onReset"
-      @collapse="onCollapse"
-    />
-
-    <!-- 工具栏 -->
-    <vxe-toolbar
-      v-if="showToolbar"
-      :buttons="comButtons"
-      :tools="tools"
-      @button-click="onButtonClick"
-      @tool-click="onToolClick"
-    />
-
-    <!-- 列表 -->
-    <vxe-table
-      ref="SuTableRef"
-      :height="data.height"
-      :loading="loading"
-      :data="data.dataList"
-      :export-config="exportConfig"
-      :checkbox-config="{
-        checkMethod: ({ row }) => oncheckMethod(row)
-      }"
-      resizable
-      border
-    >
-      <vxe-table-column type="checkbox" width="50" align="center" fixed="left" />
-      <vxe-table-column
-        v-for="column in data.columns"
-        :key="column.field"
-        :field="column.field"
-        :title="$t(column.title)"
-        :fixed="column.fixed || ''"
-        :width="column.width"
-        :min-width="column.minWidth"
-        :formatter="column.formatter || ''"
-        :cell-render="column.cellRender || null"
-      />
-      <slot />
-      <slot name="operate" />
-    </vxe-table>
-    <vxe-pager
-      perfect
-      :current-page="data.listQuery.pageNum"
-      :page-size="data.listQuery.pageSize"
-      :total="data.listQuery.total"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-// import { useI18n } from 'vue-i18n';
-import { ref, reactive, toRaw, computed, onBeforeMount, nextTick, getCurrentInstance } from 'vue';
-import dayjs from 'dayjs';
-import { getServiceApi } from '../../api';
-import { useSystemStoreHook } from '../../store/modules/system';
-import { columnFormat, formatGridItems } from '../../utils/dataFormat';
-import { clone, isString } from 'xe-utils';
-
-interface IProps {
-  serviceCode: string;
-  disabledField?: string; // 禁用字段
-  fetchExtParam?: IRecord; // 查询服务时额外的参数
-  disabledMap?: IRecord; // 禁用
-  exportConfig?: IRecord; // 导出配置
-  columns: Array<ITableColProps>;
-  slots?: Array<IRecord>;
-  formItems?: Array<IFormItemProps>;
-  tools?: Array<IButtonProps>;
-  buttons?: Array<IButtonProps>;
-  extButtons?: Array<IButtonProps>;
-  showToolbar?: boolean;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  serviceCode: '',
-  disabledField: 'id',
-  fetchExtParam: (): IRecord => {
-    return {};
-  },
-  disabledMap: (): IRecord => {
-    return {};
-  },
-  exportConfig: (): IRecord => {
-    return {};
-  },
-  formItems: () => [],
-  columns: () => [],
-  slots: () => [],
-  tools: () => [],
-  buttons: () => [
-    { code: 'add', status: 'u-cyan', icon: 'ri-add-line', auth: 'add' },
-    {
-      code: 'del',
-      name: 'delete',
-      status: 'danger',
-      icon: 'ri-delete-line',
-      auth: 'del'
-    }
-  ],
-  extButtons: () => [],
-  showToolbar: true
-});
-
-const comButtons = computed(() => {
-  props.extButtons.forEach(btn => {
-    if (!props.buttons.find(b => b.code === btn.code)) {
-      // eslint-disable-next-line vue/no-mutating-props
-      props.buttons.push(btn);
-    }
-  });
-  return props.buttons.filter(button => (button.auth ? hasAuthority(button.auth) : !button.auth));
-});
-
-const instance = getCurrentInstance();
-const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
-
-const xSearchFrom = ref(null);
-const SuTableRef = ref(null);
-const loading = ref(false);
-const disabledCheckList = ref([]);
-
-/**
- * @description: 预处理查询form
- * @return {*}
- */
-// 获取查询item
-const getItems = () => {
-  if (!props.formItems.length) return props.formItems;
-  return formatGridItems(props.formItems, 'N');
-};
-/**
- * @description: 预处理 column
- * @return {*} 表格列表
- */
-const getColumns = () => {
-  return columnFormat(props.columns);
-};
-const offsetHeight = props.showToolbar ? 200 : 160;
-const data = reactive<IRecord>({
-  record: {},
-  listQuery: Object.assign({}, props.fetchExtParam),
-  dataList: [],
-  items: getItems(),
-  columns: getColumns(),
-  height: window.innerHeight - offsetHeight,
-  showModelView: false,
-  showUserRole: false
-});
-// const listQuery = reactive();
-// const { t } = useI18n();
-
-const getDataList = async () => {
-  let params = Object.assign({}, props.fetchExtParam || {}, data.listQuery);
-  showLoading();
-  try {
-    params = doDateRange(params);
-    const { serviceCode, disabledMap, disabledField } = props;
-    const res = (await getServiceApi().get(serviceCode, params)) as IResponseData;
-    const keys = disabledMap && Object.keys(disabledMap);
-    if (keys?.length) {
-      keys.forEach(key => {
-        const list = res.list.filter(f => f[key] === disabledMap[key]).map(m => m[disabledField]);
-        disabledCheckList.value.push(...list);
-      });
-    }
-    data.dataList = res?.list || [];
-    data.listQuery.total = res?.total || 4;
-  } finally {
-    // data.dataList = [
-    //   { id: '1', calcStatus: '0', periodStatus: '0', domesticAbroad: '1' },
-    //   { id: '2', calcStatus: '1', periodStatus: '1', domesticAbroad: '1' },
-    //   { id: '3', calcStatus: '2', periodStatus: '2', domesticAbroad: '2' },
-    //   { id: '4', calcStatus: '3', periodStatus: '1', domesticAbroad: '2' }
-    // ];
-    hiddenLoading();
-  }
-};
-// 左侧按钮点击事件
-const onButtonClick = event => {
-  emit('onClick', event);
-};
-// 右侧按钮点击事件
-const onToolClick = event => {
-  const $table = SuTableRef.value;
-  event.code === 'export' && $table.openExport();
-  event.code === 'import' && $table.importData();
-  emit('onClick', event);
-};
-// 页数切换
-const onPageChange = ({ currentPage, pageSize }) => {
-  data.listQuery.pageNum = currentPage;
-  data.listQuery.pageSize = pageSize;
-  refreshData();
-};
-const onSubmit = () => {
-  for (const i in data.listQuery) {
-    if (data.listQuery[i] && isString(data.listQuery[i])) {
-      data.listQuery[i] = data.listQuery[i].trim();
-    }
-  }
-  data.listQuery.pageNum = 1;
-  data.listQuery.pageSize = data.listQuery.pageSize || 20;
-  data.listQuery.organizationId = useSystemStoreHook().getOrganizationId;
-  data.listQuery.orgId = useSystemStoreHook().getOrgId;
-  refreshData();
-};
-
-const onReset = () => {
-  data.listQuery = {};
-  // data.listQuery.pageSize = 20;
-  data.listQuery.pageNum = 1;
-  data.listQuery.organizationId = useSystemStoreHook().getOrganizationId;
-  data.listQuery.orgId = useSystemStoreHook().getOrgId;
-  data.listQuery = Object.assign({}, props.fetchExtParam);
-  refreshData();
-};
-
-const doDateRange = listQuery => {
-  const query = clone(listQuery, true);
-  const dateRanges = data.items.filter(f => f.itemRender?.name === '#SuDateRange');
-  if (!dateRanges.length) return query;
-  dateRanges.forEach(element => {
-    const val = query[element.field];
-    if (val && element.toField) {
-      query[element.fromField] = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
-      query[element.toField] = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
-      delete query[element.field];
-    } else if (val) {
-      query[`${element.field}From`] = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
-      query[`${element.field}To`] = dayjs(val[1])
-        .add(23, 'h')
-        .add(59, 'm')
-        .add(59, 's')
-        .format('YYYY-MM-DD HH:mm:ss');
-      delete query[element.field];
-    }
-  });
-  return query;
-};
-const onCollapse = ({ status }) => {
-  if (status) {
-    data.height = window.innerHeight - 200;
-  } else {
-    nextTick(() => {
-      const offsetHeight = xSearchFrom.value.$el.clientHeight - 42 + 200;
-      data.height = window.innerHeight - offsetHeight;
-    });
-  }
-};
-// 请求数据
-const refreshData = () => {
-  getDataList();
-};
-const getCheckboxRecords = () => {
-  return SuTableRef.value && SuTableRef.value.getCheckboxRecords();
-};
-const showLoading = () => {
-  loading.value = true;
-};
-const hiddenLoading = () => {
-  loading.value = false;
-};
-const getInstance = () => {
-  return toRaw(SuTableRef.value);
-};
-// 子组件需对外暴露方法
-defineExpose({
-  refreshData,
-  showLoading,
-  hiddenLoading,
-  getCheckboxRecords,
-  getInstance
-});
-/**
- * @description: checkbox是否可选
- */
-const oncheckMethod = row => {
-  if (!disabledCheckList.value?.length) return true;
-  return !disabledCheckList.value.find(f => row[props.disabledField] === f);
-};
-/**
- * @description: 监听窗口变化，动态改变表格的高度
- * @param {*}
- * @return {*}
- */
-const addResizeListener = (offsetHeight = 200) => {
-  window.onresize = () => {
-    return (() => {
-      data.height = window.innerHeight - offsetHeight;
-    })();
-  };
-};
-
-const emit = defineEmits<{
-  (e: 'onClick', event: Event): void;
-}>();
-onBeforeMount(() => {
-  onSubmit();
-  addResizeListener();
-});
-</script>
-<style lang="scss">
-.page-content {
-  padding: 3px;
-}
-
-.ut-seach-from {
-  .vxe-form--item {
-    padding: 0.1em 0.8em 0.1em 0 !important;
-  }
-}
-</style>