|
|
@@ -1,10 +1,404 @@
|
|
|
<template>
|
|
|
- <HcCard>
|
|
|
- 等待开发
|
|
|
- </HcCard>
|
|
|
+ <div class="hac-logs-main-body">
|
|
|
+ <HcCardItem ui="hac-card-item" style="height: 68px;">
|
|
|
+ <div class="hac-card-item-logs-header">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="w-36">
|
|
|
+ <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
|
|
|
+ <el-option label="研发部门" value="1"/>
|
|
|
+ <el-option label="业务部门" value="2"/>
|
|
|
+ <el-option label="人事部门" value="3"/>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="w-36 ml-2">
|
|
|
+ <el-select v-model="searchForm.state" block clearable placeholder="选择人员" size="large">
|
|
|
+ <el-option label="张三" value="1"/>
|
|
|
+ <el-option label="李四" value="2"/>
|
|
|
+ <el-option label="王五" value="3"/>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="w-36 ml-4">
|
|
|
+ <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
|
|
|
+ </div>
|
|
|
+ <div class="mx-2">~</div>
|
|
|
+ <div class="w-36">
|
|
|
+ <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
|
|
|
+ </div>
|
|
|
+ <div class="ml-4">
|
|
|
+ <el-button size="large" type="primary" @click="searchClick">
|
|
|
+ <HcIcon name="search-2"/>
|
|
|
+ <span>搜索</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2">
|
|
|
+ <el-button size="large" @click="resetClick">
|
|
|
+ <HcIcon name="close-circle"/>
|
|
|
+ <span>重置</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <el-button size="large" type="warning" v-if="isEditState" @click="isEditState = false">
|
|
|
+ <HcIcon name="check-double"/>
|
|
|
+ <span>提交日志</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button size="large" type="primary" v-else @click="isEditState = true">
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ <span>写日志</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="mt-4 hac-logs-row-body">
|
|
|
+ <div class="hac-logs-user-list-body">
|
|
|
+ <HcCardItem scrollbar ui="hac-card-item">
|
|
|
+ <div class="hac-user-list-item">
|
|
|
+ <div class="label">昨天</div>
|
|
|
+ <div class="user-item">
|
|
|
+ <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
|
|
|
+ <div class="name">张三的日志</div>
|
|
|
+ <div class="state">已读</div>
|
|
|
+ </div>
|
|
|
+ <div class="user-item cur">
|
|
|
+ <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
|
|
|
+ <div class="name">张三的日志</div>
|
|
|
+ <div class="state">已读</div>
|
|
|
+ </div>
|
|
|
+ <div class="user-item">
|
|
|
+ <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
|
|
|
+ <div class="name">张三的日志</div>
|
|
|
+ <div class="state">已读</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hac-user-list-item">
|
|
|
+ <div class="label">2023-04-23 星期一</div>
|
|
|
+ <div class="user-item">
|
|
|
+ <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
|
|
|
+ <div class="name">张三的日志</div>
|
|
|
+ <div class="state">已读</div>
|
|
|
+ </div>
|
|
|
+ <div class="user-item">
|
|
|
+ <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
|
|
|
+ <div class="name">张三的日志</div>
|
|
|
+ <div class="state">已读</div>
|
|
|
+ </div>
|
|
|
+ <div class="user-item">
|
|
|
+ <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
|
|
|
+ <div class="name">张三的日志</div>
|
|
|
+ <div class="state">已读</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ </div>
|
|
|
+ <div class="hac-logs-content-body">
|
|
|
+ <HcCardItem scrollbar ui="hac-card-item">
|
|
|
+ <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>
|
|
|
+ <HcCardItem title="风险预警" ui="hac-bg-grey mt-12">
|
|
|
+ <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState?'请输入文字说明':'无'" type="textarea"/>
|
|
|
+ </HcCardItem>
|
|
|
+
|
|
|
+ <div class="hac-card-title mt-4">
|
|
|
+ <span class="mr-5">今日工作内容</span>
|
|
|
+ <el-button _icon hc-btn size="small" type="primary" v-if="isEditState">
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-if="isEditState">
|
|
|
+ <div class="mt-6 hac-log-card-item">
|
|
|
+ <HcCardItem ui="hac-bg-grey">
|
|
|
+ <template #header>
|
|
|
+ <div class="ml-4">关联的任务</div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button size="default" type="primary" hc-btn @click="associatedTask">
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ <span>关联任务</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <HcTable :isIndex="false" :column="tableTaskColumn" :datas="tableTaskData">
|
|
|
+ <template #key2="{row}">
|
|
|
+ <el-input v-model="row.key2" placeholder="进度(%)"/>
|
|
|
+ </template>
|
|
|
+ <template #action="{row,index}">
|
|
|
+ <el-button plain size="small" type="danger">
|
|
|
+ <HcIcon name="close"/>
|
|
|
+ <span>移除</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+
|
|
|
+ <div class="title-label mt-6 mb-3">工作内容描述</div>
|
|
|
+ <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
|
|
|
+
|
|
|
+ <el-divider class="title-label-divider" content-position="left" border-style="dashed">费用报销</el-divider>
|
|
|
+
|
|
|
+ <div class="hac-log-form-box">
|
|
|
+ <el-form ref="formRef" inline :model="formModel" :rules="formRules">
|
|
|
+ <el-form-item label="费用报销：" prop="key1" class="w-72">
|
|
|
+ <el-select v-model="formModel.key1" block clearable placeholder="费用报销">
|
|
|
+ <el-option label="审计费" value="1"/>
|
|
|
+ <el-option label="招聘费" value="2"/>
|
|
|
+ <el-option label="水电费" value="3"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="费用金额：" prop="key2" class="w-72">
|
|
|
+ <el-input v-model="formModel.key2" placeholder="请输入费用金额（元）" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="hac-log-angle-mark">1</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-6 hac-log-card-item">
|
|
|
+ <HcCardItem ui="hac-bg-grey">
|
|
|
+ <template #header>
|
|
|
+ <div class="ml-4">关联的任务</div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button size="default" type="primary" hc-btn>
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ <span>关联任务</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <HcTable :isIndex="false" :column="tableTaskColumn" :datas="tableTaskData">
|
|
|
+ <template #key2="{row}">
|
|
|
+ <el-input v-model="row.key2" placeholder="进度(%)"/>
|
|
|
+ </template>
|
|
|
+ <template #action="{row,index}">
|
|
|
+ <el-button plain size="small" type="danger">
|
|
|
+ <HcIcon name="close"/>
|
|
|
+ <span>移除</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+
|
|
|
+ <div class="title-label mt-6 mb-3">工作内容描述</div>
|
|
|
+ <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
|
|
|
+
|
|
|
+ <el-divider class="title-label-divider" content-position="left" border-style="dashed">费用报销</el-divider>
|
|
|
+
|
|
|
+ <div class="hac-log-form-box">
|
|
|
+ <el-form ref="formRef" inline :model="formModel" :rules="formRules">
|
|
|
+ <el-form-item label="费用报销：" prop="key1" class="w-72">
|
|
|
+ <el-select v-model="formModel.key1" block clearable placeholder="费用报销">
|
|
|
+ <el-option label="审计费" value="1"/>
|
|
|
+ <el-option label="招聘费" value="2"/>
|
|
|
+ <el-option label="水电费" value="3"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="费用金额：" prop="key2" class="w-72">
|
|
|
+ <el-input v-model="formModel.key2" placeholder="请输入费用金额（元）" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="hac-log-angle-mark">2</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <div class="mt-6 hac-log-card-item">
|
|
|
+ <HcCardItem ui="hac-bg-grey">
|
|
|
+ <template #extra>
|
|
|
+ <div class="hac-log-extra">
|
|
|
+ <span class="text">所关联任务目前完成率：</span>
|
|
|
+ <span class="rate">80%</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="hac-log-details-body">
|
|
|
+ <div class="log-details-item">
|
|
|
+ <div class="label">所属任务：</div>
|
|
|
+ <div class="description">【任务内容描述xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
|
+ xxxxxxxxxxxxxxxxxxxxxxxxx】</div>
|
|
|
+ </div>
|
|
|
+ <div class="log-details-item">
|
|
|
+ <div class="label">工作内容描述：</div>
|
|
|
+ <div class="description">今日完成水泥混凝土试验记录表xxxxxxxxxxxxxxxxx</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="hac-log-angle-mark">1</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-6 hac-log-card-item">
|
|
|
+ <HcCardItem ui="hac-bg-grey">
|
|
|
+ <template #extra>
|
|
|
+ <div class="hac-log-extra">
|
|
|
+ <span class="text">所关联任务目前完成率：</span>
|
|
|
+ <span class="rate">80%</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="hac-log-details-body">
|
|
|
+ <div class="log-details-item">
|
|
|
+ <div class="label">所属任务：</div>
|
|
|
+ <div class="description">【任务内容描述xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
|
+ xxxxxxxxxxxxxxxxxxxxxxxxx】</div>
|
|
|
+ </div>
|
|
|
+ <div class="log-details-item">
|
|
|
+ <div class="label">工作内容描述：</div>
|
|
|
+ <div class="description">今日完成水泥混凝土试验记录表xxxxxxxxxxxxxxxxx</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="hac-log-angle-mark">2</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </HcCardItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--关联任务-->
|
|
|
+ <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="taskModalLoading" :show="taskModal" title="关联任务" widths="62rem" @close="closeTaskClick">
|
|
|
+ <template #header>
|
|
|
+ <div class="header-box">
|
|
|
+ <span class="mr-5">关联的任务</span>
|
|
|
+ <span class="text-orange text-sm">选择当天日志所描述的任务</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <HcTable :column="tableTaskColumn1" :datas="tableTaskData1" :loading="tableTaskLoading">
|
|
|
+ <template #action="{row,index}">
|
|
|
+ <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
|
|
|
+ <HcIcon name="link" :line="false"/>
|
|
|
+ <span>关联</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
|
|
|
+ <HcIcon name="link-unlink-m" :line="false"/>
|
|
|
+ <span>取消</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <template #leftRowFooter>
|
|
|
+ <el-button size="large" @click="closeTaskClick">
|
|
|
+ <HcIcon name="close"/>
|
|
|
+ <span>取消</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button size="large" type="primary" @click="saveTaskClick">
|
|
|
+ <HcIcon name="check"/>
|
|
|
+ <span>确认关联</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template #rightRowFooter>
|
|
|
+ <HcPages :pages="searchTaskForm" @change="pageTaskChange"/>
|
|
|
+ </template>
|
|
|
+ </HcDialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {ref} from "vue";
|
|
|
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({department: null, state: null, startTime: null, endTime: null})
|
|
|
+
|
|
|
+//搜索
|
|
|
+const searchClick = () => {
|
|
|
+ searchForm.value.current = 1;
|
|
|
+}
|
|
|
+
|
|
|
+//重置
|
|
|
+const resetClick = () => {
|
|
|
+ searchForm.value = {}
|
|
|
+}
|
|
|
+
|
|
|
+//风险预警
|
|
|
+const riskWarning = ref('')
|
|
|
+
|
|
|
+//当前状态，false查看模式，true写日志模式
|
|
|
+const isEditState = ref(false)
|
|
|
+
|
|
|
+//已关联的任务
|
|
|
+const tableTaskColumn = [
|
|
|
+ {key: 'key', name: '任务内容'},
|
|
|
+ {key: 'key1', name: '状态', width: '120', align: 'center'},
|
|
|
+ {key: 'key2', name: '进度(%)', width: '160'},
|
|
|
+ {key: 'key3', name: '起止日期', width: '220', align: 'center'},
|
|
|
+ {key: 'action', name: '操作', width: '90', align: 'center'},
|
|
|
+]
|
|
|
+const tableTaskData = ref([
|
|
|
+ {id: 1, key: 'xxxxxxxxx', key1: '未完成', key2: '', key3: '2022-07-01~2027-04-12'},
|
|
|
+ {id: 2, key: 'xxxxxxxxx', key1: '未完成', key2: '', key3: '2022-07-01~2027-04-12'},
|
|
|
+])
|
|
|
+
|
|
|
+//顶部表单数据
|
|
|
+const formRef = ref(null)
|
|
|
+const formModel = ref({key1: '', key2: ''})
|
|
|
+const formRules = {
|
|
|
+ key1: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: "请选择费用报销"
|
|
|
+ },
|
|
|
+ key2: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: "请输入费用金融"
|
|
|
+ },
|
|
|
+}
|
|
|
+
|
|
|
+//关联任务弹窗
|
|
|
+const taskModalLoading = ref(false)
|
|
|
+const taskModal = ref(false)
|
|
|
+
|
|
|
+//显示关联任务
|
|
|
+const associatedTask = () => {
|
|
|
+ taskModalLoading.value = false
|
|
|
+ taskModal.value = true
|
|
|
+}
|
|
|
+
|
|
|
+//关联任务分页和搜索
|
|
|
+const searchTaskForm = ref({current: 1, size: 20, total: 0})
|
|
|
+const pageTaskChange = ({current, size}) => {
|
|
|
+ searchTaskForm.value.current = current
|
|
|
+ searchTaskForm.value.size = size
|
|
|
+}
|
|
|
+
|
|
|
+//关联任务表格
|
|
|
+const tableTaskLoading = ref(false)
|
|
|
+const tableTaskColumn1 = [
|
|
|
+ {key: 'key1', name: '任务描述'},
|
|
|
+ {key: 'key2', name: '任务起止日期', width: '220', align: 'center'},
|
|
|
+ {key: 'key3', name: '状态', width: '120', align: 'center'},
|
|
|
+ {key: 'action', name: '操作', width: '90', align: 'center'},
|
|
|
+]
|
|
|
+const tableTaskData1 = ref([
|
|
|
+ {id: 1, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
|
|
|
+ {id: 2, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
|
|
|
+ {id: 3, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
|
|
|
+ {id: 4, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
|
|
|
+])
|
|
|
+
|
|
|
+//关闭关联任务弹窗
|
|
|
+const closeTaskClick = () => {
|
|
|
+ taskModalLoading.value = false
|
|
|
+ taskModal.value = false
|
|
|
+}
|
|
|
+
|
|
|
+//提交关联任务弹窗
|
|
|
+const saveTaskClick = () => {
|
|
|
+ taskModalLoading.value = false
|
|
|
+ taskModal.value = false
|
|
|
+}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "~src/styles/logs/index.scss";
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.hac-log-form-box .el-form .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ .el-form-item__error {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
