|
@@ -1,5 +1,19 @@
|
|
<template>
|
|
<template>
|
|
<a-card :bordered="false">
|
|
<a-card :bordered="false">
|
|
|
|
+ <!-- 搜索框 -->
|
|
|
|
+ <div class="table-page-search-wrapper" style="margin-bottom: 15px;">
|
|
|
|
+ <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
|
|
|
|
+ <a-row :gutter="48" >
|
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
|
+ <a-form-item label="商品分类名称"><a-input allowClear v-model.trim="searchData.queryWord" :maxLength="30" placeholder="请输入" id="OperateJournal-queryWord"/></a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
|
+ <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="OperateJournal-refreshTable">查询</a-button>
|
|
|
|
+ <a-button type="" @click="resetForm" id="OperateJournal-resetForm">重置</a-button>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form>
|
|
|
|
+ </div>
|
|
<div class="add"><a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="bannerSetting-showModal">新增</a-button></div>
|
|
<div class="add"><a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="bannerSetting-showModal">新增</a-button></div>
|
|
<v-select ref="position" style="display: none;" code="ADVERT_POSITION"></v-select>
|
|
<v-select ref="position" style="display: none;" code="ADVERT_POSITION"></v-select>
|
|
<!-- table列表 -->
|
|
<!-- table列表 -->
|
|
@@ -45,115 +59,28 @@
|
|
/>
|
|
/>
|
|
</span>
|
|
</span>
|
|
</s-table>
|
|
</s-table>
|
|
- <!-- 弹窗 -->
|
|
|
|
- <a-modal
|
|
|
|
- :title="title"
|
|
|
|
- :visible="visible"
|
|
|
|
- :footer="null"
|
|
|
|
- :closable="closable"
|
|
|
|
- :centered="true"
|
|
|
|
- @cancel="close"
|
|
|
|
- width="45%">
|
|
|
|
- <a-form
|
|
|
|
- id="components-form-demo-validate-other"
|
|
|
|
- :form="form"
|
|
|
|
- ref="form"
|
|
|
|
- v-bind="formItemLayout"
|
|
|
|
- @submit="handleSubmit"
|
|
|
|
- :hideRequiredMark="hideRequiredMark">
|
|
|
|
- <a-form-item label="名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
- <a-input
|
|
|
|
- id="bannerSetting-title"
|
|
|
|
- :maxLength="30"
|
|
|
|
- v-decorator="['formData.title', { initialValue: formData.title,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入轮播图名称(最多30个字符)!' }] }]"
|
|
|
|
- :disabled="disabled"
|
|
|
|
- placeholder="请输入轮播图名称(最多30个字符)"
|
|
|
|
- allowClear
|
|
|
|
- />
|
|
|
|
- </a-form-item>
|
|
|
|
- <a-form-item label="广告图位置" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
- <v-select
|
|
|
|
- ref="position"
|
|
|
|
- code="ADVERT_POSITION"
|
|
|
|
- allowClear
|
|
|
|
- id="bannerSetting-position"
|
|
|
|
- placeholder="请选择广告图位置"
|
|
|
|
- :disabled="disabled"
|
|
|
|
- v-decorator="['formData.position', { initialValue: formData.position, rules: [{ required: true, message: '请选择广告图位置!' }] }]"
|
|
|
|
- ></v-select>
|
|
|
|
- </a-form-item>
|
|
|
|
- <a-form-item label="跳转链接" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
- <a-textarea
|
|
|
|
- :maxLength="300"
|
|
|
|
- v-decorator="['formData.url', { initialValue: formData.url, rules: [{ required: false, message: '请输入跳转链接(最多300字符)!' }] }]"
|
|
|
|
- :disabled="disabled"
|
|
|
|
- id="bannerSetting-url"
|
|
|
|
- placeholder="请输入跳转链接(最多300字符)"
|
|
|
|
- allowClear
|
|
|
|
- />
|
|
|
|
- </a-form-item>
|
|
|
|
- <a-form-item label="排序" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
- <a-input
|
|
|
|
- type="number"
|
|
|
|
- oninput="if(value.length>6)value=value.slice(0,6);if(value<0)value=0"
|
|
|
|
- v-decorator="['formData.sort', { initialValue: formData.sort,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入(0~999999)之间的序号值!' }] }]"
|
|
|
|
- :disabled="disabled"
|
|
|
|
- id="bannerSetting-sort"
|
|
|
|
- placeholder="请输入(0~999999)之间的序号值"
|
|
|
|
- allowClear
|
|
|
|
- />
|
|
|
|
- </a-form-item>
|
|
|
|
- <a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
- <a-radio-group
|
|
|
|
- :disabled="disabled"
|
|
|
|
- id="bannerSetting-status"
|
|
|
|
- v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择状态!' }] }]"
|
|
|
|
- >
|
|
|
|
- <a-radio value="1">启用</a-radio>
|
|
|
|
- <a-radio value="0">禁用</a-radio>
|
|
|
|
- </a-radio-group>
|
|
|
|
- </a-form-item>
|
|
|
|
- <a-form-item label="上传图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
- <Upload
|
|
|
|
- v-if="title != '查看详情'"
|
|
|
|
- id="bannerSetting-photoPath"
|
|
|
|
- v-decorator="[
|
|
|
|
- 'formData.photoPath',
|
|
|
|
- {
|
|
|
|
- initialValue: formData.photoPath,
|
|
|
|
- rules: [{ required: true, message: '请上传轮播图!' }]
|
|
|
|
- }
|
|
|
|
- ]"
|
|
|
|
- ref="bannerImage"
|
|
|
|
- :fileSize="0.25"
|
|
|
|
- :disabled="disabled"
|
|
|
|
- @change="getbannerImage"
|
|
|
|
- listType="picture-card"
|
|
|
|
- upText="上传"
|
|
|
|
- ></Upload>
|
|
|
|
- <img v-else :src="formData.photoPath" style="width:100px ;height: auto;" />
|
|
|
|
- </a-form-item>
|
|
|
|
- <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
|
|
|
|
- <a-button type="primary" html-type="submit" v-if="!disabled" id="bannerSetting-submit" style="margin-right: 15px">保存</a-button>
|
|
|
|
- <a-button @click="close()" v-if="!disabled" style="margin-left: 15px" id="bannerSetting-close">取消</a-button>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-form>
|
|
|
|
- </a-modal>
|
|
|
|
|
|
+ <add-goodsClass-modal :itemData="itemData" :openGoodClassModal="openGoodClassModal" @close="openGoodClassModal=false"></add-goodsClass-modal>
|
|
</a-card>
|
|
</a-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { Upload, STable, VSelect } from '@/components'
|
|
import { Upload, STable, VSelect } from '@/components'
|
|
-import { getBannerSettingList, changeStatus, deleteItem, saveItem } from '@/api/bannerSetting.js'
|
|
|
|
|
|
+import addGoodsClassModal from './addGoodsClassModal.vue'
|
|
|
|
+// import Editor from '@/components/WEeditor'
|
|
|
|
+// import { getBannerSettingList, changeStatus, deleteItem, saveItem } from '@/api/bannerSetting.js'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
STable,
|
|
STable,
|
|
Upload,
|
|
Upload,
|
|
- VSelect
|
|
|
|
|
|
+ VSelect,
|
|
|
|
+ addGoodsClassModal
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ searchData: { queryWord: '' },
|
|
|
|
+ openGoodClassModal: false, // 默认关闭弹窗
|
|
|
|
+ itemData: {}, // 编辑行数据
|
|
// 表头
|
|
// 表头
|
|
columns: [
|
|
columns: [
|
|
{
|
|
{
|
|
@@ -163,35 +90,17 @@ export default {
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '广告图位置',
|
|
|
|
- width: 200,
|
|
|
|
- dataIndex: 'position',
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: {
|
|
|
|
- customRender: 'position'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '名称',
|
|
|
|
|
|
+ title: '商品分类名称',
|
|
width: 100,
|
|
width: 100,
|
|
dataIndex: 'title',
|
|
dataIndex: 'title',
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '排序',
|
|
|
|
|
|
+ title: '订单起购金额',
|
|
width: 100,
|
|
width: 100,
|
|
dataIndex: 'sort',
|
|
dataIndex: 'sort',
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- title: '跳转链接',
|
|
|
|
- width: 100,
|
|
|
|
- dataIndex: 'url',
|
|
|
|
- align: 'center',
|
|
|
|
- customRender: (text) => {
|
|
|
|
- return text || '--'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
{
|
|
{
|
|
title: '状态',
|
|
title: '状态',
|
|
width: 100,
|
|
width: 100,
|
|
@@ -201,10 +110,19 @@ export default {
|
|
customRender: 'status'
|
|
customRender: 'status'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ {
|
|
|
|
+ title: '备注',
|
|
|
|
+ width: 100,
|
|
|
|
+ dataIndex: 'url',
|
|
|
|
+ align: 'center',
|
|
|
|
+ customRender: (text) => {
|
|
|
|
+ return text || '--'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
{
|
|
{
|
|
title: '操作',
|
|
title: '操作',
|
|
align: 'center',
|
|
align: 'center',
|
|
- width: 200,
|
|
|
|
|
|
+ width: 100,
|
|
scopedSlots: {
|
|
scopedSlots: {
|
|
customRender: 'action'
|
|
customRender: 'action'
|
|
}
|
|
}
|
|
@@ -212,25 +130,24 @@ export default {
|
|
],
|
|
],
|
|
// 加载数据方法 必须为 Promise 对象
|
|
// 加载数据方法 必须为 Promise 对象
|
|
loadData: parameter => {
|
|
loadData: parameter => {
|
|
- return getBannerSettingList({
|
|
|
|
- bannerType: 'app'
|
|
|
|
- }).then(res => {
|
|
|
|
- // console.log(res, '1111')
|
|
|
|
- const no = 0
|
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
|
- const _item = res.data[i]
|
|
|
|
- _item.no = no + i + 1
|
|
|
|
- }
|
|
|
|
- return res.data
|
|
|
|
- })
|
|
|
|
|
|
+ // return getBannerSettingList({
|
|
|
|
+ // bannerType: 'app'
|
|
|
|
+ // }).then(res => {
|
|
|
|
+ // // console.log(res, '1111')
|
|
|
|
+ // const no = 0
|
|
|
|
+ // for (let i = 0; i < res.data.length; i++) {
|
|
|
|
+ // const _item = res.data[i]
|
|
|
|
+ // _item.no = no + i + 1
|
|
|
|
+ // }
|
|
|
|
+ // return res.data
|
|
|
|
+ // })
|
|
},
|
|
},
|
|
-
|
|
|
|
title: '编辑',
|
|
title: '编辑',
|
|
closable: true,
|
|
closable: true,
|
|
visible: false,
|
|
visible: false,
|
|
confirmLoading: false,
|
|
confirmLoading: false,
|
|
formLayout: 'horizontal',
|
|
formLayout: 'horizontal',
|
|
- hideRequiredMark: false, // 是否显示必填的* 默认显示
|
|
|
|
|
|
+ // hideRequiredMark: false, // 是否显示必填的* 默认显示
|
|
form: this.$form.createForm(this),
|
|
form: this.$form.createForm(this),
|
|
formItemLayout: {
|
|
formItemLayout: {
|
|
labelCol: {
|
|
labelCol: {
|
|
@@ -263,38 +180,43 @@ export default {
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
showModal () {
|
|
showModal () {
|
|
- this.disabled = false
|
|
|
|
- delete this.formData.id
|
|
|
|
- delete this.formData.createDate
|
|
|
|
- this.visible = true
|
|
|
|
|
|
+ // this.disabled = false
|
|
|
|
+ // delete this.formData.id
|
|
|
|
+ // delete this.formData.createDate
|
|
|
|
+ // this.visible = true
|
|
|
|
+ this.openGoodClassModal = true
|
|
this.title = '新增'
|
|
this.title = '新增'
|
|
- this.hideRequiredMark = false
|
|
|
|
|
|
+ // this.hideRequiredMark = false
|
|
},
|
|
},
|
|
// 轮播图change
|
|
// 轮播图change
|
|
getbannerImage (data) {
|
|
getbannerImage (data) {
|
|
this.formData.photoPath = data
|
|
this.formData.photoPath = data
|
|
},
|
|
},
|
|
|
|
+ // 重置
|
|
|
|
+ resetForm () {
|
|
|
|
+ this.searchData.queryWord = ''
|
|
|
|
+ },
|
|
// 点击保存;
|
|
// 点击保存;
|
|
handleSubmit (e) {
|
|
handleSubmit (e) {
|
|
- e.preventDefault()
|
|
|
|
- const _this = this
|
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
|
- if (!err) {
|
|
|
|
- console.log('Received values of form: ', values, this.formData)
|
|
|
|
- const formData = Object.assign({}, this.formData, values.formData, {
|
|
|
|
- bannerType: 'app'
|
|
|
|
- })
|
|
|
|
- console.log(formData, _this.radioGroup)
|
|
|
|
- saveItem(formData, _this.radioGroup).then(res => {
|
|
|
|
- console.log(res, 'rrrrrrrrr')
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- _this.$message.success(res.message)
|
|
|
|
- _this.$refs.table.refresh()
|
|
|
|
- _this.close()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ // e.preventDefault()
|
|
|
|
+ // const _this = this
|
|
|
|
+ // this.form.validateFields((err, values) => {
|
|
|
|
+ // if (!err) {
|
|
|
|
+ // console.log('Received values of form: ', values, this.formData)
|
|
|
|
+ // const formData = Object.assign({}, this.formData, values.formData, {
|
|
|
|
+ // bannerType: 'app'
|
|
|
|
+ // })
|
|
|
|
+ // console.log(formData, _this.radioGroup)
|
|
|
|
+ // saveItem(formData, _this.radioGroup).then(res => {
|
|
|
|
+ // console.log(res, 'rrrrrrrrr')
|
|
|
|
+ // if (res.status == 200) {
|
|
|
|
+ // _this.$message.success(res.message)
|
|
|
|
+ // _this.$refs.table.refresh()
|
|
|
|
+ // _this.close()
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
},
|
|
},
|
|
close () {
|
|
close () {
|
|
this.visible = false
|
|
this.visible = false
|
|
@@ -307,8 +229,8 @@ export default {
|
|
this.formData.photoBasePath = ''
|
|
this.formData.photoBasePath = ''
|
|
this.formData.photoPath = ''
|
|
this.formData.photoPath = ''
|
|
this.title = '新增'
|
|
this.title = '新增'
|
|
- this.$refs.bannerImage.setFileList('')
|
|
|
|
- this.form.resetFields()
|
|
|
|
|
|
+ // this.$refs.bannerImage.setFileList('')
|
|
|
|
+ // this.form.resetFields()
|
|
},
|
|
},
|
|
// 赋值
|
|
// 赋值
|
|
assignment (row) {
|
|
assignment (row) {
|
|
@@ -322,23 +244,23 @@ export default {
|
|
this.formData.createDate = row.createDate
|
|
this.formData.createDate = row.createDate
|
|
},
|
|
},
|
|
// 0 修改,1 查看详情
|
|
// 0 修改,1 查看详情
|
|
- handleEdit (row, type) {
|
|
|
|
- const _this = this
|
|
|
|
- console.log(row)
|
|
|
|
- if (type == 1) {
|
|
|
|
- this.title = '查看详情'
|
|
|
|
- this.hideRequiredMark = true
|
|
|
|
- } else if (type == 0) {
|
|
|
|
- this.title = '编辑'
|
|
|
|
- this.hideRequiredMark = false
|
|
|
|
- }
|
|
|
|
- this.assignment(row)
|
|
|
|
- this.disabled = type == 1
|
|
|
|
- this.visible = true
|
|
|
|
- setTimeout(() => {
|
|
|
|
- _this.$refs.bannerImage.setFileList(this.formData.photoPath)
|
|
|
|
- }, 500)
|
|
|
|
- },
|
|
|
|
|
|
+ // handleEdit (row, type) {
|
|
|
|
+ // const _this = this
|
|
|
|
+ // console.log(row)
|
|
|
|
+ // if (type == 1) {
|
|
|
|
+ // this.title = '查看详情'
|
|
|
|
+ // this.hideRequiredMark = true
|
|
|
|
+ // } else if (type == 0) {
|
|
|
|
+ // this.title = '编辑'
|
|
|
|
+ // this.hideRequiredMark = false
|
|
|
|
+ // }
|
|
|
|
+ // this.assignment(row)
|
|
|
|
+ // this.disabled = type == 1
|
|
|
|
+ // this.visible = true
|
|
|
|
+ // setTimeout(() => {
|
|
|
|
+ // _this.$refs.bannerImage.setFileList(this.formData.photoPath)
|
|
|
|
+ // }, 500)
|
|
|
|
+ // },
|
|
// 删除
|
|
// 删除
|
|
delect (row) {
|
|
delect (row) {
|
|
const _this = this
|
|
const _this = this
|
|
@@ -349,37 +271,50 @@ export default {
|
|
okText: '确定',
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
cancelText: '取消',
|
|
onOk () {
|
|
onOk () {
|
|
- deleteItem({
|
|
|
|
- id: row.id
|
|
|
|
- }).then(res => {
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- _this.$message.success(res.message)
|
|
|
|
- _this.$refs.table.refresh()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ // deleteItem({
|
|
|
|
+ // id: row.id
|
|
|
|
+ // }).then(res => {
|
|
|
|
+ // if (res.status == 200) {
|
|
|
|
+ // _this.$message.success(res.message)
|
|
|
|
+ // _this.$refs.table.refresh()
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 更改启用禁用状态
|
|
// 更改启用禁用状态
|
|
changeFlagHandle (text, record) {
|
|
changeFlagHandle (text, record) {
|
|
- const _data = {
|
|
|
|
- id: record.id,
|
|
|
|
- flag: record.status == 1 ? '0' : '1'
|
|
|
|
- }
|
|
|
|
- changeStatus(_data).then(res => {
|
|
|
|
- if (res.status == '200') {
|
|
|
|
- this.$message.success(res.message)
|
|
|
|
- this.$refs.table.refresh()
|
|
|
|
- } else {
|
|
|
|
- record.status = !record.status
|
|
|
|
- }
|
|
|
|
|
|
+ const _this = this
|
|
|
|
+ this.$confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ centered: true,
|
|
|
|
+ content: '商品分类被禁用后,该分类将不在显示给用户,确定禁用吗?',
|
|
|
|
+ okText: '确定',
|
|
|
|
+ cancelText: '取消',
|
|
|
|
+ onOk () {
|
|
|
|
+ const _data = {
|
|
|
|
+ id: record.id,
|
|
|
|
+ flag: record.status == 1 ? '0' : '1'
|
|
|
|
+ }
|
|
|
|
+ changeStatus(_data).then(res => {
|
|
|
|
+ if (res.status == '200') {
|
|
|
|
+ _this.$message.success(res.message)
|
|
|
|
+ _this.$refs.table.refresh()
|
|
|
|
+ } else {
|
|
|
|
+ record.status = !record.status
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
+<style>
|
|
|
|
+ .w-e-toolbar{
|
|
|
|
+ flex-wrap:wrap;
|
|
|
|
+ }
|
|
.addBtn {
|
|
.addBtn {
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|