5 changed files with 613 additions and 322 deletions
@ -0,0 +1,295 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div v-show="pageType == 'list'"> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
|||
<div> |
|||
<el-form-item label="发布组织" prop="agencyId"> |
|||
<el-cascader class="u-item-width-normal" size="small" ref="myCascader" |
|||
v-model.trim="formData.agencyId" :options="orgOptions" :props="orgOptionProps" |
|||
:show-all-levels="false" @change="handleChangeAgency" clearable></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="事件内容" prop="eventContent"> |
|||
<el-input v-model.trim="formData.eventContent" class="u-item-width-normal" size="small" |
|||
clearable placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="创建时间" prop="startTime"> |
|||
<el-date-picker v-model.trim="formData.startTime" :picker-options="startPickerOptions" |
|||
class="u-item-width-daterange" size="small" type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd" placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker v-model.trim="formData.endTime" :picker-options="endPickerOptions" |
|||
class="u-item-width-daterange u-data-tag" size="small" type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd" placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select class="u-item-width-normal" v-model.trim="formData.status" placeholder="请选择" |
|||
size="small" clearable> |
|||
<el-option v-for="item in statusArray" :key="item.value" :label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-row> |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left: 30px" size="small" type="primary " |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left: 10px" size="small" class="diy-button--white" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="maxTableHeight"> |
|||
<el-table-column label="" fixed="left" type="selection" align="center" width="50" /> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="gridName" align="center" label="发布组织" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="categoryName" label="任务主题" min-width="140" align="center" |
|||
:show-overflow-tooltip="true" /> |
|||
<el-table-column prop="eventContent" label="分发人数" align="center" :show-overflow-tooltip="true" |
|||
width="100"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="responsibleName" align="center" width="100" label="任务周期" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="responsibleMobile" align="center" width="110" label="任务进度" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="name" align="center" width="100" label="任务状态" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="satisfactionName" align="center" width="100" label="创建人" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="happenTime" align="center" width="140" :show-overflow-tooltip="true" |
|||
label="创建时间"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" label="操作" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleWatch(scope.row)" type="text" size="small">查看</el-button> |
|||
<!-- 取消操作需要做密码校验 --> |
|||
<el-button @click="handleCancel(scope.row)" type="text" size="small" class="">取消</el-button> |
|||
<!-- 取消后可进行删除 --> |
|||
<el-button @click="handleDel(scope.row)" type="text" size="small" class="">取消</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" :total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="pageType == 'info'"> |
|||
|
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
export default { |
|||
components: {}, |
|||
|
|||
data() { |
|||
let endDisabledDate = (time) => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startTime) { |
|||
let startTime = new Date(this.formData.startTime); |
|||
return ( |
|||
time.getTime() > nowData || |
|||
time.getTime() < startTime || |
|||
time.getTime() === startTime |
|||
); |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = (time) => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
|
|||
let orgOptionProps = { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
} |
|||
return { |
|||
pageType: "list", // 列表list 新增add 详情info |
|||
tableData: [], |
|||
formData: { |
|||
agencyId: '', |
|||
eventContent: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
status: '' |
|||
}, |
|||
statusArray: [ |
|||
{ |
|||
label: '', |
|||
value: '' |
|||
}, { |
|||
label: '', |
|||
value: '' |
|||
}, { |
|||
label: '', |
|||
value: '' |
|||
}, |
|||
], |
|||
orgOptionProps, |
|||
orgOptions: [], |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
sarr: [], |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate, |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate, |
|||
}, |
|||
searchH: 180, |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
const h = this.clientHeight - this.searchH - 275 + this.iframeHeight; |
|||
const _h = this.clientHeight - 275 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: { |
|||
}, |
|||
mounted() { |
|||
this.getOrgTreeList() |
|||
}, |
|||
methods: { |
|||
handleChangeAgency(val) { |
|||
this.sarr = [] |
|||
this.getLastItem( |
|||
this.orgOptions, |
|||
val, |
|||
"agencyId" |
|||
); |
|||
this.level = this.sarr[this.sarr.length - 1].level |
|||
}, |
|||
getLastItem(list, vals, key) { |
|||
let LIST = list || []; |
|||
for (let item of LIST) { |
|||
// console.log(item[key]); |
|||
for (let i of vals) { |
|||
if (item[key] === i) { |
|||
this.sarr.push(item); |
|||
} else { |
|||
this.getLastItem(item.subAgencyList, vals, key); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
getOrgTreeList() { |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.orgOptions = [] |
|||
this.orgOptions.push(res.data) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
const url = "/governance/icEventOld/list"; |
|||
console.log(this.formData, "formData"); |
|||
if (Array.isArray(this.formData.agencyId) && this.formData.agencyId.length) { |
|||
if (this.level == "grid") { |
|||
this.formData.gridId = this.formData.agencyId[this.formData.agencyId.length - 1]; |
|||
this.formData.agencyId = ""; |
|||
} else { |
|||
this.formData.agencyId = this.formData.agencyId[this.formData.agencyId.length - 1]; |
|||
this.formData.gridId = ""; |
|||
} |
|||
} else { |
|||
this.formData.agencyId = ""; |
|||
this.formData.gridId = ""; |
|||
} |
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
? data.list.map((item) => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSearch() { |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
resetSearch() { |
|||
this.$refs.ref_searchform.resetFields(); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.m-search { |
|||
.u-item-width-normal { |
|||
width: 200px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,301 +1,297 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div v-show="pageType == 'list'"> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
|||
<div> |
|||
<div style="height: 10px;position: absolute"> |
|||
<el-form-item label="发布组织" prop="agencyId"> |
|||
<el-cascader class="u-item-width-normal" size="small" ref="myCascader" v-model.trim="formData.agencyId" |
|||
:options="orgOptions" :props="orgOptionProps" :show-all-levels="false" @change="handleChangeAgency" |
|||
clearable></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="事件内容" prop="eventContent"> |
|||
<el-input v-model.trim="formData.eventContent" class="u-item-width-normal" size="small" clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="创建时间" prop="startTime"> |
|||
<el-date-picker v-model.trim="formData.startTime" :picker-options="startPickerOptions" |
|||
class="u-item-width-daterange" size="small" type="date" value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker v-model.trim="formData.endTime" :picker-options="endPickerOptions" |
|||
class="u-item-width-daterange u-data-tag" size="small" type="date" value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select class="u-item-width-normal" v-model.trim="formData.status" placeholder="请选择" size="small" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
|||
:limit="1" :on-change="handleFileChange" :auto-upload="false" accept=".xlsx"> |
|||
<template #trigger> |
|||
<el-button type="primary">上传报表模板</el-button> |
|||
</template> |
|||
</el-upload> |
|||
</div> |
|||
<div id="luckysheet" class="luckysheet-wrap"></div> |
|||
<!-- <div v-show="displaySlider" class="right-slider"> |
|||
<div class="title">设置面板</div> |
|||
</div> --> |
|||
<el-drawer title="设置面板" :visible.sync="drawer" :direction="direction" :before-close="handleClose"> |
|||
<el-container> |
|||
<el-header>选中单元格：<b>{{ selectedCell }}</b></el-header> |
|||
<el-main> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
设置统计条件： |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left: 30px" size="small" type="primary " @click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left: 10px" size="small" class="diy-button--white" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-tabs v-model="activeName" @tab-click="handleTabClick"> |
|||
<el-tab-pane label="常规统计项" name="first"> |
|||
<div>老年人：</div> |
|||
<div> |
|||
<el-radio v-model="radio1" label="1" border>60岁（含）以上老年人</el-radio> |
|||
<el-radio v-model="radio1" label="2" border>80岁（含）以上老年人</el-radio> |
|||
</div> |
|||
<div> |
|||
<el-radio v-model="radio1" label="3" border>独居老年人</el-radio> |
|||
<el-radio v-model="radio1" label="4" border>空巢老年人</el-radio> |
|||
<el-radio v-model="radio1" label="5" border>失能老年人</el-radio> |
|||
</el-form> |
|||
</div> |
|||
<div>政治面貌：</div> |
|||
<div> |
|||
<el-radio v-model="radio1" label="6" border>中共党员数</el-radio> |
|||
<el-radio v-model="radio1" label="7" border>中共流动党员数</el-radio> |
|||
<el-radio v-model="radio1" label="8" border>共青团员数</el-radio> |
|||
|
|||
<div class="m-table"> |
|||
<div class="div_btn"> |
|||
<el-button size="small" type="primary " @click="handleAdd">新增</el-button> |
|||
</div> |
|||
<el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="maxTableHeight" > |
|||
<el-table-column label="" fixed="left" type="selection" align="center" width="50" /> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
|
|||
<el-table-column prop="gridName" align="center" label="发布组织" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="categoryName" label="任务主题" min-width="140" align="center" |
|||
:show-overflow-tooltip="true" /> |
|||
<el-table-column prop="eventContent" label="分发人数" align="center" :show-overflow-tooltip="true" width="100"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="responsibleName" align="center" width="100" label="任务周期" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="responsibleMobile" align="center" width="110" label="任务进度" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="name" align="center" width="100" label="任务状态" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="satisfactionName" align="center" width="100" label="创建人" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="happenTime" align="center" width="140" :show-overflow-tooltip="true" label="创建时间"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" label="操作" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleWatch(scope.row)" type="text" size="small">查看</el-button> |
|||
<!-- 取消操作需要做密码校验 --> |
|||
<el-button @click="handleCancel(scope.row)" type="text" size="small" class="">取消</el-button> |
|||
<!-- 取消后可进行删除 --> |
|||
<el-button @click="handleDel(scope.row)" type="text" size="small" class="">取消</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
<el-radio v-model="radio1" label="9" border>民主党派成员数</el-radio> |
|||
<el-radio v-model="radio1" label="10" border>无党派民主人士数</el-radio> |
|||
<el-radio v-model="radio1" label="11" border>群众</el-radio> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" :total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
<div>健康状况：</div> |
|||
<div> |
|||
<el-radio v-model="radio1" label="6" border>残疾人数</el-radio> |
|||
<el-radio v-model="radio1" label="7" border>大病人数</el-radio> |
|||
<el-radio v-model="radio1" label="8" border>慢病人数</el-radio> |
|||
</div> |
|||
<div>关注人群：</div> |
|||
<div> |
|||
<el-radio v-model="radio1" label="6" border>流动人员数</el-radio> |
|||
<el-radio v-model="radio1" label="7" border>退役军人数</el-radio> |
|||
<el-radio v-model="radio1" label="8" border>低保人数</el-radio> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="自定义统计项" name="second"></el-tab-pane> |
|||
</el-tabs> |
|||
</el-main> |
|||
<el-footer> |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left: 10px" type="default " >取消</el-button> |
|||
<el-button style="margin-left: 20px" type="primary ">确定</el-button> |
|||
</el-col> |
|||
</el-footer> |
|||
</el-container> |
|||
</el-drawer> |
|||
<div v-if="pageType == 'info'"> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import LuckyExcel from 'luckyexcel'; |
|||
import options from "@/utils/luckysheetConfig.js"; |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
export default { |
|||
components: {}, |
|||
|
|||
data() { |
|||
let endDisabledDate = (time) => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startTime) { |
|||
let startTime = new Date(this.formData.startTime); |
|||
return ( |
|||
time.getTime() > nowData || |
|||
time.getTime() < startTime || |
|||
time.getTime() === startTime |
|||
); |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = (time) => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
|
|||
let orgOptionProps = { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
} |
|||
return { |
|||
drawer: false, |
|||
direction: 'rtl', |
|||
selectedCell: '', |
|||
activeName: 'first', |
|||
radio1: '1', |
|||
radio2: '1', |
|||
pageType: "list", // 列表list 新增add 详情info |
|||
tableData: [], |
|||
formData: { |
|||
agencyId: '', |
|||
eventContent: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
status: '' |
|||
}, |
|||
statusArray: [ |
|||
{ |
|||
label: '', |
|||
value: '' |
|||
}, { |
|||
label: '', |
|||
value: '' |
|||
}, { |
|||
label: '', |
|||
value: '' |
|||
}, |
|||
], |
|||
orgOptionProps, |
|||
orgOptions: [], |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
sarr: [], |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate, |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate, |
|||
}, |
|||
searchH: 180, |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
maxTableHeight() { |
|||
const h = this.clientHeight - this.searchH - 275 + this.iframeHeight; |
|||
const _h = this.clientHeight - 275 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
async created() { |
|||
|
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: {}, |
|||
mounted() { |
|||
|
|||
window.luckysheet.destroy(); |
|||
window.luckysheet.create({ |
|||
...options, |
|||
hook: { |
|||
cellEditBefore: this.handleCellEditBefore, |
|||
cellUpdateBefore: this.handleCellUpdateBefore, |
|||
watch: { |
|||
}, |
|||
}); |
|||
|
|||
mounted() { |
|||
this.getOrgTreeList() |
|||
}, |
|||
|
|||
methods: { |
|||
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)); |
|||
}, |
|||
|
|||
handleAdd(){ |
|||
this.pageType = 'add'; |
|||
|
|||
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文件'); |
|||
let that = this |
|||
LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) { |
|||
if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!'); |
|||
window.luckysheet.destroy(); |
|||
window.luckysheet.create({ |
|||
...options, |
|||
data: exportJson.sheets, |
|||
title: exportJson.info.name, |
|||
hook: { |
|||
cellEditBefore: that.handleCellEditBefore, |
|||
cellUpdateBefore: that.handleCellUpdateBefore, |
|||
}, |
|||
}); |
|||
}); |
|||
handleChangeAgency(val) { |
|||
this.sarr = [] |
|||
this.getLastItem( |
|||
this.orgOptions, |
|||
val, |
|||
"agencyId" |
|||
); |
|||
this.level = this.sarr[this.sarr.length - 1].level |
|||
}, |
|||
// //保存 |
|||
// tableSave() { |
|||
// var json = window.luckysheet.getAllSheets(); //获取表格的全部数据 |
|||
// exportExcel(json, "名字").then(res => { |
|||
// //拿到表格的blob方便下一步操作 |
|||
// console.log(res, '--11') |
|||
// }) |
|||
// }, |
|||
|
|||
|
|||
handleFileChange(file, newFileList) { |
|||
const selectedFile = file.raw; |
|||
if (!(selectedFile instanceof File)) { |
|||
console.error('传入了非文件对象'); |
|||
return; |
|||
} |
|||
|
|||
if (selectedFile.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') { |
|||
console.log('文件是xlsx类型'); |
|||
getLastItem(list, vals, key) { |
|||
let LIST = list || []; |
|||
for (let item of LIST) { |
|||
// console.log(item[key]); |
|||
for (let i of vals) { |
|||
if (item[key] === i) { |
|||
this.sarr.push(item); |
|||
} else { |
|||
console.error('不是xlsx文件'); |
|||
return; |
|||
this.getLastItem(item.subAgencyList, vals, key); |
|||
} |
|||
} |
|||
} |
|||
this.loadExcel(); |
|||
|
|||
// let filename = selectedFile.name.replace(/\.[^/.]+$/, ""); // 去除文件扩展名 |
|||
// let reader = new FileReader(); |
|||
|
|||
// reader.onload = async (e) => { |
|||
// let fileData = e.target.result; |
|||
// try { |
|||
|
|||
// LuckyExcel.transformExcelToLucky(fileData, async (exportJson, luckysheetfile) => { |
|||
// console.log(exportJson.sheets) |
|||
// creatExcel(filename, JSON.stringify(exportJson.sheets)) |
|||
// }); |
|||
// } catch (e) { |
|||
// console.error(e); |
|||
// } |
|||
// }; |
|||
|
|||
// reader.onerror = function() { |
|||
// console.error("File could not be read! Code " + reader.error.code); |
|||
// }; |
|||
|
|||
// reader.readAsArrayBuffer(selectedFile); |
|||
}, |
|||
|
|||
// creatExcel(title, content){ |
|||
// const options = { |
|||
// container: 'luckysheet', // 设定DOM容器的id |
|||
// title: 'excel 表格', // 设定表格名称 |
|||
// lang: 'zh', // 设定表格语言 |
|||
// hook: { |
|||
// updated: (e) => { |
|||
// //监听更新,并在1s后自动保存 |
|||
// $('#luckysheet_info_detail_save').text("已修改") |
|||
// let title = $('#luckysheet_info_detail_input').val(); |
|||
// let content = luckysheet.getAllSheets(); |
|||
// //去除临时数据,减小体积 |
|||
// for (let i in content) |
|||
// content[i].data = undefined |
|||
// console.log(title) |
|||
// console.log(content) |
|||
// } |
|||
// }, |
|||
|
|||
// } |
|||
// options.data = JSON.parse(content) |
|||
// options.title = title; |
|||
|
|||
// window.luckysheet.create(options) |
|||
// } |
|||
handleClose(done) { |
|||
done(); |
|||
// this.$confirm('确认关闭？') |
|||
// .then(_ => { |
|||
// done(); |
|||
// }) |
|||
// .catch(_ => { }); |
|||
getOrgTreeList() { |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.orgOptions = [] |
|||
this.orgOptions.push(res.data) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
handleCellEditBefore(e) { |
|||
this.drawer = true; |
|||
let column = parseInt(e[0].column[0]) + 1, row = parseInt(e[0].row[0]) + 1; |
|||
this.selectedCell = "第" + row + "行" + "第" + column + "列"; |
|||
|
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCellUpdateBefore() { |
|||
this.drawer = false; |
|||
this.selectedCell = ""; |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
handleTabClick(tab, event) { |
|||
console.log(tab, event); |
|||
async getTableData() { |
|||
const url = "/governance/icEventOld/list"; |
|||
console.log(this.formData, "formData"); |
|||
if (Array.isArray(this.formData.agencyId) && this.formData.agencyId.length) { |
|||
if (this.level == "grid") { |
|||
this.formData.gridId = this.formData.agencyId[this.formData.agencyId.length - 1]; |
|||
this.formData.agencyId = ""; |
|||
} else { |
|||
this.formData.agencyId = this.formData.agencyId[this.formData.agencyId.length - 1]; |
|||
this.formData.gridId = ""; |
|||
} |
|||
} else { |
|||
this.formData.agencyId = ""; |
|||
this.formData.gridId = ""; |
|||
} |
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
? data.list.map((item) => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
props: {}, |
|||
handleSearch() { |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
resetSearch() { |
|||
this.$refs.ref_searchform.resetFields(); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.luckysheet-wrap { |
|||
|
|||
margin: 10px; |
|||
padding: 0px; |
|||
position: absolute; |
|||
z-index: 2; |
|||
width: calc(100% - 20px); |
|||
height: calc(100% - 20px); |
|||
left: 0px; |
|||
top: 0px; |
|||
} |
|||
|
|||
.upload-demo { |
|||
position: absolute; |
|||
z-index: 999999; |
|||
margin: 20px 0 0 22px; |
|||
} |
|||
|
|||
.right-slider { |
|||
position: absolute; |
|||
z-index: 999999; |
|||
border: 1px solid #eeeeee; |
|||
box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.2); |
|||
background: #ffffff; |
|||
margin: 10px 0 0 22px; |
|||
right: 10px; |
|||
width: 36%; |
|||
height: calc(100% - 20px); |
|||
} |
|||
|
|||
.el-header, |
|||
.el-footer { |
|||
text-align: left; |
|||
line-height: 40px; |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.el-main { |
|||
text-align: left; |
|||
line-height: 40px; |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.el-container { |
|||
display: flex; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
.m-search { |
|||
.u-item-width-normal { |
|||
width: 200px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue