| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/src/view/system-config/bannerManage.vue?vue&type=style&index=0&id=7db5fca1&scoped=true&lang=css&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/src/view/system-config/bannerManage.vue","mtime":1618306924000},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/css-loader/index.js","mtime":1665684004023},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1665684006115},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":1665684022107},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":1665684006084}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.banner_img {\n max-width: 100px;\n max-height: 100px;\n margin-bottom: 5px;\n}\n\n.banner_img img {\n max-width: 100%;\n max-height: 100%;\n}\n",{"version":3,"sources":["bannerManage.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmUA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"bannerManage.vue","sourceRoot":"src/view/system-config","sourcesContent":["<template>\n <div>\n <Card>\n <Row>\n <Form :label-width=\"60\">\n <FormItem :label-width=\"0\">\n <Button type=\"primary\" @click=\"addBtn\" opcode=\"'admins/system/slider/add'\">新增轮播图</Button>\n </FormItem>\n </Form>\n </Row>\n <Row class=\"mt10\">\n <Table border ref=\"selection\" :columns=\"columns\" :data=\"tableData\">\n </Table>\n </Row>\n </Card>\n <!-- 添加轮播图 -->\n <Modal v-model=\"addBanner\" title=\"添加轮播图\" @on-cancel=\"cancel\"\n :mask-closable=\"false\">\n <Form ref='formAdd' :model='formAdd' :label-width=\"120\">\n <FormItem label=\"排序：\">\n <Input v-model.number=\"formAdd.sort\" placeholder=\"请输入序号\"/>\n </FormItem>\n <FormItem label=\"标题（选填）：\">\n <Input v-model=\"formAdd.title\" placeholder=\"请输入标题\"/>\n </FormItem>\n <FormItem label=\"图片上传：\">\n <div class=\"banner_img\" v-show=\"formAdd.img\"><img :src=\"bannerUrl+formAdd.img\"></div>\n <Upload action=\"/api/uploadImg\" name=\"image\" ref=\"imgupload\" :format=\"['jpg','jpeg','png']\" :before-upload=\"handleImgBefore\" :on-success=\"uploadBannerSuccess\">\n <Button icon=\"ios-cloud-upload-outline\">点击上传</Button>\n </Upload>\n </FormItem>\n <FormItem>\n <Button type=\"primary\" @click=\"saveBanner\" style=\"margin-left:20%;\">保存并发布</Button>\n <Button @click=\"cancel;addBanner=false\" style=\"margin-left: 10px;\">取消</Button>\n </FormItem>\n </Form>\n <div slot=\"footer\">\n <!-- <Row type=\"flex\" justify=\"center\">\n <Button @click=\"showCurrency=false\">关闭</Button>\n </Row> -->\n </div>\n </Modal>\n\n <!-- 编辑轮播图 -->\n <Modal v-model=\"editBanner\" title=\"编辑轮播图\" :mask-closable=\"false\">\n <Form ref='formAdd' :model='formEdit' :label-width=\"120\">\n <FormItem label=\"排序：\">\n <Input v-model.number=\"formEdit.sort\" placeholder=\"请输入序号\"/>\n </FormItem>\n <FormItem label=\"标题（选填）：\">\n <Input v-model=\"formEdit.title\" placeholder=\"请输入标题\"/>\n </FormItem>\n <FormItem label=\"图片上传：\">\n <div class=\"banner_img\"><img :src=\"bannerUrl+formEdit.img\"></div>\n <Upload action=\"/api/uploadImg\" name=\"image\" ref=\"imguploadEdit\" :format=\"['jpg','jpeg','png']\" :before-upload=\"handleImgBeforeEdit\" :on-success=\"uploadBannerSuccessEdit\">\n <Button icon=\"ios-cloud-upload-outline\">点击上传</Button>\n </Upload>\n </FormItem>\n <FormItem>\n <Button type=\"primary\" @click=\"saveBannerEdit\" style=\"margin-left:20%;\">保存并发布</Button>\n <Button @click=\"editBanner=false\" style=\"margin-left: 10px;\">取消</Button>\n </FormItem>\n </Form>\n <div slot=\"footer\">\n <!-- <Row type=\"flex\" justify=\"center\">\n <Button @click=\"showCurrency=false\">关闭</Button>\n </Row> -->\n </div>\n </Modal>\n </div>\n</template>\n<script>\n import axios from '@/libs/api.request'\n export default{\n name: 'banner',\n data(){\n return {\n addBanner: false,\n editBanner: false,\n formAdd: {title: '', sort: '', img: ''},\n formEdit: {title: '', sort: '', img: ''},\n bannerUrl:this.$config.baseUrl.pro,\n columns: [\n {\n title: '排序',\n key: 'sort',\n width: 150\n },\n {\n title: '图片',\n key: 'img',\n align: 'center',\n render: (h, params) => {\n return h('div', {\n style: {\n \"width\": '80px',\n \"height\": '80px',\n padding: '5px'\n }\n }, [\n h('img', {\n attrs: {\n src: this.bannerUrl + params.row.img\n },\n style: {\n \"max-width\": '100%',\n \"max-height\": '100%'\n }\n }),\n ]);\n }\n },\n {\n title: '标题',\n key: 'title'\n },\n {\n title: '操作',\n minWidth: 200,\n key: 'action',\n align: 'center',\n render: (h, params) => {\n let btnArr = []\n btnArr.push(\n h('Button', {\n props: {\n size: 'small',\n type: 'primary'\n },\n style: {\n marginTop: '5px',\n marginBottom: '5px',\n marginRight: '5px'\n },\n on: {\n click: () => {\n let _this = this;\n _this.editBanner = true;\n _this.formEdit.id = params.row.id;\n _this.formEdit.title = params.row.title;\n _this.formEdit.img = params.row.img;\n _this.formEdit.sort = params.row.sort;\n }\n },\n directives: [\n {\n name: 'opcode',\n value: 'admins/system/slider/update'\n }\n ]\n }, '编辑'))\n btnArr.push(\n h('Button', {\n props: {\n size: 'small',\n type: 'error'\n },\n style: {\n marginTop: '5px',\n marginBottom: '5px',\n marginRight: '5px'\n },\n on: {\n click: () => {\n let _this = this;\n this.$Modal.confirm({\n title: '确定删除该条数据吗？',\n content: '',\n loading: true,\n onOk: () => {\n _this.delBanner(params.row.id);\n }\n })\n }\n },\n directives: [\n {\n name: 'opcode',\n value: 'admins/system/slider/del'\n }\n ]\n }, '删除')\n );\n return h('div', btnArr)\n }\n }\n ],\n tableData: []\n }\n },\n created(){\n this.getBanner();\n },\n methods: {\n addBtn(){\n if (this.tableData.length >= 5) {\n this.$Message.warning('最多只能添加5个轮播图');\n return;\n }\n this.addBanner = true\n },\n cancel(){\n this.formAdd.title = ''\n this.formAdd.sort = ''\n this.formAdd.img = ''\n this.formAdd.url = ''\n this.$refs.imgupload.fileList = []\n },\n uploadBannerSuccess (res, file) {\n if (res.code == 'success') {\n this.$set(this.formAdd, 'img', res.data.url)\n this.$refs.imgupload.fileList = []\n } else {\n this.$Message.error(res.message)\n }\n },\n uploadBannerSuccessEdit (res, file) {\n if (res.code == 'success') {\n this.$set(this.formEdit, 'img', res.data.url)\n this.$refs.imguploadEdit.fileList = []\n } else {\n this.$Message.error(res.message)\n }\n },\n handleImgBefore (res) {\n this.$refs.imgupload.fileList = []\n },\n handleImgBeforeEdit (res) {\n this.$refs.imguploadEdit.fileList = []\n },\n saveBanner(){\n let _this = this;\n if (!_this.formAdd.sort) {\n _this.$Message.error('请输入排序！');\n return;\n }\n if (!_this.formAdd.img) {\n _this.$Message.error('请上传图片！');\n return;\n }\n axios.request({\n url: '/admins/system/slider/add',\n data: _this.formAdd,\n method: 'POST'\n })\n .then(res => {\n if (res.data.code === 'success') {\n _this.addBanner = false\n _this.$Modal.remove()\n _this.$Message.success(res.data.message, 'middle')\n _this.getBanner();\n _this.cancel();\n } else {\n _this.$Message.error(res.data.message)\n }\n })\n },\n saveBannerEdit(){\n let _this = this;\n if (!_this.formEdit.sort) {\n _this.$Message.error('请输入排序！');\n return;\n }\n if (!_this.formEdit.img) {\n _this.$Message.error('请上传图片！');\n return;\n }\n axios.request({\n url: '/admins/system/slider/update',\n data: _this.formEdit,\n method: 'POST'\n })\n .then(res => {\n if (res.data.code === 'success') {\n _this.editBanner = false\n _this.$Modal.remove()\n _this.$Message.success(res.data.message, 'middle')\n _this.getBanner();\n _this.formEdit.title = ''\n _this.formEdit.sort = ''\n _this.formEdit.img = ''\n _this.formEdit.url = ''\n _this.$refs.imguploadEdit.fileList = []\n } else {\n _this.$Message.error(res.data.message)\n }\n })\n },\n getBanner(){\n let _this = this;\n axios.request({\n url: 'admins/system/slider/index',\n method: 'POST'\n })\n .then(res => {\n if (res.data.code === 'success') {\n _this.tableData = res.data.data;\n } else {\n _this.$Message.error(res.data.message)\n }\n })\n },\n delBanner(id){\n let _this = this;\n axios.request({\n url: '/admins/system/slider/del',\n data: {id: id},\n method: 'POST'\n })\n .then(res => {\n if (res.data.code === 'success') {\n _this.$Modal.remove()\n _this.$Message.success(res.data.message, 'middle')\n _this.getBanner();\n } else {\n _this.$Message.error(res.data.message)\n }\n })\n }\n }\n }\n</script>\n<style scoped>\n .banner_img {\n max-width: 100px;\n max-height: 100px;\n margin-bottom: 5px;\n }\n\n .banner_img img {\n max-width: 100%;\n max-height: 100%;\n }\n</style>\n"]}]}
|
