qhmes/jeecgboot-vue3/src/views/xslmes/mesXslWarehouse/MesXslWarehouseList.vue

<template>
  <div class="mes-xsl-warehouse-page">
    <div class="mes-xsl-warehouse-layout">
      <div class="mes-xsl-warehouse-sider-col">
        <aside
          :class="['mes-xsl-warehouse-sider', { 'is-collapsed': siderCollapsed, 'is-dragging': siderDragging }]"
          :style="siderAsideStyle"
        >
          <Card class="mes-xsl-warehouse-sider-card" size="small" title="仓库分类" :bordered="true">
            <template #extra>
              <a-space v-show="!siderCollapsed" size="small" class="mes-xsl-warehouse-sider-extra">
                <a-button type="link" size="small" v-auth="'xslmes:mes_xsl_warehouse_category:add'" @click="handleAddCategory">新增</a-button>
                <a-button
                  type="link"
                  size="small"
                  v-auth="'xslmes:mes_xsl_warehouse_category:edit'"
                  :disabled="!categorySelectedId"
                  @click="handleEditCategory"
                >
                  编辑
                </a-button>
                <a-button
                  type="link"
                  size="small"
                  danger
                  v-auth="'xslmes:mes_xsl_warehouse_category:delete'"
                  :disabled="!categorySelectedId"
                  @click="handleDeleteCategory"
                >
                  删除
                </a-button>
              </a-space>
            </template>
            <Spin :spinning="treeLoading">
              <BasicTree
                :treeData="categoryTreeData"
                :selectedKeys="selectedKeys"
                defaultExpandLevel="2"
                @update:selectedKeys="onTreeSelect"
              />
            </Spin>
          </Card>
        </aside>
        <!-- 分隔条：贴在侧栏右缘，三角把手 + 拖拽改宽度（与单位管理一致） -->
        <div
          class="mes-xsl-warehouse-resizer"
          :class="{ 'is-dragging': siderDragging }"
          role="separator"
          aria-orientation="vertical"
          :aria-valuenow="siderCollapsed ? 0 : siderWidth"
          :aria-valuemin="SIDER_MIN"
          :aria-valuemax="SIDER_MAX"
          tabindex="0"
          @pointerdown="onSiderResizerPointerDown"
          @keydown.left.prevent="nudgeSiderWidth(-16)"
          @keydown.right.prevent="nudgeSiderWidth(16)"
        >
          <a-tooltip :title="siderCollapsed ? '展开（可向右拖拽）' : '收起（点击）或左右拖拽调整宽度'">
            <span class="mes-xsl-warehouse-resizer-knob" aria-hidden="true">
              <span class="mes-xsl-warehouse-tri" :class="{ 'mes-xsl-warehouse-tri--collapsed': siderCollapsed }" />
            </span>
          </a-tooltip>
        </div>
      </div>
      <div class="mes-xsl-warehouse-main">
        <BasicTable @register="registerTable" :rowSelection="rowSelection">
          <template #tableTitle>
            <a-button type="primary" v-auth="'xslmes:mes_xsl_warehouse:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
            <a-button type="primary" v-auth="'xslmes:mes_xsl_warehouse:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
            <j-upload-button type="primary" v-auth="'xslmes:mes_xsl_warehouse:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="batchHandleDelete">
                    <Icon icon="ant-design:delete-outlined" />
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button v-auth="'xslmes:mes_xsl_warehouse:deleteBatch'">
                批量操作
                <Icon icon="mdi:chevron-down" />
              </a-button>
            </a-dropdown>
            <super-query :config="superQueryConfig" @search="handleSuperQuery" />
          </template>
          <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
          </template>
        </BasicTable>
      </div>
    </div>
    <MesXslWarehouseModal @register="registerModal" @success="handleSuccess" />
    <MesXslWarehouseSysCategoryModal @register="registerCategoryModal" @success="onCategorySuccess" />
    <MesXslWarehouseAreaBatchAddModal @register="registerBatchAreaModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" name="xslmes-mesXslWarehouse" setup>
  import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
  import { Card, Spin } from 'ant-design-vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree';
  import { useModal } from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { defHttp } from '/@/utils/http/axios';
  import MesXslWarehouseModal from './components/MesXslWarehouseModal.vue';
  import MesXslWarehouseSysCategoryModal from './components/MesXslWarehouseSysCategoryModal.vue';
  import MesXslWarehouseAreaBatchAddModal from './components/MesXslWarehouseAreaBatchAddModal.vue';
  import { columns, searchFormSchema, superQuerySchema, WH_CATEGORY_CUSTOMER_CODE, WH_CATEGORY_SUPPLIER_CODE } from './MesXslWarehouse.data';
  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, updateStatus } from './MesXslWarehouse.api';
  import { loadTreeData as loadCategoryTreeRoot } from '/@/views/system/category/category.api';
  import {
    fetchWarehouseCategoryRoot,
    deleteWarehouseSysCategory,
    WAREHOUSE_CATEGORY_ROOT_CODE,
  } from './MesXslWarehouseSysCategory.api';
  import Icon from '/@/components/Icon';
  import type { KeyType } from '/@/components/Tree/src/types/tree';
  import type { Recordable } from '/@/types/global';

  const { createMessage, createConfirm } = useMessage();

  const TREE_ALL = 'ALL';

  /** 侧栏宽度限制（px），与单位管理一致 */
  const SIDER_MIN = 200;
  const SIDER_MAX = 560;
  const SIDER_DEFAULT = 260;
  const SIDER_DRAG_THRESHOLD = 5;
  const SIDER_EXPAND_DRAG = 12;

  const siderCollapsed = ref(false);
  const siderWidth = ref(SIDER_DEFAULT);
  const siderDragging = ref(false);
  const treeLoading = ref(false);

  const siderAsideStyle = computed(() => ({
    width: siderCollapsed.value ? '0px' : `${siderWidth.value}px`,
  }));

  let siderDragStartX = 0;
  let siderDragStartW = 0;
  let siderDragMaxDelta = 0;
  let siderDragCollapsedStart = false;
  let siderDragPointerId: number | null = null;
  let siderDragEl: HTMLElement | null = null;

  function toggleSider() {
    siderCollapsed.value = !siderCollapsed.value;
  }

  function clampSiderW(w: number) {
    return Math.min(SIDER_MAX, Math.max(SIDER_MIN, w));
  }

  function nudgeSiderWidth(delta: number) {
    if (siderCollapsed.value) {
      if (delta > 0) {
        siderCollapsed.value = false;
      } else {
        return;
      }
    }
    siderWidth.value = clampSiderW(siderWidth.value + delta);
  }

  function onSiderResizerPointerMove(e: PointerEvent) {
    if (siderDragPointerId == null || e.pointerId !== siderDragPointerId) return;
    const dx = e.clientX - siderDragStartX;
    siderDragMaxDelta = Math.max(siderDragMaxDelta, Math.abs(dx));

    if (siderDragCollapsedStart) {
      if (dx >= SIDER_EXPAND_DRAG) {
        siderCollapsed.value = false;
        siderWidth.value = clampSiderW(dx);
        siderDragStartX = e.clientX;
        siderDragStartW = siderWidth.value;
        siderDragCollapsedStart = false;
      }
    } else {
      siderWidth.value = clampSiderW(siderDragStartW + dx);
    }
  }

  function endSiderDrag(e: PointerEvent) {
    if (siderDragPointerId == null || e.pointerId !== siderDragPointerId) return;
    if (siderDragEl) {
      try {
        siderDragEl.releasePointerCapture(siderDragPointerId);
      } catch {
        /* ignore */
      }
    }
    document.removeEventListener('pointermove', onSiderResizerPointerMove);
    document.removeEventListener('pointerup', endSiderDrag);
    document.removeEventListener('pointercancel', endSiderDrag);
    document.body.style.cursor = '';
    document.body.style.userSelect = '';
    siderDragging.value = false;
    siderDragPointerId = null;
    siderDragEl = null;

    if (siderDragMaxDelta < SIDER_DRAG_THRESHOLD) {
      toggleSider();
    }
  }

  function onSiderResizerPointerDown(e: PointerEvent) {
    if (e.button !== 0) return;
    e.preventDefault();
    siderDragEl = e.currentTarget as HTMLElement;
    siderDragPointerId = e.pointerId;
    siderDragStartX = e.clientX;
    siderDragStartW = siderCollapsed.value ? 0 : siderWidth.value;
    siderDragMaxDelta = 0;
    siderDragCollapsedStart = siderCollapsed.value;
    siderDragging.value = true;
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
    try {
      siderDragEl.setPointerCapture(e.pointerId);
    } catch {
      /* ignore */
    }
    document.addEventListener('pointermove', onSiderResizerPointerMove);
    document.addEventListener('pointerup', endSiderDrag);
    document.addEventListener('pointercancel', endSiderDrag);
  }

  onUnmounted(() => {
    document.removeEventListener('pointermove', onSiderResizerPointerMove);
    document.removeEventListener('pointerup', endSiderDrag);
    document.removeEventListener('pointercancel', endSiderDrag);
    document.body.style.cursor = '';
    document.body.style.userSelect = '';
  });

  /** 分类字典异步树根（pcode=XSLMES_WH 下的子树：一楼库、二楼仓库…） */
  const rawWarehouseCategoryTree = ref<Recordable[]>([]);
  /** 根节点 id（编码 XSLMES_WH），新增「顶级子节点」时用 */
  const warehouseCategoryRootId = ref('');

  const queryParam = reactive<any>({});
  const selectedKeys = ref<KeyType[]>([TREE_ALL]);

  const categorySelectedId = computed(() => {
    const k = selectedKeys.value[0];
    if (!k || k === TREE_ALL) return '';
    return String(k);
  });

  function mapCategoryTreeNodes(nodes: Recordable[]): Recordable[] {
    return (nodes || []).map((n) => ({
      key: n.key,
      title: n.title,
      children: n.children?.length ? mapCategoryTreeNodes(n.children as Recordable[]) : undefined,
    }));
  }

  const categoryTreeData = computed(() => [
    {
      key: TREE_ALL,
      title: '全部分类',
      children: mapCategoryTreeNodes(rawWarehouseCategoryTree.value || []),
    },
  ]);

  function collectLeafKeysUnder(node: Recordable): string[] {
    const children = node.children as Recordable[] | undefined;
    if (!children?.length) {
      return [String(node.key)];
    }
    return children.flatMap((ch) => collectLeafKeysUnder(ch));
  }

  function findNodeByKey(nodes: Recordable[], key: string): Recordable | null {
    for (const n of nodes) {
      if (String(n.key) === key) {
        return n;
      }
      const nested = n.children as Recordable[] | undefined;
      if (nested?.length) {
        const found = findNodeByKey(nested, key);
        if (found) {
          return found;
        }
      }
    }
    return null;
  }

  async function loadCategoryTree() {
    treeLoading.value = true;
    try {
      const [root, res] = await Promise.all([fetchWarehouseCategoryRoot(), loadCategoryTreeRoot({ async: false, pcode: 'XSLMES_WH' })]);
      warehouseCategoryRootId.value = root?.id != null ? String(root.id) : '';
      rawWarehouseCategoryTree.value = Array.isArray(res) ? res : [];
      if (!warehouseCategoryRootId.value || !rawWarehouseCategoryTree.value.length) {
        createMessage.warning('未加载到仓库分类树，请确认已执行库脚本并已在「分类字典」中维护根节点 XSLMES_WH。');
      }
    } catch {
      warehouseCategoryRootId.value = '';
      rawWarehouseCategoryTree.value = [];
      createMessage.warning('加载分类字典失败，请检查分类根编码 XSLMES_WH 是否存在。');
    } finally {
      treeLoading.value = false;
    }
  }

  const [registerModal, { openModal }] = useModal();
  const [registerCategoryModal, { openModal: openCategoryModal }] = useModal();
  const [registerBatchAreaModal, { openModal: openBatchAreaModal }] = useModal();

  function handleAddCategory() {
    const rootId = warehouseCategoryRootId.value;
    if (!rootId) {
      createMessage.warning('未找到仓库分类根节点，请确认分类字典中存在编码「XSLMES_WH」');
      return;
    }
    const sel = categorySelectedId.value;
    const parentId = sel || rootId;
    openCategoryModal(true, { isUpdate: false, parentId });
  }

  function handleEditCategory() {
    const id = categorySelectedId.value;
    if (!id) {
      createMessage.warning('请先选择左侧分类');
      return;
    }
    openCategoryModal(true, { isUpdate: true, record: { id } });
  }

  async function handleDeleteCategory() {
    const id = categorySelectedId.value;
    if (!id) {
      createMessage.warning('请先选择要删除的分类');
      return;
    }
    if (id === warehouseCategoryRootId.value) {
      createMessage.warning('根分类不可删除');
      return;
    }
    let code = '';
    try {
      const cat = await defHttp.get<Recordable>({ url: '/sys/category/queryById', params: { id } });
      code = cat?.code != null ? String(cat.code) : '';
    } catch {
      createMessage.error('无法读取分类信息');
      return;
    }
    if (code === WAREHOUSE_CATEGORY_ROOT_CODE) {
      createMessage.warning('根分类不可删除');
      return;
    }
    if (code === WH_CATEGORY_CUSTOMER_CODE || code === WH_CATEGORY_SUPPLIER_CODE) {
      createMessage.warning('「客户库」「供应商库」为业务保留分类，不建议删除');
      return;
    }
    createConfirm({
      iconType: 'warning',
      title: '确认删除',
      content: '将删除该节点及其下级分类；已选用这些分类的仓库数据不会自动变更，请确认无业务影响。',
      onOk: async () => {
        await deleteWarehouseSysCategory(id);
        await loadCategoryTree();
        selectedKeys.value = [TREE_ALL];
        delete queryParam.warehouseCategory;
        delete queryParam.warehouseCategory_MultiString;
        reload();
      },
    });
  }

  function onCategorySuccess() {
    loadCategoryTree();
    reload();
  }

  const { tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '仓库管理',
      api: list,
      columns,
      // 避免：表格默认 immediate 请求一次 + onMounted 末尾 reload 再请求一次（进入页列表闪两次）
      immediate: false,
      canResize: true,
      formConfig: {
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
      },
      actionColumn: {
        width: 300,
        fixed: 'right',
      },
      beforeFetch: (params) => Object.assign(params, queryParam),
    },
    exportConfig: {
      name: '仓库管理',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
  const superQueryConfig = reactive(superQuerySchema);

  onMounted(async () => {
    await loadCategoryTree();
    reload();
  });

  function onTreeSelect(keys: KeyType[]) {
    selectedKeys.value = keys;
    const k = keys[0];
    delete queryParam.warehouseCategory;
    delete queryParam.warehouseCategory_MultiString;
    if (!k || k === TREE_ALL) {
      reload();
      return;
    }
    const node = findNodeByKey(rawWarehouseCategoryTree.value, String(k));
    if (!node) {
      reload();
      return;
    }
    const leafKeys = collectLeafKeysUnder(node);
    if (leafKeys.length === 1) {
      queryParam.warehouseCategory = leafKeys[0];
    } else if (leafKeys.length > 1) {
      queryParam.warehouseCategory_MultiString = leafKeys.join(',');
    }
    reload();
  }

  function handleSuperQuery(params) {
    Object.keys(params).forEach((k) => {
      queryParam[k] = params[k];
    });
    reload();
  }

  function handleAdd() {
    openModal(true, { isUpdate: false, showFooter: true, record: {} });
  }

  function handleEdit(record: Recordable) {
    openModal(true, { record, isUpdate: true, showFooter: true });
  }

  function handleDetail(record: Recordable) {
    openModal(true, { record, isUpdate: true, showFooter: false });
  }

  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }

  function isRecordEnabled(record: Recordable) {
    return record.status === '0' || record.status === 0;
  }

  async function handleToggleStatus(record: Recordable, status: string) {
    await updateStatus({ id: record.id, status }, handleSuccess);
  }

  async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }

  function handleSuccess() {
    selectedRowKeys.value = [];
    reload();
  }

  function getTableAction(record) {
    const enabled = isRecordEnabled(record);
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
        auth: 'xslmes:mes_xsl_warehouse:edit',
      },
      {
        label: '启用',
        ifShow: !enabled,
        onClick: handleToggleStatus.bind(null, record, '0'),
        auth: 'xslmes:mes_xsl_warehouse:updateStatus',
      },
      {
        label: '停用',
        ifShow: enabled,
        onClick: handleToggleStatus.bind(null, record, '1'),
        auth: 'xslmes:mes_xsl_warehouse:updateStatus',
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        },
        auth: 'xslmes:mes_xsl_warehouse:delete',
      },
    ];
  }

  function handleBatchAddArea(record: Recordable) {
    openBatchAreaModal(true, { record });
  }

  function getDropDownAction(record) {
    return [
      { label: '详情', onClick: handleDetail.bind(null, record) },
      { label: '批量添加库区', onClick: handleBatchAddArea.bind(null, record) },
    ];
  }
</script>

<style lang="less" scoped>
  .mes-xsl-warehouse-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);

    :deep(.ant-picker-range) {
      width: 100%;
    }
  }

  .mes-xsl-warehouse-layout {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }

  .mes-xsl-warehouse-sider-col {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 auto;
    min-height: 0;
  }

  .mes-xsl-warehouse-sider {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: width 0.2s ease;

    .mes-xsl-warehouse-sider-extra {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0;
      max-width: 200px;
    }

    &.is-dragging {
      transition: none;
    }

    &.is-collapsed {
      pointer-events: none;
    }
  }

  .mes-xsl-warehouse-sider-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    :deep(.ant-card-head) {
      min-height: 40px;
      padding: 0 12px;
    }

    :deep(.ant-card-body) {
      flex: 1;
      overflow: auto;
      min-height: 0;
      padding: 8px 12px;
    }
  }

  .mes-xsl-warehouse-resizer {
    flex: 0 0 8px;
    width: 8px;
    position: relative;
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    background: #fafafa;
    margin-right: 2px;

    &:hover,
    &:focus-visible {
      background: #f0f0f0;
    }

    &.is-dragging {
      background: #e6f4ff;
    }
  }

  .mes-xsl-warehouse-resizer-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 44px;
    pointer-events: none;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  .mes-xsl-warehouse-tri {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 6px 5px 0;
    border-color: transparent #595959 transparent transparent;
    margin-left: -1px;
  }

  .mes-xsl-warehouse-tri--collapsed {
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #595959;
    margin-left: 0;
    margin-right: -1px;
  }

  .mes-xsl-warehouse-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
</style>