[JavaScript/Vue 2] - param 데이터 전달

index.vue

<template>
  <div>
  </div>
  <acceptWork ref="popupAcceptWork"/>
  <addNonWork ref="popupAddNonWork"/>
</template>

<script>
import addNonWork from '@/components/views/popup/common/addNonWork';
import acceptWork from '@/components/views/popup/common/acceptWork';

const { mapFields } = createHelpers({
  getterType: 'wtm2Module/historyListByEmpty/getField',
  mutationType: 'wtm2Module/historyListByEmpty/updateField',
});

export default {
  name: 'leftSeatHistory',
  props: {
    openMode: {
      type: String,
      default: 'popup',
    },
  },
  components: {
    addNonWork,
    acceptWork,
  },
  data() {
    return {
      searchWord: '',
      selectedRows: [],
      menuItems: [
        {
          text: '등록정보',
          icon: 'menu_application_info',
          iconPath: '',
          name: '',
          disabled: true,
          isDisabled: (e) => {
            e.disabled = !this.isGridSingleSelected;
          },
          clickEvent: () => {
            this.openRegInfo();
          },
        },   
      ],
    };
  },
  computed: {
    ...mapFields([
      'searchInfo',
    ]),
    isGridSingleSelected() {
      return this.selectedRows && this.selectedRows.length === 1;
    },
  },
  methods: {
    visiblePop(e) {
      if (e.clickEvent !== undefined) {
        e.clickEvent(e);
      }
    },
    columnChoose() {
      this.columnChooser = !this.columnChooser;
    },
    async loadData() {
      if (this.wtmMainList.store !== undefined) {
        // this.wtmMainList.dispose();
      }
      const self = this;
      this.wtmMainList = new DataSource({
        store: new CustomStore({
          key: 'historyKey',
          load(loadOptions) {
            self.$setLoading(true);

            const pagingInfo = {};
            if (loadOptions.isLoadingAll) {
              pagingInfo.pageOffset = 0;
              pagingInfo.pageSize = self.$refs.grid.dataGridRef.getDataSource().totalCount();
            } else {
              pagingInfo.pageOffset = loadOptions.skip;
              pagingInfo.pageSize = loadOptions.take;
            }
            return self.$store.dispatch('wtm2Module/historyListByEmpty/getHistoryListByEmpty', pagingInfo)
              .then((result) => {
                const param = {
                  data: result.data,
                  totalCount: result.totalCount,
                };
                self.$setLoading(false);
                return param;
              }).catch(() => self.$setLoading(false));
          },
        }),
      });
    },
    openPopSelectTarget() {
      const param = { dialogType: 'single' };
      switch (this.searchInfo.targetType) {
        case 'G':
          this.$refs.popupSelectGroup.popupOpen(param);
          break;
        case 'U':
          this.$refs.popupSelectUser.popupOpen(param);
          break;
        default:
          this.$refs.popupSelectGroup.popupOpen(param);
          break;
      }
    },
    // 이 함수에서 param 전달한다.
    openRegInfo() {
      const param = {
        dialogType: 'select',
        selectedData: {
          targetDate: this.selectedRows[0].historyDateTime,
          key: this.selectedRows[0].historyKey,
          reason: this.selectedRows[0].description,
          applyMinute: this.selectedRows[0].emptyTime,
          workTimePoint: {
            code: this.selectedRows[0].workTypeDetailCode,
            name: this.selectedRows[0].workTypeDetailName,
          },
          awayItemCode: {
            code: this.selectedRows[0].emptyType,
            name: this.selectedRows[0].emptyTypeName,
          },
          startDateTime: `${moment(this.selectedRows[0].historyDateTime).format('YYYY-MM-DD')} ${this.selectedRows[0].startTime}`,
          endDateTime: `${moment(this.selectedRows[0].historyDateTime).format('YYYY-MM-DD')} ${this.selectedRows[0].endTime}`,
        },
      };
      console.log(param.selectedData.awayItemCode.code);
      if (this.selectedRows[0].startTime && this.selectedRows[0].endTime) { // 수동 등록정보
        this.popupAcceptWorkOpen(param);
      } else {
        this.popupAddNonWorkOpen(param);
      }
    },
    // param 받아서 팝업 여는 함수. 여기서도 param을 parameter로 전달한다.
    popupAddNonWorkOpen(param) {
      this.$refs.popupAddNonWork.popupOpen(param);
    },
    // param 받아서 팝업 여는 함수.(두 번째 컴포넌트)
    popupAcceptWorkOpen(param) {
      this.$refs.popupAcceptWork.popupOpen(param);
    },
    changeDateTime(eventType) {
      const startDate = moment(this.searchInfo.startDate).format('YYYY-MM-DD');
      const endDate = moment(this.searchInfo.endDate).format('YYYY-MM-DD');
      if (eventType === 'startDate' && startDate > endDate) {
        this.searchInfo.endDate = startDate;
      } else if (eventType === 'endDate' && startDate > endDate) {
        this.searchInfo.startDate = endDate;
      }
    },
    popupAddWorkExceptionOpen() {
      const row = this.selectedRows[0];
      const param = {
        dialogType: 'select',
        showTiming: false,
        userName: row.userName,
        selectedRow: {
          divisionName: '이석',
          itemName: row.emptyTypeName,
          startDateTime: `${moment(row.historyDateTime).format('YYYY-MM-DD')}T${moment(row.startTime, 'HH:mm').format('HH:mm')}`,
          endDateTime: `${moment(row.historyDateTime).format('YYYY-MM-DD')}T${moment(row.endTime, 'HH:mm').format('HH:mm')}`,
          note: row.description,
        },
      };
      this.$refs.popupAddWorkException.popupOpen(param);
    },
    onSelectionChangedGrid() {
      this.selectedRows = this.$refs.grid.getSelectedRowsData();
      this.gridContextMenuRepaint();
    },
    dbSelected() {
      this.popupAddWorkExceptionOpen();
    },
    gridContextMenuRepaint() {
      this.menuItems.forEach((item) => {
        if (typeof item.isDisabled === 'function') {
          item.isDisabled(item);
          if (item.items !== undefined) {
            item.items.forEach((sub) => {
              if (typeof sub.isDisabled === 'function') {
                sub.isDisabled(sub);
              }
            });
          }
        }
      });
      if (this.$refs.gridContextMenu !== undefined) {
        this.$refs.gridContextMenu.instance.repaint();
      }
    },
  },
  created() {
  },
  mounted() {
    if (this.openMode === 'main') {
      this.loadData();
    }
  },
  beforeDestroy() {
    this.$store.commit('wtm2Module/historyListByEmpty/resetHistoryListByEmpty');
  },
};
</script>

 

param을 전달받는 쪽에서 param을 받아 세팅한다.(데이터 매칭)

 

 

acceptWork.vue

popupOpen(param) {
  this.setParam(param);
  this.modalVisible = true;
},
// 여기서 param 받는다.
setParam(param) {
  if (param === undefined || param === null) return;
  if (param.dialogType) this.dialogType = param.dialogType;
  if (this.dialogType === 'insert') this.initInsertPopup();
  else if (this.dialogType === 'select') this.initSelectPopup();
  if (param.selectedData) {
    const row = { ...param.selectedData };
    this.info.key = row.key;
    this.info.workTimePoint.code = row.workTimePoint.code;
    this.info.workTimePoint.name = row.workTimePoint.name;
    this.awayItemName = row.awayItemCode.name; // 변경전 이석항목 텍스트
    this.info.awayItemCode.code = row.awayItemCode.code;
    this.info.awayItemCode.name = row.awayItemCode.name;
    this.info.startDateTime = row.startDateTime;
    this.info.endDateTime = row.endDateTime;
    this.info.reason = row.reason;
  }
  this.setItemList();
},
async setItemList() { // 이석항목조회
  this.itemList = await this.$store.dispatch('wtm2Module/status/workExceptChange/getAwayItemMap');
  await this.setItemListCode();
},
setItemListCode() { // 등록일때, 이석항목 첫번째값으로 적용
  if (this.itemList.length === 0 || this.info.key !== null) return;
  this.info.awayItemCode.code = this.itemList[0].code;
  this.info.awayItemCode.name = this.itemList[0].name;
},

 

props, emit외에도 데이터 전달 방법은 정말이지 무궁무진한 것 같다.

 

오늘도 파이팅!