123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386 |
- <template>
- <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'
- 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',
- 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;
- }
- </style>
|