<template>
|
<div class="shop_order">
|
<v-header title="便民服务商家"></v-header>
|
<el-input
|
class="search-all"
|
v-model="searchValue.keyword"
|
placeholder=" 请输入商家名称、商家地址、咨询电话等关键词进行查找"
|
size="small"
|
></el-input>
|
<div class="search-content">
|
<div class="fl-al mr-r-50">
|
<div class="search-label">服务范围：</div>
|
<el-select
|
size="small"
|
class="iw-180"
|
v-model="searchValue.serviceId"
|
clearable
|
filterable
|
placeholder="请选择服务范围"
|
>
|
<el-option
|
v-for="item in serveList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-r-50">
|
<div class="search-label">营业状态：</div>
|
<el-select
|
size="small"
|
class="iw-180"
|
v-model="searchValue.businessStatus"
|
clearable
|
filterable
|
placeholder="请选择营业状态"
|
>
|
<el-option
|
v-for="item in stateList2"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-r-50">
|
<div class="search-label">账号状态：</div>
|
<el-select
|
size="small"
|
class="iw-180"
|
v-model="searchValue.accountStatus"
|
clearable
|
filterable
|
placeholder="请选择账号状态"
|
>
|
<el-option
|
v-for="item in stateList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10">
|
<el-button type="primary" size="small" @click="searchHandle"
|
>查询</el-button
|
>
|
<el-button size="small" @click="resetData">重置</el-button>
|
</div>
|
</div>
|
<div class="but">
|
<el-button
|
@click="importHandle"
|
size="small"
|
:disabled="!this.ids.length"
|
type="primary"
|
>导出</el-button
|
>
|
</div>
|
<div class="tab" style="overflow-x: scroll">
|
<v-tool-table :trs="trs" :tds="tds" first firstWidth="50px">
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox
|
v-model="item.scope.t_check"
|
@change="checkboxHandle(item.scope)"
|
></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:logo="{ scope }">
|
<img :src="scope.logo" alt="" />
|
</template>
|
<template v-slot:btn="{ scope }">
|
<el-button type="text" @click="edit1(scope.id)">查看</el-button>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</template>
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
name: "index",
|
props: [],
|
components: {},
|
data() {
|
return {
|
trs: [
|
{ text: "序号", val: "id" },
|
{ text: "所属社区", val: "communityName" },
|
{ text: "商家名称", val: "name" },
|
{ text: "商家logo", val: "btn", slot: "logo" },
|
{ text: "联系人", val: "contacts" },
|
{ text: "身份证号", val: "idCard" },
|
{ text: "联系电话", val: "phone" },
|
{ text: "商家地址", val: "address" },
|
{ text: "营业时间", val: "timeText" },
|
{ text: "总咨询量", val: "consultationVolume" },
|
{ text: "服务范围", val: "serviceScope" },
|
{ text: "商家介绍", val: "introduction" },
|
{ text: "管理账号", val: "account" },
|
{ text: "营业状态", val: "businessStatus" },
|
{ text: "账号状态", val: "accountStatus" },
|
{ text: "操作", val: "btn", width: "100px" },
|
],
|
os: {},
|
tds: [],
|
paged: { pageNum: 0, total: 10, r: 0, pageSize: 10 },
|
alls: false,
|
searchValue: {
|
serviceId: "",
|
businessStatus: "",
|
accountStatus: "",
|
keyword: "",
|
},
|
pageType: false,
|
ids: [],
|
stateList: [
|
{
|
value: 1,
|
label: "开启",
|
},
|
{
|
value: 2,
|
label: "关闭",
|
},
|
],
|
stateList2: [
|
{
|
value: 1,
|
label: "营业",
|
},
|
{
|
value: 2,
|
label: "关闭",
|
},
|
],
|
serveList: [],
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.pageNum = 1;
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
alls(n) {
|
this.ids = [];
|
if (n) {
|
this.tds.forEach((item) => {
|
this.ids.push(item.id);
|
});
|
}
|
this.tds = this.tds.map((r) => {
|
r.t_check = n;
|
return r;
|
});
|
},
|
},
|
mounted() {
|
this.$api.get("convenient/service-category/all", {}, (e) => {
|
this.serveList = e;
|
});
|
},
|
methods: {
|
importHandle() {
|
this.$api.post(
|
"convenient/merchant/export",
|
{
|
ids: this.ids,
|
},
|
(e) => {
|
location.href = e;
|
}
|
);
|
},
|
checkboxHandle(row) {
|
const all = this.tds.every((item) => {
|
return item.t_check === false;
|
});
|
const all2 = this.tds.every((item) => {
|
return item.t_check === true;
|
});
|
if (all) {
|
this.alls = false;
|
}
|
if (all2) {
|
this.alls = true;
|
}
|
if (row.t_check) {
|
this.ids.push(row.id);
|
} else {
|
this.ids.forEach((item, index) => {
|
if (item === row.id) {
|
this.ids.splice(index, 1);
|
}
|
});
|
}
|
},
|
edit1(id) {
|
//编辑
|
this.$router.push({
|
path: "/cor_bus_edit",
|
query: {
|
id: id,
|
},
|
});
|
},
|
searchHandle() {
|
this.paged.pageNum = 1;
|
this.paged.pageSize = 10;
|
this.init();
|
},
|
resetData() {
|
this.searchValue = {
|
serviceId: "",
|
businessStatus: "",
|
accountStatus: "",
|
keyword: "",
|
};
|
this.paged.pageNum = 1;
|
this.paged.pageSize = 10;
|
this.init();
|
},
|
onPage(v) {
|
//分页
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.pageNum = v.page;
|
this.paged.pageSize = v.limit;
|
this.init();
|
},
|
init() {
|
let v = demo.copy(
|
Object.assign(this.os, this.searchValue, {
|
pageNum: this.paged.pageNum,
|
pageSize: this.paged.pageSize,
|
})
|
);
|
this.$api.post("convenient/merchant/page", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = (e.records || []).map((v) => {
|
v.t_check = false;
|
return v;
|
});
|
this.tds.forEach((item) => {
|
item.businessStatus = item.businessStatus === 1 ? "营业" : "关闭";
|
item.accountStatus = item.accountStatus === 1 ? "启用" : "禁用";
|
let text = "";
|
if (item.period === "EVERY_DAY") text = "每天";
|
if (item.period === "WEEKDAY") text = "周一至周五";
|
if (item.period === "WEEKEND") text = "周六、周日";
|
item.timeText = `${text} ${item.beginAt}`;
|
});
|
});
|
},
|
edit() {
|
this.$router.push({
|
path: "/cor_bus_edit",
|
});
|
},
|
},
|
};
|
</script>
|
<style scoped lang='less'>
|
.but {
|
padding-bottom: 20px;
|
display: flex;
|
}
|
.search-content {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
.search-label {
|
text-align: right;
|
width: 82px;
|
}
|
.iw-180 {
|
width: 180px !important;
|
}
|
.mr-r-50 {
|
margin-bottom: 10px;
|
margin-right: 50px;
|
}
|
.mr-b-10 {
|
margin-bottom: 10px;
|
}
|
.search-all {
|
margin-bottom: 10px;
|
width: 500px;
|
}
|
.shop_order {
|
overflow-y: scroll;
|
.tab,
|
.add {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
