diff --git a/klp-ui/src/App.vue b/klp-ui/src/App.vue index e392887a..14c01ab8 100644 --- a/klp-ui/src/App.vue +++ b/klp-ui/src/App.vue @@ -15,8 +15,8 @@ export default { // 应用启动时全局初始化分类数据 if (this.$store.getters.token) { // this.$store.dispatch('category/getCategoryList'); - this.$store.dispatch('category/getProductMap'); - this.$store.dispatch('category/getRawMaterialMap'); + // this.$store.dispatch('category/getProductMap'); + // this.$store.dispatch('category/getRawMaterialMap'); // this.$store.dispatch('category/getBomMap'); // this.$store.dispatch('finance/getFinancialAccounts'); // this.$store.dispatch('craft/getProcessList'); diff --git a/klp-ui/src/components/KLPService/ProductSelect/index.vue b/klp-ui/src/components/KLPService/ProductSelect/index.vue index 18e48dc1..6c16cb63 100644 --- a/klp-ui/src/components/KLPService/ProductSelect/index.vue +++ b/klp-ui/src/components/KLPService/ProductSelect/index.vue @@ -20,7 +20,7 @@ :close-on-click-modal="false" @close="handleClose" > - + - - - - - - - - - - - - - + +
+
+ + + + +
+
+ {{ item.productName }} + [{{ item.productCode }}] +
+
+
负责人：{{ item.owner || '-' }}
+
规格：{{ item.specification || '-' }}
+
材质：{{ item.material || '-' }}
+
+ + + + 选择 + +
+
+ + +
+ 暂无匹配的产品数据 +
+
- + ({}) @@ -166,24 +179,21 @@ export default { surfaceTreatmentDesc: undefined, zincLayer: undefined }, - // 内部选中的ID数组 selectedIds: [], - // 内部选中的行数据 selectedRows: [] }; }, computed: { - // 按钮显示文本 buttonText() { if (this.multiple) { return this.selectedIds.length > 0 ? `已选 ${this.selectedIds.length} 项` : '选择产品'; } else { + console.log(this.selectedRows); return this.selectedRows[0]?.productName || '选择产品'; } }, - // 只读状态显示文本 displayText() { if (this.multiple) { return this.selectedIds.length > 0 @@ -195,28 +205,45 @@ export default { } }, watch: { - // 监听外部值变化，同步到内部选中状态 value: { immediate: true, handler(val) { this.selectedIds = val ? val.split(',').filter(id => id) : []; - // 当列表已加载时，同步选中状态 - if (this.productList.length > 0) { - this.syncTableSelection(); - } + // this.syncSelectedRows(); + this.$forceUpdate(); // 新增：强制刷新视图 } }, - // 监听对话框显示状态，加载数据 dialogVisible(val) { if (val) { - this.getList().then(() => { - this.syncTableSelection(); - }); + this.getList(); } } }, methods: { - // 获取产品列表 + // 判断卡片是否选中 + isSelected(productId) { + return this.selectedIds.includes(productId); + }, + + // 同步选中行数据 + // syncSelectedRows() { + // if (this.productList.length === 0) return; + // // this.selectedRows = this.productList.filter(item => + // // this.selectedIds.includes(item.productId) + // // ); + // }, + + // 卡片选择事件（多选） + handleCardSelection(checked, item) { + if (checked) { + !this.selectedIds.includes(item.productId) && this.selectedIds.push(item.productId); + } else { + this.selectedIds = this.selectedIds.filter(id => id !== item.productId); + } + // this.syncSelectedRows(); + }, + + // 原有方法保持不变（仅修改同步选中状态逻辑） async getList() { try { this.loading = true; @@ -225,6 +252,7 @@ export default { if (response.code === 200) { this.productList = response.rows || []; this.total = response.total || 0; + // this.syncSelectedRows(); // 加载数据后同步选中状态 } return this.productList; } catch (error) { @@ -235,15 +263,11 @@ export default { } }, - // 搜索 handleQuery() { this.queryParams.pageNum = 1; - this.getList().then(() => { - this.syncTableSelection(); - }); + this.getList(); }, - // 重置 resetQuery() { this.queryParams = { pageNum: 1, @@ -257,12 +281,9 @@ export default { surfaceTreatmentDesc: undefined, zincLayer: undefined }; - this.getList().then(() => { - this.syncTableSelection(); - }); + this.getList(); }, - // 行点击事件 handleRowClick(row) { if (!this.multiple) { this.selectedIds = [row.productId]; @@ -271,61 +292,30 @@ export default { } }, - // 选择项变化（多选） - handleSelectionChange(rows) { - this.selectedRows = rows; - this.selectedIds = rows.map(row => row.productId); - }, - - // 单个选择按钮 handleSelect(row) { if (this.multiple) { - // 多选模式下切换选中状态 const index = this.selectedIds.indexOf(row.productId); - if (index > -1) { - this.selectedIds.splice(index, 1); - this.selectedRows.splice(index, 1); - } else { - this.selectedIds.push(row.productId); - this.selectedRows.push(row); - } - this.syncTableSelection(); + index > -1 + ? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1)) + : (this.selectedIds.push(row.productId), this.selectedRows.push(row)); } else { - // 单选模式直接确认 this.selectedIds = [row.productId]; this.selectedRows = [row]; this.confirmSelection(); } }, - // 同步表格选中状态 - syncTableSelection() { - this.$nextTick(() => { - if (this.multiple && this.$refs.table) { - this.productList.forEach(row => { - const isSelected = this.selectedIds.includes(row.productId); - if (isSelected) { - this.$refs.table.toggleRowSelection(row, true); - } else { - this.$refs.table.toggleRowSelection(row, false); - } - }); - } - }); - }, - - // 确认选择 confirmSelection() { const emitValue = this.selectedIds.join(','); this.$emit('input', emitValue); this.$emit('change', emitValue, this.selectedRows); this.dialogVisible = false; + this.$forceUpdate(); // 新增：强制刷新视图 }, - // 关闭对话框 handleClose() { - // 关闭时重新同步选中状态（避免临时选择影响） this.selectedIds = this.value ? this.value.split(',').filter(id => id) : []; + // this.syncSelectedRows(); this.dialogVisible = false; } } @@ -358,4 +348,105 @@ export default { margin-bottom: 15px; margin-right: 15px; } + +/* 卡片容器样式 */ +.card-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 20px; + margin-bottom: 20px; + min-height: 400px; + padding: 10px; +} + +/* 卡片样式 */ +.product-card { + border: 1px solid #e6e6e6; + border-radius: 8px; + padding: 16px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + background: #fff; + + &:hover { + border-color: #409eff; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08); + } +} + +/* 选中卡片样式 */ +.selected-card { + border-color: #409eff; + background-color: #f0f7ff; +} + +/* 多选勾选框位置 */ +.card-checkbox { + position: absolute; + top: 16px; + right: 16px; +} + +/* 卡片内容样式 */ +.card-content { + margin-right: 24px; /* 给多选框留空间 */ +} + +.card-title { + display: flex; + align-items: center; + margin-bottom: 16px; + font-weight: 500; +} + +.name { + font-size: 16px; + color: #1989fa; + margin-right: 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.code { + font-size: 14px; + color: #909399; +} + +.card-info { + display: flex; + flex-direction: column; + gap: 10px; + font-size: 14px; + color: #606266; +} + +.info-item span { + color: #303133; + margin-left: 4px; +} + +/* 选择按钮样式 */ +.select-btn { + position: absolute; + bottom: 16px; + right: 16px; + color: #409eff; + + &:hover { + color: #66b1ff; + } +} + +/* 空数据提示 */ +.empty-tip { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: center; + height: 400px; + color: #909399; + font-size: 16px; +} \ No newline at end of file diff --git a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue index 3a023771..c1ef09a5 100644 --- a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue +++ b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue @@ -20,7 +20,7 @@ @close="handleClose" append-to-body > - + - - - - - - - - - - - - - - - + +
+
+ + + + +
+
+ {{ item.rawMaterialName }} + [{{ item.rawMaterialCode }}] +
+
+
规格：{{ item.specification || '-' }}
+
单位：{{ item.unit || '-' }}
+
材质：{{ item.material || '-' }}
+
厂家：{{ item.manufacturer || '-' }}
+
表面处理：{{ item.surfaceTreatmentDesc || '-' }}
+
锌层：{{ item.zincLayer || '-' }}
+
+ + + + 选择 + +
+
+ + +
+ 暂无匹配的原材料数据 +
+
- +