tall4-pc/src/components/tall/task/AssignmentExperiment.vue

<template>
  <div class="task-form bg-white border-radius-10">
    <a-form ref="formRef" :model="assignExperFormData">
      <a-form-item>
        <label class="color-3">实验名称</label>
        <a-input v-model:value="assignExperFormData.name" placeholder="实验名称" />
      </a-form-item>

      <a-form-item>
        <label class="color-3">完成期限</label>
        <a-space direction="vertical" :size="12">
          <a-range-picker v-model:value="assignExperFormData.date" />
        </a-space>
      </a-form-item>

      <a-form-item>
        <label class="color-3">负责人</label>
        <a-select
          v-model:value="assignExperFormData.memberId"
          show-search
          optionFilterProp="label"
          placeholder="负责人"
          :options="options"
          :filter-option="filterOption"
          @search="handleSearch"
          :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }
          "
        ></a-select>
      </a-form-item>

      <a-form-item>
        <label class="color-3">实验目标</label>
        <a-textarea v-model:value="assignExperFormData.target" placeholder="实验目标" />
      </a-form-item>

      <a-form-item class="text-right">
        <a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { createExperiment, memberQuery, getExperimentation } from 'apis';
import { message } from 'ant-design-vue';

const store = useStore();
const formRef = ref(null);

const projectId = computed(() => store.getters['projects/projectId']);
const options = ref([]);
const experimentationId = computed(() => store.state.task.experimentationId); // 子课题ID

// 子课题起止时间
// const subStartTime = computed(() => store.state.layout.subStartTime);
// const subEndTime = computed(() => store.state.layout.subEndTime);

// console.log(subStartTime.value, subEndTime.value);

if (experimentationId.value) {
  getSubProject(experimentationId.value);
}

watch(experimentationId, async () => {
  await getSubProject(experimentationId.value);
});

const assignExperFormData = ref({
  projectId: projectId.value,
  id: '',
  name: '',
  memberId: '',
  date: [],
  startTime: '',
  endTime: '',
  target: '',
});

getList(); // 获取成员列表

const handleSearch = async value => {
  await getList(value); // 获取成员列表
};

const filterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const onSubmit = async () => {
  if (assignExperFormData.value.date.length > 0) {
    assignExperFormData.value.date.forEach((item, index) => {
      if (index === 0) {
        assignExperFormData.value.startTime = dayjs(item).format('x');
      } else {
        assignExperFormData.value.endTime = dayjs(item).format('x');
      }
    });

    // if (subStartTime.value && assignExperFormData.value.startTime < subStartTime.value) {
    //   message.info('实验开始时间不能小于子课题开始时间');
    //   return false;
    // }
    // if (subEndTime.value && assignExperFormData.value.endTime > subEndTime.value) {
    //   message.info('实验结束时间不能小于子课题结束时间');
    //   return false;
    // }
  }

  try {
    const params = { param: assignExperFormData.value };
    await createExperiment(params);
    store.commit('layout/setThirdPlanTime', { startTime: assignExperFormData.value.startTime, endTime: assignExperFormData.value.endTime });
    await getSubProject(experimentationId.value);
  } catch (error) {
    message.info(error);
  }
};

// 获取成员列表
async function getList(name) {
  try {
    const params = { param: { projectId: projectId.value, name } };
    const data = await memberQuery(params);
    store.commit('task/setMembers', data);
    options.value = [];

    data.forEach(item => {
      const obj = {
        label: item.memberName,
        value: item.memberId,
      };

      options.value.push(obj);
    });
  } catch (error) {
    message.info(error);
    throw new Error(error);
  }
}

async function getSubProject(id) {
  try {
    const params = { param: { id } };
    const data = await getExperimentation(params);
    store.commit('layout/setRefreshProjects');

    if (data) {
      data.date = [];
      if (data.startTime) {
        const start = dayjs(Number(data.startTime));
        const end = dayjs(Number(data.endTime));
        data.date = [start, end];
      }

      data.projectId = projectId.value;
      assignExperFormData.value = data;
    } else {
      assignExperFormData.value = {
        projectId: projectId.value,
        id: '',
        name: '',
        memberId: '',
        date: [],
        startTime: '',
        endTime: '',
        target: '',
      };
    }
  } catch (error) {
    message.info(error);
    throw new Error(error);
  }
}
</script>

<style scoped>
.task-detail {
  background-color: #fff;
}

.ant-col {
  margin-top: 10px;
}

.ant-col:nth-child(-n + 4) {
  margin-top: 2px;
}

.deliverables .ant-input,
.deliverables-son .ant-input {
  width: 23px;
  height: 14px;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  color: #1890ff;
  text-align: center;
  margin-left: 5px;
}

.deliverables-son {
  margin-top: 10px !important;
}
</style>