计划管理的计划任务页面

src/styles/index.scss

@@ -17,7 +17,9 @@ html, body, #app {
 .el-scrollbar.hc--right-15 .el-scrollbar__bar {
     right: -15px;
 }
-
+.el-select.block {
+    width: 100%;
+}
 .hc-main-row {
     position: relative;
     width: 100%;

src/views/program/components/TaskTable.vue

@@ -37,11 +37,15 @@
             </div>
         </template>
         <template #extra>
+            <el-button size="large" type="danger" hc-btn v-if="isTableKey === 'links'">
+                <HcIcon name="close-circle"/>
+                <span>取消关联</span>
+            </el-button>
             <el-button size="large" type="success" hc-btn @click="relevanceClick">
                 <HcIcon name="link" :line="false"/>
                 <span>关联任务</span>
             </el-button>
-            <el-button size="large" type="primary" hc-btn>
+            <el-button size="large" :type="isTableKey === 'user'?'primary':'info'" :disabled="isTableKey !== 'user'" hc-btn @click="showChangeState">
                 <HcIcon name="edit-circle"/>
                 <span>变更状态</span>
             </el-button>
@@ -52,7 +56,7 @@
         </template>
 
         <!--关联任务-->
-        <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联任务" widths="62rem">
+        <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联任务" widths="62rem" @close="closeRelatedClick">
             <div class="hac-diy-dialog-body">
                 <div class="hac-dialog-header">
                     <div class="w-36">
@@ -118,6 +122,58 @@
                 <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
             </template>
         </HcDialog>
+
+        <!--变更状态-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :loading="changeStateLoading" :show="changeStateModal" title="变更任务状态" widths="62rem"
+                  @close="closeChangeStateClick" @save="saveChangeStateClick">
+            <div class="hac-change-state-dialog-body">
+                <div class="hac-dialog-table">
+                    <HcTable :isIndex="false" :column="tableStateColumn" :datas="tableStateData" :loading="tableStateLoading"/>
+                </div>
+                <div class="hac-dialog-form">
+                    <HcCardItem scrollbar>
+                        <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>
+                            <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="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" v-if="formModel.type === '3'">
+                                <el-select class="block" v-model="formModel.user" multiple filterable allow-create default-first-option :reserve-keyword="false">
+                                    <el-option label="张三" value="1"/>
+                                    <el-option label="李四" value="2"/>
+                                    <el-option label="王五" value="3"/>
+                                    <el-option label="王麻子" value="4"/>
+                                </el-select>
+                            </el-form-item>
+                            <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>
+                </div>
+            </div>
+        </HcDialog>
+
     </HcCard>
 </template>
 
@@ -243,8 +299,79 @@ const saveRelatedClick = () => {
     relatedLoading.value = false
     relatedModal.value = false
 }
+
+//变更状态的弹窗
+const changeStateLoading = ref(false)
+const changeStateModal = ref(false)
+
+//显示变更状态的弹窗
+const showChangeState = () => {
+    changeStateLoading.value = false
+    changeStateModal.value = true
+}
+
+
+//变更任务状态表格
+const tableStateLoading = ref(false)
+const tableStateColumn = [
+    {key: 'key1', name: '任务名称'},
+    {key: 'key2', name: '任务描述'},
+    {key: 'key3', name: '状态', width: '120', align: 'center'},
+]
+const tableStateData = ref([
+    {id: 1, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
+    {id: 2, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
+    {id: 3, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
+    {id: 4, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
+    {id: 5, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
+])
+
+
+//任务操作数据
+const formRef = ref(null)
+const formModel = ref({
+    type: '1',
+})
+const formRules = {
+    title: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入节点名称"
+    },
+}
+
+
+//关闭变更状态弹窗
+const closeChangeStateClick = () => {
+    changeStateLoading.value = false
+    changeStateModal.value = false
+}
+
+//提交变更状态弹窗
+const saveChangeStateClick = () => {
+    changeStateLoading.value = false
+    changeStateModal.value = false
+}
 </script>
 
 <style lang="scss" scoped>
+.hac-change-state-dialog-body {
+    position: relative;
+    height: 100%;
+    .hac-dialog-table {
+        position: relative;
+        height: 40%;
+    }
+    .hac-dialog-form {
+        position: relative;
+        height: 60%;
+        padding-top: 20px;
+    }
+}
+</style>
 
+<style lang="scss">
+.hac-change-state-dialog-body .hac-dialog-form .hc-card-item-box {
+    background: #f7f7f8;
+}
 </style>