417 lines
11 KiB
Vue
417 lines
11 KiB
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
|
||
|
|
} from '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: 10,
|
||
|
|
showSizeChanger: true, // 显示可改变每页条数
|
||
|
|
pageSizeOptions: ["5", "10", "20", "50"], // 每页条数选项设置
|
||
|
|
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>
|