1 changed files with 40 additions and 458 deletions
@ -1,510 +1,92 @@ |
|||
<style lang="less"> |
|||
@import "@/styles/table-common.less"; |
|||
@import "./problemFeedback.less"; |
|||
</style> |
|||
<template> |
|||
<div class="search"> |
|||
<Card> |
|||
<Row v-show="openSearch" @keydown.enter.native="handleSearch"> |
|||
<Row> |
|||
<Form ref="searchForm" :model="searchForm" inline :label-width="100"> |
|||
<FormItem label="问题描述" prop="problemContent"> |
|||
<Input type="text" v-model="searchForm.problemContent" clearable placeholder="请输入问题描述" |
|||
style="width: 200px" /> |
|||
|
|||
<FormItem label="免单人数" prop="name"> |
|||
<Input v-model="form.orderNumber"></Input> |
|||
</FormItem> |
|||
<!-- <FormItem label="联系人" prop="contacts"> |
|||
<Input |
|||
type="text" |
|||
v-model="searchForm.contacts" |
|||
clearable |
|||
placeholder="请输入联系人" |
|||
style="width: 200px" |
|||
/> |
|||
<FormItem label="免单金额" prop="name"> |
|||
<Input v-model="form.freeAmount"></Input> |
|||
</FormItem> |
|||
<FormItem label="手机号" prop="mobile"> |
|||
<Input |
|||
type="text" |
|||
v-model="searchForm.mobile" |
|||
clearable |
|||
placeholder="请输入手机号" |
|||
style="width: 200px" |
|||
/> |
|||
</FormItem> --> |
|||
<FormItem style="margin-left: -35px" class="br"> |
|||
<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button> |
|||
<Button @click="handleReset">重置</Button> |
|||
<a class="drop-down" @click="dropDown"> |
|||
{{ dropDownContent }} |
|||
<Icon :type="dropDownIcon"></Icon> |
|||
</a> |
|||
<Button v-if="isOpen" @click="add" type="primary">开启</Button> |
|||
<Button v-else @click="add" type="primary">保存</Button> |
|||
|
|||
<Button @click="close">关闭免单</Button> |
|||
</FormItem> |
|||
</Form> |
|||
</Row> |
|||
<Row align="middle" justify="space-between" class="operation"> |
|||
<div> |
|||
<Button @click="add" type="primary" icon="md-add">添加</Button> |
|||
<Button @click="delAll" icon="md-trash">批量删除</Button> |
|||
<Dropdown @on-click="handleDropdown"> |
|||
<Button> |
|||
更多操作 |
|||
<Icon type="md-arrow-dropdown" /> |
|||
</Button> |
|||
<DropdownMenu slot="list"> |
|||
<DropdownItem name="refresh">刷新</DropdownItem> |
|||
<DropdownItem name="exportData">导出所选数据</DropdownItem> |
|||
<DropdownItem name="exportAll">导出全部数据</DropdownItem> |
|||
</DropdownMenu> |
|||
</Dropdown> |
|||
</div> |
|||
<div class="icons"> |
|||
<Tooltip content="刷新" placement="top" transfer> |
|||
<Icon type="md-refresh" size="18" class="item" @click="getDataList" /> |
|||
</Tooltip> |
|||
<Tooltip :content="openSearch ? '关闭搜索' : '开启搜索'" placement="top" transfer> |
|||
<Icon type="ios-search" size="18" class="item tip" @click="openSearch = !openSearch" /> |
|||
</Tooltip> |
|||
<Tooltip :content="openTip ? '关闭提示' : '开启提示'" placement="top" transfer> |
|||
<Icon type="md-bulb" size="18" class="item tip" @click="openTip = !openTip" /> |
|||
</Tooltip> |
|||
<Tooltip content="表格密度" placement="top" transfer> |
|||
<Dropdown @on-click="changeTableSize" trigger="click"> |
|||
<Icon type="md-list" size="18" class="item" /> |
|||
<DropdownMenu slot="list"> |
|||
<DropdownItem :selected="tableSize == 'default'" name="default">默认</DropdownItem> |
|||
<DropdownItem :selected="tableSize == 'large'" name="large">宽松</DropdownItem> |
|||
<DropdownItem :selected="tableSize == 'small'" name="small">紧密</DropdownItem> |
|||
</DropdownMenu> |
|||
</Dropdown> |
|||
</Tooltip> |
|||
</div> |
|||
</Row> |
|||
<Alert show-icon v-show="openTip"> |
|||
已选择 |
|||
<span class="select-count">{{ selectList.length }}</span> 项 |
|||
<a class="select-clear" @click="clearSelectAll">清空</a> |
|||
</Alert> |
|||
<Table :loading="loading" border :columns="columns" :data="data" :size="tableSize" sortable="custom" |
|||
@on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table> |
|||
<Row type="flex" justify="end" class="page"> |
|||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" |
|||
@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" |
|||
size="small" show-total show-elevator show-sizer></Page> |
|||
</Row> |
|||
</Card> |
|||
<Modal :title="问题描述" v-model="Visiable" :mask-closable="false" :width="1000"> |
|||
<Form ref="exportForm" :label-width="100"> |
|||
<FormItem label="店铺名称"> |
|||
<div>{{problemData.shopName}}</div> |
|||
</FormItem> |
|||
<FormItem label="店铺ID"> |
|||
<div>{{problemData.shopId}}</div> |
|||
</FormItem> |
|||
<FormItem label="问题反馈"> |
|||
<div>{{problemData.problemContent}}</div> |
|||
</FormItem> |
|||
<FormItem label="问题图片"> |
|||
<img style="width: 300px;" :src="problemData.problemPicture" alt="" /> |
|||
</FormItem> |
|||
</Form> |
|||
</Modal> |
|||
<!-- 自定义导出数据 --> |
|||
<Modal v-model="exportModalVisible" :title="exportTitle" :loading="loadingExport" @on-ok="exportCustomData"> |
|||
<Form ref="exportForm" :label-width="100"> |
|||
<FormItem label="导出文件名"> |
|||
<Input v-model="filename" /> |
|||
</FormItem> |
|||
<FormItem label="自定义导出列"> |
|||
<CheckboxGroup v-model="chooseColumns"> |
|||
<Checkbox v-for="(item, i) in exportColumns" :label="item.title" :key="i" :value="item.checked" |
|||
:disabled="item.disabled"></Checkbox> |
|||
</CheckboxGroup> |
|||
</FormItem> |
|||
</Form> |
|||
</Modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getProblemList, |
|||
getProblemDetail, |
|||
deleteProblem |
|||
getMiandan, |
|||
addMiandan, |
|||
closeMiandan |
|||
} from "@/api/app"; |
|||
import { |
|||
shortcuts |
|||
} from "@/libs/shortcuts"; |
|||
// 指定导出列数据 |
|||
import { |
|||
exportColumn |
|||
} from "./exportColumn"; |
|||
import excel from "@/libs/excel"; |
|||
import logisticsAddress from "@/views/app/company/logisticsAddress.vue"; |
|||
// 充值记录 |
|||
import rechargeOne from "@/views/app/business/recharge/rechargeOne.vue"; |
|||
export default { |
|||
name: "problemFeedback", |
|||
components: { |
|||
logisticsAddress, |
|||
rechargeOne |
|||
}, |
|||
name: "logiticsCompany", |
|||
data() { |
|||
return { |
|||
tableSize: "default", |
|||
message: "", |
|||
selectIndex: "", |
|||
currentRow: {}, |
|||
height: 510, |
|||
showCompany: false, |
|||
showType: "0", |
|||
openSearch: true, |
|||
openTip: true, |
|||
loading: true, |
|||
reading: false, |
|||
loadingExport: true, |
|||
exportModalVisible: false, |
|||
importModalVisible: false, |
|||
deployModalVisible: false, |
|||
problemData:{}, |
|||
uploadfile: { |
|||
name: "", |
|||
}, |
|||
drop: false, |
|||
selectList: [], |
|||
searchForm: { |
|||
problemContent: '', |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}, |
|||
selectDate: null, |
|||
options: { |
|||
shortcuts: shortcuts, |
|||
}, |
|||
form: {}, |
|||
columns: [{ |
|||
type: "selection", |
|||
width: 60, |
|||
align: "center", |
|||
fixed: "left", |
|||
}, |
|||
{ |
|||
type: "index", |
|||
width: 60, |
|||
align: "center", |
|||
fixed: "left", |
|||
}, |
|||
{ |
|||
title: "问题描述", |
|||
key: "problemContent", |
|||
minWidth: 100, |
|||
sortable: true, |
|||
fixed: "left", |
|||
render: (h, params) => { |
|||
return h( |
|||
"a", { |
|||
on: { |
|||
click: () => { |
|||
this.findAllRecord(params.row); |
|||
}, |
|||
}, |
|||
form: { |
|||
orderNumber:'', |
|||
freeAmount:'', |
|||
regionId:JSON.parse(this.getStore("user")).departmentId |
|||
}, |
|||
params.row.problemContent |
|||
); |
|||
}, |
|||
}, |
|||
{ |
|||
title: "店铺名称", |
|||
key: "shopName", |
|||
minWidth: 150, |
|||
sortable: true, |
|||
}, |
|||
{ |
|||
title: "店铺ID", |
|||
key: "shopId", |
|||
minWidth: 250, |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
key: "action", |
|||
width: 200, |
|||
align: "center", |
|||
fixed: "right", |
|||
render: (h, params) => { |
|||
return h("div", [ |
|||
h("Divider", { |
|||
props: { |
|||
type: "vertical", |
|||
}, |
|||
}), |
|||
h( |
|||
"a", { |
|||
on: { |
|||
click: () => { |
|||
this.remove(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"删除" |
|||
) |
|||
]); |
|||
}, |
|||
}, |
|||
], |
|||
exportColumns: exportColumn, |
|||
chooseColumns: [], |
|||
filename: "公司数据", |
|||
exportTitle: "确认导出", |
|||
exportType: "", |
|||
data: [], |
|||
exportData: [], |
|||
total: 0, |
|||
Visiable: false, |
|||
rechargeVisiable: false, |
|||
isOpen:false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getDataList(); |
|||
// 初始化导出列数据 |
|||
let array = []; |
|||
this.exportColumns.forEach((e) => { |
|||
// 指定列限制权限 |
|||
if ( |
|||
!this.getStore("roles").includes("ROLE_ADMIN") && |
|||
e.key == "mobile" |
|||
) { |
|||
e.title = "[无权导出] " + e.title; |
|||
e.disabled = true; |
|||
} else { |
|||
e.disabled = false; |
|||
} |
|||
array.push(e.title); |
|||
}); |
|||
this.chooseColumns = array; |
|||
}, |
|||
findAllRecord(v) { |
|||
this.Visiable = true; |
|||
console.log(v) |
|||
this.problemData = v |
|||
}, |
|||
findRechargeLog(v) { |
|||
this.rechargeVisiable = true; |
|||
console.log(v) |
|||
this.$nextTick(() => { |
|||
this.$refs.rechargelog.initRecharge(v); |
|||
}); |
|||
}, |
|||
changePage(v) { |
|||
this.searchForm.pageNumber = v; |
|||
this.getDataList(); |
|||
this.clearSelectAll(); |
|||
}, |
|||
changeTableSize(v) { |
|||
this.tableSize = v; |
|||
}, |
|||
changePageSize(v) { |
|||
this.searchForm.pageSize = v; |
|||
this.getDataList(); |
|||
}, |
|||
selectDateRange(v) { |
|||
if (v) { |
|||
this.searchForm.startDate = v[0]; |
|||
this.searchForm.endDate = v[1]; |
|||
} |
|||
}, |
|||
getDataList() { |
|||
this.loading = true; |
|||
getProblemList(this.searchForm).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
this.data = res.result.records |
|||
// if (!this.getStore("roles").includes("ROLE_ADMIN")) { |
|||
// res.result.content.forEach((e) => { |
|||
// e.mobile = "您无权查看该数据"; |
|||
// }); |
|||
// } |
|||
// this.data = res.result.content; |
|||
this.total = res.result.total; |
|||
if (this.data.length == 0 && this.searchForm.pageNumber > 1) { |
|||
this.searchForm.pages -= 1; |
|||
this.getDataList(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
handleSearch() { |
|||
this.searchForm.pageNumber = 1; |
|||
this.searchForm.pageSize = 10; |
|||
this.getDataList(); |
|||
}, |
|||
handleReset() { |
|||
this.$refs.searchForm.resetFields(); |
|||
this.searchForm.pageNumber = 1; |
|||
this.searchForm.pageSize = 10; |
|||
this.selectDate = null; |
|||
this.searchForm.startDate = ""; |
|||
this.searchForm.endDate = ""; |
|||
// 重新加载数据 |
|||
this.getDataList(); |
|||
}, |
|||
changeSort(e) { |
|||
this.searchForm.sort = e.key; |
|||
this.searchForm.order = e.order; |
|||
if (e.order == "normal") { |
|||
this.searchForm.order = ""; |
|||
} |
|||
this.getDataList(); |
|||
}, |
|||
handleDropdown(name) { |
|||
if (name == "refresh") { |
|||
this.getDataList(); |
|||
} else if (name == "exportData") { |
|||
if (this.selectList.length <= 0) { |
|||
this.$Message.warning("您还未选择要导出的数据"); |
|||
return; |
|||
} |
|||
this.exportType = "part"; |
|||
this.exportModalVisible = true; |
|||
this.exportTitle = "确认导出 " + this.selectList.length + " 条数据"; |
|||
} else if (name == "exportAll") { |
|||
this.exportType = "all"; |
|||
this.exportModalVisible = true; |
|||
this.exportTitle = "确认导出全部 " + this.total + " 条数据"; |
|||
getAllLogiticsCompanyData().then((res) => { |
|||
getMiandan({ |
|||
regionId:JSON.parse(this.getStore("user")).departmentId |
|||
}).then((res) => { |
|||
if (res.success) { |
|||
this.exportData = res.result; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
exportCustomData() { |
|||
if (this.filename == "") { |
|||
this.filename = "公司数据"; |
|||
if(res.result == null){ |
|||
this.isOpen = true |
|||
}else{ |
|||
this.form = res.result; |
|||
} |
|||
// 判断勾选导出列 |
|||
let array = []; |
|||
this.exportColumns.forEach((e) => { |
|||
this.chooseColumns.forEach((c) => { |
|||
if (e.title == c && !e.disabled) { |
|||
array.push(e); |
|||
} |
|||
}); |
|||
}); |
|||
this.exportColumns = array; |
|||
this.exportModalVisible = false; |
|||
let title = []; |
|||
let key = []; |
|||
this.exportColumns.forEach((e) => { |
|||
title.push(e.title); |
|||
key.push(e.key); |
|||
}); |
|||
const params = { |
|||
title: title, |
|||
key: key, |
|||
data: this.exportData, |
|||
autoWidth: true, |
|||
filename: this.filename, |
|||
}; |
|||
excel.export_array_to_excel(params); |
|||
}, |
|||
showDetail(v) { |
|||
// 转换null为"" |
|||
for (let attr in v) { |
|||
if (v[attr] == null) { |
|||
v[attr] = ""; |
|||
} |
|||
} |
|||
let str = JSON.stringify(v); |
|||
let data = JSON.parse(str); |
|||
this.form = data; |
|||
this.showType = "0"; |
|||
this.showCompany = true; |
|||
}, |
|||
add() { |
|||
this.showType = "2"; |
|||
this.showCompany = true; |
|||
}, |
|||
edit(v) { |
|||
// 转换null为"" |
|||
for (let attr in v) { |
|||
if (v[attr] == null) { |
|||
v[attr] = ""; |
|||
} |
|||
} |
|||
let str = JSON.stringify(v); |
|||
let data = JSON.parse(str); |
|||
this.form = data; |
|||
this.showType = "1"; |
|||
this.showCompany = true; |
|||
}, |
|||
remove(v) { |
|||
this.$Modal.confirm({ |
|||
title: "确认删除", |
|||
content: "您确认要删除此反馈吗?", |
|||
loading: true, |
|||
onOk: () => { |
|||
deleteProblem({ |
|||
id: v.id |
|||
}).then((res) => { |
|||
this.$Modal.remove(); |
|||
addMiandan(this.form).then((res) => { |
|||
if (res.success) { |
|||
this.clearSelectAll(); |
|||
this.$Message.success("删除成功"); |
|||
this.getDataList(); |
|||
this.$Message.success("操作成功"); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
dropDown() { |
|||
this.drop = !this.drop; |
|||
}, |
|||
showSelect(e) { |
|||
this.exportData = e; |
|||
this.selectList = e; |
|||
if (e.length === 1) { |
|||
const row = e[0]; |
|||
this.selectIndex = row.id; |
|||
this.currentRow = row; |
|||
} else { |
|||
this.currentRow = {}; |
|||
this.selectIndex = ""; |
|||
} |
|||
}, |
|||
clearSelectAll() { |
|||
this.$refs.table.selectAll(false); |
|||
}, |
|||
delAll() { |
|||
if (this.selectList.length <= 0) { |
|||
this.$Message.warning("您还未选择要删除的数据"); |
|||
return; |
|||
} |
|||
close() { |
|||
this.$Modal.confirm({ |
|||
title: "确认删除", |
|||
content: "您确认要删除所选的 " + this.selectList.length + " 条数据?", |
|||
title: "确认关闭", |
|||
content: "您确认要关闭免单优惠吗？", |
|||
loading: true, |
|||
onOk: () => { |
|||
let ids = ""; |
|||
this.selectList.forEach(function(e) { |
|||
ids += e.id + ","; |
|||
}); |
|||
ids = ids.substring(0, ids.length - 1); |
|||
deleteLogiticsCompany({ |
|||
ids: ids |
|||
closeMiandan({ |
|||
regionId:JSON.parse(this.getStore("user")).departmentId |
|||
}).then((res) => { |
|||
this.$Modal.remove(); |
|||
|
|||
if (res.success) { |
|||
this.$Message.success("删除成功"); |
|||
this.clearSelectAll(); |
|||
this.getDataList(); |
|||
this.$Message.success("操作成功"); |
|||
} |
|||
}); |
|||
this.$Modal.remove(); |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 计算高度 |
|||
this.height = Number(document.documentElement.clientHeight - 230); |
|||
this.init(); |
|||
}, |
|||
}; |
|||
|
|||
Loading…
Reference in new issue