wms_vue/src/view/wms/report/compoents/table.vue

<template>
  <div>
    <!--空模板-->
    <template v-if="reportCode.length==0">
      <a-empty description="未指定报表编号,请检查路由配置信息" />
    </template>
    <!--有数据的模板-->
    <page-layout v-else>
      <a-row :gutter="[0,2]">
        <a-col :span="24">
          <a-card>
            <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
          </a-card>
        </a-col>
        <a-col :span="24" style="height: 100%;">
          <a-card style="width: 100%;">
            <!-- 托盘库存视图记录列表 -->
           <pro-table style="margin-top: 10px" rowKey="id" ref="tableRef" :fetch="fetch" :columns="pageParam.columns"
              :toolbar="toolbar" :operate="operate" :param="state.param" :pagination="pagination"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
            </pro-table>
            <a-table :columns="pageParam.columns" :data-source="datas" style="margin-top: 10px" />

          </a-card>
        </a-col>
        <a-col :span="24" style="height: 100%;">
          <a-card style="width: 100%;">
            <!-- 托盘库存视图记录列表 -->
            <!-- <pro-table style="margin-top: 10px" rowKey="id" ref="tableRef" :fetch="fetch" :columns="pageParam.columns"
              :toolbar="toolbar" :operate="operate" :param="state.param" :pagination="pagination"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
            </pro-table> -->
            <!-- <a-table :columns="pageParam.columns" :data-source="datas" style="margin-top: 10px" /> -->

          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>
<script>
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    remove,
    removeBatch
  } from "@/api/wms/inventoryView";
  import {
    getByParentCode
  } from "@/api/wms/common/uiAppearance";
  import {
    reactive,
    createVNode,
    ref,
  } from 'vue';
  const removeKey = "remove";
  const removeBatchKey = "removeBatch";
  import {
    useRoute
  } from 'vue-router';
export default defineComponent({
    name: "pro-table",
    currentRowI: 999,
    components: {
      ColumnHeightOutlined,
      AppstoreOutlined,
      ExportOutlined,
      SyncOutlined,
      UserOutlined,
      SearchOutlined,
    },
    /// 数据来源
    props: Object.assign({}, TProps, {
      /// 扩展参数
      param: {
        type: Object,
        default: {},
      },
      /// 数据来源
      fetch: {
        type: Function,
        required: false,
      },
      /// 数据解析
      columns: {
        type: Array,
        required: true,
      },
      /// 头工具栏
      toolbar: {
        type: Array,
      },
      defaultToolbar: {
        type: Boolean,
        default: true,
      },
      /// 行工具栏
      operate: {
        type: Array || Boolean,
        default: false,
      },
      /// 分页参数
      pagination: {
        type: [Object, Boolean],
        default: false,
      },
      rowSelection: {
        type: Object,
      },
      rowKey: {
        type: String,
        default: "id",
      }
    }),
    components: {},
    //在组件完成初始渲染并创建 DOM 节点后运行代码
    mounted() {
      console.log('mounted', this.reportCode);
    },
    created() {
      //console.log("pageParam",this.pageParam)
      console.log('获取 created', this.$route.params);
      console.log('获取 reportCode', this.reportCode);

    },

    setup(props) {
      // 获取路由对象
      const route = useRoute();
      // 从路由参数中获取变量，并赋值给响应式数据
      const reportCode = ref(Object.keys(route.params) ? Object.keys(route.params)[0] : "");
      //页面所需的所有参数
      const pageParam = reactive({
        columns: [], //table列属性
        param: {}, //查询属性
        toolbar: [], //table工具栏
        operate: []
      });

      const columns = [{
          title: "排名",
          dataIndex: "key",
          key: "key"
        },
        {
          title: "门店",
          dataIndex: "name",
          key: "name"
        },
        {
          title: "销量",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "地址",
          dataIndex: "address",
          key: "address"
        }
      ];

      const datas = [{
          key: 1,
          name: "1 号店",
          age: 13323.34,
          address: "北京市朝阳区凤鸣路 112 号."
        },
        {
          key: 2,
          name: "2 号店",
          age: 35432.41,
          address: "北京市朝阳区凤鸣路 112 号."
        },
        {
          key: 3,
          name: "3 号店",
          age: 47452.44,
          address: "北京市朝阳区凤鸣路 112 号."
        },
        {
          key: 4,
          name: "4 号店",
          age: 32352.44,
          address: "北京市朝阳区凤鸣路 112 号."
        }
      ];
      ///根据节点编号获取节点信息





      const getUIAppearance = async function(parentCode) {
        console.log("this.reportCode ", reportCode)

        //查询报表信息
        var UIAppearance = await getByParentCode({
          parentCode: reportCode.value
        }).then((res) => {
          if (res.success) {
            const {
              data
            } = res
            console.log("返回的数据配置对象 data", data)
            data.forEach(function(item, index, arr) {
              console.log("item", item)
              // let jsonString1 = JSON.stringify(columns);
              // console.log("jsonString1", jsonString1)
              // console.log("index", index)
              switch (item.componentType) {
                case "table":
                  //javascript对象转为string
                  console.log("table")
                  var json = JSON.parse(item.param)
                  console.log(json)
                  //this.columns = [...json];
                  pageParam.columns = json;
                  console.log("pageParam.columns", pageParam.columns)
                  console.log("columns", columns)
                  break;
                case "search":
                  console.log("search")
                  break;
                default:
                  console.log("else")
                  break
              }
              if (item.componentType == 'table')
                console.log()
            })

          }
        })

        console.log("UIAppearance")
      };
      getUIAppearance();
      const tableRef = ref();


      /// 数据来源 [模拟]
      const fetch = async (param) => {
        // var response = await page(param);
        // console.log("response", response)
        // return {
        //   total: response.data.total,
        //   data: response.data.record,
        // };

        return {
          total: 10,
          data: [],
        };
      };

      // 删除数据
      const removeMethod = (record) => {
        Modal.confirm({
          title: '您是否确定要删除?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.value.loading({
              content: "提交中...",
              key: removeKey
            });
            remove({
              "id": record.id
            }).then((response) => {
              if (response.success) {
                message.value.success({
                  content: "删除成功",
                  key: removeKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.value.error({
                  content: response.msg,
                  key: removeKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      // 批量删除
      const removeBatchMethod = (ids) => {
        Modal.confirm({
          title: '您是否确定要删除?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.value.loading({
              content: "提交中...",
              key: removeBatchKey
            });
            removeBatch({
              "ids": ids
            }).then((response) => {
              if (response.success) {
                message.value.success({
                  content: "删除成功",
                  key: removeBatchKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.value.error({
                  content: "删除失败",
                  key: removeBatchKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      const searchParam = [{
          key: "palletCode",
          type: "input",
          label: "托盘编号"
        },
        {
          key: "locCode",
          type: "input",
          label: "托盘位置"
        },
        {
          key: "skuCode",
          type: "input",
          label: "物料编号"
        },
        {
          key: "skuName",
          type: "input",
          label: "物料描述"
        },
      ]
      /// 工具栏
      const toolbar = [{
        label: "删除",
        code: remove,
        event: function() {
          removeBatchMethod(state.selectedRowKeys)
        },
        type: 'danger'
      }, {
        label: "查询报表信息",
        code: remove,
        event: function() {
          getUIAppearance(reportCode)
        },
        type: 'danger'
      }];

      /// 行操作
      const operate = [];

      const pagination = {
        pageNum: 1,
        pageSize: 20,
        showSizeChanger: true, // 显示可改变每页条数
        pageSizeOptions: ["10", "20", "50", "100"], // 每页条数选项设置
        showTotal: total => `共 ${total} 条记录`, // 显示总条数
        showSizeChange: (current, pageSize) => (this.pageSize = pageSize) // 改变每页条数时更新显示
      };

      const state = reactive({
        selectedRowKeys: [],
        param: {},
      });

      const search = function(value) {
        console.log("主表查询" + JSON.stringify(value))
        console.log(value)
        state.param = value
      }

      const onSelectChange = selectedRowKeys => {
        state.selectedRowKeys = selectedRowKeys;
      };

      return {
        datas,
        columns,
        pageParam,
        reportCode,
        state,
        fetch,
        search,
        toolbar,
        operate,
        pagination,
        onSelectChange,
        tableRef,
        searchParam,
        //getUIAppearance
      };

    }
  }
</script>