vue组件回调back使用方式

1页面info form表单

<template>
  <div class="proj-component-info">
    <a-form :form="form">
      <a-descriptions layout="vertical"
                      class="master-descriptions"
                      size="small">
        <a-descriptions-item :span="3">
          <span slot="label"
                id="jump-1">
            任务基本信息
          </span>
          <div class="modal-divider-text">
            <div class="number">01</div>
            <div class="content-title">
              <div class="title">
                基本信息
              </div>
              <div class="desc">
                BASIC INFORMATION
              </div>
            </div>
          </div>
          <div class="proj-content-item">
            <a-row :gutter="0">
              <a-col :span="12">
                <a-form-item label="任务名称">
                  <a-input placeholder="任务名称"
                           :disabled="isDetails"
                           v-decorator="['taskName', {rules: [{required: true, message: '请输入任务名称'}, {max: 13, message: '最大长度为13字符'}]}]" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="任务类型">
                  <a-select :disabled="true"
                            v-decorator="['taskType', {initialValue:'2', rules: [{required: true, message: '请选择任务类型'}]}]">
                    <a-select-option v-for="(b, index) in taskTypeArray"
                                     :key="index"
                                     :value="b.dictValue">{{ b.dictLabel }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="0">
              <a-col :span="12">
                <a-form-item label="开始时间">
                  <a-date-picker :disabled="isDetails"
                                 style="width: 100%"
                                 placeholder="请选择开始时间"
                                 v-decorator="['beginDate', {rules: [{required: true, message: '请选择开始时间'}]}]" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="结束时间">
                  <a-date-picker :disabled="isDetails"
                                 style="width: 100%"
                                 placeholder="请选择结束时间"
                                 v-decorator="['endDate', {rules: [{required: true, message: '请选择结束时间'}]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="0">
              <a-col :span="12">
                <a-form-item label="专项任务类型">
                  <a-select :disabled="isDetails"
                            allowClear
                            show-search
                            :filter-option="filterPost"
                            placeholder="专项任务类型"
                            v-decorator="['specialFlowChainId', { rules: [{required: true, message: '请选择专项任务'}]}]">
                    <a-select-option v-for="(b, index) in specialTypeArry"
                                     :key="index"
                                     :value="b.dictValue">{{ b.dictLabel }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="0">
              <a-col class="isv-col"
                     :span="24">
                <span class="isv-col-span"><span style="color:#ff5d66">* </span>客户端:</span>
                <a-transfer class="tree-transfer ant-transfer-customize-list"
                            :list-style="{ height:'500px' }"
                            :data-source="isvList"
                            show-search
                            :filter-option="filterOption"
                            :target-keys="targetKeys"
                            :render="item => item.title"
                            @change="handleChange"
                            @search="handleSearch">
                </a-transfer>
              </a-col>
            </a-row>
          </div>
        </a-descriptions-item>
      </a-descriptions>
    </a-form>
  </div>
</template>
<script>
import _ from 'lodash'
import { mapGetters } from 'vuex'
import TableSelect from '@/components/eim/TableSelect/index'
import moment from 'moment'
import { getDictArray } from '@/utils/dict'
import { noScopeList } from '@/api/system'
import { getTCoreIsvList } from '@/api/core/TCoreIsv'
export default {
  name: 'CoreInfo',
  components: {
    TableSelect
  },
  props: {
    isDetail: {
      type: Object,
      default: () => { }
    },
    labelCol: {
      type: Object,
      default: () => { }
    },
    wrapperCol: {
      type: Object,
      default: () => { }
    },
    initData: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    initData: {
      handler: function (val, oldVal) {
        this.init(_.cloneDeep(val || {}))
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      difficultyRatio: '',
      companyProjectBudget: '',
      form: this.$form.createForm(this),
      dataSource: {},
      taskTypeArray: [],
      deptTree: [],
      isvArray: [],
      specialTypeMap: {},
      specialTypeArry: [],
      targetKeys: [],
      localSelectedKeys: [],
      isvList: []
    }
  },
  filters: {
    dictFilter(data, map) {
      return map[data] && map[data].text || ''
    }
  },
  created() {
    this.getDict()
  },
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    flatten(isvArray = []) {
      const targetKeys = []
      const isvList = []
      isvArray.forEach((isv) => {
        const data = {
          key: isv.id,
          title: isv.name,
          description: isv.remark
        }
        isvList.push(data)
      })
      this.isvList = isvList
    },
    handleSearch(dir, value) {
    },
    filterOption(inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    handleChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
    init(dataSource) {
      this.dataSource = dataSource
      this.dataSource.beginDate = this.dataSource.beginDate ? moment(this.dataSource.beginDate) : ''
      this.dataSource.endDate = this.dataSource.endDate ? moment(this.dataSource.endDate) : ''
      this.targetKeys = this.dataSource.isvIds
      this.$nextTick(() => {
        this.form.setFieldsValue(_.pick(this.dataSource, 'taskName', 'taskType', 'beginDate', 'endDate', 'specialFlowChainId'))
      })
    },
    getDict() {
      getDictArray('core_special_status').then(data => {
        this.specialTypeArry = data
        const specialTypeMap = {}
        this.specialTypeArry.forEach(d => {
          specialTypeMap[d.dictValue] = { text: d.dictLabel }
        })
        this.specialTypeMap = specialTypeMap
      })
      getDictArray('core_task_type').then(data => {
        this.taskTypeArray = data
        const taskTypeMap = {}
        this.taskTypeArray.forEach(d => {
          taskTypeMap[d.dictValue] = { text: d.dictLabel }
        })
        this.taskTypeMap = taskTypeMap
      })
      getTCoreIsvList().then(res => {
        const data = res.rows
        this.isvArray = data
        this.flatten(data)
      })
      noScopeList().then(res => {
        const data = res.rows
        this.buildtree(data, this.deptTree, 0)
        this.expandedKeys = data.map(m => m.parentId)
      })
    },
    filterPost(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    buildtree(list, arr, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          var child = {
            key: item.deptId,
            value: item.deptId, // value是给modal的select用的，2者属性不一样
            title: item.deptName,
            children: [],
            disabled: item.checked === '2'
          }
          this.buildtree(list, child.children, item.deptId)
          if (child.children.length === 0) {
            delete child.children
          }
          arr.push(child)
        }
      })
    },
    handleSubmit(back) {
      const isvIds = this.targetKeys
      if (this.targetKeys.length === 0) {
        this.$message.error('请选择客户端')
        back({}, true)
      }
      this.form.validateFields((err, values) => {
        values.isvIds = isvIds
        values.beginDate = moment(values.beginDate).format('YYYY-MM-DD')
        values.endDate = moment(values.endDate).format('YYYY-MM-DD')
        if (!err) {
          back(values, false)
        } else {
          back({}, true)
        }
      })
    }
  }
}
</script>
<style lang="less">
@import '../style/component';
.isv-col {
  position: relative;
  .isv-col-span {
    display: block;
    height: 10px;
    position: absolute;
    left: 34px;
    color: #bed2ff;
    top: 10px;
  }
}
.tree-transfer {
  width: 1029px;
  margin: 0 auto;
  margin-top: 40px;
  .ant-transfer-list-header,
  .ant-transfer-list {
    border-color: rgba(29, 43, 110, 0.8);
    flex: auto;
  }
  .ant-transfer-list-header {
    background: rgba(25, 33, 80, 0.8);
    color: #fff;
  }
  .ant-transfer-list-body {
    .ant-empty-description {
      color: #fff;
    }
  }
  .ant-transfer-list-content {
    .LazyLoad {
      background: transparent !important;
    }
  }
  .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .ant-transfer-operation {
    width: 47px;
    text-align: center;
    button {
      width: 47px;
    }
  }
  .ant-transfer-list-content {
    padding-top: 10px;
    height: 412px;
    overflow-y: scroll;
    padding-bottom: 0;
  }
}
</style>

　　父组件调用使用回调back

<template>
  <a-modal v-if="isDetails"
           title="任务信息"
           :style="{ top: '1px', paddingBottom: '0px' }"
           :width="1200"
           v-model="visible"
           :confirmLoading="confirmLoading"
           :footer="null">
    <venus-scroll gutter-of-side="0px"
                  gutter-of-ends="0px"
                  :only-show-bar-on-scroll="false"
                  size="4px">
      <core-detail :initData="dataSource"></core-detail>
    </venus-scroll>
  </a-modal>
  <a-modal v-else
           title="任务信息"
           style="top: 1px;"
           v-model="visible"
           :width="1200"
           :bodyStyle="{ height: '720px',padding: 0 }"
           :confirmLoading="confirmLoading"
           @ok="handleSubmit">
    <venus-scroll gutter-of-side="0px"
                  gutter-of-ends="0px"
                  :only-show-bar-on-scroll="false"
                  size="4px">
      <core-info :initData="dataSource"
                 ref="coreInfo"></core-info>
    </venus-scroll>
  </a-modal>
</template>
<script>
import VenusScroll from '@/components/eim/Scroll'
import { saveTCoreTaskMain, getTCoreTaskMain } from '@/api/core/TCoreTaskMain'
import pick from 'lodash.pick'
import CoreInfo from '@/components/OA/core/component/edit/coreInfo.vue'
import CoreDetail from '@/components/OA/core/component/detail/coreDetail.vue'

export default {
  name: 'TCoreTaskMainModal',
  props: {},
  components: {
    CoreInfo,
    CoreDetail,
    VenusScroll
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      taskTypeArray: [],
      deptTree: [],
      isvArray: [],
      isDetails: false,
      specialTypeMap: {},
      specialTypeArry: [],
      dataSource: {},
      isAdd: false
    }
  },
  beforeCreate() {
  },
  created() {
  },
  methods: {
    details(record) {
      this.isDetails = true
      this.$nextTick(getTCoreTaskMain(record.id).then(res => {
        record = res
        this.dataSource = record
        this.visible = true
      }))
    },
    show(res) {
      this.isDetails = false
      this.visible = true
      this.dataSource = Object.assign(res, { id: 0 })
    },
    onClose() {
      this.visible = false
    },
    edit(record) {
      this.isDetails = false
      this.$nextTick(getTCoreTaskMain(record.id).then(res => {
        this.visible = true
        this.dataSource = res
      }))
    },
    handleSubmit(e) {
      e.preventDefault()
      const self = this
      this.$refs.coreInfo.handleSubmit((back) => {
        if (JSON.stringify(back) !== '{}' && back.isvIds.length !== 0) {
          back.id = self.dataSource.id
          back.procDefId = self.dataSource.procDefId
          back.procName = self.dataSource.procName
          back.procDefKey = self.dataSource.procDefKey
          saveTCoreTaskMain(back).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style lang="less">
.detail-color {
  color: #fff;
  margin-left: 2px;
}
</style>