Browse Source

任务详情左侧列表功能实现

luckysheet-xiaowang-Intelligen
mk 9 months ago
parent
commit
d8709eb37b
  1. 80
      src/views/modules/base/smartExcel/cpts/excel-add.vue
  2. 2
      src/views/modules/base/smartExcel/cpts/excel-info.vue
  3. 6
      src/views/modules/base/smartExcel/cpts/excel-summary.vue
  4. 220
      src/views/modules/base/smartExcel/cpts/excel-view.vue

80
src/views/modules/base/smartExcel/cpts/excel-add.vue

@ -11,7 +11,8 @@
<el-input v-model="form.taskTitle" placeholder="请输入内容" clearable class="cell-width-1"></el-input>
</el-form-item>
<el-form-item label="任务类型" prop="taskType">
<el-select v-model.trim="form.taskType" placeholder="请选择" size="small" clearable class="cell-width-1" disabled>
<el-select v-model.trim="form.taskType" placeholder="请选择" size="small" clearable
class="cell-width-1" disabled>
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
@ -19,7 +20,7 @@
<el-form-item label="任务周期" prop="taskPeriod">
<el-radio-group v-model.trim="form.taskPeriod" @change="handleChangetaskPeriod">
<el-radio label="once">一次性</el-radio>
<el-radio label="week">每周</el-radio>
<el-radio label="weekly">每周</el-radio>
<!-- <el-radio label="halfAMonth">每半月</el-radio>
<el-radio label="month">每月</el-radio>
<el-radio label="quarter">每季度</el-radio> -->
@ -28,34 +29,38 @@
</el-form-item>
<el-form-item label="完成时限" prop="completeLimitHour" v-if="form.taskPeriod">
<template v-if="form.taskPeriod === 'once'">
<el-date-picker
v-model="form.completeLimitDay"
type="date"
placeholder="选择日期" value-format="yyyy-MM-dd">
<el-date-picker v-model="form.completeLimitDay" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-time-picker
v-model="form.completeLimitHour"
class="cell-width-1"
placeholder="任意时间点" style="margin-left: 10px;" value-format="HH:mm:ss">
<el-time-picker v-model="form.completeLimitHour" class="cell-width-1" placeholder="任意时间点"
style="margin-left: 10px;" value-format="HH:mm:ss">
</el-time-picker>
</template>
<template v-if="form.taskPeriod === 'week'">
<template v-if="form.taskPeriod === 'weekly'">
<el-select v-model.trim="form.completeLimitDay" placeholder="请选择" size="small" clearable
class="cell-width-1" style="margin-left: 10px;">
<el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
<el-option v-for="item in weeklyList" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-time-picker class="cell-width-1" v-model="form.completeLimitHour" placeholder="选择时间" style="margin-left: 10px;" value-format="HH:mm:ss">
<el-time-picker class="cell-width-1" v-model="form.completeLimitHour" placeholder="选择时间"
style="margin-left: 10px;" value-format="HH:mm:ss">
</el-time-picker>
</template>
</el-form-item>
<el-form-item label="任务有效期" prop="effectiveDateRange" v-if="form.taskPeriod === 'weekly'" :rules="[{ required: true, message: '任务有效期不能为空', trigger:'blur' }]">
<template >
<el-date-picker v-model="form.effectiveDateRange" type="daterange" range-separator="" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</template>
</el-form-item>
<el-form-item label="分发人员" prop="receiverIds">
<el-cascader class="u-item-width-normal" size="small" ref="myCascader" v-model="cascaderAgencyId"
@change="handleChangeAgency" :options="orgOptions" :props="orgOptionProps"
:show-all-levels="false" clearable></el-cascader>
<el-select v-model.trim="form.receiverIds" placeholder="请选择" size="small" clearable
class="cell-width-1" collapse-tags style="margin-left: 10px;"
@change="changeTag" c>
class="cell-width-1" collapse-tags style="margin-left: 10px;" @change="changeTag" c>
<el-option v-for="item in workPersonnelList" :key="item.value" :label="item.name"
:value="item.staffId">
</el-option>
@ -76,7 +81,7 @@
:show-file-list="false" :auto-upload="true" :on-success="handleExcelSuccess"
:before-upload="beforeExcelUpload">
<template #trigger>
<el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading">上传报表模板</el-button>
<el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading">上传报表模板</el-button>
</template>
</el-upload>
<section v-else class="upload">
@ -122,7 +127,8 @@ export default {
label: 'agencyName',
children: 'subAgencyList',
checkStrictly: true
}, uploadUlr: window.SITE_CONFIG["apiURL"] +
},
uploadUlr: window.SITE_CONFIG["apiURL"] +
"/oss/file/upload",
showTemplate: false,
form: {
@ -134,7 +140,8 @@ export default {
receiverIds: '',//
moduleUrl: '',//
taskIntroduction: '',//
workBookId:''//簿id
workBookId: '',//簿id
effectiveDateRange:''
},
dataRule: {
taskTitle: [{ required: true, message: "任务主题不能为空", trigger: "blur" },],
@ -149,7 +156,7 @@ export default {
value: '1'
}
],
weekList: [
weeklyList: [
{
label: '每周一',
value: '1'
@ -185,7 +192,7 @@ export default {
sarr: [],
agencyId: '',
agencylevel: '',
fullscreenLoading:false
fullscreenLoading: false
};
},
created() { },
@ -291,7 +298,7 @@ export default {
}
},
removeTag(val) {
this.selfTag = this.selfTag.filter(item => item.staffId!=val.staffId);
this.selfTag = this.selfTag.filter(item => item.staffId != val.staffId);
},
changeTag(val) {
let obj = this.workPersonnelList.find(item => item.staffId === val);
@ -307,29 +314,34 @@ export default {
console.error('未找到对应的人员信息');
}
},
handleChangetaskPeriod(val){
this.form.completeLimitDay = '';
this.form.completeLimitHour = '';
handleChangetaskPeriod(val) {
this.form.completeLimitDay = '';
this.form.completeLimitHour = '';
},
handleClickSave() {
console.log(this.form, 'addForm');
this.$refs['dataForm'].validate( async valid => {
this.$refs['dataForm'].validate(async valid => {
if (valid) {
await this.saveLuckysheet()
await this.saveEvent()
await this.saveLuckysheet()
await this.saveEvent()
}
})
},
async saveEvent(){
async saveEvent() {
let parm = {
...this.form
}
parm.receiverIds = this.selfTag.map(item=>item.staffId)
const {data,code,msg} = await requestPost('/actual/base/communityOneTablePublish/save',parm)
if(code === 0){
if(this.form.effectiveDateRange){
parm.startTime = this.form.effectiveDateRange[0];
parm.endTime = this.form.effectiveDateRange[1];
delete this.form.effectiveDateRange;
}
parm.receiverIds = this.selfTag.map(item => item.staffId)
const { data, code, msg } = await requestPost('/actual/base/communityOneTablePublish/save', parm)
if (code === 0) {
this.$emit('handleShowPage')
console.log(data,'发布成功');
}else{
console.log(data, '发布成功');
} else {
console.log(msg);
}
},
@ -343,7 +355,7 @@ export default {
console.log(msg);
}
},
removeFile() {
this.form.moduleUrl = '';
this.fileName = '';

2
src/views/modules/base/smartExcel/cpts/excel-info.vue

@ -161,7 +161,7 @@ export default {
async getTableList(){
let url = '/actual/base/communityOneTablePeriodPublish/getPeriodTaskList'
let params = {
taskId:'1881158727763611649',
taskId:this.taskId,
pageSize:100,
pageNo:1
}

6
src/views/modules/base/smartExcel/cpts/excel-summary.vue

@ -1,18 +1,18 @@
<template>
<!-- 文件汇总 -->
<div class="el-card">
<div class="el-card" style="border: none;">
<div v-show="!showView">
<div class="flex">
<h3 class="title">汇总文件</h3>
<el-button type="text" icon="el-icon-back" @click="handleClickBack">返回</el-button>
</div>
<div class="item flex flex-y flex-center-deputy " @click="handleClickShowView(list[0].workbookId,true)">
<div class="item flex flex-y flex-center-deputy " @click="handleClickShowView(list[0].workBookId,true)">
<img :src="require(`@/assets/images/index/Excel.png`)" alt="">
<div class="agencyName">周期更新表</div>
</div>
<h3 class="title">提报的文件</h3>
<div class="flex-wrap flex">
<div class="item flex flex-y flex-center-deputy" v-for="(item, index) in list" @click="handleClickShowView(item.subWorkBookId)" :key="index">
<div class="item flex flex-y flex-center-deputy" v-for="(item, index) in list" @click="handleClickShowView(summaryDetal.taskId)" :key="index">
<img :src="require(`@/assets/images/index/Excel.png`)" alt="">
<div class="agencyName">{{ item.taskTitle }}周期更新表</div>
<div>{{ getStateDescription(item.state) }}</div>

220
src/views/modules/base/smartExcel/cpts/excel-view.vue

@ -1,21 +1,26 @@
<template>
<!-- :style="{ height: tableHeight }" -->
<div class='flex el-card'>
<div class="left_menu flex flex-y" v-if="!sheetTotal">
<div class='flex'>
<div class="left_menu flex flex-y" v-if="!sheetTotal">
<el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button>
<section >
<div :class="{ 'menu_item': true, 'active': menuActive === index }" v-for="(item, index) in menuList" :key="index"
@click="handleClickMenu(index,item)">
<span>{{ item.name }}</span>
<i class="el-icon-arrow-right"></i>
</div>
<section >
<h3>{{menuList[0].taskTitle}}</h3>
<p>{{menuList[0].agencyName}}</p>
</section>
<section>
<div :class="{ 'menu_item': true, 'active': menuActive === index }" v-for="(item, index) in menuList"
:key="index" @click="handleClickMenu(index, item)">
<span>{{ item.taskNum }}个周期提交</span>
<i class="el-icon-arrow-right"></i>
</div>
</section>
</div>
<div :class="['flex', 'flex-y', 'flex1', sheetTotal ? 'luckysheet-wrap' : 'luckysheet-wrap-all']">
<div class="top_btn flex flex-end">
<div>
<el-button type="warning" v-if="pageType === 'add'" @click="handleClickInspect"> 自动检查</el-button>
<el-button type="text" round @click="handelClickBack" v-if="pageType !== 'add' || sheetTotal" icon="el-icon-back">返回</el-button>
<el-button type="text" round @click="handelClickBack" v-if="pageType !== 'add' || sheetTotal"
icon="el-icon-back">返回</el-button>
<el-button type="success" @click="onClickUplond()" v-if="pageType !== 'add'"> 智能填表</el-button>
</div>
<div>
@ -26,8 +31,10 @@
</div>
<div id="luckysheet"></div>
</div>
<el-dialog title="上传共享数据" v-if="showUploadData" :visible.sync="showUploadData" width="60%" :close-on-click-modal="false">
<excelUploadData @handelUploadData="handelUploadData" :currentTable="currentTable" @saveUploadForm="saveUploadForm">
<el-dialog title="上传共享数据" v-if="showUploadData" :visible.sync="showUploadData" width="60%"
:close-on-click-modal="false">
<excelUploadData @handelUploadData="handelUploadData" :currentTable="currentTable"
@saveUploadForm="saveUploadForm">
</excelUploadData>
</el-dialog>
</div>
@ -43,31 +50,31 @@ import { requestPost, requestGet } from "@/js/dai/request";
export default {
data() {
return {
showUploadData:false,
showUploadData: false,
menuList: [
{
name: '2024年11月第三周(已提交)',
workbookId:'1876569275607785473'
},
{
name: '2024年11月第三周(已提交)',
workbookId:'1876571135966158850'
},
{
name: '2024年11月第三周(已提交)',
workbookId:'1879063358107648002'
},
{
name: '2024年11月第三周(已提交)'
},
{
name: '2024年11月第三周(已提交)'
}
// {
// name: '202411',
// workbookId:'1876569275607785473'
// },
// {
// name: '202411',
// workbookId:'1876571135966158850'
// },
// {
// name: '202411',
// workbookId:'1879063358107648002'
// },
// {
// name: '202411'
// },
// {
// name: '202411'
// }
],
menuActive: 0,
socket: null,
currentTable:null,
currentId:''
currentTable: null,
currentId: ''
};
},
props: {
@ -75,13 +82,13 @@ export default {
type: String,
default: ''
},
pageType:{
type:String,
default:''
pageType: {
type: String,
default: ''
},
sheetTotal:{
type:Boolean,
default:false
sheetTotal: {
type: Boolean,
default: false
}
},
computed: {
@ -94,71 +101,85 @@ export default {
},
watch: {},
mounted() {
this.$nextTick(() => {
if(this.sheetTotal){
this.currentId = '1879063358107648002'
}else{
this.currentId = '1879729047646941185'
}
async mounted() {
if (this.sheetTotal) {
this.currentId = this.workbookId;
this.loadWorkBook()
})
} else {
this.getTaskList()
}
},
methods: {
async saveUploadForm(val){
async getTaskList() {
let parm = {
taskId: this.workbookId,//Id
pageNo: 1,
pageSize: 1000
}
let { data, code, msg } = await requestGet('/actual/base/communityOneTablePeriodPublish/myPageList', parm)
if (code === 0) {
this.menuList = data.list;
this.currentId = this.menuList[0].subWorkBookId
this.loadWorkBook()
}
},
async saveUploadForm(val) {
const url = '/actual/base/residentBaseInfo/exportOneSheet'
const {data,code,msg} = await requestPost(url,val)
if(code === 0){
const { data, code, msg } = await requestPost(url, val)
if (code === 0) {
this.showUploadData = false
this.updataSheet(data)
}else{
} else {
console.log(msg);
}
},
//
handleClickInspect(){
handleClickInspect() {
//cellData
let list = luckysheet.getAllSheets()[0].celldata.map(item=>({r:item.r,c:item.c,v:item.v.v ||''}))
let list = luckysheet.getAllSheets()[0].celldata.map(item => ({ r: item.r, c: item.c, v: item.v.v || '' }))
console.log(JSON.stringify(list));//
//
let arr = [
{r:3,
c:3
let arr = [
{
r: 3,
c: 3
},
{r:4,
c:4,
{
r: 4,
c: 4,
},
{r:5,
c:5,
{
r: 5,
c: 5,
},
]
for(let i in arr){
luckysheet.setCellFormat(arr[i].r,arr[i].c,'bg','#f5504a')
for (let i in arr) {
luckysheet.setCellFormat(arr[i].r, arr[i].c, 'bg', '#f5504a')
}
},
onClickUplond(){
onClickUplond() {
this.showUploadData = true;
let list = luckysheet.getAllSheets()
this.currentTable = list.filter(item => item.status == '1')
const findLastNonNullIndex = (arr) => {
for (let i = arr.length - 1; i >= 0; i--) {
const subArray = arr[i];
// null
if (Array.isArray(subArray) && subArray.some(item => item !== null && item.v && item.v !== null&& item.v !== '')) {
return i; //
}
const subArray = arr[i];
// null
if (Array.isArray(subArray) && subArray.some(item => item !== null && item.v && item.v !== null && item.v !== '')) {
return i; //
}
}
return -1; // -1
};
this.sheetR = findLastNonNullIndex(this.currentTable[0].data)
if(this.sheetR != -1){
luckysheet.insertRow(this.currentTable[0].data.length,5)
};
this.sheetR = findLastNonNullIndex(this.currentTable[0].data)
if (this.sheetR != -1) {
luckysheet.insertRow(this.currentTable[0].data.length, 5)
// this.updataSheet()
}
},
handelUploadData(){
this.showUploadData=false
handelUploadData() {
this.showUploadData = false
},
loadWorkBook() {
window.luckysheet.destroy();
@ -180,49 +201,12 @@ export default {
handleSheetCreateAfter(e) {
console.log('setsheet', e);
},
handleClickMenu(i,val) {
handleClickMenu(i, val) {
this.menuActive = i;
this.currentId = val.workbookId;
this.currentId = val.subWorkBookId;
this.loadWorkBook()
},
loadExcel() {
var url = 'http://localhost:9001/epmet-work-pc/test.xlsx'
var that = this
fetch(url).then(response => response.blob()) // Blob
.then(blob => {
const fileName = 'test.xlsx';
const file = new File([blob], fileName, { type: 'excel/xlsx' });
var files = [];
files.push(file);
that.uploadExcel(files);
}).catch(error => console.error('Error fetching file:', error));
},
uploadExcel(files) {
if (files == null || files.length == 0) return alert('没有文件等待导入');
let name = files[0].name;
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1];
if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件');
LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
console.log(exportJson.sheets);
if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
window.luckysheet.destroy();
window.luckysheet.create({
...options,
data: exportJson.sheets[0],
title: exportJson.info.name,
hook: {
},
});
});
},
handleTabClick(tab, event) {
console.log(tab, event);
},
handelClickBack() {
this.$emit('close')
},
@ -269,17 +253,17 @@ export default {
// }
]
list.forEach((item, index) => {
luckysheet.insertRow(this.currentTable[0].data.length,1)
luckysheet.insertRow(this.currentTable[0].data.length, 1)
for (let k in item) {
luckysheet.setCellValue(index+this.sheetR + 1, k - 1, item[k])
luckysheet.setCellValue(index + this.sheetR + 1, k - 1, item[k])
}
})
},
},
components:{
components: {
excelUploadData
},
components:{
components: {
excelUploadData
},
beforeDestroy() {
@ -306,6 +290,7 @@ export default {
width: calc(100vw - 400px);
height: calc(100vh - 250px);
}
.luckysheet-wrap-all {
margin: 10px;
padding: 0px;
@ -313,6 +298,7 @@ export default {
width: calc(100vw - 100px);
height: calc(100vh - 250px);
}
#luckysheet {
width: 100%;
padding: 0px;

Loading…
Cancel
Save