bannerSetting.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  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_POSITION"></v-select>
  5. <!-- table列表 -->
  6. <s-table
  7. ref="table"
  8. size="default"
  9. :rowKey="row => row.id"
  10. :showPagination="false"
  11. :columns="columns"
  12. :data="loadData"
  13. bordered>
  14. <!-- 广告图位置 -->
  15. <span slot="position" slot-scope="text">{{ $refs.position.getNameByCode(text) }}</span>
  16. <span slot="action" slot-scope="text, record">
  17. <template>
  18. <a-icon type="eye" id="bannerSetting-handleDel" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleEdit(record, 1)" />
  19. <a-icon type="edit" id="bannerSetting-handleEdit" v-if="record.status == '0'" style="font-size: 20px;color: #1890FF;padding: 0 10px;" @click="handleEdit(record, 0)" />
  20. <a-icon type="delete" id="bannerSetting-delect" v-if="record.status == '0'" style="font-size: 20px;color: red;padding: 0 10px;" @click="delect(record)" />
  21. </template>
  22. </span>
  23. <span slot="status" slot-scope="text, record">
  24. <a-switch
  25. checkedChildren="启用"
  26. unCheckedChildren="禁用"
  27. id="bannerSetting-changeFlagHandle"
  28. v-model="record.status == 1 ? true : false"
  29. @change="changeFlagHandle(text, record)"
  30. />
  31. </span>
  32. </s-table>
  33. <!-- 弹窗 -->
  34. <a-modal
  35. :title="title"
  36. :visible="visible"
  37. :footer="null"
  38. :closable="closable"
  39. :centered="true"
  40. @cancel="close"
  41. width="45%">
  42. <a-form
  43. id="components-form-demo-validate-other"
  44. :form="form"
  45. ref="form"
  46. v-bind="formItemLayout"
  47. @submit="handleSubmit"
  48. :hideRequiredMark="hideRequiredMark">
  49. <a-form-item label="名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  50. <a-input
  51. id="bannerSetting-title"
  52. :maxLength="30"
  53. v-decorator="['formData.title', { initialValue: formData.title,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入轮播图名称(最多30个字符)!' }] }]"
  54. :disabled="disabled"
  55. placeholder="请输入轮播图名称(最多30个字符)"
  56. allowClear
  57. />
  58. </a-form-item>
  59. <a-form-item label="广告图位置" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  60. <v-select
  61. ref="position"
  62. code="ADVERT_POSITION"
  63. allowClear
  64. id="bannerSetting-position"
  65. placeholder="请选择广告图位置"
  66. :disabled="disabled"
  67. v-decorator="['formData.position', { initialValue: formData.position, rules: [{ required: true, message: '请选择广告图位置!' }] }]"
  68. ></v-select>
  69. </a-form-item>
  70. <a-form-item label="跳转链接" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  71. <a-input
  72. v-decorator="['formData.url', { initialValue: formData.url, rules: [{ required: false, message: '请填写跳转链接!' }] }]"
  73. :disabled="disabled"
  74. id="bannerSetting-url"
  75. placeholder="请输入跳转链接"
  76. allowClear
  77. />
  78. </a-form-item>
  79. <a-form-item label="排序" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  80. <a-input
  81. type="number"
  82. v-decorator="['formData.sort', { initialValue: formData.sort,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请排序!' }] }]"
  83. :disabled="disabled"
  84. id="bannerSetting-sort"
  85. placeholder="请输入序号值"
  86. allowClear
  87. />
  88. </a-form-item>
  89. <a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  90. <a-radio-group
  91. :disabled="disabled"
  92. id="bannerSetting-status"
  93. v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择状态!' }] }]"
  94. >
  95. <a-radio value="1">启用</a-radio>
  96. <a-radio value="0">禁用</a-radio>
  97. </a-radio-group>
  98. </a-form-item>
  99. <a-form-item label="上传图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  100. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 8px 0;">
  101. <Upload
  102. v-if="title != '查看详情'"
  103. id="bannerSetting-photoPath"
  104. v-decorator="[
  105. 'formData.photoPath',
  106. {
  107. initialValue: formData.photoPath,
  108. rules: [{ required: true, message: '请上传轮播图!' }]
  109. }
  110. ]"
  111. ref="bannerImage"
  112. :fileSize="0.25"
  113. :disabled="disabled"
  114. @change="getbannerImage"
  115. listType="picture-card"
  116. upText="上传"
  117. ></Upload>
  118. <img v-else :src="formData.photoPath" style="width:100px ;height: auto;" />
  119. </div>
  120. </a-form-item>
  121. <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
  122. <a-button type="primary" html-type="submit" v-if="!disabled" id="bannerSetting-submit" style="margin-right: 15px">保存</a-button>
  123. <a-button @click="close()" style="margin-left: 15px" id="bannerSetting-close">取消</a-button>
  124. </a-form-item>
  125. </a-form>
  126. </a-modal>
  127. </a-card>
  128. </template>
  129. <script>
  130. import { Upload, STable, VSelect } from '@/components'
  131. import { getBannerSettingList, changeStatus, deleteItem, saveItem } from '@/api/bannerSetting.js'
  132. export default {
  133. components: {
  134. STable,
  135. Upload,
  136. VSelect
  137. },
  138. data () {
  139. return {
  140. // 表头
  141. columns: [
  142. {
  143. title: '序号',
  144. dataIndex: 'no',
  145. width: 60,
  146. align: 'center'
  147. },
  148. {
  149. title: '广告图位置',
  150. width: 200,
  151. dataIndex: 'position',
  152. align: 'center',
  153. scopedSlots: {
  154. customRender: 'position'
  155. }
  156. },
  157. {
  158. title: '名称',
  159. width: 100,
  160. dataIndex: 'title',
  161. align: 'center'
  162. },
  163. {
  164. title: '排序',
  165. width: 100,
  166. dataIndex: 'sort',
  167. align: 'center'
  168. },
  169. {
  170. title: '跳转链接',
  171. width: 100,
  172. dataIndex: 'url',
  173. align: 'center',
  174. customRender: (text) => {
  175. return text || '--'
  176. }
  177. },
  178. {
  179. title: '状态',
  180. width: 100,
  181. dataIndex: 'status',
  182. align: 'center',
  183. scopedSlots: {
  184. customRender: 'status'
  185. }
  186. },
  187. {
  188. title: '操作',
  189. align: 'center',
  190. width: 200,
  191. scopedSlots: {
  192. customRender: 'action'
  193. }
  194. }
  195. ],
  196. // 加载数据方法 必须为 Promise 对象
  197. loadData: parameter => {
  198. return getBannerSettingList({
  199. bannerType: 'app'
  200. }).then(res => {
  201. // console.log(res, '1111')
  202. const no = 0
  203. for (let i = 0; i < res.data.length; i++) {
  204. const _item = res.data[i]
  205. _item.no = no + i + 1
  206. }
  207. return res.data
  208. })
  209. },
  210. title: '编辑',
  211. closable: true,
  212. visible: false,
  213. confirmLoading: false,
  214. formLayout: 'horizontal',
  215. hideRequiredMark: false, // 是否显示必填的* 默认显示
  216. form: this.$form.createForm(this),
  217. formItemLayout: {
  218. labelCol: {
  219. span: 6
  220. },
  221. wrapperCol: {
  222. span: 14
  223. }
  224. },
  225. formData: {
  226. title: '', // 标题
  227. url: '', // 图片路径
  228. status: '', // 状态
  229. sort: '', // 排序
  230. position: '', // 广告图位置
  231. photoPath: '', // banner地址
  232. createDate: ''
  233. },
  234. bannerType: 'app',
  235. disabled: false,
  236. value: '',
  237. id: '',
  238. isShow: true
  239. }
  240. },
  241. beforeCreate () {
  242. this.form = this.$form.createForm(this, {
  243. name: 'validate_other'
  244. })
  245. },
  246. methods: {
  247. showModal () {
  248. this.disabled = false
  249. delete this.formData.id
  250. delete this.formData.createDate
  251. this.visible = true
  252. this.title = '新增'
  253. this.hideRequiredMark = false
  254. },
  255. // 轮播图change
  256. getbannerImage (data) {
  257. this.formData.photoPath = data
  258. },
  259. // 点击保存;
  260. handleSubmit (e) {
  261. e.preventDefault()
  262. const _this = this
  263. this.form.validateFields((err, values) => {
  264. if (!err) {
  265. console.log('Received values of form: ', values, this.formData)
  266. const formData = Object.assign({}, this.formData, values.formData, {
  267. bannerType: 'app'
  268. })
  269. console.log(formData, _this.radioGroup)
  270. saveItem(formData, _this.radioGroup).then(res => {
  271. console.log(res, 'rrrrrrrrr')
  272. if (res.status == 200) {
  273. _this.$message.success(res.message)
  274. _this.$refs.table.refresh()
  275. _this.close()
  276. }
  277. })
  278. }
  279. })
  280. },
  281. close () {
  282. this.visible = false
  283. this.formData.title = ''
  284. this.photo = ''
  285. this.formData.url = ''
  286. this.formData.status = ''
  287. this.formData.sort = ''
  288. this.formData.position = ''
  289. this.formData.photoBasePath = ''
  290. this.formData.photoPath = ''
  291. this.title = '新增'
  292. this.$refs.bannerImage.setFileList('')
  293. this.form.resetFields()
  294. },
  295. // 赋值
  296. assignment (row) {
  297. this.formData.id = row.id
  298. this.formData.title = row.title
  299. this.formData.photoPath = row.photoPath
  300. this.formData.url = row.url
  301. this.formData.status = row.status
  302. this.formData.sort = row.sort
  303. this.formData.position = row.position
  304. this.formData.createDate = row.createDate
  305. },
  306. // 0 修改,1 查看详情
  307. handleEdit (row, type) {
  308. const _this = this
  309. console.log(row)
  310. if (type == 1) {
  311. this.title = '查看详情'
  312. this.hideRequiredMark = true
  313. } else if (type == 0) {
  314. this.title = '编辑'
  315. this.hideRequiredMark = false
  316. }
  317. this.assignment(row)
  318. this.disabled = type == 1
  319. this.visible = true
  320. setTimeout(() => {
  321. _this.$refs.bannerImage.setFileList(this.formData.photoPath)
  322. }, 500)
  323. },
  324. // 删除
  325. delect (row) {
  326. const _this = this
  327. this.$confirm({
  328. title: '警告',
  329. content: '删除后无法恢复,确认删除?',
  330. okText: '确定',
  331. cancelText: '取消',
  332. onOk () {
  333. deleteItem({
  334. id: row.id
  335. }).then(res => {
  336. if (res.status == 200) {
  337. _this.$message.success(res.message)
  338. _this.$refs.table.refresh()
  339. }
  340. })
  341. }
  342. })
  343. },
  344. // 更改启用禁用状态
  345. changeFlagHandle (text, record) {
  346. const _data = {
  347. id: record.id,
  348. flag: record.status == 1 ? '0' : '1'
  349. }
  350. changeStatus(_data).then(res => {
  351. if (res.status == '200') {
  352. this.$message.success(res.message)
  353. this.$refs.table.refresh()
  354. } else {
  355. record.status = !record.status
  356. }
  357. })
  358. }
  359. }
  360. }
  361. </script>
  362. <style scoped>
  363. .addBtn {
  364. margin-bottom: 20px;
  365. }
  366. </style>