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, toRaw } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { createExperiment, memberQuery } from 'apis';

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

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: '',
});

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

const handleSearch = async value => {
  console.log('handleSearch', options.value, value);
  //   await getList(value); // 获取成员列表
};

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

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));
};

// 获取成员列表
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) {
    console.log('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>