门户，任务管理

src/styles/index.scss

@@ -5,7 +5,9 @@ html, body, #app {
 *:focus-visible {
     outline: none;
 }
-
+.el-message {
+    max-width: 400px;
+}
 .el-scrollbar.hc-main-scrollbar .el-scrollbar__bar {
     right: -18px;
 }

src/views/home/task-details.vue

@@ -19,7 +19,7 @@
         </HcCardItem>
 
         <HcCardItem title="操作任务" class="mt-4">
-            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="" :disabled="dataType !== 'to-do'">
                 <el-form-item label="变更类别：" prop="type" size="large">
                     <el-radio-group v-model="formModel.type" size="large">
                         <el-radio label="1">已完成</el-radio>
@@ -54,31 +54,49 @@
         </HcCardItem>
 
         <template #action>
-            <el-button size="large" hc-btn>
+            <el-button size="large" type="info" hc-btn @click="goBackClick">
                 <HcIcon name="arrow-go-back"/>
-                <span>取消并返回</span>
+                <span v-if="dataType === 'to-do'">取消并返回</span>
+                <span v-else>返回</span>
             </el-button>
-            <el-button size="large" type="danger" hc-btn>
+            <el-button size="large" type="danger" hc-btn @click="groundsShow" v-if="dataType === 'to-do'">
                 <HcIcon name="arrow-go-forward"/>
                 <span>驳回申请</span>
             </el-button>
-            <el-button size="large" type="primary" hc-btn>
+            <el-button size="large" type="primary" hc-btn @click="doubleClick" v-if="dataType === 'to-do'">
                 <HcIcon name="check-double"/>
                 <span>审核通过</span>
             </el-button>
         </template>
+
+        <HcDialog :loading="groundsLoading" :show="groundsModal" title="请填写驳回理由" widths="600px" @close="closeGroundsClick" @save="saveGroundsClick">
+            <el-form ref="formGroundsRef" :model="formGroundsModel" :rules="formGroundsRules" label-width="0" size="large">
+                <el-form-item prop="grounds">
+                    <el-input v-model="formGroundsModel.grounds" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请输入驳回理由" type="textarea"/>
+                </el-form-item>
+            </el-form>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
+import {onActivated, ref} from "vue";
 import {useRouter, useRoute} from 'vue-router'
 
+//初始变量
 const router = useRouter()
 const useRoutes = useRoute()
+const dataType = ref(useRoutes?.query?.type ?? '')
+const dataId = ref(useRoutes?.query?.id ?? '')
 
-console.log(useRoutes.query)
+//缓存页面被激活时
+onActivated(() => {
+    dataType.value = useRoutes?.query?.type ?? ''
+    dataId.value = useRoutes?.query?.id ?? ''
+    console.log(useRoutes.query)
+})
 
+//任务表格
 const tableColumn = [
     {key: 'taskName', name: '任务名称'},
     {key: 'description', name: '任务描述'},
@@ -92,6 +110,7 @@ const tableData = ref([
     {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
 ])
 
+//任务操作数据
 const formRef = ref(null)
 const formModel = ref({
     type: '1',
@@ -104,6 +123,47 @@ const formRules = {
     },
 }
 
+const groundsShow = () => {
+    groundsLoading.value = false
+    groundsModal.value = true
+}
+
+//驳回弹窗
+const groundsLoading = ref(false)
+const groundsModal = ref(false)
+
+//驳回表单
+const formGroundsRef = ref(null)
+const formGroundsModel = ref({grounds: ''})
+const formGroundsRules = {
+    grounds: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入驳回理由"
+    },
+}
+
+//确认驳回
+const saveGroundsClick = () => {
+    closeGroundsClick()
+    window?.$message.warning('驳回成功!')
+}
+
+//取消驳回
+const closeGroundsClick = () => {
+    groundsModal.value = false
+    groundsLoading.value = false
+}
+
+//审核通过
+const doubleClick = () => {
+    window?.$message.success('审核通过!')
+}
+
+//返回
+const goBackClick = () => {
+    router.back()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -130,7 +190,3 @@ const formRules = {
     margin-top: 14px;
 }
 </style>
-
-<style lang="scss">
-
-</style>