日志变更状态

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

@@ -1,84 +1,102 @@
 <template>
     <HcCardItem scrollbar>
         <div class="hac-logs-user-info">
-            <img class="user-avatar" :src="logData?.headPicture || avatarPng" alt=""/>
+            <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 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="title">
+                风险预警
+            </div>
             <div class="content">
-                <el-input v-model="logData.riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState?'请输入文字说明':'无'" type="textarea"/>
+                <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" v-if="undefinedNum>0">警告：有{{undefinedNum}}条任务已超期逾期未完成，请及时完成！</div>
+        <div v-if="!isEditState" class="hc-logs-content-item">
+            <div class="title">
+                今日工作内容
+            </div>
+            <div v-if="undefinedNum > 0" class="warning-tip">
+                警告：有{{ undefinedNum }}条任务已超期逾期未完成，请及时完成！
+            </div>
             <div class="content">
-                <HcTable :isIndex="false" :column="taskColumn" :datas="logData?.taskList ?? []" :row-style="tableRowStyle"/>
+                <HcTable :is-index="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 v-if="isEditState" class="hc-logs-content-item">
+            <div class="title">
+                今日工作范围
+            </div>
+            <div class="extra-tip">
+                提示：如果该任务已完成，则点击【变更已完成】进行提交部门领导审批
+            </div>
             <div class="content">
-                <HcTable :isIndex="false"  :column="tableColumn" :datas="tableData">
-                    <template #action="{row, index}">
+                <HcTable :is-index="false" :column="tableColumn" :datas="tableData">
+                    <template #action="{ row, index }">
                         <!-- <el-button size="small" type="primary" @click="statusClick(row)">{{row.statusName === '未完成' ? '变更已完成': '已完成' }}</el-button> -->
-                        <el-button size="small" type="primary" @click="statusClick(row)" :disabled="row.status===1||row.status==2">变更已完成</el-button>
+                        <el-button size="small" type="primary" :disabled="row.status === 1 || row.status === 2" @click="statusClick(row)">
+                            变更已完成
+                        </el-button>
                     </template>
                 </HcTable>
             </div>
         </div>
 
         <div class="hc-logs-content-item">
-            <div class="title">工作内容描述</div>
+            <div class="title">
+                工作内容描述
+            </div>
             <div class="content">
-                <el-input v-model="logData.workDesc" :autosize="{ minRows: 5, maxRows: 8 }" :readonly="!isEditState" :placeholder="isEditState?'请输入工作内容描述':'无'" type="textarea"/>
+                <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 v-if="logData?.expenseReimbursementAmount > 0" title="差旅报销:" is-center class="mt-8">
+            <el-input v-model="logData.expenseReimbursementAmount" class="w-72" :readonly="!isEditState" placeholder="报销金额(元)" />
         </HcListItem>
     </HcCardItem>
 </template>
 
 <script setup>
-import {ref, watch, onActivated, onMounted} from "vue";
-import logsApi from "~api/task/logs";
-import {deepClone, getArrValue} from "js-fast-way"
-import avatarPng from '~src/assets/images/avatar.png';
+import { onActivated, onMounted, ref, watch } 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: () => ({})
+        default: () => ({}),
     },
     edit: {
         type: Boolean,
-        default: true
+        default: true,
     },
     isShowmyEdit:{
         type: Boolean,
-        default: false
+        default: false,
     },
     undefinedNum:{
         type: Number,
-        default: 0
-    }
+        default: 0,
+    },
 })
 
 //变量
-const isEditState = ref(props.edit);
-const logData = ref(props.data);
-const ismyEdit=ref(props.isShowmyEdit)
-const undefinedNum=ref(props.undefinedNum)//未完成数量
+const isEditState = ref(props.edit)
+const logData = ref(props.data)
+const ismyEdit = ref(props.isShowmyEdit)
+const undefinedNum = ref(props.undefinedNum)//未完成数量
 
 //渲染完成
 onMounted(() => {
@@ -95,49 +113,49 @@ watch(() => [
     if (edit) {
         getTableData()
     }
-},{deep: true})
+}, { deep: true })
 
 //深度监听
 watch(() => [
     props.data,
     props.isShowmyEdit,
-    props.undefinedNum
+    props.undefinedNum,
     
-], ([data,edit,num]) => {
+], ([data, edit, num]) => {
     logData.value = data
-    undefinedNum.value=num
-    console.log(edit,'edit');
-    console.log(ismyEdit.value,'ismyEdit');
-}, {deep: true})
+    undefinedNum.value = num
+    console.log(edit, 'edit')
+    console.log(ismyEdit.value, 'ismyEdit')
+}, { deep: true })
 
 //表格
 const taskColumn = [
-    {key: 'taskDesc', name: '任务内容'},
-    {key: 'startAndEndDate', name: '起止日期', width: '280', align: 'center'},
-    {key: 'statusName', name: '状态', width: '160', align: 'center'},
+    { key: 'taskDesc', name: '任务内容' },
+    { key: 'startAndEndDate', name: '起止日期', width: '280', align: 'center' },
+    { key: 'statusName', name: '状态', width: '160', align: 'center' },
 ]
 
 //表格行样式
-const tableRowStyle = ({row}) => {
+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'
+            'color': 'white',
         }
     }
 }
 
 //表格
 const tableColumn = [
-    {key: 'taskDesc', name: '任务内容'},
-    {key: 'action', name: '操作', width: 130, align: 'center'}
+    { key: 'taskDesc', name: '任务内容' },
+    { key: 'action', name: '操作', width: 130, align: 'center' },
 ]
 const tableData = ref([])
 const getTableData = async () => {
-    if(!ismyEdit.value){
-        const {error, code, data, msg} = await logsApi.getLogTaskList()
+    if (!ismyEdit.value) {
+        const { error, code, data, msg } = await logsApi.getLogTaskList()
         //判断状态
         if (!error && code === 200) {
             tableData.value = getArrValue(data)
@@ -145,28 +163,27 @@ const getTableData = async () => {
             tableData.value = []
             window.$message?.error(msg)
         }
-    }else{
-        tableData.value= logData.value.taskList
+    } else {
+        tableData.value = logData.value.taskList
     }  
  
  
 }
 
-//多选事件
-const tableSelectionChange = (rows) => {
-    window.$message?.error('因为开发时，没有测试数据，所以暂时没做相关功能')
-}
+
 
 //变更状态
 const statusClick = async (row) => {
-    const {error, code, msg} = await logsApi.setLogTaskComplete({
+    const { error, code, msg } = await logsApi.setLogTaskComplete({
         taskId: row.id,
-        logId: ismyEdit.value?logData.value.id:''
+        logId: ismyEdit.value ? logData.value.id : '',
     })
     //判断状态
     if (!error && code === 200) {
         window.$message?.success(msg)
-        getTableData()
+        row.status = 1
+        row.statusName = '待审批'
+        // getTableData().then()
     } else {
         window.$message?.error(msg)
     }
@@ -179,7 +196,7 @@ const getLogForm = () => {
 
 // 暴露出去
 defineExpose({
-    getLogForm
+    getLogForm,
 })
 </script>