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">
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </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, toRaw } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
// import { createExperiment } from 'apis';

const store = useStore();
const formRef = ref(null);
const sessionProject = sessionStorage.getItem('project');
const projectId = computed(() => store.getters['projects/projectId']);

if (sessionProject) {
  const project = JSON.parse(sessionProject);
  store.commit('projects/setProject', project);
}

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

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

  // const params = { param: assignExperFormData.value };

  // createExperiment(params);
  console.log('submit!', toRaw(assignExperFormData.value));
};
</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>