JeecgBoot前端页面基础信息及组件样式

JeecgBoot前端页面基础信息及组件样式

一、基础信息

1、去掉登录后的首页图片

views/dashboard/Analysis.vue
 <div style="margin-left: -0.8%;margin-top: -0.8%" id="blink">
     <img src="@/assets/show4.jpg" style="width: 101%;height: 80%">
 </div>

二、页面样式

1、列表宽度设置

customRender: (t) => (<j-ellipsis value={t} length={48}/>)
或
customRender:function(text){
  return (<j-ellipsis value={text} length={16}/>)
}

2、搜索条件

（1）限制当天之后的日期不可选

import moment from 'moment' 或import moment from 'dayjs'
//方法默认显示当前时间
moment.js，moment()
//会显示当前时间
{{moment(None).format(‘lll’)}}

<a-col :span="8">
	<a-form-model-item label="购买时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buyDatetime">
	<j-date placeholder="请选择购买时间"  v-model="model.buyDatetime" style="width: 100%" 	:disabledDate="disabledDate"/>
	</a-form-model-item>
</a-col>

data () {
      return {
        pickerAfter:{
          disabledDate(time){
            return time.getTime() > Date.now();
          }
        },
   }
   
methods: {
      //限制当天之后的日期不可选
      disabledDate(current) {
        return current && current > moment().subtract(0, "days");
      },
 }

（2）table列表列添加上下箭头筛选:

sorter:(a,b) =>{
   return a.lastTime.localeCompare(b.lastTime)
}
//或
{
  title:'订单支出',
  align:"center",
  dataIndex: 'outPrice',
  sorter:(a,b) => a.outPrice - b.outPrice
},

（3）搜索条件按时间搜索

<a-col :span="12" v-show="selectTime">
    <a-select placeholder="时间" style="width: 200px" @change="handleChange">
         <a-select-opt-group  label="固定选项">
            <a-select-option value="1">一天内</a-select-option>
            <a-select-option value="2">一周内</a-select-option>
            <a-select-option value="3">一年内</a-select-option>
          </a-select-opt-group>
             <a-select-opt-group label="自定义">
          <a-select-option value="changeTime">
             <a-range-picker @click="onChangeTime"/>
          </a-select-option>
        </a-select-opt-group>
    </a-select>
</a-col>

（4）列表插槽跳转

{
          title: '公司名称',
          align: 'center',
          dataIndex: 'companyName',
          scopedSlots: { customRender: 'companyName' }
 },

<span slot="companyName" slot-scope="text,record">
        <a @click="ClientFollow(record)">{{ text }}</a>
        </span>

//插槽跳转跟踪记录页面
    ClientFollow(record) {
      this.$refs.YtFollowRecordModalSee.edit(record)
      this.$refs.YtFollowRecordModalSee.title = '添加/查看记录'
      this.$refs.YtFollowRecordModalSee.disableSubmit = true
    },

（5）form表单组合输入框

<a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
	<j-dict-select-tag style="width:15%"  v-model="model.dataClassify" dictCode="date_type" placeholder="请选择" />
	<a-input-number style="width:30%"  v-model="model.timeNum" placeholder="请输入次数"/>
</a-input-group>

（6）改变列表字体颜色

{
  title:'客单编号',
  align:"center",
  dataIndex: 'guestNo',
  customRender:function(text){
    return <a-tag style='color: red'>{{text}}</a-tag>
    或return <div style='color: red'>{{text}}</div>
    或return <span style='color: red'>{{text}}</span>
  }
},

（7）多行文本限制字数，行数，显示字数

<a-col :span="12">
  <a-form-model-item label="主题信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="theme">
    <a-textarea v-model="model.theme" :max-length=5  :auto-size="{ minRows: 2, maxRows: 3 }" @change="change"
                ></a-textarea>
    <span style="position: relative;left: 250px;user-select: none;z-index: 999;top: -10px;">{{len}}/100</span>
  </a-form-model-item>
</a-col>

data(){
    return:{
        len:0,    
    }
}

methods:{
 	 change(){
  		this.len = this.model.theme.length;
	},
}

三、路由跳转

//内部跳转  
loadData() {
        this.$route.query.id
    }

test() {
        /*this.$router.push({ path: '/repair/cardList' }).catch(() => {
          console.log('跳转出错,这个错误从哪里来的')
        })*/

        this.$router.push({
          query: {id:'1'},        
        });
      },

//查看详情
      handleCK(props){
        this.$router.push({
          query: {blockById:props.row.id},
          path: '/repair/dataList',
        });
      },

四、获取当前登录用户账号

import store from '@/store/'
var userId = store.getters.userInfo.id;

this.userInfo()
//返回一个object.里面有用户的所有内容.
如username,

五、阻止div穿透冒泡的方法

一个在学习的开发者，勿喷，欢迎交流