1500字范文 > Ant Design Vue 下拉框输入框可以输入可以查询

Ant Design Vue 下拉框输入框可以输入可以查询

时间：2020-03-11 02:00:40

Ant Design Vue 下拉框可以输入可以查询直接上代码

效果图（输入内容查询后端返回下拉的值，如何查询后端是空的直接把输入的内容赋值给输入框）

在这里插入图片描述

<template><div><a-select placeholder="姓名"v-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearch"style="width: 200px"><a-select-option v-for="option in dropdownOptions" :key="option">{{option }}</a-select-option></a-select></div></template><script>import {getAction, postAction } from '@/api/manage';export default {data() {return {dropdownOptions: [],inputValue: '', // 添加一个用于保存输入内容的变量};},methods: {onSearch(value) {// 如果输入值为空，则清空下拉选项if (!value) {this.dropdownOptions = [];return;}this.dropdownOptions = [];// 重置输入框的值为空// this.inputValue = '';this.inputValue = value; // 更新输入框的值为输入内容// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', {name: value, type: 'name',standard: '',model:'' }).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptions = res.data.rows[0];} else {this.dropdownOptions = [];}} else {this.dropdownOptions = [];}});},},};</script>

后端代码

/** ycw* 查询商品名字返回10条名字* @param name* @param type* @param request* @return* @throws Exception*/@GetMapping(value = "/getNameOter")@ApiOperation(value = "单据明细列表")public BaseResponseInfo getNameOter(@RequestParam("name") String name,@RequestParam("type") String type,HttpServletRequest request) throws Exception {JSONObject outer = new JSONObject();BaseResponseInfo res = new BaseResponseInfo();JSONArray dataArray = new JSONArray();List<String> result = new ArrayList<>();try {Material material1 = new Material();if (type.equals("name")) {material1.setName(name);List<Material> dataList = materialMapper.selectByOther(material1);if (dataList != null && dataList.size() > 0) {for (Material material : dataList) {result.add(material.getName());}}else{//result.add(name);}}dataArray.add(result);outer.put("rows", dataArray);res.code = 200;res.data = outer;} catch (Exception e) {e.printStackTrace();res.code = 500;res.data = "获取数据失败";}return res;}

放入实际代码里面的内容多了一个赋值的 this.form.setFieldsValue({‘name’: value})

<a-col :md="6" :sm="24"><a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称" data-step="1" data-title="名称" data-intro="名称必填，可以重复"><a-select placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]"v-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearch"style="width: 200px"><a-select-option v-for="option in dropdownOptions" :key="option">{{option }}</a-select-option></a-select></a-form-item></a-col>

onSearch(value) {// 如果输入值为空，则清空下拉选项this.dropdownOptions = [];// 重置输入框的值为空// this.inputValue = '';this.inputValue = value; // 更新输入框的值为输入内容this.form.setFieldsValue({'name': value})// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', {name: value, type: 'name' }).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptions = res.data.rows[0];} else {this.dropdownOptions = [];}} else {this.dropdownOptions = [];}});

<template><j-modal:title="title":width="1300":visible="visible":confirmLoading="confirmLoading"v-bind:prefixNo="prefixNo"switchHelpswitchFullscreen@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="[ 'barCodes', validatorRules.barCodes]" :readOnly="true"/></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-select placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]"v-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearch"style="width: 200px"><a-select-option v-for="option in dropdownOptionsName" :key="option">{{option }}</a-select-option></a-select></a-form-item></a-col><a-col :md="6" :sm="24"><a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规格型号1" data-step="2" data-title="规格型号1" data-intro="规格型号1不必填，比如：10克"><a-select placeholder="请输入规格型号1" v-decorator.trim="[ 'standard' ]"v-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearchStandard"style="width: 200px"><a-select-option v-for="option in dropdownOptionsStandard" :key="option">{{option }}</a-select-option></a-select></a-form-item></a-col><a-col :md="6" :sm="24"><a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规格型号2" data-step="3" data-title="规格型号2" data-intro="型号是比规格更小的属性，比如：RX-01"><a-select placeholder="请输入规格型号2" v-decorator.trim="[ 'model' ]"v-model.lazy="inputValue"show-searchdefault-active-first-option@search="onSearchModel"style="width: 200px"><a-select-option v-for="option in dropdownOptionsModel" :key="option">{{option }}</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="颜色" 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="{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="{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-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-tableref="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"></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-tableref="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 {dropdownOptionsModel: [],dropdownOptionsName: [],dropdownOptionsStandard: [],inputValue: '', // 添加一个用于保存输入内容的变量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}'},{title: '不良库存', key: 'badcurrentnumber', 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: {onSearchModel(value) {debugger// 如果输入值为空，则清空下拉选项this.dropdownOptionsModel = [];// 重置输入框的值为空// this.inputValue = '';this.inputValue = value; // 更新输入框的值为输入内容this.form.setFieldsValue({'model': value})// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', {standard: '', type: 'model',name: '',model:value }).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptionsModel = res.data.rows[0];} else {this.dropdownOptionsModel = [];}} else {this.dropdownOptionsModel = [];}});},onSearchStandard(value) {debugger// 如果输入值为空，则清空下拉选项this.dropdownOptionsStandard = [];// 重置输入框的值为空// this.inputValue = '';this.inputValue = value; // 更新输入框的值为输入内容this.form.setFieldsValue({'standard': value})// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', {standard: value, type: 'standard',name: '' ,model:''}).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptionsStandard = res.data.rows[0];} else {this.dropdownOptionsStandard = [];}} else {this.dropdownOptionsStandard = [];}});},onSearch(value) {// 如果输入值为空，则清空下拉选项// if (!value) {this.dropdownOptionsName = [];// return;// }// 重置输入框的值为空// this.inputValue = '';this.inputValue = value; // 更新输入框的值为输入内容this.form.setFieldsValue({'name': value})// 发起异步请求获取模糊匹配的下拉选项getAction('/material/getNameOter', {name: value, type: 'name',standard: '',model:'' }).then((res) => {if (res && res.code === 200) {if (res.data.rows && res.data.rows.length > 0) {this.dropdownOptionsName = res.data.rows[0];} else {this.dropdownOptionsName = [];}} else {this.dropdownOptionsName = [];}});},handleCategoryChange(value) {debuggerif (value == '22' || value == '24') {// 隐藏销售价表单项this.meTable.columns[3].type = FormTypes.inputthis.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 () {debuggerthis.meTable.columns[4].type = FormTypes.inputthis.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 = falsethis.barCodeSwitch = falsethis.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 = falsethis.unitStatus = falsethis.manyUnitStatus = true} else {this.unitChecked = truethis.unitStatus = truethis.manyUnitStatus = false}let params = {materialId: this.model.id }//编辑商品的时候多属性字段可以修改this.meTable.columns[2].readonly = falsethis.requestMeTableData(this.url.materialsExtendList, params, this.meTable)this.requestDepotTableData(this.url.depotWithStock, {mId: this.model.id }, this.depotTable)} else {this.switchDisabled = falsethis.meTable.columns[2].readonly = truethis.requestDepotTableData(this.url.depotWithStock, {mId: 0 }, this.depotTable)}},/** 查询条码tab的数据 */requestMeTableData(url, params, tab) {tab.loading = truegetAction(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 = truegetAction(url, params).then(res => {tab.dataSource = res.data || []}).finally(() => {tab.loading = false})},close () {this.$emit('close');this.visible = falsethis.unitStatus = falsethis.manyUnitStatus = truethis.unitChecked = falsethis.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) {// 如果有未通过表单验证的子表，就自动跳转到它所在的tabthis.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) {debugger// if(formData.id === undefined) {// formData.id = ''// }// getAction('/material/getNameModelStandard', {// standard: this.model.standard,// name: this.model.name,// model: this.model.model// }).then((res) => {// if (res && res.code === 200) {//// console.log(res.data.rows.id,"ididiididiidd");//formData.id = res.data.rows.id//formData.barCodes = res.data.rows.barCodes// }// });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.unitListfor(let i=0; i < unitArr.length; i++) {if(unitArr[i].id == formData.unitId) {basicUnit = unitArr[i].basicUnitotherUnit = unitArr[i].otherUnitif(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 = ''}debuggerformData.meDeleteIdList = this.meDeleteIdListdebugger//接口调用let url = this.url.add, method = 'post'if (this.model.id) {url = this.url.editmethod = 'put'}const that = this;this.confirmLoading = truehttpAction(url, formData, method).then((res) => {if(res.code === 200){that.$emit('ok');that.confirmLoading = falsethat.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(){debuggerlet 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 = checkedif (checked) {this.meTable.columns[2].type = FormTypes.inputthis.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-0for (let i = 0; i < barCodeSku.length; i++) {let currentBarCode = maxBarCode + i + 1meTableData.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 = 0if(this.form.getFieldValue(field)) {if(this.form.getFieldValue(field).length>0) {num = 1}}return num},onAdded(event) {debuggerconst {row, target } = eventlet 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 - 0this.maxBarCodeInfo = this.maxBarCodeInfo + 1target.setValues([{rowKey: row.id, values: {barCode: this.maxBarCodeInfo, commodityUnit: unit?unit:''}}])this.form.setFieldsValue({'barCodes': this.maxBarCodeInfo})}})} else {this.maxBarCodeInfo = this.maxBarCodeInfo + 1target.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 } = eventswitch(column.key) {case "purchaseDecimal":case "commodityDecimal":case "wholesaleDecimal":case "lowDecimal":this.changeDecimalByValue(row)break;}},//修改商品明细中的价格触发计算changeDecimalByValue(row) {let unitArr = this.unitListlet basicUnit = '', otherUnit = '', ratio = 1, otherUnitTwo = '', ratioTwo = 1, otherUnitThree = '', ratioThree = 1for (let i = 0; i < unitArr.length; i++) {if(unitArr[i].id === this.form.getFieldValue('unitId')) {basicUnit = unitArr[i].basicUnitotherUnit = unitArr[i].otherUnitratio = unitArr[i].ratioif(unitArr[i].otherUnitTwo) {otherUnitTwo = unitArr[i].otherUnitTworatioTwo = unitArr[i].ratioTwo}if(unitArr[i].otherUnitThree) {otherUnitThree = unitArr[i].otherUnitThreeratioThree = unitArr[i].ratioThree}}}if(modityUnit === 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.purchaseDecimalbasicCommodityDecimal = modityDecimalbasicWholesaleDecimal = mInfo.wholesaleDecimalbasicLowDecimal = mInfo.lowDecimal} else {//副单位进行换算if(basicPurchaseDecimal) {mInfo.purchaseDecimal = basicPurchaseDecimal*ratio}if(basicCommodityDecimal) {modityDecimal = 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) {modityDecimal = 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) {modityDecimal = 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.dataSourceif(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') {modityDecimal = 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) {debuggerlet arr = this.depotTable.dataSourcelet 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}else if (batchType === 'badcurrentnumber') {depotInfo.badcurrentnumber = 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].anotherNamethis.mpShort.mfrs.enabled = mpList[i].enabled}if (mpList[i].nativeName === "自定义1") {this.mpShort.otherField1.name = mpList[i].anotherNamethis.mpShort.otherField1.enabled = mpList[i].enabled}if (mpList[i].nativeName === "自定义2") {this.mpShort.otherField2.name = mpList[i].anotherNamethis.mpShort.otherField2.enabled = mpList[i].enabled}if (mpList[i].nativeName === "自定义3") {this.mpShort.otherField3.name = mpList[i].anotherNamethis.mpShort.otherField3.enabled = mpList[i].enabled}}},onlyUnitOnChange(e) {this.$refs.editableMeTable.getValues((error, values) => {let mArr = valuesfor (let i = 0; i < mArr.length; i++) {let mInfo = mArr[i]modityUnit = e.target.value}this.meTable.dataSource = mArr})},manyUnitOnChange(value) {let unitArr = this.unitListlet basicUnit = '', otherUnit = '', ratio = 1, otherUnitTwo = '', ratioTwo = 1, otherUnitThree = '', ratioThree = 1for (let i = 0; i < unitArr.length; i++) {if(unitArr[i].id === value) {basicUnit = unitArr[i].basicUnitotherUnit = unitArr[i].otherUnitratio = unitArr[i].ratioif(unitArr[i].otherUnitTwo) {otherUnitTwo = unitArr[i].otherUnitTworatioTwo = unitArr[i].ratioTwo}if(unitArr[i].otherUnitThree) {otherUnitThree = unitArr[i].otherUnitThreeratioThree = 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) {modityUnit = basicUnitbasicPurchaseDecimal = mInfo.purchaseDecimalbasicCommodityDecimal = modityDecimalbasicWholesaleDecimal = mInfo.wholesaleDecimalbasicLowDecimal = mInfo.lowDecimal} else {//副单位进行换算modityUnit = otherUnitif(basicPurchaseDecimal) {mInfo.purchaseDecimal = basicPurchaseDecimal*ratio}if(basicCommodityDecimal) {modityDecimal = basicCommodityDecimal*ratio}if(basicWholesaleDecimal) {mInfo.wholesaleDecimal = basicWholesaleDecimal*ratio}if(basicLowDecimal) {mInfo.lowDecimal = basicLowDecimal*ratio}if(otherUnitTwo && i===2) {modityUnit = otherUnitTwoif(basicPurchaseDecimal) {mInfo.purchaseDecimal = basicPurchaseDecimal*ratioTwo}if(basicCommodityDecimal) {modityDecimal = basicCommodityDecimal*ratioTwo}if(basicWholesaleDecimal) {mInfo.wholesaleDecimal = basicWholesaleDecimal*ratioTwo}if(basicLowDecimal) {mInfo.lowDecimal = basicLowDecimal*ratioTwo}}if(otherUnitThree && i===3) {modityUnit = otherUnitThreeif(basicPurchaseDecimal) {mInfo.purchaseDecimal = basicPurchaseDecimal*ratioThree}if(basicCommodityDecimal) {modityDecimal = 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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。