1 changed files with 40 additions and 458 deletions
@ -1,510 +1,92 @@ |
|||||
<style lang="less"> |
<style lang="less"> |
||||
@import "@/styles/table-common.less"; |
@import "@/styles/table-common.less"; |
||||
@import "./problemFeedback.less"; |
|
||||
</style> |
</style> |
||||
<template> |
<template> |
||||
<div class="search"> |
<div class="search"> |
||||
<Card> |
<Card> |
||||
<Row v-show="openSearch" @keydown.enter.native="handleSearch"> |
<Row> |
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="100"> |
<Form ref="searchForm" :model="searchForm" inline :label-width="100"> |
||||
<FormItem label="问题描述" prop="problemContent"> |
|
||||
<Input type="text" v-model="searchForm.problemContent" clearable placeholder="请输入问题描述" |
<FormItem label="免单人数" prop="name"> |
||||
style="width: 200px" /> |
<Input v-model="form.orderNumber"></Input> |
||||
</FormItem> |
</FormItem> |
||||
<!-- <FormItem label="联系人" prop="contacts"> |
<FormItem label="免单金额" prop="name"> |
||||
<Input |
<Input v-model="form.freeAmount"></Input> |
||||
type="text" |
|
||||
v-model="searchForm.contacts" |
|
||||
clearable |
|
||||
placeholder="请输入联系人" |
|
||||
style="width: 200px" |
|
||||
/> |
|
||||
</FormItem> |
</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"> |
<FormItem style="margin-left: -35px" class="br"> |
||||
<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button> |
<Button v-if="isOpen" @click="add" type="primary">开启</Button> |
||||
<Button @click="handleReset">重置</Button> |
<Button v-else @click="add" type="primary">保存</Button> |
||||
<a class="drop-down" @click="dropDown"> |
|
||||
{{ dropDownContent }} |
<Button @click="close">关闭免单</Button> |
||||
<Icon :type="dropDownIcon"></Icon> |
|
||||
</a> |
|
||||
</FormItem> |
</FormItem> |
||||
</Form> |
</Form> |
||||
</Row> |
</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> |
</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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { |
import { |
||||
getProblemList, |
getMiandan, |
||||
getProblemDetail, |
addMiandan, |
||||
deleteProblem |
closeMiandan |
||||
} from "@/api/app"; |
} 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 { |
export default { |
||||
name: "problemFeedback", |
name: "logiticsCompany", |
||||
components: { |
|
||||
logisticsAddress, |
|
||||
rechargeOne |
|
||||
}, |
|
||||
data() { |
data() { |
||||
return { |
return { |
||||
tableSize: "default", |
form: { |
||||
message: "", |
orderNumber:'', |
||||
selectIndex: "", |
freeAmount:'', |
||||
currentRow: {}, |
regionId:JSON.parse(this.getStore("user")).departmentId |
||||
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); |
|
||||
}, |
|
||||
}, |
|
||||
}, |
}, |
||||
params.row.problemContent |
isOpen:false, |
||||
); |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
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, |
|
||||
}; |
}; |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
init() { |
init() { |
||||
this.getDataList(); |
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() { |
getDataList() { |
||||
this.loading = true; |
getMiandan({ |
||||
getProblemList(this.searchForm).then((res) => { |
regionId:JSON.parse(this.getStore("user")).departmentId |
||||
this.loading = false; |
}).then((res) => { |
||||
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) => { |
|
||||
if (res.success) { |
if (res.success) { |
||||
this.exportData = res.result; |
if(res.result == null){ |
||||
} |
this.isOpen = true |
||||
}); |
}else{ |
||||
} |
this.form = res.result; |
||||
}, |
|
||||
exportCustomData() { |
|
||||
if (this.filename == "") { |
|
||||
this.filename = "公司数据"; |
|
||||
} |
} |
||||
// 判断勾选导出列 |
|
||||
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() { |
add() { |
||||
this.showType = "2"; |
addMiandan(this.form).then((res) => { |
||||
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(); |
|
||||
if (res.success) { |
if (res.success) { |
||||
this.clearSelectAll(); |
this.$Message.success("操作成功"); |
||||
this.$Message.success("删除成功"); |
|
||||
this.getDataList(); |
|
||||
} |
} |
||||
}); |
}); |
||||
}, |
}, |
||||
}); |
close() { |
||||
}, |
|
||||
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; |
|
||||
} |
|
||||
this.$Modal.confirm({ |
this.$Modal.confirm({ |
||||
title: "确认删除", |
title: "确认关闭", |
||||
content: "您确认要删除所选的 " + this.selectList.length + " 条数据?", |
content: "您确认要关闭免单优惠吗？", |
||||
loading: true, |
loading: true, |
||||
onOk: () => { |
onOk: () => { |
||||
let ids = ""; |
closeMiandan({ |
||||
this.selectList.forEach(function(e) { |
regionId:JSON.parse(this.getStore("user")).departmentId |
||||
ids += e.id + ","; |
|
||||
}); |
|
||||
ids = ids.substring(0, ids.length - 1); |
|
||||
deleteLogiticsCompany({ |
|
||||
ids: ids |
|
||||
}).then((res) => { |
}).then((res) => { |
||||
this.$Modal.remove(); |
|
||||
if (res.success) { |
if (res.success) { |
||||
this.$Message.success("删除成功"); |
this.$Message.success("操作成功"); |
||||
this.clearSelectAll(); |
|
||||
this.getDataList(); |
|
||||
} |
} |
||||
}); |
}); |
||||
|
this.$Modal.remove(); |
||||
}, |
}, |
||||
}); |
}); |
||||
} |
}, |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
// 计算高度 |
|
||||
this.height = Number(document.documentElement.clientHeight - 230); |
|
||||
this.init(); |
this.init(); |
||||
}, |
}, |
||||
}; |
}; |
||||
|
|||||
Loading…
Reference in new issue