bb.md

gistfile1.md

<template>
  <div>
    <div class="header tw-flex tw-my-4">
      <div class="title tw-grow tw-text-[16px] tw-font-[500] tw-mr-auto">
        {{ translate('assessment.setSubject') }}
      </div>
      <div class="actions tw-shirk-0 tw-flex tw-items-center tw-px-4">
        <AntdButton type="primary" @click="autoSetWeightValue">
          <font-awesome-icon :icon="['fas', 'shuffle']" />
          <span class="tw-ml-1">{{ translate("autoSetWeight") }}</span>
        </AntdButton>
      </div>
    </div>
    <p>{{ form }}</p>
    <!-- <p>{{ objectObjs }}</p>
    <p>{{ form.periodsRaw }}</p>
    <p>{{ activeKey }}</p>
    <p>{{ assessorWeights }}</p> -->
    <p>{{ tabWeights }}</p>
    <a-tabs v-if="form.periodsRaw.length > 0"
      class="antd-new-tabs"
      v-model:activeKey="activeKey"
      tab-position="left"
      @change="changeTab"
    >
      <a-tab-pane v-for="(period, idx) in form.periodsRaw" :key="period?.positionId" 
      :tab="period.positionName">
        <div class="tw-min-h-[200px]">
          <a-table
            class="expand-arrow"
            rowKey="code"
            :has-checkbox="true"
            :pagination="false"
            :columns="assessmentColumns"
            :data-source="objectObjs"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key !== 'title' && record">
                <a-input type="number"
                class="tw-text-center"
                :class="{
                  'tw-border-rose-500': (props.error.createAssessorWeights || []).includes(column.key)
                }"
                :name="`${period.positionId}_${record.assessmentObject}_${column.key}`"
                :value="getWeightValue(
                  record.assessmentObject,
                  column.key,
                  period.positionId
                )"
                @input="setWeightValue(
                  record.assessmentObject,
                  column.key,
                  ($event.target as HTMLInputElement).value,
                  period.positionId
                )" />
              </template>
            </template>
            <template #expandedRowRender="{ column, record }">
              <a-table v-if="period?.capacities?.length"
                rowKey="subCapacityId"
                :showHeader="false"
                :pagination="false"
                :columns="capacityColumns"
                :data-source="period.capacities"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'checkbox' && record">
                    <a-checkbox v-model:checked="record.checked"></a-checkbox>
                  </template>
                </template>
              </a-table>
            </template>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
    <NoData v-else />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from "vue";
import AntdButton from "@/components/antd-button/index.vue";
import NoData from "@/components/no-data/index.vue";
import { LIST_ASSESSMENT } from "@/constants/assessmentPeriod";
import cloneDeep from "lodash.clonedeep";
import { useStore } from "vuex";
import { translate } from "@/languages/i18n";
import { sumaryNumber } from "@/utils/common";
// import position from "@/store/modules/position";

const store = useStore();

const listSelect = ref<Array<any>>([]);
const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
  error: {
    type: Object,
    required: true,
  },
});

const sentData = ref(cloneDeep(props.form))

const activeKey = ref(0);

const capacityGroup = computed(() => store.getters["assessmentPeriod/capacityGroup"]);
const assessmentColumns = computed(() => {
  let cols = (capacityGroup?.value || []).map((item) => ({
    title: item.name + ` (100%)`,
    dataIndex: item.id,
    key: item.id,
    align: 'center'
  }))

  return [
    {
      title: props.form.periodsRaw[activeKey.value]?.positionName || "...",
      dataIndex: 'title',
      key: 'title',
      ellipsis: true,
      align: 'left',
    },
    ... cols
  ]
})

const capacityColumns = ref([
  {
    title: '',
    dataIndex: 'checkbox',
    key: 'checkbox',
    width: '60px',
    ellipsis: true,
    align: 'center',
    class: 'abc'
  },
  {
    title: '',
    dataIndex: 'subCapacityName',
    key: 'subCapacityName',
    ellipsis: true,
    align: 'left',
  }
])

const objectObjs = computed(() => {
  return LIST_ASSESSMENT.filter(x => props.form.objectsRaw.indexOf(x.assessmentObject) > -1)
});

const assessorWeights = ref<Array<any>>([]);
const tabWeights = ref<any>({});
const mapWeightsData = () => {
  // props.form.createAssessorWeights = []
  // let positionAssessorWeights = (props.form.periodsRaw || []).map((x) => ({
  //   positionId: x.positionId,
  //   assessorWeights: []
  // }))

  // let assessorWeights: any[] = []
  capacityGroup.value.forEach(p => {
    props.form.objectsRaw.forEach(o => {
      let weight = {
        assessmentObject: o,
        capacityGroupId: p.id,
        weight: null
      }
      assessorWeights?.value.push(weight)
    })
  })
}
const getWeightValue = (assessmentObject: number, capacityGroupId: number, positionId: number) => {
  let assessmentWeightsPosition = (props.form.assessmentPositions || []).find(x => x.positionId === positionId);
  let weightObj: any = null;

  if (assessmentWeightsPosition?.createAssessorWeights.length) {
    weightObj = assessmentWeightsPosition?.createAssessorWeights.find(x => 
      x.assessmentObject === assessmentObject && x.capacityGroupId === capacityGroupId
    );
  }

  return weightObj ? weightObj.weight : "";
};

const setWeightValue = (assessmentObject: number, capacityGroupId: number, value, positionId: number) => {
  let assessmentWeightsPosition = (props.form.assessmentPositions || []).find(x  => x.positionId === positionId);
  let weightObj: any = null;

  if (assessmentWeightsPosition?.createAssessorWeights.length) {
    weightObj = assessmentWeightsPosition?.createAssessorWeights.find(x => 
      x.assessmentObject === assessmentObject && x.capacityGroupId === capacityGroupId
    );
  }

  if (weightObj) {
    const updatedWeightObj = { ...weightObj, weight: Number(value) };
    const index = assessmentWeightsPosition.createAssessorWeights.indexOf(weightObj);
    
    if (index !== -1) {
      assessmentWeightsPosition.createAssessorWeights.splice(index, 1, updatedWeightObj);
    }
  }

  let awIdx = (props.error.createAssessorWeights || []).findIndex(x => x === capacityGroupId);
  if (awIdx > -1) {
    (props.error.createAssessorWeights || []).splice(awIdx, 1);
  }
};
const autoSetWeightValue = () => {
  let countObjects = (props.form.objectsRaw || []).length
  assessorWeights?.value.forEach((x, xIdx) => {
    x.weight = sumaryNumber(100/countObjects)
  })
  capacityGroup.value.forEach(p => {
    let sameCapacityGroupId = assessorWeights?.value.filter(x => x.capacityGroupId === p.id)
    sameCapacityGroupId[0].weight = 100 - sumaryNumber(100/countObjects)*(countObjects-1)
  })
}

const changeTab = (key) => {
  if (!props.form.periodsRaw || props.form.periodsRaw[key]===undefined) return
  let colName = assessmentColumns.value.find(x => x.key === 'title')
  if (colName) colName.title = props.form.periodsRaw[key]?.positionName || "..."
}

watch(
  () => activeKey.value,
  (newActiveKey) => {
    const selectedTabWeights = tabWeights.value[newActiveKey];
    props.form.assessmentPositions.forEach(x => {
      x.createAssessorWeights = selectedTabWeights;
    });
  }
);


watch(
  () => assessorWeights.value,
  () => {
    props.form.assessmentPositions.forEach(x => {
      x.createAssessorWeights = assessorWeights.value
    })
  },
  {immediate: true, deep: true}
);

onMounted(async () => {
  await store.dispatch("assessmentPeriod/fetchCapacity");
  await mapWeightsData(); 
  autoSetWeightValue();
  // props.form.assessmentPositions.forEach(x => {
  //   x.createAssessorWeights = assessorWeights.value
  // })
  props.form.assessmentPositions.forEach(x => {
    // lấy positionId làm key cho th tabWeights
    tabWeights.value[x.positionId] = cloneDeep(assessorWeights.value);
    x.createAssessorWeights = tabWeights.value[x.positionId];
  });
})
</script>