feat: "计划任务书页面"

src/components/tall/task/PlanAssignment.vue

@@ -1,3 +1,229 @@
 <template>
-  <div class="">ssssssssss</div>
+  <div class="task-form bg-white border-radius-10">
+    <a-form ref="formRef" :model="topicMeetFormData">
+      <a-form-item>
+        <label class="color-3">课题名称</label>
+        <a-input v-model:value="topicMeetFormData.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="topicMeetFormData.date" />
+        </a-space>
+      </a-form-item>
+
+      <a-form-item>
+        <label class="color-3">负责人</label>
+        <a-input v-model:value="topicMeetFormData.memberName" placeholder="会议地点" />
+      </a-form-item>
+
+      <a-form-item class="form-item-dad">
+        <div class="flex items-center" style="margin-bottom: 5px">
+          <label class="color-3" style="margin-bottom: 0; margin-right: 8px">项目分阶段具体实施目标</label>
+          <PlusCircleOutlined style="color: #1890ff; font-size: 16px" @click="addMilestones" />
+        </div>
+
+        <div class="form-item-son" style="padding-left: 16px">
+          <div v-for="(item, index) in planTaskStageList" :key="index">
+            <a-form-item>
+              <label class="color-3">第{{ index === 0 ? '一' : index === 1 ? '二' : '三' }}阶段</label>
+              <a-space direction="vertical" :size="12">
+                <a-range-picker v-model:value="item.date" />
+              </a-space>
+            </a-form-item>
+
+            <a-form-item>
+              <label class="color-3">实施内容与目标</label>
+              <a-textarea v-model:value="item.remark" placeholder="实施内容与目标" />
+            </a-form-item>
+          </div>
+        </div>
+      </a-form-item>
+
+      <a-form-item>
+        <label class="color-3">主要技术指标</label>
+        <a-textarea v-model:value="topicMeetFormData.technicalIndicator" placeholder="主要技术指标" />
+      </a-form-item>
+
+      <a-form-item>
+        <label class="color-3">经济指标</label>
+        <a-textarea v-model:value="topicMeetFormData.economicIndicators" placeholder="经济指标" />
+      </a-form-item>
+
+      <a-form-item>
+        <label class="color-3">社会效益</label>
+        <a-textarea v-model:value="topicMeetFormData.socialBenefit" placeholder="社会效益" />
+      </a-form-item>
+
+      <a-form-item>
+        <label class="color-3">验收内容</label>
+        <a-checkbox-group v-model:value="topicMeetFormData.con">
+          <a-row>
+            <a-col :span="5">
+              <a-checkbox value="A"><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-col>
+            <a-col :span="6">
+              <a-checkbox value="C"><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-col>
+            <a-col :span="5">
+              <a-checkbox value="E"><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-col>
+            <a-col :span="6">
+              <a-checkbox value="G"><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-col>
+          </a-row>
+        </a-checkbox-group>
+      </a-form-item>
+
+      <!-- 自定义 -->
+      <div class="flex items-center cursor-pointer" style="margin-bottom: 20px" @click="addDefined">
+        <PlusCircleOutlined style="color: #1890ff; font-size: 16px" /><span class="color-3" style="margin-left: 8px">自定义</span>
+      </div>
+
+      <div class="form-item-son" style="padding-left: 16px">
+        <div v-for="(item, index) in planTaskDefinedList" :key="index">
+          <a-form-item>
+            <label class="color-3">自定义名称</label>
+            <a-input v-model:value="item.key" placeholder="自定义名称" />
+          </a-form-item>
+
+          <a-form-item>
+            <label class="color-3">自定义内容</label>
+            <a-textarea v-model:value="item.value" placeholder="自定义内容" />
+          </a-form-item>
+        </div>
+      </div>
+
+      <a-form-item>
+        <label class="color-3">计划任务书</label>
+        <a-upload-dragger
+          v-model:fileList="fileList"
+          name="files"
+          :multiple="true"
+          :action="action"
+          :headers="headers"
+          :accept="'.pdf'"
+          @change="handleChange"
+        >
+          <p class="ant-upload-drag-icon">
+            <inbox-outlined></inbox-outlined>
+          </p>
+          <p class="ant-upload-text color-3 font-14">点击或拖拽文件到区域内上传交付物</p>
+          <p class="ant-upload-hint color-c">格式：pdf</p>
+        </a-upload-dragger>
+      </a-form-item>
+
+      <a-form-item class="text-right">
+        <a-button type="primary" html-type="submit">上传计划任务书</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
 </template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { InboxOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
+import { uploadImg } from 'apis';
+
+const store = useStore();
+const formRef = ref(null);
+const token = computed(() => store.getters['user/token']);
+const headers = { Authorization: `Bearer ${token.value}` };
+const action = uploadImg;
+const fileList = ref([]);
+const topicMeetFormData = ref({
+  name: '',
+  date: [],
+  memberName: '',
+  desc: '',
+  technicalIndicator: '',
+  economicIndicators: '',
+  socialBenefit: '',
+  checkContent: [],
+  fileList: [],
+  con: [],
+  planTaskStageList: [],
+  planTaskDefinedList: [],
+});
+
+const planTaskStageList = ref([
+  {
+    date: [],
+    remark: '',
+  },
+]);
+
+const planTaskDefinedList = ref([
+  {
+    key: '',
+    value: '',
+  },
+]);
+
+const handleChange = info => {
+  const resFileList = [...info.fileList];
+
+  // 数组去重
+  const arr = ref([]);
+  resFileList.forEach(file => {
+    let flag = false;
+
+    arr.value.forEach(item => {
+      if (file.name === item.name) {
+        flag = true;
+      }
+    });
+    if (!flag) {
+      arr.value.push(file);
+    }
+  });
+
+  // 更改上传文件路径
+  arr.value = arr.value.map(file => {
+    if (file.response) {
+      file.url = file.response.data[0].visitUrl;
+    }
+
+    return file;
+  });
+
+  fileList.value = arr.value;
+};
+
+// 添加实施内容与目标
+function addMilestones() {
+  planTaskStageList.value.push({ date: [], remark: '' });
+}
+
+function addDefined() {
+  planTaskDefinedList.value.push({ key: [], value: '' });
+}
+</script>
+
+<style scoped>
+.task-detail {
+  background-color: #fff;
+}
+
+.ant-col {
+  margin-top: 10px;
+}
+
+.ant-col:nth-child(-n + 4) {
+  margin-top: 2px;
+}
+</style>

src/views/detail/Test.vue

@@ -108,10 +108,11 @@ watch([taskDetail], () => {
 }
 
 :deep(.ant-btn-primary) {
-  max-width: 180px;
+  width: 180px;
   height: 38px;
   font-size: 16px;
   border-radius: 6px;
+  letter-spacing: 2px;
 }
 
 :deep(.ant-space) {
@@ -150,4 +151,12 @@ watch([taskDetail], () => {
   margin-top: 16px;
   line-height: 1;
 }
+
+:deep(.form-item-dad) {
+  margin-bottom: 0 !important;
+}
+
+.form-item-son {
+  padding-left: 16px;
+}
 </style>