|
@@ -0,0 +1,819 @@
|
|
|
|
+<template>
|
|
|
|
+ <!-- 单页 -->
|
|
|
|
+ <div>
|
|
|
|
+ <!-- 头部搜索框部分 -->
|
|
|
|
+ <div class="title">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="6" class="left">
|
|
|
|
+ <div class="searchBox">
|
|
|
|
+ <div class="searchTitle">通栏版式名称</div>
|
|
|
|
+ <el-input v-model="apiData.name" clearable placeholder="请输入通栏名称"></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6" class="left">
|
|
|
|
+ <div class="searchBox">
|
|
|
|
+ <div class="searchTitle">组件版式数量</div>
|
|
|
|
+ <el-input v-model="apiData.component_num" clearable placeholder="请输入组件版式数量"></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6" class="left">
|
|
|
|
+ <div class="searchBox">
|
|
|
|
+ <div class="searchTitle">尺寸</div>
|
|
|
|
+ <div class="sizeBox">
|
|
|
|
+ <div class="sizeInput"><el-input v-model="apiData.width" clearable placeholder="宽"></el-input> </div>
|
|
|
|
+ <div class="sizeInputSymbol">*</div>
|
|
|
|
+ <div class="sizeInput"><el-input v-model="apiData.height" clearable placeholder="高"></el-input></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6" class="right">
|
|
|
|
+ <div class="btnList">
|
|
|
|
+ <button class="search" @click="goSearch">搜索</button>
|
|
|
|
+ <button class="reset" @click="goReset">重置</button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <!--表格内容 start------------------------------------------------------------>
|
|
|
|
+ <div class="layerBox">
|
|
|
|
+ <tableTitle :name="tableDivTitle" />
|
|
|
|
+ <button class="btn" @click="addWebsite">添加通栏版式</button>
|
|
|
|
+ <el-row>
|
|
|
|
+ <template>
|
|
|
|
+ <el-table class="my-table" :data="tableData" style="width: 100%">
|
|
|
|
+ <el-table-column prop="sector_type" label="类型编号" width="">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="name" label="通栏版式名称" width="">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="component_num" label="组件版式数量" width="">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="size" label="尺寸(宽 * 高)" width="">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="created_at" label="添加时间" width="">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="updated_at" label="修改时间" width="">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column fixed="right" label="操作" width="300">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div class="listBtnBox">
|
|
|
|
+ <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
|
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
|
+ 删除
|
|
|
|
+ </div>
|
|
|
|
+ <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
|
|
|
|
+ <i class="el-icon-edit-outline"></i>
|
|
|
|
+ 编辑
|
|
|
|
+ </div>
|
|
|
|
+ <div class="listLookBtn" @click="goLook(scope.row.id, scope.row)">
|
|
|
|
+ <i class="el-icon-view"></i>
|
|
|
|
+ 查看
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </template>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <!--分页 start------------------------------------------------------------>
|
|
|
|
+ <div class="alignBox">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
|
+ :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
|
|
|
|
+ :total="total">
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <!--分页 end------------------------------------------------------------>
|
|
|
|
+ <!--表格内容 end------------------------------------------------------------>
|
|
|
|
+
|
|
|
|
+ <!-- 弹出框 编辑 start----------------------------------------------------------->
|
|
|
|
+ <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
|
|
|
|
+ :close-on-click-modal="false">
|
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
|
|
|
|
+ <div class="dialogText">
|
|
|
|
+ <el-form-item label="通栏版式名称:" prop="name">
|
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入通栏版式名称"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="通栏版式编号:" prop="type">
|
|
|
|
+ <el-input v-model="ruleForm.type" placeholder="请输入通栏版式编号" type="number" min='1'></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="组件版式数量:" prop="component_num">
|
|
|
|
+ <el-input v-model="ruleForm.component_num" placeholder="请输入组件版式数量" type="number" min='1'></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="通栏版式尺寸:" prop="size_id">
|
|
|
|
+ <el-select v-model="ruleForm.size_id" placeholder="请选择通栏版式尺寸">
|
|
|
|
+ <el-option v-for="item in size_options" :key="item.id" :label="item.label" :value="item.id">{{item.label}}
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="通栏版式预览图:" prop="sector_img" :label-width="formLabelWidth"
|
|
|
|
+ :class="['custom-form-item']" class="custom-align-right">
|
|
|
|
+ <div class="uploaderBox">
|
|
|
|
+ <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
|
+ <div class="avatar-upload-container" @mouseenter="hovering = true"
|
|
|
|
+ @mouseleave="hovering = false">
|
|
|
|
+ <!-- 上传组件 -->
|
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false"
|
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
|
+ <!-- 预览图片 -->
|
|
|
|
+ <img v-if="this.logoUrl" :src="this.logoUrl" class="avatar">
|
|
|
|
+ <!-- 上传图标 -->
|
|
|
|
+ <div v-else class="chooseImgDiv">
|
|
|
|
+ <div>
|
|
|
|
+ <img src="@/assets/public/upload/noImage.png">
|
|
|
|
+ <div>选择图片</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <input type="hidden" name="logo" v-model="ruleForm.sector_img">
|
|
|
|
+ </el-upload>
|
|
|
|
+ <!-- 删除按钮,当鼠标悬浮时显示 -->
|
|
|
|
+ <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
|
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!--图片上传组件 end ------------------------------------------------------------>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="dialogBtn">
|
|
|
|
+ <el-button type="info" @click="cancelForm">取消</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ <!-- 弹出框 编辑 end----------------------------------------------------------->
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+//表格标题
|
|
|
|
+import tableTitle from './components/tableTitle.vue';
|
|
|
|
+
|
|
|
|
+//引入公用样式
|
|
|
|
+import '@/styles/global.less';
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ tableTitle,//表格标题-
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ const validateEmpty = (rule, value, callback) => {
|
|
|
|
+ if (value.length == 0) {
|
|
|
|
+ callback(new Error('该项不能为空!'))
|
|
|
|
+ } else {
|
|
|
|
+ callback()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ tableDivTitle: "通栏版式列表", //列表标题
|
|
|
|
+ dialogTableVisible: false, //编辑弹框
|
|
|
|
+ dialogName: '编辑', //编辑弹窗名称
|
|
|
|
+ disabled: false, //禁用
|
|
|
|
+
|
|
|
|
+ tableData: [],//表格数据
|
|
|
|
+ size_options: [],//尺寸下拉列表:[],
|
|
|
|
+ // 可以输入的搜索框相关
|
|
|
|
+
|
|
|
|
+ //3.4 上传logo图片
|
|
|
|
+ logoUrl: '',
|
|
|
|
+ hovering: false, // 鼠标悬浮状态 悬浮时显示删除
|
|
|
|
+
|
|
|
|
+ value: '',
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ activeid: "", //通栏版式类型id
|
|
|
|
+ type: "", //查看时需要传递的组件版式数量
|
|
|
|
+ formLabelWidth: '', //广告示例图相关
|
|
|
|
+ // 分页相关
|
|
|
|
+ page: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ total: 0,
|
|
|
|
+ apiData: {
|
|
|
|
+ name: '', //通栏版式名称
|
|
|
|
+ component_num: null, //组件数量
|
|
|
|
+ size_id: '', //尺寸
|
|
|
|
+ width:null,
|
|
|
|
+ height:null,
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ ruleForm: {
|
|
|
|
+ name: '', //通栏版式名称
|
|
|
|
+ type: '', //通栏版式编号
|
|
|
|
+ component_num: '', //组件数量
|
|
|
|
+ size_id: '', //尺寸
|
|
|
|
+ sector_img: '', //通栏版式预览图
|
|
|
|
+ sector_type:null,
|
|
|
|
+ },
|
|
|
|
+ rules: {
|
|
|
|
+ name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
|
+ type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
|
+ component_num: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
|
+ size_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
|
+ sector_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
|
+ //1.1 开始请求列表信息方法
|
|
|
|
+ getData() {
|
|
|
|
+ const data = {
|
|
|
|
+ page: this.page,
|
|
|
|
+ page_size: this.pageSize,
|
|
|
|
+ type_id: 1,
|
|
|
|
+ }
|
|
|
|
+ this.$store.dispatch('platestyle/getSectorPlaceList',data).then(res => {
|
|
|
|
+ this.tableData = res.data.row.data; //给与内容
|
|
|
|
+ this.total = res.data.count; //给与总条数
|
|
|
|
+ for(let i = 0; i < this.tableData.length; i++){
|
|
|
|
+ this.tableData[i].size = this.tableData[i].width + " * " + this.tableData[i].height;
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: '网络错误,请重试!'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //1.2 删除内容
|
|
|
|
+ deleteRow(id) {
|
|
|
|
+ console.log(id);
|
|
|
|
+ let data = new FormData()
|
|
|
|
+ data.append('id', id)
|
|
|
|
+ this.$confirm('注意:删除后,该条信息及其绑定关系全部删除', '是否确认删除该条信息?', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ }).then(() => {
|
|
|
|
+ console.log("当前删除:" + id)
|
|
|
|
+ this.$store.dispatch('platestyle/delSectorPlace',{id:id}).then(res => {
|
|
|
|
+ if(res.code == 200){
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '删除成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ })
|
|
|
|
+ this.getData()
|
|
|
|
+ }else if(res.code == 0){
|
|
|
|
+ this.$message({
|
|
|
|
+ message: res.message,
|
|
|
|
+ type: 'error'
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'warning',
|
|
|
|
+ message: '已取消删除'
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //1.3 查看示例图
|
|
|
|
+ goGraph() {
|
|
|
|
+ this.dialogVisible = true
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //1.4 列表内容分页
|
|
|
|
+ //直接跳转
|
|
|
|
+ handleSizeChange(val) {
|
|
|
|
+ this.page = val;
|
|
|
|
+ this.getData();
|
|
|
|
+ },
|
|
|
|
+ //1.5 点击分页
|
|
|
|
+ handleCurrentChange(val) {
|
|
|
|
+ this.page = val;
|
|
|
|
+ this.getData();
|
|
|
|
+ },
|
|
|
|
+ // 1.6 搜索按钮
|
|
|
|
+ goSearch() {
|
|
|
|
+ const data = {
|
|
|
|
+ page: this.page,
|
|
|
|
+ page_size: this.pageSize,
|
|
|
|
+ type_id: 1,
|
|
|
|
+ component_num : this.apiData.component_num ?? '',
|
|
|
|
+ width : this.apiData.width ?? '',
|
|
|
|
+ height : this.apiData.height ?? '',
|
|
|
|
+ name : this.apiData.name ?? '',
|
|
|
|
+ }
|
|
|
|
+ this.$store.dispatch('platestyle/getSectorPlaceList',data).then(res => {
|
|
|
|
+ this.tableData = res.data.row.data; //给与内容
|
|
|
|
+ this.total = res.data.count; //给与总条数
|
|
|
|
+ for(let i = 0; i < this.tableData.length; i++){
|
|
|
|
+ this.tableData[i].size = this.tableData[i].width + " * " + this.tableData[i].height;
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: '网络错误,请重试!'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //1.7 重置按钮
|
|
|
|
+ goReset() {
|
|
|
|
+ this.apiData.name = '', //通栏版式名称
|
|
|
|
+ this.apiData.component_num = null, //组件数量
|
|
|
|
+ this.apiData.width = null,
|
|
|
|
+ this.apiData.height = null,
|
|
|
|
+ this.apiData.size_id = '', //尺寸
|
|
|
|
+ this.getData()
|
|
|
|
+ },
|
|
|
|
+ // 获取尺寸列表
|
|
|
|
+ getSizeList() {
|
|
|
|
+ this.$store.dispatch('plate/getAllSize').then(res => {
|
|
|
|
+ this.size_options = res.data
|
|
|
|
+ if(res.data){
|
|
|
|
+ this.size_options.forEach(item => {
|
|
|
|
+ item.label = item.width + ' * ' + item.height;
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ console.log(res.data);
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: '网络错误,请重试!'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //列表和分页相关 end ------------------------------------------------------------>
|
|
|
|
+
|
|
|
|
+ //1.9 编辑
|
|
|
|
+ goEdit(id, val) {
|
|
|
|
+ // console.log(id);
|
|
|
|
+ this.dialogName = '编辑'
|
|
|
|
+ this.activeid = id
|
|
|
|
+ this.dialogTableVisible = true
|
|
|
|
+ this.disabled = true
|
|
|
|
+ console.log(id, val);
|
|
|
|
+ console.log("状态", val);
|
|
|
|
+
|
|
|
|
+ //数据回显
|
|
|
|
+ // console.log("fesfefefef",val);
|
|
|
|
+ this.ruleForm.name = val.name
|
|
|
|
+ this.ruleForm.type = val.sector_type
|
|
|
|
+ this.ruleForm.component_num = val.component_num
|
|
|
|
+ this.ruleForm.size_id = val.size_id
|
|
|
|
+ this.ruleForm.sector_img = val.sector_img
|
|
|
|
+ this.ruleForm.sector_type = val.sector_type
|
|
|
|
+ this.logoUrl = val.sector_img
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //2.0 查看
|
|
|
|
+ goLook(id, val) {
|
|
|
|
+ this.activeid = val.sector_type
|
|
|
|
+ this.type = val.component_num
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/componentPlaceList',
|
|
|
|
+ query: {
|
|
|
|
+ id: this.activeid,
|
|
|
|
+ type: this.type
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //1.7 添加
|
|
|
|
+ addWebsite() {
|
|
|
|
+ this.dialogTableVisible = true
|
|
|
|
+ this.dialogName = "添加"
|
|
|
|
+ this.disabled = false
|
|
|
|
+
|
|
|
|
+ //添加时清空回显回来的数据
|
|
|
|
+ this.ruleForm.name = '', //通栏版式名称
|
|
|
|
+ this.ruleForm.type = '', //通栏版式编号
|
|
|
|
+ this.ruleForm.component_num = '' //组件数量
|
|
|
|
+ this.ruleForm.size_id = '', //尺寸
|
|
|
|
+ this.ruleForm.sector_img = '' //通栏版式预览图
|
|
|
|
+ this.logoUrl = ''
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 弹出层相关方法
|
|
|
|
+ // 提交表单
|
|
|
|
+ submitForm(formName) {
|
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ console.log('submit!');
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ console.log('error submit!!');
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if (this.dialogName == "添加") {
|
|
|
|
+ this.ruleForm.type_id = 1;
|
|
|
|
+ this.$store.dispatch('platestyle/addSectorPlace',this.ruleForm).then(res => {
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.code != 200){
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: res.message
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'success',
|
|
|
|
+ message: '添加成功'
|
|
|
|
+ })
|
|
|
|
+ this.dialogTableVisible = false
|
|
|
|
+ this.getData()
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'info',
|
|
|
|
+ message: '网络错误,请重试!'
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (this.dialogName == "编辑") {
|
|
|
|
+ this.ruleForm.type_id = 1;
|
|
|
|
+ this.ruleForm.id = this.activeid;
|
|
|
|
+ delete this.ruleForm.sector_type;
|
|
|
|
+ console.log("回显相关",this.ruleForm);
|
|
|
|
+ this.$store.dispatch('platestyle/upSectorPlace',this.ruleForm).then(res => {
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.code != 200){
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: res.message
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'success',
|
|
|
|
+ message: '修改成功!'
|
|
|
|
+ })
|
|
|
|
+ this.dialogTableVisible = false
|
|
|
|
+ this.getData()
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'info',
|
|
|
|
+ message: '网络错误,请重试!'
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //取消添加或编辑
|
|
|
|
+ cancelForm() {
|
|
|
|
+ this.dialogTableVisible = false
|
|
|
|
+ },
|
|
|
|
+ //3.6 上传图片操作
|
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
|
+ console.log(file);
|
|
|
|
+ const isJPEG = file.type === 'image/jpeg';
|
|
|
|
+ const isJPG = file.type === 'image/jpg';
|
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
+
|
|
|
|
+ if (!isJPEG && !isPNG && !isJPG) {
|
|
|
|
+ this.$message.error('上传图片只能是 JPG 或 PNG 或 JPEG格式!');
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (!isLt2M) {
|
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const formData = new FormData();
|
|
|
|
+ formData.append('file', file);
|
|
|
|
+
|
|
|
|
+ this.$store.dispatch('pool/uploadFile', formData).then(res => {
|
|
|
|
+ this.logoUrl = res.data.imgUrl;//显示缩略图
|
|
|
|
+ this.ruleForm.sector_img = res.data.imgUrl;//提供表单地址
|
|
|
|
+ console.log(res.data.imgUrl)
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'info',
|
|
|
|
+ message: '网络错误,请重试!'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 阻止默认的上传行为
|
|
|
|
+ return false;
|
|
|
|
+ },
|
|
|
|
+ handleDelete() {
|
|
|
|
+ // 删除图片
|
|
|
|
+ this.logoUrl = ''; // 清空图片 URL
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //搜索部分的输入关键词下拉框
|
|
|
|
+ selectWebSite(value) {
|
|
|
|
+ this.webSiteName_id = value
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //添加 / 编辑弹窗中输入关键词下拉框
|
|
|
|
+ // 判断是否已经关联了网站
|
|
|
|
+ detectionWebSite(value) {
|
|
|
|
+ console.log(value);
|
|
|
|
+ this.website_id = value
|
|
|
|
+ console.log(this.website_id);
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getData()
|
|
|
|
+ this.getSizeList()
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="less">
|
|
|
|
+input[aria-hidden=true] {
|
|
|
|
+ display: none !important;
|
|
|
|
+}
|
|
|
|
+.sizeBox {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 80%;
|
|
|
|
+ .sizeInputSymbol {
|
|
|
|
+ width: 30px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ .sizeInput {
|
|
|
|
+ width: 50%;
|
|
|
|
+ ::v-deep .el-input {
|
|
|
|
+ position: relative;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// 提示信息
|
|
|
|
+.tips {
|
|
|
|
+ margin: 30px;
|
|
|
|
+ background-color: #e9ecf9;
|
|
|
|
+ border-radius: 11px;
|
|
|
|
+
|
|
|
|
+ .tipsIcon {
|
|
|
|
+ margin: 10px 15px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ background: url("../../assets/advertise/Info Circle.png") no-repeat;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tipsText {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #666666;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 头部
|
|
|
|
+.title {
|
|
|
|
+ margin: 30px 30px 20px 30px;
|
|
|
|
+ padding: 30px 30px 40px 30px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border-radius: 20px 20px 20px 20px;
|
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
|
+
|
|
|
|
+ .left {
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right {
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .searchBox {
|
|
|
|
+ ::v-deep .el-input {
|
|
|
|
+ position: relative;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 80%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .searchTitle {
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-select {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .btnList {
|
|
|
|
+ float: right;
|
|
|
|
+ padding-top: 28px;
|
|
|
|
+
|
|
|
|
+ button {
|
|
|
|
+ height: 38px;
|
|
|
|
+ border: none;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ padding: 0 30px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search {
|
|
|
|
+ background-color: #5570f1;
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .reset {
|
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #333333;
|
|
|
|
+ background: #F5F7FB;
|
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
|
+ border: 1px solid rgba(85, 112, 241, 0.11);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.layerBox {
|
|
|
|
+ padding: 30px 20px;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .btn {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 30px;
|
|
|
|
+ right: 20px;
|
|
|
|
+ height: 38px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ background-color: #5570f1;
|
|
|
|
+ border: none;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ padding: 8px 28px 9px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .listBtnBox {
|
|
|
|
+ justify-content: left;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .listDeleteBtn,
|
|
|
|
+ .listEditBtn,
|
|
|
|
+ .listLookBtn {
|
|
|
|
+ margin-left: 0px;
|
|
|
|
+ padding-left: 0px;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ width: 76px;
|
|
|
|
+ height: 36px;
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .listLookBtn {
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color: #55b5f1;
|
|
|
|
+ background-color: rgba(85, 181, 241, 0.16);
|
|
|
|
+
|
|
|
|
+ >i {
|
|
|
|
+ padding-right: 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .el-form-item {
|
|
|
|
+ margin-bottom: 50px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .el-select {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .el-input--medium,
|
|
|
|
+ ::v-deep .el-form-item__label {
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 弹出层内容
|
|
|
|
+.dialogText {
|
|
|
|
+ margin: 0 7px 0 3px;
|
|
|
|
+ padding-bottom: 1px;
|
|
|
|
+ padding: 30px 60px 1px 20px;
|
|
|
|
+ background-color: #f5f7fb;
|
|
|
|
+
|
|
|
|
+ .adImage {
|
|
|
|
+ width: 140px;
|
|
|
|
+ height: 140px;
|
|
|
|
+ line-height: 210px;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ border: 1px solid rgba(85, 112, 241, 0.11);
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ width: 140px;
|
|
|
|
+ height: 80px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ ::v-deep .avatar {
|
|
|
|
+ width: 140px;
|
|
|
|
+ height: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .price {
|
|
|
|
+ ::v-deep .el-input {
|
|
|
|
+ width: 29%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .example {
|
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
|
+ color: #5570F1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el_btnList {
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //日期时间选择器的宽
|
|
|
|
+ ::v-deep .el-date-editor.el-input {
|
|
|
|
+ width: 48%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .el-button+.el-button {
|
|
|
|
+ margin-left: 0px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .el-select {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .el-form-item {
|
|
|
|
+ margin-bottom: 50px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 弹出层按钮
|
|
|
|
+.dialogBtn {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin: 50px auto 20px;
|
|
|
|
+
|
|
|
|
+ button {
|
|
|
|
+ width: 184px;
|
|
|
|
+ padding: 16px;
|
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ border: none;
|
|
|
|
+ border-radius: 12px 12px 12px 12px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 取消
|
|
|
|
+ .cancel {
|
|
|
|
+ color: #333333;
|
|
|
|
+ background-color: #f5f7fb;
|
|
|
|
+ border: 2px solid rgba(85, 112, 241, 0.11);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 提交
|
|
|
|
+ .submit {
|
|
|
|
+ color: #fff;
|
|
|
|
+ background-color: #5570F1;
|
|
|
|
+ margin-left: 40px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+//审核弹出框
|
|
|
|
+.radioGroup {
|
|
|
|
+ ::v-deep .el-form-item {
|
|
|
|
+ margin-top: 40px;
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.graph {
|
|
|
|
+ background-color: #f5f7fb;
|
|
|
|
+ padding: 60px 100px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ li {
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ >li:first-child {
|
|
|
|
+ margin-right: 100px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.dialog-footer {
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+}
|
|
|
|
+</style>
|