门户，任务管理

src/styles/index.scss

@@ -120,3 +120,9 @@ html, body, #app {
 .hc-table-ref-box.no-border {
     border: 0;
 }
+
+.el-card.hc-card-box .el-card__body .hc-card-action-box {
+    .el-button + .el-button {
+        margin-left: 32px;
+    }
+}

src/views/home/task-details.vue

@@ -27,27 +27,44 @@
                         <el-radio label="3">任务转移</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <div class="flex">
+                <el-form-item label="完成时间：" prop="finish_time" class="w-72" v-if="formModel.type === '1'">
+                    <el-date-picker class="block" v-model="formModel.finish_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                </el-form-item>
+                <el-form-item label="延期时间：" prop="delay_time" class="w-72" v-if="formModel.type === '2'">
+                    <el-date-picker class="block" v-model="formModel.delay_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                </el-form-item>
+                <el-form-item label="延期原因：" prop="delay_cause" v-if="formModel.type === '2'">
+                    <el-input v-model="formModel.delay_cause" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
+                </el-form-item>
+                <div class="flex" v-if="formModel.type === '3'">
                     <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 label="转移后剩余工作任务完成日期：" prop="complete" class="w-96 ml-4">
+                        <el-date-picker class="block" v-model="formModel.complete" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                     </el-form-item>
                 </div>
-                <el-form-item label="转移对象：" prop="type" size="large">
+                <el-form-item label="转移对象：" prop="type" size="large" v-if="formModel.type === '3'">
                     <div class="form-item-div">张三</div>
                 </el-form-item>
-                <el-form-item label="转移原因：" prop="textContent">
+                <el-form-item label="转移原因：" prop="textContent" v-if="formModel.type === '3'">
                     <el-input v-model="formModel.textContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                 </el-form-item>
             </el-form>
         </HcCardItem>
 
         <template #action>
-            <el-button size="large" type="primary">
-                <HcIcon name="search-2"/>
-                <span>搜索</span>
+            <el-button size="large" hc-btn>
+                <HcIcon name="arrow-go-back"/>
+                <span>取消并返回</span>
+            </el-button>
+            <el-button size="large" type="danger" hc-btn>
+                <HcIcon name="arrow-go-forward"/>
+                <span>驳回申请</span>
+            </el-button>
+            <el-button size="large" type="primary" hc-btn>
+                <HcIcon name="check-double"/>
+                <span>审核通过</span>
             </el-button>
         </template>
     </HcCard>
@@ -62,7 +79,6 @@ const useRoutes = useRoute()
 
 console.log(useRoutes.query)
 
-
 const tableColumn = [
     {key: 'taskName', name: '任务名称'},
     {key: 'description', name: '任务描述'},
@@ -77,7 +93,9 @@ const tableData = ref([
 ])
 
 const formRef = ref(null)
-const formModel = ref({})
+const formModel = ref({
+    type: '1',
+})
 const formRules = {
     title: {
         required: true,