From 29fcea4d7f6f29e74c028d4022d95c1a80f94207 Mon Sep 17 00:00:00 2001
From: xuesinan <1404152492@qq.com>
Date: Sun, 28 Nov 2021 18:02:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20"=E4=BB=BB=E5=8A=A1=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E4=B9=A6=E6=B7=BB=E5=8A=A0"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/index.js                             |   3 +
 src/components/tall/task/MemberManagement.vue | 127 ++++++++++++++++++
 src/components/tall/task/PlanAssignment.vue   | 117 +++++++++++-----
 src/views/detail/Test.vue                     |  27 ++++
 4 files changed, 238 insertions(+), 36 deletions(-)
 create mode 100644 src/components/tall/task/MemberManagement.vue

diff --git a/src/apis/index.js b/src/apis/index.js
index b7c94b0..ee4280a 100644
--- 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);
diff --git a/src/components/tall/task/MemberManagement.vue b/src/components/tall/task/MemberManagement.vue
new file mode 100644
index 0000000..6225efd
--- /dev/null
+++ 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>
diff --git a/src/components/tall/task/PlanAssignment.vue b/src/components/tall/task/PlanAssignment.vue
index f078ddb..29f28f6 100644
--- 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>
diff --git a/src/views/detail/Test.vue b/src/views/detail/Test.vue
index f505010..564cf27 100644
--- 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>