＜j-editable-table 根据 下拉框值 来隐藏 列
部分代码
<a-col :md="6" :sm="24">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="类别"
data-step="8" data-title="类别" data-intro="类别需要在【商品类别】页面进行录入，录入之后在此处进行调用">
<a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
:treeData="categoryTree" v-decorator="[ 'categoryId' ]" placeholder="请选择类别" @change="handleCategoryChange">
</a-tree-select>
</a-form-item>
</a-col>
handleCategoryChange(value) {
debugger
if (value == '22' || value == '24') {
// 隐藏销售价表单项
this.meTable.columns[3].type = FormTypes.input
this.meTable.columns[4].type = FormTypes.hidden
} else if (value == '23') {
this.meTable.columns[4].type = FormTypes.input
// 隐藏采购价表单项
this.meTable.columns[3].type = FormTypes.hidden
}
},
添加或者 关闭 点击x 的时候要 把这个加上
this.meTable.columns[4].type = FormTypes.input
this.meTable.columns[3].type = FormTypes.input文章来源地址https://www.toymoban.com/news/detail-602657.html
完整代码
<template>
<j-modal
:title="title"
:width="1300"
:visible="visible"
:confirmLoading="confirmLoading"
v-bind:prefixNo="prefixNo"
switchHelp
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭"
wrapClassName="ant-modal-material-warp"
:id="prefixNo"
style="top:5%;height: 100%;overflow-y: hidden">
<template slot="footer">
<a-button key="back" v-if="isReadOnly" @click="handleCancel">
关闭
</a-button>
</template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="基本信息" id="materialHeadModal" forceRender>
<a-row class="form-row" :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称" data-step="1" data-title="名称" data-intro="名称必填，可以重复">
<a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]"/>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规格" data-step="2" data-title="规格" data-intro="规格不必填，比如：10克">
<a-input placeholder="请输入规格" v-decorator.trim="[ 'standard' ]"/>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="型号" data-step="3" data-title="型号" data-intro="型号是比规格更小的属性，比如：RX-01">
<a-input placeholder="请输入型号" v-decorator.trim="[ 'model' ]" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="单位"
data-step="4" data-title="单位" data-intro="此处支持单个单位和多单位，勾选多单位就可以切换到多单位的下拉框，多单位需要先在【计量单位】页面进行录入。
比如牛奶有瓶和箱两种单位，12瓶=1箱，这就构成了多单位，多单位中有个换算比例">
<a-row class="form-row" :gutter="24">
<a-col :lg="15" :md="15" :sm="24">
<a-input placeholder="输入单位" :hidden="unitStatus" v-decorator.trim="[ 'unit' ]" @change="onlyUnitOnChange" />
<a-select :value="unitList" placeholder="选择单位" v-decorator="[ 'unitId' ]" @change="manyUnitOnChange"
showSearch optionFilterProp="children" :hidden="manyUnitStatus" :dropdownMatchSelectWidth="false">
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0;" />
<div style="padding: 4px 8px; cursor: pointer;"
@mousedown="e => e.preventDefault()" @click="addUnit"><a-icon type="plus" /> 新增计量单位</div>
</div>
<a-select-option v-for="(item,index) in unitList"
:key="index" :value="item.id">
{{ item.name }}
</a-select-option>
</a-select>
</a-col>
<a-col :lg="9" :md="9" :sm="24">
<a-checkbox :checked="unitChecked" @change="unitOnChange">多单位</a-checkbox>
</a-col>
</a-row>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="颜色" data-step="5" data-title="颜色"
data-intro="请填写商品的颜色，如果是多属性商品可以不填（下面有多属性开关）">
<a-input placeholder="请输入颜色" v-decorator.trim="[ 'color' ]" />
</a-form-item>
</a-col>
<!-- <a-col :md="6" :sm="24">-->
<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="基础重量" data-step="6" data-title="基础重量"-->
<!-- data-intro="请填写基本单位对应的重量，用于计算按重量分摊费用时单据中各行商品分摊的费用成本">-->
<!-- <a-input-number style="width: 100%" placeholder="请输入基础重量(kg)" v-decorator.trim="[ 'weight' ]" />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :md="6" :sm="24">-->
<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="保质期" data-step="7" data-title="保质期"-->
<!-- data-intro="保质期指的是商品的保质期(天)，主要针对带生产日期的，此类商品一般有批号">-->
<!-- <a-input-number style="width: 100%" placeholder="请输入保质期(天)" v-decorator.trim="[ 'expiryNum' ]" />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :md="6" :sm="24">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="类别"
data-step="8" data-title="类别" data-intro="类别需要在【商品类别】页面进行录入，录入之后在此处进行调用">
<a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
:treeData="categoryTree" v-decorator="[ 'categoryId' ]" placeholder="请选择类别" @change="handleCategoryChange">
</a-tree-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序号" data-step="1" data-title="名称" data-intro="名称必填，可以重复">
<a-input placeholder="请输入序号" v-decorator.trim="[ 'barCodes', validatorRules.barCodes]" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<!-- <a-row class="form-row" :gutter="24">-->
<!-- -->
<!-- </a-row>-->
<!-- <a-row class="form-row" :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号" data-step="9" data-title="序列号"
data-intro="此处是商品的序列号开关，如果选择了有，则在采购入库单据需要录入该商品的序列号，在销售出库单据需要选择该商品的序列号进行出库">
<a-select placeholder="有无序列号" v-decorator="[ 'enableSerialNumber' ]">
<a-select-option value="1">有</a-select-option>
<a-select-option value="0">无</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="批号" data-step="10" data-title="批号"
data-intro="此处是商品的批号开关，如果选择了有，则在采购入库单据需要录入该商品的批号和生产日期，在销售出库单据需要选择该商品的批号进行出库">
<a-select placeholder="有无批号" v-decorator="[ 'enableBatchNumber' ]">
<a-select-option value="1">有</a-select-option>
<a-select-option value="0">无</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="多属性" data-step="11" data-title="多属性"
data-intro="多属性是针对的sku商品（比如服装、鞋帽行业），此处开关如果启用就可以在下方进行多sku的配置，配置具体的颜色、尺码之类的组合">
<a-switch checked-children="启用" un-checked-children="关闭" v-model="skuSwitch" :disabled="switchDisabled" @change="onSkuChange"></a-switch>
</a-form-item>
</a-col>
</a-row> -->
<a-card v-if="skuSwitch">
<a-row class="form-row" :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.manyColor">
<a-select mode="multiple" v-decorator="[ 'manyColor' ]" showSearch optionFilterProp="children">
<a-select-option v-for="(item,index) in sku.manyColorList" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.manySize">
<a-select mode="multiple" v-decorator="[ 'manySize' ]" showSearch optionFilterProp="children">
<a-select-option v-for="(item,index) in sku.manySizeList" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other1">
<a-select mode="multiple" v-decorator="[ 'other1' ]" showSearch optionFilterProp="children">
<a-select-option v-for="(item,index) in sku.other1List" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other2">
<a-select mode="multiple" v-decorator="[ 'other2' ]" showSearch optionFilterProp="children">
<a-select-option v-for="(item,index) in sku.other2List" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other3">
<a-select mode="multiple" v-decorator="[ 'other3' ]" showSearch optionFilterProp="children">
<a-select-option v-for="(item,index) in sku.other3List" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生成条码">
<a-switch v-model="barCodeSwitch" @change="onBarCodeChange"></a-switch>
</a-form-item>
</a-col>
</a-row>
</a-card>
<div style="margin-top:8px;" id="materialDetailModal">
<j-editable-table
ref="editableMeTable"
:loading="meTable.loading"
:columns="meTable.columns"
:dataSource="meTable.dataSource"
:height="300"
:minWidth="1000"
:maxHeight="300"
:rowNumber="false"
:rowSelection="true"
:actionButton="false"
@valueChange="onValueChange"
@added="onAdded"
@deleted="onDeleted">
<!-- <template #buttonAfter>
<a-button @click="batchSetPrice('purchase')">采购价-批量</a-button>
<a-button style="margin-left: 8px" @click="batchSetPrice('commodity')">零售价-批量</a-button>
<a-button style="margin-left: 8px" @click="batchSetPrice('wholesale')">销售价-批量</a-button>
<a-button style="margin-left: 8px" @click="batchSetPrice('low')">最低售价-批量</a-button>
</template> -->
</j-editable-table>
<!-- 表单区域 -->
<batch-set-price-modal ref="priceModalForm" @ok="batchSetPriceModalFormOk"></batch-set-price-modal>
</div>
<a-row class="form-row" :gutter="24">
<a-col :lg="24" :md="24" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="">
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/>
</a-form-item>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="2" tab="扩展信息" forceRender>
<a-row v-if="mpShort.mfrs.enabled" class="form-row" :gutter="24">
<a-col :lg="8" :md="8" :sm="8">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.mfrs.name">
<a-input v-decorator.trim="[ 'mfrs' ]" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="mpShort.otherField1.enabled" class="form-row" :gutter="24">
<a-col :lg="8" :md="8" :sm="8">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField1.name">
<a-input v-decorator.trim="[ 'otherField1' ]" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="mpShort.otherField2.enabled" class="form-row" :gutter="24">
<a-col :lg="8" :md="8" :sm="8">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField2.name">
<a-input v-decorator.trim="[ 'otherField2' ]" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="mpShort.otherField3.enabled" class="form-row" :gutter="24">
<a-col :lg="8" :md="8" :sm="8">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField3.name">
<a-input v-decorator.trim="[ 'otherField3' ]" />
</a-form-item>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="3" tab="库存数量" forceRender>
<j-editable-table
ref="editableDepotTable"
:loading="depotTable.loading"
:columns="depotTable.columns"
:dataSource="depotTable.dataSource"
:minWidth="1000"
:maxHeight="300"
:rowNumber="true"
:rowSelection="false"
:actionButton="false">
<template #buttonAfter>
<a-button style="margin: 0px 0px 8px 0px" @click="batchSetStock('initStock')">期初库存-批量</a-button>
<a-button style="margin-left: 8px" @click="batchSetStock('lowSafeStock')">最低安全库存-批量</a-button>
<a-button style="margin-left: 8px" @click="batchSetStock('highSafeStock')">最高安全库存-批量</a-button>
</template>
</j-editable-table>
<!-- 表单区域 -->
<batch-set-stock-modal ref="stockModalForm" @ok="batchSetStockModalFormOk"></batch-set-stock-modal>
</a-tab-pane>
<a-tab-pane key="4" tab="图片信息" forceRender>
<a-row class="form-row" :gutter="24">
<a-col :lg="12" :md="12" :sm="24">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="图片信息">
<j-image-upload v-model="fileList" bizPath="material" text="上传" isMultiple></j-image-upload>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :sm="24"></a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</a-form>
</a-spin>
<unit-modal ref="unitModalForm" @ok="unitModalFormOk"></unit-modal>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import BatchSetPriceModal from './BatchSetPriceModal'
import BatchSetStockModal from './BatchSetStockModal'
import UnitModal from '../../system/modules/UnitModal'
import JEditableTable from '@/components/jeecg/JEditableTable'
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
import {queryMaterialCategoryTreeList,checkMaterial,checkMaterialBarCode,getAllMaterialAttribute,getMaxBarCode} from '@/api/api'
import { handleIntroJs,autoJumpNextInput } from "@/utils/util"
import { httpAction, getAction } from '@/api/manage'
import JImageUpload from '@/components/jeecg/JImageUpload'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'
export default {
name: "MaterialModal",
components: {
BatchSetPriceModal,
BatchSetStockModal,
UnitModal,
JImageUpload,
JDate,
JEditableTable,
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
}
},
data () {
return {
title:"操作",
visible: false,
categoryTree: [],
unitList: [],
depotList: [],
fileList:[],
unitStatus: false,
manyUnitStatus: true,
unitChecked: false,
skuSwitch: false, //sku开启状态
switchDisabled: false, //开关的启用状态
barCodeSwitch: false, //生成条码开关
maxBarCodeInfo: '', //最大条码
meDeleteIdList: [], //删除条码信息的id数组
prefixNo: 'material',
sku: {
manyColor: '多颜色',
manySize: '多尺寸',
other1: '自定义1',
other2: '自定义2',
other3: '自定义3',
manyColorList: [],
manySizeList: [],
other1List: [],
other2List: [],
other3List: [],
},
model: {},
isReadOnly: false,
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
mpShort: {
mfrs: {},
otherField1: {},
otherField2: {},
otherField3: {}
},
meTable: {
loading: false,
dataSource: [],
columns: [
{
title: '条码', key: 'barCode', width: '15%', type: FormTypes.hidden, defaultValue: '', placeholder: '请输入${title}',
validateRules: [
{ required: true, message: '${title}不能为空' },
// { pattern: /^[1-9]\d*$/, message: '请输入零以上的正整数' },
// { pattern: /^\d{4,13}$/, message: '4到13位数字' },
// { handler: this.validateBarCode}
]
},
{
title: '单位', key: 'commodityUnit', width: '8%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '多属性', key: 'sku', width: '10%', type: FormTypes.input, defaultValue: '', readonly:true, placeholder: '点击生成条码赋值'
},
{
title: '采购价', key: 'purchaseDecimal', width: '9%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
},
// {
// title: '零售价', key: 'commodityDecimal', width: '9%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
// },
{
title: '销售价', key: 'wholesaleDecimal', width: '9%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
},
// {
// title: '最低售价', key: 'lowDecimal', width: '9%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
// }
]
},
depotTable: {
loading: false,
dataSource: [],
columns: [
{
title: '仓库', key: 'name', width: '15%', type: FormTypes.normal
},
{
title: '期初库存数量', key: 'initStock', width: '15%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
},
{
title: '最低安全库存数量', key: 'lowSafeStock', width: '15%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
},
{
title: '最高安全库存数量', key: 'highSafeStock', width: '15%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
}
]
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
name:{
rules: [
{ required: true, message: '请输入名称!' },
{ min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
]
},
unit:{
rules: [
{ required: true, message: '请输入单位!' }
]
}
},
url: {
add: '/material/add',
edit: '/material/update',
materialsExtendList: '/materialsExtend/getDetailList',
depotWithStock: '/depot/getAllListWithStock'
}
}
},
created () {
this.maxBarCodeAction();
this.loadTreeData();
this.loadUnitListData();
this.loadParseMaterialProperty();
},
methods: {
handleCategoryChange(value) {
debugger
if (value == '22' || value == '24') {
// 隐藏销售价表单项
this.meTable.columns[3].type = FormTypes.input
this.meTable.columns[4].type = FormTypes.hidden
} else if (value == '23') {
this.meTable.columns[4].type = FormTypes.input
// 隐藏采购价表单项
this.meTable.columns[3].type = FormTypes.hidden
}
},
// 获取所有的editableTable实例
getAllTable() {
return Promise.all([
getRefPromise(this, 'editableMeTable'),
getRefPromise(this, 'editableDepotTable')
])
},
add () {
debugger
this.meTable.columns[4].type = FormTypes.input
this.meTable.columns[3].type = FormTypes.input
//隐藏多属性
this.meTable.columns[2].type = FormTypes.hidden
// 默认新增一条数据
this.getAllTable().then(editableTables => {
editableTables[0].add()
})
this.edit({});
this.$nextTick(() => {
handleIntroJs('material', 11)
});
},
edit (record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.activeKey = '1'
this.skuSwitch = false
this.barCodeSwitch = false
this.visible = true;
if(JSON.stringify(record) === '{}') {
this.fileList = []
} else {
setTimeout(() => {
this.fileList = record.imgName
}, 5)
}
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'name', 'standard', 'unit', 'unitId', 'model', 'color',
'categoryId','enableSerialNumber','enableBatchNumber','expiryNum','weight','remark','mfrs','otherField1','otherField2','otherField3','barCodes'))
autoJumpNextInput('materialHeadModal')
autoJumpNextInput('materialDetailModal')
});
this.initMaterialAttribute()
// 加载子表数据
if (this.model.id) {
//禁用多属性开关
this.switchDisabled = true
// 判断是否是多单位
if(this.model.unit){
this.unitChecked = false
this.unitStatus = false
this.manyUnitStatus = true
} else {
this.unitChecked = true
this.unitStatus = true
this.manyUnitStatus = false
}
let params = { materialId: this.model.id }
//编辑商品的时候多属性字段可以修改
this.meTable.columns[2].readonly = false
this.requestMeTableData(this.url.materialsExtendList, params, this.meTable)
this.requestDepotTableData(this.url.depotWithStock, { mId: this.model.id }, this.depotTable)
} else {
this.switchDisabled = false
this.meTable.columns[2].readonly = true
this.requestDepotTableData(this.url.depotWithStock, { mId: 0 }, this.depotTable)
}
},
/** 查询条码tab的数据 */
requestMeTableData(url, params, tab) {
tab.loading = true
getAction(url, params).then(res => {
for (let i = 0; i < res.data.rows.length; i++) {
if(res.data.rows[i].sku) {
this.meTable.columns[2].type = FormTypes.input
} else {
this.meTable.columns[2].type = FormTypes.hidden
}
}
tab.dataSource = res.data.rows || []
}).finally(() => {
tab.loading = false
})
},
/** 查询仓库tab的数据 */
requestDepotTableData(url, params, tab) {
tab.loading = true
getAction(url, params).then(res => {
tab.dataSource = res.data || []
}).finally(() => {
tab.loading = false
})
},
close () {
this.$emit('close');
this.visible = false
this.unitStatus = false
this.manyUnitStatus = true
this.unitChecked = false
this.getAllTable().then(editableTables => {
editableTables[0].initialize()
editableTables[1].initialize()
})
},
handleOk () {
this.validateFields()
},
handleCancel () {
this.close()
},
/** 触发表单验证 */
validateFields() {
this.getAllTable().then(tables => {
/** 一次性验证主表和所有的次表 */
return validateFormAndTables(this.form, tables)
}).then(allValues => {
let formData = this.classifyIntoFormData(allValues)
console.log(this.classifyIntoFormData,"this.classifyIntoFormData4")
formData.sortList = [];
if(formData.unit === undefined) {formData.unit = ''}
if(formData.unitId === undefined) {formData.unitId = ''}
if(this.unitChecked) {formData.unit = ''} else {formData.unitId = ''}
// 发起请求
return this.requestAddOrEdit(formData)
}).catch(e => {
if (e.error === VALIDATE_NO_PASSED) {
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
} else {
console.error(e)
}
})
},
/** 整理成formData */
classifyIntoFormData(allValues) {
let materialMain = Object.assign(this.model, allValues.formValue)
return {
...materialMain, // 展开
meList: allValues.tablesValue[0].values,
stock: allValues.tablesValue[1].values,
}
},
/** 发起新增或修改的请求 */
requestAddOrEdit(formData) {
if(formData.unit === '' && formData.unitId === '') {
this.$message.warning('抱歉，单位为必填项！');
return;
}
if(formData.meList.length === 0) {
this.$message.warning('抱歉，请输入条码信息！');
return;
}
if(formData.enableSerialNumber === '1' && formData.enableBatchNumber === '1') {
this.$message.warning('抱歉，序列号和批号只能选择一项！');
return;
}
//校验商品是否存在，通过校验商品的名称、型号、规格、颜色、单位、制造商等
let param = {
id: this.model.id?this.model.id:0,
name: this.model.name,
model: this.parseParam(this.model.model),
color: this.parseParam(this.model.color),
standard: this.parseParam(this.model.standard),
mfrs: this.parseParam(this.model.mfrs),
otherField1: this.parseParam(this.model.otherField1),
otherField2: this.parseParam(this.model.otherField2),
otherField3: this.parseParam(this.model.otherField3),
unit: this.parseParam(this.model.unit),
unitId: this.parseParam(this.model.unitId)
}
checkMaterial(param).then((res)=>{
if(res && res.code===200) {
if(res.data.status){
this.$message.warning('抱歉，该商品已存在！');
return;
} else {
//进一步校验单位
let basicUnit = '', otherUnit = '', otherUnitTwo = '', otherUnitThree = ''
if(formData.unitId) {
let unitArr = this.unitList
for(let i=0; i < unitArr.length; i++) {
if(unitArr[i].id == formData.unitId) {
basicUnit = unitArr[i].basicUnit
otherUnit = unitArr[i].otherUnit
if(unitArr[i].otherUnitTwo) {
otherUnitTwo = unitArr[i].otherUnitTwo
}
if(unitArr[i].otherUnitThree) {
otherUnitThree = unitArr[i].otherUnitThree
}
}
}
}
if(!formData.unit) {
//此时为多单位
if (formData.meList.length<2){
this.$message.warning('多单位的商品条码行数至少要有两行，请再新增一行条码信息！');
return;
}
if(formData.meList[0].commodityUnit != basicUnit) {
this.$message.warning('条码之后的单位填写有误，单位【' + formData.meList[0].commodityUnit
+ '】请修改为【' + basicUnit + '】！');
return;
}
if(formData.meList[1].commodityUnit != otherUnit) {
this.$message.warning('条码之后的单位填写有误，单位【' + formData.meList[1].commodityUnit
+ '】请修改为【' + otherUnit + '】！');
return;
}
}
for(let i=0; i<formData.meList.length; i++) {
let commodityUnit = formData.meList[i].commodityUnit;
if(formData.unit) {
if(commodityUnit != formData.unit) {
this.$message.warning('条码之后的单位填写有误，单位【' + commodityUnit + '】请修改为【'
+ formData.unit + '】！');
return;
}
} else if(formData.unitId) {
if(commodityUnit != basicUnit && commodityUnit != otherUnit && commodityUnit != otherUnitTwo && commodityUnit != otherUnitThree) {
let warnInfo = '条码之后的单位填写有误，单位【' + commodityUnit + '】请修改为【' + basicUnit+ '】或【' + otherUnit+ '】'
if(otherUnitTwo) {
warnInfo += '或【' + otherUnitTwo+ '】'
}
if(otherUnitThree) {
warnInfo += '或【' + otherUnitThree+ '】'
}
warnInfo += '！'
this.$message.warning(warnInfo);
return;
}
}
}
if(this.fileList && this.fileList.length > 0) {
formData.imgName = this.fileList
} else {
formData.imgName = ''
}
formData.meDeleteIdList = this.meDeleteIdList
//接口调用
let url = this.url.add, method = 'post'
if (this.model.id) {
url = this.url.edit
method = 'put'
}
const that = this;
this.confirmLoading = true
httpAction(url, formData, method).then((res) => {
if(res.code === 200){
that.$emit('ok');
that.confirmLoading = false
that.close();
}else{
that.$message.warning(res.data.message);
that.confirmLoading = false
}
}).finally(() => {
})
}
}
})
},
parseParam(param) {
return param ? param: ""
},
validateBarCode(type, value, row, column, callback, target) {
let params = {
barCode: value,
id: row.id.length >= 20?0: row.id
};
checkMaterialBarCode(params).then((res)=>{
if(res && res.code===200) {
if(!res.data.status){
callback(true);
} else {
callback(false, '该条码已经存在');
}
} else {
callback(false, res.data);
}
});
},
maxBarCodeAction(){
getMaxBarCode({}).then((res)=> {
if (res && res.code === 200) {
this.maxBarCodeInfo = res.data.barCode - 0
}
})
},
loadTreeData(){
let that = this;
let params = {};
params.id='';
queryMaterialCategoryTreeList(params).then((res)=>{
if(res){
that.categoryTree = [];
for (let i = 0; i < res.length; i++) {
let temp = res[i];
that.categoryTree.push(temp);
}
}
})
// debugger
// let unitArr = this.unitList
// for(let i=0; i < unitArr.length; i++) {
// if(unitArr[i].id == formData.unitId) {
// console.log(unitArr[i].id,"3333333333333333333333333333333333333333333333")
// }
// }
},
loadUnitListData(){
debugger
let that = this;
let params = {};
params.currentPage = 1;
params.pageSize = 100;
getAction('/unit/list', params).then((res) => {
if(res){
that.unitList = res.data.rows;
}
})
},
onSkuChange(checked) {
this.skuSwitch = checked
if (checked) {
this.meTable.columns[2].type = FormTypes.input
this.form.setFieldsValue({ 'color': '' })
} else {
this.meTable.columns[2].type = FormTypes.hidden
}
},
onBarCodeChange(checked) {
let unit = this.form.getFieldValue('unit')
if(unit) {
if(checked){
//计算多属性已经选择了几个
let count = this.getNumByField('manyColor') + this.getNumByField('manySize')
+ this.getNumByField('other1') + this.getNumByField('other2') + this.getNumByField('other3')
if(count === 2) {
let skuArr = []
if(this.getNumByField('manyColor')) {
skuArr.push(this.form.getFieldValue('manyColor'))
}
if(this.getNumByField('manySize')) {
skuArr.push(this.form.getFieldValue('manySize'))
}
if(this.getNumByField('other1')) {
skuArr.push(this.form.getFieldValue('other1'))
}
if(this.getNumByField('other2')) {
skuArr.push(this.form.getFieldValue('other2'))
}
if(this.getNumByField('other3')) {
skuArr.push(this.form.getFieldValue('other3'))
}
let skuArrOne = skuArr[0]
let skuArrTwo = skuArr[1]
let barCodeSku = []
for (let i = 0; i < skuArrOne.length; i++) {
for (let j = 0; j < skuArrTwo.length; j++) {
barCodeSku.push(skuArrOne[i] + ',' + skuArrTwo[j])
}
}
let meTableData = []
getMaxBarCode({}).then((res)=>{
if(res && res.code===200) {
let maxBarCode = res.data.barCode-0
for (let i = 0; i < barCodeSku.length; i++) {
let currentBarCode = maxBarCode + i + 1
meTableData.push({barCode: currentBarCode, commodityUnit: unit, sku: barCodeSku[i]})
}
this.meTable.dataSource = meTableData
}
})
} else {
this.$message.warning('请选择两个属性！');
this.barCodeSwitch = false;
}
} else {
this.meTable.dataSource = []
}
} else {
this.$message.warning('请填写单位，注意不要勾选多单位！');
this.barCodeSwitch = false;
}
},
getNumByField(field) {
let num = 0
if(this.form.getFieldValue(field)) {
if(this.form.getFieldValue(field).length>0) {
num = 1
}
}
return num
},
onAdded(event) {
debugger
const { row, target } = event
let unit = ''
if(this.unitStatus == false) {
unit = this.form.getFieldValue('unit')
}
if(this.maxBarCodeInfo === '') {
getMaxBarCode({}).then((res)=> {
if (res && res.code === 200) {
this.maxBarCodeInfo = res.data.barCode - 0
this.maxBarCodeInfo = this.maxBarCodeInfo + 1
target.setValues([{rowKey: row.id, values: {barCode: this.maxBarCodeInfo, commodityUnit: unit?unit:''}}])
this.form.setFieldsValue({'barCodes': this.maxBarCodeInfo})
}
})
} else {
this.maxBarCodeInfo = this.maxBarCodeInfo + 1
target.setValues([{rowKey: row.id, values: {barCode: this.maxBarCodeInfo, commodityUnit: unit?unit:''}}])
this.form.setFieldsValue({'barCodes': this.maxBarCodeInfo})
}
// this.maxBarCodeInfo = this.maxBarCodeInfo + 1
// target.setValues([{rowKey: row.id, values: {barCode: this.maxBarCodeInfo, commodityUnit: unit?unit:''}}])
},
onDeleted(value) {
this.meDeleteIdList = (value)
},
//单元值改变一个字符就触发一次
onValueChange(event) {
const { type, row, column, value, target } = event
switch(column.key) {
case "purchaseDecimal":
case "commodityDecimal":
case "wholesaleDecimal":
case "lowDecimal":
this.changeDecimalByValue(row)
break;
}
},
//修改商品明细中的价格触发计算
changeDecimalByValue(row) {
let unitArr = this.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
}
}
}
if(row.commodityUnit === basicUnit) {
this.$refs.editableMeTable.getValues((error, values) => {
let mArr = values, basicPurchaseDecimal='', basicCommodityDecimal='', basicWholesaleDecimal='', basicLowDecimal=''
for (let i = 0; i < mArr.length; i++) {
let mInfo = mArr[i]
if(i===0) {
basicPurchaseDecimal = mInfo.purchaseDecimal
basicCommodityDecimal = mInfo.commodityDecimal
basicWholesaleDecimal = mInfo.wholesaleDecimal
basicLowDecimal = mInfo.lowDecimal
} else {
//副单位进行换算
if(basicPurchaseDecimal) { mInfo.purchaseDecimal = basicPurchaseDecimal*ratio}
if(basicCommodityDecimal) { mInfo.commodityDecimal = basicCommodityDecimal*ratio}
if(basicWholesaleDecimal) { mInfo.wholesaleDecimal = basicWholesaleDecimal*ratio}
if(basicLowDecimal) { mInfo.lowDecimal = basicLowDecimal*ratio}
if(otherUnitTwo && i===2) {
if(basicPurchaseDecimal) { mInfo.purchaseDecimal = basicPurchaseDecimal*ratioTwo}
if(basicCommodityDecimal) { mInfo.commodityDecimal = basicCommodityDecimal*ratioTwo}
if(basicWholesaleDecimal) { mInfo.wholesaleDecimal = basicWholesaleDecimal*ratioTwo}
if(basicLowDecimal) { mInfo.lowDecimal = basicLowDecimal*ratioTwo}
}
if(otherUnitThree && i===3) {
if(basicPurchaseDecimal) { mInfo.purchaseDecimal = basicPurchaseDecimal*ratioThree}
if(basicCommodityDecimal) { mInfo.commodityDecimal = basicCommodityDecimal*ratioThree}
if(basicWholesaleDecimal) { mInfo.wholesaleDecimal = basicWholesaleDecimal*ratioThree}
if(basicLowDecimal) { mInfo.lowDecimal = basicLowDecimal*ratioThree}
}
}
}
this.meTable.dataSource = mArr
})
}
},
batchSetPrice(type) {
if(this.skuSwitch || this.model.id){
this.$refs.priceModalForm.add(type);
this.$refs.priceModalForm.disableSubmit = false;
} else {
this.$message.warning('抱歉，只有开启多属性才能进行批量操作！');
}
},
batchSetStock(type) {
this.$refs.stockModalForm.add(type);
this.$refs.stockModalForm.disableSubmit = false;
},
batchSetPriceModalFormOk(price, batchType) {
let arr = this.meTable.dataSource
if(arr.length === 0) {
this.$message.warning('请先录入条码、单位等信息！');
} else {
let meTableData = []
for (let i = 0; i < arr.length; i++) {
let meInfo = {barCode: arr[i].barCode, commodityUnit: arr[i].commodityUnit, sku: arr[i].sku,
purchaseDecimal: arr[i].purchaseDecimal, commodityDecimal: arr[i].commodityDecimal,
wholesaleDecimal: arr[i].wholesaleDecimal, lowDecimal: arr[i].lowDecimal}
if(batchType === 'purchase') {
meInfo.purchaseDecimal = price-0
} else if(batchType === 'commodity') {
meInfo.commodityDecimal = price-0
} else if(batchType === 'wholesale') {
meInfo.wholesaleDecimal = price-0
} else if(batchType === 'low') {
meInfo.lowDecimal = price-0
}
if(arr[i].id) {
meInfo.id = arr[i].id
}
meTableData.push(meInfo)
}
this.meTable.dataSource = meTableData
}
},
batchSetStockModalFormOk(stock, batchType) {
let arr = this.depotTable.dataSource
let depotTableData = []
for (let i = 0; i < arr.length; i++) {
let depotInfo = {name: arr[i].name, initStock: arr[i].initStock,
lowSafeStock: arr[i].lowSafeStock, highSafeStock: arr[i].highSafeStock}
if (batchType === 'initStock') {
depotInfo.initStock = stock - 0
} else if (batchType === 'lowSafeStock') {
depotInfo.lowSafeStock = stock - 0
} else if (batchType === 'highSafeStock') {
depotInfo.highSafeStock = stock - 0
}
if (arr[i].id) {
depotInfo.id = arr[i].id
}
depotTableData.push(depotInfo)
}
this.depotTable.dataSource = depotTableData
},
initMaterialAttribute() {
getAllMaterialAttribute({}).then((res)=>{
if(res && res.code===200) {
if(res.data) {
this.sku.manyColor = res.data.manyColorName;
this.sku.manySize = res.data.manySizeName;
this.sku.other1 = res.data.other1Name;
this.sku.other2 = res.data.other2Name;
this.sku.other3 = res.data.other3Name;
this.sku.manyColorList = res.data.manyColorValue;
this.sku.manySizeList = res.data.manySizeValue;
this.sku.other1List = res.data.other1Value;
this.sku.other2List = res.data.other2Value;
this.sku.other3List = res.data.other3Value;
}
}
});
},
loadParseMaterialProperty() {
let mpList = Vue.ls.get('materialPropertyList')
for (let i = 0; i < mpList.length; i++) {
if (mpList[i].nativeName === "制造商") {
this.mpShort.mfrs.name = mpList[i].anotherName
this.mpShort.mfrs.enabled = mpList[i].enabled
}
if (mpList[i].nativeName === "自定义1") {
this.mpShort.otherField1.name = mpList[i].anotherName
this.mpShort.otherField1.enabled = mpList[i].enabled
}
if (mpList[i].nativeName === "自定义2") {
this.mpShort.otherField2.name = mpList[i].anotherName
this.mpShort.otherField2.enabled = mpList[i].enabled
}
if (mpList[i].nativeName === "自定义3") {
this.mpShort.otherField3.name = mpList[i].anotherName
this.mpShort.otherField3.enabled = mpList[i].enabled
}
}
},
onlyUnitOnChange(e) {
this.$refs.editableMeTable.getValues((error, values) => {
let mArr = values
for (let i = 0; i < mArr.length; i++) {
let mInfo = mArr[i]
mInfo.commodityUnit = e.target.value
}
this.meTable.dataSource = mArr
})
},
manyUnitOnChange(value) {
let unitArr = this.unitList
let basicUnit = '', otherUnit = '', ratio = 1, otherUnitTwo = '', ratioTwo = 1, otherUnitThree = '', ratioThree = 1
for (let i = 0; i < unitArr.length; i++) {
if(unitArr[i].id === value) {
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
}
}
}
this.$refs.editableMeTable.getValues((error, values) => {
let mArr = values, basicPurchaseDecimal='', basicCommodityDecimal='', basicWholesaleDecimal='', basicLowDecimal=''
for (let i = 0; i < mArr.length; i++) {
let mInfo = mArr[i]
if(i===0) {
mInfo.commodityUnit = basicUnit
basicPurchaseDecimal = mInfo.purchaseDecimal
basicCommodityDecimal = mInfo.commodityDecimal
basicWholesaleDecimal = mInfo.wholesaleDecimal
basicLowDecimal = mInfo.lowDecimal
} else {
//副单位进行换算
mInfo.commodityUnit = otherUnit
if(basicPurchaseDecimal) { mInfo.purchaseDecimal = basicPurchaseDecimal*ratio}
if(basicCommodityDecimal) { mInfo.commodityDecimal = basicCommodityDecimal*ratio}
if(basicWholesaleDecimal) { mInfo.wholesaleDecimal = basicWholesaleDecimal*ratio}
if(basicLowDecimal) { mInfo.lowDecimal = basicLowDecimal*ratio}
if(otherUnitTwo && i===2) {
mInfo.commodityUnit = otherUnitTwo
if(basicPurchaseDecimal) { mInfo.purchaseDecimal = basicPurchaseDecimal*ratioTwo}
if(basicCommodityDecimal) { mInfo.commodityDecimal = basicCommodityDecimal*ratioTwo}
if(basicWholesaleDecimal) { mInfo.wholesaleDecimal = basicWholesaleDecimal*ratioTwo}
if(basicLowDecimal) { mInfo.lowDecimal = basicLowDecimal*ratioTwo}
}
if(otherUnitThree && i===3) {
mInfo.commodityUnit = otherUnitThree
if(basicPurchaseDecimal) { mInfo.purchaseDecimal = basicPurchaseDecimal*ratioThree}
if(basicCommodityDecimal) { mInfo.commodityDecimal = basicCommodityDecimal*ratioThree}
if(basicWholesaleDecimal) { mInfo.wholesaleDecimal = basicWholesaleDecimal*ratioThree}
if(basicLowDecimal) { mInfo.lowDecimal = basicLowDecimal*ratioThree}
}
}
}
this.meTable.dataSource = mArr
})
},
unitOnChange (e) {
let isChecked = e.target.checked;
if(isChecked) {
this.unitStatus = true;
this.manyUnitStatus = false;
this.unitChecked = true;
} else {
this.unitStatus = false;
this.manyUnitStatus = true;
this.unitChecked = false;
}
},
addUnit() {
this.$refs.unitModalForm.add();
this.$refs.unitModalForm.title = "新增计量单位";
this.$refs.unitModalForm.disableSubmit = false;
},
unitModalFormOk() {
this.loadUnitListData()
}
}
}
</script>
<style scoped>
.input-table {
max-width: 100%;
min-width: 1550px;
}
</style>
文章来源：https://www.toymoban.com/news/detail-602657.html
到了这里，关于＜j-editable-table 根据 下拉框值 来隐藏 列的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
