diff --git a/src/views/product/info/components/ProductInfoModal.vue b/src/views/product/info/components/ProductInfoModal.vue index 592bc31..1a65e45 100644 --- a/src/views/product/info/components/ProductInfoModal.vue +++ b/src/views/product/info/components/ProductInfoModal.vue @@ -24,7 +24,7 @@ - + @@ -34,35 +34,48 @@ - + - - + - - - + + + e.preventDefault()" @click="addUnit"> - + @mousedown="e => e.preventDefault()" + @click="addUnit"> + 新增计量单位 - - + + {{ item.name }} - 多单位 + 多单位 @@ -199,10 +212,17 @@ - + - + @@ -217,37 +237,37 @@ - + - + - + - + - + - + - + - + - + 期初库存-批量 最低安全库存-批量 最高安全库存-批量 @@ -258,6 +278,17 @@ + + + + Upload + + @@ -296,6 +327,8 @@ import { TreeSelect, InputNumber, Checkbox, SelectOption, TabPane, Table, } from "ant-design-vue"; import {cloneDeep} from 'lodash-es'; +import { PlusOutlined } from '@ant-design/icons-vue'; +import type { UploadProps, } from 'ant-design-vue'; export default { name: 'ProductInfoModal', @@ -321,6 +354,7 @@ export default { }, setup(_, context) { const confirmLoading = ref(false); + const unit = ref(); const title = ref('新增商品信息'); const open = ref(false); const prefixNo = ref('material'); @@ -337,6 +371,15 @@ export default { const skuTwoTitle = ref('属性2'); const skuThreeTitle = ref('属性3'); + const form = { + skuOne: ref(null), + skuTwo: ref(null), + skuThree: ref(null), + getFieldValue(field) { + return form[field]; + } + }; + const model = ref({}); const labelCol = reactive({ @@ -381,11 +424,71 @@ export default { ] } }) - const mpShort = reactive({ - mfrs: {}, - otherField1: {}, - otherField2: {}, - otherField3: {} + const meTable = reactive({ + loading: false, + dataSource: [], + columns: [ + { + title: '条码', + key: 'barCode', + type: 'input', + placeholder: '请输入${title}', + validateRules: [ + { required: true, message: '${title}不能为空' }, + { pattern: /^.{4,40}$/, message: '长度为4到40位' } + ] + }, + { + title: '单位', + key: 'unit', + type: 'input', + placeholder: '请输入${title}', + validateRules: [{ required: true, message: '${title}不能为空' }] + }, + { + title: '多属性', + key: 'sku', + type: 'input', + readonly: true, + placeholder: '请输入${title}' + }, + { + title: '采购价', + key: 'purchasePrice', + type: 'inputNumber', + defaultValue: '', + placeholder: '请输入${title}' + }, + { + title: '零售价', + key: 'retailPrice', + type: 'inputNumber', + defaultValue: '', + placeholder: '请输入${title}' + }, + { + title: '销售价', + key: 'salesPrice', + type: 'inputNumber', + defaultValue: '', + placeholder: '请输入${title}' + }, + { + title: '最低售价', + key: 'lowSalesPrice', + type: 'inputNumber', + defaultValue: '', + placeholder: '请输入${title}' + } + ] + }); + + + const productInfo = reactive({ + mfrs: '制造商', + otherField1: '自定义1', + otherField2: '自定义2', + otherField3: '自定义3' }) function addUnit() { @@ -408,9 +511,54 @@ export default { function unitOnChange() { } + function onlyUnitOnChange(e) { + if (e.target.value) { + // 单位有填写了之后则显示多属性的文本框 + manySkuStatus.value = true; + } else { + manySkuStatus.value = false; + } + // 循环a-table行表格将e.target.value更新 + const dataSource = meTable.dataSource + for (let i = 0; i < dataSource.length; i++) { + dataSource[i].unit = e.target.value + } + meTable.dataSource = dataSource + // 这里是将a-table的数据更新到editableData中 meTable.dataSource数据更新到editableData中 + for (let i = 0; i < meTable.dataSource.length; i++) { + editableData[meTable.dataSource[i].key] = meTable.dataSource[i] + } + } + + const onValueChange = (record, dataIndex, value) => { + console.log('Value changed:', record, dataIndex, value); + if (!editableData[record.key]) { + editableData[record.key] = {}; + } + editableData[record.key][dataIndex] = value; + console.log('Editable data:', editableData); + }; - function onlyUnitOnChange() { + //修改商品明细中的价格触发计算 + function changeDecimalByValue(row) { + let unitArr = unitList + let basicUnit = '', otherUnit = '', ratio = 1, otherUnitTwo = '', ratioTwo = 1, otherUnitThree = '', ratioThree = 1 + for (let i = 0; i < unitArr.length; i++) { + if(unitArr[i].id === this.form.getFieldValue('unitId')) { + basicUnit = unitArr[i].basicUnit + otherUnit = unitArr[i].otherUnit + ratio = unitArr[i].ratio + if(unitArr[i].otherUnitTwo) { + otherUnitTwo = unitArr[i].otherUnitTwo + ratioTwo = unitArr[i].ratioTwo + } + if(unitArr[i].otherUnitThree) { + otherUnitThree = unitArr[i].otherUnitThree + ratioThree = unitArr[i].ratioThree + } + } + } } function manyUnitOnChange() { @@ -441,69 +589,20 @@ export default { } function onManySkuChange(value) { - this.manySkuSelected = value.length + } function batchSetStock(type) { } - const columns = [ - { - title: '条码', - dataIndex: 'barCode', - }, - { - title: '单位', - dataIndex: 'unit', - }, - { - title: '采购价', - dataIndex: 'purchasePrice', - }, - { - title: '零售价', - dataIndex: 'retailPrice', - }, - { - title: '销售价', - dataIndex: 'salesPrice', - }, - { - title: '最低售价', - dataIndex: 'lowSalesPrice', - }, - ]; - - const data = [ - { - key: 0, - barCode: '1004', - unit: '', - purchasePrice: '', - retailPrice: '', - salesPrice: '', - lowSalesPrice: '', - } - ]; - const dataSource = ref(data); - const editableData = reactive({ - 0: cloneDeep(data[0]) // 添加键为0的条目 - }); + const editableData = reactive({}); const addRow = () => { - const newRow = { - key: (dataSource.value.length + 1), - barCode: '', - unit: '', - purchasePrice: '', - retailPrice: '', - salesPrice: '', - lowSalesPrice: '', - }; - editableData[newRow.key] = cloneDeep(newRow); // 将新行添加到editableData - dataSource.value.push(newRow); + const newRow = { key: Date.now() }; // Create a new row with a unique key + editableData[newRow.key] = cloneDeep(newRow); // Add the new row to editableData + meTable.dataSource.push(newRow); edit(newRow.key); }; @@ -512,14 +611,14 @@ export default { }; const deleteKey = (key) => { - - } + delete editableData[key]; + }; const edit = (key) => { if (key === 0) { - editableData[0] = cloneDeep(dataSource.value.find(item => item.key === 0)); + editableData[0] = cloneDeep(meTable.dataSource.find(item => item.key === 0)); } else { - editableData[key] = cloneDeep(dataSource.value.find(item => item.key === key)); + editableData[key] = cloneDeep(meTable.dataSource.find(item => item.key === key)); } }; @@ -532,10 +631,33 @@ export default { function deleteRows() { const selectedKeys = rowSelection.value.selectedRowKeys; - dataSource.value = dataSource.value.filter(row => !selectedKeys.includes(row.key)); + meTable.dataSource = meTable.dataSource.filter(row => !selectedKeys.includes(row.key)); rowSelection.value.selectedRowKeys = []; } + function getBase64(file: File) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); + } + + const previewVisible = ref(false); + const previewImage = ref(''); + const previewTitle = ref(''); + const fileList = ref([]) + + const handlePreview = async (file: UploadProps['fileList'][number]) => { + if (!file.url && !file.preview) { + file.preview = (await getBase64(file.originFileObj)) as string; + } + previewImage.value = file.url || file.preview; + previewVisible.value = true; + previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1); + }; + return { confirmLoading, openModal, @@ -573,16 +695,16 @@ export default { categoryTree, onManySkuChange, batchSetStock, - mpShort, model, - columns, - dataSource, addRow, editableData, getColumnTitle, deleteKey, deleteRows, - rowSelection + rowSelection, + meTable, + productInfo, + fileList }; }, } @@ -598,4 +720,14 @@ export default { color: #bbb; background-color: #ffffff; } + +.ant-upload-select-picture-card i { + font-size: 32px; + color: #999; +} + +.ant-upload-select-picture-card .ant-upload-text { + margin-top: 8px; + color: #666; +} \ No newline at end of file