837 lines
32 KiB
Vue
837 lines
32 KiB
Vue
<template>
|
|
<view class="page-body">
|
|
<!-- 页面内容开始 -->
|
|
|
|
<!-- 表格搜索组件开始 -->
|
|
<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
|
|
@search="search"></vk-data-table-query>
|
|
<!-- 表格搜索组件结束 -->
|
|
|
|
<!-- 自定义按钮区域开始 -->
|
|
<view>
|
|
<el-row>
|
|
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加
|
|
</el-button>
|
|
<!-- 批量操作 -->
|
|
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
|
<!-- <el-button type="danger" size="small" style="margin-left: 20rpx;"
|
|
:disabled="table1.multipleSelection.length === 0">
|
|
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</el-button> -->
|
|
<el-dropdown-menu slot="dropdown">
|
|
<!-- <el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
|
<el-dropdown-item :command="2">批量操作2</el-dropdown-item> -->
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-row>
|
|
</view>
|
|
<!-- 自定义按钮区域结束 -->
|
|
|
|
<!-- 表格组件开始 -->
|
|
<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
|
|
:right-btns="['detail_auto','update','delete']" :default-expand-all="false" @update="updateBtn"
|
|
@delete="deleteBtn" @current-change="currentChange" :pagination="true"
|
|
@selection-change="selectionChange"></vk-data-table>
|
|
<!-- 表格组件结束 -->
|
|
|
|
<!-- 添加或编辑的弹窗开始 -->
|
|
<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="60%" mode="form"
|
|
:close-on-click-modal="false">
|
|
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
|
:before-action="form1.props.beforeAction"
|
|
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
|
@success="form1.props.show = false;refresh();"></vk-data-form>
|
|
</vk-data-dialog>
|
|
<!-- 添加或编辑的弹窗结束 -->
|
|
|
|
<!-- 页面内容结束 -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var that; // 当前页面对象
|
|
var vk = uni.vk; // vk实例
|
|
var originalForms = {}; // 表单初始化数据
|
|
|
|
export default {
|
|
data() {
|
|
// 页面数据变量
|
|
return {
|
|
// 页面是否请求中或加载中
|
|
loading: false,
|
|
// init请求返回的数据
|
|
data: {},
|
|
// 表格相关开始 -----------------------------------------------------------
|
|
table1: {
|
|
// 表格数据请求地址
|
|
action: "admin/ad/sys/list",
|
|
// 表格字段显示规则
|
|
columns: [
|
|
{
|
|
key: "_id",
|
|
title: "id",
|
|
type: "text",
|
|
width: 220
|
|
},
|
|
{
|
|
key: "adKey",
|
|
title: "广告位",
|
|
type: "tag",
|
|
data: [
|
|
{value: 3, label: "首页优秀厂家广告位3"},
|
|
{value: 4, label: "首页优秀厂家广告位4"},
|
|
{value: 5, label: "首页推广广告位5"},
|
|
{value: 6, label: "首页推广广告位6"},
|
|
{value: 7, label: "首页推广广告位7"},
|
|
{value: 8, label: "首页推广广告位8"},
|
|
{value: 9, label: "现货底端小图广告位9"},
|
|
{value: 10, label: "现货底端小图广告位10"},
|
|
{value: 11, label: "找供应厂家广告位11-1"},
|
|
{value: 112, label: "找供应厂家广告位11-2"},
|
|
{value: 12, label: "加工厂列表广告位12"},
|
|
{value: 122, label: "加工厂列表广告位12-2"},
|
|
{value: 13, label: "找加工首页广告位13"},
|
|
{value: 14, label: "找加工首页广告位14"},
|
|
{value: 15, label: "旧货拍卖信息广告位15"},
|
|
{value: 16, label: "旧货拍卖信息广告位16"},
|
|
{value: 17, label: "旧货采购信息广告位17"},
|
|
{value: 18, label: "旧货采购信息广告位18"},
|
|
{value: 19, label: "旧货租赁信息广告位19"},
|
|
{value: 20, label: "旧货租赁信息广告位20"},
|
|
{value: 21, label: "旧货物资回收信息广告位21"},
|
|
{value: 22, label: "旧货物资回收信息广告位22"},
|
|
{value: 23, label: "黄页底端小图广告位23"},
|
|
{value: 24, label: "黄页底端小图广告位24"},
|
|
{value: 25, label: "黄页底端小图广告位25"},
|
|
{value: 26, label: "黄页底端小图广告位26"},
|
|
{value: 27, label: "特产商城广告位1"},
|
|
{value: 28, label: "特产商城广告位2"},
|
|
{value: 29, label: "特产商城广告位3"},
|
|
{value: 30, label: "特产商城广告位4"},
|
|
{value: 31, label: "特产商城广告位5"},
|
|
{value: 32, label: "自营合作广告位27(1200*100/600*100)"},
|
|
{value: 33, label: "自营合作广告位28(1200*100/600*100)"},
|
|
{value: 34, label: "自营合作广告位29(1200*100/600*100)"},
|
|
{value: 35, label: "自营合作广告位30(1200*100/600*100)"},
|
|
{value: 36, label: "现货单品广告位36"},
|
|
{value: 37, label: "找供应单品广告位37"},
|
|
{value: 38, label: "加工厂单品广告位38"},
|
|
]
|
|
},
|
|
{
|
|
key: "swiper",
|
|
title: "图片",
|
|
type: "image",
|
|
},
|
|
{
|
|
key: "region",
|
|
title: "区域",
|
|
type: "address",
|
|
},
|
|
{
|
|
key: "company",
|
|
type: "text",
|
|
title: "指定公司",
|
|
formatter: (val, row, column, index) => {
|
|
if (val) return val.company.companyName
|
|
}
|
|
},
|
|
{
|
|
key: "spotGoods",
|
|
type: "text",
|
|
title: "指定现货",
|
|
formatter: (val, row, column, index) => {
|
|
if (val) return val.name
|
|
}
|
|
},
|
|
{
|
|
key: "_add_time",
|
|
title: "添加时间",
|
|
type: "time",
|
|
align: "left",
|
|
width: 160,
|
|
sortable: "custom"
|
|
},
|
|
{
|
|
key: "_add_time_diff",
|
|
title: "距离现在",
|
|
type: "html",
|
|
align: "left",
|
|
width: 120,
|
|
formatter: (val, row) => vk.pubfn.dateDiff(row._add_time)
|
|
},
|
|
],
|
|
// 多选框选中的值
|
|
multipleSelection: [],
|
|
// 当前高亮的记录
|
|
selectItem: ""
|
|
},
|
|
// 表格相关结束 -----------------------------------------------------------
|
|
// 表单相关开始 -----------------------------------------------------------
|
|
// 查询表单请求数据
|
|
queryForm1: {
|
|
// 查询表单数据源，可在此设置默认值
|
|
formData: {},
|
|
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
|
columns: [
|
|
{
|
|
key: "adKey",
|
|
title: "广告位",
|
|
type: "select",
|
|
filterable: true,
|
|
clearable: true,
|
|
data: [
|
|
{value: 3, label: "首页优秀厂家广告位3"},
|
|
{value: 4, label: "首页优秀厂家广告位4"},
|
|
{value: 5, label: "首页推广广告位5"},
|
|
{value: 6, label: "首页推广广告位6"},
|
|
{value: 7, label: "首页推广广告位7"},
|
|
{value: 8, label: "首页推广广告位8"},
|
|
{value: 9, label: "现货底端小图广告位9"},
|
|
{value: 10, label: "现货底端小图广告位10"},
|
|
{value: 11, label: "找供应厂家广告位11-1"},
|
|
{value: 112, label: "找供应厂家广告位11-2"},
|
|
{value: 12, label: "加工厂列表广告位12"},
|
|
{value: 122, label: "加工厂列表广告位12-2"},
|
|
{value: 13, label: "找加工首页广告位13"},
|
|
{value: 14, label: "找加工首页广告位14"},
|
|
{value: 15, label: "旧货拍卖信息广告位15"},
|
|
{value: 16, label: "旧货拍卖信息广告位16"},
|
|
{value: 17, label: "旧货采购信息广告位17"},
|
|
{value: 18, label: "旧货采购信息广告位18"},
|
|
{value: 19, label: "旧货租赁信息广告位19"},
|
|
{value: 20, label: "旧货租赁信息广告位20"},
|
|
{value: 21, label: "旧货物资回收信息广告位21"},
|
|
{value: 22, label: "旧货物资回收信息广告位22"},
|
|
{value: 23, label: "黄页底端小图广告位23"},
|
|
{value: 24, label: "黄页底端小图广告位24"},
|
|
{value: 25, label: "黄页底端小图广告位25"},
|
|
{value: 26, label: "黄页底端小图广告位26"},
|
|
{value: 27, label: "特产商城广告位1"},
|
|
{value: 28, label: "特产商城广告位2"},
|
|
{value: 29, label: "特产商城广告位3"},
|
|
{value: 30, label: "特产商城广告位4"},
|
|
{value: 31, label: "特产商城广告位5"},
|
|
{value: 32, label: "自营合作广告位27(1200*100/600*100)"},
|
|
{value: 33, label: "自营合作广告位28(1200*100/600*100)"},
|
|
{value: 34, label: "自营合作广告位29(1200*100/600*100)"},
|
|
{value: 35, label: "自营合作广告位30(1200*100/600*100)"},
|
|
{value: 36, label: "现货单品广告位36"},
|
|
{value: 37, label: "找供应单品广告位37"},
|
|
{value: 38, label: "加工厂单品广告位38"},
|
|
]
|
|
},
|
|
// {
|
|
// key: "name",
|
|
// title: "名称",
|
|
// type: "text",
|
|
// width: 160,
|
|
// mode: "%%"
|
|
// },
|
|
// {
|
|
// key: "remark",
|
|
// title: "备注",
|
|
// type: "text",
|
|
// width: 160,
|
|
// mode: "%%"
|
|
// },
|
|
// {
|
|
// key: "_add_time",
|
|
// title: "添加时间",
|
|
// type: "datetimerange",
|
|
// width: 400,
|
|
// mode: "[]"
|
|
// },
|
|
]
|
|
},
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
sort: 0,
|
|
amount: 0,
|
|
type: 'company',
|
|
filterMode: 'region',
|
|
regionSelector: [],
|
|
regionProvinceSelector: {},
|
|
categoryIds: [],
|
|
categoryNames: []
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "",
|
|
beforeAction: formData => {
|
|
const data = vk.pubfn.copyObject(formData);
|
|
data.region = this.getSubmitRegion(data);
|
|
const categoryInfo = this.getSubmitCategory(data);
|
|
data.categoryIds = categoryInfo.categoryIds;
|
|
data.categoryNames = categoryInfo.categoryNames;
|
|
data.categoryId = categoryInfo.categoryIds[0] || '';
|
|
data.categoryName = categoryInfo.categoryNames[0] || '';
|
|
delete data.regionSelector;
|
|
delete data.regionProvinceSelector;
|
|
return data;
|
|
},
|
|
// 表单字段显示规则
|
|
columns: [
|
|
{
|
|
key: "adKey",
|
|
title: "广告位",
|
|
type: "select",
|
|
placeholder: "请选择广告位",
|
|
filterable: true,
|
|
clearable: true,
|
|
data: [
|
|
{value: 3, label: "首页优秀厂家广告位3(600*100)"},
|
|
{value: 4, label: "首页优秀厂家广告位4(600*100)"},
|
|
{value: 5, label: "首页推广广告位5(600*100)"},
|
|
{value: 6, label: "首页推广广告位6(600*100)"},
|
|
{value: 7, label: "首页推广广告位7(600*100)"},
|
|
{value: 8, label: "首页推广广告位8(600*100)"},
|
|
{value: 9, label: "现货底端小图广告位9(600*100)"},
|
|
{value: 10, label: "现货底端小图广告位10(600*100)"},
|
|
{value: 11, label: "找供应厂家广告位11-1(600*100)"},
|
|
{value: 112, label: "找供应厂家广告位11-2(600*100)"},
|
|
{value: 12, label: "加工厂列表广告位12(600*100)"},
|
|
{value: 122, label: "加工厂列表广告位12-2(600*100)"},
|
|
{value: 13, label: "找加工首页广告位13(600*100)"},
|
|
{value: 14, label: "找加工首页广告位14(600*100)"},
|
|
{value: 15, label: "旧货拍卖信息广告位15(1200*100/600*100)"},
|
|
{value: 16, label: "旧货拍卖信息广告位16(1200*100/600*100)"},
|
|
{value: 17, label: "旧货采购信息广告位17(1200*100/600*100)"},
|
|
{value: 18, label: "旧货采购信息广告位18(1200*100/600*100)"},
|
|
{value: 19, label: "旧货租赁信息广告位19(1200*100/600*100)"},
|
|
{value: 20, label: "旧货租赁信息广告位20(1200*100/600*100)"},
|
|
{value: 21, label: "旧货物资回收信息广告位21(1200*100/600*100)"},
|
|
{value: 22, label: "旧货物资回收信息广告位22(1200*100/600*100)"},
|
|
{value: 23, label: "黄页底端小图广告位23(1200*100/600*100)"},
|
|
{value: 24, label: "黄页底端小图广告位24(1200*100/600*100)"},
|
|
{value: 25, label: "黄页底端小图广告位25(1200*100/600*100)"},
|
|
{value: 26, label: "黄页底端小图广告位26(1200*100/600*100)"},
|
|
{value: 27, label: "特产商城广告位1(1200*150)"},
|
|
{value: 28, label: "特产商城广告位2(1200*150)"},
|
|
{value: 29, label: "特产商城广告位3(1200*150)"},
|
|
{value: 30, label: "特产商城广告位4(1200*150)"},
|
|
{value: 31, label: "特产商城广告位5(1200*150)"},
|
|
{value: 32, label: "自营合作广告位27(1200*100/600*100)"},
|
|
{value: 33, label: "自营合作广告位28(1200*100/600*100)"},
|
|
{value: 34, label: "自营合作广告位29(1200*100/600*100)"},
|
|
{value: 35, label: "自营合作广告位30(1200*100/600*100)"},
|
|
{value: 36, label: "现货单品广告位36"},
|
|
{value: 37, label: "找供应单品广告位37"},
|
|
{value: 38, label: "加工厂单品广告位38"},
|
|
]
|
|
},
|
|
{
|
|
key: "swiper",
|
|
title: "图片",
|
|
type: "image",
|
|
limit: 1
|
|
},
|
|
{
|
|
key: "filterMode",
|
|
title: "筛选方式",
|
|
type: "select",
|
|
data: [
|
|
{value: 'region', label: "按区域"},
|
|
{value: 'category', label: "按分类"},
|
|
],
|
|
showRule: formData => {
|
|
return this.supportsCategoryFilterAd(formData.adKey)
|
|
}
|
|
},
|
|
{
|
|
key: "regionSelector",
|
|
title: "区域",
|
|
type: "cascader",
|
|
placeholder: "请选择区域",
|
|
filterable: true,
|
|
data: () => this.getFlexibleRegionOptions(),
|
|
props: {
|
|
checkStrictly: true,
|
|
emitPath: true,
|
|
value: "code",
|
|
label: "name",
|
|
children: "children"
|
|
},
|
|
showRule: formData => {
|
|
return !this.isSpotGoodsAd(formData.adKey) && this.isFlexibleRegionAd(formData.adKey)
|
|
}
|
|
},
|
|
{
|
|
key: "regionProvinceSelector",
|
|
title: "区域",
|
|
type: "province",
|
|
placeholder: "请选择省份",
|
|
showRule: formData => {
|
|
return !this.isSpotGoodsAd(formData.adKey) && !this.isFlexibleRegionAd(formData.adKey) && !this.isCategoryFilterMode(formData)
|
|
}
|
|
},
|
|
{
|
|
key: "categoryIds",
|
|
title: "分类",
|
|
type: "select",
|
|
placeholder: "请选择分类",
|
|
multiple: true,
|
|
filterable: true,
|
|
clearable: true,
|
|
data: () => this.getCategoryOptions(this.form1.data.adKey),
|
|
showRule: formData => {
|
|
return this.isCategoryFilterMode(formData)
|
|
}
|
|
},
|
|
{
|
|
key: "type",
|
|
title: "类型",
|
|
type: "select",
|
|
data: [
|
|
{value: 'company', label: "公司"},
|
|
{value: 'goods', label: "商品"},
|
|
],
|
|
showRule: formData => {
|
|
return !this.isSpotGoodsAd(formData.adKey)
|
|
}
|
|
},
|
|
{
|
|
key: "companyId",
|
|
title: "指定公司",
|
|
type: "remote-select",
|
|
showAll: true,
|
|
filterable: true,
|
|
placeholder: "请选择指定公司",
|
|
action: "admin/system/user/sys/getList",
|
|
actionData: {
|
|
pageIndex: 1,
|
|
pageSize: 500,
|
|
type: 2
|
|
},
|
|
props: {
|
|
list: "rows",
|
|
value: "_id",
|
|
label: "name",
|
|
},
|
|
dataPreprocess: (list) => {
|
|
list = list.filter(item => (item.company && item.company.companyName && item.company.companyName !== ''))
|
|
list.map((item, index) => {
|
|
item.name = `${item.company.companyName}(${item.mobile})`
|
|
return item
|
|
});
|
|
return list;
|
|
},
|
|
showRule: formData => {
|
|
return !this.isSpotGoodsAd(formData.adKey) && (formData.type === 'company' || !formData.type)
|
|
}
|
|
},
|
|
{
|
|
key: "goodsId",
|
|
title: "指定商品",
|
|
type: "remote-select",
|
|
showAll: true,
|
|
placeholder: "请选择指定商品",
|
|
action: "admin/goods/list/sys/list",
|
|
actionData: {
|
|
pageIndex: 1,
|
|
pageSize: 500,
|
|
type: 2
|
|
},
|
|
props: {
|
|
list: "rows",
|
|
value: "_id",
|
|
label: "name",
|
|
},
|
|
showRule: formData => {
|
|
return !this.isSpotGoodsAd(formData.adKey) && formData.type === 'goods'
|
|
}
|
|
},
|
|
{
|
|
key: "spotGoodsId",
|
|
title: "指定现货",
|
|
type: "remote-select",
|
|
showAll: true,
|
|
placeholder: "请选择指定现货",
|
|
action: "admin/spot/goods/sys/getList",
|
|
actionData: {
|
|
pageIndex: 1,
|
|
pageSize: 500,
|
|
},
|
|
props: {
|
|
list: "rows",
|
|
value: "_id",
|
|
label: "name",
|
|
},
|
|
dataPreprocess: (list) => {
|
|
list.map(item => {
|
|
const address = item.address && item.address.province ? `${item.address.province.name}${item.address.city.name}${item.address.area.name}` : ''
|
|
item.name = `${item.name}${address ? `(${address})` : ''}`
|
|
return item
|
|
})
|
|
return list
|
|
},
|
|
showRule: formData => {
|
|
return this.isSpotGoodsAd(formData.adKey)
|
|
}
|
|
},
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
adKey: [
|
|
{required: true, message: '请选择广告位', trigger: 'blur'},
|
|
],
|
|
swiper: [
|
|
{required: true, message: '请上传图片', trigger: 'blur'},
|
|
],
|
|
companyId: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
const formData = this.form1.data || {}
|
|
if (!this.isSpotGoodsAd(formData.adKey) && !this.isCategoryFilterMode(formData) && (formData.type === 'company' || !formData.type) && !value) {
|
|
callback(new Error('请选择指定公司'))
|
|
return
|
|
}
|
|
callback()
|
|
}, trigger: 'blur'
|
|
},
|
|
],
|
|
goodsId: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
const formData = this.form1.data || {}
|
|
if (!this.isSpotGoodsAd(formData.adKey) && !this.isCategoryFilterMode(formData) && formData.type === 'goods' && !value) {
|
|
callback(new Error('请选择指定商品'))
|
|
return
|
|
}
|
|
callback()
|
|
}, trigger: 'blur'
|
|
},
|
|
],
|
|
categoryIds: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
const formData = this.form1.data || {}
|
|
if (this.isCategoryFilterMode(formData) && (!Array.isArray(value) || value.length === 0)) {
|
|
callback(new Error('请选择分类'))
|
|
return
|
|
}
|
|
callback()
|
|
}, trigger: 'blur'
|
|
}
|
|
],
|
|
regionSelector: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
const formData = this.form1.data || {}
|
|
if (this.isCategoryFilterMode(formData) && (!Array.isArray(value) || value.length === 0)) {
|
|
callback(new Error('请选择区域'))
|
|
return
|
|
}
|
|
callback()
|
|
}, trigger: 'blur'
|
|
}
|
|
],
|
|
spotGoodsId: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
const formData = this.form1.data || {}
|
|
if (this.isSpotGoodsAd(formData.adKey) && !value) {
|
|
callback(new Error('请选择指定现货'))
|
|
return
|
|
}
|
|
callback()
|
|
}, trigger: 'blur'
|
|
},
|
|
],
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "",
|
|
// 是否显示表单的弹窗
|
|
show: false
|
|
}
|
|
},
|
|
// 其他弹窗表单
|
|
formDatas: {},
|
|
// 表单相关结束 -----------------------------------------------------------
|
|
};
|
|
},
|
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
|
onLoad(options = {}) {
|
|
that = this;
|
|
vk = that.vk;
|
|
that.options = options;
|
|
that.init(options);
|
|
},
|
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
|
onReady() {
|
|
},
|
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
|
onShow() {
|
|
},
|
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
|
onHide() {
|
|
},
|
|
// 函数
|
|
methods: {
|
|
isSpotGoodsAd(adKey) {
|
|
const spotGoodsAdKeys = [36, 37, 38];
|
|
return spotGoodsAdKeys.includes(parseInt(adKey));
|
|
},
|
|
supportsCategoryFilterAd(adKey) {
|
|
const categoryFilterAdKeys = [9, 10, 11, 12, 13, 14, 112, 122];
|
|
return categoryFilterAdKeys.includes(parseInt(adKey));
|
|
},
|
|
isCategoryFilterMode(formData = {}) {
|
|
return this.supportsCategoryFilterAd(formData.adKey) && formData.filterMode === 'category';
|
|
},
|
|
isFlexibleRegionAd(adKey) {
|
|
const flexibleRegionAdKeys = [9, 10, 11, 112, 12, 122, 13, 14];
|
|
return flexibleRegionAdKeys.includes(parseInt(adKey));
|
|
},
|
|
getCategoryOptions(adKey) {
|
|
const targetAdKey = parseInt(adKey);
|
|
if (![9, 10].includes(targetAdKey)) {
|
|
if ([11, 112].includes(targetAdKey)) return this.getSpotCategoryOptions();
|
|
if ([12, 13, 14, 122].includes(targetAdKey)) return this.getProcessCategoryOptions();
|
|
return [];
|
|
}
|
|
return this.getSpotCategoryOptions();
|
|
},
|
|
getSpotCategoryOptions() {
|
|
return (this.data.spotCategoryOptions || []).map(item => ({
|
|
value: item._id,
|
|
label: `${item.parentName ? `${item.parentName} / ` : ''}${item.name}`,
|
|
rawName: item.name
|
|
}));
|
|
},
|
|
getProcessCategoryOptions() {
|
|
return (this.data.processCategoryOptions || []).map(item => ({
|
|
value: item._id,
|
|
label: item.name,
|
|
rawName: item.name
|
|
}));
|
|
},
|
|
getFlexibleRegionOptions() {
|
|
return vk.addressUtil.getPcaCode();
|
|
},
|
|
getRegionSelectorFromRegion(region) {
|
|
const selector = [];
|
|
if (region && region.province && region.province.code) {
|
|
selector.push(region.province.code);
|
|
if (region.city && region.city.code) {
|
|
selector.push(region.city.code);
|
|
if (region.area && region.area.code) {
|
|
selector.push(region.area.code);
|
|
}
|
|
}
|
|
}
|
|
return selector;
|
|
},
|
|
getProvinceSelectorFromRegion(region) {
|
|
if (region && region.province && region.province.code) {
|
|
return vk.pubfn.copyObject(region.province);
|
|
}
|
|
return {};
|
|
},
|
|
buildFlexibleRegion(selector = []) {
|
|
if (!Array.isArray(selector) || selector.length === 0) return {};
|
|
const options = this.getFlexibleRegionOptions();
|
|
const [provinceCode, cityCode, areaCode] = selector;
|
|
const province = options.find(item => item.code === provinceCode);
|
|
if (!province) return {};
|
|
const region = {
|
|
province: {
|
|
code: province.code,
|
|
name: province.name
|
|
}
|
|
};
|
|
if (cityCode && Array.isArray(province.children)) {
|
|
const city = province.children.find(item => item.code === cityCode);
|
|
if (city) {
|
|
region.city = {
|
|
code: city.code,
|
|
name: city.name
|
|
};
|
|
if (areaCode && Array.isArray(city.children)) {
|
|
const area = city.children.find(item => item.code === areaCode);
|
|
if (area) {
|
|
region.area = {
|
|
code: area.code,
|
|
name: area.name
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return region;
|
|
},
|
|
buildProvinceRegion(province) {
|
|
if (province && province.code) {
|
|
return {
|
|
province: vk.pubfn.copyObject(province)
|
|
};
|
|
}
|
|
return {};
|
|
},
|
|
getSubmitCategory(formData = {}) {
|
|
if (!this.isCategoryFilterMode(formData)) {
|
|
return {
|
|
categoryIds: [],
|
|
categoryNames: []
|
|
};
|
|
}
|
|
const options = this.getCategoryOptions(formData.adKey);
|
|
const categoryIds = Array.isArray(formData.categoryIds)
|
|
? formData.categoryIds.filter(item => item !== '' && item !== null && item !== undefined)
|
|
: (vk.pubfn.isNotNull(formData.categoryId) ? [formData.categoryId] : []);
|
|
const categoryNames = Array.isArray(formData.categoryNames)
|
|
? formData.categoryNames.filter(item => item !== '' && item !== null && item !== undefined)
|
|
: (vk.pubfn.isNotNull(formData.categoryName) ? [formData.categoryName] : []);
|
|
const targetNames = categoryIds.map(categoryId => {
|
|
const target = options.find(item => item.value === categoryId);
|
|
return target ? (target.rawName || target.label) : '';
|
|
}).filter(Boolean);
|
|
return {
|
|
categoryIds,
|
|
categoryNames: targetNames.length ? targetNames : categoryNames
|
|
};
|
|
},
|
|
getSubmitRegion(formData = {}) {
|
|
if (this.isSpotGoodsAd(formData.adKey)) {
|
|
return formData.region;
|
|
}
|
|
if (this.isCategoryFilterMode(formData)) {
|
|
if (this.isFlexibleRegionAd(formData.adKey)) {
|
|
return this.buildFlexibleRegion(formData.regionSelector);
|
|
}
|
|
return this.buildProvinceRegion(formData.regionProvinceSelector);
|
|
}
|
|
if (this.isFlexibleRegionAd(formData.adKey)) {
|
|
return this.buildFlexibleRegion(formData.regionSelector);
|
|
}
|
|
return this.buildProvinceRegion(formData.regionProvinceSelector);
|
|
},
|
|
normalizeFormData(item = {}) {
|
|
const formData = vk.pubfn.copyObject(item);
|
|
if (!formData.filterMode) formData.filterMode = 'region';
|
|
formData.regionSelector = this.getRegionSelectorFromRegion(formData.region);
|
|
formData.regionProvinceSelector = this.getProvinceSelectorFromRegion(formData.region);
|
|
formData.categoryIds = Array.isArray(formData.categoryIds)
|
|
? formData.categoryIds
|
|
: (vk.pubfn.isNotNull(formData.categoryId) ? [formData.categoryId] : []);
|
|
formData.categoryNames = Array.isArray(formData.categoryNames)
|
|
? formData.categoryNames
|
|
: (vk.pubfn.isNotNull(formData.categoryName) ? [formData.categoryName] : []);
|
|
return formData;
|
|
},
|
|
// 页面数据初始化函数
|
|
init(options) {
|
|
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
|
this.loadCategoryOptions();
|
|
},
|
|
async loadCategoryOptions() {
|
|
const [{rows: spotRows}, {rows: processRows}] = await Promise.all([
|
|
vk.callFunction({
|
|
url: 'client/spot/category/pub/getTree',
|
|
title: '请求中...'
|
|
}),
|
|
vk.callFunction({
|
|
url: 'client/process/category/pub/getTree',
|
|
title: '请求中...'
|
|
}),
|
|
]);
|
|
|
|
this.data.spotCategoryOptions = [];
|
|
(spotRows || []).forEach(parent => {
|
|
(parent.children || []).forEach(child => {
|
|
this.data.spotCategoryOptions.push({
|
|
...child,
|
|
parentName: parent.name
|
|
});
|
|
});
|
|
});
|
|
this.data.processCategoryOptions = processRows || [];
|
|
},
|
|
// 页面跳转
|
|
pageTo(path) {
|
|
vk.navigateTo(path);
|
|
},
|
|
// 表单重置
|
|
resetForm() {
|
|
vk.pubfn.resetForm(originalForms, that);
|
|
},
|
|
// 搜索
|
|
search() {
|
|
that.$refs.table1.search();
|
|
},
|
|
// 刷新
|
|
refresh() {
|
|
that.$refs.table1.refresh();
|
|
},
|
|
// 获取当前选中的行的数据
|
|
getCurrentRow() {
|
|
return that.$refs.table1.getCurrentRow();
|
|
},
|
|
// 监听 - 行的选中高亮事件
|
|
currentChange(val) {
|
|
that.table1.selectItem = val;
|
|
},
|
|
// 当选择项发生变化时会触发该事件
|
|
selectionChange(list) {
|
|
that.table1.multipleSelection = list;
|
|
},
|
|
// 显示添加页面
|
|
addBtn() {
|
|
that.resetForm();
|
|
that.form1.data = that.normalizeFormData(that.form1.data);
|
|
that.form1.props.action = 'admin/ad/sys/add';
|
|
that.form1.props.formType = 'add';
|
|
that.form1.props.title = '添加';
|
|
that.form1.props.show = true;
|
|
},
|
|
// 显示修改页面
|
|
updateBtn({
|
|
item
|
|
}) {
|
|
that.form1.props.action = 'admin/ad/sys/update';
|
|
that.form1.props.formType = 'update';
|
|
that.form1.props.title = '编辑';
|
|
that.form1.props.show = true;
|
|
that.form1.data = that.normalizeFormData(item);
|
|
},
|
|
// 删除按钮
|
|
deleteBtn({
|
|
item,
|
|
deleteFn
|
|
}) {
|
|
deleteFn({
|
|
action: "admin/ad/sys/delete",
|
|
data: {
|
|
_id: item._id
|
|
},
|
|
});
|
|
},
|
|
// 监听 - 批量操作的按钮点击事件
|
|
batchBtn(index) {
|
|
switch (index) {
|
|
case 1:
|
|
vk.toast("批量操作按钮1");
|
|
break;
|
|
case 2:
|
|
vk.toast("批量操作按钮2");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
// 监听属性
|
|
watch: {},
|
|
// 过滤器
|
|
filters: {},
|
|
// 计算属性
|
|
computed: {}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-body {
|
|
}
|
|
</style>
|