fix : 修复实施图片
This commit is contained in:
@@ -1,110 +1,110 @@
|
||||
<template>
|
||||
<el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportExcelHandler">导出</el-button>
|
||||
<el-table ref="table" :data="tableData" style="width: 100%;height: 479px" :show-summary="true" border
|
||||
:summary-method="getSummaries" v-loading="loading" :header-cell-style="{background:'#f5f7fa'}">
|
||||
<el-table-column type="index" label="序号" align="center" width="60"/>
|
||||
<el-table-column prop="projectName" label="项目名称" align="center"/>
|
||||
<el-table-column prop="projectCost" label="费用性质" align="center">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.projectCost !== null">
|
||||
<Tag dictType="project_cost" :value="scope.row.projectCost"/>
|
||||
</div>
|
||||
<div v-else>--</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="researchStage" label="研发阶段" align="center">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.researchStage !== null && scope.row.researchStage !== null && scope.row.researchStage !== undefined">
|
||||
<el-tag effect="plain">{{scope.row.researchStage==1?'开发阶段':'研究阶段'}}</el-tag>
|
||||
</div>
|
||||
<div v-else>--</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="afterTax" label="分摊金额" align="center">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.afterTax !== null">
|
||||
<!-- {{ toThousands(scope.row.afterTax) }}-->
|
||||
{{ scope.row.afterTax }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <Tag dictType="research_stage" :value="scope.row.researchStage"/>-->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getAllocationSummaryDetails} from "@/api/expense-manage";
|
||||
import {shareExportExcel} from "@/api/expense-manage";
|
||||
|
||||
const props = defineProps({
|
||||
allocationName :{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const tableData = ref()
|
||||
const loading = ref(false)
|
||||
const table = ref()
|
||||
const route = useRoute()
|
||||
const getSummaries = (param) => {
|
||||
const {columns, data} = param
|
||||
const sums = []
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '小计'
|
||||
} else if (index === 4) {
|
||||
const values = data.map((item) => Number(item[column.property]))
|
||||
if (!values.every((value) => Number.isNaN(value))) {
|
||||
sums[index] = `${values.reduce((prev, curr) => {
|
||||
const value = Number(curr)
|
||||
if (!Number.isNaN(value)) {
|
||||
return prev + curr
|
||||
} else {
|
||||
return prev
|
||||
}
|
||||
}, 0)}`
|
||||
sums[index] = parseFloat(sums[index]).toFixed(2)
|
||||
// sums[index] = toThousands(sums[index])
|
||||
} else {
|
||||
sums[index] = '-'
|
||||
}
|
||||
}
|
||||
})
|
||||
return sums
|
||||
}
|
||||
// const exportTable = () => {
|
||||
// const $e = table.value.$el
|
||||
// let $table = $e.querySelector('.el-table__fixed')
|
||||
// if (!$table) {
|
||||
// $table = $e
|
||||
// }
|
||||
// exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目费用分摊表", 2)
|
||||
// }
|
||||
const exportExcelHandler = () => {
|
||||
shareExportExcel(route.query.id).then(res => {
|
||||
let fileName = `科技创新项目费用分摊表-${props.allocationName}.zip`
|
||||
const blob = new Blob([res.data])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = fileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
let params = {
|
||||
allocationId: route.query.id
|
||||
}
|
||||
getAllocationSummaryDetails(params).then(res => {
|
||||
tableData.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportExcelHandler">导出</el-button>
|
||||
<el-table ref="table" :data="tableData" style="width: 100%;height: 479px" :show-summary="true" border
|
||||
:summary-method="getSummaries" v-loading="loading" :header-cell-style="{background:'#f5f7fa'}">
|
||||
<el-table-column type="index" label="序号" align="center" width="60"/>
|
||||
<el-table-column prop="projectName" label="项目名称" align="center"/>
|
||||
<el-table-column prop="projectCost" label="费用性质" align="center">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.projectCost !== null">
|
||||
<Tag dictType="project_cost" :value="scope.row.projectCost"/>
|
||||
</div>
|
||||
<div v-else>--</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="researchStage" label="研发阶段" align="center">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.researchStage !== null && scope.row.researchStage !== null && scope.row.researchStage !== undefined">
|
||||
<el-tag effect="plain">{{scope.row.researchStage==1?'开发阶段':'研究阶段'}}</el-tag>
|
||||
</div>
|
||||
<div v-else>--</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="afterTax" label="分摊金额" align="center">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.afterTax !== null">
|
||||
<!-- {{ toThousands(scope.row.afterTax) }}-->
|
||||
{{ scope.row.afterTax }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <Tag dictType="research_stage" :value="scope.row.researchStage"/>-->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getAllocationSummaryDetails} from "@/api/expense-manage";
|
||||
import {shareExportExcel} from "@/api/expense-manage";
|
||||
|
||||
const props = defineProps({
|
||||
allocationName :{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const tableData = ref()
|
||||
const loading = ref(false)
|
||||
const table = ref()
|
||||
const route = useRoute()
|
||||
const getSummaries = (param) => {
|
||||
const {columns, data} = param
|
||||
const sums = []
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '小计'
|
||||
} else if (index === 4) {
|
||||
const values = data.map((item) => Number(item[column.property]))
|
||||
if (!values.every((value) => Number.isNaN(value))) {
|
||||
sums[index] = `${values.reduce((prev, curr) => {
|
||||
const value = Number(curr)
|
||||
if (!Number.isNaN(value)) {
|
||||
return prev + curr
|
||||
} else {
|
||||
return prev
|
||||
}
|
||||
}, 0)}`
|
||||
sums[index] = parseFloat(sums[index]).toFixed(2)
|
||||
// sums[index] = toThousands(sums[index])
|
||||
} else {
|
||||
sums[index] = '-'
|
||||
}
|
||||
}
|
||||
})
|
||||
return sums
|
||||
}
|
||||
// const exportTable = () => {
|
||||
// const $e = table.value.$el
|
||||
// let $table = $e.querySelector('.el-table__fixed')
|
||||
// if (!$table) {
|
||||
// $table = $e
|
||||
// }
|
||||
// exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目费用分摊表", 2)
|
||||
// }
|
||||
const exportExcelHandler = () => {
|
||||
shareExportExcel(route.query.id).then(res => {
|
||||
let fileName = `科技创新项目费用分摊表-${props.allocationName}.zip`
|
||||
const blob = new Blob([res.data])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = fileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
let params = {
|
||||
allocationId: route.query.id
|
||||
}
|
||||
getAllocationSummaryDetails(params).then(res => {
|
||||
tableData.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,208 +1,208 @@
|
||||
<template>
|
||||
<div v-loading="loading" :style="type==='singleDetail'?'padding: 0 30px':''">
|
||||
<baseTitle title="需求征集信息" v-if="type!=='singleDetail'"></baseTitle>
|
||||
<el-form :model="formData" >
|
||||
<el-row gutter="20" style="margin-left: 5px">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="征集名称">
|
||||
<span>{{ formData.requirementName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="征集类型">
|
||||
<span>{{ formData.collectType }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="需求上报截止时间">
|
||||
<span>{{ formData.deadline }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" v-if="formData.isSpecialFund">
|
||||
<el-form-item label="专项资金名称">
|
||||
<span>{{ formData.specialFund }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="type==='singleDetail'">
|
||||
<el-form-item label="征集公司">
|
||||
<span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
|
||||
getCompanyName(formData.companyIds)
|
||||
}}</span>
|
||||
<div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
|
||||
@click="handleExpend">{{ showExpendText }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-bottom: -15px">
|
||||
<el-form-item label="征集说明">
|
||||
<div v-if="formData.collectExplain" v-html="formData.collectExplain" style="white-space: pre-wrap;">
|
||||
</div>
|
||||
<div v-else>--</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件文件" style="margin-bottom: 0"></baseTitle>
|
||||
<file-component title="" tag="需求征集"
|
||||
v-model:value="formData.fileList" :processViewer="processViewer"
|
||||
:file-list-show="fileListShow"/>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: -15px">
|
||||
<div v-if="data.taskId">
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="_value">
|
||||
<el-input
|
||||
v-model="_value"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="approval-record" style="margin-top: -15px">
|
||||
<div class="approval-title">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
<div class="diagram">
|
||||
<div class="base-title">流程图</div>
|
||||
<el-switch
|
||||
v-model="changeDiagram"
|
||||
style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process">
|
||||
<operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
|
||||
:operation-list="data.operationList"
|
||||
:state="data.state"/>
|
||||
<process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="collectionProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {downloadFile} from "@/api/project-demand";
|
||||
|
||||
const emit = defineEmits(['update:value'])
|
||||
const showExpendText = ref('')
|
||||
const showMoreCompany = ref(false)
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
companyOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fileListShow: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const changeDiagram = ref(false)
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const getCompanyName = (data) => {
|
||||
if (data) {
|
||||
return data.join('，')
|
||||
}
|
||||
}
|
||||
const handleExpend = () => {
|
||||
showMoreCompany.value = !showMoreCompany.value;
|
||||
showExpendClass(showMoreCompany.value, props.formData.companyIds)
|
||||
}
|
||||
const showExpendClass = (showMoreCompany, data) => {
|
||||
if (!showMoreCompany) {
|
||||
if (data && data.length > 14) {
|
||||
showExpendText.value = '展开'
|
||||
return 'company-style'
|
||||
}
|
||||
} else {
|
||||
showExpendText.value = '收缩'
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.loading, (newVal) => {
|
||||
props.loading = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-empty__description) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.company-style {
|
||||
//width: 98%;
|
||||
min-height: 30px;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -53px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -26px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div v-loading="loading" :style="type==='singleDetail'?'padding: 0 30px':''">
|
||||
<baseTitle title="需求征集信息" v-if="type!=='singleDetail'"></baseTitle>
|
||||
<el-form :model="formData" >
|
||||
<el-row gutter="20" style="margin-left: 5px">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="征集名称">
|
||||
<span>{{ formData.requirementName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="征集类型">
|
||||
<span>{{ formData.collectType }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="需求上报截止时间">
|
||||
<span>{{ formData.deadline }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" v-if="formData.isSpecialFund">
|
||||
<el-form-item label="专项资金名称">
|
||||
<span>{{ formData.specialFund }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="type==='singleDetail'">
|
||||
<el-form-item label="征集公司">
|
||||
<span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
|
||||
getCompanyName(formData.companyIds)
|
||||
}}</span>
|
||||
<div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
|
||||
@click="handleExpend">{{ showExpendText }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-bottom: -15px">
|
||||
<el-form-item label="征集说明">
|
||||
<div v-if="formData.collectExplain" v-html="formData.collectExplain" style="white-space: pre-wrap;">
|
||||
</div>
|
||||
<div v-else>--</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件文件" style="margin-bottom: 0"></baseTitle>
|
||||
<file-component title="" tag="需求征集"
|
||||
v-model:value="formData.fileList" :processViewer="processViewer"
|
||||
:file-list-show="fileListShow"/>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: -15px">
|
||||
<div v-if="data.taskId">
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="_value">
|
||||
<el-input
|
||||
v-model="_value"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="approval-record" style="margin-top: -15px">
|
||||
<div class="approval-title">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
<div class="diagram">
|
||||
<div class="base-title">流程图</div>
|
||||
<el-switch
|
||||
v-model="changeDiagram"
|
||||
style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process">
|
||||
<operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
|
||||
:operation-list="data.operationList"
|
||||
:state="data.state"/>
|
||||
<process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="collectionProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {downloadFile} from "@/api/project-demand";
|
||||
|
||||
const emit = defineEmits(['update:value'])
|
||||
const showExpendText = ref('')
|
||||
const showMoreCompany = ref(false)
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
companyOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fileListShow: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const changeDiagram = ref(false)
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const getCompanyName = (data) => {
|
||||
if (data) {
|
||||
return data.join('，')
|
||||
}
|
||||
}
|
||||
const handleExpend = () => {
|
||||
showMoreCompany.value = !showMoreCompany.value;
|
||||
showExpendClass(showMoreCompany.value, props.formData.companyIds)
|
||||
}
|
||||
const showExpendClass = (showMoreCompany, data) => {
|
||||
if (!showMoreCompany) {
|
||||
if (data && data.length > 14) {
|
||||
showExpendText.value = '展开'
|
||||
return 'company-style'
|
||||
}
|
||||
} else {
|
||||
showExpendText.value = '收缩'
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.loading, (newVal) => {
|
||||
props.loading = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-empty__description) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.company-style {
|
||||
//width: 98%;
|
||||
min-height: 30px;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -53px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -26px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,424 +1,424 @@
|
||||
<template>
|
||||
<el-dialog custom-class="custom-dialog" class="border" :border="false" width="1000px" style="height: 676px"
|
||||
:title="title" :show-close="false" :visible.sync="visible" v-model="visible" append-to-body :close-on-click-modal="false" @close="closeDialog">
|
||||
<div class="picker">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<el-input v-model="filterText"
|
||||
clearable placeholder="输入公司进行搜索">
|
||||
<template #append>
|
||||
<el-button @click="getList()">搜索</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<fvCheckbox style="margin-left: 10px" :options="checkOptions" v-model="checkList" @change="checkBoxChange"/>
|
||||
<!-- 人员选择 -->
|
||||
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
|
||||
<el-scrollbar style="height:87%;">
|
||||
<div class="tree">
|
||||
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
|
||||
:show-checkbox="showCheckbox" highlight-current default-expand-all
|
||||
:default-checked-keys="defaultChecked" :disabled="disabled"
|
||||
:check-strictly="!checkStrictly" @node-click="(node,check)=>handleNodeClick(node,check)"
|
||||
@check-change="handleCheckClick" :filter-node-method="filterNode">
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node">
|
||||
<div style="display: flex;align-items: center;padding: 3px 0">
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="selected">
|
||||
<div class="count">
|
||||
<span>已选 {{ selectList.length }} 项</span>
|
||||
<span @click="clearSelected">清空</span>
|
||||
</div>
|
||||
<div class="org-items">
|
||||
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
|
||||
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
|
||||
{{ selectItem.label }}
|
||||
<el-icon @click="removeSingleSelected(selectItem)" size="20" style="margin-left: 10px;cursor: pointer;">
|
||||
<CircleClose/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button size="mini" @click="cancelUserPicker">取 消</el-button>
|
||||
<el-button size="mini" color="#DED0B2" @click="selectConfirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import {getSubCompOpt} from "@/api/user/user";
|
||||
|
||||
const checkList = ref(['1'])
|
||||
const checkStrictly = ref(false)
|
||||
const isExpand = ref('展开')
|
||||
const expandedKeys = ref(['-1']);
|
||||
const checkOptions = ref([
|
||||
{
|
||||
label: isExpand.value,
|
||||
value: '1'
|
||||
},
|
||||
// {
|
||||
// label: '父子联动',
|
||||
// value: '2'
|
||||
// },
|
||||
])
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
multiple: { //是否多选
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
showCheckbox: { //是否显示左侧选择框
|
||||
default: true,
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
let selectItem = reactive({
|
||||
type: -1,
|
||||
value: "0"
|
||||
});
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const title = ref("请选择");
|
||||
const selectList = ref([]);
|
||||
const filterText = ref("");
|
||||
const dataList = ref([]);
|
||||
const defaultChecked = ref([]);
|
||||
const tree = ref([]);
|
||||
const defaultProps = {
|
||||
value: "value",
|
||||
label: "label",
|
||||
children: "children",
|
||||
disabled: "disabled",
|
||||
};
|
||||
|
||||
const isRemoveSingleSelected = ref(false);
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => filterText.value, (newVal) => {
|
||||
tree.value.filter(newVal);
|
||||
});
|
||||
const closeDialog=()=>{
|
||||
console.log('关闭')
|
||||
visible.value=false
|
||||
filterText.value=''
|
||||
}
|
||||
const checkBoxChange = (val) => {
|
||||
checkStrictly.value = val.includes('2')
|
||||
let nodes = tree.value.store.nodesMap
|
||||
if (val.includes('1')) {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = true;
|
||||
}
|
||||
isExpand.value = '折叠'
|
||||
} else {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = false;
|
||||
}
|
||||
isExpand.value = '展开'
|
||||
}
|
||||
}
|
||||
const getList = () => {
|
||||
getSubCompOpt().then(res => {
|
||||
dataList.value = [
|
||||
{
|
||||
label: "所有公司",
|
||||
value: -1,
|
||||
},
|
||||
...res.data
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
//通过关键字过滤树节点
|
||||
const filterNode = (value, data) => {
|
||||
//通过关键字过滤树节点
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
};
|
||||
//用于用户选择
|
||||
const show = () => {
|
||||
//用于弹开部门选择
|
||||
visible.value = true;
|
||||
selectList.value = _value.value
|
||||
defaultChecked.value = _value.value.map(item => item.value)
|
||||
getList()
|
||||
};
|
||||
|
||||
const updateTreeCheck = (list, flag) => {
|
||||
list.forEach(item => {
|
||||
if (item.value !== -1) {
|
||||
tree.value.setChecked(item, flag)
|
||||
if (item.children !== undefined) {
|
||||
updateTreeCheck(item.children, flag)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCheckClick = (data, checked) => {
|
||||
if (data.value == -1) {
|
||||
if(checked){
|
||||
updateTreeCheck(dataList.value, false)
|
||||
tree.value.setChecked(data,true);
|
||||
}
|
||||
}
|
||||
if(tree.value.getCheckedKeys().length>1&&tree.value.getCheckedKeys().indexOf(-1)!==-1){
|
||||
tree.value.setChecked(-1,false);
|
||||
}
|
||||
// 左侧有选择框 + 多选
|
||||
if (props.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === data.value) {
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
// if (data.children === undefined) {
|
||||
selectList.value.push(data);
|
||||
// }
|
||||
} else if (data === "1") {
|
||||
tree.value.setCheckedKeys([]);
|
||||
selectList.value = [];
|
||||
}
|
||||
} else {// 左侧有选择框 + 单选
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === data.value) {
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
tree.value.setCheckedNodes([data]);
|
||||
selectList.value = [data];
|
||||
} else if (data === "1") {
|
||||
selectList.value = [];
|
||||
tree.value.setCheckedKeys([]);
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleNodeClick = (node, check) => {
|
||||
if (check.isLeaf !== false) {
|
||||
if (props.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === node.value) {
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
check.checked = true;
|
||||
selectList.value.push(node);
|
||||
} else {
|
||||
check.checked = true;
|
||||
selectList.value = [node];
|
||||
}
|
||||
}
|
||||
// _value.value = selectList.value
|
||||
};
|
||||
const removeSingleSelected = (selectItem) => {
|
||||
//左侧无选择框时,右侧显示×
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === selectItem.value) {
|
||||
tree.value.setChecked(selectList.value[i].value, false);
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (props.showCheckbox) {
|
||||
// 左侧有选择框 + 单选
|
||||
if (props.multiple === false) {
|
||||
tree.value.setCheckedKeys([]);
|
||||
}
|
||||
}
|
||||
// isRemoveSingleSelected.value = true
|
||||
};
|
||||
const clearSelected = () => {
|
||||
//清空
|
||||
ElMessageBox.confirm("您确定要清空已选中的项?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
// isRemoveSingleSelected.value = true
|
||||
if (!props.showCheckbox) {
|
||||
selectList.value = [];
|
||||
} else {
|
||||
handleCheckClick("1");
|
||||
}
|
||||
});
|
||||
};
|
||||
const cancelUserPicker = () => {
|
||||
if (localStorage.getItem('originallyCompanySelectedList')) {
|
||||
selectList.value = JSON.parse(localStorage.getItem('originallyCompanySelectedList'))
|
||||
}else{
|
||||
selectList.value=[]
|
||||
handleCheckClick("1");
|
||||
}
|
||||
emit("cancelOrClear", selectList.value);
|
||||
visible.value = false;
|
||||
// nextTick(()=>{
|
||||
// isRemoveSingleSelected.value=false
|
||||
// })
|
||||
}
|
||||
const selectConfirm = () => {
|
||||
//确定按钮
|
||||
emit("ok", selectList.value);
|
||||
dataList.value = []
|
||||
visible.value = false;
|
||||
localStorage.setItem('originallyCompanySelectedList', JSON.stringify(selectList.value))
|
||||
};
|
||||
defineExpose({
|
||||
show
|
||||
});
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$containWidth: 480px;
|
||||
:deep(.tree) {
|
||||
.el-tree-node__content {
|
||||
height: 34px;
|
||||
|
||||
.tree-node {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
//.el-tree-node {
|
||||
// .is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
// display: inline-block;
|
||||
// }
|
||||
//
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
||||
.footer {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
height: 560px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
.candidate {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $containWidth;
|
||||
height: 100%;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 40px;
|
||||
|
||||
.el-input__inner, .el-input-group__append {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 450px;
|
||||
height: 100%;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
.count {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
> span:nth-child(2) {
|
||||
float: right;
|
||||
color: #c75450;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.org-items {
|
||||
overflow-y: auto;
|
||||
height: 90%;
|
||||
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.org-item {
|
||||
margin: 0 5px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
padding: 7px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-scrollbar .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
float: right;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 16px;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog custom-class="custom-dialog" class="border" :border="false" width="1000px" style="height: 676px"
|
||||
:title="title" :show-close="false" :visible.sync="visible" v-model="visible" append-to-body :close-on-click-modal="false" @close="closeDialog">
|
||||
<div class="picker">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<el-input v-model="filterText"
|
||||
clearable placeholder="输入公司进行搜索">
|
||||
<template #append>
|
||||
<el-button @click="getList()">搜索</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<fvCheckbox style="margin-left: 10px" :options="checkOptions" v-model="checkList" @change="checkBoxChange"/>
|
||||
<!-- 人员选择 -->
|
||||
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
|
||||
<el-scrollbar style="height:87%;">
|
||||
<div class="tree">
|
||||
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
|
||||
:show-checkbox="showCheckbox" highlight-current default-expand-all
|
||||
:default-checked-keys="defaultChecked" :disabled="disabled"
|
||||
:check-strictly="!checkStrictly" @node-click="(node,check)=>handleNodeClick(node,check)"
|
||||
@check-change="handleCheckClick" :filter-node-method="filterNode">
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node">
|
||||
<div style="display: flex;align-items: center;padding: 3px 0">
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="selected">
|
||||
<div class="count">
|
||||
<span>已选 {{ selectList.length }} 项</span>
|
||||
<span @click="clearSelected">清空</span>
|
||||
</div>
|
||||
<div class="org-items">
|
||||
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
|
||||
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
|
||||
{{ selectItem.label }}
|
||||
<el-icon @click="removeSingleSelected(selectItem)" size="20" style="margin-left: 10px;cursor: pointer;">
|
||||
<CircleClose/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button size="mini" @click="cancelUserPicker">取 消</el-button>
|
||||
<el-button size="mini" color="#DED0B2" @click="selectConfirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import {getSubCompOpt} from "@/api/user/user";
|
||||
|
||||
const checkList = ref(['1'])
|
||||
const checkStrictly = ref(false)
|
||||
const isExpand = ref('展开')
|
||||
const expandedKeys = ref(['-1']);
|
||||
const checkOptions = ref([
|
||||
{
|
||||
label: isExpand.value,
|
||||
value: '1'
|
||||
},
|
||||
// {
|
||||
// label: '父子联动',
|
||||
// value: '2'
|
||||
// },
|
||||
])
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
multiple: { //是否多选
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
showCheckbox: { //是否显示左侧选择框
|
||||
default: true,
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
let selectItem = reactive({
|
||||
type: -1,
|
||||
value: "0"
|
||||
});
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const title = ref("请选择");
|
||||
const selectList = ref([]);
|
||||
const filterText = ref("");
|
||||
const dataList = ref([]);
|
||||
const defaultChecked = ref([]);
|
||||
const tree = ref([]);
|
||||
const defaultProps = {
|
||||
value: "value",
|
||||
label: "label",
|
||||
children: "children",
|
||||
disabled: "disabled",
|
||||
};
|
||||
|
||||
const isRemoveSingleSelected = ref(false);
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => filterText.value, (newVal) => {
|
||||
tree.value.filter(newVal);
|
||||
});
|
||||
const closeDialog=()=>{
|
||||
console.log('关闭')
|
||||
visible.value=false
|
||||
filterText.value=''
|
||||
}
|
||||
const checkBoxChange = (val) => {
|
||||
checkStrictly.value = val.includes('2')
|
||||
let nodes = tree.value.store.nodesMap
|
||||
if (val.includes('1')) {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = true;
|
||||
}
|
||||
isExpand.value = '折叠'
|
||||
} else {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = false;
|
||||
}
|
||||
isExpand.value = '展开'
|
||||
}
|
||||
}
|
||||
const getList = () => {
|
||||
getSubCompOpt().then(res => {
|
||||
dataList.value = [
|
||||
{
|
||||
label: "所有公司",
|
||||
value: -1,
|
||||
},
|
||||
...res.data
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
//通过关键字过滤树节点
|
||||
const filterNode = (value, data) => {
|
||||
//通过关键字过滤树节点
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
};
|
||||
//用于用户选择
|
||||
const show = () => {
|
||||
//用于弹开部门选择
|
||||
visible.value = true;
|
||||
selectList.value = _value.value
|
||||
defaultChecked.value = _value.value.map(item => item.value)
|
||||
getList()
|
||||
};
|
||||
|
||||
const updateTreeCheck = (list, flag) => {
|
||||
list.forEach(item => {
|
||||
if (item.value !== -1) {
|
||||
tree.value.setChecked(item, flag)
|
||||
if (item.children !== undefined) {
|
||||
updateTreeCheck(item.children, flag)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCheckClick = (data, checked) => {
|
||||
if (data.value == -1) {
|
||||
if(checked){
|
||||
updateTreeCheck(dataList.value, false)
|
||||
tree.value.setChecked(data,true);
|
||||
}
|
||||
}
|
||||
if(tree.value.getCheckedKeys().length>1&&tree.value.getCheckedKeys().indexOf(-1)!==-1){
|
||||
tree.value.setChecked(-1,false);
|
||||
}
|
||||
// 左侧有选择框 + 多选
|
||||
if (props.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === data.value) {
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
// if (data.children === undefined) {
|
||||
selectList.value.push(data);
|
||||
// }
|
||||
} else if (data === "1") {
|
||||
tree.value.setCheckedKeys([]);
|
||||
selectList.value = [];
|
||||
}
|
||||
} else {// 左侧有选择框 + 单选
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === data.value) {
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
tree.value.setCheckedNodes([data]);
|
||||
selectList.value = [data];
|
||||
} else if (data === "1") {
|
||||
selectList.value = [];
|
||||
tree.value.setCheckedKeys([]);
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleNodeClick = (node, check) => {
|
||||
if (check.isLeaf !== false) {
|
||||
if (props.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === node.value) {
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
check.checked = true;
|
||||
selectList.value.push(node);
|
||||
} else {
|
||||
check.checked = true;
|
||||
selectList.value = [node];
|
||||
}
|
||||
}
|
||||
// _value.value = selectList.value
|
||||
};
|
||||
const removeSingleSelected = (selectItem) => {
|
||||
//左侧无选择框时,右侧显示×
|
||||
for (let i = 0; i < selectList.value.length; i++) {
|
||||
if (selectList.value[i].value === selectItem.value) {
|
||||
tree.value.setChecked(selectList.value[i].value, false);
|
||||
selectList.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (props.showCheckbox) {
|
||||
// 左侧有选择框 + 单选
|
||||
if (props.multiple === false) {
|
||||
tree.value.setCheckedKeys([]);
|
||||
}
|
||||
}
|
||||
// isRemoveSingleSelected.value = true
|
||||
};
|
||||
const clearSelected = () => {
|
||||
//清空
|
||||
ElMessageBox.confirm("您确定要清空已选中的项?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
// isRemoveSingleSelected.value = true
|
||||
if (!props.showCheckbox) {
|
||||
selectList.value = [];
|
||||
} else {
|
||||
handleCheckClick("1");
|
||||
}
|
||||
});
|
||||
};
|
||||
const cancelUserPicker = () => {
|
||||
if (localStorage.getItem('originallyCompanySelectedList')) {
|
||||
selectList.value = JSON.parse(localStorage.getItem('originallyCompanySelectedList'))
|
||||
}else{
|
||||
selectList.value=[]
|
||||
handleCheckClick("1");
|
||||
}
|
||||
emit("cancelOrClear", selectList.value);
|
||||
visible.value = false;
|
||||
// nextTick(()=>{
|
||||
// isRemoveSingleSelected.value=false
|
||||
// })
|
||||
}
|
||||
const selectConfirm = () => {
|
||||
//确定按钮
|
||||
emit("ok", selectList.value);
|
||||
dataList.value = []
|
||||
visible.value = false;
|
||||
localStorage.setItem('originallyCompanySelectedList', JSON.stringify(selectList.value))
|
||||
};
|
||||
defineExpose({
|
||||
show
|
||||
});
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$containWidth: 480px;
|
||||
:deep(.tree) {
|
||||
.el-tree-node__content {
|
||||
height: 34px;
|
||||
|
||||
.tree-node {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
//.el-tree-node {
|
||||
// .is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
// display: inline-block;
|
||||
// }
|
||||
//
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
||||
.footer {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
height: 560px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
.candidate {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $containWidth;
|
||||
height: 100%;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 40px;
|
||||
|
||||
.el-input__inner, .el-input-group__append {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 450px;
|
||||
height: 100%;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
.count {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
> span:nth-child(2) {
|
||||
float: right;
|
||||
color: #c75450;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.org-items {
|
||||
overflow-y: auto;
|
||||
height: 90%;
|
||||
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.org-item {
|
||||
margin: 0 5px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
padding: 7px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-scrollbar .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
float: right;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 16px;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,255 +1,255 @@
|
||||
<template>
|
||||
<el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
|
||||
<el-table ref="reportTable" :data="tableData" style="width: 100%;height: 479px"
|
||||
:span-method="objectSpanMethod" v-loading="loading">
|
||||
<el-table-column label="四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表" align="center">
|
||||
<el-table-column v-for="column in columnInfo" :prop="column.prop" :label="column.label" align="center"
|
||||
:fixed="(!column.children) ? ((column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 'right' : 'left') : false"
|
||||
:width="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 160:130">
|
||||
<template #default="scope">
|
||||
<template v-if="column.children">
|
||||
<el-table-column v-for="childColumn in column.children"
|
||||
:prop="column.prop + '.'+ childColumn.prop"
|
||||
:label="childColumn.label"
|
||||
:width="childColumn.prop === 'subtotal' ? 160 : 130">
|
||||
<template #default="columnScope">
|
||||
<template v-if="(tableData.length -1) !== columnScope.$index">
|
||||
{{
|
||||
columnScope.row[column.prop][childColumn.prop] ? columnScope.row[column.prop][childColumn.prop] : '/'
|
||||
}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ columnScope.row[column.prop][childColumn.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!--分摊金额合计与分摊金额总计计算-->
|
||||
<template
|
||||
v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length -1) !== scope.$index">
|
||||
{{ getTotalSeparation(scope.row, column.prop) }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="(tableData.length -1) === scope.$index && (column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost')">
|
||||
{{ getTotalSummary(scope.row, column.prop) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[column.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {getResearchUser, getAllocationDetails} from "@/api/expense-manage";
|
||||
import {exportExcel} from "@/utils/export-excel";
|
||||
import {ElNotification} from "element-plus";
|
||||
|
||||
const route = useRoute()
|
||||
const tableIns = ref()
|
||||
const reportTable = ref({});
|
||||
const columnInfo = ref([])
|
||||
const monthConcat = new Map()
|
||||
const tableData = ref([])
|
||||
const loading = ref(false)
|
||||
const researchOptions = ref([])
|
||||
|
||||
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
|
||||
if (columnIndex === 0) {
|
||||
if (monthConcat.has(rowIndex)) {
|
||||
return {
|
||||
rowspan: monthConcat.get(rowIndex),
|
||||
colspan: 1,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let length = Object.keys(row).length
|
||||
// console.log(length)
|
||||
if (length > 5) {
|
||||
if (concatColumn(columnIndex, length, rowIndex)) {
|
||||
if (rowIndex % 5 === 0) {
|
||||
return {
|
||||
rowspan: 5,
|
||||
colspan: 1,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getTotalSeparation = (row, prop) => {
|
||||
let totalSeparation = 0.00
|
||||
for (let key of Object.keys(row)) {
|
||||
if (key.startsWith('personInfo')) {
|
||||
let value = prop === 'totalSeparation' ? (row[key].separationAmount ? row[key].separationAmount : 0) : row[key].subtotal
|
||||
if ("/" !== value) {
|
||||
try {
|
||||
totalSeparation += parseFloat(value)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (totalSeparation !== 0) {
|
||||
return totalSeparation.toFixed(2);
|
||||
} else {
|
||||
return "/"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getTotalSummary = (row, prop) => {
|
||||
let key;
|
||||
if (prop === 'totalSeparation') {
|
||||
key = 'separationAmount'
|
||||
} else {
|
||||
key = 'subtotal'
|
||||
}
|
||||
let result = 0
|
||||
for (const rowKey of Object.keys(row)) {
|
||||
if (rowKey.startsWith('personInfo')) {
|
||||
let value = row[rowKey][key]
|
||||
if (value && "/" !== value) {
|
||||
try {
|
||||
result += parseFloat(value)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.toFixed(2);
|
||||
}
|
||||
|
||||
const concatColumn = (columnIndex, length, rowIndex) => {
|
||||
if (rowIndex === tableData.value.length - 1) {
|
||||
return false
|
||||
}
|
||||
let columnLength = 5 + (length - 5) * 5
|
||||
if (columnIndex === 1
|
||||
|| columnIndex === columnLength - 1) {
|
||||
return true;
|
||||
}
|
||||
for (let i = 0; i < length - 5; i++) {
|
||||
if (columnIndex === 4 + (i * 5)
|
||||
|| columnIndex === 5 + (i * 5)
|
||||
|| columnIndex === 7 + (i * 5)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
getAllocationDetails(route.query.id).then(res => {
|
||||
if (res.code !== 1000) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
columnInfo.value = res.data.columns
|
||||
let tableDataLet = res.data.tableData;
|
||||
let personInfoKey = []
|
||||
columnInfo.value.forEach(item => {
|
||||
if (item.prop.startsWith('personInfo')) {
|
||||
personInfoKey.push(item.prop)
|
||||
}
|
||||
})
|
||||
tableData.value = []
|
||||
let rowIndex = 0;
|
||||
let summary = {
|
||||
month: "",
|
||||
salaryType: '',
|
||||
projectName: "合计",
|
||||
totalSeparation: 10,
|
||||
totalSeparationCost: 10
|
||||
}
|
||||
for (const key of personInfoKey) {
|
||||
summary[key] = {
|
||||
researchDuration: "",
|
||||
separationAmount: 0,
|
||||
subtotal: 0,
|
||||
wagesPayable: "",
|
||||
workday: "",
|
||||
}
|
||||
}
|
||||
tableDataLet.forEach((tableDatum) => {
|
||||
let rowspan = tableDatum.rows.length * 5
|
||||
monthConcat.set(rowIndex, rowspan)
|
||||
rowIndex += rowspan
|
||||
for (const tableDatumElement of tableDatum.rows) {
|
||||
tableData.value = tableData.value.concat(tableDatumElement)
|
||||
let row = tableDatumElement[0]
|
||||
for (const key of personInfoKey) {
|
||||
try {
|
||||
if (row[key].subtotal && '/' !== row[key].subtotal) {
|
||||
summary[key].subtotal += parseFloat(row[key].subtotal)
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
for (const row of tableData.value) {
|
||||
for (const key of personInfoKey) {
|
||||
try {
|
||||
if (row[key].separationAmount && '/' !== row[key].separationAmount) {
|
||||
summary[key].separationAmount += parseFloat(row[key].separationAmount)
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const key of personInfoKey) {
|
||||
summary[key].subtotal = summary[key].subtotal.toFixed(2)
|
||||
summary[key].separationAmount = summary[key].separationAmount.toFixed(2)
|
||||
}
|
||||
monthConcat.set(rowIndex, 1)
|
||||
tableData.value.push(summary)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getResearchOptions = async () => {
|
||||
const res = await getResearchUser()
|
||||
researchOptions.value = res.data
|
||||
}
|
||||
const search = (val) => {
|
||||
tableConfig.params = {
|
||||
allocationId: route.query.id,
|
||||
...val
|
||||
}
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
getResearchOptions()
|
||||
init()
|
||||
|
||||
|
||||
const exportTable = () => {
|
||||
const $e = reportTable.value.$el
|
||||
let $table = $e.querySelector('.el-table__fixed')
|
||||
if (!$table) {
|
||||
$table = $e
|
||||
}
|
||||
exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表", 2)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
|
||||
<el-table ref="reportTable" :data="tableData" style="width: 100%;height: 479px"
|
||||
:span-method="objectSpanMethod" v-loading="loading">
|
||||
<el-table-column label="四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表" align="center">
|
||||
<el-table-column v-for="column in columnInfo" :prop="column.prop" :label="column.label" align="center"
|
||||
:fixed="(!column.children) ? ((column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 'right' : 'left') : false"
|
||||
:width="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 160:130">
|
||||
<template #default="scope">
|
||||
<template v-if="column.children">
|
||||
<el-table-column v-for="childColumn in column.children"
|
||||
:prop="column.prop + '.'+ childColumn.prop"
|
||||
:label="childColumn.label"
|
||||
:width="childColumn.prop === 'subtotal' ? 160 : 130">
|
||||
<template #default="columnScope">
|
||||
<template v-if="(tableData.length -1) !== columnScope.$index">
|
||||
{{
|
||||
columnScope.row[column.prop][childColumn.prop] ? columnScope.row[column.prop][childColumn.prop] : '/'
|
||||
}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ columnScope.row[column.prop][childColumn.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!--分摊金额合计与分摊金额总计计算-->
|
||||
<template
|
||||
v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length -1) !== scope.$index">
|
||||
{{ getTotalSeparation(scope.row, column.prop) }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="(tableData.length -1) === scope.$index && (column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost')">
|
||||
{{ getTotalSummary(scope.row, column.prop) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[column.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {getResearchUser, getAllocationDetails} from "@/api/expense-manage";
|
||||
import {exportExcel} from "@/utils/export-excel";
|
||||
import {ElNotification} from "element-plus";
|
||||
|
||||
const route = useRoute()
|
||||
const tableIns = ref()
|
||||
const reportTable = ref({});
|
||||
const columnInfo = ref([])
|
||||
const monthConcat = new Map()
|
||||
const tableData = ref([])
|
||||
const loading = ref(false)
|
||||
const researchOptions = ref([])
|
||||
|
||||
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
|
||||
if (columnIndex === 0) {
|
||||
if (monthConcat.has(rowIndex)) {
|
||||
return {
|
||||
rowspan: monthConcat.get(rowIndex),
|
||||
colspan: 1,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let length = Object.keys(row).length
|
||||
// console.log(length)
|
||||
if (length > 5) {
|
||||
if (concatColumn(columnIndex, length, rowIndex)) {
|
||||
if (rowIndex % 5 === 0) {
|
||||
return {
|
||||
rowspan: 5,
|
||||
colspan: 1,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getTotalSeparation = (row, prop) => {
|
||||
let totalSeparation = 0.00
|
||||
for (let key of Object.keys(row)) {
|
||||
if (key.startsWith('personInfo')) {
|
||||
let value = prop === 'totalSeparation' ? (row[key].separationAmount ? row[key].separationAmount : 0) : row[key].subtotal
|
||||
if ("/" !== value) {
|
||||
try {
|
||||
totalSeparation += parseFloat(value)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (totalSeparation !== 0) {
|
||||
return totalSeparation.toFixed(2);
|
||||
} else {
|
||||
return "/"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getTotalSummary = (row, prop) => {
|
||||
let key;
|
||||
if (prop === 'totalSeparation') {
|
||||
key = 'separationAmount'
|
||||
} else {
|
||||
key = 'subtotal'
|
||||
}
|
||||
let result = 0
|
||||
for (const rowKey of Object.keys(row)) {
|
||||
if (rowKey.startsWith('personInfo')) {
|
||||
let value = row[rowKey][key]
|
||||
if (value && "/" !== value) {
|
||||
try {
|
||||
result += parseFloat(value)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.toFixed(2);
|
||||
}
|
||||
|
||||
const concatColumn = (columnIndex, length, rowIndex) => {
|
||||
if (rowIndex === tableData.value.length - 1) {
|
||||
return false
|
||||
}
|
||||
let columnLength = 5 + (length - 5) * 5
|
||||
if (columnIndex === 1
|
||||
|| columnIndex === columnLength - 1) {
|
||||
return true;
|
||||
}
|
||||
for (let i = 0; i < length - 5; i++) {
|
||||
if (columnIndex === 4 + (i * 5)
|
||||
|| columnIndex === 5 + (i * 5)
|
||||
|| columnIndex === 7 + (i * 5)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
getAllocationDetails(route.query.id).then(res => {
|
||||
if (res.code !== 1000) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
columnInfo.value = res.data.columns
|
||||
let tableDataLet = res.data.tableData;
|
||||
let personInfoKey = []
|
||||
columnInfo.value.forEach(item => {
|
||||
if (item.prop.startsWith('personInfo')) {
|
||||
personInfoKey.push(item.prop)
|
||||
}
|
||||
})
|
||||
tableData.value = []
|
||||
let rowIndex = 0;
|
||||
let summary = {
|
||||
month: "",
|
||||
salaryType: '',
|
||||
projectName: "合计",
|
||||
totalSeparation: 10,
|
||||
totalSeparationCost: 10
|
||||
}
|
||||
for (const key of personInfoKey) {
|
||||
summary[key] = {
|
||||
researchDuration: "",
|
||||
separationAmount: 0,
|
||||
subtotal: 0,
|
||||
wagesPayable: "",
|
||||
workday: "",
|
||||
}
|
||||
}
|
||||
tableDataLet.forEach((tableDatum) => {
|
||||
let rowspan = tableDatum.rows.length * 5
|
||||
monthConcat.set(rowIndex, rowspan)
|
||||
rowIndex += rowspan
|
||||
for (const tableDatumElement of tableDatum.rows) {
|
||||
tableData.value = tableData.value.concat(tableDatumElement)
|
||||
let row = tableDatumElement[0]
|
||||
for (const key of personInfoKey) {
|
||||
try {
|
||||
if (row[key].subtotal && '/' !== row[key].subtotal) {
|
||||
summary[key].subtotal += parseFloat(row[key].subtotal)
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
for (const row of tableData.value) {
|
||||
for (const key of personInfoKey) {
|
||||
try {
|
||||
if (row[key].separationAmount && '/' !== row[key].separationAmount) {
|
||||
summary[key].separationAmount += parseFloat(row[key].separationAmount)
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const key of personInfoKey) {
|
||||
summary[key].subtotal = summary[key].subtotal.toFixed(2)
|
||||
summary[key].separationAmount = summary[key].separationAmount.toFixed(2)
|
||||
}
|
||||
monthConcat.set(rowIndex, 1)
|
||||
tableData.value.push(summary)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getResearchOptions = async () => {
|
||||
const res = await getResearchUser()
|
||||
researchOptions.value = res.data
|
||||
}
|
||||
const search = (val) => {
|
||||
tableConfig.params = {
|
||||
allocationId: route.query.id,
|
||||
...val
|
||||
}
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
getResearchOptions()
|
||||
init()
|
||||
|
||||
|
||||
const exportTable = () => {
|
||||
const $e = reportTable.value.$el
|
||||
let $table = $e.querySelector('.el-table__fixed')
|
||||
if (!$table) {
|
||||
$table = $e
|
||||
}
|
||||
exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表", 2)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,212 +1,212 @@
|
||||
<template>
|
||||
<el-form :label-position="labelAlign">
|
||||
<el-form-item :label="title" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" :style="{marginTop: '10px',marginLeft: tag!=='需求上报'?'15px':'0'}">
|
||||
<file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
|
||||
<!-- :style="{width:isOpenPrint?'610px': '100%'}" table-layout="auto" id="printTable"-->
|
||||
<fvTable style="width:100%;" :height="tag=='项目立项'?'160':'160'" :style="{maxHeight:tag=='项目立项'?'160px':'160px',height:tag=='项目立项'?'160px':'160px'}" v-if="processViewer" :scrollbar-always-on="true" :tableConfig="tableConfig"
|
||||
:data="_value" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
|
||||
:fileType="filePreviewParam.fileType"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {downloadFile, deleteFile} from "@/api/project-demand";
|
||||
import {ElNotification} from "element-plus";
|
||||
import FilePreview from "../filePreview/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileNameTableWidth: {
|
||||
type: String,
|
||||
default: '400'
|
||||
},
|
||||
fileListShow: {
|
||||
type: String,
|
||||
default: 'READ'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
//弹窗是否铺满全屏
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否开始打印
|
||||
isOpenPrint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:value'])
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 85,
|
||||
},
|
||||
{
|
||||
prop: 'originalFileName',
|
||||
label: '文件名',
|
||||
align: 'center',
|
||||
width: props.fileNameTableWidth,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
|
||||
},
|
||||
{
|
||||
prop: 'tag',
|
||||
label: '标签',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
minWidth: props.fileNameTableWidth,
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '文件大小',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = []
|
||||
btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
|
||||
// if (row.newFile) {
|
||||
// btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
|
||||
// }
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
{
|
||||
btn.map(item => (
|
||||
<el-button
|
||||
type={item.type}
|
||||
onClick={() => item.func()}
|
||||
link>
|
||||
{item.label}
|
||||
</el-button>
|
||||
))
|
||||
}
|
||||
{
|
||||
row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
|
||||
onDelete={() => handleDelete(row)}/>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const filePreviewParam = ref({
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
fileType: 'pdf'
|
||||
})
|
||||
const filePreviewShow = ref(false)
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const clickToPreview=(row)=>{
|
||||
filePreviewShow.value = false
|
||||
filePreviewParam.value = {
|
||||
fileUrl: row.url,
|
||||
fileName: row.originalFileName,
|
||||
fileType: row.fileType
|
||||
}
|
||||
nextTick(()=>{
|
||||
filePreviewShow.value = true
|
||||
})
|
||||
}
|
||||
const getOtherFile = (val) => {
|
||||
props.processViewer = false
|
||||
let fileObj = compositeParam(val)
|
||||
_value.value.push(fileObj)
|
||||
nextTick(() => {
|
||||
props.processViewer = true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const compositeParam = (item, type) => {
|
||||
return {
|
||||
fileId: item.id,
|
||||
size: item.size,
|
||||
originalFileName: item.originalFilename,
|
||||
fileType: item.fileType,
|
||||
url: item.url,
|
||||
newFile: true,
|
||||
tag: props.tag
|
||||
}
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
const handleDelete = (row) => {
|
||||
deleteFile(row.fileId).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
_value.value.splice(_value.value.findIndex((item) => item.fileId === row.fileId), 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table--fit ) {
|
||||
height: 160px !important;
|
||||
}
|
||||
@media print {
|
||||
//#printTable{
|
||||
// width: 400px!important;
|
||||
//}
|
||||
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-form :label-position="labelAlign">
|
||||
<el-form-item :label="title" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" :style="{marginTop: '10px',marginLeft: tag!=='需求上报'?'15px':'0'}">
|
||||
<file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
|
||||
<!-- :style="{width:isOpenPrint?'610px': '100%'}" table-layout="auto" id="printTable"-->
|
||||
<fvTable style="width:100%;" :height="tag=='项目立项'?'160':'160'" :style="{maxHeight:tag=='项目立项'?'160px':'160px',height:tag=='项目立项'?'160px':'160px'}" v-if="processViewer" :scrollbar-always-on="true" :tableConfig="tableConfig"
|
||||
:data="_value" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
|
||||
:fileType="filePreviewParam.fileType"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {downloadFile, deleteFile} from "@/api/project-demand";
|
||||
import {ElNotification} from "element-plus";
|
||||
import FilePreview from "../filePreview/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileNameTableWidth: {
|
||||
type: String,
|
||||
default: '400'
|
||||
},
|
||||
fileListShow: {
|
||||
type: String,
|
||||
default: 'READ'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
//弹窗是否铺满全屏
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否开始打印
|
||||
isOpenPrint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:value'])
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 85,
|
||||
},
|
||||
{
|
||||
prop: 'originalFileName',
|
||||
label: '文件名',
|
||||
align: 'center',
|
||||
width: props.fileNameTableWidth,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
|
||||
},
|
||||
{
|
||||
prop: 'tag',
|
||||
label: '标签',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
minWidth: props.fileNameTableWidth,
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '文件大小',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = []
|
||||
btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
|
||||
// if (row.newFile) {
|
||||
// btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
|
||||
// }
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
{
|
||||
btn.map(item => (
|
||||
<el-button
|
||||
type={item.type}
|
||||
onClick={() => item.func()}
|
||||
link>
|
||||
{item.label}
|
||||
</el-button>
|
||||
))
|
||||
}
|
||||
{
|
||||
row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
|
||||
onDelete={() => handleDelete(row)}/>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const filePreviewParam = ref({
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
fileType: 'pdf'
|
||||
})
|
||||
const filePreviewShow = ref(false)
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const clickToPreview=(row)=>{
|
||||
filePreviewShow.value = false
|
||||
filePreviewParam.value = {
|
||||
fileUrl: row.url,
|
||||
fileName: row.originalFileName,
|
||||
fileType: row.fileType
|
||||
}
|
||||
nextTick(()=>{
|
||||
filePreviewShow.value = true
|
||||
})
|
||||
}
|
||||
const getOtherFile = (val) => {
|
||||
props.processViewer = false
|
||||
let fileObj = compositeParam(val)
|
||||
_value.value.push(fileObj)
|
||||
nextTick(() => {
|
||||
props.processViewer = true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const compositeParam = (item, type) => {
|
||||
return {
|
||||
fileId: item.id,
|
||||
size: item.size,
|
||||
originalFileName: item.originalFilename,
|
||||
fileType: item.fileType,
|
||||
url: item.url,
|
||||
newFile: true,
|
||||
tag: props.tag
|
||||
}
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
const handleDelete = (row) => {
|
||||
deleteFile(row.fileId).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
_value.value.splice(_value.value.findIndex((item) => item.fileId === row.fileId), 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table--fit ) {
|
||||
height: 160px !important;
|
||||
}
|
||||
@media print {
|
||||
//#printTable{
|
||||
// width: 400px!important;
|
||||
//}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,242 +1,242 @@
|
||||
<template>
|
||||
<!-- <baseTitle title="审核意见"></baseTitle>-->
|
||||
<!-- <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>-->
|
||||
<div class="oper-page-btn" style="display: flex">
|
||||
<el-button type="danger" @click="handleReject">驳回</el-button>
|
||||
<el-button color="#DED0B2" @click="handleAgree">同意</el-button>
|
||||
</div>
|
||||
<div class="opinion-dialog">
|
||||
<el-dialog v-model="showBackNode" title="请选择退回节点" width="400">
|
||||
<el-table :data="taskUserOptionList" style="width: 100%"
|
||||
:header-cell-style="{background:'#f5f7fa'}">
|
||||
<el-table-column width="55">
|
||||
<template #default="scope">
|
||||
<el-radio
|
||||
class="radio"
|
||||
:label="scope.row"
|
||||
v-model="backNode"
|
||||
>   
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nodeName"
|
||||
label="节点名称">
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- {{scope.row.nodeId==-1?'发起节点':scope.row.nodeName}}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="操作者">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.userInfo" type="success">{{ scope.row.userInfo.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="oper" style="display: flex;justify-content: flex-end;margin-top: 10px">
|
||||
<el-button type="danger" @click="rollbackHandler">确定</el-button>
|
||||
<el-button @click="showBackNode=false">取消</el-button>
|
||||
</div>
|
||||
<!-- <el-select v-if="taskUserOptionList?.length>0" v-model="backNode" placeholder="请选择退回节点" clearable>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in taskUserOptionList"-->
|
||||
<!-- :key="item.nodeId"-->
|
||||
<!-- :label="item.nodeName + (item.userInfo ? ':' + item.userInfo.name : '')"-->
|
||||
<!-- :value="item.nodeId">-->
|
||||
<!-- </el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- <el-button type="danger" @click="rollbackHandler">确认</el-button>-->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {ElNotification} from 'element-plus';
|
||||
import {agreeTask, rejectTask} from "@/api/project-demand/index.js";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
taskId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//退回节点选择框数据
|
||||
taskUserOptionList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const form = ref()
|
||||
const backNode = ref({})
|
||||
const showBackNode = ref(false)
|
||||
const schema = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: '',
|
||||
prop: 'auditOpinion',
|
||||
component: 'el-input',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
props: {
|
||||
placeholder: '请输入审核意见',
|
||||
type: 'textarea',
|
||||
rows: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const back = () => {
|
||||
switch (route.name) {
|
||||
case 'Initiation/detail':
|
||||
router.push({name: 'Initiation'})
|
||||
break;
|
||||
case 'Filing/detail':
|
||||
router.push({name: 'Filing'})
|
||||
break;
|
||||
case 'Implementation/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
if (route.query.step === '10') {
|
||||
router.push({name: 'Summary'})
|
||||
} else if (route.query.step === '20') {
|
||||
router.push({name: 'Initiation'})
|
||||
} else if (route.query.step === '40') {
|
||||
router.push({name: 'Implementation'})
|
||||
} else if (route.query.step === '50') {
|
||||
router.push({name: 'Filing'})
|
||||
} else if (route.query.step === '00') {
|
||||
router.push({name: 'Requirement'})
|
||||
}
|
||||
}
|
||||
break;
|
||||
// case 'Summary/detail':
|
||||
// if (route.query.source === 'home') {
|
||||
// router.push('/home')
|
||||
// } else {
|
||||
// router.push({name: 'Summary'})
|
||||
// }
|
||||
// break;
|
||||
case 'Requirement/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Requirement'})
|
||||
}
|
||||
break;
|
||||
case 'Fund/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Fund'})
|
||||
}
|
||||
break;
|
||||
case 'Share/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Expense/share'})
|
||||
}
|
||||
break;
|
||||
case 'Phase/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Implementation'})
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 驳回
|
||||
const handleReject = async () => {
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
showBackNode.value = true
|
||||
backNode.value = {}
|
||||
}
|
||||
//回退节点
|
||||
const rollbackHandler = async () => {
|
||||
// const values = form.value.getValues()
|
||||
|
||||
const params = {
|
||||
taskId: props.taskId,
|
||||
// ...values
|
||||
auditOpinion: _value.value,
|
||||
rollBackId: backNode.value.nodeId
|
||||
}
|
||||
// console.log('params', params)
|
||||
const res = await rejectTask(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
back()
|
||||
}
|
||||
}
|
||||
|
||||
const handleAgree = async () => {
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
// const values = form.value.getValues()
|
||||
const params = {
|
||||
taskId: props.taskId,
|
||||
formData: props.formData,
|
||||
auditOpinion: _value.value
|
||||
}
|
||||
const res = await agreeTask(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
back()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.opinion-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- <baseTitle title="审核意见"></baseTitle>-->
|
||||
<!-- <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>-->
|
||||
<div class="oper-page-btn" style="display: flex">
|
||||
<el-button type="danger" @click="handleReject">驳回</el-button>
|
||||
<el-button color="#DED0B2" @click="handleAgree">同意</el-button>
|
||||
</div>
|
||||
<div class="opinion-dialog">
|
||||
<el-dialog v-model="showBackNode" title="请选择退回节点" width="400">
|
||||
<el-table :data="taskUserOptionList" style="width: 100%"
|
||||
:header-cell-style="{background:'#f5f7fa'}">
|
||||
<el-table-column width="55">
|
||||
<template #default="scope">
|
||||
<el-radio
|
||||
class="radio"
|
||||
:label="scope.row"
|
||||
v-model="backNode"
|
||||
>   
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nodeName"
|
||||
label="节点名称">
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- {{scope.row.nodeId==-1?'发起节点':scope.row.nodeName}}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="操作者">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.userInfo" type="success">{{ scope.row.userInfo.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="oper" style="display: flex;justify-content: flex-end;margin-top: 10px">
|
||||
<el-button type="danger" @click="rollbackHandler">确定</el-button>
|
||||
<el-button @click="showBackNode=false">取消</el-button>
|
||||
</div>
|
||||
<!-- <el-select v-if="taskUserOptionList?.length>0" v-model="backNode" placeholder="请选择退回节点" clearable>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in taskUserOptionList"-->
|
||||
<!-- :key="item.nodeId"-->
|
||||
<!-- :label="item.nodeName + (item.userInfo ? ':' + item.userInfo.name : '')"-->
|
||||
<!-- :value="item.nodeId">-->
|
||||
<!-- </el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- <el-button type="danger" @click="rollbackHandler">确认</el-button>-->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {ElNotification} from 'element-plus';
|
||||
import {agreeTask, rejectTask} from "@/api/project-demand/index.js";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
taskId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//退回节点选择框数据
|
||||
taskUserOptionList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const form = ref()
|
||||
const backNode = ref({})
|
||||
const showBackNode = ref(false)
|
||||
const schema = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: '',
|
||||
prop: 'auditOpinion',
|
||||
component: 'el-input',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
props: {
|
||||
placeholder: '请输入审核意见',
|
||||
type: 'textarea',
|
||||
rows: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const back = () => {
|
||||
switch (route.name) {
|
||||
case 'Initiation/detail':
|
||||
router.push({name: 'Initiation'})
|
||||
break;
|
||||
case 'Filing/detail':
|
||||
router.push({name: 'Filing'})
|
||||
break;
|
||||
case 'Implementation/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
if (route.query.step === '10') {
|
||||
router.push({name: 'Summary'})
|
||||
} else if (route.query.step === '20') {
|
||||
router.push({name: 'Initiation'})
|
||||
} else if (route.query.step === '40') {
|
||||
router.push({name: 'Implementation'})
|
||||
} else if (route.query.step === '50') {
|
||||
router.push({name: 'Filing'})
|
||||
} else if (route.query.step === '00') {
|
||||
router.push({name: 'Requirement'})
|
||||
}
|
||||
}
|
||||
break;
|
||||
// case 'Summary/detail':
|
||||
// if (route.query.source === 'home') {
|
||||
// router.push('/home')
|
||||
// } else {
|
||||
// router.push({name: 'Summary'})
|
||||
// }
|
||||
// break;
|
||||
case 'Requirement/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Requirement'})
|
||||
}
|
||||
break;
|
||||
case 'Fund/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Fund'})
|
||||
}
|
||||
break;
|
||||
case 'Share/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Expense/share'})
|
||||
}
|
||||
break;
|
||||
case 'Phase/detail':
|
||||
if (route.query.source === 'home') {
|
||||
router.push('/home')
|
||||
} else {
|
||||
router.push({name: 'Implementation'})
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 驳回
|
||||
const handleReject = async () => {
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
showBackNode.value = true
|
||||
backNode.value = {}
|
||||
}
|
||||
//回退节点
|
||||
const rollbackHandler = async () => {
|
||||
// const values = form.value.getValues()
|
||||
|
||||
const params = {
|
||||
taskId: props.taskId,
|
||||
// ...values
|
||||
auditOpinion: _value.value,
|
||||
rollBackId: backNode.value.nodeId
|
||||
}
|
||||
// console.log('params', params)
|
||||
const res = await rejectTask(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
back()
|
||||
}
|
||||
}
|
||||
|
||||
const handleAgree = async () => {
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
// const values = form.value.getValues()
|
||||
const params = {
|
||||
taskId: props.taskId,
|
||||
formData: props.formData,
|
||||
auditOpinion: _value.value
|
||||
}
|
||||
const res = await agreeTask(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
back()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.opinion-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,275 +1,275 @@
|
||||
<template>
|
||||
<div v-loading="loading" style="padding: 0 30px">
|
||||
<baseTitle title="专项资金详情"></baseTitle>
|
||||
<el-form :model="formData" ref="form" >
|
||||
<el-row style="margin-left: 15px;margin-bottom: -18px">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="专项名称">
|
||||
<span>{{ formData.name }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="金额(元)">
|
||||
<span>{{ toThousands(formData.fundAmount) }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="剩余金额(元)">
|
||||
<span>{{ toThousands(formData.residualAmount) }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="专项资金情况说明" >
|
||||
<div style="white-space: pre-wrap">{{formData.introduce}}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: -18px" class="projects">
|
||||
<baseTitle title="关联项目" v-if="!data.taskId"></baseTitle>
|
||||
<el-col :span="24" v-if="!data.taskId" >
|
||||
<el-form-item >
|
||||
<fvTable style="width: 100%;max-height:160px" height="160" v-if="showTable" :tableConfig="projectTable"
|
||||
:data="formData.projects" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<baseTitle title="附件文件"></baseTitle>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<fvTable style="width: 100%;max-height: 160px;" height="160" v-if="showTable" :tableConfig="fileTable"
|
||||
:data="formData.files" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: -18px">
|
||||
<div v-if="data.taskId">
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="auditOpinion">
|
||||
<el-input
|
||||
v-model="formData.auditOpinion"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="approval-record">
|
||||
<div class="approval-title">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
<div class="diagram">
|
||||
<div class="base-title">流程图</div>
|
||||
<el-switch
|
||||
v-model="changeDiagram"
|
||||
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process">
|
||||
<operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
|
||||
:operation-list="data.operationList"
|
||||
:state="data.state"/>
|
||||
<process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="fundProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<opinion v-if="data.taskId" :formData="data.formData" :taskId="data.taskId"
|
||||
:taskUserOptionList="data.taskUserOptionList"
|
||||
v-model:value="formData.auditOpinion"></opinion>
|
||||
<file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
|
||||
:fileType="filePreviewParam.fileType"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {toThousands} from '@/utils/changePrice.js'
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {downloadFile} from "@/api/project-demand";
|
||||
|
||||
const changeDiagram = ref(false)
|
||||
const emit = defineEmits(['getInfo', "update:formData"])
|
||||
const form = ref()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}, showTable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const projectTable = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: '80',
|
||||
},
|
||||
{
|
||||
prop: 'projectName',
|
||||
label: '项目名称',
|
||||
align: 'center',
|
||||
width: 400
|
||||
},
|
||||
{
|
||||
prop: 'specialFundAmount',
|
||||
label: '项目金额',
|
||||
align: 'center',
|
||||
currentRender:({row})=>{
|
||||
return <span>{toThousands(row.specialFundAmount)}</span>
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '项目时间',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const fileTable = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: '80',
|
||||
},
|
||||
{
|
||||
prop: 'originalFileName',
|
||||
label: '文件名',
|
||||
align: 'center',
|
||||
width: 400,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
|
||||
},
|
||||
{
|
||||
prop: 'tag',
|
||||
label: '标签',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '文件大小',
|
||||
align: 'center',
|
||||
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const filePreviewParam = ref({
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
fileType: 'pdf'
|
||||
})
|
||||
const filePreviewShow = ref(false)
|
||||
const clickToPreview=(row)=>{
|
||||
filePreviewShow.value = false
|
||||
filePreviewParam.value = {
|
||||
fileUrl: row.url,
|
||||
fileName: row.originalFileName,
|
||||
fileType: row.fileType
|
||||
}
|
||||
nextTick(()=>{
|
||||
filePreviewShow.value = true
|
||||
})
|
||||
}
|
||||
const handleView=(row)=>{
|
||||
router.push({
|
||||
name: 'Implementation/detail',
|
||||
query: {
|
||||
id: row.requirementId,
|
||||
projectId: row.projectId,
|
||||
step: '10'
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.loading, (newVal) => {
|
||||
props.loading = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
watch(() => props.showTable, (newVal) => {
|
||||
props.showTable = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.projects{
|
||||
:deep(.el-table--fit ) {
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div v-loading="loading" style="padding: 0 30px">
|
||||
<baseTitle title="专项资金详情"></baseTitle>
|
||||
<el-form :model="formData" ref="form" >
|
||||
<el-row style="margin-left: 15px;margin-bottom: -18px">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="专项名称">
|
||||
<span>{{ formData.name }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="金额(元)">
|
||||
<span>{{ toThousands(formData.fundAmount) }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="剩余金额(元)">
|
||||
<span>{{ toThousands(formData.residualAmount) }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="专项资金情况说明" >
|
||||
<div style="white-space: pre-wrap">{{formData.introduce}}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: -18px" class="projects">
|
||||
<baseTitle title="关联项目" v-if="!data.taskId"></baseTitle>
|
||||
<el-col :span="24" v-if="!data.taskId" >
|
||||
<el-form-item >
|
||||
<fvTable style="width: 100%;max-height:160px" height="160" v-if="showTable" :tableConfig="projectTable"
|
||||
:data="formData.projects" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<baseTitle title="附件文件"></baseTitle>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<fvTable style="width: 100%;max-height: 160px;" height="160" v-if="showTable" :tableConfig="fileTable"
|
||||
:data="formData.files" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: -18px">
|
||||
<div v-if="data.taskId">
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="auditOpinion">
|
||||
<el-input
|
||||
v-model="formData.auditOpinion"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="approval-record">
|
||||
<div class="approval-title">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
<div class="diagram">
|
||||
<div class="base-title">流程图</div>
|
||||
<el-switch
|
||||
v-model="changeDiagram"
|
||||
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process">
|
||||
<operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
|
||||
:operation-list="data.operationList"
|
||||
:state="data.state"/>
|
||||
<process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="fundProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<opinion v-if="data.taskId" :formData="data.formData" :taskId="data.taskId"
|
||||
:taskUserOptionList="data.taskUserOptionList"
|
||||
v-model:value="formData.auditOpinion"></opinion>
|
||||
<file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
|
||||
:fileType="filePreviewParam.fileType"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {toThousands} from '@/utils/changePrice.js'
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {downloadFile} from "@/api/project-demand";
|
||||
|
||||
const changeDiagram = ref(false)
|
||||
const emit = defineEmits(['getInfo', "update:formData"])
|
||||
const form = ref()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}, showTable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const projectTable = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: '80',
|
||||
},
|
||||
{
|
||||
prop: 'projectName',
|
||||
label: '项目名称',
|
||||
align: 'center',
|
||||
width: 400
|
||||
},
|
||||
{
|
||||
prop: 'specialFundAmount',
|
||||
label: '项目金额',
|
||||
align: 'center',
|
||||
currentRender:({row})=>{
|
||||
return <span>{toThousands(row.specialFundAmount)}</span>
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '项目时间',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const fileTable = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: '80',
|
||||
},
|
||||
{
|
||||
prop: 'originalFileName',
|
||||
label: '文件名',
|
||||
align: 'center',
|
||||
width: 400,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
|
||||
},
|
||||
{
|
||||
prop: 'tag',
|
||||
label: '标签',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '文件大小',
|
||||
align: 'center',
|
||||
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const filePreviewParam = ref({
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
fileType: 'pdf'
|
||||
})
|
||||
const filePreviewShow = ref(false)
|
||||
const clickToPreview=(row)=>{
|
||||
filePreviewShow.value = false
|
||||
filePreviewParam.value = {
|
||||
fileUrl: row.url,
|
||||
fileName: row.originalFileName,
|
||||
fileType: row.fileType
|
||||
}
|
||||
nextTick(()=>{
|
||||
filePreviewShow.value = true
|
||||
})
|
||||
}
|
||||
const handleView=(row)=>{
|
||||
router.push({
|
||||
name: 'Implementation/detail',
|
||||
query: {
|
||||
id: row.requirementId,
|
||||
projectId: row.projectId,
|
||||
step: '10'
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.loading, (newVal) => {
|
||||
props.loading = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
watch(() => props.showTable, (newVal) => {
|
||||
props.showTable = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.projects{
|
||||
:deep(.el-table--fit ) {
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,442 +1,442 @@
|
||||
<template>
|
||||
<div class="detail-block" v-loading="loading">
|
||||
<el-form :model="localFormData" ref="summaryForm" :rules="rules">
|
||||
<baseTitle title="预期知识产权"></baseTitle>
|
||||
<el-row gutter="20" style="margin-bottom: -18px;margin-left: 5px">
|
||||
<!-- <el-col :span="6">-->
|
||||
<!-- <el-form-item label="预期成果形式" prop="resultForm">-->
|
||||
<!-- <span>{{ filterDict(cacheStore.getDict('result_form'), localFormData.resultForm) }}</span>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="6">
|
||||
<el-form-item label="知识产权归属" prop="intellectualProperty">
|
||||
<span>{{
|
||||
filterDict(cacheStore.getDict('intellectual_property'), localFormData.intellectualProperty)
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估专利(项)" prop="newPatent">
|
||||
<span>{{ localFormData.newPatent }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估软件著作权(项)" prop="softwareCopyright">
|
||||
<span>{{ localFormData.softwareCopyright }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估技术标准(项)" prop="technicalNorms">
|
||||
<span>{{ localFormData.technicalNorms }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新产品(项)" prop="newProduct">
|
||||
<span>{{ localFormData.newProduct }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新工艺(项)" prop="newProcess">
|
||||
<span>{{ localFormData.newProcess }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新装置(项)" prop="newDevice">
|
||||
<span>{{ localFormData.newDevice }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新材料(项)" prop="newMaterials">
|
||||
<span>{{ localFormData.newMaterials }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估计算机软件(项)" prop="computerSoftware">
|
||||
<span>{{ localFormData.computerSoftware }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估论文论著(项)" prop="thesis">
|
||||
<span>{{ localFormData.thesis }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估研究报告(项)" prop="researchReport">
|
||||
<span>{{ localFormData.researchReport }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估商标(项)" prop="trademark">
|
||||
<span>{{ localFormData.trademark }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估其他(项)" prop="other">
|
||||
<span style="white-space: pre-wrap">{{ localFormData.other }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<baseTitle title="项目描述"></baseTitle>
|
||||
<el-row gutter="20" style="margin-left: 5px;margin-bottom: -18px;">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="现有业务描述" prop="serviceDescription">
|
||||
<span style="white-space: pre-wrap">{{ localFormData.serviceDescription }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="建设目标描述" prop="contentDescription">
|
||||
<span style="white-space: pre-wrap">{{ localFormData.contentDescription }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<baseTitle title="需求上报申请书" style="margin-bottom: -3px;"></baseTitle>
|
||||
<!-- <el-row gutter="20" style="margin-bottom: -15px;">-->
|
||||
<!-- <el-col :span="24">-->
|
||||
<!-- <single-file-component tag="需求上报" v-model:value="localFormData.singleFile" :processViewer="processViewer"/>-->
|
||||
<!-- <!– <el-form-item>–>-->
|
||||
<!-- <!– {{localFormData.singleFile}}–>-->
|
||||
<!-- <!– <el-button type="primary" link @click="handleDownload(localFormData.singleFile)" style="font-size: 16px">–>-->
|
||||
<!-- <!– {{ localFormData.singleFile?.originalFileName }}–>-->
|
||||
<!-- <!– </el-button>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!--/* <baseTitle title="附件文件" style="margin-bottom: 0"></baseTitle>*/-->
|
||||
<el-row gutter="20" style="margin-bottom: -18px;">
|
||||
<el-col :span="24" class="file-table-style">
|
||||
<file-component tag="需求上报"
|
||||
v-model:value="localFormData.fileList" :processViewer="processViewer"
|
||||
:file-list-show="fileListShow"/>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: -15px">
|
||||
<div v-if="data.taskId">
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="_value">
|
||||
<el-input
|
||||
v-model="_value"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="data.state==='5'" style="margin-bottom: 15px">
|
||||
<baseTitle title="前置流程" v-if="localFormData.preProcess"></baseTitle>
|
||||
<div style="display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<div v-for="(item,index) in localFormData.preProcess" :key="item.requestId">
|
||||
<a :href="item.baseUrl" target="_blank"
|
||||
style="color: #2a99ff;cursor: pointer">{{ item.requestName }}<span
|
||||
v-if="index != localFormData.preProcess.length -1">，</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-perm="['annual:plan:approve']" v-if="data.state==='4'">
|
||||
<!-- <baseTitle title="前置流程"></baseTitle>-->
|
||||
<!-- <select-pre-process :formData="localFormData"/>-->
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="_value">
|
||||
<el-input
|
||||
v-model="_value"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="approval-record">
|
||||
<div class="approval-title" style="margin-top: -12px">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
<div class="diagram">
|
||||
<div class="base-title">流程图</div>
|
||||
<el-switch
|
||||
v-model="changeDiagram"
|
||||
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
||||
/>
|
||||
</div>
|
||||
<el-button color="#DED0B2" style="margin-left: 10px"
|
||||
@click="handleCarbonCopy()">立即抄送
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="process">
|
||||
<operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
|
||||
:operation-list="data.operationList"
|
||||
:step="'report'"
|
||||
:state="data.state"/>
|
||||
<process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="summaryProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<user-picker :multiple="true" ref="carbonCopyUserRef" title="请选择抄送人员"
|
||||
v-model:value="carbonCopyUserList" @ok="carbonCopyUserPickerOk"
|
||||
@cancelOrClear="carbonCopyUserPickerOk"/>
|
||||
|
||||
<div class="oper-page-btn" v-perm="['annual:plan:approve']" v-if="data.state==='4'">
|
||||
<el-button type="danger" @click="handleRejectPlan">驳回年度计划</el-button>
|
||||
<el-button color="#DED0B2" @click="handleAgreePlan">通过年度计划</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {toThousands} from '@/utils/changePrice.js'
|
||||
import {downloadFile, deleteFile} from "@/api/project-demand";
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {getFundOption} from "@/api/special-fund";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {getSubCompOpt} from "@/api/user/user";
|
||||
import FileComponent from "./FileComponent.vue";
|
||||
import {ElNotification} from "element-plus";
|
||||
import {approvePlan} from "@/api/project-demand/summary";
|
||||
import SelectPreProcess from "@/components/SelectPreProcess.vue";
|
||||
import {applyCcSend} from "@/api/expense-manage";
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
|
||||
const emit = defineEmits(['update:value','ccSend'])
|
||||
const tagsViewStore = useTagsView()
|
||||
const cacheStore = useCacheStore()
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
state: '1'
|
||||
}
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fileListShow: {
|
||||
type: String,
|
||||
default: 'READ'
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const changeDiagram = ref(false)
|
||||
const localFormData = ref({})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const fundOption = ref([])
|
||||
const companyOption = ref([])
|
||||
const dictName = ref({})
|
||||
const carbonCopyUserList = ref([])
|
||||
const carbonCopyUserRef = ref()
|
||||
const rules = reactive({
|
||||
auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
|
||||
})
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const handleCarbonCopy = () => {
|
||||
carbonCopyUserRef.value.showUserPicker()
|
||||
}
|
||||
const carbonCopyUserPickerOk = (userList) => {
|
||||
carbonCopyUserList.value = userList.map(item => item.id)
|
||||
console.log('localFormData.value', props.data)
|
||||
console.log("🚀 ~ file:'carbonCopyUserList.value ", carbonCopyUserList.value)
|
||||
|
||||
addUser()
|
||||
}
|
||||
const addUser = async () => {
|
||||
const res = await applyCcSend({
|
||||
instanceId: props.data.processInstanceId,
|
||||
projectId: route.query.projectId,
|
||||
state: route.query.step,
|
||||
userIds: carbonCopyUserList.value
|
||||
})
|
||||
console.log('res', res)
|
||||
if (res.code === 1000) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '抄送成功',
|
||||
type: 'success'
|
||||
})
|
||||
emit('ccSend')
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleRejectPlan = async () => {
|
||||
// const values = form.value.getValues()
|
||||
// console.log('route',route.query.projectId)
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
auditOpinion: _value.value,
|
||||
projectId: parseInt(route.query.projectId),
|
||||
state: false
|
||||
}
|
||||
// console.log('params', params)
|
||||
const res = await approvePlan(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push({
|
||||
name: 'Summary'
|
||||
})
|
||||
}
|
||||
const handleAgreePlan = async () => {
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
auditOpinion: _value.value,
|
||||
projectId: parseInt(route.query.projectId),
|
||||
preProcess: JSON.stringify(localFormData.value.preProcess),
|
||||
state: true
|
||||
}
|
||||
|
||||
const res = await approvePlan(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push({
|
||||
name: 'Summary'
|
||||
})
|
||||
}
|
||||
const filterDict = (data, value) => {
|
||||
if (data === undefined || value === undefined) return;
|
||||
let label = ''
|
||||
let result = []
|
||||
if (value instanceof Array) {
|
||||
value.forEach(item1 => {
|
||||
data.find(item => {
|
||||
if (item.value == item1) {
|
||||
result.push(item.label)
|
||||
}
|
||||
})
|
||||
})
|
||||
label = result.map(item => item).join('，')
|
||||
} else {
|
||||
if (data instanceof Array) {
|
||||
data.find(item => {
|
||||
if (item.value == value) {
|
||||
label = item.label
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return label
|
||||
}
|
||||
const getFundOptions = async () => {
|
||||
const resFund = await getFundOption()
|
||||
fundOption.value = resFund.data
|
||||
const res = await getSubCompOpt()
|
||||
companyOption.value = res.data
|
||||
}
|
||||
const changeName = (option, value) => {
|
||||
let name = ''
|
||||
option.forEach(item => {
|
||||
if (item.value == value) {
|
||||
name = item.label
|
||||
}
|
||||
})
|
||||
return name
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.loading, (newVal) => {
|
||||
props.loading = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watchEffect(() => {
|
||||
props.formData.singleFile = [props.formData.singleFile]
|
||||
return Object.keys(props.formData).length && (localFormData.value = props.formData)
|
||||
})
|
||||
|
||||
getFundOptions()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-block {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.file-table-style {
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div class="detail-block" v-loading="loading">
|
||||
<el-form :model="localFormData" ref="summaryForm" :rules="rules">
|
||||
<baseTitle title="预期知识产权"></baseTitle>
|
||||
<el-row gutter="20" style="margin-bottom: -18px;margin-left: 5px">
|
||||
<!-- <el-col :span="6">-->
|
||||
<!-- <el-form-item label="预期成果形式" prop="resultForm">-->
|
||||
<!-- <span>{{ filterDict(cacheStore.getDict('result_form'), localFormData.resultForm) }}</span>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="6">
|
||||
<el-form-item label="知识产权归属" prop="intellectualProperty">
|
||||
<span>{{
|
||||
filterDict(cacheStore.getDict('intellectual_property'), localFormData.intellectualProperty)
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估专利(项)" prop="newPatent">
|
||||
<span>{{ localFormData.newPatent }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估软件著作权(项)" prop="softwareCopyright">
|
||||
<span>{{ localFormData.softwareCopyright }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估技术标准(项)" prop="technicalNorms">
|
||||
<span>{{ localFormData.technicalNorms }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新产品(项)" prop="newProduct">
|
||||
<span>{{ localFormData.newProduct }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新工艺(项)" prop="newProcess">
|
||||
<span>{{ localFormData.newProcess }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新装置(项)" prop="newDevice">
|
||||
<span>{{ localFormData.newDevice }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估新材料(项)" prop="newMaterials">
|
||||
<span>{{ localFormData.newMaterials }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估计算机软件(项)" prop="computerSoftware">
|
||||
<span>{{ localFormData.computerSoftware }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估论文论著(项)" prop="thesis">
|
||||
<span>{{ localFormData.thesis }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估研究报告(项)" prop="researchReport">
|
||||
<span>{{ localFormData.researchReport }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估商标(项)" prop="trademark">
|
||||
<span>{{ localFormData.trademark }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预估其他(项)" prop="other">
|
||||
<span style="white-space: pre-wrap">{{ localFormData.other }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<baseTitle title="项目描述"></baseTitle>
|
||||
<el-row gutter="20" style="margin-left: 5px;margin-bottom: -18px;">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="现有业务描述" prop="serviceDescription">
|
||||
<span style="white-space: pre-wrap">{{ localFormData.serviceDescription }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="建设目标描述" prop="contentDescription">
|
||||
<span style="white-space: pre-wrap">{{ localFormData.contentDescription }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<baseTitle title="需求上报申请书" style="margin-bottom: -3px;"></baseTitle>
|
||||
<!-- <el-row gutter="20" style="margin-bottom: -15px;">-->
|
||||
<!-- <el-col :span="24">-->
|
||||
<!-- <single-file-component tag="需求上报" v-model:value="localFormData.singleFile" :processViewer="processViewer"/>-->
|
||||
<!-- <!– <el-form-item>–>-->
|
||||
<!-- <!– {{localFormData.singleFile}}–>-->
|
||||
<!-- <!– <el-button type="primary" link @click="handleDownload(localFormData.singleFile)" style="font-size: 16px">–>-->
|
||||
<!-- <!– {{ localFormData.singleFile?.originalFileName }}–>-->
|
||||
<!-- <!– </el-button>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!--/* <baseTitle title="附件文件" style="margin-bottom: 0"></baseTitle>*/-->
|
||||
<el-row gutter="20" style="margin-bottom: -18px;">
|
||||
<el-col :span="24" class="file-table-style">
|
||||
<file-component tag="需求上报"
|
||||
v-model:value="localFormData.fileList" :processViewer="processViewer"
|
||||
:file-list-show="fileListShow"/>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: -15px">
|
||||
<div v-if="data.taskId">
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="_value">
|
||||
<el-input
|
||||
v-model="_value"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="data.state==='5'" style="margin-bottom: 15px">
|
||||
<baseTitle title="前置流程" v-if="localFormData.preProcess"></baseTitle>
|
||||
<div style="display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<div v-for="(item,index) in localFormData.preProcess" :key="item.requestId">
|
||||
<a :href="item.baseUrl" target="_blank"
|
||||
style="color: #2a99ff;cursor: pointer">{{ item.requestName }}<span
|
||||
v-if="index != localFormData.preProcess.length -1">，</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-perm="['annual:plan:approve']" v-if="data.state==='4'">
|
||||
<!-- <baseTitle title="前置流程"></baseTitle>-->
|
||||
<!-- <select-pre-process :formData="localFormData"/>-->
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-form-item prop="_value">
|
||||
<el-input
|
||||
v-model="_value"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="approval-record">
|
||||
<div class="approval-title" style="margin-top: -12px">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
<div class="diagram">
|
||||
<div class="base-title">流程图</div>
|
||||
<el-switch
|
||||
v-model="changeDiagram"
|
||||
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
||||
/>
|
||||
</div>
|
||||
<el-button color="#DED0B2" style="margin-left: 10px"
|
||||
@click="handleCarbonCopy()">立即抄送
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="process">
|
||||
<operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
|
||||
:operation-list="data.operationList"
|
||||
:step="'report'"
|
||||
:state="data.state"/>
|
||||
<process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="summaryProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<user-picker :multiple="true" ref="carbonCopyUserRef" title="请选择抄送人员"
|
||||
v-model:value="carbonCopyUserList" @ok="carbonCopyUserPickerOk"
|
||||
@cancelOrClear="carbonCopyUserPickerOk"/>
|
||||
|
||||
<div class="oper-page-btn" v-perm="['annual:plan:approve']" v-if="data.state==='4'">
|
||||
<el-button type="danger" @click="handleRejectPlan">驳回年度计划</el-button>
|
||||
<el-button color="#DED0B2" @click="handleAgreePlan">通过年度计划</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {toThousands} from '@/utils/changePrice.js'
|
||||
import {downloadFile, deleteFile} from "@/api/project-demand";
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {getFundOption} from "@/api/special-fund";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {getSubCompOpt} from "@/api/user/user";
|
||||
import FileComponent from "./FileComponent.vue";
|
||||
import {ElNotification} from "element-plus";
|
||||
import {approvePlan} from "@/api/project-demand/summary";
|
||||
import SelectPreProcess from "@/components/SelectPreProcess.vue";
|
||||
import {applyCcSend} from "@/api/expense-manage";
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
|
||||
const emit = defineEmits(['update:value','ccSend'])
|
||||
const tagsViewStore = useTagsView()
|
||||
const cacheStore = useCacheStore()
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
state: '1'
|
||||
}
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fileListShow: {
|
||||
type: String,
|
||||
default: 'READ'
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const changeDiagram = ref(false)
|
||||
const localFormData = ref({})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const fundOption = ref([])
|
||||
const companyOption = ref([])
|
||||
const dictName = ref({})
|
||||
const carbonCopyUserList = ref([])
|
||||
const carbonCopyUserRef = ref()
|
||||
const rules = reactive({
|
||||
auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
|
||||
})
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
const handleCarbonCopy = () => {
|
||||
carbonCopyUserRef.value.showUserPicker()
|
||||
}
|
||||
const carbonCopyUserPickerOk = (userList) => {
|
||||
carbonCopyUserList.value = userList.map(item => item.id)
|
||||
console.log('localFormData.value', props.data)
|
||||
console.log("🚀 ~ file:'carbonCopyUserList.value ", carbonCopyUserList.value)
|
||||
|
||||
addUser()
|
||||
}
|
||||
const addUser = async () => {
|
||||
const res = await applyCcSend({
|
||||
instanceId: props.data.processInstanceId,
|
||||
projectId: route.query.projectId,
|
||||
state: route.query.step,
|
||||
userIds: carbonCopyUserList.value
|
||||
})
|
||||
console.log('res', res)
|
||||
if (res.code === 1000) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '抄送成功',
|
||||
type: 'success'
|
||||
})
|
||||
emit('ccSend')
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleRejectPlan = async () => {
|
||||
// const values = form.value.getValues()
|
||||
// console.log('route',route.query.projectId)
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
auditOpinion: _value.value,
|
||||
projectId: parseInt(route.query.projectId),
|
||||
state: false
|
||||
}
|
||||
// console.log('params', params)
|
||||
const res = await approvePlan(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push({
|
||||
name: 'Summary'
|
||||
})
|
||||
}
|
||||
const handleAgreePlan = async () => {
|
||||
if (!_value.value) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请填写审核意见',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
auditOpinion: _value.value,
|
||||
projectId: parseInt(route.query.projectId),
|
||||
preProcess: JSON.stringify(localFormData.value.preProcess),
|
||||
state: true
|
||||
}
|
||||
|
||||
const res = await approvePlan(params)
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push({
|
||||
name: 'Summary'
|
||||
})
|
||||
}
|
||||
const filterDict = (data, value) => {
|
||||
if (data === undefined || value === undefined) return;
|
||||
let label = ''
|
||||
let result = []
|
||||
if (value instanceof Array) {
|
||||
value.forEach(item1 => {
|
||||
data.find(item => {
|
||||
if (item.value == item1) {
|
||||
result.push(item.label)
|
||||
}
|
||||
})
|
||||
})
|
||||
label = result.map(item => item).join('，')
|
||||
} else {
|
||||
if (data instanceof Array) {
|
||||
data.find(item => {
|
||||
if (item.value == value) {
|
||||
label = item.label
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return label
|
||||
}
|
||||
const getFundOptions = async () => {
|
||||
const resFund = await getFundOption()
|
||||
fundOption.value = resFund.data
|
||||
const res = await getSubCompOpt()
|
||||
companyOption.value = res.data
|
||||
}
|
||||
const changeName = (option, value) => {
|
||||
let name = ''
|
||||
option.forEach(item => {
|
||||
if (item.value == value) {
|
||||
name = item.label
|
||||
}
|
||||
})
|
||||
return name
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.loading, (newVal) => {
|
||||
props.loading = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watchEffect(() => {
|
||||
props.formData.singleFile = [props.formData.singleFile]
|
||||
return Object.keys(props.formData).length && (localFormData.value = props.formData)
|
||||
})
|
||||
|
||||
getFundOptions()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-block {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.file-table-style {
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,209 +1,209 @@
|
||||
<template>
|
||||
<el-form :label-position="labelAlign">
|
||||
<el-form-item :label="title?'其他文件':''" :label-position="labelAlign" :label-width="title?95:''">
|
||||
<fvTable style="width: 100%;max-height: 80px;" v-if="processViewer" height="80" :tableConfig="tableConfig"
|
||||
:data="_value" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
|
||||
:fileType="filePreviewParam.fileType"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {downloadFile, deleteFile} from "@/api/project-demand";
|
||||
import {ElNotification} from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileNameTableWidth: {
|
||||
type: String,
|
||||
default: '400'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
//弹窗是否铺满全屏
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:value'])
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 85,
|
||||
},
|
||||
{
|
||||
prop: 'originalFileName',
|
||||
label: '文件名',
|
||||
align: 'center',
|
||||
width: props.fileNameTableWidth,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
|
||||
|
||||
},
|
||||
{
|
||||
prop: 'tag',
|
||||
label: '标签',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '文件大小',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = []
|
||||
btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
|
||||
// if (row.newFile) {
|
||||
// btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
|
||||
// }
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
{
|
||||
btn.map(item => (
|
||||
<el-button
|
||||
type={item.type}
|
||||
onClick={() => item.func()}
|
||||
link>
|
||||
{item.label}
|
||||
</el-button>
|
||||
))
|
||||
}
|
||||
{
|
||||
row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
|
||||
onDelete={() => handleDelete(row)}/>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const filePreviewParam = ref({
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
fileType: 'pdf'
|
||||
})
|
||||
const filePreviewShow = ref(false)
|
||||
const clickToPreview=(row)=>{
|
||||
filePreviewShow.value = false
|
||||
filePreviewParam.value = {
|
||||
fileUrl: row.url,
|
||||
fileName: row.originalFileName,
|
||||
fileType: row.fileType
|
||||
}
|
||||
nextTick(()=>{
|
||||
filePreviewShow.value = true
|
||||
})
|
||||
}
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
|
||||
const getOtherFile = (val) => {
|
||||
props.processViewer = false
|
||||
let fileObj = compositeParam(val)
|
||||
_value.value.push(fileObj)
|
||||
nextTick(() => {
|
||||
props.processViewer = true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const compositeParam = (item, type) => {
|
||||
return {
|
||||
fileId: item.id,
|
||||
size: item.size,
|
||||
originalFileName: item.originalFilename,
|
||||
fileType: item.fileType,
|
||||
url: item.url,
|
||||
newFile: true,
|
||||
tag: props.tag
|
||||
}
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
const handleDelete = (row) => {
|
||||
deleteFile(row.fileId).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
_value.value.splice(_value.value.findIndex((item) => item.fileId === row.fileId), 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table--fit ) {
|
||||
height: 80px !important;
|
||||
}
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-form :label-position="labelAlign">
|
||||
<el-form-item :label="title?'其他文件':''" :label-position="labelAlign" :label-width="title?95:''">
|
||||
<fvTable style="width: 100%;max-height: 80px;" v-if="processViewer" height="80" :tableConfig="tableConfig"
|
||||
:data="_value" :isSettingCol="false" :pagination="false">
|
||||
<template #empty>
|
||||
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
|
||||
</template>
|
||||
</fvTable>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
|
||||
:fileType="filePreviewParam.fileType"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {downloadFile, deleteFile} from "@/api/project-demand";
|
||||
import {ElNotification} from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileNameTableWidth: {
|
||||
type: String,
|
||||
default: '400'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
processViewer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
//弹窗是否铺满全屏
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:value'])
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 85,
|
||||
},
|
||||
{
|
||||
prop: 'originalFileName',
|
||||
label: '文件名',
|
||||
align: 'center',
|
||||
width: props.fileNameTableWidth,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
|
||||
|
||||
},
|
||||
{
|
||||
prop: 'tag',
|
||||
label: '标签',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '文件大小',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = []
|
||||
btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
|
||||
// if (row.newFile) {
|
||||
// btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
|
||||
// }
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
{
|
||||
btn.map(item => (
|
||||
<el-button
|
||||
type={item.type}
|
||||
onClick={() => item.func()}
|
||||
link>
|
||||
{item.label}
|
||||
</el-button>
|
||||
))
|
||||
}
|
||||
{
|
||||
row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
|
||||
onDelete={() => handleDelete(row)}/>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
const filePreviewParam = ref({
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
fileType: 'pdf'
|
||||
})
|
||||
const filePreviewShow = ref(false)
|
||||
const clickToPreview=(row)=>{
|
||||
filePreviewShow.value = false
|
||||
filePreviewParam.value = {
|
||||
fileUrl: row.url,
|
||||
fileName: row.originalFileName,
|
||||
fileType: row.fileType
|
||||
}
|
||||
nextTick(()=>{
|
||||
filePreviewShow.value = true
|
||||
})
|
||||
}
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
})
|
||||
|
||||
const getOtherFile = (val) => {
|
||||
props.processViewer = false
|
||||
let fileObj = compositeParam(val)
|
||||
_value.value.push(fileObj)
|
||||
nextTick(() => {
|
||||
props.processViewer = true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const compositeParam = (item, type) => {
|
||||
return {
|
||||
fileId: item.id,
|
||||
size: item.size,
|
||||
originalFileName: item.originalFilename,
|
||||
fileType: item.fileType,
|
||||
url: item.url,
|
||||
newFile: true,
|
||||
tag: props.tag
|
||||
}
|
||||
}
|
||||
const handleDownload = (row) => {
|
||||
downloadFile(row.fileId).then(res => {
|
||||
const blob = new Blob([res])
|
||||
let a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = row.originalFileName
|
||||
a.click()
|
||||
})
|
||||
}
|
||||
const handleDelete = (row) => {
|
||||
deleteFile(row.fileId).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
_value.value.splice(_value.value.findIndex((item) => item.fileId === row.fileId), 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.processViewer, (newVal) => {
|
||||
props.processViewer = newVal
|
||||
}, {deep: true})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table--fit ) {
|
||||
height: 80px !important;
|
||||
}
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user