Commit feae91b0 authored by ww-xxy's avatar ww-xxy

优化办不成事报表

parent 8b85efe6
......@@ -2,12 +2,15 @@
<div class="ff p15">
<div class="form-box">
<div class="num-dv">
<a-button :loading="btnLoading" type="primary" class="addclass" @click="handleExportTable">
<a-button :loading="btnLoading" type="primary" class="addclass" @click="handleExportTable">
<span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
</a-button>
<div class="ml20">提交总次数:<span style="color:#1890ff;font-weight: bold;">{{ numObj ? numObj.count : 0 }}</span></div>
<div class="ml20">回复总次数:<span style="color:#1890ff;font-weight: bold;">{{ numObj ? numObj.reply_count : 0 }}</span></div>
<div style="font-size:12px;color:#a19a9a;margin-left: 20px;">统计时间段:{{ queryform.time[0] }} ~ {{ queryform.time[1] }}</div>
<div class="ml20">提交总次数:<span style="color:#1890ff;font-weight: bold;">{{ numObj ? numObj.count : 0
}}</span></div>
<div class="ml20">回复总次数:<span style="color:#1890ff;font-weight: bold;">{{ numObj ? numObj.reply_count : 0
}}</span></div>
<div style="font-size:12px;color:#a19a9a;margin-left: 20px;">统计时间段:{{ queryform.time[0] }} ~ {{
queryform.time[1] }}</div>
</div>
<a-form :model="queryform" layout="inline">
<a-form-item>
......@@ -16,8 +19,8 @@
<a-form-item>
<a-select v-model="queryform.source" style="width: 140px">
<a-select-option value="">全部来源</a-select-option>
<a-select-option :value="item.value" v-for="item,index in deviceList"
:key="index">{{item.label}}</a-select-option>
<a-select-option :value="item.value" v-for="item, index in deviceList"
:key="index">{{ item.label }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
......@@ -27,27 +30,27 @@
<a-input v-model:value="queryform.keyword" placeholder="请输入标题或者名字关键字搜索" style="width: 220px" />
</a-form-item>
<a-form-item>
<a-button type="primary" class="addclass" @click="getlist">搜索</a-button>
<a-button type="primary" class="addclass" @click="getlist">搜索</a-button>
</a-form-item>
</a-form>
</div>
<div class="table-box">
<a-table :dataSource="tabledataSource" :columns="tablecolumns" :pagination="pagination" :scroll="{ y: 590 }"
:row-key="(record) => record.id" @change="changeTablePage" :row-selection="{
selectedRowKeys: tableSelectedKeys,
onChange: onSelectChange,
}">
selectedRowKeys: tableSelectedKeys,
onChange: onSelectChange,
}">
<template slot="type" slot-scope="text, record, index">
<div>{{typeList.find(item=>record.type).label}}</div>
<div>{{ typeList.find(item => record.type).label }}</div>
</template>
<template slot="valid" slot-scope="text, record, index">
<div>{{record.valid == 1 ? '' : ''}}</div>
<div>{{ record.valid == 1 ? '' : '' }}</div>
</template>
<template slot="secrecy" slot-scope="text, record, index">
<div>{{record.secrecy == 1 ? '' : ''}}</div>
<div>{{ record.secrecy == 1 ? '' : '' }}</div>
</template>
<template slot="status" slot-scope="text, record, index">
<div>{{record.status == 1 ? '' : ''}}</div>
<div>{{ record.status == 1 ? '' : '' }}</div>
</template>
<template slot="操作" slot-scope="text, record, index">
<a-button type="link" @click="detail(record)">详情</a-button>
......@@ -60,37 +63,37 @@
<div style="margin-bottom: 10px;">建议内容</div>
<a-descriptions layout="vertical" :column="4">
<a-descriptions-item label="问题主题" :span="4">
{{detailData.title}}
{{ detailData.title }}
</a-descriptions-item>
<a-descriptions-item label="具体问题" :span="4">
{{detailData.content}}
{{ detailData.content }}
</a-descriptions-item>
<a-descriptions-item label="业务名称" :span="4">
{{detailData.business}}
{{ detailData.business }}
</a-descriptions-item>
<a-descriptions-item label="办事区县" :span="4">
{{detailData.region}}
{{ detailData.region }}
</a-descriptions-item>
<a-descriptions-item label="单位名称" :span="4">
{{detailData.dept_name}}
{{ detailData.dept_name }}
</a-descriptions-item>
<a-descriptions-item label="真实姓名">
{{detailData.name}}
{{ detailData.name }}
</a-descriptions-item>
<a-descriptions-item label="联系电话">
{{detailData.phone}}
{{ detailData.phone }}
</a-descriptions-item>
<a-descriptions-item label="身份证号">
{{detailData.idcard}}
{{ detailData.idcard }}
</a-descriptions-item>
<a-descriptions-item label="电子邮箱">
{{detailData.email}}
{{ detailData.email }}
</a-descriptions-item>
<a-descriptions-item label="联系地址" :span="4">
{{detailData.address}}
{{ detailData.address }}
</a-descriptions-item>
<a-descriptions-item label="提交时间" :span="4">
{{detailData.create_time}}
{{ detailData.create_time }}
</a-descriptions-item>
</a-descriptions>
</div>
......@@ -98,22 +101,22 @@
<div style="margin-bottom: 10px;">建议答复</div>
<a-descriptions layout="vertical" :column="1">
<a-descriptions-item label="所属部门">
{{detailData.reply_dept}}
{{ detailData.reply_dept }}
</a-descriptions-item>
<a-descriptions-item label="回复内容">
{{detailData.reply_content}}
{{ detailData.reply_content }}
</a-descriptions-item>
<a-descriptions-item label="附件">
<div class="img-dv" v-if="detailData.reply_url && detailData.reply_url.length > 0">
<thumbImage :src="item.url" :index="idx" @click="idx = index" fileType="img"
v-for="item,index in detailData.reply_url" :key="index" />
v-for="item, index in detailData.reply_url" :key="index" />
</div>
</a-descriptions-item>
<a-descriptions-item label="回复人">
{{detailData.reply_people}}
{{ detailData.reply_people }}
</a-descriptions-item>
<a-descriptions-item label="回复时间">
{{detailData.update_time}}
{{ detailData.update_time }}
</a-descriptions-item>
</a-descriptions>
</div>
......@@ -127,298 +130,299 @@
</div>
</template>
<script>
import {
getImpossible,
getImpossibleInfo,
getCountImpossible
} from '@/api/dataAdmin.js'
import image from '@/components/image/thumbImage'
import {
export2Excel
} from "@/utils/js/exportExcel";
import moment from 'moment'
export default {
data() {
return {
idx: 0,
queryform: {
page: 1,
size: 10,
source: '',
keyword: null,
time: [moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
reply:''
},
deviceList: [{
label: '微官网',
value: 1
}, {
label: '自助服务系统',
value: 2
}],
btnLoading: false,
tableSelectedKeys: [],
tableSelectedRows: [],
defaultFileList: [],
visible: false,
tablename: "treaty", //接口地址 名称
tablecolumns: [{
title: "序号",
width: "70px",
align: 'center',
customRender: (text, record, index) =>
(this.queryform.page - 1) * this.queryform.size +
index +
1,
},
import {
getImpossible,
getImpossibleInfo,
getCountImpossible
} from '@/api/dataAdmin.js'
import image from '@/components/image/thumbImage'
import {
export2Excel
} from "@/utils/js/exportExcel";
import moment from 'moment'
export default {
data() {
return {
idx: 0,
queryform: {
page: 1,
size: 10,
source: '',
keyword: null,
time: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')],
reply: ''
},
deviceList: [{
label: '微官网',
value: 1
}, {
label: '自助服务系统',
value: 2
}],
btnLoading: false,
tableSelectedKeys: [],
tableSelectedRows: [],
defaultFileList: [],
visible: false,
tablename: "treaty", //接口地址 名称
tablecolumns: [{
title: "序号",
width: "70px",
align: 'center',
customRender: (text, record, index) =>
(this.queryform.page - 1) * this.queryform.size +
index +
1,
},
{
title: "问题主题",
dataIndex: "title",
align: 'center',
scopedSlots: {
customRender: (text, record, index) => `${record.title || '--'}`
},
},
{
title: "业务名称",
dataIndex: "business",
align: 'center',
scopedSlots: {
customRender: (text, record, index) => `${record.business || '--'}`
},
},
{
title: "真实姓名",
dataIndex: "name",
align: 'center',
customRender: (text, record, index) => `${record.name || '--'}`
},
{
title: "联系电话",
dataIndex: "phone",
align: 'center',
customRender: (text, record, index) => `${record.phone || '--'}`
},
{
title: "提交日期",
dataIndex: "create_time",
align: 'center',
customRender: (text, record, index) => `${record.create_time || '--'}`
},
{
title: "是否回复",
dataIndex: "status",
align: 'center',
scopedSlots: {
customRender: "status",
},
},
{
title: "回复人",
dataIndex: "reply_people",
align: 'center',
customRender: (text, record, index) => `${record.reply_people || '--'}`
},
{
title: "回复时间",
dataIndex: "update_time",
align: 'center',
customRender: (text, record, index) => `${record.update_time || '--'}`
},
{
title: "所属部门",
dataIndex: "reply_dept",
align: 'center',
customRender: (text, record, index) => `${record.reply_dept || '--'}`
},
{
title: "操作",
scopedSlots: {
customRender: "操作",
},
},
], //表头数据
pagination: {
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
{
title: "问题主题",
dataIndex: "title",
align: 'center',
scopedSlots: {
customRender: (text, record, index) => `${record.title || '--'}`
},
},
{
title: "业务名称",
dataIndex: "business",
align: 'center',
scopedSlots: {
customRender: (text, record, index) => `${record.business || '--'}`
},
},
{
title: "真实姓名",
dataIndex: "name",
align: 'center',
customRender: (text, record, index) => `${record.name || '--'}`
},
{
title: "联系电话",
dataIndex: "phone",
align: 'center',
customRender: (text, record, index) => `${record.phone || '--'}`
},
{
title: "提交日期",
dataIndex: "create_time",
align: 'center',
customRender: (text, record, index) => `${record.create_time || '--'}`
},
{
title: "是否回复",
dataIndex: "status",
align: 'center',
scopedSlots: {
customRender: "status",
},
},
{
title: "回复人",
dataIndex: "reply_people",
align: 'center',
customRender: (text, record, index) => `${record.reply_people || '--'}`
},
{
title: "回复时间",
dataIndex: "update_time",
align: 'center',
customRender: (text, record, index) => `${record.update_time || '--'}`
},
{
title: "所属部门",
dataIndex: "reply_dept",
align: 'center',
customRender: (text, record, index) => `${record.reply_dept || '--'}`
},
{
title: "操作",
scopedSlots: {
customRender: "操作",
},
tabledataSource: [], //表格数据
columnsSearch: [
},
], //表头数据
pagination: {
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
},
tabledataSource: [], //表格数据
columnsSearch: [
], //表格查询条件
detailData: null,
deplist: [],
numObj: null
}
], //表格查询条件
detailData: null,
deplist: [],
numObj: null
}
},
async created() {
this.getlist()
},
methods: {
async getlist() {
getImpossible(this.queryform).then(res => {
this.tabledataSource = res.data.data
this.pagination.total = res.data.total
})
// 统计接口
let {data} = await getCountImpossible(this.queryform)
this.numObj = data || {}
},
async created() {
changeTablePage(e) {
this.queryform.page = e.current
this.queryform.size = e.pageSize
this.getlist()
let {
data
} = await getCountImpossible()
this.numObj = data
},
methods: {
getlist() {
getImpossible(this.queryform).then(res => {
this.tabledataSource = res.data.data
this.pagination.total = res.data.total
})
},
changeTablePage(e) {
this.queryform.page = e.current
this.queryform.size = e.pageSize
this.getlist()
},
onChange(e) {
this.queryform.reply = e.target.checked ? 0 : ''
},
detail(row) {
getImpossibleInfo({
id: row.id
}).then(res => {
this.detailData = res.data
this.visible = true
onChange(e) {
this.queryform.reply = e.target.checked ? 0 : ''
},
detail(row) {
getImpossibleInfo({
id: row.id
}).then(res => {
this.detailData = res.data
this.visible = true
})
},
// 选中
onSelectChange(keys, rows) {
this.tableSelectedKeys = keys;
const res = new Map();
this.tableSelectedRows = [...this.tableSelectedRows, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
},
// 选中
onSelectChange(keys, rows) {
this.tableSelectedKeys = keys;
const res = new Map();
this.tableSelectedRows = [...this.tableSelectedRows, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.tableSelectedKeys.some((val) => v.id == val);
.filter((v) => {
return this.tableSelectedKeys.some((val) => v.id == val);
});
},
// 导出
async handleExportTable() {
this.btnLoading = true;
let obj = {
1: "本地打印",
2: "在线提交",
};
let data = [];
if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
// 深度克隆避免影响页面表格展示
data = this.$_.cloneDeep(this.tableSelectedRows);
data.forEach((item) => {
Object.keys(obj).forEach((keys) => {
if (item.type == keys) {
item.type = obj[keys];
}
});
},
// 导出
async handleExportTable() {
this.btnLoading = true;
let obj = {
1: "本地打印",
2: "在线提交",
};
let data = [];
if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
// 深度克隆避免影响页面表格展示
data = this.$_.cloneDeep(this.tableSelectedRows);
data.forEach((item) => {
Object.keys(obj).forEach((keys) => {
if (item.type == keys) {
item.type = obj[keys];
}
});
item.status == 1?item.status= '':item.status= ''
item.status == 1 ? item.status = '' : item.status = ''
});
} else {
let datas = this.$_.cloneDeep(
await getImpossible({
...this.queryform,
page: 1,
size: -1
})
);
this.btnLoading = false
data = datas.data.data
if (!data.length) return;
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.type == key) {
item.type = obj[key];
}
});
} else {
let datas = this.$_.cloneDeep(
await getImpossible({
...this.queryform,
page: 1,
size: -1
})
);
this.btnLoading = false
data = datas.data.data
if (!data.length) return;
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.type == key) {
item.type = obj[key];
}
});
item.status == 1?item.status= '':item.status= ''
}
item.status == 1 ? item.status = '' : item.status = ''
}
const tHeader = []
const filterVal = []
this.tablecolumns.forEach(v=>{
if(v.dataIndex){
tHeader.push(v.title)
filterVal.push(v.dataIndex)
}
})
export2Excel(
tHeader,
filterVal,
data,
"办不成事报表" + this.$moment().format("YYYYMMDDHHmmss")
);
this.btnLoading = false;
},
}
}
const tHeader = []
const filterVal = []
this.tablecolumns.forEach(v => {
if (v.dataIndex) {
tHeader.push(v.title)
filterVal.push(v.dataIndex)
}
})
export2Excel(
tHeader,
filterVal,
data,
"办不成事报表" + this.$moment().format("YYYYMMDDHHmmss")
);
this.btnLoading = false;
},
}
}
</script>
<style scoped lang="less">
.form-box {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.num-dv{
display: flex;
align-items: center;
.ml20{
margin-left: 20px;
}
}
}
.form-box {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.img-dv {
.num-dv {
display: flex;
flex-wrap: wrap;
align-items: center;
img {
width: 40px;
height: 40px;
margin-right: 10px;
margin-bottom: 10px;
.ml20 {
margin-left: 20px;
}
}
/deep/.ant-spin-container{
display: block !important;
}
/deep/.ant-drawer-body {
background: #f7f7f7;
padding: 15px;
box-sizing: border-box;
min-height: calc(100vh - 55px);
}
/deep/td {
text-align: left;
}
/deep/.ant-descriptions-item-label{
color: #1890ff;
}
}
.btn-dv {
background-color: #fff;
padding: 15px;
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.img-dv {
display: flex;
flex-wrap: wrap;
.content-box {
display: flex;
justify-content: space-between;
width: 100%;
img {
width: 40px;
height: 40px;
margin-right: 10px;
margin-bottom: 10px;
}
}
.content-dv {
width: calc(50% - 10px);
background: #fff;
border-radius: 10px;
padding: 10px;
}
</style>
\ No newline at end of file
/deep/.ant-spin-container {
display: block !important;
}
/deep/.ant-drawer-body {
background: #f7f7f7;
padding: 15px;
box-sizing: border-box;
min-height: calc(100vh - 55px);
}
/deep/td {
text-align: left;
}
/deep/.ant-descriptions-item-label {
color: #1890ff;
}
.btn-dv {
background-color: #fff;
padding: 15px;
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.content-box {
display: flex;
justify-content: space-between;
width: 100%;
}
.content-dv {
width: calc(50% - 10px);
background: #fff;
border-radius: 10px;
padding: 10px;
}</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment