fix: 部分功能显示优化

2026-04-01 14:48:02 +08:00
parent 8eb2495cea
commit b622f2205f
7 changed files with 736 additions and 303 deletions
--- a/front/config/dev.env.js
+++ b/front/config/dev.env.js
@@ -1,7 +1,9 @@
 module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
-  BASE_WMS_API: '"http://127.0.0.1:8011/api"',
-  BASE_WMS_FILE: '"http://127.0.0.1:8011/"'
+  // BASE_WMS_API: '"http://127.0.0.1:8011/api"',
+  // BASE_WMS_FILE: '"http://127.0.0.1:8011/"'
+  BASE_WMS_API: '"http://47.111.78.178:8011/api"',
+  BASE_WMS_FILE: '"http://47.111.78.178:8011/"'
  // 47.101.147.253
 }
--- a/front/config/prod.env.js
+++ b/front/config/prod.env.js
@@ -1,8 +1,10 @@
 module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
-  BASE_WMS_API: '"http://127.0.0.1:8011/api"',
-  BASE_WMS_FILE: '"http://127.0.0.1:8011/"'
+  // BASE_WMS_API: '"http://127.0.0.1:8011/api"',
+  // BASE_WMS_FILE: '"http://127.0.0.1:8011/"'
+  BASE_WMS_API: '"http://47.111.78.178:8011/api"',
+  BASE_WMS_FILE: '"http://47.111.78.178:8011/"'
  ////BASE_AGV_API: '"http://192.168.3.223:55200/v1"',
  //BASE_WMS_API: '"http://169.254.71.103/api"',
  //BASE_AGV_API: '"http://127.0.0.1:55200/v1"',
--- a/front/src/views/contract-mgr/projectcontract.vue
+++ b/front/src/views/contract-mgr/projectcontract.vue
@@ -1,24 +1,38 @@
 <template>
-	<div class="about">
-		<el-row>
-			<el-col :span="6">
-				<el-card class="box-card">
-					<div slot="header" class="clearfix">
-						<span>项目合同</span>
-					</div>
-					<el-tree :data="project_contract_list" node-key="id" @node-click="handle_node_click"
-						:props="defaultProps" :expand-on-click-node="false">
-						<span class="custom-tree-node" slot-scope="{ node, data }">
-							<span>{{ node.label }}</span>
-						</span>
-					</el-tree>
-				</el-card>
-			</el-col>
-			<el-col :span="18">
+  <div class="about">
+    <el-row>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>项目合同</span>
+          </div>
+          <el-input
+            v-model="filterText"
+            placeholder="输入关键字进行过滤"
+            clearable
+            style="margin-bottom: 10px;"/>
+          <el-tree
+            :data="project_contract_list"
+            ref="tree"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            node-key="id"
+            @node-click="handle_node_click">
+            <span slot-scope="{ node, data }" class="custom-tree-node">
+              <span :title="node.label" class="tree-node-label">{{ node.label }}</span>
+            </span>
+          </el-tree>
+        </el-card>
+      </el-col>
+      <el-col :span="18">

-				<Contract :project_id="del_id" :contract_type="1" :edid_authority="true"
-					v-if="update_view == false && currentNodeLevel == 2" />
-				<!--el-table :data="contract_info_list" border fit highlight-current-row
+        <Contract
+          v-if="update_view == false && currentNodeLevel == 2"
+          :project_id="del_id"
+          :contract_type="1"
+          :edid_authority="true" />
+          <!--el-table :data="contract_info_list" border fit highlight-current-row
 					style="width: 100%; margin-left: 2px;" height="80vh">
 					<el-table-column prop="contract_id" label="ID" align="center">
 					</el-table-column>
@@ -37,7 +51,6 @@
 <el-table-column prop="create_time" label="签约时间" align="center">
 </el-table-column>

-
 <el-table-column fixed="right" label="操作" width="250px">
 	<template slot-scope="scope">
 							<el-button class="el-icon-view" v-if="scope.row.contract_url != ''" @click="showImg(scope.row)" size="mini"
@@ -45,171 +58,179 @@
 						</template>
 </el-table-column>
 </el-table-->
-			</el-col>
-		</el-row>
+      </el-col>
+    </el-row>

-		<!-- 对话框 -->
-		<el-dialog title="文件信息" :visible.sync="dialogVisibleShowFile" width="80%" append-to-body>
-			<img v-if="isImage" :src="previewUrl" alt="Preview" style="max-width: 40%; max-height: 30%;">
-			<iframe v-else-if="isPDF" :src="previewUrl" frameborder="0" style="width: 100%; height: 600px;"></iframe>
-			<div v-else>
-				<p>该文件类型（{{ fileExtension }}）需要下载后查看</p>
-				<el-button type="primary" @click="downloadFile(previewUrl)">
-					立即下载 {{ fileExtension.toUpperCase() }} 文件
-				</el-button>
-			</div>
-		</el-dialog>
+    <!-- 对话框 -->
+    <el-dialog :visible.sync="dialogVisibleShowFile" title="文件信息" width="80%" append-to-body>
+      <img v-if="isImage" :src="previewUrl" alt="Preview" style="max-width: 40%; max-height: 30%;">
+      <iframe v-else-if="isPDF" :src="previewUrl" frameborder="0" style="width: 100%; height: 600px;"/>
+      <div v-else>
+        <p>该文件类型（{{ fileExtension }}）需要下载后查看</p>
+        <el-button type="primary" @click="downloadFile(previewUrl)">
+          立即下载 {{ fileExtension.toUpperCase() }} 文件
+        </el-button>
+      </div>
+    </el-dialog>

-
-	</div>
+  </div>
 </template>

 <script>
 import contract from '@/api/contract'
-import Contract from '@/views/components/Contract.vue';
+import Contract from '@/views/components/Contract.vue'

 export default {
-	components: {
-		Contract
-	},
-	data() {
-		let id = 1;
-		return {
-			//contract_url:'',
-			upload_url: process.env.BASE_WMS_API + '/upload/uploadFile',
-			project_contract_list: [],
-			contract_info_list: [],
-			defaultProps: {
-				children: 'customer_projects',
-				label: 'name'
-			},
-			id: id,
-			update_view: true,
-			dialogVisibleShowFile: false,
-			currentNode: null,
-			currentData: null,
-			//currentNodeLevel: 0,
-			fileExtension: '', // 新增文件类型显示
-			products: [],
-			del_id: 0,
-			fileList: [],
-			contract_img: '',
-			contract_pdf_img: ''
-		};
-	},
-	mounted() {
-		this.get_customer_project_list()
-	},
-	created() {
+  components: {
+    Contract
+  },
+  data() {
+    const id = 1
+    return {
+      // contract_url:'',
+      upload_url: process.env.BASE_WMS_API + '/upload/uploadFile',
+      project_contract_list: [],
+      contract_info_list: [],
+      defaultProps: {
+        children: 'customer_projects',
+        label: 'name'
+      },
+      id: id,
+      update_view: true,
+      dialogVisibleShowFile: false,
+      currentNode: null,
+      currentData: null,
+      // currentNodeLevel: 0,
+      fileExtension: '', // 新增文件类型显示
+      products: [],
+      del_id: 0,
+      fileList: [],
+      contract_img: '',
+      contract_pdf_img: '',
+      filterText: ''
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  mounted() {
+    this.get_customer_project_list()
+  },
+  created() {

-	},
-	methods: {
-		downloadFile(url) {
-			const fileName = url.split('/').pop() // 获取原始文件名
-			const link = document.createElement('a')
-			link.href = url
-			link.setAttribute('download', fileName) // 保留原始文件名
-			document.body.appendChild(link)
-			link.click()
-			document.body.removeChild(link)
-		},
-		showImg(row) {
-			const url = row.materials_url
-			const ext = url.split('.').pop().toLowerCase()
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      const trimmedValue = value.trim()
+      if (!trimmedValue) return true
+      return data.name.indexOf(trimmedValue) !== -1
+    },
+    downloadFile(url) {
+      const fileName = url.split('/').pop() // 获取原始文件名
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', fileName) // 保留原始文件名
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+    showImg(row) {
+      const url = row.materials_url
+      const ext = url.split('.').pop().toLowerCase()

-			this.isImage = false
-			this.isPDF = false
-			this.fileExtension = ext  // 记录文件扩展名
+      this.isImage = false
+      this.isPDF = false
+      this.fileExtension = ext // 记录文件扩展名

-			if (['jpg', 'jpeg', 'png'].includes(ext)) {
-				this.previewUrl = process.env.BASE_WMS_FILE + url
-				this.isImage = true
-			} else if (ext === 'pdf') {
-				this.previewUrl = process.env.BASE_WMS_FILE + url
-				this.isPDF = true
-			} else {
-				this.previewUrl = process.env.BASE_WMS_FILE + url  // 必须设置预览URL
-			}
-			this.dialogVisibleShowFile = true
-		},
-		showImg(row) {
-			const url = process.env.BASE_WMS_FILE + row.contract_url
-			const ext = url.split('.').pop().toLowerCase();
+      if (['jpg', 'jpeg', 'png'].includes(ext)) {
+        this.previewUrl = process.env.BASE_WMS_FILE + url
+        this.isImage = true
+      } else if (ext === 'pdf') {
+        this.previewUrl = process.env.BASE_WMS_FILE + url
+        this.isPDF = true
+      } else {
+        this.previewUrl = process.env.BASE_WMS_FILE + url // 必须设置预览URL
+      }
+      this.dialogVisibleShowFile = true
+    },
+    showImg(row) {
+      const url = process.env.BASE_WMS_FILE + row.contract_url
+      const ext = url.split('.').pop().toLowerCase()

-			if (ext === 'jpg' || ext === 'jpeg' || ext === 'png') {
-				this.previewUrl = url
-				this.isImage = true
-				this.isPDF = false
-			} else if (ext === 'pdf') {
-				this.previewUrl = url
-				this.isImage = false
-				this.isPDF = true
-			} else if (ext === '') {
+      if (ext === 'jpg' || ext === 'jpeg' || ext === 'png') {
+        this.previewUrl = url
+        this.isImage = true
+        this.isPDF = false
+      } else if (ext === 'pdf') {
+        this.previewUrl = url
+        this.isImage = false
+        this.isPDF = true
+      } else if (ext === '') {

-			} else {
-				this.$message.success('不支持的文件类型');
-			}
-			this.dialogVisibleShowFile = true
-		},
+      } else {
+        this.$message.success('不支持的文件类型')
+      }
+      this.dialogVisibleShowFile = true
+    },

-		previewImage(url) {
-			this.$dialog({
-				title: '图片预览',
-				content: `<img src="${url}" alt="Preview" style="max-width: 100%; max-height: 100%;">`,
-				closable: true,
-				appendToBody: true
-			});
-		},
+    previewImage(url) {
+      this.$dialog({
+        title: '图片预览',
+        content: `<img src="${url}" alt="Preview" style="max-width: 100%; max-height: 100%;">`,
+        closable: true,
+        appendToBody: true
+      })
+    },

-		update_sub_component() {
-			this.update_view = true;
-			let that = this;
-			setTimeout(() => {
-				that.update_view = false;
-			}, 100); // 1000 毫秒后执行
-		},
+    update_sub_component() {
+      this.update_view = true
+      const that = this
+      setTimeout(() => {
+        that.update_view = false
+      }, 100) // 1000 毫秒后执行
+    },

-		previewPDF(url) {
-			this.$dialog({
-				title: 'PDF 预览',
-				content: `<iframe src="${url}" frameborder="0" style="width: 100%; height: 600px;"></iframe>`,
-				closable: true,
-				appendToBody: true
-			});
-		},
+    previewPDF(url) {
+      this.$dialog({
+        title: 'PDF 预览',
+        content: `<iframe src="${url}" frameborder="0" style="width: 100%; height: 600px;"></iframe>`,
+        closable: true,
+        appendToBody: true
+      })
+    },

-		get_customer_project_list() {
-			contract.GetCustomerProjectList().then(response => {
-				this.project_contract_list = response.data.data
-				console.log(this.project_contract_list);
-			})
-		},
+    get_customer_project_list() {
+      contract.GetCustomerProjectList().then(response => {
+        this.project_contract_list = response.data.data
+        console.log(this.project_contract_list)
+      })
+    },

+    get_contract_info_list(id) {
+      var param = { project_id: id, contract_type: 1 } // contract_type:商务合同
+      contract.GetProjectContractList(param).then(response => {
+        this.contract_info_list = response.data.data
+        console.log(this.contract_info_list)
+      })
+    },

-
-		get_contract_info_list(id) {
-			var param = { project_id: id, contract_type: 1 }  //contract_type:商务合同
-			contract.GetProjectContractList(param).then(response => {
-				this.contract_info_list = response.data.data
-				console.log(this.contract_info_list);
-			})
-		},
-
-		handle_node_click(data, node) {
-			this.currentNode = node;
-			this.currentData = data;
-			this.del_id = 0
-			this.del_id = data.id
-			// 记录当前节点的层级
-			this.currentNodeLevel = node.level;
-			if (this.currentNodeLevel == 2) {
+    handle_node_click(data, node) {
+      this.currentNode = node
+      this.currentData = data
+      this.del_id = 0
+      this.del_id = data.id
+      // 记录当前节点的层级
+      this.currentNodeLevel = node.level
+      if (this.currentNodeLevel == 2) {
        this.update_sub_component()
-			}
-			//this.get_contract_info_list(data.id);
+      }
+      // this.get_contract_info_list(data.id);
+    }

-		},
-
-	}
+  }
 }
 </script>

@@ -247,7 +268,43 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	font-size: 14px;
-	padding-right: 8px;
+	padding: 8px;
+	width: 100%;
+	min-height: 40px;
+}
+
+.tree-node-label {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	cursor: pointer;
+	line-height: 1.4;
+}
+
+/* 为树形组件添加节点间距 */
+.box-card .el-tree-node {
+	margin-bottom: 15px;
+}
+
+.box-card .el-tree-node__content {
+	height: auto !important;
+	min-height: 40px;
+	padding: 12px 0;
+	border-radius: 4px;
+}
+
+.box-card .el-tree-node__content:hover {
+	background-color: #f5f7fa;
+}
+
+.box-card .el-tree-node.is-current > .el-tree-node__content {
+	background-color: #ecf5ff;
+	color: #409eff;
+}
+
+.box-card .el-tree {
+	padding: 15px;
 }

 .upload-demo {
--- a/front/src/views/customer-mgr/customerlist.vue
+++ b/front/src/views/customer-mgr/customerlist.vue
@@ -1,21 +1,28 @@
 <template>
 	<div class="about">
-		<el-row>
-			<el-col :span="5">
+		<div class="resizable-container">
+			<div class="left-panel" :style="{ width: leftWidth + 'px' }">
 				<el-card class="box-card">
 					<div slot="header" class="clearfix">
 						<span>客户管理</span>
 					</div>
+					<el-input
+						placeholder="输入关键字进行过滤"
+						v-model="filterText"
+						clearable
+						style="margin-bottom: 10px;">
+					</el-input>
 					<el-tree :data="supplier_type_list" node-key="id" @node-click="handle_node_click"
 						@node-collapse="closeTreeMenu" :props="defaultProps" @node-contextmenu="openTreeMenu"
-						:expand-on-click-node="false">
+						:expand-on-click-node="false" :filter-node-method="filterNode" ref="tree">
 						<span class="custom-tree-node" slot-scope="{ node, data }">
-							<span>{{ node.label }}</span>
+							<span class="tree-node-label" :title="node.label">{{ node.label }}</span>
 						</span>
 					</el-tree>
 				</el-card>
-			</el-col>
-			<el-col :span="19">
+			</div>
+			<div class="resize-divider" @mousedown="startResize"></div>
+			<div class="right-panel" :style="{ width: 'calc(100% - ' + (leftWidth + 6) + 'px)' }">
 				<el-row>
 					<PartnerInfo :partner_id="partner_id" :partner_type="1"  :service_type="service_type"
 				               :add_support="add_support" v-if="update_view==false && currentNodeLevel==1"/>
@@ -36,8 +43,8 @@
          <ProjectBasicInfo :project_id="project_id" :edit_support="true" v-if="update_view==false && currentNodeLevel==3"/>
        </el-row>

-			</el-col>
-		</el-row>
+			</div>
+		</div>

 		<div v-show="showTreeMenu" class="treeMenu">
 			<div v-if="currentNodeLevel < 2" @click="dialogVisibleCreateFolder = true" style="margin-left: 5px;">
@@ -81,6 +88,9 @@ export default {
 			currentNode: null,
 			currentNodeLevel: 0,
 			del_id: 0,
+			filterText: '',
+			leftWidth: 300,
+			isResizing: false
 		};
 	},
 	mounted() {
@@ -88,8 +98,19 @@ export default {
 	},
 	created() {

+	},
+	watch: {
+		filterText(val) {
+			this.$refs.tree.filter(val);
+		}
 	},
 	methods: {
+		filterNode(value, data) {
+			if (!value) return true;
+			const trimmedValue = value.trim();
+			if (!trimmedValue) return true;
+			return data.name.indexOf(trimmedValue) !== -1;
+		},
    confirmAddPartner() {
      // this.newPartner.company_type = this.partner_type
      //如果是供应商,需要设置供应商的服务类型
@@ -191,6 +212,32 @@ export default {
      this.update_sub_component();
 		},

+		startResize(e) {
+			this.isResizing = true;
+			document.addEventListener('mousemove', this.handleResize);
+			document.addEventListener('mouseup', this.stopResize);
+			e.preventDefault();
+		},
+
+		handleResize(e) {
+			if (!this.isResizing) return;
+			const container = this.$el.querySelector('.resizable-container');
+			const containerRect = container.getBoundingClientRect();
+			let newWidth = e.clientX - containerRect.left;
+			
+			// 设置最小和最大宽度
+			if (newWidth < 200) newWidth = 200;
+			if (newWidth > containerRect.width - 400) newWidth = containerRect.width - 400;
+			
+			this.leftWidth = newWidth;
+		},
+
+		stopResize() {
+			this.isResizing = false;
+			document.removeEventListener('mousemove', this.handleResize);
+			document.removeEventListener('mouseup', this.stopResize);
+		}
+
 	}
 }
 </script>
@@ -201,13 +248,51 @@ export default {
 	height: 100%;
 }

+.resizable-container {
+	display: flex;
+	height: 100%;
+	width: 100%;
+}
+
+.left-panel {
+	flex-shrink: 0;
+	overflow: auto;
+}
+
+.resize-divider {
+	width: 6px;
+	cursor: col-resize;
+	background-color: #f0f0f0;
+	transition: background-color 0.2s;
+	flex-shrink: 0;
+}
+
+.resize-divider:hover {
+	background-color: #409EFF;
+}
+
+.right-panel {
+	flex: 1;
+	overflow: auto;
+	padding-left: 10px;
+}
+
 .custom-tree-node {
 	flex: 1;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	font-size: 14px;
-	padding-right: 8px;
+	padding: 0;
+	width: 100%;
+	overflow: hidden;
+}
+
+.tree-node-label {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }

 .upload-demo {
@@ -238,4 +323,33 @@ export default {
 	background-color: #eee;
 	cursor: pointer;
 }
+
+/* 调整树形结构节点间距和样式 */
+::v-deep .el-tree-node__content {
+	height: 36px;
+	line-height: 36px;
+	padding: 0 8px;
+	margin: 2px 0;
+}
+
+/* 确保选中状态的背景色对齐 */
+::v-deep .el-tree-node__content:hover {
+	background-color: #f5f7fa;
+}
+
+::v-deep .el-tree-node.is-current > .el-tree-node__content {
+	background-color: #e6f7ff;
+}
+
+/* 调整展开/收起图标的位置 */
+::v-deep .el-tree-node__expand-icon {
+	padding: 6px;
+}
+
+/* 防止文字溢出 */
+::v-deep .el-tree-node__label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 </style>
--- a/front/src/views/customer-prj/projectlist.vue
+++ b/front/src/views/customer-prj/projectlist.vue
@@ -1,58 +1,82 @@
 <template>
-	<div class="about">
-		<el-row>
-			<el-col :span="6">
-        <el-card class="box-card" style="height: 80vh;">
+  <div class="about">
+    <div class="project-container">
+      <div :style="{ width: leftWidth + '%' }" class="tree-col">
+        <el-card class="box-card tree-card">
          <div slot="header" class="clearfix">
-            <span>{{PageTitle}}</span>
+            <span>{{ PageTitle }}</span>
+          </div>
+          <div class="search-wrapper">
+            <el-input
+              v-model="searchText"
+              placeholder="搜索项目名称或项目号"
+              prefix-icon="el-icon-search"
+              clearable
+              size="small"
+              @input="handleSearch"/>
+          </div>
+          <div class="tree-wrapper">
+            <el-tree
+              :data="filteredProjectList"
+              ref="tree"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              node-key="type_id"
+              @node-click="handle_node_click">
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <el-tooltip
+                  :content="node.label + (data.project_number ? '\n项目号: ' + data.project_number : '')"
+                  :open-delay="500"
+                  placement="right">
+                  <span class="node-content">
+                    <div class="node-label">{{ node.label }}</div>
+                    <div class="node-number">{{ data.project_number }}</div>
+                  </span>
+                </el-tooltip>
+                <!--el-button style="margin-left: auto;" type="text" icon="el-icon-circle-plus-outline"
+                  @click="() => createSelect(node, data)" v-if="node.level <= 3"></el-button>
+                <el-button type="text" icon="el-icon-remove-outline" @click="() => remove(node, data)"
+                  v-if="node.level <= 3"></el-button-->
+              </span>
+            </el-tree>
          </div>
-          <el-tree :data="project_list" node-key="type_id" @node-click="handle_node_click"
-            :props="defaultProps" :expand-on-click-node="false">
-            <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span>{{ node.label }}</span>
-              <!--el-button style="margin-left: auto;" type="text" icon="el-icon-circle-plus-outline"
-                @click="() => createSelect(node, data)" v-if="node.level <= 3"></el-button>
-              <el-button type="text" icon="el-icon-remove-outline" @click="() => remove(node, data)"
-                v-if="node.level <= 3"></el-button-->
-            </span>
-          </el-tree>
        </el-card>
-			</el-col>
-			<el-col :span="18" >
+      </div>

-        <div v-if="currentNodeLevel==1">
-          <ProjectBasicInfo :project_id="project_id"  :edit_support="false"  v-if="update_view==false"/>
-          <ProjectDevInfo   :project_id="project_id"   v-if="update_view==false "/>
-          <ProjectImplInfo  :project_id="project_id"   v-if="update_view==false "/>
-          <ProjectAsInfo    :project_id="project_id"   v-if="update_view==false "/>
-          <ProjectMaintInfo :project_id="project_id"   v-if="update_view==false && project_type>2"/>
+      <!-- 拖动分隔条 -->
+      <div class="resize-handle" @mousedown="startResize"/>
+
+      <div :style="{ width: rightWidth + '%' }" class="content-col">
+        <div v-if="currentNodeLevel==1" class="content-wrapper">
+          <ProjectBasicInfo v-if="update_view==false" :project_id="project_id" :edit_support="false"/>
+          <ProjectDevInfo v-if="update_view==false " :project_id="project_id"/>
+          <ProjectImplInfo v-if="update_view==false " :project_id="project_id"/>
+          <ProjectAsInfo v-if="update_view==false " :project_id="project_id"/>
+          <ProjectMaintInfo v-if="update_view==false && project_type>2" :project_id="project_id"/>
        </div>
-
-			</el-col>
-		</el-row>
-
-
-
+      </div>
+    </div>

    <!-- 显示文件对话框 -->
-    <el-dialog title="文件信息" :visible.sync="dialogVisibleShowFile" width="80%">
-    	<img v-if="isImage" :src="previewUrl" alt="Preview" style="max-width: 40%; max-height: 30%;">
-    	<iframe v-else-if="isPDF" :src="previewUrl" frameborder="0" style="width: 100%; height: 600px;"></iframe>
-    	<p v-else>不支持的文件类型</p>
+    <el-dialog :visible.sync="dialogVisibleShowFile" title="文件信息" width="80%">
+      <img v-if="isImage" :src="previewUrl" alt="Preview" style="max-width: 40%; max-height: 30%;">
+      <iframe v-else-if="isPDF" :src="previewUrl" frameborder="0" style="width: 100%; height: 600px;"/>
+      <p v-else>不支持的文件类型</p>
    </el-dialog>

-	</div>
+  </div>
 </template>

 <script>
-import project            from '@/api/project'
-import hr                 from '@/api/hr'
-import IssueList          from '@/views/components/Issuelist.vue';
-import ProjectBasicInfo   from '@/views/components/ProjectBasicInfo.vue';
-import ProjectImplInfo    from '@/views/components/ProjectImplInfo.vue';
-import ProjectAsInfo    from '@/views/components/ProjectAsInfo.vue';
-import ProjectDevInfo    from '@/views/components/ProjectDevInfo.vue';
-import ProjectMaintInfo   from '@/views/components/ProjectMaintInfo.vue';
+import project from '@/api/project'
+import hr from '@/api/hr'
+import IssueList from '@/views/components/Issuelist.vue'
+import ProjectBasicInfo from '@/views/components/ProjectBasicInfo.vue'
+import ProjectImplInfo from '@/views/components/ProjectImplInfo.vue'
+import ProjectAsInfo from '@/views/components/ProjectAsInfo.vue'
+import ProjectDevInfo from '@/views/components/ProjectDevInfo.vue'
+import ProjectMaintInfo from '@/views/components/ProjectMaintInfo.vue'

 export default {
  components: {
@@ -63,106 +87,115 @@ export default {
    ProjectMaintInfo
  },
  props: ['project_type'],
-	data() {
-		let id = 1;
+  data() {
+    const id = 1

-		return {
-      PageTitle:'未启动的项目',
-      update_view:false,
+    return {
+      PageTitle: '未启动的项目',
+      update_view: false,
      upload_url: process.env.BASE_WMS_API + '/upload/uploadFile',
-			project_list: [],
-      activeNames:'base-info',
-			defaultProps: {
-				children: 'sub_type',
-				label: 'project_name'
-			},
-			id: id,
-      project_id:0,
-      project_info:{},
-      dialogVisibleAddMember:false,
-      dialogVisibleShowFile:false,
+      project_list: [],
+      filteredProjectList: [],
+      searchText: '',
+      activeNames: 'base-info',
+      defaultProps: {
+        children: 'sub_type',
+        label: 'project_name'
+      },
+      id: id,
+      project_id: 0,
+      project_info: {},
+      dialogVisibleAddMember: false,
+      dialogVisibleShowFile: false,

-      dialogVisibleSetManager:false,
-			editProject: {
-				project_members:[],
-        project_manager:''
-			},
+      dialogVisibleSetManager: false,
+      editProject: {
+        project_members: [],
+        project_manager: ''
+      },

+      currentNode: null,
+      currentData: null,
+      currentNodeLevel: 0,
+      products: [],
+      project_id: 0,
+      del_id: 0,
+      fileList: [],
+      project_img: '',
+      project_pdf_img: '',

-			currentNode: null,
-			currentData: null,
-			currentNodeLevel: 0,
-			products: [],
-      project_id:0,
-			del_id: 0,
-			fileList: [],
-			project_img: '',
-			project_pdf_img: ''
-		};
-	},
-	mounted() {
-		this.get_project_list()
-    if(1==this.project_type)
-    {
-      this.PageTitle='未启动的项目'
+      // 拖动调整宽度相关
+      leftWidth: 25,
+      rightWidth: 73,
+      isResizing: false,
+      startX: 0
    }
-    else if(2==this.project_type)
-    {
-      this.PageTitle='执行中的项目'
+  },
+  mounted() {
+    this.get_project_list()
+    if (this.project_type == 1) {
+      this.PageTitle = '未启动的项目'
+    } else if (this.project_type == 2) {
+      this.PageTitle = '执行中的项目'
+    } else if (this.project_type == 3) {
+      this.PageTitle = '质保中的项目'
+    } else if (this.project_type == 4) {
+      this.PageTitle = '已关闭的项目'
    }
-    else if(3==this.project_type)
-    {
-      this.PageTitle='质保中的项目'
-    }
-    else if(4==this.project_type)
-    {
-      this.PageTitle='已关闭的项目'
-    }
-	},
-	created() {

-	},
-	methods: {
+    // 添加全局鼠标事件监听
+    document.addEventListener('mousemove', this.handleResize)
+    document.addEventListener('mouseup', this.stopResize)
+  },
+  created() {
+
+  },
+  beforeDestroy() {
+    // 移除事件监听
+    document.removeEventListener('mousemove', this.handleResize)
+    document.removeEventListener('mouseup', this.stopResize)
+  },
+  methods: {

    get_project_info() {
-      var param = {project_id:this.del_id};
+      var param = { project_id: this.del_id }
    	project.GetProjectInfo(param).then(response => {
    		this.project_info = response.data.data
    	})
    },

-		get_project_list() {
-      var param = { state: this.project_type}
-			project.GetProjectList(param).then(response => {
-				this.project_list = response.data.data
-				console.log(this.project_list);
-			})
-		},
-
-    update_sub_component()
-    {
-      this.update_view = true;
-      let that = this;
-      setTimeout(() => {
-          that.update_view = false;
-      }, 100); // 1000 毫秒后执行
+    get_project_list() {
+      var param = { state: this.project_type }
+      project.GetProjectList(param).then(response => {
+        this.project_list = response.data.data
+        this.filteredProjectList = response.data.data
+        console.log(this.project_list)
+      })
    },

-		handle_node_click(data, node) {
-			this.currentNode = node;
-			this.currentData = data;
-			this.del_id = 0
+    update_sub_component() {
+      this.update_view = true
+      const that = this
+      setTimeout(() => {
+        that.update_view = false
+      }, 100) // 1000 毫秒后执行
+    },
+
+    handle_node_click(data, node) {
+      this.currentNode = node
+      this.currentData = data
+      this.del_id = 0
      this.del_id = data.project_id
      this.project_id = data.project_id
-			// 记录当前节点的层级
-			this.currentNodeLevel = node.level;
-      this.update_sub_component();
+      // 记录当前节点的层级
+      this.currentNodeLevel = node.level
+      this.update_sub_component()
      this.get_project_info()
-		},
+    },

    showImg(tech_protocol_url) {
    	const url = process.env.BASE_WMS_FILE + tech_protocol_url
-    	const ext = url.split('.').pop().toLowerCase();
+    	const ext = url.split('.').pop().toLowerCase()

    	if (ext === 'jpg' || ext === 'jpeg' || ext === 'png') {
    		this.previewUrl = url
@@ -175,22 +208,206 @@ export default {
    	} else if (ext === '') {

    	} else {
-    		this.$message.success('不支持的文件类型');
+    		this.$message.success('不支持的文件类型')
    	}
    	this.dialogVisibleShowFile = true
    },

+    // 拖动调整宽度相关方法
+    startResize(e) {
+      this.isResizing = true
+      this.startX = e.clientX
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      e.preventDefault()
+    },

+    handleResize(e) {
+      if (!this.isResizing) return

+      const container = document.querySelector('.project-container')
+      if (!container) return

-	}
+      const containerWidth = container.offsetWidth
+      const deltaX = e.clientX - this.startX
+      const deltaPercent = (deltaX / containerWidth) * 100
+
+      let newLeftWidth = this.leftWidth + deltaPercent
+
+      // 限制最小和最大宽度
+      if (newLeftWidth < 15) newLeftWidth = 15
+      if (newLeftWidth > 50) newLeftWidth = 50
+
+      this.leftWidth = newLeftWidth
+      this.rightWidth = 98 - newLeftWidth // 98% 留2%给分隔条
+      this.startX = e.clientX
+    },
+
+    stopResize() {
+      if (this.isResizing) {
+        this.isResizing = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+    },
+
+    // 搜索过滤方法
+    handleSearch(value) {
+      if (!value) {
+        this.filteredProjectList = this.project_list
+        return
+      }
+
+      const searchLower = value.toLowerCase()
+      this.filteredProjectList = this.filterTree(this.project_list, searchLower)
+    },
+
+    filterTree(tree, searchText) {
+      if (!tree || tree.length === 0) return []
+
+      return tree.filter(node => {
+        // 检查当前节点是否匹配
+        const projectName = (node.project_name || '').toLowerCase()
+        const projectNumber = (node.project_number || '').toLowerCase()
+        const matches = projectName.includes(searchText) || projectNumber.includes(searchText)
+
+        // 递归过滤子节点
+        if (node.sub_type && node.sub_type.length > 0) {
+          node.sub_type = this.filterTree(node.sub_type, searchText)
+        }
+
+        // 如果当前节点匹配或有匹配的子节点，则保留
+        return matches || (node.sub_type && node.sub_type.length > 0)
+      }).map(node => ({ ...node })) // 创建副本避免修改原数据
+    },
+
+    filterNode(value, data) {
+      if (!value) return true
+      const projectName = (data.project_name || '').toLowerCase()
+      const projectNumber = (data.project_number || '').toLowerCase()
+      return projectName.includes(value.toLowerCase()) || projectNumber.includes(value.toLowerCase())
+    }
+
+  }
 }
 </script>

 <style scoped>
 .about {
 	padding: 20px;
+  height: calc(100vh - 84px);
+  overflow: hidden;
+}
+
+.project-container {
  height: 100%;
+  display: flex;
+  gap: 0;
+}
+
+.tree-col {
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.content-col {
+  height: 100%;
+  flex-shrink: 0;
+  padding-left: 20px;
+}
+
+.tree-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 拖动分隔条 */
+.resize-handle {
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background 0.2s;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.resize-handle:hover {
+  background: rgba(64, 158, 255, 0.2);
+}
+
+.resize-handle::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 40px;
+  background: #dcdfe6;
+  border-radius: 1px;
+}
+
+.resize-handle:hover::before {
+  background: #409eff;
+}
+
+.tree-col,
+.content-col {
+  height: 100%;
+}
+
+.tree-card >>> .el-card__body {
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-wrapper {
+  padding: 15px 20px 10px 20px;
+  border-bottom: 1px solid #ebeef5;
+  flex-shrink: 0;
+}
+
+.tree-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 20px;
+}
+
+.content-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
+}
+
+/* 自定义滚动条样式 */
+.tree-wrapper::-webkit-scrollbar,
+.content-wrapper::-webkit-scrollbar {
+  width: 8px;
+}
+
+.tree-wrapper::-webkit-scrollbar-track,
+.content-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.tree-wrapper::-webkit-scrollbar-thumb,
+.content-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.tree-wrapper::-webkit-scrollbar-thumb:hover,
+.content-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }

 .product-list {
@@ -222,6 +439,42 @@ export default {
 	justify-content: space-between;
 	font-size: 14px;
 	padding-right: 8px;
+	min-height: 50px;
+	overflow: hidden;
+}
+
+.node-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.node-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  line-height: 1.5;
+}
+
+.node-number {
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  line-height: 1.3;
+  margin-top: 2px;
+}
+
+/* 增加树节点的高度 */
+.about >>> .el-tree-node__content {
+	height: 40px;
+	/* min-height: 50px; */
+	padding: 8px 0;
 }

 .upload-demo {