bannerSetting.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="add"><a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="bannerSetting-showModal">新增</a-button></div>
  4. <!-- <v-select ref="position" style="display: none;" code="ADVERT_TYPE"></v-select> -->
  5. <v-select ref="jumpType" style="display: none;" code="ADVERT_JUMP_TYPE"></v-select>
  6. <v-select ref="location" style="display: none;" code="ADVERT_LOCATION"></v-select>
  7. <!-- table列表 -->
  8. <s-table
  9. ref="table"
  10. size="default"
  11. :rowKey="row => row.id"
  12. :showPagination="false"
  13. :columns="columns"
  14. :data="loadData"
  15. bordered>
  16. <!-- 广告图位置 -->
  17. <!-- <template slot="position" slot-scope="text">{{ $refs.position.getNameByCode(text) }}</template> -->
  18. <template slot="jumpType" slot-scope="text">{{ $refs.jumpType.getNameByCode(text) }}</template>
  19. <template slot="location" slot-scope="text">{{ $refs.location.getNameByCode(text) }}</template>
  20. <!-- 操作 -->
  21. <template slot="sort" slot-scope="text, record, index">
  22. <a-icon
  23. title="下移"
  24. v-if="index != list.length-1"
  25. :style="{ fontSize: '18px', color: '#e29b29', cursor: 'pointer',padding:'0 10px' }"
  26. @click="changeSort(index,record,0)"
  27. type="arrow-down" />
  28. <a-icon
  29. title="上移"
  30. v-if="index != 0"
  31. :style="{ fontSize: '18px', color: '#e29b29',cursor: 'pointer', padding:'0 10px' }"
  32. @click="changeSort(index,record,1)"
  33. type="arrow-up" />
  34. </template>
  35. <span slot="action" slot-scope="text, record">
  36. <a-icon
  37. type="eye"
  38. id="bannerSetting-handleView"
  39. title="查看"
  40. class="actionBtn icon-green"
  41. @click="handleEdit(record, 1)" />
  42. <a-icon
  43. type="edit"
  44. id="bannerSetting-handleEdit"
  45. v-if="record.state == '0'"
  46. title="编辑"
  47. class="actionBtn icon-blues"
  48. @click="handleEdit(record, 0)" />
  49. <a-icon
  50. type="delete"
  51. id="bannerSetting-delect"
  52. v-if="record.state == '0'"
  53. title="删除"
  54. class="actionBtn icon-red"
  55. @click="delect(record)" />
  56. </span>
  57. <span slot="status" slot-scope="text, record">
  58. <a-switch
  59. checkedChildren="启用"
  60. unCheckedChildren="禁用"
  61. id="bannerSetting-changeFlagHandle"
  62. v-model="record.state == 1 ? true : false"
  63. @change="changeFlagHandle(text, record)"
  64. />
  65. </span>
  66. </s-table>
  67. <!-- 弹窗 -->
  68. <a-modal
  69. :title="title"
  70. :visible="visible"
  71. :footer="null"
  72. :closable="closable"
  73. :centered="true"
  74. @cancel="close"
  75. width="45%">
  76. <a-form
  77. id="components-form-demo-validate-other"
  78. :form="form"
  79. ref="form"
  80. v-bind="formItemLayout"
  81. @submit="handleSubmit"
  82. :hideRequiredMark="hideRequiredMark">
  83. <a-form-item label="名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  84. <a-input
  85. id="bannerSetting-title"
  86. :maxLength="30"
  87. v-decorator="['formData.title', { initialValue: formData.title,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入轮播图名称(最多30个字符)!' }] }]"
  88. :disabled="disabled"
  89. placeholder="请输入轮播图名称(最多30个字符)"
  90. allowClear
  91. />
  92. </a-form-item>
  93. <!-- <a-form-item label="推广位类型" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  94. <v-select
  95. code="ADVERT_TYPE"
  96. allowClear
  97. id="bannerSetting-type"
  98. placeholder="请选择推广位类型"
  99. :disabled="disabled"
  100. v-decorator="['formData.type', { initialValue: formData.type, rules: [{ required: true, message: '请选择推广位类型!' }] }]"
  101. ></v-select>
  102. </a-form-item> -->
  103. <a-form-item label="显示位置" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  104. <v-select
  105. code="ADVERT_LOCATION"
  106. allowClear
  107. id="bannerSetting-location"
  108. placeholder="请选择显示位置"
  109. :disabled="disabled"
  110. v-decorator="['formData.location', { initialValue: formData.location, rules: [{ required: true, message: '请选择显示位置!' }] }]"
  111. ></v-select>
  112. </a-form-item>
  113. <a-form-item label="跳转类型" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  114. <v-select
  115. code="ADVERT_JUMP_TYPE"
  116. allowClear
  117. id="bannerSetting-jumpType"
  118. placeholder="请选择跳转类型"
  119. :disabled="disabled"
  120. @change="jumpTypeChange"
  121. v-decorator="['formData.jumpType', { initialValue: formData.jumpType, rules: [{ required: true, message: '请选择跳转类型!' }] }]"
  122. ></v-select>
  123. </a-form-item>
  124. <a-form-item label="跳转链接" v-if="showJumpUrl" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  125. <a-textarea
  126. :maxLength="300"
  127. v-decorator="['formData.jumpUrl', { initialValue: formData.jumpUrl, rules: [{ required: true, message: '请输入跳转链接(最多300字符)!' }] }]"
  128. :disabled="disabled"
  129. id="bannerSetting-jumpUrl"
  130. placeholder="请输入跳转链接(最多300字符)"
  131. allowClear
  132. />
  133. </a-form-item>
  134. <a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  135. <a-radio-group
  136. :disabled="disabled"
  137. id="bannerSetting-status"
  138. v-decorator="['formData.state', { initialValue: formData.state, rules: [{ required: true, message: '请选择状态!' }] }]"
  139. >
  140. <a-radio value="1">启用</a-radio>
  141. <a-radio value="0">禁用</a-radio>
  142. </a-radio-group>
  143. </a-form-item>
  144. <a-form-item label="上传图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  145. <Upload
  146. v-if="title != '查看详情'"
  147. id="bannerSetting-photoPath"
  148. v-decorator="[
  149. 'formData.image',
  150. {
  151. initialValue: formData.image,
  152. rules: [{ required: true, message: '请上传轮播图!' }]
  153. }
  154. ]"
  155. ref="bannerImage"
  156. :fileSize="0.25"
  157. :disabled="disabled"
  158. @change="getbannerImage"
  159. listType="picture-card"
  160. upText="上传"
  161. ></Upload>
  162. <img v-else :src="formData.image" style="max-width:400px ;height: auto;" />
  163. </a-form-item>
  164. <a-form-item label="备注" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  165. <a-input
  166. id="bannerSetting-remarks"
  167. :maxLength="500"
  168. v-decorator="['formData.remarks', { initialValue: formData.remarks }]"
  169. :disabled="disabled"
  170. type="textarea"
  171. placeholder="请输入备注(最多500个字符)"
  172. allowClear
  173. />
  174. </a-form-item>
  175. <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
  176. <a-button type="primary" html-type="submit" v-if="!disabled" id="bannerSetting-submit" style="margin-right: 15px">保存</a-button>
  177. <a-button @click="close()" v-if="!disabled" style="margin-left: 15px" id="bannerSetting-close">取消</a-button>
  178. </a-form-item>
  179. </a-form>
  180. </a-modal>
  181. </a-card>
  182. </template>
  183. <script>
  184. import { Upload, STable, VSelect } from '@/components'
  185. import { getadvertSettingList, changeStatus, changeSort, deleteItem, saveItem } from '@/api/bannerSetting.js'
  186. export default {
  187. components: {
  188. STable,
  189. Upload,
  190. VSelect
  191. },
  192. data () {
  193. return {
  194. showJumpUrl: true,
  195. // 表头
  196. columns: [
  197. {
  198. title: '序号',
  199. dataIndex: 'no',
  200. width: 60,
  201. align: 'center'
  202. },
  203. {
  204. title: '名称',
  205. width: 150,
  206. dataIndex: 'title',
  207. align: 'center'
  208. },
  209. // {
  210. // title: '推广位类型',
  211. // width: 100,
  212. // dataIndex: 'type',
  213. // align: 'center',
  214. // scopedSlots: {
  215. // customRender: 'position'
  216. // }
  217. // },
  218. {
  219. title: '显示位置',
  220. width: 120,
  221. dataIndex: 'location',
  222. align: 'center',
  223. scopedSlots: {
  224. customRender: 'location'
  225. }
  226. },
  227. {
  228. title: '跳转类型',
  229. width: 100,
  230. dataIndex: 'jumpType',
  231. align: 'center',
  232. scopedSlots: {
  233. customRender: 'jumpType'
  234. }
  235. },
  236. {
  237. title: '跳转链接',
  238. width: 200,
  239. dataIndex: 'jumpUrl',
  240. align: 'center',
  241. customRender: (text) => {
  242. return text || '--'
  243. }
  244. },
  245. {
  246. title: '状态',
  247. width: 100,
  248. dataIndex: 'state',
  249. align: 'center',
  250. scopedSlots: {
  251. customRender: 'status'
  252. }
  253. },
  254. {
  255. title: '排序',
  256. width: 100,
  257. dataIndex: 'sort',
  258. align: 'center',
  259. scopedSlots: {
  260. customRender: 'sort'
  261. }
  262. },
  263. {
  264. title: '操作',
  265. align: 'center',
  266. width: 150,
  267. scopedSlots: {
  268. customRender: 'action'
  269. }
  270. }
  271. ],
  272. // 加载数据方法 必须为 Promise 对象
  273. loadData: parameter => {
  274. return getadvertSettingList(parameter).then(res => {
  275. const no = 0
  276. for (let i = 0; i < res.data.list.length; i++) {
  277. const _item = res.data.list[i]
  278. _item.no = no + i + 1
  279. }
  280. this.list = res.data.list
  281. return res.data
  282. })
  283. },
  284. title: '编辑',
  285. closable: true,
  286. visible: false,
  287. confirmLoading: false,
  288. formLayout: 'horizontal',
  289. hideRequiredMark: false, // 是否显示必填的* 默认显示
  290. form: this.$form.createForm(this),
  291. formItemLayout: {
  292. labelCol: {
  293. span: 6
  294. },
  295. wrapperCol: {
  296. span: 14
  297. }
  298. },
  299. formData: {
  300. title: '', // 标题
  301. state: '', // 状态
  302. type: 'banner', // 广告图类型
  303. location: '', // 显示位置
  304. image: '', // banner地址
  305. createDate: '', // 创建时间
  306. jumpType: '', // 跳转类型
  307. jumpUrl: '', // 跳转路径
  308. remarks: '' // 备注
  309. },
  310. disabled: false,
  311. value: '',
  312. id: '',
  313. isShow: true,
  314. list: []
  315. }
  316. },
  317. beforeCreate () {
  318. this.form = this.$form.createForm(this, {
  319. name: 'validate_other'
  320. })
  321. },
  322. methods: {
  323. jumpTypeChange (val) {
  324. this.showJumpUrl = val != 'NONE'
  325. },
  326. showModal () {
  327. this.disabled = false
  328. delete this.formData.id
  329. delete this.formData.createDate
  330. this.visible = true
  331. this.title = '新增'
  332. this.hideRequiredMark = false
  333. },
  334. // 轮播图change
  335. getbannerImage (data) {
  336. this.formData.photoPath = data
  337. },
  338. // 点击保存;
  339. handleSubmit (e) {
  340. e.preventDefault()
  341. const _this = this
  342. this.form.validateFields((err, values) => {
  343. if (!err) {
  344. const formData = Object.assign({}, this.formData, values.formData)
  345. console.log(formData)
  346. saveItem(formData).then(res => {
  347. console.log(res, 'rrrrrrrrr')
  348. if (res.status == 200) {
  349. _this.$message.success(res.message)
  350. _this.$refs.table.refresh()
  351. _this.close()
  352. }
  353. })
  354. }
  355. })
  356. },
  357. close () {
  358. this.visible = false
  359. this.formData.title = ''
  360. this.formData.jumpUrl = ''
  361. this.formData.state = ''
  362. this.formData.type = ''
  363. this.formData.location = ''
  364. this.formData.image = ''
  365. this.formData.jumpType = '' // 跳转类型
  366. this.formData.remarks = '' // 备注
  367. this.title = '新增'
  368. if (this.$refs.bannerImage) {
  369. this.$refs.bannerImage.setFileList('')
  370. }
  371. this.form.resetFields()
  372. },
  373. // 赋值
  374. assignment (row) {
  375. this.formData.id = row.id
  376. this.formData.title = row.title
  377. this.formData.image = row.image
  378. this.formData.jumpUrl = row.jumpUrl
  379. this.formData.state = row.state
  380. this.formData.type = row.type || 'banner'
  381. this.formData.location = row.location
  382. this.formData.jumpType = row.jumpType
  383. this.formData.remarks = row.remarks
  384. this.formData.createDate = row.createDate
  385. this.jumpTypeChange(this.formData.jumpType)
  386. },
  387. // 0 修改,1 查看详情
  388. handleEdit (row, type) {
  389. const _this = this
  390. if (type == 1) {
  391. this.title = '查看详情'
  392. this.hideRequiredMark = true
  393. } else if (type == 0) {
  394. this.title = '编辑'
  395. this.hideRequiredMark = false
  396. setTimeout(() => {
  397. _this.$refs.bannerImage.setFileList(this.formData.image)
  398. }, 500)
  399. }
  400. this.assignment(row)
  401. this.disabled = type == 1
  402. this.visible = true
  403. },
  404. // 删除
  405. delect (row) {
  406. const _this = this
  407. this.$confirm({
  408. title: '警告',
  409. centered: true,
  410. content: '删除后无法恢复,确认删除?',
  411. okText: '确定',
  412. cancelText: '取消',
  413. onOk () {
  414. deleteItem({
  415. id: row.id
  416. }).then(res => {
  417. if (res.status == 200) {
  418. _this.$message.success(res.message)
  419. _this.$refs.table.refresh()
  420. }
  421. })
  422. }
  423. })
  424. },
  425. // 更改启用禁用状态
  426. changeFlagHandle (text, record) {
  427. const _data = {
  428. id: record.id,
  429. flag: record.state == 1 ? '0' : '1'
  430. }
  431. changeStatus(_data).then(res => {
  432. if (res.status == '200') {
  433. this.$message.success(res.message)
  434. this.$refs.table.refresh()
  435. } else {
  436. record.status = !record.status
  437. }
  438. })
  439. },
  440. // 上移 下移 排序 index:下标 item:数据 type:类型 0 下移 1 上移
  441. changeSort (index, item, type) {
  442. console.log(index, item, type, this.list)
  443. const indexThat = type === 0 ? index + 1 : index - 1
  444. const params = {
  445. id: item.id,
  446. sortId: this.list[indexThat].id
  447. }
  448. changeSort(params).then(res => {
  449. if (res.status == 200) {
  450. this.$refs.table.refresh()
  451. } else {
  452. this.$message.error(res.message)
  453. }
  454. })
  455. }
  456. }
  457. }
  458. </script>
  459. <style scoped>
  460. .addBtn {
  461. margin-bottom: 20px;
  462. }
  463. </style>