|
@@ -1,323 +1,386 @@
|
|
|
<template>
|
|
|
- <a-card :bordered="false">
|
|
|
- <div class="add">
|
|
|
- <a-button type="primary" icon="plus" class="addBtn" @click="showModal">新建</a-button>
|
|
|
- </div>
|
|
|
- <v-select ref="position" style="display: none;" code="ADVERT_POSITION"></v-select>
|
|
|
- <!-- table列表 -->
|
|
|
- <s-table ref="table" size="default" :rowKey="(row)=> row.id" :showPagination="false" :columns="columns" :data="loadData"
|
|
|
- bordered>
|
|
|
- <!-- 广告图位置 -->
|
|
|
- <span slot="position" slot-scope="text,record">
|
|
|
- {{ $refs.position.getNameByCode(text) }}
|
|
|
- </span>
|
|
|
- <span slot="action" slot-scope="text, record">
|
|
|
- <template>
|
|
|
- <a-icon type="eye" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleEdit(record, 1)" />
|
|
|
- <a-icon type="edit" v-if="record.status == '0'" style="font-size: 20px;color: #1890FF;padding: 0 10px;" @click="handleEdit(record, 0)" />
|
|
|
- <a-icon type="delete" v-if="record.status == '0'" style="font-size: 20px;color: red;padding: 0 10px;" @click="delect(record)" />
|
|
|
- </template>
|
|
|
- </span>
|
|
|
- <span slot="status" slot-scope="text,record">
|
|
|
- <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model=" record.status==1 ? true : false " @change="changeFlagHandle(text, record)" />
|
|
|
- </span>
|
|
|
- </s-table>
|
|
|
- <!-- 弹窗 -->
|
|
|
- <a-modal :title="title" :visible="visible" :footer="null" :closable="closable" @cancel="close" width="45%">
|
|
|
- <a-form id="components-form-demo-validate-other" :form="form" ref="form" v-bind="formItemLayout" @submit="handleSubmit">
|
|
|
- <a-form-item label="名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
- <a-input :maxLength="32" v-decorator="['formData.title', { initialValue:formData.title,rules: [{ required: true, message: '请输入轮播图名称32个字以内!' }] }]"
|
|
|
- :disabled="disabled" placeholder="请输入轮播图名称32个字以内" />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item required label="广告图位置" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
- <v-select ref="position" code="ADVERT_POSITION" v-model="formData.position" allowClear placeholder="请选择广告图位置"
|
|
|
- :disabled="disabled"></v-select>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="跳转链接" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
- <a-input v-decorator="['formData.url', { initialValue:formData.url,rules: [{ required: false, message: '请填写跳转链接!' }] }]"
|
|
|
- :disabled="disabled" placeholder="请输入跳转链接" />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="排序" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
- <a-input type="number" v-decorator="['formData.sort', { initialValue:formData.sort, rules: [{ required: true, message: '请排序!' }] }]"
|
|
|
- :disabled="disabled" placeholder="请输入序号值" />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
- <a-radio-group :disabled="disabled" 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">
|
|
|
- <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 8px 0;">
|
|
|
- <Upload v-if="title != '查看详情'" v-decorator="[
|
|
|
- 'formData.photo',
|
|
|
- {
|
|
|
- initialValue: formData.photo,
|
|
|
- rules: [{required: true,message: '请上传轮播图!'}]
|
|
|
- }]"
|
|
|
- ref="bannerImage" :fileSize="0.25" :disabled="disabled" @change="getbannerImage" listType="picture-card" upText="上传图片">
|
|
|
- </Upload>
|
|
|
- <img v-else :src="formData.photo" style="width:100px ;height: auto; margin-bottom: 8px;" />
|
|
|
- </div>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item :wrapper-col="{ span: 12, offset: 5 }" style="text-align: center;">
|
|
|
- <a-button type="primary" html-type="submit" v-if="!disabled">
|
|
|
- 保存
|
|
|
- </a-button>
|
|
|
- <a-button @click="close()" style="margin-left: 8px">
|
|
|
- 返回列表
|
|
|
- </a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </a-modal>
|
|
|
- </div>
|
|
|
- </a-card>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <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>
|
|
|
+ <!-- table列表 -->
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="row => row.id"
|
|
|
+ :showPagination="false"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered>
|
|
|
+ <!-- 广告图位置 -->
|
|
|
+ <span slot="position" slot-scope="text">{{ $refs.position.getNameByCode(text) }}</span>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a-icon
|
|
|
+ type="eye"
|
|
|
+ id="bannerSetting-handleView"
|
|
|
+ title="查看"
|
|
|
+ class="actionBtn icon-green"
|
|
|
+ @click="handleEdit(record, 1)" />
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ id="bannerSetting-handleEdit"
|
|
|
+ v-if="record.status == '0'"
|
|
|
+ title="编辑"
|
|
|
+ class="actionBtn icon-blues"
|
|
|
+ @click="handleEdit(record, 0)" />
|
|
|
+ <a-icon
|
|
|
+ type="delete"
|
|
|
+ id="bannerSetting-delect"
|
|
|
+ v-if="record.status == '0'"
|
|
|
+ title="删除"
|
|
|
+ class="actionBtn icon-red"
|
|
|
+ @click="delect(record)" />
|
|
|
+ </span>
|
|
|
+ <span slot="status" slot-scope="text, record">
|
|
|
+ <a-switch
|
|
|
+ checkedChildren="启用"
|
|
|
+ unCheckedChildren="禁用"
|
|
|
+ id="bannerSetting-changeFlagHandle"
|
|
|
+ v-model="record.status == 1 ? true : false"
|
|
|
+ @change="changeFlagHandle(text, record)"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </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>
|
|
|
+ </a-card>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- Upload,
|
|
|
- STable,
|
|
|
- VSelect
|
|
|
- } from '@/components'
|
|
|
- import {
|
|
|
- getBannerSettingList,
|
|
|
- changeStatus,
|
|
|
- deleteItem,
|
|
|
- saveItem
|
|
|
- } from '@/api/bannerSetting.js'
|
|
|
+import { Upload, STable, VSelect } from '@/components'
|
|
|
+import { getBannerSettingList, changeStatus, deleteItem, saveItem } from '@/api/bannerSetting.js'
|
|
|
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- STable,
|
|
|
- Upload,
|
|
|
- VSelect
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 表头
|
|
|
- columns: [{
|
|
|
- title: '序号',
|
|
|
- dataIndex: 'no',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- // dataIndex: 'action',
|
|
|
- minWidth: '100',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'action'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'status',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'status'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '广告图位置',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'position',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'position'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '名称',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'title',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '排序',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'sort',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '跳转链接',
|
|
|
- minWidth: '200',
|
|
|
- dataIndex: 'url',
|
|
|
- align: 'center'
|
|
|
- }
|
|
|
- ],
|
|
|
- // 加载数据方法 必须为 Promise 对象
|
|
|
- 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
|
|
|
- _item.releaseStatus = _item.releaseStatus + '' === 'FB'
|
|
|
- }
|
|
|
- return res.data
|
|
|
- })
|
|
|
- },
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ STable,
|
|
|
+ Upload,
|
|
|
+ VSelect
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ width: 60,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告图位置',
|
|
|
+ width: 200,
|
|
|
+ dataIndex: 'position',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'position'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'title',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '排序',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'sort',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '跳转链接',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'url',
|
|
|
+ align: 'center',
|
|
|
+ customRender: (text) => {
|
|
|
+ return text || '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'status'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ width: 200,
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'action'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- title: '编辑',
|
|
|
- closable: true,
|
|
|
- visible: false,
|
|
|
- confirmLoading: false,
|
|
|
- formLayout: 'horizontal',
|
|
|
- form: this.$form.createForm(this),
|
|
|
- formItemLayout: {
|
|
|
- labelCol: {
|
|
|
- span: 6
|
|
|
- },
|
|
|
- wrapperCol: {
|
|
|
- span: 14
|
|
|
- }
|
|
|
- },
|
|
|
- formData: {
|
|
|
- title: '', // 标题
|
|
|
- photo: '', // banner图片
|
|
|
- url: '', // 图片路径
|
|
|
- status: '', // 状态
|
|
|
- sort: '', // 排序
|
|
|
- position: '' // 广告图位置
|
|
|
- },
|
|
|
- bannerType: 'app',
|
|
|
- disabled: false,
|
|
|
- value: '',
|
|
|
- id: '',
|
|
|
- isShow: true,
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- beforeCreate() {
|
|
|
- this.form = this.$form.createForm(this, {
|
|
|
- name: 'validate_other'
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showModal() {
|
|
|
- this.disabled = false
|
|
|
- delete this.formData.id
|
|
|
- this.visible = true
|
|
|
- this.title = '新增'
|
|
|
- },
|
|
|
- getbannerImage(data) {
|
|
|
- this.formData.photo = data
|
|
|
- },
|
|
|
- // 点击保存;
|
|
|
- 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 ? res.message : '保存成功')
|
|
|
- _this.$refs.table.refresh()
|
|
|
- _this.close()
|
|
|
- } else {
|
|
|
- _this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.visible = false
|
|
|
- this.formData.title = ''
|
|
|
- this.formData.photo = ''
|
|
|
- this.formData.url = ''
|
|
|
- this.formData.status = ''
|
|
|
- this.formData.sort = ''
|
|
|
- this.formData.position = ''
|
|
|
- this.title = '新增'
|
|
|
- this.$refs.bannerImage.setFileList('')
|
|
|
- this.form.resetFields()
|
|
|
- },
|
|
|
- // 赋值
|
|
|
- assignment(row) {
|
|
|
- this.formData.id = row.id
|
|
|
- this.formData.title = row.title
|
|
|
- this.formData.photo = row.photo
|
|
|
- this.formData.url = row.url
|
|
|
- this.formData.status = row.status
|
|
|
- this.formData.sort = row.sort
|
|
|
- this.formData.position = row.position
|
|
|
- },
|
|
|
- // 0 修改,1 查看详情
|
|
|
- handleEdit(row, type) {
|
|
|
- console.log(row)
|
|
|
- const _this = this
|
|
|
- if (type == 1) {
|
|
|
- this.title = '查看详情'
|
|
|
- } else if (type == 0) {
|
|
|
- this.title = '编辑'
|
|
|
- }
|
|
|
- this.assignment(row)
|
|
|
- this.disabled = type == 1
|
|
|
- this.visible = true
|
|
|
- console.log(this.formData.photo)
|
|
|
- setTimeout(() => {
|
|
|
- _this.$refs.bannerImage.setFileList(this.formData.photo)
|
|
|
- }, 500)
|
|
|
- },
|
|
|
- // 删除
|
|
|
- delect(row) {
|
|
|
- const _this = this
|
|
|
- this.$confirm({
|
|
|
- title: '警告',
|
|
|
- content: '删除后无法恢复,确认删除?',
|
|
|
- okText: '确定',
|
|
|
- cancelText: '取消',
|
|
|
- onOk() {
|
|
|
- deleteItem({
|
|
|
- id: row.id
|
|
|
- }).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- _this.$message.success('删除成功')
|
|
|
- _this.$refs.table.refresh()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 更改启用禁用状态
|
|
|
- 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('修改成功')
|
|
|
- this.$refs.table.refresh()
|
|
|
- } else {
|
|
|
- record.status = !record.status
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ title: '编辑',
|
|
|
+ closable: true,
|
|
|
+ visible: false,
|
|
|
+ confirmLoading: false,
|
|
|
+ formLayout: 'horizontal',
|
|
|
+ hideRequiredMark: false, // 是否显示必填的* 默认显示
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: {
|
|
|
+ span: 6
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ span: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ title: '', // 标题
|
|
|
+ url: '', // 图片路径
|
|
|
+ status: '', // 状态
|
|
|
+ sort: '', // 排序
|
|
|
+ position: '', // 广告图位置
|
|
|
+ photoPath: '', // banner地址
|
|
|
+ createDate: ''
|
|
|
+ },
|
|
|
+ bannerType: 'app',
|
|
|
+ disabled: false,
|
|
|
+ value: '',
|
|
|
+ id: '',
|
|
|
+ isShow: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate () {
|
|
|
+ this.form = this.$form.createForm(this, {
|
|
|
+ name: 'validate_other'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showModal () {
|
|
|
+ this.disabled = false
|
|
|
+ delete this.formData.id
|
|
|
+ delete this.formData.createDate
|
|
|
+ this.visible = true
|
|
|
+ this.title = '新增'
|
|
|
+ this.hideRequiredMark = false
|
|
|
+ },
|
|
|
+ // 轮播图change
|
|
|
+ getbannerImage (data) {
|
|
|
+ this.formData.photoPath = data
|
|
|
+ },
|
|
|
+ // 点击保存;
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.visible = false
|
|
|
+ this.formData.title = ''
|
|
|
+ this.photo = ''
|
|
|
+ this.formData.url = ''
|
|
|
+ this.formData.status = ''
|
|
|
+ this.formData.sort = ''
|
|
|
+ this.formData.position = ''
|
|
|
+ this.formData.photoBasePath = ''
|
|
|
+ this.formData.photoPath = ''
|
|
|
+ this.title = '新增'
|
|
|
+ this.$refs.bannerImage.setFileList('')
|
|
|
+ this.form.resetFields()
|
|
|
+ },
|
|
|
+ // 赋值
|
|
|
+ assignment (row) {
|
|
|
+ this.formData.id = row.id
|
|
|
+ this.formData.title = row.title
|
|
|
+ this.formData.photoPath = row.photoPath
|
|
|
+ this.formData.url = row.url
|
|
|
+ this.formData.status = row.status
|
|
|
+ this.formData.sort = row.sort
|
|
|
+ this.formData.position = row.position
|
|
|
+ this.formData.createDate = row.createDate
|
|
|
+ },
|
|
|
+ // 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)
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ delect (row) {
|
|
|
+ const _this = this
|
|
|
+ this.$confirm({
|
|
|
+ title: '警告',
|
|
|
+ centered: true,
|
|
|
+ content: '删除后无法恢复,确认删除?',
|
|
|
+ okText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk () {
|
|
|
+ deleteItem({
|
|
|
+ id: row.id
|
|
|
+ }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ _this.$refs.table.refresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 更改启用禁用状态
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .addBtn {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
+.addBtn {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
</style>
|