feat: "任务计划书添加"

4 years ago · 29fcea4d7f
4 changed files with 238 additions and 36 deletions
--- a/src/apis/index.js
+++ b/src/apis/index.js
@ -66,3 +66,6 @@ export const create = param => http.post(`${experiment}/experiment/create`, { pa

 // 上传文件
 export const uploadImg = `${filedeal}/file/upload/multiple`;
+
+// 添加/编辑计划任务书
+export const savePlanTask = params => http.post(`${experiment}/experiment/savePlanTask`, params);
--- a/src/components/tall/task/MemberManagement.vue
+++ b/src/components/tall/task/MemberManagement.vue
@ -0,0 +1,127 @@
+<template>
+  <div>
+    <a-table :columns="columns" :data-source="data">
+      <!-- <template #headerCell="{ column }"></template> -->
+
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <a-button class="action-btn edit-btn" type="primary" @click="toEdit(record)">编辑</a-button>
+          <a-button class="action-btn del-btn" type="primary" @click="toDelete(record)">删除</a-button>
+        </template>
+      </template>
+    </a-table>
+
+    <div class="add-btn flex items-center cursor-pointer" @click="addMember">
+      <PlusCircleOutlined style="font-size: 24px; color: #1890ff" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { PlusCircleOutlined } from '@ant-design/icons-vue';
+import {} from 'apis';
+
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'id',
+    key: 'id',
+  },
+  {
+    title: '成员名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '账号',
+    dataIndex: 'account',
+    key: 'account',
+  },
+  {
+    title: '角色',
+    key: 'role',
+    dataIndex: 'role',
+  },
+  {
+    title: '所属单位',
+    key: 'unit',
+    dataIndex: 'unit',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    dataIndex: 'action',
+  },
+];
+
+const data = [
+  {
+    key: '1',
+    id: '1',
+    name: '郁教授',
+    account: '12345678910',
+    role: '课题主持人',
+    unit: '课题主持人',
+  },
+  {
+    key: '2',
+    id: '2',
+    name: '张野',
+    account: '10987654321',
+    role: '子课题负责人1',
+    unit: '子课题负责人1',
+  },
+  {
+    key: '3',
+    id: '3',
+    name: '郁教授',
+    account: '12345678910',
+    role: '课题主持人',
+    unit: '课题主持人',
+  },
+  {
+    key: '4',
+    id: '4',
+    name: '郁教授',
+    account: '12345678910',
+    role: '课题主持人',
+    unit: '课题主持人',
+  },
+];
+
+function addMember() {
+  data.push({ key: '5', id: '5', name: '', account: '', role: '', unit: '' });
+}
+</script>
+
+<style scoped>
+.action-btn {
+  width: 50px !important;
+  height: 28px !important;
+  font-size: 14px !important;
+  padding: 0;
+  letter-spacing: 0 !important;
+}
+
+:deep(.ant-table-pagination.ant-pagination) {
+  height: 0;
+  margin: 0;
+}
+
+.add-btn {
+  height: 60px;
+  background: #fff;
+  padding-left: 36px;
+}
+
+.edit-btn {
+  background: #0dc26c;
+  border: 0;
+}
+
+.del-btn {
+  margin-left: 16px;
+  background: #ff5353;
+  border: 0;
+}
+</style>
--- a/src/components/tall/task/PlanAssignment.vue
+++ b/src/components/tall/task/PlanAssignment.vue
@ -15,7 +15,11 @@

      <a-form-item>
        <label class="color-3">负责人</label>
-        <a-input v-model:value="topicMeetFormData.memberName" placeholder="会议地点" />
+        <a-select v-model:value="topicMeetFormData.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 class="form-item-dad">
@ -58,31 +62,31 @@

      <a-form-item>
        <label class="color-3">验收内容</label>
-        <a-checkbox-group v-model:value="topicMeetFormData.con">
+        <a-checkbox-group v-model:value="topicMeetFormData.checkContent">
          <a-row>
            <a-col :span="5">
-              <a-checkbox value="A"><span class="color-6">1、工作报告</span></a-checkbox>
+              <a-checkbox value="1"><span class="color-6">1、工作报告</span></a-checkbox>
            </a-col>
            <a-col :span="6">
-              <a-checkbox value="B"><span class="color-6">2、技术报告</span></a-checkbox>
+              <a-checkbox value="2"><span class="color-6">2、技术报告</span></a-checkbox>
            </a-col>
            <a-col :span="6">
-              <a-checkbox value="C"><span class="color-6">3、计算机软件</span></a-checkbox>
+              <a-checkbox value="3"><span class="color-6">3、计算机软件</span></a-checkbox>
            </a-col>
            <a-col :span="7">
-              <a-checkbox value="D"><span class="color-6">4、生物品种</span></a-checkbox>
+              <a-checkbox value="4"><span class="color-6">4、生物品种</span></a-checkbox>
            </a-col>
            <a-col :span="5">
-              <a-checkbox value="E"><span class="color-6">5、样品或样机</span></a-checkbox>
+              <a-checkbox value="5"><span class="color-6">5、样品或样机</span></a-checkbox>
            </a-col>
            <a-col :span="6">
-              <a-checkbox value="F"><span class="color-6">6、成套技术设备</span></a-checkbox>
+              <a-checkbox value="6"><span class="color-6">6、成套技术设备</span></a-checkbox>
            </a-col>
            <a-col :span="6">
-              <a-checkbox value="G"><span class="color-6">7、科技论文或著作</span></a-checkbox>
+              <a-checkbox value="7"><span class="color-6">7、科技论文或著作</span></a-checkbox>
            </a-col>
            <a-col :span="7">
-              <a-checkbox value="H"><span class="color-6">8、科技报告收录证书(必选)</span></a-checkbox>
+              <a-checkbox value="8"><span class="color-6">8、科技报告收录证书(必选)</span></a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
@ -127,52 +131,45 @@
      </a-form-item>

      <a-form-item class="text-right">
-        <a-button type="primary" html-type="submit">上传计划任务书</a-button>
+        <a-button type="primary" html-type="submit" @click="onSubmit">上传计划任务书</a-button>
      </a-form-item>
    </a-form>
  </div>
 </template>

 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, toRaw } from 'vue';
 import { useStore } from 'vuex';
 import { InboxOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
-import { uploadImg } from 'apis';
+import { uploadImg, savePlanTask } from 'apis';
+import dayjs from 'dayjs';

 const store = useStore();
 const formRef = ref(null);
+const projectId = computed(() => store.getters['projects/projectId']);
 const token = computed(() => store.getters['user/token']);
 const headers = { Authorization: `Bearer ${token.value}` };
 const action = uploadImg;
 const fileList = ref([]);
 const topicMeetFormData = ref({
+  projectId: projectId.value,
  name: '',
  date: [],
-  memberName: '',
-  desc: '',
+  startTime: '',
+  endTime: '',
+  memberId: '',
  technicalIndicator: '',
  economicIndicators: '',
  socialBenefit: '',
  checkContent: [],
-  fileList: [],
-  con: [],
+  fileIdList: [],
+  // fileList: [],
  planTaskStageList: [],
  planTaskDefinedList: [],
 });

-const planTaskStageList = ref([
-  {
-    date: [],
-    remark: '',
-  },
-]);
-
-const planTaskDefinedList = ref([
-  {
-    key: '',
-    value: '',
-  },
-]);
+const planTaskStageList = ref([]);
+const planTaskDefinedList = ref([]);

 const handleChange = info => {
  const resFileList = [...info.fileList];
@ -180,22 +177,25 @@ const handleChange = info => {
  // 数组去重
  const arr = ref([]);
  resFileList.forEach(file => {
-    let flag = false;
+    let num = -1;

-    arr.value.forEach(item => {
+    arr.value.forEach((item, index) => {
      if (file.name === item.name) {
-        flag = true;
+        num = index;
      }
    });
-    if (!flag) {
-      arr.value.push(file);
+    if (num > -1) {
+      arr.value.splice(num, 1);
    }
+
+    arr.value.push(file);
  });

  // 更改上传文件路径
  arr.value = arr.value.map(file => {
    if (file.response) {
      file.url = file.response.data[0].visitUrl;
+      file.id = file.response.data[0].id;
    }

    return file;
@ -206,12 +206,57 @@ const handleChange = info => {

 // 添加实施内容与目标
 function addMilestones() {
-  planTaskStageList.value.push({ date: [], remark: '' });
+  planTaskStageList.value.push({ date: [], startTime: '', endTime: '', remark: '' });
 }

 function addDefined() {
  planTaskDefinedList.value.push({ key: [], value: '' });
 }
+
+const onSubmit = () => {
+  fileList.value.forEach(item => {
+    // let obj = {
+    //   fileId: item.id,
+    //   fileName: item.name,
+    //   filePathL: item.url
+    // }
+
+    // topicMeetFormData.value.fileList.push(obj);
+    topicMeetFormData.value.fileIdList.push(item.id);
+  });
+
+  planTaskStageList.value.forEach(item => {
+    const obj = {
+      startTime: '',
+      endTime: '',
+      remark: item.remark,
+    };
+    item.date.forEach((val, key) => {
+      if (key === 0) {
+        obj.startTime = dayjs(val).format('x');
+      } else {
+        obj.endTime = dayjs(val).format('x');
+      }
+    });
+
+    topicMeetFormData.value.planTaskStageList.push(obj);
+  });
+
+  topicMeetFormData.value.planTaskDefinedList = planTaskDefinedList.value;
+
+  topicMeetFormData.value.date.forEach((item, index) => {
+    if (index === 0) {
+      topicMeetFormData.value.startTime = dayjs(item).format('x');
+    } else {
+      topicMeetFormData.value.endTime = dayjs(item).format('x');
+    }
+  });
+
+  const params = { param: topicMeetFormData.value };
+
+  savePlanTask(params);
+  console.log('submit!', toRaw(topicMeetFormData.value), planTaskStageList.value, planTaskDefinedList.value);
+};
 </script>

 <style scoped>
--- a/src/views/detail/Test.vue
+++ b/src/views/detail/Test.vue
@ -3,6 +3,7 @@
    <div class="task-con flex">
      <!-- {{ taskInfo.name }} -->
      <div class="task-con-box">
+        <div>{{ label }}</div>
        <!-- 课题 -->
        <!-- 查看课题进展 -->
        <CheckSubjectProgress v-if="label === 'KT_KTJZ'" />
@ -10,6 +11,9 @@
        <!-- 科研会议管理 -->
        <MeetingManagement v-if="label === 'KT_KYHY'" />

+        <!-- 成员管理 -->
+        <MemberManagement v-if="label === 'KT_CYGL'" />
+
        <!-- 计划任务书 -->
        <PlanAssignment v-if="label === 'KT_JHRWS'" />
      </div>
@ -27,6 +31,7 @@ import { useStore } from 'vuex';
 import CheckSubjectProgress from 'components/tall/task/CheckSubjectProgress.vue'; // 查看课题进展
 import MeetingManagement from 'components/tall/task/MeetingManagement.vue'; // 科研会议管理
 import PlanAssignment from 'components/tall/task/PlanAssignment.vue'; // 科研会议管理
+import MemberManagement from 'components/tall/task/MemberManagement.vue'; // 科研会议管理

 import TaskConList from 'components/tall/task/TaskConList.vue'; // 任务详情页列表

@ -126,6 +131,10 @@ watch([taskDetail], () => {
  border-radius: 4px;
 }

+:deep(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
+  height: 38px;
+}
+
 :deep(.ant-upload) {
  width: 100%;
 }
@ -159,4 +168,22 @@ watch([taskDetail], () => {
 .form-item-son {
  padding-left: 16px;
 }
+
+/* 表格 */
+:deep(.ant-table-thead > tr > th),
+:deep(.ant-table-tbody > tr > td) {
+  height: 60px;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background: #fff;
+  font-size: 16px;
+  color: #333;
+}
+
+:deep(.ant-table-thead
+    > tr
+    > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
+  width: 0;
+}
 </style>