cmc-web/webs/ams-web/src/views/module/render/TableAddDialog.vue

<template>
  <el-dialog :title="addData.id ? '编辑数据' : '新增数据'" :close-on-click-modal="false" :visible.sync="dialog.visible" width="900px" append-to-body>
    <RenderItem v-for="item in itemList" :key="item.id" :item="item" :add-data="dialog.record"></RenderItem>
    <div slot="footer" class="dialog-footer">
      <el-button type="ghost" @click.native="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click.native="addSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, Ref, toRefs } from 'vue'
import { Message } from 'element-ui'
import RenderItem from './RenderItem.vue'

export default defineComponent({
  components: { RenderItem },
  props: {
    dialog: {
      type: Object,
    },
    itemList: {
      type: Array,
    },
  },
  setup(props: any, { emit }: any) {
    // 添加
    const { record } = props.dialog
    const state = reactive({
      addData: { ...record },
    })
    const addFormRef = ref(null)
    function addSubmit() {
      emit('setData', props.dialog.record)
    }
    return {
      ...toRefs(state),
      addFormRef,
      addSubmit,
    }
  },
})
</script>