From bba176ebeca2a80a24eb110821c33be17b5f01c0 Mon Sep 17 00:00:00 2001
From: zxy <zhouxy1921@11.com>
Date: Mon, 18 May 2026 15:37:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(biz):=20=E6=B7=BB=E5=8A=A0=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biz/material/MaterialSelectDialog.vue     | 285 ++++++++++++++++++
 1 file changed, 285 insertions(+)
 create mode 100644 mes-ui/mes-ui-admin-vue3/src/views/biz/material/MaterialSelectDialog.vue

diff --git a/mes-ui/mes-ui-admin-vue3/src/views/biz/material/MaterialSelectDialog.vue b/mes-ui/mes-ui-admin-vue3/src/views/biz/material/MaterialSelectDialog.vue
new file mode 100644
index 0000000..9623ced
--- /dev/null
+++ b/mes-ui/mes-ui-admin-vue3/src/views/biz/material/MaterialSelectDialog.vue
@@ -0,0 +1,285 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1400px">
+    <div class="dialog-content">
+      <div class="table-container">
+        <!-- 表1：物料搜索列表 -->
+        <div class="table-section">
+        
+          
+          <!-- 搜索区域 -->
+          <el-form :model="queryParams" inline label-width="80px" class="search-form">
+            <el-form-item label="检索条件">
+              <el-input 
+                v-model="queryParams.searchText" 
+                placeholder="物料编码、物料名称支持模糊查询" 
+                clearable 
+                class="!w-240px" 
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="searchMaterial">
+                <Icon icon="ep:search" class="mr-5px" />搜索
+              </el-button>
+              <el-button @click="resetQuery">
+                <Icon icon="ep:refresh-right" class="mr-5px" />重置
+              </el-button>
+            </el-form-item>
+          </el-form>
+
+          <!-- 表格区域 -->
+          <el-table
+            ref="tableRef"
+            v-loading="loading"
+            :data="materialList"
+            :show-overflow-tooltip="true"
+            border
+            class="material-table"
+            @row-click="handleRowClick"
+          >
+            <el-table-column type="selection" width="50px" align="center" />
+            <el-table-column label="序号" width="60px" align="center" type="index" />
+            <el-table-column label="物料编码" align="center" prop="matCode" width="120px" />
+            <el-table-column label="物料名称" align="center" prop="matName" width="150px" />
+            <el-table-column label="规格型号" align="center" prop="spec" width="120px" />
+            <el-table-column label="单位" align="center" prop="unit" width="80px" />
+          </el-table>
+
+          <!-- 分页 -->
+          <Pagination
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="searchMaterial"
+            class="mt-15px"
+          />
+        </div>
+
+        <!-- 表2：已选中物料列表 -->
+        <div class="table-section">
+          <div class="section-header">
+            <div class="action-buttons">
+              <el-button size="small" @click="clearSelected">清空</el-button>
+              <el-button size="small" type="danger" @click="removeSelected">删除行</el-button>
+            </div>
+          </div>
+
+          <!-- 表格区域 -->
+          <el-table
+            ref="selectedTableRef"
+            :data="selectedList"
+            :show-overflow-tooltip="true"
+            border
+            class="material-table"
+            @row-click="handleSelectedRowClick"
+          >
+            <el-table-column type="selection" width="50px" align="center" />
+            <el-table-column label="序号" width="60px" align="center" type="index" />
+            <el-table-column label="物料编码" align="center" prop="matCode" width="120px" />
+            <el-table-column label="物料名称" align="center" prop="matName" width="150px" />
+            <el-table-column label="规格型号" align="center" prop="spec" width="120px" />
+            <el-table-column label="单位" align="center" prop="unit" width="80px" />
+          </el-table>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="confirmSelection" type="primary">保存</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import * as MaterialApi from '@/api/biz/material'
+import { Icon } from '@/components/Icon'
+
+const message = useMessage()
+const dialogVisible = ref(false)
+const dialogTitle = ref('选择物料')
+const loading = ref(false)
+const total = ref(0)
+const materialList = ref([])
+const selectedList = ref<any[]>([])
+const tableRef = ref()
+const selectedTableRef = ref()
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  searchText: undefined,
+  matType: '1'
+})
+
+const emit = defineEmits(['confirm'])
+
+// 搜索物料
+const searchMaterial = async () => {
+  loading.value = true
+  try {
+    const params: any = {
+      pageNo: queryParams.pageNo,
+      pageSize: queryParams.pageSize,
+      matType: queryParams.matType
+    }
+    if (queryParams.searchText) {
+      params.keyWord = queryParams.searchText
+    }
+    const data = await MaterialApi.getMaterialPage(params)
+    materialList.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重置搜索
+const resetQuery = () => {
+  queryParams.searchText = undefined
+  queryParams.pageNo = 1
+  searchMaterial()
+}
+
+// 点击物料行
+const handleRowClick = (row: any) => {
+  if (tableRef.value) {
+    tableRef.value.toggleRowSelection(row)
+    const selectedItems = tableRef.value.getSelectionRows()
+    
+    // 找出新增的物料
+    selectedItems.forEach(item => {
+      if (!selectedList.value.some(s => s.id === item.id)) {
+        selectedList.value.push({
+          id: item.id,
+          matCode: item.matCode,
+          matName: item.matName,
+          spec: item.spec,
+          unit: item.unit,
+          materialId: item.id,
+          materialCode: item.matCode,
+          materialName: item.matName
+        })
+      }
+    })
+    
+    // 找出取消选中的物料并移除
+    const selectedIds = selectedItems.map(i => i.id)
+    selectedList.value = selectedList.value.filter(item => selectedIds.includes(item.id))
+  }
+}
+
+// 点击已选中行
+const handleSelectedRowClick = (row: any) => {
+  if (selectedTableRef.value) {
+    selectedTableRef.value.toggleRowSelection(row)
+  }
+}
+
+// 清空已选中列表
+const clearSelected = () => {
+  selectedList.value = []
+  // 同时取消表1中的选中状态
+  nextTick(() => {
+    if (tableRef.value) {
+      tableRef.value.clearSelection()
+    }
+  })
+}
+
+// 删除选中行
+const removeSelected = () => {
+  if (!selectedTableRef.value) return
+  
+  const selectedItems = selectedTableRef.value.getSelectionRows()
+  if (selectedItems.length === 0) {
+    message.warning('请选择要删除的行')
+    return
+  }
+  
+  const selectedIds = selectedItems.map(item => item.id)
+  selectedList.value = selectedList.value.filter(item => !selectedIds.includes(item.id))
+  
+  // 同时取消表1中对应物料的选中状态
+  nextTick(() => {
+    if (tableRef.value) {
+      materialList.value.forEach(item => {
+        if (selectedIds.includes(item.id)) {
+          tableRef.value.toggleRowSelection(item, false)
+        }
+      })
+    }
+  })
+}
+
+// 确认选择
+const confirmSelection = () => {
+  if (selectedList.value.length === 0) {
+    message.warning('请选择物料')
+    return
+  }
+  emit('confirm', selectedList.value)
+  dialogVisible.value = false
+}
+
+// 打开弹窗
+const open = () => {
+  dialogVisible.value = true
+  selectedList.value = []
+  searchMaterial()
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.dialog-content {
+  padding: 15px;
+}
+
+.table-container {
+  display: flex;
+  gap: 20px;
+  height: 500px;
+}
+
+.table-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 15px;
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.search-form {
+  padding: 15px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.material-table {
+  flex: 1;
+  min-height: 0;
+}
+
+:deep(.el-table__header-wrapper) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+</style>