|
|
@@ -5,27 +5,123 @@
|
|
|
<div class="tag">广告管理</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="second-row">
|
|
|
+ <div class="btn-add">
|
|
|
+ <el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
|
|
|
<el-row>
|
|
|
- <el-col :span="12" class="third-row">
|
|
|
- <el-link type="danger">{{send_url}}</el-link>
|
|
|
- <el-upload ref="upload_send" :limit="1" :auto-upload="false" list-type="picture" accept=".jpg"
|
|
|
- action="#" :multiple="false">
|
|
|
- <el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
|
|
|
- <el-button style="margin-left: 10px;" size="small" type="success" @click="send_ad">上传到服务器
|
|
|
- </el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">提示：仅允许上传多1个".jpg"文件，且不超过500kb</div>
|
|
|
- </el-upload>
|
|
|
+ <el-col :span="24" class="third-row">
|
|
|
+ <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
|
|
|
+ highlight-current-row>
|
|
|
+ <el-table-column label="名称" align="center" show-overflow-tooltip width="130">
|
|
|
+ <template slot-scope="scope">{{ scope.row.url_name }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="number" label="图片URL" show-overflow-tooltip align="left">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-link :href="scope.row.url" target="_blank">{{scope.row.url}}</el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="password" label="备注" align="center" show-overflow-tooltip width="130">
|
|
|
+ <template slot-scope="scope">{{ scope.row.remark }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="password" label="是否启用" align="center" show-overflow-tooltip width="130">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.state == 1">是</span>
|
|
|
+ <span v-else>否</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="80">
|
|
|
+ <el-button type="text" class="del-btn" slot-scope="scope"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)">删除
|
|
|
+ </el-button>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="130">
|
|
|
+ <el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">编辑
|
|
|
+ </el-button>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="third-row">
|
|
|
- <el-link type="danger">{{modify_url}}</el-link>
|
|
|
- <el-upload ref="upload_modi" :limit="1" :auto-upload="false" list-type="picture" accept=".jpg"
|
|
|
- action="#" :multiple="false">
|
|
|
- <el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
|
|
|
- <el-button style="margin-left: 10px;" size="small" type="success" @click="modify_ad">上传到服务器
|
|
|
- </el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
|
|
|
- </el-upload>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="forth-row">
|
|
|
+ <!-- 添加对话框 -->
|
|
|
+ <el-dialog title="添加图片" :visible.sync="adddialogFormVisible" width="500px" top="0vh" class="my-dialog"
|
|
|
+ :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <hr
|
|
|
+ style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
|
|
|
+ <el-form :model="addform" :rules="addRules" ref="addform">
|
|
|
+ <el-form-item label="名称：" prop="url_name" :label-width="formLabelWidth">
|
|
|
+ <el-input ref="add_url_name" v-model="addform.url_name" autocomplete="off" minlength="2"
|
|
|
+ maxlength="16" readonly="">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：" prop="remark" :label-width="formLabelWidth">
|
|
|
+ <el-input ref="add_remark" v-model="addform.remark" autocomplete="off" minlength="2"
|
|
|
+ maxlength="16">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否启用：" prop="remark" :label-width="formLabelWidth">
|
|
|
+ <el-checkbox v-model="addform.checked">启用</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片：" :label-width="formLabelWidth">
|
|
|
+ <el-upload ref="upload_send" :limit="1" :auto-upload="false" list-type="picture"
|
|
|
+ accept=".jpg" action="#" :multiple="false" :on-change="addChange"
|
|
|
+ :on-remove="addPicRemove">
|
|
|
+ <el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">提示：仅允许上传1个".jpg"文件，且不超过500kb</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="adddialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="send_ad">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 编辑对话框 -->
|
|
|
+ <el-dialog title="替换图片" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
|
|
|
+ :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <hr
|
|
|
+ style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
|
|
|
+ <el-form :model="form" :rules="formRules" ref="form">
|
|
|
+ <el-form-item label="名称：" prop="url_name" :label-width="formLabelWidth">
|
|
|
+ <el-input ref="nicheng" v-model="form.url_name" autocomplete="off" maxlength="16"
|
|
|
+ readonly="">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：" prop="remark" :label-width="formLabelWidth">
|
|
|
+ <el-input ref="zhanghao" v-model="form.remark" autocomplete="off" maxlength="16"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否启用：" prop="remark" :label-width="formLabelWidth">
|
|
|
+ <el-checkbox v-model="form.checked">启用</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片：" :label-width="formLabelWidth">
|
|
|
+ <el-upload ref="upload_modi" :limit="1" :auto-upload="false" list-type="picture"
|
|
|
+ accept=".jpg" action="#" :multiple="false" :file-list="form.url"
|
|
|
+ :on-change="modifyChange" :on-remove="modifyPicRemove">
|
|
|
+ <el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="editdialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="modify_ad">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 删除对话框 -->
|
|
|
+ <el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog"
|
|
|
+ :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <div class="box-icon"></div>
|
|
|
+ <span class="del-msg">确定删除【{{del_pic}}】吗？</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="delDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleDelRow">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -35,29 +131,251 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- send_url: '上传成功显示URL',
|
|
|
- modify_url: '修改成功显示URL'
|
|
|
+ adddialogFormVisible: false,
|
|
|
+ delDialogVisible: false,
|
|
|
+ editdialogFormVisible: false,
|
|
|
+ del_id: '',
|
|
|
+ formLabelWidth: '100px', // label宽度
|
|
|
+ tableData: [],
|
|
|
+ form: {
|
|
|
+ id: '',
|
|
|
+ remark: '',
|
|
|
+ url_name: '',
|
|
|
+ state: '',
|
|
|
+ checked: true,
|
|
|
+ url: [],
|
|
|
+ file: false
|
|
|
+ },
|
|
|
+ formRules: {
|
|
|
+ url_name: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入名称',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 16,
|
|
|
+ message: '名称长度不小于2位',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ remark: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入备注',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 16,
|
|
|
+ message: '备注长度不小于2位',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ addform: {
|
|
|
+ remark: '',
|
|
|
+ url_name: '水电广告',
|
|
|
+ state: 1,
|
|
|
+ checked: true,
|
|
|
+ file: false
|
|
|
+ },
|
|
|
+ addRules: {
|
|
|
+ url_name: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入名称',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 16,
|
|
|
+ message: '名称长度不小于2位',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ remark: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入备注',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 16,
|
|
|
+ message: '备注长度不小于2位',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ del_pic: '', // 要删除的图片
|
|
|
+ del_id: '' // 删除的id
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.updateTable()
|
|
|
+ },
|
|
|
methods: {
|
|
|
/**
|
|
|
+ * 删除指定的id所在的行
|
|
|
+ */
|
|
|
+ handleDelRow() {
|
|
|
+ var _this = this;
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append("id", this.del_id);
|
|
|
+ this.$axios.post('/shuidian/HotWaters/advertdel_h.action', formData)
|
|
|
+ .then(res => {
|
|
|
+ // console.log(res.data.data);
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ _this.$message.success('删除成功！');
|
|
|
+ _this.delDialogVisible = false
|
|
|
+ _this.updateTable()
|
|
|
+ _this.del_pic = ''
|
|
|
+ } else {
|
|
|
+ _this.$message.success('删除失败！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('【删除数据】请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 删除对话框
|
|
|
+ * @param {Object} index
|
|
|
+ * @param {Object} row
|
|
|
+ */
|
|
|
+ handleDelete(index, row) {
|
|
|
+ // console.log(index, row);
|
|
|
+ this.delDialogVisible = true
|
|
|
+ this.del_id = row.id
|
|
|
+ this.del_pic = row.url_name
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 编辑对话框
|
|
|
+ * @param {Object} index
|
|
|
+ * @param {Object} row
|
|
|
+ */
|
|
|
+ handleEdit(index, row) {
|
|
|
+ this.editdialogFormVisible = true;
|
|
|
+ this.form.id = row.id;
|
|
|
+ this.form.remark = row.remark;
|
|
|
+ this.form.url_name = row.url_name;
|
|
|
+ this.form.checked = row.state == 1 ? true : false;
|
|
|
+ // this.form.url = [{
|
|
|
+ // name: row.url.substr(row.url.lastIndexOf('/') + 1),
|
|
|
+ // url: row.url
|
|
|
+ // }]
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 添加广告
|
|
|
+ */
|
|
|
+ handleAdd() {
|
|
|
+ this.adddialogFormVisible = true
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取数据，填充表格变量
|
|
|
+ */
|
|
|
+ updateTable() {
|
|
|
+ var _this = this
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append("url_name", this.addform.url_name);
|
|
|
+ _this.tableData = []
|
|
|
+ this.$axios.post('/shuidian/HotWaters/advertquery_h.action', formData)
|
|
|
+ .then(res => {
|
|
|
+ // console.log(res.data.data);
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ // _this.$message.success('数据加载成功！');
|
|
|
+ _this.tableData = res.data.data
|
|
|
+ } else {
|
|
|
+ _this.$message.success('【获取广告数据】暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('【获取广告数据】请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addChange(file, fileList) {
|
|
|
+ // console.log(file, fileList);
|
|
|
+ if (fileList.length > 0) {
|
|
|
+ this.addform.file = true
|
|
|
+ } else {
|
|
|
+ this.addform.file = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modifyChange(file, fileList) {
|
|
|
+ // console.log(file, fileList);
|
|
|
+ if (fileList.length > 0) {
|
|
|
+ this.form.file = true
|
|
|
+ } else {
|
|
|
+ this.form.file = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addPicRemove(file, fileList) {
|
|
|
+ // console.log(file, fileList);
|
|
|
+ if (fileList.length > 0) {
|
|
|
+ this.addform.file = true
|
|
|
+ } else {
|
|
|
+ this.addform.file = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modifyPicRemove(file, fileList) {
|
|
|
+ // console.log(file, fileList);
|
|
|
+ if (fileList.length == 0) {
|
|
|
+ this.form.url = []
|
|
|
+ this.form.file = false
|
|
|
+ } else {
|
|
|
+ this.form.file = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
* 上传广告图片
|
|
|
*/
|
|
|
send_ad() {
|
|
|
- var _this = this
|
|
|
+ if (this.addform.url_name == '') {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs['add_url_name'].focus()
|
|
|
+ }, 100)
|
|
|
+ this.$message.warning('请输入名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.addform.remark == '') {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs['add_remark'].focus()
|
|
|
+ }, 100)
|
|
|
+ this.$message.warning('请输入备注')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.addform.file == false) {
|
|
|
+ this.$message.warning('请选择图片文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
let file = this.$refs.upload_send.uploadFiles.pop().raw; //这里获取上传的文件对象
|
|
|
let formData = new FormData();
|
|
|
formData.append("myFile", file);
|
|
|
- formData.append("url_name", '水电广告');
|
|
|
- formData.append("remark", '备注');
|
|
|
+ formData.append("url_name", this.addform.url_name);
|
|
|
+ formData.append("remark", this.addform.remark);
|
|
|
+ if (this.addform.checked == true) {
|
|
|
+ this.addform.state = 1
|
|
|
+ } else {
|
|
|
+ this.addform.state = 0
|
|
|
+ }
|
|
|
+ formData.append("state", this.addform.state);
|
|
|
+ var _this = this
|
|
|
this.$axios.post('/shuidian/HotWaters/adverthimage.action', formData)
|
|
|
.then(res => {
|
|
|
// console.log(res.data);
|
|
|
if (res.data.code == 200) {
|
|
|
_this.$message.success(res.data.message);
|
|
|
- _this.send_url = res.data.url;
|
|
|
+ _this.adddialogFormVisible = false
|
|
|
+ _this.updateTable()
|
|
|
+ _this.addform = {
|
|
|
+ remark: '',
|
|
|
+ url_name: '水电广告',
|
|
|
+ state: 1,
|
|
|
+ checked: true,
|
|
|
+ file: false
|
|
|
+ }
|
|
|
} else {
|
|
|
- _this.$message.warning(res.data.messag);
|
|
|
+ _this.$message.warning(res.data.message);
|
|
|
}
|
|
|
})
|
|
|
.catch(err => {
|
|
|
@@ -69,21 +387,38 @@
|
|
|
* 修改广告图片
|
|
|
*/
|
|
|
modify_ad() {
|
|
|
- var _this = this
|
|
|
- let file = this.$refs.upload_modi.uploadFiles.pop().raw; //这里获取上传的文件对象
|
|
|
let formData = new FormData();
|
|
|
- formData.append("myFile", file);
|
|
|
- formData.append("url_name", '修改水电广告');
|
|
|
- formData.append("remark", '备注修改图片');
|
|
|
- formData.append("id", 1);
|
|
|
+ if (this.form.file == true) {
|
|
|
+ let file = this.$refs.upload_modi.uploadFiles.pop().raw; //这里获取上传的文件对象
|
|
|
+ formData.append("myFile", file);
|
|
|
+ }
|
|
|
+ formData.append("url_name", this.form.url_name);
|
|
|
+ formData.append("remark", this.form.remark);
|
|
|
+ if (this.form.checked == true) {
|
|
|
+ this.form.state = 1
|
|
|
+ } else {
|
|
|
+ this.form.state = 0
|
|
|
+ }
|
|
|
+ formData.append("state", this.form.state);
|
|
|
+ formData.append("id", this.form.id);
|
|
|
+ var _this = this
|
|
|
this.$axios.post('/shuidian/HotWaters/adverth_uimage.action', formData)
|
|
|
.then(res => {
|
|
|
// console.log(res.data);
|
|
|
if (res.data.code == 200) {
|
|
|
+ _this.editdialogFormVisible = false
|
|
|
_this.$message.success(res.data.message);
|
|
|
- _this.modify_url = res.data.url;
|
|
|
+ _this.updateTable()
|
|
|
+ _this.form = {
|
|
|
+ id: '',
|
|
|
+ remark: '',
|
|
|
+ url_name: '',
|
|
|
+ state: '',
|
|
|
+ checked: true,
|
|
|
+ url: []
|
|
|
+ }
|
|
|
} else {
|
|
|
- _this.$message.warning(res.data.messag);
|
|
|
+ _this.$message.warning(res.data.message);
|
|
|
}
|
|
|
})
|
|
|
.catch(err => {
|
程志平