<template>
<div>
<div class="body-control">
<div class="body-left">
<h2>项目树</h2>
<div class="demo-input-suffix">
<el-row :gutter="20">
<el-col :span="14" class="ipt-col">
<el-input v-model="projectName" class="w-50 m-2" @input="SearchProjectName"
placeholder="请输入项目名称" clearable>
<template #prefix>
<el-icon class="el-input__icon">
<search />
</el-icon>
</template>
</el-input>
</el-col>
<el-col :span="3" :offset="7" class="icon-col">
<!-- <img src="../../assets//icons//add.png" alt=""> -->
</el-col>
</el-row>
</div>
<div class="data-list">
<div v-for="(item, index) in treeList" :key="index" :class="{ 'divactive': divactivenum == index }"
@click="detailnumFn(item.id, index,item.label)">
{
{ item.label }}
</div>
</div>
</div>
<div class="body-right">
<div class="right-top">
<div class="top-tags">
<span type="primary" plain round @click="tagClickFn()"
:class="{ active: activeIndex == true }">全部<span v-show="cityCount != 0">({
{ cityCount
}})</span>
</span>
<span type="primary" v-for="(item, index) in tagListproject" :class="{ active: item.show == false }"
:key="index" plain round @click="tagClickFn(item.district_id)">{
{
item.district }}
<span v-show="item.number != 0">({
{ item.count }})</span>
</span>
</div>
<el-form label-position="left" label-width="80px" :model="searchForm">
<el-row :gutter="5">
<el-col :span="8">
<el-form-item label="子任务名称:">
<el-input v-model="searchzitaskname" placeholder="请输入关键字" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="search-btn">
<el-button type="success" @click="searchziTask">查询</el-button>
<el-button type="success" plain @click="resetsearchziTask">重置</el-button>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<!-- <el-button type="success" plain @click="submitProjectFn()" v-if="statusCode.status == 0 && statusCode.type == 1"> -->
<!-- <el-button type="success" plain @click="submitProjectFn()"
v-if="statusCode.status == 0 && statusCode.type == 1" style=" border-radius: 20px;">
<el-icon>
<Plus />
</el-icon>
<span> 提交任务</span>
</el-button> -->
<el-button type="success" plain @click="addProjectFn" style=" border-radius: 20px;">
<el-icon>
<Plus />
</el-icon>
<span> 创建任务</span>
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="right-bottom">
<!-- 新增按钮 -->
<!-- <div class="addbtn">
<el-button type="success" plain @click="submitProjectFn()" v-if="statusCode.status == 0 && statusCode.type == 1">
<el-icon>
<Plus />
</el-icon>
<span> 提交任务</span>
</el-button>
<el-button type="success" plain @click="addProjectFn">
<el-icon>
<Plus />
</el-icon>
<span> 创建任务</span>
</el-button>
</div> -->
<!-- 表格 -->
<el-table row-key="taskId" :data="tableDatalist" class="one-table" style="width:100%;height: 520px;">
<el-table-column type="expand">
<template #default="props">
<div m="4" class="taskitem-test">
<div style="height:50px">
<span m="t-0 b-2" class="table-span">任务完成度: {
{ getAvgFn(props.row.children)}} %</span>
<span m="t-0 b-2" class="table-span">负责人: {
{ props.row.leader }}</span>
<span m="t-0 b-2" class="table-span">联系电话: {
{ props.row.phone }}</span>
<!-- <span m="t-0 b-2" class="table-span" v-if="props.row.district">默认模板: {
{props.row.district }}</span> -->
</div>
<el-table :data="props.row.children" style="width: 95%; margin: auto;"
class="two-table" default-expand-all>
<el-table-column type="expand" >
<template #default="props">
<el-table :data="props.row.standard" style="width: 90%; margin: auto;"
class="there-table">
<el-table-column label="评分标准" prop="name" />
<el-table-column label="任务数量" align="center" >
<template #default="scope">
<span v-if="scope.row.type == 1" >{
{ scope.row.complete}}<span style="margin-left:3px">份</span></span>
<span v-else >{
{ scope.row.complete}}/{
{ scope.row.num}}<span style="margin-left:3px">项</span></span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<!-- 详情 -->
<span @click="standardDetailFn(scope.row)"><img src="../../assets/project/detail.png" alt=""></span>
<!-- 开关 -->
<el-tooltip content="显示/隐藏问卷的可见" effect="light">
<el-switch active-value="1" inactive-value="0"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
v-if="scope.row.type == 1"
v-model="scope.row.can_write" @change="handleSwitchChange(scope.row)" />
</el-tooltip>
<!-- 满意度 -->
<el-popover
placement="bottom"
:width="250"
trigger="click"
:show-after="500"
>
<template #reference>
<el-icon v-if="scope.row.type == 1" v-preventReClick="2000" @click="satisfactionFn(scope.row.id)" class="Satisfaction"><DataLine /></el-icon>
</template>
<div v-if="satisfactionValue != null">
<div>问卷填写总数为: <span style="color: rgb(48, 48, 216);">{
{ satisfactionValue.totalCount }}</span></div>
<div>满意度达标的份数为: <span style="color: #13ce66;">{
{ satisfactionValue.satisfiedCount }}</span></div>
<div>满意度未达标的份数为: <span style="color: brown;">{
{ satisfactionValue.unsatisfiedCount }}</span></div>
<div>综合得分为: <span style="color: #13ce66;">{
{ satisfactionValue.score }}</span></div>
</div>
<div v-else>
暂未查询到该问卷的填写信息
</div>
</el-popover>
<!-- 问卷数据导出 -->
<el-tooltip content="满意度问卷数据导出" effect="light">
<el-icon v-if="scope.row.type == 1" class="Export" v-preventReClick="2000" @click="exportFn(scope.row)"><TakeawayBox /></el-icon>
</el-tooltip>
<el-tooltip content="评价部分问题数据导出" effect="light">
<el-icon v-if="scope.row.type == 0" class="Export" v-preventReClick="2000" @click="problemExportFn(scope.row, props.row.taskId)"><TakeawayBox /></el-icon>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="子任务" prop="district" :show-overflow-tooltip='true' />
<el-table-column label="子任务执行人" prop="childrenexecutor"
:show-overflow-tooltip='true' />
<el-table-column label="执行时间段" :show-overflow-tooltip='true'>
<template v-slot="{ row }">
<span>{
{ row.startTime ? moment(row.startTime).format('yyyy-MM-DD') : ''
}}</span>
<span>~</span>
<span>{
{ row.endTime ? moment(row.endTime).format('yyyy-MM-DD') : ''
}}</span>
</template>
</el-table-column>
<el-table-column label="子任务进度" prop="process">
<template v-slot="{ row }">
{
{ row.process ? row.process : 0 }}%
</template>
</el-table-column>
<el-table-column label="分配时间" :show-overflow-tooltip='true'>
<template v-slot="{ row }">
<div>{
{ row.allocateTime ? moment(row.allocateTime).format('yyyy-MM-DD') :
'' }}</div>
</template>
</el-table-column>
<!-- <el-table-column label="项目名称">
</el-table-column> -->
<el-table-column label="详情" align="center" width="210">
<template #default="scope">
<span @click="fuJianFn(scope.row.taskId)"><img src="../../assets/project/annex.png" alt=""> </span>
<span @click="detailFn(scope.$index, scope.row, props.row.taskId)"><img src="../../assets/project/detail.png" alt=""></span>
<span @click="addTaskAttachmentFn(scope.row.taskId)"> <img src="../../assets/project/Export.png" alt=""></span>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column label="任务" prop="name" :show-overflow-tooltip='true' />
<el-table-column label="市县/区划" prop="district" />
<el-table-column label="任务状态" prop="status">
<template #default="scope">
<div v-if="scope.row.addStatus == '10'">待提交</div>
<div v-else-if="scope.row.addStatus == '20'">待下发审核</div>
<div v-else-if="scope.row.addStatus == '30'">执行中</div>
<div v-else-if="scope.row.addStatus == '40'">待预审</div>
<div v-else-if="scope.row.addStatus == '50'">待终审</div>
<div v-else>完成</div>
<!-- <div v-if="scope.row.status == '1'">待下发审核</div> -->
<!-- <div v-if="scope.row.status == '2'">执行中</div>
<div v-if="scope.row.status == '3'">待预审</div>
<div v-if="scope.row.status == '4'">待终审</div>
<div v-if="scope.row.status == '5'">完成</div> -->
</template>
</el-table-column>
<el-table-column label="操作" width="210">
<template #default="scope">
<span @click="submitTaskFn(scope.row.taskId)"
v-if="scope.row.sonTaskStatus"
style="cursor: pointer;color: rgba(42, 130, 228, 1);">提交 </span>
<!-- <span @click="submitTaskFn(scope.row.taskId)"
v-if="sonTaskStatus(scope.row.children || null)"
style="cursor: pointer;color: rgba(42, 130, 228, 1);">提交 </span> -->
<!-- <span @click="submitTaskFn(scope.row.taskId)" v-if="hasApproval" style="cursor: pointer;color: rgba(42, 130, 228, 1);">提交 </span> -->
<span @click="editTaskBtn(scope.$index, scope.row)"
v-if="scope.row.sonTaskStatus"
style=" cursor: pointer;color: rgba(255, 195, 0, 1);">编辑 </span>
<span @click="deleteTaskBtn(scope.$index, scope.row)"
style=" cursor: pointer;color: rgba(255, 87, 51, 1);"> 删除</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="demo-pagination-block">
<el-pagination v-model:current-page="currentPagetask" v-model:page-size="pageSizetask"
:page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
:total="currentPagetasktotal" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</div>
</div>
</div>
<!-- 上传弹窗 -->
<el-dialog v-model="dialogFormVisible" class="upload-dialog" title="上传附件" id="dialogShow">
<p style="color: #adabab;font-size: 12px;"> 注 : 仅能上传图片, 视频, pdf, Word(.docx), Excel(.xlsx)表格等类型文件</p>
<el-upload class="upload-demo" drag :on-remove="handleRemoves" action="#" :http-request="handleBeforeUpload"
:on-success="handleAvatarSuccess" :show-file-list="false">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖动上传or<em>点击上传</em>
</div>
<template #tip>
<div class="file-list-box" style="height: 250px;overflow: auto;">
<div class="el-upload__tip" v-for="(item, index) in fileListArr" :key="index">
<p><span style="width: 50%;display: inline-block;">{
{ item.name }}</span> <span
style="cursor: pointer;" @click="fileDeleteFn(item.id)">X</span></p>
</div>
</div>
</template>
</el-upload>
<template #footer>
<span class="dialog-footer">
<el-button @click="quXiaoUpload()">取消</el-button>
<el-button type="primary" @click="addFileFn()">
确认
</el-button>
</span>
</template>
</el-dialog>
<!-- //显示附件弹窗 -->
<el-dialog v-model="dialogTabsVisible" title="附件展示" class="file-show-box" @close="closeDialog()">
<div class="file-body">
<!-- 左侧附件列表 -->
<div class="file-left" >
<div class="list" :class="{'list-active' : listAct == index}" v-for="(item, index) in fileList" :key="index" @click="handleClick(item,index)">{
{ item.name }}</div>
</div>
<div class="file-right">
<div class="downFile" v-if="fileType != 'pdf'">
<el-button @click="DownloadFn()"> 下载</el-button>
</div>
<!-- 若是图片数据展示 -->
<img style="width: 150px;height: 150px;" :src="fileAddress" alt="" v-if="fileType == 'jpg' || fileType == 'png'">
<!-- 若是txt格式数据展示 -->
<iframe :src="fileAddress" frameborder="0" v-else-if="fileType == 'txt'" style="width: 90%; height: 100%;"></iframe>
<!-- 若是pdf数据展示 -->
<iframe :src="fileAddress" type="application/pdf" v-else-if="fileType == 'pdf'" id="pdfShow" width="100%" height="100%"></iframe>
<!-- 若是word文档格式数据号展示 -->
<div ref="refWord" id="fileShow" v-else-if="fileType == 'docx'" style="width: 100%;height: 100%;"></div>
<!-- 若是excel格式数据展示 -->
<div id="fileShowTwo" style="width: 100%;height: 100%;" v-else-if="fileType == 'xlsx'">
<div class="tab">
<el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
<el-radio-button v-for="(item, index) in excel.sheetNames" :key="index" :label="item"></el-radio-button>
</el-radio-group>
</div>
<div
style="margin-top: 5px;border: 1px solid #a0a0a0;">
<div v-html="excel.SheetActiveTable" style="padding: 10px 15px"></div>
</div>
</div>
<div v-else-if="fileType == 'mp4'" style="width: 100%;height: 100%;">
<video :src="fileAddress" controls style="width: 100%;height: 100%;"></video>
</div>
<div v-else>
该文件暂不支持预览,请下载查看
</div>
</div>
</div>
</el-dialog>
<el-dialog v-model="exportDialogTableVisible" title="导出选项" class="exportDialog">
<span>请选择您要导出的内容</span>
<div style="margin: 10px 0px;">
<el-checkbox-group v-model="checkList" @change="handCheckFn">
<el-checkbox checked :label="item.fieldId" v-for="(item,index) in labelArrList" :key="index">{
{item.fieldName}}</el-checkbox>
</el-checkbox-group>
</div>
<el-table
ref="multipleTableRef"
:data="showCheckValue"
style="width: 100%;height: 100%;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="选项">
<template #default="scope">{
{ scope.row.value }}</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button @click="exportDialogTableVisible = false">取消</el-button>
<el-button type="primary" @click="ExportDataListFn()">
导出
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance, toRefs } from 'vue'
import { useUserStore } from '@/store/modules/manifest'
const useStore = useUserStore()
const { proxy } = getCurrentInstance();
//word文档注释
import { renderAsync } from 'docx-preview';
//excel注释
import * as XLSX from "xlsx";
import { useRouter } from 'vue-router';
import { getfileupload, getfiledownload, download } from '@/api/filesevers/index'
import {
getTreeList, getTaskAttachment, getTaskdistrictnum, getTaskList, deleteTask,
deleteTaskitem, submitProjectApi, getProjectTaskStatus, submitTaskApi, getOutlineLeader, getOutlineMember,
addTaskAttachment, getOpenQuestionnaire, getQuestionnaireScoreListApi, getQuestionnaireInfo, getTaskItemType,
getTaskItemIdList, getTaskItemNum, getExportQuestionnaireApi, getExportProblemApi
} from '@/api/project/index'
import { ElMessage, ElMessageBox , ElLoading, ElNotification } from 'element-plus'
import moment from "moment";
const activeNum = ref(0)
const dialogFormVisible = ref(false)
const dialogTabsVisible = ref(false)
// 导出弹窗
const exportDialogTableVisible = ref(false)
const projectName = ref('')
const divactivenum = ref(0)
const searchzitaskname = ref("")
const file = ref()
// 分页
const currentPagetask = ref(1)
const pageSizetask = ref(10)
const currentPagetasktotal = ref(10)
// 弹窗加载loading数据
const loading = ref(true)
// 求子任务平均值
const getAvgFn = (child) => {
if (child.length > 0) {
// 提取每个 "child" 内的 "process" 值，并计算平均值
var total = 0; // 初始化总和
var count = 0; // 初始化计数器
for (var i = 0; i < child.length; i++) {
var processValue = child[i].process;
total += processValue;
count++;
}
// 计算平均值
var average = total / count;
// //console.log(average,'child');
} else {
var average = 0
}
return average
}
const handleSizeChange = (val) => {
pageSizetask.value = val
gettablelist()
}
const handleCurrentChange = (val) => {
currentPagetask.value = val
gettablelist()
}
//表格预览所需数据
const data = reactive({
excel: {
// 数据
workbook: {},
// 表名称集合
sheetNames: [],
// 激活项
sheetNameActive: "",
// 当前激活表格
SheetActiveTable: ""
}
})
const { excel } = toRefs(data);
// 视频预览所需数据
const emptyTips = ref('暂无内容');
// 下载文件
// 文件地址
const fileAddress = ref('')
// 下载流数据
const blobUploadValue = ref('')
const downloadFn = (id, type) => {
let params = { fileId: id }
download(params).then(result => {
// //console.log(result.url, 'resolve');
// //console.log(result.blob, 'blob');
blobUploadValue.value = result.url
if (type == 'jpg' || type == 'png' || type == 'mp4') {
//格式为图片 视频时
fileAddress.value = result.url
} else if (type == 'docx') {
//格式为word时
const previewContainer = document.getElementById('fileShow');
renderAsync(result.blob, previewContainer) //渲染
} else if (type == 'xlsx') {
//格式为excel时
const reader = new FileReader();
//通过readAsArrayBuffer将blob转换为ArrayBuffer对象
reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流
reader.onload = (event) => {
// 读取ArrayBuffer数据变成Uint8Array
var data = new Uint8Array(event.target.result);
// 这里的data里面的类型和后面的type类型要对应
var workbook = XLSX.read(data, { type: "array" });
const sheetNames = workbook.SheetNames // 工作表名称集合
excel.value.workbook = workbook
excel.value.sheetNames = sheetNames
excel.value.sheetNameActive = sheetNames[0]
getSheetNameTable(sheetNames[0])
};
} else if (type == 'pdf') {
//格式为pdf时
const reader = new FileReader();
reader.readAsArrayBuffer(result.blob);
reader.onload = function () {
fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))
}
}
})
}
// 文件下载
const DownloadFn = () => {
let a = document.createElement('a')
// 下载链接
a.href = blobUploadValue.value
// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
a.download = fileNameValue.value + '.' + fileType.value
document.body.appendChild(a)
// 点击a标签，进行下载
a.click()
// 移除元素
document.body.removeChild(a)
}
const getSheetNameTable = (sheetName) => {
try {
// 获取当前工作表的数据
const worksheet = excel.value.workbook.Sheets[sheetName]
// 转换为数据 1.json数据有些问题，2.如果是html那么样式需修改
let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
htmlData = htmlData === '' ? htmlData : htmlData.replace(/<table/, '<table class="default-table" border="1px solid #ccc" cellpadding="0" cellspacing="0"')
// 第一行进行改颜色
htmlData = htmlData === '' ? htmlData : htmlData.replace(/<tr/, '<tr style="background:#b4c9e8"')
excel.value.SheetActiveTable = htmlData
} catch (e) {
// 如果工作表没有数据则到这里来处理
excel.value.SheetActiveTable = '<h4 style="text-align: center">' + emptyTips.value + '</h4>'
}
}
//弹框关闭事件
const closeDialog = () => {
fileType.value = ''
}
// 模板详情
const standardDetailFn = (row) => {
router.push({ path: '/evaluate/standard/detail', query: { id: row.standardId } })
useStore.setTemplateValue(row.standardId)
}
// 标签点击
//标签数组
const tagArrList = ref([])
// 备用数组
const beiArrList = ref([])
// 全部选中样式
const activeIndex = ref(true)
// const zhongEdit = ref(true)
const tagClickFn = (id) => {
if (id == '' || id == undefined) {
activeIndex.value = !activeIndex.value
if (activeIndex.value == false) {
for (const item of tagListproject.value) {
item.show = false
}
} else {
tagArrList.value = beiArrList.value
for (const item of tagListproject.value) {
item.show = true
}
}
} else {
activeIndex.value = false
tagArrList.value = []
tagArrList.value.push(id)
}
// 遍历第二个数组
for (const item of tagListproject.value) {
// 检查当前对象的district_id是否存在于第一个数组中
if (tagArrList.value.includes(item.district_id)) {
// 如果存在，将show属性设置为false
item.show = !item.show;
}
}
tagArrList.value = tagListproject.value
.filter(item => item.show === false)
.map(item => item.district_id);
if (tagListproject.value.every(tag => tagArrList.value.includes(tag.district_id))) {
activeIndex.value = true
if (id == '') {
activeIndex.value = false;
}
}
gettablelist()
}
const currentprojectId = ref("")
const router = useRouter()
const searchForm = ref({
name: '',
sex: ''
})
// 表格数据
const tableDatalist = ref([])
const treeList = ref([])
let labelName = ref('')
// const pageSize = ref(10)
// const pageNum = ref(1)
// 获取数据方法
function getList() {
let params = {
name: projectName.value
}
// 获取项目数数据
getTreeList(params).then(res => {
if (res.code == 200 && res.data) {
treeList.value = res.data
// 获取第一条数据在右边
if (res.data.length > 0) {
let firstid = res.data[0].id
currentprojectId.value = res.data[0].id
labelName.value = res.data[0].label
if (edit.value == true) {
detailnumFn(firstid, 0)
} else {
detailnumFn(useStore.value, useStore.index)
}
}
}
})
}
const switchValue = ref(false)
// 开关切换数值事件 getOpenQuestionnaire
const handleSwitchChange = (value) => {
switchValue.value = value.id
if (value.can_write == 0) {
switchValue.value = false
} else {
switchValue.value = true
}
getOpenQuestionnaireFn(value.id)
}
// 打开关闭调查问卷
const getOpenQuestionnaireFn = (id) => {
let obj = {
taskItemId: id,
open: switchValue.value
}
getOpenQuestionnaire(obj).then(res => {
if (res.code == 200) {
if (switchValue.value == false) {
ElMessage({
type: 'success',
message: '关闭成功',
})
} else {
ElMessage({
type: 'success',
message: '开启成功',
})
}
// 刷新表格数据
// getList()
}
})
}
const satisfactionValue = ref({})
// 获取填写的问卷评分数据
const satisfactionFn = (id) => {
let params = {
taskItemId: id,
}
getQuestionnaireScoreListApi(params).then(res => {
// //console.log(res);
if (res.code == 200 && res.data != null) {
satisfactionValue.value = res.data
// let totalCount = res.data.totalCount
// let score = res.data.score
// let satisfiedCount = res.data.satisfiedCount
// let unsatisfiedCount = res.data.unsatisfiedCount
// satisfactionValue.value = '问卷填写总数为:' + totalCount + "/n" + '满意度达标的份数为:' + satisfiedCount + "/n" + '满意度未达标的份数为:' + unsatisfiedCount + "/n" + '综合得分为:' + score
} else {
satisfactionValue.value = null
}
})
}
//搜索
const SearchProjectName = () => {
getList()
}
// 城市标签总数
const cityCount = ref(0)
//任务接口
const detailnumFn = (id, index, label) => {
labelName.value = label
currentprojectId.value = id
divactivenum.value = index
let params = {
projectId: currentprojectId.value
}
getTaskdistrictnum(params).then(res => {
cityCount.value = 0
tagArrList.value = []
if (res.code == 200 && res.data) {
// 标签id数组
res.data.forEach((value, index, array) => {
cityCount.value += value.count
tagArrList.value.push(value.district_id)
beiArrList.value.push(value.district_id)
value.show = false
})
// 标签数组
tagListproject.value = res.data
gettablelist()
// 遍历第二个数组
// for (const item of tagListproject.value) {
// // 检查当前对象的district_id是否存在于第一个数组中
// if (tagArrList.value.includes(item.district_id)) {
// // 如果存在，将show属性设置为false
// item.show = !item.show;
// }
// }
}
})
}
const gettablelist = () => {
// 加载图
var loadingInstance = ElLoading.service({
target: '.one-table', // 这里替换为你要加载的元素的选择器
text: '加载中...', // 可选，加载提示文本
});
let tagArrLists = tagArrList.value
let projectId = currentprojectId.value
let name = searchzitaskname.value
let pageSize = pageSizetask.value
let pageNum = currentPagetask.value
getTaskList(tagArrLists, projectId, name, pageSize, pageNum).then((res) => {
if (res.code == 200 && res.data) {
currentPagetasktotal.value = res.data.count
for (let index = 0; index < res.data.data.length; index++) {
const i = res.data.data[index];
i["sonTaskStatus"] = sonTaskStatus(i.children || null);
i["addStatus"] = addStatus(i.children || null);
for (let index = 0; index < i.children.length; index++) {
const j = i.children[index];
if (j.executor) {
if (j.executor.length > 1) {
j.childrenexecutor = j.executor[0].name + "，" + j.executor[1].name
} else {
j.childrenexecutor = j.executor[0].name
}
}
}
}
tableDatalist.value = res.data.data
loadingInstance.close()
} else {
loadingInstance.close()
}
})
}
// 搜索
const searchziTask = () => {
gettablelist()
}
// 重置
const resetsearchziTask = () => {
searchzitaskname.value = ""
pageSizetask.value = 10
currentPagetask.value = 1
gettablelist()
}
// 删除任务
const deleteTaskBtn = (index, item) => {
ElMessageBox.confirm(
'确定要删除该任务吗?',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: '删除',
}
)
.then(() => {
ElMessage({
type: 'success',
message: '删除成功',
})
deleteTask(item.taskId).then((res) => {
if (res.code == 200) {
detailnumFn(currentprojectId.value, divactivenum.value)
}
})
})
.catch(() => {
// ElMessage({
// type: 'info',
// message: '取消',
// })
})
}
// 提交项目进入待下发状态
const submitProjectFn = () => {
let obj = {
projectId: currentprojectId.value
}
ElMessageBox.confirm(
'是否确认提交此项目',
'确认框',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
submitProjectApi(obj).then(res => {
if (res.data == true) {
ElMessage({
type: 'success',
message: '提交成功',
})
detailnumFn(currentprojectId.value)
}
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '提交失败',
})
})
}
// 提交任务到待下发状态 submitTaskApi
const submitTaskFn = (id) => {
let obj = {
taskId: id
}
ElMessageBox.confirm(
'是否确认提交此任务',
'确认框',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
submitTaskApi(obj).then(res => {
if (res.data == true) {
ElMessage({
type: 'success',
message: '提交成功',
})
detailnumFn(currentprojectId.value)
}
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '提交失败',
})
})
}
const typename = ref("")
// 编辑任务
const editTaskBtn = (index, item) => {
typename.value = "edit"
if (item.taskId) {
router.push({ path: '/task/manifest/addTask', query: { id: currentprojectId.value, name: item.name, taskId: item.taskId, typename: typename.value } })
useStore.setValue(currentprojectId.value, divactivenum.value)
}
}
const statusCode = ref({
status: '',
type: ''
})
// 获取项目下的所有子任务的审核状态
const getStatusFn = (id) => {
let obj = {
projectId: id
}
getProjectTaskStatus(obj).then(res => {
if (res.code == 200 && res.data) {
statusCode.value = res.data
}
})
}
const typeStatus = ref(null)
const hasApproval = ref(null)
// 获取任务下的所有子任务null的审核状态
const sonTaskStatus = (children) => {
if (children != null) {
const hasApproval = children.some(child => {
const approval = child.approval;
return approval && approval.type == '1' && approval.status == '0';
});
typeStatus.value = hasApproval
return hasApproval
}
}
// 状态判断
const addStatus = (children) => {
if (children != null) {
var result = ''
children.forEach((value, index, array) => {
if (value.approval) {
if (value.approval.type === "3") {
// //console.log("Return 30");
result = 30;
// 返回30的逻辑
} else if (value.approval.type === "2") {
// //console.log("Return 20");
result = 20;
// 返回20的逻辑
} else if (value.approval.type === "1") {
// //console.log("Return 10");
result = 10;
}else if (value.approval.type === "4") {
// //console.log("Return 10");
result = 40;
} else if (value.approval.type === "5") {
// //console.log("Return 10");
result = 50;
} else {
result = ''
}
}
})
}
return result
}
// 获取离线职员组长列表
// const getOutlineLeaderFn=()=>{
// getOutlineLeader().then(res => {
// })
// }
// 获取离线职员组员列表
// const getOutlineMemberFn=()=>{
// getOutlineMember().then(res => {
// })
// }
// 根据任务id获取附件
const fileList = ref([])
const fuJianFn = (id) => {
dialogTabsVisible.value = true
let obj = { taskId: id }
getTaskAttachment(obj).then(res => {
if (res.code == 200 && res.data) {
fileList.value = res.data
handleClick('',0)
}
})
}
// 根据任务id绑定附件
const taskId = ref('')
const addTaskAttachmentFn = (id) => {
taskId.value = id
dialogFormVisible.value = true
}
const addFileFn = () => {
let obj = {
files: uploadFileId.value,
taskId: taskId.value
}
addTaskAttachment(obj).then(res => {
// //console.log(res);
if (res.code == 200) {
dialogFormVisible.value = false
ElMessage({
type: 'success',
message: '添加成功',
})
} else {
ElMessage({
type: 'info',
message: res.msg,
})
}
})
}
// 取消上传
const quXiaoUpload = () => {
dialogFormVisible.value = false
fileListArr.value = []
uploadFileId.value = []
}
// 标签页切换
const listAct = ref(0)
const fileType = ref('')
const fileNameValue = ref('')
const handleClick = (item, tab) => {
listAct.value = tab
let id = ''
if (tab != 0) {
id = item.fileId
fileType.value = item.format
fileNameValue.value = item.name
downloadFn(id, fileType.value)
} else {
if (fileList.value.length > 0) {
id = fileList.value[0].fileId
fileType.value = fileList.value[0].format
fileNameValue.value = fileList.value[0].name
downloadFn(id, fileType.value)
}
}
// //console.log(fileType.value, 'type');
}
const edit = ref(false)
onMounted(() => {
if (useStore.value && useStore.index) {
edit.value = false
} else {
edit.value = true
}
getList()
// //console.log(useStore.value, useStore.index,'2222');
});
const tagListproject = ref([])
// 详情跳转方法
function detailFn(item, row, id) {
if (row.taskId) {
router.push({ path: '/task/manifest/detail', query: { taskItemId: row.taskId} })
useStore.setDetailValue(row.taskId)
}
}
// 新建任务跳转方法
function addProjectFn() {
typename.value = "add"
if (currentprojectId.value) {
router.push({ path: '/task/manifest/addTask', query: { id: currentprojectId.value, typename: typename.value } })
useStore.setTaskAndNameValue(currentprojectId.value, typename.value)
}
}
// 上传附件成功
const handleAvatarSuccess = (res) => {
// //console.log(res,'1111');
}
const uploadFileId = ref([])
const fileListArr = ref([])
const fileName = ref('')
// 上传附件之前
const handleBeforeUpload = (file) => {
var loadingInstance = ElLoading.service({
target: '#dialogShow', // 这里替换为你要加载的元素的选择器
text: '加载中...', // 可选，加载提示文本
});
// //console.log(file, '上传的附件');
const allowedFileTypes = [
'image/jpeg', // JPEG 图像文件
'image/png', // PNG 图像文件
'video/mp4', // MP4 视频文件
'video/avi', // AVI 视频文件 (请确认正确的MIME类型)
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // Microsoft Excel 文档
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // Microsoft Word 表格
'application/pdf',
];
const maxSizeImage = 5 * 1024 * 1024; // 5MB in bytes
const maxSizeFile = 500 * 1024 * 1024; // 500MB in bytes
// 获取文件的类型
const fileType = file.file.type;
const fileSize = file.file.size;
// 文件类型校验
if (!allowedFileTypes.includes(fileType)) {
ElMessage({
type: 'error',
message: '上传格式错误',
})
return false; // 阻止文件上传
} else {
//文件大小校验
if (fileType.startsWith('image/') && fileSize > maxSizeImage) {
ElMessage({
type: 'error',
message: '图片大小不能超过5MB',
});
return false; // 阻止文件上传
} else if (fileType.startsWith('video/') || fileType.startsWith('application/')) {
// 对于视频、文档等类型的文件，限制大小为500MB
if (fileSize > maxSizeFile) {
ElMessage({
type: 'error',
message: '文件大小不能超过500MB',
});
return false; // 阻止文件上传
}
}
getfileupload(file.file).then((res) => {
if (res.code == 200 && res.data) {
fileName.value = res.data.name
let obj = { name: res.data.name + '.' + res.data.format, id: res.data.fileId }
fileListArr.value.push(obj)
let id = res.data.fileId
uploadFileId.value.push(id)
loadingInstance.close()
}
})
}
}
const handleRemoves = (file) => {
}
// 删除上传附件列表
const fileDeleteFn = (id) => {
// 查找匹配的元素在数组中的索引
let indexToDelete = fileListArr.value.findIndex(item => item.id == id);
// 如果找到匹配的元素，就使用 splice 方法删除它
if (indexToDelete !== -1) {
fileListArr.value.splice(indexToDelete, 1);
}
// 查找匹配的元素在数组中的索引
let indexToDeletes = uploadFileId.value.findIndex(item => item == id);
// 如果找到匹配的元素，就使用 splice 方法删除它
if (indexToDeletes !== -1) {
uploadFileId.value.splice(indexToDeletes, 1);
}
// //console.log(fileListArr.value,'展示列表');
// //console.log(uploadFileId.value,'上传列表');
}
// 导出问卷数据方法
const standardName = ref(null)
const labelArrList = ref([])
const exportTaskItemId = ref('')
const exportFn = (row) => {
standardName.value = row.name
// //console.log(row,'row');
exportTaskItemId.value = row.id
let params = { taskItemId : row.id}
getQuestionnaireInfo(params).then(res => {
if (res.code == 200 && res.data.length > 0) {
labelArrList.value = res.data
labelArrList.value = labelArrList.value.sort((a, b) => {return a.fieldId - b.fieldId })
getTaskItemTypeFn(params)
}
})
}
// 类型id
const typeId = ref(null)
const getTaskItemTypeFn = (params) => {
getTaskItemType(params).then(res => {
if (res.code == 200) {
typeId.value = res.data[0].dict_value
getTaskItemIdListFn()
}
})
}
const showCheckValue = ref([])
const tableItemList = ref([])
const getTaskItemIdListFn = () => {
let params = { taskItemId : exportTaskItemId.value , typeId : typeId.value}
getTaskItemIdList(params).then(res => {
if (res.code == 200 && res.data.length > 0) {
tableItemList.value = res.data
forTableItemsFn()
}
})
}
const forTableItemsFn = () => {
showCheckValue.value = []
tableItemList.value = tableItemList.value.sort((a, b) => { return a - b })
// //console.log(tableItemList.value);
tableItemList.value.forEach((value, index, array) => {
let paramsTwo = {
rowId: value,
typeId: typeId.value,
taskItemId: exportTaskItemId.value,
}
getTaskItemNum(paramsTwo).then(res => {
// //console.log(res,'res');
if (res.code == 200 && res.data.length > 0) {
res.data[1].rowId = value
showCheckValue.value.push(res.data[1])
exportDialogTableVisible.value = true
}
})
})
}
// 导出label选择
const checkList = ref([])
const handCheckFn = () => {
// //console.log(checkList.value);
}
const tableCheckList = ref([])
const beiList = ref([])
// 导出表格选中数据选择
const handleSelectionChange = (value) => {
tableCheckList.value = []
value.forEach((items, index, array) => {
let obj = {
rowId: items.rowId,
valueId:items.value_id
}
beiList.value.push(items.rowId)
tableCheckList.value.push(obj)
})
}
// 确定导出数据
const ExportDataListFn = () => {
ElMessage({
type: 'info',
message: "正在下载中 请稍后",
})
tableCheckList.value.sort((a, b) => {return a.rowId - b.rowId})
// //console.log(beiList.value,'beiList');
let params = {
taskItemId: exportTaskItemId.value,
labelItems: checkList.value,
taskItems: tableCheckList.value
}
exportDialogTableVisible.value = false
// return
getExportQuestionnaireApi(params).then(resolve => {
if (resolve) {
ElMessage({
type: 'success',
message: "下载成功",
})
blobUploadValue.value = resolve.url
fileNameValue.value = standardName.value
fileType.value = 'xlsx'
DownloadFn()
}
})
}
// 导出问题数据方法
const problemExportFn = (row, taskIds) => {
standardName.value = row.name
ElMessage({
type: 'info',
message: "正在下载中 请稍后(图片较多时,下载可能会较慢..)",
})
// //console.log(row, '选中的导出项');
// //console.log(taskId, '选中的导出项');
let params = {
taskItemId: row.id,
standardId: row.standardId,
taskId: taskIds,
}
getExportProblemApi(params).then(resolve => {
//console.log(resolve, 'resolve');
if (resolve) {
ElMessage({
type: 'success',
message: "下载成功",
})
blobUploadValue.value = resolve.url
fileNameValue.value = row.name
fileType.value = 'xlsx'
DownloadFn()
} else {
ElMessage({
type: 'error',
message: "导出失败",
})
}
})
}
</script>
<style lang="scss" scoped>
.body-control {
display: flex;
justify-content: space-between;
width: 100%;
// height: 790px;
// 左侧项目树
.body-left {
width: 20%;
padding: 0px 10px;
background-color: #fff;
box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
// 标题
h2 {
font-size: 18px;
font-weight: 600;
letter-spacing: 0px;
color: rgba(0, 0, 0, 1);
text-align: left;
vertical-align: top;
}
// 输入框盒子
.demo-input-suffix {
margin: 5px 0px;
// 输入框
::v-deep(.el-input__wrapper) {
background: rgba(245, 245, 245, 1);
border-radius: 15px;
}
}
// 添加图标
.icon-col {
display: flex;
align-items: center;
img {
width: 20px;
height: 20px;
}
}
// 项目列表
.data-list {
margin-top: 20px;
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 8px 10px;
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
color: rgba(77, 77, 77, 1);
text-align: left;
vertical-align: middle;
cursor: pointer;
}
div:hover {
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: middle;
background: rgba(89, 169, 255, 1);
}
.divactive {
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: middle;
background: rgba(89, 169, 255, 1);
}
}
}
.body-right {
width: 78%;
display: flex;
flex-direction: column;
.right-top {
flex: 1;
background-color: #fff;
box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 15px;
margin-bottom: 20px;
width: 100%;
// 标签盒子
.top-tags {
flex: 1;
// background-color: #fff;
// box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 20px;
display: flex;
flex-wrap: wrap;
width: 100%;
overflow: auto;
>span {
margin: 5px 15px;
cursor: pointer;
border-radius: 15px;
padding: 5px 10px;
color: #6d6b6b;
background-color: rgb(227, 233, 236);
}
.active {
background-color: #59a9ff;
color: white;
}
// 标签样式
.el-button {
margin-right: 30px;
margin-top: 10px;
}
>.el-button:first-child {
margin-left: 12px !important;
}
}
// 表单控件样式
.el-form {
width: 100%;
.el-col {
margin: 10px 0px;
// margin-bottom: 20px;
}
::v-deep(.el-form-item__label) {
justify-content: end;
}
// 输入框样式
::v-deep(.el-input__wrapper) {
display: inline-flex;
flex-grow: 1;
align-items: center;
justify-content: center;
padding: 5px 11px;
background-color: rgba(253, 255, 247, 1);
background-image: none;
border: 1.33px solid rgba(67, 207, 124, 1);
cursor: text;
transform: translate3d(0, 0, 0);
}
.el-form-item {
display: flex;
align-items: center;
margin-bottom: initial;
}
.el-button {
padding: 20px 30px;
}
}
::v-deep(.search-btn .el-form-item__content) {
margin-left: 30px !important;
}
}
.right-bottom {
flex: 7;
background-color: #fff;
box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
width: 100%;
padding: 20px 40px;
//表格
.el-table {
font-size: 14px !important;
::v-deep(th) {
padding: 10px 0px;
font-size: 16px !important;
// font-weight: normal;
}
tbody .table-span {
margin-left: 40px;
line-height: 45px;
}
tbody img {
cursor: pointer;
vertical-align: middle;
// margin-right: 25px;
}
::v-deep(.el-switch){
position: absolute;
/* right: 90px; */
transform: translateX(20px);
bottom: 5px;
/* margin-bottom: 46px; */
}
}
// ::v-deep().el-table[data-v-b7d2d175] th{
// background-color: red !important;
// }
// 第一个表头样式
::v-deep(.one-table th) {
background-color: #fff !important;
font-size: 17px !important;
width: 100%;
}
// 第二个表头样式
::v-deep(.two-table th) {
font-weight: normal;
background-color: rgba(232, 243, 255, 1) !important;
font-size: 16px !important;
}
// 第三个表头样式
::v-deep(.there-table th) {
background-color: #f5f5f5 !important;
}
// 分页
.el-pagination {
justify-content: center;
margin-top: 15px;
}
}
}
}
.taskitem-test {
// height: 80px;
}
::v-deep(.el-form-item__label) {
width: 100px !important;
}
// 表格
::v-deep(.el-table tr) {
background-color: var(--el-table-tr-bg-color);
height: 47.3px;
}
::v-deep(.el-overlay-dialog) {
display: flex !important;
align-items: center !important;
}
::v-deep(.el-dialog__body) {
height: 470px;
}
.tabs-contain-item {
overflow-y: auto;
position: relative;
.a {
position: absolute;
right: 0px;
}
}
::v-deep(.file-show-box){
margin-top: 6vh !important;
width: 70%;
height: 90%;
background-color: #ededed;
// 附件主体
.file-body{
width: 100%;
height: 100%;
display: flex;
.file-left{
background-color: #fff;
border-radius: 5px;
flex: 2;
margin-right: 10px;
// 单条数据
.list{
padding: 15px 10px;
overflow: hidden;
cursor: pointer;
}
.list-active{
background-color: #90c1f5;
border-radius: 5px;
color: white;
}
.list:hover{
background-color: #90c1f5;
border-radius: 5px;
color: white;
}
}
.file-right{
flex: 8;
overflow: auto;
position: relative;
.downFile{
position: sticky;
top: 0px;
display: flex;
justify-content: end;
}
.docx-wrapper{
background-color: #ededed;
}
#fileShowTwo{
table{
table-layout: fixed !important;
width: 100% !important;
border-collapse:collapse;
border:none;
font-size:0.7rem;
}
td,th {
height: 30px;
width:100px;
white-space:nowrap; /* 自适应宽度*/
word-break:keep-all; /* 避免长单词截断，保持全部 */
border:solid #676767 1px;
text-align:center;
white-space:pre-line;
word-break:break-all !important;
word-wrap:break-word !important;
display:table-cell;
vertical-align:middle !important;
white-space: normal !important;
// height:auto;
vertical-align:text-top;
padding:2px 2px 0 2px;
display: table-cell;
}
}
}
}
.el-dialog__body{
height: 94% !important;
padding: 10px 10px !important;
}
::v-deep(.el-dialog__body){
overflow: auto;
}
.el-dialog__header{
background-color: #fff !important;
margin-right: auto;
}
}
// excel表格样式
// table {
// table-layout: fixed !important;
// width: 100% !important;
// border-collapse:collapse;
// border:none;
// font-size:0.23rem;
// }
// td,th {
// width:1px;
// white-space:nowrap; /* 自适应宽度*/
// word-break:keep-all; /* 避免长单词截断，保持全部 */
// border:solid #676767 1px;
// text-align:center;
// white-space:pre-line;
// word-break:break-all !important;
// word-wrap:break-word !important;
// display:table-cell;
// vertical-align:middle !important;
// white-space: normal !important;
// height:auto;
// vertical-align:text-top;
// padding:2px 2px 0 2px;
// display: table-cell;
// }
//上传附件格式
.upload-dialog{
.el-upload__tip{
font-size: 15px;
color: #606266;
// color: red;
margin-top: 7px;
}
}
//满意度分数查看
.Satisfaction{
position: absolute;
right: 60px;
font-size: 20px;
top: 15px;
cursor: pointer;
}
.Export{
position: absolute;
right: 25px;
font-size: 20px;
top: 15px;
cursor: pointer;
}
.el-popper.is-customized {
/* Set padding to ensure the height is 32px */
padding: 6px 12px;
background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}
.el-popper.is-customized .el-popper__arrow::before {
background: linear-gradient(45deg, #b2e68d, #bce689);
right: 0;
}
// 弹框
</style>
<style>
.exportDialog {
height: 700px;
}
.exportDialog .el-dialog__footer{
padding-top: 100px;
}
</style>文件预览源码
猜你喜欢
转载自blog.csdn.net/m0_65607651/article/details/135246387
今日推荐
周排行