bannerSetting.vue 12 KB

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