|
@@ -0,0 +1,396 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false" class="bannerSetting-wrap">
|
|
|
+ <div class="add">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ v-if="$hasPermissions('B_bannerSet_add')"
|
|
|
+ icon="plus"
|
|
|
+ class="addBtn"
|
|
|
+ @click="showModal"
|
|
|
+ id="bannerSetting-showModal">新增</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- table列表 -->
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="row => row.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="sort" slot-scope="text, record, index">
|
|
|
+ <div v-if="$hasPermissions('B_bannerSet_sort')">
|
|
|
+ <a-icon
|
|
|
+ title="下移"
|
|
|
+ v-if="index != list.length-1"
|
|
|
+ :style="{ fontSize: '18px', color: '#e29b29', cursor: 'pointer',padding:'0 10px' }"
|
|
|
+ @click="changeSort(index,record,0)"
|
|
|
+ type="arrow-down" />
|
|
|
+ <a-icon
|
|
|
+ title="上移"
|
|
|
+ v-if="index != 0"
|
|
|
+ :style="{ fontSize: '18px', color: '#e29b29',cursor: 'pointer', padding:'0 10px' }"
|
|
|
+ @click="changeSort(index,record,1)"
|
|
|
+ type="arrow-up" />
|
|
|
+ </div>
|
|
|
+ <div v-else>--</div>
|
|
|
+ </template>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a-icon
|
|
|
+ type="eye"
|
|
|
+ id="bannerSetting-handleView"
|
|
|
+ title="查看"
|
|
|
+ v-if="$hasPermissions('B_bannerSet_detail')"
|
|
|
+ class="actionBtn icon-green"
|
|
|
+ @click="handleEdit(record, 1)" />
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ id="bannerSetting-handleEdit"
|
|
|
+ v-if="record.status == 0 && $hasPermissions('B_bannerSet_edit')"
|
|
|
+ title="编辑"
|
|
|
+ class="actionBtn icon-blues"
|
|
|
+ @click="handleEdit(record, 0)" />
|
|
|
+ <a-icon
|
|
|
+ type="delete"
|
|
|
+ id="bannerSetting-delect"
|
|
|
+ title="删除"
|
|
|
+ v-if="record.status == 0 && $hasPermissions('B_bannerSet_del')"
|
|
|
+ class="actionBtn icon-red"
|
|
|
+ @click="delect(record)" />
|
|
|
+ <span v-if="!$hasPermissions('B_bannerSet_detail') && !(record.status == 0 && $hasPermissions('B_bannerSet_edit')) &&!(record.status == 0 &&$hasPermissions('B_bannerSet_del')) ">--</span>
|
|
|
+ </span>
|
|
|
+ <span slot="status" slot-scope="text, record">
|
|
|
+ <a-switch
|
|
|
+ checkedChildren="启用"
|
|
|
+ unCheckedChildren="禁用"
|
|
|
+ v-if="$hasPermissions('B_bannerSet_enable')"
|
|
|
+ id="bannerSetting-changeFlagHandle"
|
|
|
+ v-model="record.status == 1 ? true : false"
|
|
|
+ @change="changeFlagHandle(text, record)"
|
|
|
+ />
|
|
|
+ <span v-if="!$hasPermissions('B_bannerSet_enable')">{{ record.status== true ? '启用' : '禁用' }}</span>
|
|
|
+ </span>
|
|
|
+ </s-table>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <a-modal
|
|
|
+ :title="title"
|
|
|
+ :visible="visible"
|
|
|
+ :footer="null"
|
|
|
+ :closable="closable"
|
|
|
+ :centered="true"
|
|
|
+ @cancel="close"
|
|
|
+ width="45%">
|
|
|
+ <a-form
|
|
|
+ class="bannerSetting-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">
|
|
|
+ <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">
|
|
|
+ <div v-if="title != '查看详情'">
|
|
|
+ <Upload
|
|
|
+ class="upload"
|
|
|
+ id="bannerSetting-photoPath"
|
|
|
+ v-decorator="[ 'formData.image', { initialValue: formData.image, rules: [{ required: true, message: '请上传轮播图!' }] } ]"
|
|
|
+ ref="bannerImage"
|
|
|
+ :fileSize="0.25"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="getbannerImage"
|
|
|
+ listType="picture-card" ></Upload>
|
|
|
+ <span class="upload-desc">请上传375*100px尺寸的图片。</span>
|
|
|
+ </div>
|
|
|
+ <img v-else :src="formData.image" style="max-width:400px ;height: auto;" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="备注" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-input
|
|
|
+ id="bannerSetting-remarks"
|
|
|
+ :maxLength="500"
|
|
|
+ v-decorator="['formData.remarks', { initialValue: formData.remarks }]"
|
|
|
+ :disabled="disabled"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入备注(最多500个字符)"
|
|
|
+ allowClear
|
|
|
+ />
|
|
|
+ </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 { getbanerList, updateBannerStatus, delecBanner, savBanner, changeSort } from '@/api/recoveryManage.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ STable,
|
|
|
+ Upload,
|
|
|
+ VSelect
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ showJumpUrl: true,
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ width: 60,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ width: 150,
|
|
|
+ dataIndex: 'title',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'status'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '排序',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'sort',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'sort'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ width: 150,
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'action'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ return getbanerList(parameter).then(res => {
|
|
|
+ console.log(res, '------------banner')
|
|
|
+ const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
+ for (let i = 0; i < res.data.list.length; i++) {
|
|
|
+ const _item = res.data.list[i]
|
|
|
+ _item.no = no + i + 1
|
|
|
+ }
|
|
|
+ this.list = res.data.list
|
|
|
+ return res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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: '', // 标题
|
|
|
+ status: '', // 状态
|
|
|
+ image: '', // banner地址
|
|
|
+ createDate: '', // 创建时间
|
|
|
+ remarks: '' // 备注
|
|
|
+ },
|
|
|
+ disabled: false,
|
|
|
+ value: '',
|
|
|
+ id: '',
|
|
|
+ isShow: true,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate () {
|
|
|
+ this.form = this.$form.createForm(this, {
|
|
|
+ name: 'validate_other'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ jumpTypeChange (val) {
|
|
|
+ this.showJumpUrl = val != 'NONE'
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ const formData = Object.assign({}, this.formData, values.formData, { appType: 'cust' })
|
|
|
+ console.log(formData)
|
|
|
+ savBanner(formData).then(res => {
|
|
|
+ console.log(res, 'rrrrrrrrr')
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ _this.$refs.table.refresh(true)
|
|
|
+ _this.close()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.visible = false
|
|
|
+ this.formData.title = ''
|
|
|
+ this.formData.status = ''
|
|
|
+ this.formData.image = ''
|
|
|
+ this.formData.remarks = '' // 备注
|
|
|
+ this.title = '新增'
|
|
|
+ if (this.$refs.bannerImage) {
|
|
|
+ this.$refs.bannerImage.setFileList('')
|
|
|
+ }
|
|
|
+ this.form.resetFields()
|
|
|
+ },
|
|
|
+ // 赋值
|
|
|
+ assignment (row) {
|
|
|
+ this.formData.id = row.id
|
|
|
+ this.formData.title = row.title
|
|
|
+ this.formData.image = row.image
|
|
|
+ this.formData.status = row.status
|
|
|
+ this.formData.remarks = row.remarks
|
|
|
+ this.formData.createDate = row.createDate
|
|
|
+ // this.jumpTypeChange(this.formData.jumpType)
|
|
|
+ },
|
|
|
+ // 0 修改,1 查看详情
|
|
|
+ handleEdit (row, type) {
|
|
|
+ const _this = this
|
|
|
+ if (type == 1) {
|
|
|
+ this.title = '查看详情'
|
|
|
+ this.hideRequiredMark = true
|
|
|
+ } else if (type == 0) {
|
|
|
+ this.title = '编辑'
|
|
|
+ this.hideRequiredMark = false
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.$refs.bannerImage.setFileList(this.formData.image)
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ this.assignment(row)
|
|
|
+ this.disabled = type == 1
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ delect (row) {
|
|
|
+ const _this = this
|
|
|
+ this.$confirm({
|
|
|
+ title: '警告',
|
|
|
+ centered: true,
|
|
|
+ content: '删除后无法恢复,确认删除?',
|
|
|
+ okText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk () {
|
|
|
+ delecBanner({
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ updateBannerStatus(_data).then(res => {
|
|
|
+ if (res.status == '200') {
|
|
|
+ this.$message.success(res.message)
|
|
|
+ this.$refs.table.refresh()
|
|
|
+ } else {
|
|
|
+ record.status = !record.status
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 上移 下移 排序 index:下标 item:数据 type:类型 0 下移 1 上移
|
|
|
+ changeSort (index, item, type) {
|
|
|
+ console.log(index, item, type, this.list)
|
|
|
+ const indexThat = type === 0 ? index + 1 : index - 1
|
|
|
+ const params = {
|
|
|
+ id: item.id,
|
|
|
+ sortId: this.list[indexThat].id
|
|
|
+ }
|
|
|
+ changeSort(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$refs.table.refresh()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .bannerSetting-wrap{
|
|
|
+ .addBtn {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bannerSetting-form{
|
|
|
+ .upload{
|
|
|
+ width: 100%!important;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ /* 商品图片描述 */
|
|
|
+ .upload-desc{
|
|
|
+ display: block;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #808695;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|