antdeginvue 布局部分

页面效果展示

利用Slot 插入自定义控件

<div>
              <a-button type="primary" icon="plus" @click="newSubData">新增</a-button>
              <a-table
                :columns="subColumns"
                :dataSource="subData"
                :pagination="false"
                :loading="subDataLoading"
              >
                <template slot="linNo" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='行号' :value="text"  />
                </template>
                <template slot="jumpSlot" slot-scope="text, record, index, column">
                  <a-input-search placeholder='请输入子件料号' :value="text" @search='handleEditInfo()' />
                </template>
                <template slot="name" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='品名' :value="text"/>
                </template>
                <template slot="standard" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='规格' :value="text"/>
                </template>
                <template slot="color" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='颜色' :value="text"/>
                </template>
                <template slot="unit" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='单位' :value="text"/>
                </template>
                <template slot="number" slot-scope="text, record, index, column">
                  <a-input  placeholder='请输入子件数量'   @change="e => handleChange(e.target.value, record.key)"/>
                </template>
                <template slot="action" slot-scope="text, record">
                  <a-popconfirm title="是否要删除此行？" @confirm="subDataRemove(record.key,record)">
                    <a>删除</a>
                  </a-popconfirm>
                </template>
              </a-table>
            </div>
            <material-search-modal ref='modalBomForm' v-on:getChildBomSelected='getChildBomSelected'></material-search-modal>

编写Columns，给表格绑定参数

columns部分

 subColumns:[
        {
          title: '行号',
          key: 'linNo',
          dataIndex: 'linNo',
          scopedSlots: { customRender: 'linNo' },
          width: 70,
        },
        {
          title: '料号',
          key: 'barCode',
          dataIndex: 'barCode',
          scopedSlots: { customRender: 'jumpSlot' }
        },
        {
          title: '品名',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '规格',
          key: 'standard',
          dataIndex: 'standard',
          scopedSlots: { customRender: 'standard' }
        },
        {
          title: '颜色',
          key: 'color',
          dataIndex: 'color',
          scopedSlots: { customRender: 'color' }
        },
        {
          title: '单位',
          key: 'unit',
          dataIndex: 'unit',
          scopedSlots: { customRender: 'unit' },
          width: 90
        },
        {
          title: '数量',
          key: 'number',
          dataIndex: 'number',
          scopedSlots: { customRender: 'number' },
          width: 90
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '100px',
          scopedSlots: { customRender: 'action' }
        }
      ],

表格行新增

<a-button type="primary" icon="plus" @click="newSubData">新增</a-button>

直接在数组中新增空数据，后续数据由弹窗回掉产生，当然这边也可自定义新增数据内容。

 /* 新增子件行 */
    newSubData () {
      const length = this.subData.length
      this.subData.push({
        key: length === 0 ? '0' : this.subData[length - 1].key === undefined
          ? length.toString() : (parseInt(this.subData[length - 1].key) + 1).toString(),
        barCode: '',
        name: '',
        standard: '',
        color:'',
        unit:'',
        number:'',
      })
    },

表格行删除

    <template slot="action" slot-scope="text, record">
                  <a-popconfirm title="是否要删除此行？" @confirm="subDataRemove(record.key,record)">
                    <a>删除</a>
                  </a-popconfirm>
                </template>

跟据对应的key，过滤出subData中不需要的值即可。

  //删除对应行
    subDataRemove (key, record) {
      this.subData = this.subData.filter(item => item.key !== key)
    },

弹窗方法部分

<template slot="jumpSlot" slot-scope="text, record, index, column">
                  <a-input-search placeholder='请输入子件料号' :value="text" @search='handleEditInfo()' />
                </template>

 handleEditInfo() {
      this.$refs.modalBomForm.addSelect(this.subData.length-1);
      this.$refs.modalBomForm.title = "新增";
      this.$refs.modalBomForm.disableSubmit = false;
    },

通过this.$refs.modalBomForm调用子页面弹出

 <material-search-modal ref='modalBomForm' v-on:getChildBomSelected='getChildBomSelected'></material-search-modal>

表格页面编辑内容保存

table 行编辑数值保存到subData数组
handleChange方法直接过滤出变动的行，修改数组中的对应参数值即可。

// 子数据保存
    handleChange (value, key) {
      const newData = [...this.subData]
      //过滤出单条数组修改其值
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target.number = value
        this.subData = newData
      }
    },

完整代码

弹窗部分代码未放出，新增、删除、编辑、自定义都在其中。

<template>
  <j-modal
    :title='title'
    :width='width'
    :visible='visible'
    switchFullscreen
    @ok='handleOk'
    @cancel='handleCancel'
    :style='modalStyle'
    cancelText='关闭'>
    <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='基本' forceRender>
            <a-row class='form-row' :gutter='24'>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='母件料号'>
                  <a-input-search
                    v-model='selectedData.barCode'
                    placeholder='请输入母件料号'
                    @search='handleAdd' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='母件规格'>
                  <a-input placeholder='母件规格' readOnly v-model='selectedData.standard' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='颜色'>
                  <a-input placeholder='母件颜色' v-model='selectedData.color' readOnly />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='生产单位'>
                  <a-input placeholder='生产单位' v-model='selectedData.unit' readOnly />
                </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='生效时间'>
                  <a-date-picker v-model='activeDate' style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='失效时间'>
                  <a-date-picker v-model='inActiveDate' style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='创建时间'>
                  <a-date-picker v-model='createDate' style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='版本号'>
                  <a-input v-model='version'/>
                </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='是否生效'>
                <a-switch size="small" v-model:checked="isChecked" />
                </a-form-item>
              </a-col>
            </a-row>
            <div>
              <a-button type="primary" icon="plus" @click="newSubData">新增</a-button>
              <a-table
                :columns="subColumns"
                :dataSource="subData"
                :pagination="false"
                :loading="subDataLoading"
              >
                <template slot="linNo" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='行号' :value="text"  />
                </template>
                <template slot="jumpSlot" slot-scope="text, record, index, column">
                  <a-input-search placeholder='请输入子件料号' :value="text" @search='handleEditInfo()' />
                </template>
                <template slot="name" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='品名' :value="text"/>
                </template>
                <template slot="standard" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='规格' :value="text"/>
                </template>
                <template slot="color" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='颜色' :value="text"/>
                </template>
                <template slot="unit" slot-scope="text, record, index, column">
                  <a-input read-only placeholder='单位' :value="text"/>
                </template>
                <template slot="number" slot-scope="text, record, index, column">
                  <a-input  placeholder='请输入子件数量'   @change="e => handleChange(e.target.value, record.key)"/>
                </template>
                <template slot="action" slot-scope="text, record">
                  <a-popconfirm title="是否要删除此行？" @confirm="subDataRemove(record.key,record)">
                    <a>删除</a>
                  </a-popconfirm>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key='2' tab='备注' force-render>
            <TextArea
              showCount
              maxLength={100}
              v-model='remarks'
              style='width:100%;height: 250px;resize: none '
              placeholder="请输入BOM的相关说明"
              />
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
    <material-search-modal ref='modalForm' v-on:getChildSelectMsg='getChildSelectMsg'></material-search-modal>
    <material-search-modal ref='modalBomForm' v-on:getChildBomSelected='getChildBomSelected'></material-search-modal>
  </j-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import MaterialSearchModal from './MaterialSearchModal'
import moment from 'moment'
import { postAction } from '../../../api/manage'

export default {
  name: 'BomAddModal',
  mixins: [JeecgListMixin],
  components: {
    MaterialSearchModal
  },
  data() {
    return {
      //关闭启动Mixin混用created
      disableMixinCreated: true,
      title: '操作',
      width: '1300px',
      visible: false,
      isReadOnly: false,
      modalStyle: '',
      confirmLoading: false,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      selectedData: {
        barCode: '',
        name: '',
        standard: '',
        color: '',
        unit: ''
      },
      activeDate: '',
      inActiveDate: '',
      createDate: '',
      version: '',
      remarks:'',
      focus,
      isChecked:false,
      subColumns:[
        {
          title: '行号',
          key: 'linNo',
          dataIndex: 'linNo',
          scopedSlots: { customRender: 'linNo' },
          width: 70,
        },
        {
          title: '料号',
          key: 'barCode',
          dataIndex: 'barCode',
          scopedSlots: { customRender: 'jumpSlot' }
        },
        {
          title: '品名',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '规格',
          key: 'standard',
          dataIndex: 'standard',
          scopedSlots: { customRender: 'standard' }
        },
        {
          title: '颜色',
          key: 'color',
          dataIndex: 'color',
          scopedSlots: { customRender: 'color' }
        },
        {
          title: '单位',
          key: 'unit',
          dataIndex: 'unit',
          scopedSlots: { customRender: 'unit' },
          width: 90
        },
        {
          title: '数量',
          key: 'number',
          dataIndex: 'number',
          scopedSlots: { customRender: 'number' },
          width: 90
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '100px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      subDataLoading: false,
      deviceStyleParam: '',
      deviceStyleParamData: [],
      subData: [],
    }
  },
    created() {
    let realScreenWidth = window.screen.width
    this.width = realScreenWidth < 1500 ? '1200px' : '1400px'
    this.activeDate = moment(new Date().toLocaleDateString(), 'YYYY-MM-DD')
    this.inActiveDate = moment('9999-12-31', 'YYYY-MM-DD')
    this.createDate = moment(new Date().toLocaleDateString(), 'YYYY-MM-DD')
    this.count = this.dataSource.value.length + 1;
  },
  methods: {
    add() {
      this.visible = true
    },
    handleOk() {
      // //提交数据存储数据库
      let formData = this.classifyFormData()
      // console.log(formData,formData)
      //上传BOM信息
      postAction("/bom/addBom",formData).then(resp=>{
         if (resp){
           //处理返回值
         }
      });
      this.clearData()
    },
    handleCancel() {
      this.clearData()
      this.close()
    },
    //整理上传数据
    classifyFormData(){
      let  bomMaster = [];
      bomMaster.push("barCode", this.selectedData.barCode);
      bomMaster.push("effectiveDate", this.activeDate);
      bomMaster.push("disabledDate", this.inActiveDate);
      bomMaster.push("isEffective",this.isChecked);
      bomMaster.push("version",this.version);
      bomMaster.push("remarks",this.remarks);
      bomMaster.push("createDate",this.createDate);
      let bomChild = this.subData
      return {
        parent: JSON.stringify(bomMaster),
        child: JSON.stringify(bomChild),
      }
    },
    //清除值
    clearData(){
      this.subData = [];
      this.selectedData.barCode=''
      this.selectedData.standard=''
      this.selectedData.name = ''
      this.selectedData.color = ''
      this.selectedData.unit = ''
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    getChildSelectMsg(data) {
      //子控件返回值赋值父控件
      this.selectedData.barCode = data[0].barCode
      this.selectedData.standard = data[0].standard
      this.selectedData.name = data[0].name
      this.selectedData.color = data[0].color
      this.selectedData.unit = data[0].unit
    },
    //弹窗回调赋值
    getChildBomSelected(data){
      this.$set(this.subData[data[0].key], 'barCode', data[0].barCode)
      this.$set(this.subData[data[0].key], 'name', data[0].name)
      this.$set(this.subData[data[0].key], 'standard', data[0].standard)
      this.$set(this.subData[data[0].key], 'color', data[0].color)
      this.$set(this.subData[data[0].key], 'unit', data[0].unit)
      this.$set(this.subData[data[0].key], 'linNo', data[0].key)
      this.$set(this.subData[data[0].key], 'number', "")
    },
    //删除对应行
    subDataRemove (key, record) {
      this.subData = this.subData.filter(item => item.key !== key)
    },
    /* 新增子件行 */
    newSubData () {
      const length = this.subData.length
      this.subData.push({
        key: length === 0 ? '0' : this.subData[length - 1].key === undefined
          ? length.toString() : (parseInt(this.subData[length - 1].key) + 1).toString(),
        barCode: '',
        name: '',
        standard: '',
        color:'',
        unit:'',
        number:'',
      })
    },
    // 子数据保存
    handleChange (value, key) {
      const newData = [...this.subData]
      //过滤出单条数组修改其值
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target.number = value
        this.subData = newData
      }
    },
    handleEditInfo() {
      this.$refs.modalBomForm.addSelect(this.subData.length-1);
      this.$refs.modalBomForm.title = "新增";
      this.$refs.modalBomForm.disableSubmit = false;
    },
  }
}
</script>
<style scoped>
</style>