|
|
|
@ -64,12 +64,6 @@ |
|
|
|
width="80" |
|
|
|
width="80" |
|
|
|
align="center" |
|
|
|
align="center" |
|
|
|
></el-table-column> |
|
|
|
></el-table-column> |
|
|
|
<!-- <el-table-column |
|
|
|
|
|
|
|
prop="standardPrice" |
|
|
|
|
|
|
|
label="公司指导价" |
|
|
|
|
|
|
|
width="150" |
|
|
|
|
|
|
|
align="center" |
|
|
|
|
|
|
|
></el-table-column> --> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
<el-table-column |
|
|
|
prop="remarkCn" |
|
|
|
prop="remarkCn" |
|
|
|
label="备注" |
|
|
|
label="备注" |
|
|
|
@ -94,7 +88,6 @@ |
|
|
|
size="medium" |
|
|
|
size="medium" |
|
|
|
@click="transferToLeft" |
|
|
|
@click="transferToLeft" |
|
|
|
:disabled="rightSelectedRows.length === 0" |
|
|
|
:disabled="rightSelectedRows.length === 0" |
|
|
|
|
|
|
|
|
|
|
|
></el-button> |
|
|
|
></el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
@ -142,12 +135,6 @@ |
|
|
|
width="80" |
|
|
|
width="80" |
|
|
|
align="center" |
|
|
|
align="center" |
|
|
|
></el-table-column> |
|
|
|
></el-table-column> |
|
|
|
<!-- <el-table-column |
|
|
|
|
|
|
|
prop="standardPrice" |
|
|
|
|
|
|
|
label="公司指导价" |
|
|
|
|
|
|
|
width="150" |
|
|
|
|
|
|
|
align="center" |
|
|
|
|
|
|
|
></el-table-column> --> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
<el-table-column |
|
|
|
fixed="right" |
|
|
|
fixed="right" |
|
|
|
prop="remarkCn" |
|
|
|
prop="remarkCn" |
|
|
|
@ -163,8 +150,8 @@ |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import basicCrumb from "@/components/basic-crumb/main"; |
|
|
|
import basicCrumb from "@/components/basic-crumb/main"; |
|
|
|
import { getProduct } from "@/api/product/product"; |
|
|
|
import { getProduct } from "@/api/product/product"; |
|
|
|
// import { saveSelectedProduct } from "@/api/product/AddtoTemplate"; |
|
|
|
import { mapGetters, mapActions } from "vuex"; |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "ProductSelect", |
|
|
|
name: "ProductSelect", |
|
|
|
components: { |
|
|
|
components: { |
|
|
|
@ -172,133 +159,142 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
leftTableData: [], // 左侧待选产品（后端接口返回） |
|
|
|
// 仅保留临时交互状态（无需持久化） |
|
|
|
rightTableData: [], // 右侧已选产品 |
|
|
|
currentLeftRow: null, // 当前选中的左侧行 |
|
|
|
currentLeftRow: null, // 当前选中的左侧行 |
|
|
|
currentRightRow: null, // 当前选中的右侧行 |
|
|
|
loading: false, // 加载状态 |
|
|
|
loading: false, // 加载状态 |
|
|
|
productId: "", // 存储页面跳转带过来的id |
|
|
|
leftSelectedRows: [], // 左侧勾选的行（临时） |
|
|
|
leftSelectedRows: [], // 左侧勾选的行（多选） |
|
|
|
rightSelectedRows: [], // 右侧勾选的行（临时） |
|
|
|
rightSelectedRows: [], // 右侧勾选的行（多选） |
|
|
|
|
|
|
|
subcategoryId: "", //小类id |
|
|
|
|
|
|
|
currentRightRow: null, |
|
|
|
|
|
|
|
customerId:'' |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
computed: { |
|
|
|
// 1. 获取跳转带回的新小类id |
|
|
|
...mapGetters(["routeData"]), |
|
|
|
const newSubcategoryId = this.$route.query.subcategoryId || ""; |
|
|
|
// 从Vuex获取核心数据 |
|
|
|
// console.log("新小类ID：", newSubcategoryId, "旧小类ID：", this.subcategoryId); |
|
|
|
...mapGetters("order", [ |
|
|
|
// 2. 仅当新ID存在且与旧ID不同时，才请求数据并追加 |
|
|
|
"getProductSelectState", // 产品选择状态 |
|
|
|
// if (newSubcategoryId && newSubcategoryId !== this.subcategoryId) { |
|
|
|
"getProductSelectCustomerId", // 客户ID |
|
|
|
// this.subcategoryId = newSubcategoryId; // 更新旧ID为新ID |
|
|
|
"getSelectedSubcategoryIds", // 已选小类ID列表 |
|
|
|
// this.fetchProductList(); // 请求新小类数据并追加 |
|
|
|
"getTempOrderInfo", |
|
|
|
// } |
|
|
|
"getOrderProductEdit", |
|
|
|
this.subcategoryId = newSubcategoryId; // 更新旧ID为新ID |
|
|
|
"getOrderMode", |
|
|
|
this.fetchProductList(); // 请求新小类数据并追加 |
|
|
|
"getOrderId", |
|
|
|
if (!newSubcategoryId || this.$route.query.isClear==true) { |
|
|
|
]), |
|
|
|
this.resetComponentState(); |
|
|
|
// 快捷获取各核心数据 |
|
|
|
} |
|
|
|
customerId() { |
|
|
|
}, |
|
|
|
return this.getTempOrderInfo.customerId ; |
|
|
|
computed: { |
|
|
|
}, |
|
|
|
...mapGetters(["routeData"]) |
|
|
|
// 当前路由传过来的新小类ID |
|
|
|
|
|
|
|
newSubcategoryId() { |
|
|
|
|
|
|
|
return this.$route.query.subcategoryId || ""; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
leftTableData() { |
|
|
|
// this.customerId = this.$route.query.customerId ? this.$route.query.customerId:'' |
|
|
|
return this.getProductSelectState.leftTableData || []; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
rightTableData() { |
|
|
|
|
|
|
|
return this.getProductSelectState.rightTableData || []; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
|
|
|
|
// 初始化页面 |
|
|
|
|
|
|
|
this.initPage(); |
|
|
|
|
|
|
|
// 监听路由参数变化（核心：识别新小类ID并追加数据） |
|
|
|
|
|
|
|
this.$watch( |
|
|
|
|
|
|
|
() => this.$route.query.subcategoryId, |
|
|
|
|
|
|
|
(newId) => { |
|
|
|
|
|
|
|
if (newId) { |
|
|
|
|
|
|
|
this.appendNewSubcategoryData(newId); // 追加新小类数据 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ immediate: true } // 首次加载也触发 |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
// async fetchProductList() { |
|
|
|
...mapActions("order", [ |
|
|
|
// // 校验id是否存在 |
|
|
|
"updateProductSelectState", // 更新产品选择状态 |
|
|
|
// if (!this.subcategoryId) { |
|
|
|
"clearProductSelectState", // 清空产品选择状态 |
|
|
|
// this.$message.warning("缺少模板ID，无法获取产品列表"); |
|
|
|
"addSelectedSubcategoryId" // 添加已选小类ID |
|
|
|
// return; |
|
|
|
]), |
|
|
|
// } |
|
|
|
// 初始化页面（仅初始化基础参数，不重置数据） |
|
|
|
// try { |
|
|
|
initPage() { |
|
|
|
// this.loading = true; |
|
|
|
// 1. 初始化客户ID到Vuex（仅首次） |
|
|
|
// // 调用接口：传递页面跳转过来的id |
|
|
|
if (!this.customerId && this.$route.query.customerId) { |
|
|
|
// const res = await getProduct({ |
|
|
|
this.updateProductSelectState({ |
|
|
|
// catalogId: this.subcategoryId, |
|
|
|
customerId: this.$route.query.customerId |
|
|
|
// size: 9999, |
|
|
|
}); |
|
|
|
// current: 1, |
|
|
|
} |
|
|
|
// }); |
|
|
|
}, |
|
|
|
// const data = res.data.data.records || []; |
|
|
|
// 核心：追加新小类的产品数据到左侧表格 |
|
|
|
// console.log("data", data); |
|
|
|
async appendNewSubcategoryData(newSubcategoryId) { |
|
|
|
// // 给后端返回的数据添加序号（index） |
|
|
|
// 跳过：小类ID为空 或 已加载过该小类 |
|
|
|
// this.leftTableData = data.map((item, idx) => ({ |
|
|
|
if (!newSubcategoryId || this.getSelectedSubcategoryIds.includes(newSubcategoryId)) { |
|
|
|
// ...item, |
|
|
|
|
|
|
|
// index: idx + 1, // 序号从1开始 |
|
|
|
|
|
|
|
// })); |
|
|
|
|
|
|
|
// } catch (error) { |
|
|
|
|
|
|
|
// console.error("请求产品列表失败：", error); |
|
|
|
|
|
|
|
// this.$message.error("网络异常，获取产品列表失败"); |
|
|
|
|
|
|
|
// } finally { |
|
|
|
|
|
|
|
// this.loading = false; |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
async fetchProductList() { |
|
|
|
|
|
|
|
if (!this.subcategoryId) { |
|
|
|
|
|
|
|
this.$message.warning("缺少小类ID，无法获取产品列表"); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
this.loading = true; |
|
|
|
this.loading = true; |
|
|
|
|
|
|
|
// 1. 请求新小类的产品数据 |
|
|
|
const res = await getProduct({ |
|
|
|
const res = await getProduct({ |
|
|
|
catalogId: this.subcategoryId, |
|
|
|
catalogId: newSubcategoryId, |
|
|
|
size: 9999, |
|
|
|
size: 9999, |
|
|
|
current: 1, |
|
|
|
current: 1, |
|
|
|
customerId:this.$route.query.customerId ? this.$route.query.customerId:'', |
|
|
|
customerId: this.customerId, |
|
|
|
}); |
|
|
|
}); |
|
|
|
const newData = res.data.data.records || []; |
|
|
|
const newProductData = res.data.data.records || []; |
|
|
|
console.log("新获取的小类产品数据：", newData); |
|
|
|
console.log("新获取的小类产品数据：", newProductData); |
|
|
|
if (newData.length === 0) { |
|
|
|
|
|
|
|
this.$message.info("该小类下暂无产品"); |
|
|
|
if (newProductData.length === 0) { |
|
|
|
|
|
|
|
this.$message.info(`小类ID:${newSubcategoryId} 下暂无产品`); |
|
|
|
|
|
|
|
// 标记该小类已加载（避免重复请求） |
|
|
|
|
|
|
|
this.addSelectedSubcategoryId(newSubcategoryId); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 1. 去重逻辑：过滤掉「左侧已存在」和「右侧已选」的产品（根据id） |
|
|
|
// 2. 去重：过滤掉左侧/右侧已存在的产品 |
|
|
|
const existLeftIds = this.leftTableData.map(item => item.id); // 左侧待选已有id |
|
|
|
const existLeftIds = this.leftTableData.map(item => item.id); |
|
|
|
const existRightIds = this.rightTableData.map(item => item.id); // 右侧已选id |
|
|
|
const existRightIds = this.rightTableData.map(item => item.id); |
|
|
|
const uniqueNewData = newData.filter(item => { |
|
|
|
const uniqueNewProducts = newProductData.filter(item => { |
|
|
|
// 仅保留：左侧没有 && 右侧也没有的产品 |
|
|
|
|
|
|
|
return !existLeftIds.includes(item.id) && !existRightIds.includes(item.id); |
|
|
|
return !existLeftIds.includes(item.id) && !existRightIds.includes(item.id); |
|
|
|
}); |
|
|
|
}); |
|
|
|
// 2. 追加数据到左侧待选表格不是覆盖 |
|
|
|
|
|
|
|
this.leftTableData = [...this.leftTableData, ...uniqueNewData]; |
|
|
|
// 3. 追加到左侧表格（Vuex） |
|
|
|
// 3. 追加后重置左侧序号，保证连续 |
|
|
|
const newLeftTableData = [...this.leftTableData, ...uniqueNewProducts]; |
|
|
|
|
|
|
|
await this.updateProductSelectState({ |
|
|
|
|
|
|
|
leftTableData: newLeftTableData, |
|
|
|
|
|
|
|
subcategoryId: newSubcategoryId // 更新当前小类ID |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 4. 标记该小类已加载（避免重复请求） |
|
|
|
|
|
|
|
this.addSelectedSubcategoryId(newSubcategoryId); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 5. 重置序号 |
|
|
|
this.resetIndex(); |
|
|
|
this.resetIndex(); |
|
|
|
// this.$message.success(`成功追加 ${uniqueNewData.length} 个新产品`); |
|
|
|
// this.$message.success(`成功追加 ${uniqueNewProducts.length} 个新产品`); |
|
|
|
} catch (error) { |
|
|
|
} catch (error) { |
|
|
|
console.error("请求产品列表失败：", error); |
|
|
|
console.error("追加小类产品失败：", error); |
|
|
|
this.$message.error("网络异常，获取产品列表失败"); |
|
|
|
this.$message.error("网络异常，获取新小类产品失败"); |
|
|
|
} finally { |
|
|
|
} finally { |
|
|
|
this.loading = false; |
|
|
|
this.loading = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
resetComponentState() { |
|
|
|
|
|
|
|
this.leftTableData = []; |
|
|
|
|
|
|
|
this.rightTableData = []; |
|
|
|
|
|
|
|
this.subcategoryId = ""; |
|
|
|
|
|
|
|
this.clearSelectionAndCurrentRow(); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
// 左侧表格单行点击 |
|
|
|
// 左侧表格单行点击 |
|
|
|
handleLeftRowClick(row) { |
|
|
|
handleLeftRowClick(row) { |
|
|
|
this.currentLeftRow = row; |
|
|
|
this.currentLeftRow = row; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 新增：清空表格勾选和当前行 |
|
|
|
// 清空表格勾选和当前行 |
|
|
|
clearSelectionAndCurrentRow() { |
|
|
|
clearSelectionAndCurrentRow() { |
|
|
|
if (this.$refs.leftTable) { |
|
|
|
if (this.$refs.leftTable) { |
|
|
|
this.$refs.leftTable.clearSelection(); |
|
|
|
this.$refs.leftTable.clearSelection(); |
|
|
|
this.$refs.leftTable.setCurrentRow(null); |
|
|
|
this.$refs.leftTable.setCurrentRow(null); |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.$refs.rightTable) { |
|
|
|
if (this.$refs.rightTable) { |
|
|
|
this.$refs.rightTable.clearSelection(); |
|
|
|
this.$refs.rightTable.clearSelection(); |
|
|
|
this.$refs.rightTable.setCurrentRow(null); |
|
|
|
this.$refs.rightTable.setCurrentRow(null); |
|
|
|
} |
|
|
|
} |
|
|
|
this.leftSelectedRows = []; |
|
|
|
this.leftSelectedRows = []; |
|
|
|
this.rightSelectedRows = []; |
|
|
|
this.rightSelectedRows = []; |
|
|
|
this.currentLeftRow = null; |
|
|
|
this.currentLeftRow = null; |
|
|
|
this.currentRightRow = null; |
|
|
|
this.currentRightRow = null; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 右侧表格单行点击 |
|
|
|
// 右侧表格单行点击 |
|
|
|
handleRightRowClick(row) { |
|
|
|
handleRightRowClick(row) { |
|
|
|
this.currentRightRow = row; |
|
|
|
this.currentRightRow = row; |
|
|
|
@ -307,22 +303,18 @@ export default { |
|
|
|
handleLeftSelectionChange(val) { |
|
|
|
handleLeftSelectionChange(val) { |
|
|
|
this.leftSelectedRows = val; |
|
|
|
this.leftSelectedRows = val; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 右侧表格勾选事件（多选） |
|
|
|
// 右侧表格勾选事件（多选） |
|
|
|
handleRightSelectionChange(val) { |
|
|
|
handleRightSelectionChange(val) { |
|
|
|
this.rightSelectedRows = val; |
|
|
|
this.rightSelectedRows = val; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 左侧表格奇偶行样式 |
|
|
|
// 左侧表格奇偶行样式 |
|
|
|
leftTableRowClass({ rowIndex }) { |
|
|
|
leftTableRowClass({ rowIndex }) { |
|
|
|
return rowIndex % 2 === 0 ? "" : "row-gray"; |
|
|
|
return rowIndex % 2 === 0 ? "" : "row-gray"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 右侧表格奇偶行样式 |
|
|
|
// 右侧表格奇偶行样式 |
|
|
|
rightTableRowClass({ rowIndex }) { |
|
|
|
rightTableRowClass({ rowIndex }) { |
|
|
|
return rowIndex % 2 === 0 ? "" : "row-gray"; |
|
|
|
return rowIndex % 2 === 0 ? "" : "row-gray"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 迁移到右侧（待选→已选，支持多选） |
|
|
|
// 迁移到右侧（待选→已选，支持多选） |
|
|
|
transferToRight() { |
|
|
|
transferToRight() { |
|
|
|
if (this.leftSelectedRows.length === 0) { |
|
|
|
if (this.leftSelectedRows.length === 0) { |
|
|
|
@ -330,27 +322,33 @@ export default { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 遍历勾选的行，逐个迁移 |
|
|
|
// 1. 复制Vuex中的数据进行操作 |
|
|
|
|
|
|
|
let newLeftData = [...this.leftTableData]; |
|
|
|
|
|
|
|
let newRightData = [...this.rightTableData]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 2. 遍历勾选的行，逐个迁移 |
|
|
|
this.leftSelectedRows.forEach((row) => { |
|
|
|
this.leftSelectedRows.forEach((row) => { |
|
|
|
const leftIdx = this.leftTableData.findIndex( |
|
|
|
const leftIdx = newLeftData.findIndex(item => item.id === row.id); |
|
|
|
(item) => item.id === row.id |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
if (leftIdx > -1) { |
|
|
|
if (leftIdx > -1) { |
|
|
|
const [movedRow] = this.leftTableData.splice(leftIdx, 1); |
|
|
|
const [movedRow] = newLeftData.splice(leftIdx, 1); |
|
|
|
// 移除不需要的字段（如果有） |
|
|
|
// 移除不需要的字段（如果有） |
|
|
|
const { remark, ...rightRow } = movedRow; |
|
|
|
const { remark, ...rightRow } = movedRow; |
|
|
|
console.log("remark",remark) |
|
|
|
newRightData.push(rightRow); |
|
|
|
this.rightTableData.push(rightRow); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 清空左侧勾选状态 |
|
|
|
// 3. 更新到Vuex |
|
|
|
this.$refs.leftTable.clearSelection(); |
|
|
|
this.updateProductSelectState({ |
|
|
|
|
|
|
|
leftTableData: newLeftData, |
|
|
|
|
|
|
|
rightTableData: newRightData |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 4. 清空临时勾选状态 |
|
|
|
|
|
|
|
if (this.$refs.leftTable) { |
|
|
|
|
|
|
|
this.$refs.leftTable.clearSelection(); |
|
|
|
|
|
|
|
} |
|
|
|
this.leftSelectedRows = []; |
|
|
|
this.leftSelectedRows = []; |
|
|
|
// 重置序号（保证连续） |
|
|
|
|
|
|
|
this.resetIndex(); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 迁移到左侧（已选→待选，支持多选） |
|
|
|
// 迁移到左侧（已选→待选，支持多选） |
|
|
|
transferToLeft() { |
|
|
|
transferToLeft() { |
|
|
|
if (this.rightSelectedRows.length === 0) { |
|
|
|
if (this.rightSelectedRows.length === 0) { |
|
|
|
@ -358,34 +356,50 @@ export default { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 遍历勾选的行，逐个迁移 |
|
|
|
// 1. 复制Vuex中的数据进行操作 |
|
|
|
|
|
|
|
let newLeftData = [...this.leftTableData]; |
|
|
|
|
|
|
|
let newRightData = [...this.rightTableData]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 2. 遍历勾选的行，逐个迁移 |
|
|
|
this.rightSelectedRows.forEach((row) => { |
|
|
|
this.rightSelectedRows.forEach((row) => { |
|
|
|
const rightIdx = this.rightTableData.findIndex( |
|
|
|
const rightIdx = newRightData.findIndex(item => item.id === row.id); |
|
|
|
(item) => item.id === row.id |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
if (rightIdx > -1) { |
|
|
|
if (rightIdx > -1) { |
|
|
|
const [movedRow] = this.rightTableData.splice(rightIdx, 1); |
|
|
|
const [movedRow] = newRightData.splice(rightIdx, 1); |
|
|
|
// 补全左侧需要的字段 |
|
|
|
// 补全左侧需要的字段 |
|
|
|
this.leftTableData.push({ |
|
|
|
newLeftData.push({ |
|
|
|
...movedRow, |
|
|
|
...movedRow, |
|
|
|
remarkCn: movedRow.remarkCn || "", |
|
|
|
remarkCn: movedRow.remarkCn || "", |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 清空右侧勾选状态 |
|
|
|
// 3. 更新到Vuex |
|
|
|
this.$refs.rightTable.clearSelection(); |
|
|
|
this.updateProductSelectState({ |
|
|
|
|
|
|
|
leftTableData: newLeftData, |
|
|
|
|
|
|
|
rightTableData: newRightData |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 4. 清空临时勾选状态 |
|
|
|
|
|
|
|
if (this.$refs.rightTable) { |
|
|
|
|
|
|
|
this.$refs.rightTable.clearSelection(); |
|
|
|
|
|
|
|
} |
|
|
|
this.rightSelectedRows = []; |
|
|
|
this.rightSelectedRows = []; |
|
|
|
// 重置序号（保证连续） |
|
|
|
|
|
|
|
this.resetIndex(); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 重置表格序号（保证序号连续） |
|
|
|
// 重置表格序号（保证序号连续） |
|
|
|
resetIndex() { |
|
|
|
resetIndex() { |
|
|
|
this.leftTableData.forEach((item, idx) => (item.index = idx + 1)); |
|
|
|
const newLeftData = this.leftTableData.map((item, idx) => ({ |
|
|
|
this.rightTableData.forEach((item, idx) => (item.index = idx + 1)); |
|
|
|
...item, |
|
|
|
|
|
|
|
index: idx + 1 |
|
|
|
|
|
|
|
})); |
|
|
|
|
|
|
|
const newRightData = this.rightTableData.map((item, idx) => ({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
index: idx + 1 |
|
|
|
|
|
|
|
})); |
|
|
|
|
|
|
|
this.updateProductSelectState({ |
|
|
|
|
|
|
|
leftTableData: newLeftData, |
|
|
|
|
|
|
|
rightTableData: newRightData |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 选择产品 |
|
|
|
// 选择产品 |
|
|
|
handleSelectProduct() { |
|
|
|
handleSelectProduct() { |
|
|
|
let arr = [ {name:'工作台',url:'/wel'}] |
|
|
|
let arr = [ {name:'工作台',url:'/wel'}] |
|
|
|
@ -397,11 +411,12 @@ export default { |
|
|
|
sort: this.$route.query.sort, |
|
|
|
sort: this.$route.query.sort, |
|
|
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
customerId:this.$route.query.customerId ? this.$route.query.customerId:'', |
|
|
|
customerId: this.customerId, |
|
|
|
} |
|
|
|
// 携带已选小类ID列表（方便分类页识别） |
|
|
|
|
|
|
|
selectedSubcategoryIds: JSON.stringify(this.getSelectedSubcategoryIds) |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 保存已选产品（提交到后端，携带模板ID） |
|
|
|
// 保存已选产品（提交到后端，携带模板ID） |
|
|
|
async handleSave() { |
|
|
|
async handleSave() { |
|
|
|
if (this.rightTableData.length === 0) { |
|
|
|
if (this.rightTableData.length === 0) { |
|
|
|
@ -422,38 +437,36 @@ export default { |
|
|
|
name: item.nameCn, //名称 |
|
|
|
name: item.nameCn, //名称 |
|
|
|
spec: item.specCn, //产品规格 |
|
|
|
spec: item.specCn, //产品规格 |
|
|
|
unit: item.unitCn, //单位 |
|
|
|
unit: item.unitCn, //单位 |
|
|
|
|
|
|
|
|
|
|
|
standardPrice: item.standardPrice, //指导价 |
|
|
|
standardPrice: item.standardPrice, //指导价 |
|
|
|
remarks: item.remarkCn, //备注 |
|
|
|
remarks: item.remarkCn, //备注 |
|
|
|
multiple:item.multiple ,//倍率 |
|
|
|
multiple:item.multiple ,//倍率 |
|
|
|
num: item.multiple, //数量 |
|
|
|
num: item.multiple, //数量 |
|
|
|
|
|
|
|
|
|
|
|
})), |
|
|
|
})), |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
// 跳转前清空Vuex的产品选择状态 |
|
|
|
|
|
|
|
await this.clearProductSelectState(); |
|
|
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
if ( |
|
|
|
this.$route.query.productEdit && |
|
|
|
this.getOrderProductEdit |
|
|
|
this.$route.query.productEdit == true |
|
|
|
|
|
|
|
) { |
|
|
|
) { |
|
|
|
this.resetComponentState(); |
|
|
|
|
|
|
|
this.$router.push({ |
|
|
|
this.$router.push({ |
|
|
|
path: "/order/ProjectProductEdit", |
|
|
|
path: "/order/ProjectProductEdit", |
|
|
|
query: { |
|
|
|
query: { |
|
|
|
queryData: JSON.stringify(queryData), |
|
|
|
queryData: JSON.stringify(queryData), |
|
|
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
// mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
// orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
customerId:this.$route.query.customerId ? this.$route.query.customerId:'', |
|
|
|
// customerId: this.customerId, |
|
|
|
sort:this.$route.query.sort, |
|
|
|
// sort:this.$route.query.sort, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.resetComponentState(); |
|
|
|
|
|
|
|
this.$router.push({ |
|
|
|
this.$router.push({ |
|
|
|
path: "/order/addEdit", |
|
|
|
path: "/order/addEdit", |
|
|
|
query: { |
|
|
|
query: { |
|
|
|
queryData: JSON.stringify(queryData), |
|
|
|
queryData: JSON.stringify(queryData), |
|
|
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
mode: this.getOrderMode, |
|
|
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
orderId: this.getOrderId, |
|
|
|
customerId:this.$route.query.customerId ? this.$route.query.customerId:'', |
|
|
|
// customerId: this.customerId, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -462,21 +475,18 @@ export default { |
|
|
|
this.$message.error("网络异常，保存产品失败"); |
|
|
|
this.$message.error("网络异常，保存产品失败"); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 取消操作 |
|
|
|
// 取消操作 |
|
|
|
handleCancel() { |
|
|
|
handleCancel() { |
|
|
|
|
|
|
|
// 清空Vuex状态 |
|
|
|
this.$router.push({ |
|
|
|
this.clearProductSelectState(); |
|
|
|
path: "/order/addEdit", |
|
|
|
this.$router.push({ |
|
|
|
query: { |
|
|
|
path: "/order/addEdit", |
|
|
|
noClear: true, |
|
|
|
query: { |
|
|
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
noClear: true, |
|
|
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
|
|
// customerId:this.customerId||'', |
|
|
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.resetComponentState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -491,13 +501,12 @@ export default { |
|
|
|
margin: 0 auto; |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 8px; |
|
|
|
margin-top: 8px; |
|
|
|
padding: 20px !important; |
|
|
|
padding: 20px !important; |
|
|
|
.pageTitle{ |
|
|
|
.pageTitle{ |
|
|
|
// font-size: 26px; |
|
|
|
font-size:$font-size-title; |
|
|
|
font-size:$font-size-title; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.page-title { |
|
|
|
.page-title { |
|
|
|
@ -526,7 +535,6 @@ export default { |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
padding: 0 20px; |
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-btn { |
|
|
|
.transfer-btn { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
@ -556,44 +564,28 @@ export default { |
|
|
|
background-color: #f5f7fa !important; |
|
|
|
background-color: #f5f7fa !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 表格单元格样式 |
|
|
|
|
|
|
|
::v-deep .el-table { |
|
|
|
|
|
|
|
// --el-table-row-hover-bg-color: #e6f7ff; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// .el-table__cell { |
|
|
|
|
|
|
|
// padding: 8px 0; |
|
|
|
|
|
|
|
// font-size: 14px; |
|
|
|
|
|
|
|
// color: #606266; |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// .el-table__header-wrapper th { |
|
|
|
|
|
|
|
// font-weight: 500; |
|
|
|
|
|
|
|
// color: #303133; |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-button + .el-button { |
|
|
|
::v-deep .el-button + .el-button { |
|
|
|
margin-left: 0 !important; // 移除间距 |
|
|
|
margin-left: 0 !important; // 移除间距 |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 放大多选框本身 |
|
|
|
// 放大多选框本身 |
|
|
|
::v-deep .el-table .el-checkbox__inner { |
|
|
|
::v-deep .el-table .el-checkbox__inner { |
|
|
|
width: 30px; |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
height: 30px; |
|
|
|
border-width: 2px; // 让多选框边框也变粗 |
|
|
|
border-width: 2px; // 让多选框边框也变粗 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 让对勾变粗、变大 |
|
|
|
// 让对勾变粗、变大 |
|
|
|
::v-deep .el-table .el-checkbox__inner::after { |
|
|
|
::v-deep .el-table .el-checkbox__inner::after { |
|
|
|
border-width: 2px; // 对勾线条宽度，默认1px |
|
|
|
border-width: 2px; // 对勾线条宽度，默认1px |
|
|
|
transform: rotate(45deg) scaleY(1); // 确保对勾正常显示 |
|
|
|
transform: rotate(45deg) scaleY(1); // 确保对勾正常显示 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 让多选框在单元格里完全居中 |
|
|
|
// 让多选框在单元格里完全居中 |
|
|
|
::v-deep .el-table .el-table-column--selection .cell { |
|
|
|
::v-deep .el-table .el-table-column--selection .cell { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
padding: 0; |
|
|
|
padding: 0; |
|
|
|
height: 100%; // 占满单元格高度，垂直居中 |
|
|
|
height: 100%; // 占满单元格高度，垂直居中 |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
