门户，任务管理

src/styles/index.scss

@@ -102,7 +102,9 @@ html, body, #app {
 .el-card.hc-card-box .el-card__body .hc-card-action-box {
     background-color: white;
 }
-
+.el-card .el-card__body .hc-card-main-box .hc-card-item-box {
+    background: #f3f8fc;
+}
 .hac-card-item.hc-card-item-box {
     background: white;
     .hc-card-item-header {

src/views/home/task-details.vue

@@ -5,6 +5,43 @@
                 <div class="label">任务名称</div>
                 <div class="name">【任务描述】申请【任务转移】</div>
             </div>
+            <div class="hac-task-text-box">
+                <span>上报类型：废除任务</span>
+                <span class="ml-10">上报人：张三</span>
+                <span class="ml-10">上报时间：2023-02-23 19:20:22</span>
+            </div>
+        </HcCardItem>
+
+        <HcCardItem title="任务详情" class="mt-4">
+            <div class="h-52">
+                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData"/>
+            </div>
+        </HcCardItem>
+
+        <HcCardItem title="操作任务" class="mt-4">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="">
+                <el-form-item label="变更类别：" prop="type" size="large">
+                    <el-radio-group v-model="formModel.type" size="large">
+                        <el-radio label="1">已完成</el-radio>
+                        <el-radio label="2">延期执行</el-radio>
+                        <el-radio label="3">任务转移</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <div class="flex">
+                    <el-form-item label="转移时间：" prop="transfer" class="w-64 mr-4">
+                        <el-date-picker class="block" v-model="formModel.transfer" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                    </el-form-item>
+                    <el-form-item label="转移后剩余工作任务完成日期：" prop="transfer" class="w-96 ml-4">
+                        <el-date-picker class="block" v-model="formModel.transfer" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                    </el-form-item>
+                </div>
+                <el-form-item label="转移对象：" prop="type" size="large">
+                    <div class="form-item-div">张三</div>
+                </el-form-item>
+                <el-form-item label="转移原因：" prop="textContent">
+                    <el-input v-model="formModel.textContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
+                </el-form-item>
+            </el-form>
         </HcCardItem>
 
         <template #action>
@@ -25,17 +62,55 @@ const useRoutes = useRoute()
 
 console.log(useRoutes.query)
 
+
+const tableColumn = [
+    {key: 'taskName', name: '任务名称'},
+    {key: 'description', name: '任务描述'},
+    {key: 'date', name: '完成日期', width: '160', align: 'center'},
+    {key: 'status', name: '状态', width: '100', align: 'center'},
+]
+const tableData = ref([
+    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
+    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
+    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
+    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
+])
+
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    title: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入节点名称"
+    },
+}
+
 </script>
 
 <style lang="scss" scoped>
 .hac-task-name-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: 1px solid #c5d7ff;
+    border-radius: 3px;
     .label {
-
+        position: relative;
+        padding: 12px;
+        background: #cddcff;
     }
     .name {
-
+        position: relative;
+        padding: 12px;
+        border-left: 1px solid #c5d7ff;
     }
 }
+.hac-task-text-box {
+    position: relative;
+    font-size: 14px;
+    margin-top: 14px;
+}
 </style>
 
 <style lang="scss">