|
@@ -5,6 +5,43 @@
|
|
<div class="label">任务名称</div>
|
|
<div class="label">任务名称</div>
|
|
<div class="name">【任务描述】申请【任务转移】</div>
|
|
<div class="name">【任务描述】申请【任务转移】</div>
|
|
</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>
|
|
</HcCardItem>
|
|
|
|
|
|
<template #action>
|
|
<template #action>
|
|
@@ -25,17 +62,55 @@ const useRoutes = useRoute()
|
|
|
|
|
|
console.log(useRoutes.query)
|
|
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>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.hac-task-name-box {
|
|
.hac-task-name-box {
|
|
|
|
+ position: relative;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ border: 1px solid #c5d7ff;
|
|
|
|
+ border-radius: 3px;
|
|
.label {
|
|
.label {
|
|
-
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 12px;
|
|
|
|
+ background: #cddcff;
|
|
}
|
|
}
|
|
.name {
|
|
.name {
|
|
-
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 12px;
|
|
|
|
+ border-left: 1px solid #c5d7ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+.hac-task-text-box {
|
|
|
|
+ position: relative;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin-top: 14px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|