任务管理

src/views/tasks/components/hc-data/task-notes.vue

@@ -0,0 +1,137 @@
+<template>
+    <hc-new-dialog v-model="isShow" ui="hc-task-notes-dialog" is-table widths="42rem" title="批注信息" @close="cancelClick">
+        <div class="hc-task-notes-body">
+            <div class="notes-content">
+                <el-scrollbar>
+                    <div v-for="item in 10" class="task-notes-item">
+                        <div class="header">
+                            <div class="col">批注人：系统管理员</div>
+                            <div class="col">批准时间：2023-12-18</div>
+                        </div>
+                        <div class="content">
+                            <div class="col">批注内容：</div>
+                            <div class="text">内容</div>
+                        </div>
+                    </div>
+                </el-scrollbar>
+            </div>
+            <div class="notes-action">
+                <el-input v-model="formNotes" type="textarea" resize="none" placeholder="批注信息" />
+            </div>
+        </div>
+        <template #footer>
+            <div class="hc-task-notes-footer">
+                <el-button @click="cancelClick">取消批注</el-button>
+                <el-button type="primary" @click="confirmClick">确定批注</el-button>
+            </div>
+        </template>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    option: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听
+const options = ref(props.row)
+const taskInfo = ref({})
+
+watch(() => props.option, (val) => {
+    options.value = val
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) {
+        setTaskInfo()
+    }
+})
+
+//设置任务信息
+const setTaskInfo = async () => {
+
+}
+
+const formNotes = ref('')
+
+
+const confirmClick = () => {
+
+}
+
+//取消审批
+const cancelClick = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-task-notes-body {
+    position: relative;
+    height: 100%;
+    .notes-content {
+        position: relative;
+        height: calc(100% - 65px);
+        .task-notes-item {
+            position: relative;
+            border-radius: 4px;
+            margin-bottom: 12px;
+            padding: 10px;
+            border: 1px solid #dad8d8;
+            .header {
+                position: relative;
+                display: flex;
+                align-items: center;
+                margin-bottom: 12px;
+                .col + .col {
+                    margin-left: 50px;
+                }
+            }
+            .content {
+                position: relative;
+                display: flex;
+                align-items: start;
+                .text {
+                    position: relative;
+                    flex: 1;
+                }
+            }
+        }
+    }
+    .notes-action {
+        position: relative;
+        padding-top: 12px;
+        border-top: 1px solid #e5e5e5;
+    }
+}
+.hc-task-notes-footer {
+    position: relative;
+    text-align: center;
+}
+</style>
+
+<style lang="scss">
+.el-overlay-dialog .el-dialog.hc-task-notes-dialog {
+    --el-dialog-margin-top: 10vh;
+    height: 80vh;
+}
+.hc-task-notes-body .notes-content .el-scrollbar__bar.is-vertical {
+    right: -10px;
+}
+</style>

src/views/tasks/components/hc-data/task-review.vue

@@ -61,12 +61,15 @@
             </div>
         </template>
     </hc-new-dialog>
+    <!-- 批注 -->
+    <HcTaskNotes v-model="isNotesShow" />
 </template>
 
 <script setup>
 import { nextTick, ref, watch } from 'vue'
 import { getArrValue, getRandom } from 'js-fast-way'
 import HcTaskForm from './task-form.vue'
+import HcTaskNotes from './task-notes.vue'
 
 const props = defineProps({
     tabs: {
@@ -224,8 +227,9 @@ const tableRowClick = ({ row }) => {
 }
 
 //批注
+const isNotesShow = ref(false)
 const rowRemarkClick = (row) => {
-
+    isNotesShow.value = true
 }