商品分类、商品管理

src/api/material.ts

@@ -0,0 +1,50 @@
+import request from '@/benyun/utils/request'
+
+// 获取物料分页列表
+function page(data : any) {
+	return request({
+		url: '/maindata/maindataMaterial/page',
+		method: 'GET',
+		params:data
+	})
+}
+// 根据主键id查询物料数据
+function single(data : any) {
+	return request({
+		url: '/maindata/maindataMaterial/single',
+		method: 'GET',
+		params:data
+	})
+}
+// 新增物料
+function save(data : any) {
+	return request({
+		url: '/maindata/maindataMaterial/save',
+		method: 'POST',
+		params: data
+	})
+}
+// 修改物料
+function update(data : any) {
+	return request({
+		url: '/maindata/maindataMaterial/update',
+		method: 'PUT',
+		params: data
+	})
+}
+// 删除数据
+function materialDelete(data : any) {
+	return request({
+		url: '/maindata/maindataMaterial/delete',
+		method: 'POST',
+		params: data
+	})
+}
+
+export default {
+	page,
+	single,
+	save,
+	update,
+	materialDelete
+}

src/api/materialClass.ts

@@ -0,0 +1,48 @@
+import request from '@/benyun/utils/request'
+
+// 获取物料商品树形分类
+function treeList() {
+	return request({
+		url: '/maindata/maindataMaterialOrganizationCategory/treeList',
+		method: 'GET'
+	})
+}
+// 根据主键id查询物料分类数据
+function searchTreeList(data : any) {
+	return request({
+		url: '/maindata/maindataMaterialOrganizationCategory/treeList/' + data,
+		method: 'GET'
+	})
+}
+// 新增机构物料分类
+function saveCategory(data : any) {
+	return request({
+		url: '/maindata/maindataMaterialOrganizationCategory/saveCategory',
+		method: 'POST',
+		params: data
+	})
+}
+// 修改机构商品分类
+function updateCategory(data : any) {
+	return request({
+		url: '/maindata/maindataMaterialOrganizationCategory/updateCategory',
+		method: 'PUT',
+		params: data
+	})
+}
+// 删除数据
+function classDelete(data : any) {
+	return request({
+		url: '/maindata/maindataMaterialOrganizationCategory/delete',
+		method: 'POST',
+		params: data
+	})
+}
+
+export default {
+	treeList,
+	searchTreeList,
+	saveCategory,
+	updateCategory,
+	classDelete
+}

src/layout/components/AppMain.vue

@@ -33,7 +33,7 @@ export default {
   // height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow-y: hidden;;
+  overflow-y: hidden;
 }
 
 .fixed-header+.app-main {

src/views/audit/archivePage/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="bill">
+	<div class="my-container">
 		<div class="bill-left">
 			<div class="bill-tab">
 				<div class="title">导航</div>
@@ -183,10 +183,18 @@
 
 	}
 </script>
+<style>
+	.my-container .vxe-table--render-default.size--mini {
+		height: 630px;
+		overflow-y: auto;
+	}
+	.my-container .by-table .page{
+		padding-top: 20px !important;
+	}
+</style>
 <style lang="scss" scoped>
-	.bill {
+	.my-container {
 		width: 100%;
-		height: 990px;
 		box-sizing: border-box;
 		display: flex;
 		padding: 16px;

src/views/audit/orderTask/index.vue

@@ -0,0 +1,11 @@
+<template>
+	<div>
+		123
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/audit/productClassification/index.vue

@@ -1,257 +1,358 @@
 <template>
-	<div class="bill">
-		<div class="bill-left">
-			<div class="bill-tab">
-				<div class="title">导航</div>
-				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
-			</div>
-
-		</div>
+	<div class="my-container">
 		<div class="bill-main">
-			<div class="bill-box" :class="{'on-show':showTab == 'bill'}">
-				<moduleView style="padding: 0 16px 16px;" :propConfig="config" @clickHandle="clickHandle" />
+			<div v-show="!hideSearch">
+				<by-form :propConfig="config" ref="formId" />
+				<div class="search-btn">
+					<el-button type="primary" size="mini" icon="el-icon-search" @click="searchHandle">搜索</el-button>
+					<el-button size="mini" icon="el-icon-refresh" @click="resertHandle">重置</el-button>
+				</div>
 			</div>
+			<by-tool :propConfig="toolConfig" ref="toolId" @clickHandle="clickHandle" />
+			<el-table :data="tableData" v-loading="loading" style="width: 100%;margin: 20px 0;" :show-overflow-tooltip="true"
+				row-key="id" ref="tableId" :tree-props="{children: 'children'}" @cell-click="doClick">
+				<!-- <el-table-column type="selection" width="55" /> -->
+				<el-table-column prop="name" label="类别名称" width="200" />
+				<el-table-column prop="shortName" label="类别简称" width="200" />
+				<el-table-column prop="status" label="状态" />
+				<el-table-column prop="remark" label="备注" />
+				<el-table-column label="操作" width="100" style="text-align: center;">
+					<template slot-scope="scope">
+						<el-button type="text" size="small" icon="el-icon-edit" @click="dialogEdit">编辑</el-button>
+						<el-button type="text" size="small" @click="doDelete">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<!-- 新增/编辑弹窗 -->
+			<el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
+				<by-form :propConfig="addConfig" ref="addFormId" style="height:250px;">
+					<!-- 					<template v-slot:uploadImg>
+						<div class="upload-img">+</div>
+					</template> -->
+					<template v-slot:status class="clearfix">
+						<el-radio class="fl" style="margin-top: 8px;" v-model="radio" label="1">显示</el-radio>
+						<el-radio class="fl" style="margin-top: 8px;" v-model="radio" label="0">隐藏</el-radio>
+					</template>
+					<template v-slot:category>
+						<el-cascader style="width: 100%;" v-model="cascaderValue" :options="options" :props="props"
+							:show-all-levels="false" clearable />
+					</template>
+				</by-form>
+
+				<div slot="footer" class="dialog-footer">
+					<el-button @click="dialogFormVisible = false">取 消</el-button>
+					<el-button type="primary" @click="confirm">确 定</el-button>
+				</div>
+			</el-dialog>
 		</div>
 	</div>
 </template>
 <script lang="ts">
 	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 	import VueViews from '@/benyun/compVue/VueViews'
-	import moduleView from "@/benyun/components/moduleView/moduleView.vue";
-	@Component({ components: { moduleView } })
-	export default class ArchivePage extends VueViews {
-		showTab = "bill"
-		data : any = [{
-			label: '一级 1',
-			id: '1',
-			children: [{
-				label: '二级 1-1',
-				id: '2',
-				children: [{
-					id: '3',
-					label: '三级 1-1-1'
-				}]
-			}]
-		}, {
-			label: '一级 2',
-			id: '2',
-			children: [{
-				label: '二级 2-1',
-				id: '1',
-				children: [{
-					label: '三级 2-1-1',
-					id: '3',
-				}]
-			}, {
-				label: '二级 2-2',
-				id: '1',
-				children: [{
-					label: '三级 2-2-1',
-					id: '3',
-				}]
-			}]
-		}, {
-			label: '一级 3',
-			id: '3',
-			children: [{
-				label: '二级 3-1',
-				id: '2',
-				children: [{
-					label: '三级 3-1-1',
-					id: '1'
-				}]
-			}, {
-				label: '二级 3-2',
-				id: '1',
-				children: [{
-					label: '三级 3-2-1',
-					id: '2'
-				}]
-			}]
-		}]
-		defaultProps : any = {
+	import api from "@/api/materialClass";
+	@Component({})
+	export default class ProductClassification extends VueViews {
+		hideSearch = false
+		title = '新增分类'
+		loading : boolean = true
+		dialogFormVisible : boolean = false
+		cascaderValue = ''
+		radio = '1'
+		props = {
+			label: 'name',
+			value: 'name',
 			children: 'children',
-			label: 'label'
+			checkStrictly: true
+		}
+		options : Array<any> = []
+		tableData : Array<any> = []
+		toolConfig = {
+			tools: {
+				add: true,
+				export: true,
+				search: true,
+				refresh: true
+			},
+			audit: {
+				add: 'audit:collaborationLog:add',
+				export: 'audit:collaborationLog:export'
+			}
 		}
-		config : any = {
-			search: {
-				attr: {
-					size: 'mini',
-					rules: {
-						name: [{
-							required: true, message: '请输入名称', trigger: 'blur'
-						}]
+		config = {
+			attr: {
+				size: 'small',
+				height: 40
+			},
+			columns: [
+				[{
+					span: 6,
+					label: '类别名称',
+					prop: 'name',
+					component: 'by-input',
+					labelWidth: '70px',
+					compConfig: {
+						attr: {
+							placeholder: '请输入类别名称',
+							clearable: true
+						}
 					}
-				},
-				columns: [
-					[{
-						span: 6,
-						label: '创建时间',
-						prop: 'created',
-						component: 'by-date-picker',
-						compConfig: {
-							format: 'yyyy-MM-dd',
-							type: 'datetime'
+				}, {
+					span: 6,
+					label: '类别简称',
+					prop: 'shortName',
+					component: 'by-input',
+					labelWidth: '70px',
+					compConfig: {
+						attr: {
+							placeholder: '请输入类别简称',
+							clearable: true
 						}
-					}]
-				]
-			},
-			tool: {
-				tools: {
-					add: true,
-					edit: true,
-					delete: true,
-					export: true,
-					search: true,
-					refresh: true
-				},
-				audit: {
-					add: 'audit:collaborationLog:add',
-					edit: 'audit:collaborationLog:edit',
-					delete: 'audit:collaborationLog:remove',
-					export: 'audit:collaborationLog:export'
-				}
+					}
+				}]
+			]
+		}
+		addConfig = {
+			attr: {
+				size: 'small',
+				height: 60
 			},
-			table: {
-				attr: {
-					size: 'mini',
-					seq: true,
-					align: 'center',
-					checkbox: true
+			columns: [
+				[{
+					span: 20,
+					label: '分类名称',
+					prop: 'name',
+					component: 'by-input',
+					labelWidth: '80px',
 				},
-				columns: [{
-					title: '创建时间',
-					field: 'created'
+				{
+					span: 20,
+					label: '类别简称',
+					prop: 'shortName',
+					component: 'by-input',
+					labelWidth: '80px',
 				},
 				{
-					title: '订单号',
-					field: 'order_no'
+					span: 30,
+					label: '状态',
+					slot: true,
+					prop: 'status',
 				},
+				// {
+				// 	span: 10,
+				// 	label: '分类图片',
+				// 	slot: true,
+				// 	prop: 'uploadImg',
+				// }, 
 				{
-					title: '订单类型',
-					field: 'order_type'
+					span: 20,
+					label: '备注',
+					prop: 'remark',
+					component: 'by-input',
+					labelWidth: '80px',
 				},
 				{
-					title: '操作',
-					action: true,
-					plugins: [{
-						icon: 'el-icon-edit',
-						name: '编辑',
-						audit: '',
-						event: {
-							click: (item : any) => {
-								console.log('该行数据：', item)
-							}
-						}
-					}, {
-						name: '查看',
-						event: {
-							click: (item : any) => {
-								console.log('该行数据：', item);
-								console.log('this:', this)
-							}
-						}
-					}]
-				}]
-			},
-			request: {
-				url: '/system/audit/collaborationLog'
-			}
+					span: 20,
+					label: '上级分类',
+					slot: true,
+					prop: 'category',
+				},]
+			]
 		}
-
 		created() {
-
+			this.getDataList()
+		}
+		// 获取列表数据
+		getDataList() {
+			api.treeList().then((res : any) => {
+				// console.log(res.data[0]);
+				if (res.code === 200) {
+					this.tableData = res.data[0].children;
+					this.options = res.data;
+					this.loading = false;
+				} else this.failHandle(res)
+			})
+		}
+		// 工具栏方法
+		clickHandle(e : any) {
+			console.log(e)
+			if (e === 'toggleSearch') this.toggleSearch();
+			if (e === 'onRefresh') this.onRefresh();
+			if (e === 'onExport') this.onExport();
+			if (e === 'onAdd') this.onAdd();
+		}
+		// 单元格点击
+		doClick(e : any) {
+			console.log(e);
+			// (this as any).$refs.addFormId.setValue(e)
 		}
 		handleNodeClick(e : any) {
-			if (e.id == '1') {
-
-			}
+			console.log(e.id);
 		}
-		//左侧tab切换
-		tabChange(t : string) {
-			this.showTab = t;
+		// 新增
+		onAdd() {
+			this.title = '新增分类';
+			this.dialogFormVisible = true;
+		}
+		// 编辑
+		dialogEdit() {
+			this.title = '编辑分类';
+			this.dialogFormVisible = true;
+		}
+		// 确认新增/编辑
+		confirm() {
+			let query = (this as any).$refs.addFormId.getValue();
+			if (!this.cascaderValue[this.cascaderValue.length - 1]) return this.$message({
+				type: 'error',
+				message: '请输入完整字段'
+			})
+			if (query.name?.length > 0 && query.shortName?.length > 0 && query.remark?.length > 0) {
+				console.log(this.cascaderValue[this.cascaderValue.length - 1], this.radio);
+				this.dialogFormVisible = false;
+				this.$message({
+					type: 'success',
+					message: '编辑成功!'
+				});
+			} else this.$message({
+				type: 'error',
+				message: '请输入完整字段'
+			})
 		}
-		search(v : any, n : string) {
-			this.$emit('search', {
-				type: n,
-				value: v
+		// 搜索
+		searchHandle() {
+			this.loading = true;
+			let query : any = (this.$refs.formId as any).getValue();
+			if(!query.name) return this.getDataList();
+			api.searchTreeList(query.name || query.shortName).then((res : any) => {
+				if (res.code === 200) {
+					this.tableData = res.data
+					this.loading = false;
+				};
 			})
 		}
-		clickHandle(e : any, name : any) {
-			console.log(e, name);
+		// 删除
+		doDelete() {
+			this.$confirm('确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+				center: true
+			}).then(() => {
+				this.$message({
+					type: 'success',
+					message: '删除成功!'
+				});
+			}).catch(() => {
+				this.$message({
+					type: 'info',
+					message: '已取消删除'
+				});
+			});
 		}
+		//重置
+		resertHandle() {
+			this.loading = true;
+			(this.$refs.formId as any).setValue({});
+			// (this.$refs.tableId as any).setPage({ pageNo: 1, total: 0 });
+			this.getDataList();
+		}
+		//刷新
+		onRefresh() {
+			this.loading = true;
+			(this.$refs.formId as any).setValue({});
+			// (this.$refs.tableId as any).setPage({ pageNo: 1, total: 0 });
+			this.getDataList();
+		}
+		//获取查询值
+		getQuery() {
+			let query : any = (this.$refs.formId as any).getValue();
+			// const page:any = (this.$refs.tableId as any).getPage();
+			// query.pageNum = page.pageNo;
+			// query.pageSize = page.pageSize;
+			return query;
+		}
+		//导出
+		onExport() {
+			let urlArr = '/maindata/maindataMaterialOrganizationCategory';
+			let query = this.getQuery();
+			(this as any).$download(urlArr + '/export', {
+				...query
+			}, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
 
+		}
+		//显示/隐藏搜索
+		toggleSearch() {
+			this.hideSearch = !this.hideSearch
+		}
+		// 运行错误
+		failHandle(err : any) {
+			let msg = err.msg ? err.msg : '运行错误！';
+			this.$message.error(msg)
+		}
 	}
 </script>
+<style lang="scss">
+	.my-container {
+		.el-form-item__label {
+			text-align: center;
+		}
+
+		.el-form-item__content {
+			margin-right: 20px;
+		}
+
+		.el-table__cell {
+			text-align: center;
+		}
+
+		.form-row.el-row>div {
+			margin-bottom: 10px;
+		}
+	}
+
+	.el-dialog:not(.is-fullscreen) {
+		margin-top: 15vh !important;
+	}
+
+	.el-message-box {
+		vertical-align: baseline;
+	}
+</style>
 <style lang="scss" scoped>
-	.bill {
+	.my-container {
 		width: 100%;
-		height: 990px;
 		box-sizing: border-box;
 		display: flex;
 		padding: 16px;
 
-		.bill-left {
+		.bill-main {
+			width: calc(100% - 16px);
+			box-sizing: border-box;
+			margin-left: 16px;
 			position: relative;
-			border-right: solid #EEE 1px;
-			padding-right: 16px;
-			flex-shrink: 0;
-
-			// box-sizing: border-box;
-			.bill-tab {
-				width: 200px;
-				height: 100%;
-				transition: all .5s;
-				overflow: hidden;
-			}
-
-			.title {
-				font-size: 16px;
-				padding-bottom: 16px;
-				width: 200px;
-			}
 
-			.bill-nav {
-				font-size: 14px;
-				height: 30px;
-				line-height: 30px;
-				width: 200px;
-				box-sizing: border-box;
-				padding: 0 8px;
-				cursor: pointer;
-				margin-bottom: 2px;
+			.upload-img {
+				width: 150px;
+				height: 150px;
+				line-height: 150px;
+				text-align: center;
 				border-radius: 5px;
+				background-color: #fbfdff;
+				color: #8c939d;
+				border: 1px dashed #c0ccda;
+				font-size: 28px;
 			}
 
-			.onBill {
-				background-color: #bde3f7;
-			}
-
-			.bill-nav:hover {
-				background-color: #bde3f7;
+			.upload-img:hover {
+				border-color: #1890ff;
 			}
 
-			.close {
-				height: 22px;
-				width: 22px;
-				border-radius: 50%;
-				border: solid #EEE 1px;
-				position: absolute;
-				top: 30px;
-				right: -11px;
-				background-color: #FFF;
+			.search-btn {
+				width: 100%;
 				display: flex;
-				justify-content: center;
-				align-items: center;
-				cursor: pointer;
+				justify-content: flex-end;
+				margin-bottom: 20px;
 			}
-		}
-
-		.bill-main {
-			width: calc(100% - 16px);
-			box-sizing: border-box;
-			margin-left: 16px;
-			position: relative;
 
 			.bill-box {
 				width: 100%;

src/views/audit/productManagement/index.vue

@@ -1,196 +1,230 @@
 <template>
-	<div class="bill">
+	<div class="my-container">
 		<div class="bill-left">
 			<div class="bill-tab">
 				<div class="title">导航</div>
-				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+				<el-tree :data="data" :props="props" @node-click="handleNodeClick"></el-tree>
 			</div>
-
 		</div>
 		<div class="bill-main">
-			<div class="bill-box" :class="{'on-show':showTab == 'bill'}">
-				<moduleView style="padding: 0 16px 16px;" :propConfig="config" @clickHandle="clickHandle" />
+			<div v-show="!hideSearch">
+				<by-form :propConfig="config" ref="formId" />
+				<div class="search-btn">
+					<el-button type="primary" size="mini" icon="el-icon-search" @click="searchHandle">搜索</el-button>
+					<el-button size="mini" icon="el-icon-refresh" @click="resertHandle">重置</el-button>
+				</div>
 			</div>
+			<by-tool :propConfig="toolConfig" ref="toolId" @clickHandle="clickHandle" />
+			<el-table :data="tableData" v-loading="loading" style="width: 100%;margin: 20px 0;" :show-overflow-tooltip="true"
+				row-key="id" ref="tableId" :tree-props="{children: 'children'}">
+				<el-table-column type="selection" width="55" />
+				<el-table-column prop="name" label="名称" />
+				<el-table-column prop="shortName" label="简称" />
+				<el-table-column prop="pic" label="物料封面图" />
+				<!-- <img :src="tableData.pic" alt=""> -->
+				</el-table-column>
+				<!-- <el-table-column prop="accountingCode" label="财务编号" /> -->
+				<!-- <el-table-column prop="nsCode" label="国标码" /> -->
+				<el-table-column prop="basePrice" label="基本售价" />
+				<el-table-column prop="markPrice" label="市场价格" />
+				<el-table-column prop="price" label="价格" />
+				<el-table-column prop="unit" label="单位" />
+				<el-table-column prop="weight" label="重量" />
+				<el-table-column prop="status" label="状态" />
+				<el-table-column prop="remark" label="备注" />
+				<el-table-column fixed="right" label="操作" width="100">
+					<template slot-scope="scope">
+						<el-button type="text" size="small" icon="el-icon-edit">查看</el-button>
+						<el-button type="text" size="small">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
 		</div>
 	</div>
 </template>
 <script lang="ts">
 	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 	import VueViews from '@/benyun/compVue/VueViews'
-	import moduleView from "@/benyun/components/moduleView/moduleView.vue";
-	@Component({ components: { moduleView } })
-	export default class ArchivePage extends VueViews {
-		showTab = "bill"
-		data : any = [{
-			label: '一级 1',
-			id: '1',
-			children: [{
-				label: '二级 1-1',
-				id: '2',
-				children: [{
-					id: '3',
-					label: '三级 1-1-1'
-				}]
-			}]
-		}, {
-			label: '一级 2',
-			id: '2',
-			children: [{
-				label: '二级 2-1',
-				id: '1',
-				children: [{
-					label: '三级 2-1-1',
-					id: '3',
-				}]
-			}, {
-				label: '二级 2-2',
-				id: '1',
-				children: [{
-					label: '三级 2-2-1',
-					id: '3',
-				}]
-			}]
-		}, {
-			label: '一级 3',
-			id: '3',
-			children: [{
-				label: '二级 3-1',
-				id: '2',
-				children: [{
-					label: '三级 3-1-1',
-					id: '1'
-				}]
-			}, {
-				label: '二级 3-2',
-				id: '1',
-				children: [{
-					label: '三级 3-2-1',
-					id: '2'
-				}]
-			}]
-		}]
+	import api from "@/api/material";
+	import materialClass from "@/api/materialClass";
+	@Component({})
+	export default class productManagement extends VueViews {
+		data : any = []
+		pageNo : number = 1
+		pageSize : number = 1
+		loading : boolean = true
 		defaultProps : any = {
 			children: 'children',
 			label: 'label'
 		}
-		config : any = {
-			search: {
-				attr: {
-					size: 'mini',
-					rules: {
-						name: [{
-							required: true, message: '请输入名称', trigger: 'blur'
-						}]
-					}
-				},
-				columns: [
-					[{
-						span: 6,
-						label: '创建时间',
-						prop: 'created',
-						component: 'by-date-picker',
-						compConfig: {
-							format: 'yyyy-MM-dd',
-							type: 'datetime'
-						}
-					}]
-				]
+
+		hideSearch = false
+		toolConfig = {
+			tools: {
+				add: true,
+				delete: true,
+				export: true,
+				search: true,
+				refresh: true
 			},
-			tool: {
-				tools: {
-					add: true,
-					edit: true,
-					delete: true,
-					export: true,
-					search: true,
-					refresh: true
-				},
-				audit: {
-					add: 'audit:collaborationLog:add',
-					edit: 'audit:collaborationLog:edit',
-					delete: 'audit:collaborationLog:remove',
-					export: 'audit:collaborationLog:export'
-				}
+			audit: {
+				add: 'audit:collaborationLog:add',
+				delete: 'audit:collaborationLog:remove',
+				export: 'audit:collaborationLog:export'
+			}
+		}
+		config = {
+			attr: {
+				size: 'small',
+				height: 40
 			},
-			table: {
-				attr: {
-					size: 'mini',
-					seq: true,
-					align: 'center',
-					checkbox: true
-				},
-				columns: [{
-					title: '创建时间',
-					field: 'created'
-				},
-				{
-					title: '订单号',
-					field: 'order_no'
-				},
-				{
-					title: '订单类型',
-					field: 'order_type'
-				},
-				{
-					title: '操作',
-					action: true,
-					plugins: [{
-						icon: 'el-icon-edit',
-						name: '编辑',
-						audit: '',
-						event: {
-							click: (item : any) => {
-								console.log('该行数据：', item)
-							}
-						}
-					}, {
-						name: '查看',
-						event: {
-							click: (item : any) => {
-								console.log('该行数据：', item);
-								console.log('this:', this)
-							}
+			columns: [
+				[{
+					span: 6,
+					label: '名称',
+					prop: 'name',
+					component: 'by-input',
+					labelWidth: '70px',
+					compConfig: {
+						attr: {
+							placeholder: '请输入名称',
+							clearable: true
 						}
-					}]
+					}
 				}]
-			},
-			request: {
-				url: '/system/audit/collaborationLog'
-			}
+			]
 		}
-
+		props = {
+			label: 'name',
+			children: 'children'
+		}
+		tableData : Array<any> = []
 		created() {
-
+			this.getTreeList()
+			this.getDataList()
 		}
-		handleNodeClick(e : any) {
-			if (e.id == '1') {
-
-			}
+		// 获取树型导航数据
+		getTreeList() {
+			materialClass.treeList().then((res : any) => {
+				// console.log(res.data[0]);
+				if (res.code === 200) {
+					this.data = res.data[0].children;
+				} else this.failHandle(res)
+			})
+		}
+		// 获取列表数据
+		getDataList() {
+			api.page({ pageNo: this.pageNo, pageSize: this.pageSize }).then((res : any) => {
+				console.log(res.data);
+				if (res.code === 200) {
+					this.tableData = res.data.records;
+					this.loading = false;
+				} else this.failHandle(res)
+			})
 		}
-		//左侧tab切换
-		tabChange(t : string) {
-			this.showTab = t;
+		// 工具栏方法
+		clickHandle(e : any) {
+			console.log(e)
+			if (e === 'toggleSearch') this.toggleSearch();
+			if (e === 'onRefresh') this.onRefresh();
+			if (e === 'onExport') this.onExport();
 		}
-		search(v : any, n : string) {
-			this.$emit('search', {
-				type: n,
-				value: v
+		// handleNodeClick
+		handleNodeClick(e : any) {
+			console.log(e.id);
+			this.loading = true;
+			api.single({ id: e.id }).then((res : any) => {
+				console.log(res);
+				if (res.code === 200) {
+					this.tableData = res.data;
+					this.loading = false;
+				}
 			})
 		}
-		clickHandle(e : any, name : any) {
-			console.log(e, name);
+		//搜索
+		searchHandle() {
+			this.loading = true;
+			let query : any = (this.$refs.formId as any).getValue() || '';
+			if(!query.name) return this.getDataList();
+			api.single({ id: query.name }).then((res : any) => {
+				if (res.code === 200) {
+					this.tableData = res.data
+					this.loading = false;
+				};
+			})
+		}
+		//重置
+		resertHandle() {
+			this.loading = true;
+			(this.$refs.formId as any).setValue({});
+			// (this.$refs.tableId as any).setPage({ pageNo: 1, total: 0 });
+			this.getDataList();
+		}
+		//刷新
+		onRefresh() {
+			this.loading = true;
+			(this.$refs.formId as any).setValue({});
+			// (this.$refs.tableId as any).setPage({ pageNo: 1, total: 0 });
+			this.getDataList();
+		}
+		//获取查询值
+		getQuery() {
+			let query : any = (this.$refs.formId as any).getValue();
+			// const page:any = (this.$refs.tableId as any).getPage();
+			// query.pageNum = page.pageNo;
+			// query.pageSize = page.pageSize;
+			return query;
+		}
+		//导出
+		onExport() {
+			let urlArr = '/maindata/maindataMaterialOrganizationCategory';
+			let query = this.getQuery();
+			(this as any).$download(urlArr + '/export', {
+				...query
+			}, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
+
+		}
+		//显示/隐藏搜索
+		toggleSearch() {
+			this.hideSearch = !this.hideSearch
+		}
+		// 运行错误
+		failHandle(err : any) {
+			let msg = err.msg ? err.msg : '运行错误！';
+			this.$message.error(msg)
 		}
 
 	}
 </script>
+<style lang="scss">
+	.my-container {
+		.el-form-item__label {
+			text-align: center;
+		}
+
+		.el-form-item__content {
+			margin-right: 20px;
+		}
+
+		.el-table .el-table__cell {
+			text-align: center;
+		}
+	}
+</style>
 <style lang="scss" scoped>
-	.bill {
+	.my-container {
 		width: 100%;
-		height: 990px;
 		box-sizing: border-box;
 		display: flex;
 		padding: 16px;
 
+		.search-btn {
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			margin-bottom: 20px;
+		}
+
 		.bill-left {
 			position: relative;
 			border-right: solid #EEE 1px;
@@ -199,7 +233,7 @@
 
 			// box-sizing: border-box;
 			.bill-tab {
-				width: 200px;
+				width: 150px;
 				height: 100%;
 				transition: all .5s;
 				overflow: hidden;

src/views/demo/bill.vue

@@ -205,6 +205,7 @@ export default class BillDemo extends Vue {
       name:'李四',
       time:'2023-02-02'
     }];
+		console.log(data);
     (this.$refs.bill as any).setTabTableValue('smt',data);
   }
   setdraftsBoxValue(){

vue.config.js

@@ -31,7 +31,9 @@ module.exports = defineConfig({
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
+        // target: `http://192.168.1.79:9207`,
         target: `http://192.168.2.202:8080`,
+        // target: `http://192.168.2.202/prod-api/maindata`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''