产品分类档案-树状结构-暂不可用

src/views/BasicData/productCassification1.vue

@@ -0,0 +1,215 @@
+<template>
+  <!--定义表格-->
+  <BasicTable @register="registerTable" :rowSelection="rowSelection" @expand="handleExpand" :expandedRowKeys="expandedRowKeys" @fetch-success="onFetchSuccess">
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate" v-auth="'baseCode:base_product_class:add'">
+        新增(add)</a-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" />
+              删除(delete)
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button v-auth="'baseCode:base_product_class:deleteBatch'"
+          >批量操作
+          <Icon icon="mdi:chevron-down" />
+        </a-button>
+      </a-dropdown>
+      <!-- <div style="margin-left: 10px;margin-top: 5px">当前登录租户: <span class="tenant-name">{{loginTenantName}}</span> </div> -->
+    </template>
+    <!--操作栏-->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+  <productCassificationModel @register="registerModal" @success="handleSuccess" />
+</template>
+
+<script lang="ts" name="basic-table-demo" setup>
+  import { onMounted, ref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { ActionItem, BasicColumn, BasicTable, TableAction, FormSchema } from '/@/components/Table';
+  import productCassificationModel from './components/productCassificationModel.vue';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { list, deleteDict, batchDelete } from './api/productCassification.api';
+  const showFooter = ref(true);
+  const expandedRowKeys = ref([]);
+  const [registerModal, { openModal }] = useModal();
+  //定义表格列字段
+  const columns: BasicColumn[] = [
+    {
+      title: '编码(code)',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '名称(name)',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '上级分类(parent)',
+      dataIndex: 'parentId_dictText',
+      key: 'parentId',
+    },
+    {
+      title: '毛利率(gross margin)',
+      dataIndex: 'grossMargin',
+      key: 'grossMargin',
+      customRender: function (t, r, index) {
+        if (t.text && t.text !== '') {
+          return t.text + '%';
+        } else {
+          return '';
+        }
+      },
+    },
+    {
+      title: '税率(tax rate)',
+      dataIndex: 'taxRate',
+      key: 'taxRate',
+      customRender: function (t, r, index) {
+        if (t.text && t.text !== '') {
+          return t.text + '%';
+        } else {
+          return '';
+        }
+      },
+    },
+  ];
+  //表单搜索字段
+  const searchFormSchema: FormSchema[] = [
+    {
+      label: '编码(code)', //显示label
+      field: 'code', //查询字段
+      component: 'JInput', //渲染的组件
+      defaultValue: '', //设置默认值
+    },
+    {
+      label: '名称(name)', //显示label
+      field: 'name', //查询字段
+      component: 'JInput', //渲染的组件
+      defaultValue: '', //设置默认值、
+      componentProps: {
+        AutoComplete: 'off',
+      },
+    },
+  ];
+  /** useListPage 是整个框架的核心用于表格渲染，里边封装了很多公共方法；
+   * 平台通过此封装，简化了代码，支持自定义扩展*/
+  // 通过hook useListPage渲染表格（设置dataSource、columns、actionColumn等参数）
+  const { tableContext } = useListPage({
+    designScope: 'category-template',
+    tableProps: {
+      title: '',
+      api: list,
+      columns: columns,
+      size: 'small',
+      rowkey: 'id',
+      actionColumn: {
+        width: 120,
+      },
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      isTreeTable: true,
+    },
+  });
+  const [registerTable, { reload, updateTableDataRecord,findTableDataRecord, getDataSource }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        auth: 'baseCode:base_product_class:edit',
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '确定删除吗?',
+          confirm: handleDelete.bind(null, record),
+        },
+        auth: 'baseCode:base_product_class:delete',
+      },
+    ];
+  }
+
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete(record) {
+    await deleteDict({ id: record.id }, reload);
+  }
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      updateTableDataRecord(values.id, values);
+    } else {
+      reload();
+    }
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+  function onFetchSuccess(result) {
+    debugger
+    getDataByResult(result.items)
+  }
+  async function handleExpand(expanded, record) {
+    debugger
+    // 判断是否是展开状态，展开状态(expanded)并且存在子集(children)并且未加载过(isLoading)的就去查询子节点数据
+    if (expanded) {
+      expandedRowKeys.value.push(record.id);
+      if (record.children.length > 0 && !!record.children[0].isLoading) {
+        debugger
+        // let result = await getChildList({ pid: record.id });
+        // if (result && result.length > 0) {
+        //   record.children = getDataByResult(result);
+        // } else {
+        //   record.children = null;
+        //   record.hasChild = '0';
+        // }
+      }
+    } else {
+      let keyIndex = expandedRowKeys.value.indexOf(record.id);
+      if (keyIndex >= 0) {
+        expandedRowKeys.value.splice(keyIndex, 1);
+      }
+    }
+  }
+  function getDataByResult(result) {
+    debugger
+    if (result && result.length > 0) {
+      return result.map((item) => {
+        item.hasChild='1'
+        //判断是否标记了带有子节点
+        if (item['hasChild'] == '1') {
+          let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true };
+          item.children = [loadChild];
+        }
+        return item;
+      });
+    }
+  }
+</script>