日志填报

src/api/modules/task/logs.js

@@ -18,7 +18,7 @@ export default {
         },msg);
     },
     //日志任务列表-获取当前用户当日的任务信息
-    async getLogTaskList(form, msg = false) {
+    async getLogTaskList(form= {}, msg = false) {
         return httpApi({
             url: '/api/blade-control/log/task/list',
             method: 'post',

src/views/task/logs/components/logs-content.vue

@@ -0,0 +1,165 @@
+<template>
+    <HcCardItem scrollbar>
+        <div class="hac-logs-user-info">
+            <img class="user-avatar" :src="logData?.headPicture || avatarPng" alt=""/>
+            <div class="user-info">
+                <div class="name">{{logData?.logTitle}}</div>
+                <div class="time">{{logData?.createTime}}{{isEditState?'':' 添加'}}</div>
+            </div>
+        </div>
+        <div class="hc-logs-content-item">
+            <div class="title">风险预警</div>
+            <div class="content">
+                <el-input v-model="logData.riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState?'请输入文字说明':'无'" type="textarea"/>
+            </div>
+        </div>
+
+        <div class="hc-logs-content-item" v-if="!isEditState">
+            <div class="title">今日工作内容</div>
+            <div class="warning-tip">警告：有三条任务已超期逾期未完成，请及时完成！</div>
+            <div class="content">
+                <HcTable :isIndex="false" :column="taskColumn" :datas="logData?.taskList ?? []" :row-style="tableRowStyle"/>
+            </div>
+        </div>
+
+        <div class="hc-logs-content-item" v-if="isEditState">
+            <div class="title">今日工作范围勾选</div>
+            <div class="extra-tip">提示：仅勾当日的工作内容，如果勾选项任务已完成，则点击【变更已完成】进行提交部门领导审批</div>
+            <div class="content">
+                <HcTable :isIndex="false" isCheck :column="tableColumn" :datas="tableData" @selection-change="tableSelectionChange">
+                    <template #action="{row, index}">
+                        <el-button size="small" type="primary" @click="statusClick(row)">{{row.statusName === '未完成' ? '变更已完成': '已完成' }}</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </div>
+
+        <div class="hc-logs-content-item">
+            <div class="title">工作内容描述</div>
+            <div class="content">
+                <el-input v-model="logData.workDesc" :autosize="{ minRows: 5, maxRows: 8 }" :readonly="!isEditState" :placeholder="isEditState?'请输入工作内容描述':'无'" type="textarea"/>
+            </div>
+        </div>
+
+        <HcListItem title="差旅报销:" isCenter class="mt-8" v-if="logData?.expenseReimbursementAmount > 0">
+            <el-input class="w-72" v-model="logData.expenseReimbursementAmount" :readonly="!isEditState" placeholder="报销金额(元)"/>
+        </HcListItem>
+    </HcCardItem>
+</template>
+
+<script setup>
+import {ref, watch, onMounted} from "vue";
+import logsApi from "~api/task/logs";
+import {deepClone, getArrValue} from "js-fast-way"
+import avatarPng from '~src/assets/images/avatar.png';
+
+//参数
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    edit: {
+        type: Boolean,
+        default: true
+    }
+})
+
+//变量
+const isEditState = ref(props.edit);
+const logData = ref(props.data);
+
+//渲染完成
+onMounted(() => {
+    if (isEditState.value) {
+        getTableData()
+    }
+})
+
+//监听
+watch(() => [
+    props.edit,
+], ([edit]) => {
+    isEditState.value = edit
+    if (edit) {
+        getTableData()
+    }
+})
+
+//深度监听
+watch(() => [
+    props.data,
+], ([data]) => {
+    logData.value = data
+}, {deep: true})
+
+//表格
+const taskColumn = [
+    {key: 'taskDesc', name: '任务内容'},
+    {key: 'startAndEndDate', name: '起止日期', width: '280', align: 'center'},
+    {key: 'statusName', name: '状态', width: '160', align: 'center'},
+]
+
+//表格行样式
+const tableRowStyle = ({row}) => {
+    if (row.statusName === '未完成') {
+        return {
+            '--el-fill-color-lighter': 'rgba(189, 49, 36, 0.79)',
+            '--el-table-row-hover-bg-color': 'var(--el-fill-color-lighter)',
+            'background-color': 'var(--el-fill-color-lighter)',
+            'color': 'white'
+        }
+    }
+}
+
+//表格
+const tableColumn = [
+    {key: 'taskDesc', name: '任务内容'},
+    {key: 'action', name: '操作', width: 130, align: 'center'}
+]
+const tableData = ref([])
+const getTableData = async () => {
+    const {error, code, data, msg} = await logsApi.getLogTaskList()
+    //判断状态
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data)
+    } else {
+        tableData.value = []
+        window.$message?.error(msg)
+    }
+}
+
+//多选事件
+const tableSelectionChange = (rows) => {
+    window.$message?.error('因为开发时，没有测试数据，所以暂时没做相关功能')
+}
+
+//变更状态
+const statusClick = async (row) => {
+    const {error, code, msg} = await logsApi.setLogTaskComplete({
+        taskId: row.id,
+        logId: ''
+    })
+    //判断状态
+    if (!error && code === 200) {
+        window.$message?.success(msg)
+        getTableData()
+    } else {
+        window.$message?.error(msg)
+    }
+}
+
+//获取表单数据
+const getLogForm = () => {
+    return deepClone(logData.value)
+}
+
+// 暴露出去
+defineExpose({
+    getLogForm
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~src/styles/task/logs.scoped.scss";
+</style>

src/views/task/logs/index.vue

@@ -36,11 +36,11 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="warning" v-if="isEditState" @click="isEditState = false">
+            <el-button size="large" type="warning" v-if="isEditState" @click="submitLogsClick">
                 <HcIcon name="check-double"/>
                 <span>提交日志</span>
             </el-button>
-            <el-button size="large" type="primary" v-else @click="isEditState = true">
+            <el-button size="large" type="primary" v-else @click="editLogsClick">
                 <HcIcon name="add"/>
                 <span>写日志</span>
             </el-button>
@@ -52,7 +52,7 @@
                         <div class="label">{{key}}</div>
                         <template v-for="items in item">
                             <div class="user-item" :class="userItemId.id === items.id?'cur':''" @click="userItemClick(items)">
-                                <img class="avatar" :src="items?.headPicture" alt=""/>
+                                <img class="avatar" :src="items?.headPicture || avatarPng" alt=""/>
                                 <div class="name">{{items?.logTitle}}</div>
                                 <div class="state">
                                     <span class="text-xl text-red mr-2">
@@ -65,53 +65,9 @@
                     </div>
                 </HcCardItem>
             </div>
-            <div class="hac-logs-content-body">
-                <HcCardItem scrollbar>
-                    <div class="hac-logs-user-info">
-                        <img class="user-avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
-                        <div class="user-info">
-                            <div class="name">张三的日志</div>
-                            <div class="time">2023-02-12 21:08 添加</div>
-                        </div>
-                    </div>
-                    <div class="hc-logs-content-item">
-                        <div class="title">风险预警</div>
-                        <div class="content">
-                            <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState?'请输入文字说明':'无'" type="textarea"/>
-                        </div>
-                    </div>
-
-                    <div class="hc-logs-content-item" v-if="!isEditState">
-                        <div class="title">今日工作内容</div>
-                        <div class="warning-tip">警告：有三条任务已超期逾期未完成，请及时完成！</div>
-                        <div class="content">
-                            <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :row-style="tableRowStyle"/>
-                        </div>
-                    </div>
-
-                    <div class="hc-logs-content-item" v-if="isEditState">
-                        <div class="title">今日工作范围勾选</div>
-                        <div class="extra-tip">提示：仅勾当日的工作内容，如果勾选项任务已完成，则点击【变更已完成】进行提交部门领导审批</div>
-                        <div class="content">
-                            <HcTable :isIndex="false" isCheck :column="tableColumn1" :datas="tableData1" @selection-change="tableSelectionChange">
-                                <template #action="{row, index}">
-                                    <el-button size="small" type="primary">变更已完成</el-button>
-                                </template>
-                            </HcTable>
-                        </div>
-                    </div>
-
-                    <div class="hc-logs-content-item">
-                        <div class="title">工作内容描述</div>
-                        <div class="content">
-                            <el-input v-model="riskWarning" :autosize="{ minRows: 5, maxRows: 8 }" :readonly="!isEditState" :placeholder="isEditState?'请输入工作内容描述':'无'" type="textarea"/>
-                        </div>
-                    </div>
-
-                    <HcListItem title="差旅报销:" isCenter class="mt-8" v-if="isEditState">
-                        <el-input class="w-72" placeholder="报销金额(元)"/>
-                    </HcListItem>
-                </HcCardItem>
+            <div class="hac-logs-content-body" v-loading="logLoading">
+                <HcLogsContent :data="logForm" ref="logsRef" v-if="isEditState"/>
+                <HcLogsContent :data="logDetail" :edit="false" v-else/>
             </div>
         </div>
     </HcCard>
@@ -120,10 +76,18 @@
 <script setup>
 import {onActivated, ref} from "vue";
 import logsApi from "~api/task/logs";
+import {useAppStore} from "~src/store";
 import {getObjValue} from "js-fast-way";
+import HcLogsContent from "./components/logs-content.vue";
+import avatarPng from '~src/assets/images/avatar.png';
+import dayjs from 'dayjs';
+
+const useAppState = useAppStore()
+const userInfo = ref(useAppState.getUserInfo);
 
 // 调用时机为首次挂载, 以及每次从缓存中被重新插入时
 onActivated(() => {
+    isEditState.value = false
     getLogList()
 })
 
@@ -132,7 +96,11 @@ const searchForm = ref({orgDept: null, userId: null, startTime: null, endTime: n
 
 //搜索
 const searchClick = () => {
-    getLogList()
+    if (!isEditState.value) {
+        getLogList()
+    } else {
+        window.$message?.warning('请先提交日志或退出填写日志状态')
+    }
 }
 
 //重置
@@ -165,11 +133,16 @@ const getLogList = async () => {
 //用户列表点击
 const userItemId = ref({})
 const userItemClick = (item) => {
-    userItemId.value = item
-    getLogDetail()
+    if (!isEditState.value) {
+        userItemId.value = item
+        getLogDetail()
+    } else {
+        window.$message?.warning('请先提交日志或退出填写日志状态')
+    }
 }
 
 //日志填报详情
+const logDetail = ref({})
 const getLogDetail = async () => {
     const item = userItemId.value
     const {error, code, data, msg} = await logsApi.getLogDetail({
@@ -177,56 +150,53 @@ const getLogDetail = async () => {
     })
     //判断状态
     if (!error && code === 200) {
-        console.log(data)
+        logDetail.value = getObjValue(data)
     } else {
+        logDetail.value = {}
         window.$message?.error(msg)
     }
 }
 
-
-
-//风险预警
-const riskWarning = ref('')
+//日志填报表单
+const logForm = ref({
+    headPicture: '',
+    logTitle: '',
+    createTime: '',
+    riskWarning: '',
+    workDesc: '',
+    expenseReimbursementAmount: '',
+})
 
 //当前状态，false查看模式，true写日志模式
 const isEditState = ref(false)
-
-//表格
-const tableColumn = [
-    {key: 'key1', name: '任务内容'},
-    {key: 'key2', name: '起止日期', width: '280', align: 'center'},
-    {key: 'key3', name: '状态', width: '160', align: 'center'},
-]
-const tableData = ref([
-    {id: 1, key1: 'xx', key2: 'xx', key3: '已完成'},
-    {id: 2, key1: 'xx', key2: 'xx', key3: '未完成'},
-    {id: 3, key1: 'xx', key2: 'xx', key3: '未完成'},
-    {id: 4, key1: 'xx', key2: 'xx', key3: '未完成'},
-    {id: 5, key1: 'xx', key2: 'xx', key3: '未完成'},
-])
-
-//表格行样式
-const tableRowStyle = ({row}) => {
-    if (row.id === 2) {
-        return {
-            '--el-fill-color-lighter': 'rgba(189, 49, 36, 0.79)',
-            '--el-table-row-hover-bg-color': 'var(--el-fill-color-lighter)',
-            'background-color': 'var(--el-fill-color-lighter)',
-            'color': 'white'
-        }
-    }
+const editLogsClick = () => {
+    const {real_name, avatar} = userInfo.value
+    isEditState.value = true
+    logForm.value.headPicture = avatar || avatarPng
+    logForm.value.logTitle = real_name + '的日志'
+    logForm.value.createTime = dayjs().format('YYYY-MM-DD')
 }
 
-//表格
-const tableColumn1 = [
-    {key: 'key1', name: '任务内容'},
-    {key: 'action', name: '操作', width: 130, align: 'center'}
-]
-const tableData1 = ref([{id: 1, key1: 'xx'}, {id: 2, key1: 'xx'}, {id: 3, key1: 'xx'}, {id: 4, key1: 'xx'}])
-
-//多选事件
-const tableSelectionChange = (rows) => {
-    console.log(rows)
+const logsRef = ref(null)
+const logLoading = ref(false)
+
+const submitLogsClick = async () => {
+    logLoading.value = true
+    const form = logsRef.value?.getLogForm()
+    //移除不必要的字段
+    delete form.createTime
+    delete form.headPicture
+    delete form.logTitle
+    //发起请求
+    const {error, code, msg} = await logsApi.setLogSubmit(form)
+    //判断状态
+    logLoading.value = false
+    if (!error && code === 200) {
+        isEditState.value = false
+        getLogList()
+    } else {
+        window.$message?.error(msg)
+    }
 }
 </script>