vue3新增编辑同一组件

AddModule.ts部分

在这里插入代码片
import { ref, defineComponent, reactive, toRefs, computed } from 'vue';

export default defineComponent({
  props: {
    /**
     * 编辑时表格传过来的数据
     */
    currentBond: {
      type: Object,
    },
    /**
     * 编辑模式下传入
     */
    bondId: {
      type: Number,
      default: null,
    },
  },
  setup(props, { emit }) {
    const { currentBond, bondId } = toRefs(props);
    console.log(currentBond.value, bondId.value);
    const currentBondData: any = currentBond;

    const visible = ref<boolean>(true);

    const showModal = () => {
      visible.value = true;
      resetFormData();
    };
    // 置空
    const resetFormData = () => {
      addForm.rate = '';
      addForm.application = '';
      addForm.value = '';
      console.log('强制置空之后的formDictData==', addForm);
    };

    const log = () => {
      console.log(addForm.application);
    };

    const handleOk = (e: MouseEvent) => {
      console.log(e);
      visible.value = false;
      emit('close');
    };
    const handleCancel = (e: MouseEvent) => {
      visible.value = false;
      emit('close');
    };
    const nameOption = reactive(['承销费', '托管费', '其他费']);
    const plainOptions = reactive(['发行结果', '中标分配', '其他']);
    const options = reactive([
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange' },
    ]);
    const value = ref('');

    const addForm = reactive({ name: '', rate: '', application: '', value });
    if (bondId.value) {
      // 如果 是编辑
      addForm.rate = currentBondData.value.rate;
      addForm.application = currentBondData.value.applicationScene;
      addForm.value = currentBondData.value.remark;
      addForm.name = currentBondData.value.expenseName;
    }
    // function log() {
    //   console.log(addForm.application);
    // }
    return {
      visible,
      showModal,
      handleOk,
      handleCancel,
      options,
      plainOptions,
      addForm,
      nameOption,
      value1: [],
      rules: {
        funcName: [{ required: true, message: '', trigger: 'blur' }],
        rate: [{ required: true, type: 'number', message: '', trigger: 'change' }],
      },
    };
  },
});

AddModule.vue部分

<template>
  <div>
    <!-- <a-button type="primary" @click="showModal">新增</a-button> -->
    <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk" @cancel="handleCancel">
      <a-form :model="addForm" ref="addFormRef" :rules="rules">
        <a-form-item label="费率名称" name="typeKey">
          <a-select showSearch class="selectStyle" placeholder="请选择" v-model:value="addForm.name">
            <a-select-option v-for="item in nameOption" :key="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="费率" name="dictKey">
          <a-input v-model:value="addForm.rate" placeholder="请选择"></a-input>
        </a-form-item>
        <a-form-item label="应用场景" name="dictKey">
          <a-checkbox-group v-model:value="addForm.application" name="checkboxgroup" :options="plainOptions" />
        </a-form-item>
        <a-form-item label="备注" name="dictKey">
          <a-textarea v-model:value="addForm.value" placeholder="" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script src="./AddModule.ts" lang="ts"></script>
<style lang="less" scoped></style>

TreeModule.ts部分(表格数据)

import { defineComponent, ref, reactive, onMounted, toRefs, computed } from 'vue';
import VGrid from '@/components/VGrid/VGrid';
import { messageError, messageWarn, modalConfirmBoolean } from '@/utils/antdUtils';
import { rate } from '@/api/generate/rate';
import AddModule from '../AddModule/AddModule';

export default defineComponent({
  // 查询传值
  props: {
    selectRate: {
      type: String,
      default: '',
    },
  },
  components: { VGrid, AddModule },
  // 监听查询
  watch: {
    selectRate(newVal) {
      this.queryTableList();
    },
  },
  setup(props) {
    //表格数据
    const gridOptions = reactive<any>({
      id: 'rateModule',
      border: true,
      showOverflow: true,
      loading: false,
      columns: [
        // { type: 'checkbox', width: 40 },
        { field: 'applicationScene', title: '应用场景', width: 80 },
        { field: 'expenseName', title: '费用名称' },
        { field: 'rate', title: '费率' },
        { field: 'amount', title: '金额' },
        { field: 'remark', title: '备注' },
        { field: 'operator', title: '操作人' },
        { field: 'operationName', title: '操作时间' },
        { title: '操作', slots: { default: 'operations' }, width: 350, fixed: 'right' },
      ],
      data: <any>[],
    });
    // 新增/编辑债券基础信息模块
    const currentBond = ref({});
    const bondInfoVisiable = ref(false);
    const isReadonly = ref(false);
    const handleAddBaseInfo = (row: any) => {
      bondInfoVisiable.value = true;
      currentBond.value = row;
      isReadonly.value = false;
      console.log(456, currentBond.value);
    };
    // 删除
    const handleDeleteBond = async () => {
      const isDel = await modalConfirmBoolean('提示', '您确定要删除吗？');
      if (isDel) {
        // 删除逻辑
        messageWarn('Demo版本暂不支持该操作');
      }
    };
    //请求表格数据
    const queryTableList = async (): Promise<void> => {
      try {
        const res: any = await rate();
        // console.log(res.data.data, '--------------------------');
        // 查询数据过滤
        gridOptions.data = res.data.data.filter((item: any) => {
          return props.selectRate == '' || item.expenseName == props.selectRate;
        });
      } catch (error) {
        messageError(error);
      }
    };

    onMounted(() => {
      queryTableList();
    });

    return {
      queryTableList,
      bondInfoVisiable,
      currentBond,
      isReadonly,
      handleAddBaseInfo,
      handleDeleteBond,
      AddModule,
      gridOptions,
    };
  },
});

TreeModule.vue部分

<template>
  <!-- 表体 -->
  <div class="main f-l-b">
    <v-grid ref="xGrid" :vGridOptions="gridOptions" :total="10" style="height: calc(100% - 44px)">
      <template #operations="{ row }">
        <div class="operate-button">
          <a-button type="primary" class="topBtnStyle" size="small" @click="handleAddBaseInfo(row)">编辑</a-button>
          <a-button danger class="topBtnStyle" size="small" @click="handleDeleteBond()">删除</a-button>
        </div>
      </template>
    </v-grid>
  </div>
  <!-- 新增编辑 -->
  <AddModule
    v-if="bondInfoVisiable"
    @close="bondInfoVisiable = false"
    :bondId="currentBond.id"
    :currentBond="currentBond"
    :isReadonly="isReadonly"
  ></AddModule>
  <!-- 数据空格 -->
  <a-drawer title="Basic Drawer" placement="right" :closable="false" :width="720">
    <!-- <Tab :tabTable="tabTable" v-if="tabTable"></Tab> -->
  </a-drawer>
</template>

<script lang="ts" src="./TreeModule.ts"></script>
// 表格样式
<style lang="less" scoped src="@/assets/less/commonPageTop.less"></style>
// 下拉数据
<style lang="less" scoped src="../../MarkSummary/MarkSummary.less"></style>
<style lang="less" scoped>
.operate-button {
  display: flex;
  flex: 1;
  justify-content: space-around;
}
</style>

代码主题部分.ts

import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
// import { messageError, messageWarn, modalConfirmBoolean } from '@/utils/antdUtils';
import TreeModule from './TreeModule/TreeModule';
import AddModule from './AddModule/AddModule';
export default defineComponent({
  components: {
    TreeModule,
    AddModule,
  },
  data() {
    return {
      selectRate: '',
      selectRateClick: '',
    };
  },
  methods: {
    queryClick() {
      this.selectRateClick = this.selectRate;
    },
  },
  setup() {
    const nameOption = reactive([
      {
        label: '',
        name: '请选择',
      },
      {
        label: '分销费',
        name: '分销费',
      },
      {
        label: '承销费',
        name: '承销费',
      },
      {
        label: '托管费',
        name: '托管费',
      },
      {
        label: '其他费用',
        name: '其他费用',
      },
    ]);
    // 新增/编辑债券基础信息模块
    const bondInfoVisiable = ref(false);
    const handleAddBaseInfo = (row: any) => {
      bondInfoVisiable.value = true;
    };
    return {
      handleAddBaseInfo,
      bondInfoVisiable,
      nameOption,
    };
  },
});

代码主题vue部分

<template>
  <div class="out-box">
    <div class="content-box">
      <div class="inner-box">
        <a-row class="topRowStyle">
          <div>
            <span class="spanText">费用名称</span>
            <a-select class="topInputStyle" showSearch placeholder="请选择" v-model:value="selectRate">
              <a-select-option v-for="item in nameOption" :key="item.label">{{ item.name }}</a-select-option>
            </a-select>
          </div>
          <div class="buttonClass">
            <!-- <AddModule /> -->
            <a-button type="primary" class="topBtnStyle" size="small" @click="handleAddBaseInfo(null)">新增</a-button>
            <a-button class="topBtnStyle" @click="queryClick" type="primary" size="small">查询</a-button>
          </div>
        </a-row>
      </div>
      <TreeModule :selectRate="selectRateClick" />
    </div>
    <!-- 新增编辑 -->
    <AddModule v-if="bondInfoVisiable" @close="bondInfoVisiable = false"></AddModule>
  </div>
</template>
<script lang="ts" src="./RateModule.ts"></script>
<style lang="less" scoped>
.date {
  position: relative;
  height: 100%;
  text-align: center;
  align-items: center;

  // line-height: 28.66px;
}
.date-span {
  height: 100%;
  display: inline-block;
  margin-top: 4px;
}
.out-box {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.content-box {
  display: flex;
  flex-direction: column;
  flex: 1;
}
// .inner-box {
//   flex: 1;
// }
.pagination {
  // flex: 1;

  height: 40px;
  line-height: 40px;
}
.buttonClass {
  display: flex;
  flex: 1;
}
</style>