1 小控件类
拿id
userId:this.$store.state.user.userInfo.userId,
retailerId:this.$store.state.market.retailer.id,
retailerCode:this.$store.state.market.retailer.code,
outletId:this.$store.state.market.outlet.id,
outletNo:this.$store.state.market.outlet.id.externalId
小按钮
<el-button type="danger" @click="submit_add('add_from')" >黑色按钮</el-button>
<el-button type="primary" @click="resetForm('add_from')">橙色按钮</el-button>
<el-button type="info" @click="resetCalendarBtn()" >灰色按钮</el-button>
<i class="hover_orange iconfont iconlajitong" :name="scope.row.id" @click="open_del(scope.row.id)" style="cursor: pointer;font-size: 20px;vertical-align: middle;">表格里面的小按钮,(文字去掉)</i>
复合型按钮
<div name="搜索组合按钮">
<el-input class="combination" placeholder="请输入内容" id="search-text" prefix-icon="el-icon-search" v- model.trim="keyword" style="width:250px"></el-input>
<el-button type="danger" class="combination" @click="search_click()">搜索</el-button>
</div>
<div name="3组合按钮">
<el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="search_text" class="input-with-select" >
<el-select v-model="search_type" slot="prepend" placeholder="请选择" style="width: 120px">
<el-option label="条形码" value="2"></el-option>
<el-option label="商品名称" value="1"></el-option>
<el-option label="商品货号" value="3"></el-option>
</el-select>
<el-button slot="append" type="primary" id="searchBtn">搜索</el-button>
</el-input>
</div>
按钮和表单禁用
<el-button v-if="editDisabled" :disabled="entityObj.status == 1||entityObj.hasCarouseltrue:false":title="entityObj.status == 1||entityObj.hasCarousel?'该广告已启用,不支持编辑':''" :class="entityObj.status == 1||entityObj.hasCarousel?'disableBtn':''" type="danger" @click="editBtn">禁用编辑按钮</el-button>
<el-input :class="process==1?'readonly_input':''" v-model="add_param.name" :readonly="process==1">输入框禁用</el-input>
表格和分页
html
<div>
<div v-if="page_count!=0" class="table_content">
<el-table :data="table_list" v-if="page_count!=0" class="table_nopadding" ref="multipleTable" stripe :header-cell-style="{fontSize: '14px',color: '#777777',padding:'12px 0',fontWeight: 'normal'}" style="width: 100%;font-size: 14px;color: #333;height: 552px;border:1px solid #EBEEF5">
<el-table-column header-align="left" align="left" prop="name" width="310" label="档期名称">
<template slot-scope="scope">
<span class="orange_hover" style="cursor: pointer" @click="dmCalendarPage(scope.row.id)" :title="scope.row.name">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column header-align="left" align="left" prop="dmCount" label="快讯单张数" width="120"></el-table-column>
<el-table-column header-align="left" align="left" width="200" label="起始时间">
<template slot-scope="scope">
{{startTime[scope.$index]}}
</template>
</el-table-column>
<el-table-column header-align="left" align="left" width="200" label="结束时间">
<template slot-scope="scope">
{{endTime[scope.$index]}}
</template>
</el-table-column>
<el-table-column header-align="left" align="left" label="状态">
<template slot-scope="scope">
{{status[scope.$index]}}
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: center;margin-top: 40px;"
background
@current-change="handleCurrent"
:current-page.sync="c_page"
layout="prev, pager, next, jumper"
:page-count="page_count">
</el-pagination>
</div>
<div v-else id="promptDiv" style="opacity: 0.4;">
<div id="searchResult" style="display: block">
<img src="@/assets/img/search_nothing.png" style="margin-bottom:20px;"/>
<p>没有找到相关的档期,请检查搜索内容是否有误</p>
</div>
</div>
</div>
js
data() {
table_list:[],//表格数据
page_count:0,//总页数
c_page:1,//当前页面
s_param:{//查询列表参数
outletId:this.$store.state.market.outlet.id,
calendarType:0,
num: 0,
},
},
watch:{
//页数要减一
c_page(new_val,old_val) {
this.s_param.num = new_val-1
}
},
methods:{
//获取列表
get_table_list(page) {
let self = this
let url = "/webApi/dm/calendar/list";
let params = this.s_param;
self.$api.post(this, url, params, data => {
self.page_count = data.pageCount;
self.table_list = data.results;
})
},
}
form校验规则
必填:{required: true, message: ‘必填’, trigger: ‘blur’ },
正整数:{type:’integer’,min: 0, max:999999999,message: ‘请填写正整数’,trigger: ‘blur’}
数组:{type:’array’,required: true, message: ‘必填’, trigger: ‘change’ },
手机:{pattern: /^((0d{2,3}-d{7,8})|(1[34578]d{9}))$/, message: ‘手机为:13,14,15,17,18号段’,trigger: ‘change’},