<template>
<div class="index">
<!-- 頭部信息 -->
<div class="title">
<span>
<el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
<span style="float:left; padding:0 10px 0 5px; borderLeft:3px solid red;">當前位置:</span>
<el-breadcrumb-item :to="{ path: '/'}">登陸頁面</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>使用參考</el-breadcrumb-item>
</el-breadcrumb>
</span>
<span>{{ msg }}</span>
<span style="width:280px">現(xiàn)在時間：{{ nowtime }}</span>
<span style="width:200px;">距離過年： <span style="color:#FF6600">{{ overtime }}</span></span>
</div> <hr>
<!-- 圖表 -->
<div class="echartsview">
<div class="echarts" id="echarts"></div>
<div class="echarts" id="echartsline"></div>
</div> <hr>
<!-- 幻燈片（待改進添加圖片） -->
<div class="carousel">
<div class="item">
<el-carousel trigger="hover" height="150px" arrow="always" >
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="item">
<el-carousel type="card" trigger="click" height="150px" indicator-position="outside" :interval='2000' >
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div> <hr>
<!-- 卡片 -->
<div class="cardgroup">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>顏色選擇</span>
<el-button style="float: right;" size="mini" type="primary" @click="notification('左上角', '自定義位置', 'top-left', 'success')">左上角</el-button>
</div>
<!-- 顏色選擇 頭像-->
<el-avatar shape="circle" :size="60" icon="el-icon-user-solid"></el-avatar>
<el-color-picker style="margin: 0 20px;" v-model="color"></el-color-picker>
<el-avatar shape="square" :size="60">zhou</el-avatar>
</el-card>
<el-card shadow="never">
<div slot="header" class="clearfix">
<span>開關按鈕</span>
<el-button style="float: right;" size="mini" type="success" plain @click="notification('右上角', '自定義位置', 'top-right', 'warning')">右上角</el-button>
</div>
<!-- 開關按鈕 -->
<el-switch v-model="switch_value" active-color="#13ce66" inactive-color="#ff4949" active-text="打開文字" inactive-text="關閉文字"></el-switch>
</el-card>
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>標記·提示</span>
<el-button style="float: right;" size="mini" type="warning" round @click="notification('左下角', '自定義位置', 'bottom-left', 'info')">左下角</el-button>
</div>
<!-- 鼠標懸浮提示 標記 -->
<span style="display:flex;justifyContent:space-around">
<el-tooltip effect="dark" content="可以顯示數(shù)字" placement="top" >
<el-badge :value="200" :max="99" class="item"> <el-button size="small">標記</el-button> </el-badge>
</el-tooltip>
<el-tooltip effect="dark" content="可以顯示小圓點" placement="top" >
<el-badge is-dot :max="99" class="item"> <el-button size="small">標記</el-button> </el-badge>
</el-tooltip>
<el-tooltip effect="dark" content="可以顯示自定義內容" placement="top" >
<el-badge value="hot" class="item"> <el-button size="small">標記</el-button> </el-badge>
</el-tooltip>
</span>
</el-card>
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>加載</span>
<el-button style="float: right;" size="mini" type="danger" icon="el-icon-delete" circle @click="tip('刪除成功-tip', 'success', '2000')"></el-button>
<el-button style="float: right; marginRight: 10px;" size="small" type="text" @click="notification('右下角', '自定義位置', 'bottom-right', 'error')">右下角</el-button>
</div>
<!-- 加載 -->
<div v-loading="isloading" element-loading-text="正在加載中..." element-loading-spinner="el-icon-loading" element-loading-background="#ffffff" style="float: left;width:150px;padding:20px 0;textAlgin:center;backgroundColor:#eeeeee;">加載</div>
<el-button style="float: right;margin: 10px 10px 0 0" type="text" @click="isloading = false">關閉</el-button>
</el-card>
</div> <hr>
<!-- 表格 -->
<div class="table_list">
<el-table :data="exportData" stripe border :header-cell-style="RowStyle" @selection-change="selectionChange" @row-click="rowClick" :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column header-align="center" align="center" type="selection" width="50" />
<el-table-column header-align="center" align="center" label="序號" type="index" width="100">
<template slot-scope="scope">
<span>{{ (currentPage - 1) * size + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="時間" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="狀態(tài)">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '單身': '別想了' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-button size="mini" type='text' @click="edit(scope.$index, scope.row)">編輯</el-button>
<el-button size="mini" type='warning' icon="el-icon-full-screen" plain @click="tableOpen(scope.$index, scope.row )" >彈窗</el-button>
<el-button size="mini" type='danger' icon="el-icon-delete" @click="tableDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分頁 hide-on-single-page-->
<el-pagination
v-if="totalRecord"
:page-sizes="[5, 10, 20, 30]"
:page-size="size"
:current-page="currentPage"
:total="totalRecord"
background
layout=" total, prev, pager, next, sizes, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> <hr>
<!-- 結合 -->
<div class="collapse">
<!-- 折疊面板 -->
<div class="item">
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="一致性" name="1">
<template slot="title">
后面是自定義添加的一個圖標<i class="header-icon el-icon-info"></i>
</template>
<div>與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
</el-collapse-item>
<el-collapse-item title="反饋" name="2">
<div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
</el-collapse-item>
<el-collapse-item title="效率" name="3">
<div>簡化流程：設計簡潔直觀的操作流程；</div>
</el-collapse-item>
<el-collapse-item title="可控" name="4">
<div>用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；</div>
</el-collapse-item>
</el-collapse>
</div>
<!-- 標簽頁 -->
<div class="tiem">
<el-tabs v-model="tabsnum" tab-position="tabPosition" type="border-card" @tab-click="handleClick">
<el-tab-pane><span slot="label"><i class="el-icon-date"></i> 我的行程</span>
<el-popover placement="left" trigger="hover">
<el-calendar v-model="value" style="width:720px;"></el-calendar>
<el-button slot="reference" size="small" style="width: 150px;">查看時間</el-button>
</el-popover>
</el-tab-pane>
<el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
</el-tabs> <hr>
<el-tabs v-model="tabsnum" tab-position="bottom" @tab-click="handleClick">
<el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
</el-tabs>
</div>
</div> <hr>
<!-- 粘貼板 -->
<div class="copyview">
<span>這里是剪貼板的使用示例：</span>
<el-input v-model="copyinputdata" maxlength="22" show-word-limit size="small" placeholder="請輸入你要進行復制的內容" />
<el-button type="primary" size="small" plain icon="el-icon-copy-document" @click="starttocopy(copyinputdata,$event)">復制文本</el-button>
</div> <hr>
<!-- 導出 -->
<div class="exporttoexcelview">
<span>這里是導出文件的示例：</span>
<el-button :loading="exportloading" plain size="small" type="primary" icon="el-icon-document" @click="exporttoexcel()">導出excel</el-button>
</div> <hr>
<!-- 提示信息 light -->
<el-alert show-icon center title="這里是提示的信息" type="success" effect="dark" :closable="true" close-text="知道了" @close="alert_hd"></el-alert>
<!-- 步驟條 -->
<el-steps :active="stepsnum" direction='horizontal' align-center style="padding:16px 0" finish-status="success">
<el-step title="買家下單" description="這個可以給他動態(tài)綁定數(shù)據(jù)" />
<el-step title="買家付款" description="時間" />
<el-step title="商家發(fā)貨" description="時間" />
<el-step title="交易完成" description="時間" />
<el-step title="已評論 " description="時間" icon="el-icon-edit" />
</el-steps>
<!-- 滑塊 進度條 -->
<div class="slider">
<div style="minWidth:500px;">
<el-slider v-model="slidernum" :show-tooltip="true" :step="5" show-stops> </el-slider>
<el-progress :percentage="slidernum"></el-progress> <br>
<el-progress :text-inside="true" :stroke-width="18" :percentage="slidernum" status="success"></el-progress>
</div>
<span>
<el-progress type="circle" :percentage="slidernum"></el-progress>
<el-progress type="dashboard" :percentage="slidernum" :color="slidercolors"></el-progress>
</span>
</div>
<!-- 分割線 vertical-->
<el-divider content-position="left" direction="horizontal">此分割線可橫可縱，文字信息可左中右，還可以添加圖標 <i class="el-icon-loading"></i></el-divider>
<!-- 表單 -->
<div class="formlist">
<div class="formcontent">
<el-form ref="form" label-position="left" :model="form" status-icon label-width="100px" :rules="rules">
<el-form-item label="用戶名字" prop="username">
<el-input v-model="form.username" size="small" prefix-icon="el-icon-user" suffix-icon="el-icon-more"></el-input>
</el-form-item>
<el-form-item label="輸入密碼" prop="passward">
<el-input v-model="form.passward" size="small" prefix-icon="el-icon-document-remove" show-password></el-input>
</el-form-item>
<el-form-item label="確認密碼" prop="surepassward">
<el-input v-model="form.surepassward" size="small" prefix-icon="el-icon-document-checked" show-password></el-input>
</el-form-item>
<el-form-item label="年齡大小" prop="agelengths">
<el-input v-model.number="form.agelengths" size="small" prefix-icon="el-icon-tickets"></el-input>
</el-form-item>
<el-form-item label="單選按鈕" prop="radiotype">
<el-radio-group v-model="form.radiotype" @change.native="radioRow(form.radiotype)">
<el-radio :label="1">男的</el-radio>
<el-radio :label="2">女的</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="多選按鈕" prop="checksome">
<el-checkbox-group v-model="form.checksome">
<el-checkbox label="vue"></el-checkbox>
<el-checkbox label="react"></el-checkbox>
<el-checkbox label="jquery"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="日期時間" prop="selecttime">
<el-date-picker v-model="form.selecttime" size="small" :picker-options="pickerOptions" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss" format="yyyy-MM-dd hh:mm:ss" start-placeholder="開始日期" end-placeholder="結束日期" range-separator="至" />
</el-form-item>
<el-form-item label="聯(lián)系方式" prop="email">
<el-input v-model="form.email" size="medium" maxlength="18" show-word-limit class="input-with-select">
<el-select v-model="category" slot="prepend" size="small" style="width:120px;backgroundColor:#ffffff;">
<el-option v-for="item in options_category" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-dropdown split-button type="primary" divided="true" slot="append" trigger="click" size="medium">立即聯(lián)系
<el-dropdown-menu slot="dropdown">
<el-dropdown-item> <el-button type="text" size="small">記 下 </el-button> </el-dropdown-item>
<el-dropdown-item command="copy"> <el-button type="text" size="small"> 添 加 </el-button> </el-dropdown-item>
<el-dropdown-item command="delet"> <el-button type="text" size="small"> 刪 除 </el-button> </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
</el-input>
</el-form-item>
<el-form-item label="個人介紹" >
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="請輸入信息" maxlength="200" show-word-limit v-model="form.textarea" @keyup.enter.native="form_yes('form')"></el-input>
</el-form-item>
<el-form-item> <!-- 表單在驗證提交的時候，需要傳入表單綁定的值對象 -->
<el-button type="warning" size="small" @click="form_no('form')">取消/重置</el-button>
<el-button type="success" size="small" @click="form_yes('form')">提交驗證</el-button>
</el-form-item>
</el-form>
</div>
<div class="formother">
<!-- 打開抽屜 -->
<span style="margin-left: 20px;color:#3a4a5a">打開隱藏的抽屜: </span>
<el-button plain size="small" style="margin-left: 20px;" @click="tabletop = true">上邊</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="tablebottom = true">下邊</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="tableleft = true">左邊</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="tableright = true">右邊</el-button> <hr>
<!-- 路由傳遞參數(shù) -->
<span style="margin-left: 20px;color:#3a4a5a">路由的跳轉和參數(shù)的傳遞: </span>
<router-link :to="{name:'Login', query: {userName: userName}}">
<el-button plain size="small" style="margin-left: 20px;">按鈕跳轉</el-button>
</router-link>
<el-button plain size="small" style="margin-left: 20px;" @click="toOther()">方法跳轉</el-button> <hr>
<!-- 打開新頁面 -->
<span style="margin-left: 20px;color:#3a4a5a">打開一個新的頁面：</span>
<el-button plain size="small" style="margin-left: 20px;" @click="openNew()">打開新頁面</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="downImg()">下載圖片</el-button> <hr>
<!-- 頁頭 -->
<el-page-header @back="goBack" style="marginLeft:20px" content="本頁"></el-page-header> <hr>
<!-- 評分 -->
<el-rate v-model="ratevalue" show-text></el-rate> <br>
<el-rate v-model="ratevalue" disabled show-score text-color="#ff9900" score-template="{value}"> </el-rate> <hr>
<!-- 小布局 -->
<p style="margin-left: 20px;color:#3a4a5a">常用的小布局：</p>
<div class="img_show">
<img :src="url" style="height: 78px;width: 78px">
<div class="content"> <span>名稱:這里是名稱</span> <p>￥ 999.9</p> </div>
</div>
<div class="row"><div class="left">內容：</div><div class="right">{{ msg }}</div></div> <hr>
<!-- 回到頂部 做組件-->
</div>
</div> <hr>
<!-- 導航 :collapse="true" 收起 待改進-->
<div class="content">
<el-menu
:default-active="$route.path"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect(e)"
router>
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/" :route="{path: '/templateManagementInstitution'}">設置</el-menu-item>
<el-menu-item index="/">我的</el-menu-item>
</el-menu>
</div> <br> <hr>
<!-- 彈框 -->
<el-dialog :visible.sync="dialog" width="52%" top="15vh" :show-close="true" center title="提示" :fullscreen="false" :close-on-click-modal="false">
<h5>圖片展示</h5>
<!-- 圖片 -->
<el-image style="width:100px;height:100px" :src="url" :preview-src-list="imageList">
<!-- 自定義加載失敗內容 -->
<div slot="error" class="image-slot" style="border: 1px solid #eeeeee;textAlgin:center;">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<el-dialog width="30%" title="內層 Dialog" :visible.sync="dialogChildren" append-to-body></el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialog = false" size="small">確 定</el-button>
</div>
</el-dialog>
<!-- 抽屜 -->
<el-drawer title="我嵌套了表格!" :visible.sync="tableright" direction="rtl" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="時間" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="狀態(tài)">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '單身': '別想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer title="我嵌套了表格!" :visible.sync="tableleft" direction="ltr" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="時間" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="狀態(tài)">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '單身': '別想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer title="我嵌套了表格!" :visible.sync="tabletop" direction="ttb" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="時間" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="狀態(tài)">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '單身': '別想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer title="我嵌套了表格!" :visible.sync="tablebottom" direction="btt" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="時間" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="狀態(tài)">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '單身': '別想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
</template>
<script>
import { nowTime, Countdown } from '@/utils/time'
import clip from '@/utils/clipboard' // 復制引用
export default {
name: 'Antip',
components: {}, // 存放導入的組件 DialogProduct
// 子組件接受值, 在使用的時候可以直接傳遞方法
// <DialogProduct :product-id="this.id" :up-data-list="getList()" /><br>
props: {
productId: {
type: Number,
default: () => {
return 1
}
},
upDataList: {
type: Function,
default: () => {
return () => {}
}
}
},
data () { // 存放數(shù)據(jù)
// 自定義驗證規(guī)則
var passOne = (rule, value, callback) => {
if (value === '') {
callback(new Error('請輸入密碼'))
} else {
if (this.form.passward !== '') {
this.$refs.form.validateField('checkPass')
}
callback()
}
}
var passTwo = (rule, value, callback) => {
if (value === '') {
callback(new Error('請再次輸入密碼'))
} else if (value !== this.form.passward) {
callback(new Error('兩次輸入密碼不一致!'))
} else {
callback()
}
}
var age = (rule, value, callback) => {
if (!value) {
return callback(new Error('年齡不能為空'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('請輸入數(shù)字值'))
} else {
if (value < 18 || value > 200) {
callback(new Error('必須年滿18歲，同時小于200歲'))
} else {
callback()
}
}
}, 1000)
}
return {
msg: '一些使用示范用做參考',
nowtime: '2222年12月22日 22:22:22', // 時間
overtime: '00:00:00', // 倒計時
copyinputdata: '我是即將被復制的內容', // 要復制的內容
dialog: false, // 彈框
dialogChildren: false, // 子彈框
url: 'http://imgtest.icjsq.com/cjsq_img/common/atsh_w2870_h4313_6b6aca0f95144395896d4746182ae376.jpg', // 圖片
imageList: ['http://imgtest.icjsq.com/cjsq_img/common/atsh_w2870_h4313_6b6aca0f95144395896d4746182ae376.jpg'], // 圖片預覽
tabletop: false, // 抽屜
tablebottom: false, // 抽屜
tableleft: false, // 抽屜
tableright: false, // 抽屜
// 導航
activeName: '3', // 折疊面板默認打開;
stepsnum: 3, // 步驟條
tabsnum: 'second', // 選項卡也默認
tabPosition: 'top', // 選項卡位置
slidernum: 34, // 滑塊；進度條
slidercolors: 'red', // 進度條顏色
switch_value: false, // 開關
color: '#C63C3C', // 顏色選擇器的顏色
isloading: true, // 加載
value: new Date(), // 日歷
userName: 'zhouzip', // 路由傳遞參數(shù)
getUserName: '', // 得到的路由參數(shù)
ratevalue: 3.7, // 評分數(shù)據(jù)null
exportloading: false, // 導出緩沖
exportData: [ // 獲取的要導出數(shù)據(jù)
{
orderNum: '15933432526',
orderTime: '2019-11-11',
title: '帥哥',
userName: 'zhouzip',
merchantName: '中國',
status: 1,
returnMoneyTime: '--'
}
],
exportlist: [], // 導出的數(shù)據(jù)存放
tableData: [], // 表格
size: 10, // 每頁的數(shù)據(jù)條數(shù)
totalRecord: 100, // 初始共00條數(shù)據(jù)，其實沒有，等接口返回,總條數(shù)
currentPage: 1, // 當前導航頁數(shù)的默認頁數(shù)
// 下拉框
category: '1',
options_category: [
{
value: '1',
label: '微信'
},
{
value: '2',
label: 'qq'
},
{
value: '3',
label: '郵箱'
}
],
// 表單
form: {
username: '',
passward: '',
surepassward: '',
agelengths: '',
radiotype: '',
checksome: [],
selecttime: '', // 時間,數(shù)組的形式,time[0],time[1]
email: ''
},
// 在自定義規(guī)則的時候，需要在data外定義，定義好之后和其他驗證規(guī)則一樣，只需要引入即可
// 驗證規(guī)則中，要指定驗證內容的類型，多選array，時間date，郵箱email, 數(shù)字number
// trigger的意思是怎么觸發(fā)這個驗證,可以疊加 使用數(shù)組
rules: {
username: [ // 輸入框
{ required: true, message: '請?zhí)顚懹脩裘?, trigger: 'blur' },
{ min: 2, max: 8, message: '長度在 2 到 8 個字符', trigger: 'blur' }
],
passward: [
{ required: true, validator: passOne, trigger: 'blur' }
],
surepassward: [
{ required: true, validator: passTwo, trigger: 'blur' }
],
agelengths: [
{ required: true, validator: age, trigger: 'blur' }
],
radiotype: [
{ required: true, message: '請選擇正確的性別', trigger: 'change' }
],
checksome: [
{ type: 'array', required: true, message: '請至少選擇一項技能', trigger: 'change' }
],
selecttime: [
{ type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
],
email: [
{ required: true, message: '請輸入郵箱地址', trigger: 'blur' },
{ type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
]
},
// 時間快捷方式
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一個月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三個月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
filters: {}, // 過濾器
computed: {
// 判斷本頁路由
toChildren: function () {
if (this.$route.path === '/antip') return false
return true
}
}, // 計算屬性
watch: { // 監(jiān)聽
// 表格每一行中插入一行
tableData (newValue, oldValue) {
if (this.$route.path === '/auction/auctionorder/auctiondepositorder') {
this.$nextTick(function () {
var _parent1 = document
.getElementsByClassName('el-table__body')[0]
.getElementsByTagName('tbody')[0]
var chil = document.getElementsByClassName('newAdd').length
for (var x = 0; x < chil; x++) {
_parent1.removeChild(document.getElementsByClassName('newAdd')[0])
}
if (this.tableData !== null) {
console.log('執(zhí)行了嗎')
for (var j = 0; j < this.tableData.length; j++) {
// 記住選擇tr
var _parent = document
.getElementsByClassName('el-table__body')[0]
.getElementsByTagName('tbody')[0]
var _child = document
.getElementsByClassName('el-table__body')[0]
.getElementsByTagName('tr')[j]
var newChild = document.createElement('div')
newChild.style.width = '1500px'
newChild.style.fontSize = 14 + 'px'
newChild.style.textIndent = 2 + 'rem'
newChild.style.lineHeight = 50 + 'px'
newChild.style.wordSpacing = 37 + 'px'
newChild.className = 'newAdd'
newChild.innerHTML =
' 訂單號：' +
this.tableData[j].nine +
' 繳納時間：' +
this.tableData[j].ten +
'<button style="border-radius:3px;color:#409EFF;background-color:#409EFF30;border:1px solid #409EFF50;">' +
(this.tableData[j].orderSource === 0
? 'APP'
: this.tableData[j].orderSource === 1
? '小程序'
: this.tableData[j].orderSource === 2
? 'H5'
: '暫無數(shù)據(jù)') +
'</button>' +
'<i style="float:right;font-size:26px;margin-top:10px;color:' +
(this.tableData[j].colorMark === 0
? 'rgb(236, 128, 141)'
: this.tableData[j].colorMark === 1
? 'rgb(245, 154, 35)'
: this.tableData[j].colorMark === 2
? 'rgb(2, 167, 240)'
: this.tableData[j].colorMark === 3
? 'rgb(112, 182, 3)'
: this.tableData[j].colorMark === 4
? 'rgb(194, 128, 255)'
: 'white') +
'" class="el-icon-s-flag"></i>'
_parent.insertBefore(newChild, _child)
}
}
})
}
}
},
directives: {}, // 指令
beforeCreate () {},
created () {},
beforeMount () {},
mounted () {
// this.getTimes() // 獲取時間
// this.getOverTime() // 倒計時
this.drawChart() // 圖表繪制
this.drawChartLine() // 圖表繪制
this.getParams() // 得到路由參數(shù)
},
beforeUpdate () {},
updated () {},
beforeDestroy () {},
destroyed () {},
methods: { // 方法
// 消息提示
tip (message, type, time) {
this.$message({
message: message,
type: type,
duration: time
})
},
// 消息彈框
notification (title, message, position, type) {
this.$notify({
title: title,
message: message,
position: position,
type: type,
showClose: false
})
},
// 路由跳轉
toOther () {
this.$router.push({
name: 'Login',
query: {
userName: this.userName
}
})
},
// 得到路由參數(shù)
getParams () {
const routerParamsuserName = this.$route.query.userName
this.getUserName = routerParamsuserName
},
// 頁面返回
goBack () {
this.$router.push({
name: 'Home'
})
},
// 導航、
handleSelect (e) {
console.log(e)
},
// 表格彈框
tableOpen () {
this.dialog = true
},
// 表格刪除
tableDelete () {
this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示標題', {
confirmButtonText: '確定',
cancelButtonText: '取消',
center: 'true',
type: 'warning'
})
.then(() => {
this.$alert('真的要刪除嗎？', '確認刪除', {
confirmButtonText: '確定',
center: 'true',
callback: action => {
this.$prompt('請輸入郵箱', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
center: 'true',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '郵箱格式不正確'
})
.then(({ value }) => { this.tip(value, 'success', '2000') })
.catch(() => {})
}
})
})
.catch(() => {})
},
// 標簽頁點擊方法
handleClick (tab) {
console.log(tab)
},
// 提示信息關閉回調-alert
alert_hd () {},
// 單選變化
radioRow (e) {
console.log(e)
},
// 表單驗證的關閉和提交驗證
form_no (form) {
// clearValidate 只是移除檢驗的結果
this.$refs[form].resetFields()
setTimeout(() => { this.tip('取消/重置', 'warning', '2000') }, 200)
},
form_yes (form) {
this.$refs[form].validate((valid) => {
if (valid) {
setTimeout(() => { this.tip('提交驗證成功', 'success', '2000') }, 200)
} else {
return false
}
})
},
// 表格表頭樣式
RowStyle ({ row, rowIndex }) {
return 'color:#3a4a5a;backgroundColor: #eee;'
},
// 表格一行點擊的時候
rowClick (row) {
console.log(row)
},
// 表格多選方法
selectionChange (e) {
console.log(e)
},
// 分頁
handleSizeChange (e) {
this.size = e
},
handleCurrentChange (e) {
this.currentPage = e
},
// 表格行按鈕
edit (index, row) {
console.log(index, row)
},
// 獲取現(xiàn)在的實時時間
getTimes () {
setInterval(() => {
this.nowtime = nowTime()
}, 1000)
},
// 倒計時 傳入值格式：'2020/01/25 00:00:00'
getOverTime () {
var intervalOvertime = setInterval(() => {
this.overtime = Countdown('2020/01/25 00:00:00')
var date = (new Date('2020/01/25 00:00:00')) - (new Date())
if (date === 0 || date < 0) {
clearInterval(intervalOvertime)
}
}, 1000)
},
// 剪貼板的使用
starttocopy (text, event) {
clip(text, event)
},
// 表格導出
exporttoexcel () {
this.exportloading = true
var tableArray = this.exportData
for (var i = 0; i < tableArray.length; i++) {
const obj = {
orderNum: tableArray[i].orderNum,
orderTime: tableArray[i].orderTime,
title: tableArray[i].title,
userName: tableArray[i].userName,
merchantName: tableArray[i].merchantName,
status: tableArray[i].status === 1 ? '已繳納' : tableArray[i].status === 2 ? '已釋放' : tableArray[i].status === 3 ? '已轉尾款' : '',
returnMoneyTime: tableArray[i].returnMoneyTime
}
this.exportlist.push(obj)
}
console.log(this.exportData, '導出', this.exportlist)
import('@/utils/exportExel').then(excel => {
const tHeader = ['保證金訂單號', '繳納時間', '拍品名稱', '買家名稱', '供應商', '保證金狀態(tài)', '退款時間']
const filterVal = ['orderNum', 'orderTime', 'title', 'userName', 'merchantName', 'status', 'returnMoneyTime']
const list = this.exportlist
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data: data,
filename: '資金訂單',
autoWidth: true,
bookType: 'xlsx'
})
this.exportloading = false
this.exportlist = []
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
return v[j]
}))
},
// 打開新頁面
openNew () {
var a = document.createElement('a') // 生成一個a元素
var event = new MouseEvent('click') // 創(chuàng)建一個單擊事件
a.target = '_blank'
a.href = this.url // 將生成的URL設置為a.href屬性
a.dispatchEvent(event) // 觸發(fā)a的單擊事件
},
// 點擊下載
downImg () {
this.downloadIamge('this.url', '圖片下載')
window.open(this.url) // 這個是直接打開新地址的
console.log(this.url)
},
downloadIamge (imgsrc, name) { // 下載圖片地址和圖片名
var image = new Image()
// 解決跨域 Canvas 污染問題
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png') // 得到圖片的base64編碼數(shù)據(jù)
var a = document.createElement('a') // 生成一個a元素
var event = new MouseEvent('click') // 創(chuàng)建一個單擊事件
a.download = name || 'photo' // 設置圖片名稱
a.href = url // 將生成的URL設置為a.href屬性
a.dispatchEvent(event) // 觸發(fā)a的單擊事件
}
image.src = imgsrc + '?time=' + new Date().valueOf()
},
// 圖表
drawChart () {
// 基于準備好的dom，初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('echarts'), 'dark') // 修改主題
let option = {
backgroundColor: '#2c343c', // 背景顏色
textStyle: { // 字體顏色
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: { // 餅圖中的線條顏色
lineStyle: {
color: 'red'
}
},
visualMap: { // 明亮度影射
show: false, // 不顯示 visualMap 組件，只用于明暗度的映射
min: 80, // 映射的最小值為 80
max: 600, // 映射的最大值為 600
inRange: { // 明暗度的范圍是 0 到 1
colorLightness: [0, 1]
}
},
title: { // 圖表的標題
text: '餅圖示例'
},
tooltip: {}, // 定義提示框
legend: { // 定義小圖標
x: '200px', // 定義位置
y: '10px',
data: [
{ // 可單獨定義每一個圖標
name: '聯(lián)盟廣告',
icon: 'circle'
}, '視頻廣告', '郵件營銷', '直接訪問', '搜索引擎'] // 定義要展示的圖標名稱，與data中那么對應
},
series: {
type: 'pie', // 餅圖
roseType: 'angle', // 玫瑰圖
data: [
{ value: 235, name: '視頻廣告' },
{ value: 274, name: '聯(lián)盟廣告' },
{ value: 310, name: '郵件營銷' },
{ value: 335, name: '直接訪問' },
{ value: 400, name: '搜索引擎', itemStyle: {color: '#c23531'} } // 可以單個設置顏色
],
itemStyle: { // 整體顏色
color: '#c23531', // 餅圖的顏色
shadowBlur: 200, // 陰影的大小
shadowOffsetX: 0, // 陰影水平方向上的偏移
shadowOffsetY: 0, // 陰影垂直方向上的偏移
shadowColor: 'rgba(0, 0, 0, 0.5)', // 陰影顏色
emphasis: { // 鼠標hover樣式
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
}
myChart.setOption(option)// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
},
drawChartLine () {
// 基于準備好的dom，初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('echartsline')) // 修改主題
let option = {
title: { // 圖表的標題
text: '折線·柱狀示例'
},
xAxis: { // x軸
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // x軸的數(shù)據(jù)
splitLine: { show: false }, // 去除網(wǎng)格分割線
splitArea: {show: false}, // 保留網(wǎng)格區(qū)域
boundaryGap: true, // 兩側留白
axisLine: { // 坐標線
lineStyle: {
type: 'solid',
color: '#d8d8d8', // 軸線的顏色
width: '2'// 坐標線的寬度
}
},
axisTick: {// 刻度
show: true// 不顯示刻度線
},
axisLabel: {
textStyle: {
color: '#878787' // 坐標值的具體的顏色
}
}
},
yAxis: { // y軸
name: '單位：次', // 軸的名字，默認位置在y軸上方顯示
max: 2500, // 最大刻度
type: 'value',
axisLine: { // 坐標線
show: true
},
axisTick: {// 刻度
show: true
},
axisLabel: {
textStyle: {
color: '#878787' // 坐標值得具體的顏色
}
},
minInterval: 5, // 標值的最小間隔
splitLine: {
lineStyle: {
color: ['#f6f6f6'] // 分割線的顏色
}
}
},
toolbox: { // 菜單功能
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
legend: { // 每個圖標的樣式
data: ['郵件營銷', '提交次數(shù)', '收取次數(shù)'], // 與series的name對應
left: '25%', // 圖例的位置，可以用像素，可以用百分比，也可以用center，right等
top: 12.5, // 圖例的位置
itemWidth: 10, // 圖例圖標的寬
itemHeight: 10, // 圖例圖標的高
textStyle: {
color: '#878787' // 值的具體的顏色
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
series: [
{
name: '郵件營銷',
type: 'line',
stack: '總量', // 數(shù)據(jù)堆疊
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
normal: {
color: '#5d6de9', // 設置柱子顏色
label: {
show: true, // 柱子上顯示值
position: 'top', // 值在柱子上方顯示
textStyle: {
color: '#FD6B71'// 值得顏色
}
}
}
},
barWidth: 15// 設置柱子寬度，單位為px
},
{
name: '提交次數(shù)', // 每組數(shù)據(jù)的名字，與圖例對應
data: [820, 932, 901, 1934, 1290, 1330, 1320], // 數(shù)據(jù)
type: 'line', // 柱狀圖 line折線圖
areaStyle: {}, // 添加填充
smooth: true, // 平滑折線
itemStyle: {
normal: {
color: '#FD6B71', // 設置柱子顏色
label: {
show: true, // 柱子上顯示值
position: 'top', // 值在柱子上方顯示
textStyle: {
color: '#FD6B71'// 值得顏色
}
}
}
},
barWidth: 15// 設置柱子寬度，單位為px
}, {
name: '收取次數(shù)', // 每組數(shù)據(jù)的名字，與圖例對應
data: [320, 632, 801, 994, 290, 130, 2320], // 數(shù)據(jù)
type: 'bar', // 柱狀圖 line折線圖
areaStyle: {}, // 添加填充
itemStyle: {
normal: {
color: '#4a5a6a', // 設置柱子顏色
label: {
show: true, // 柱子上顯示值
position: 'top', // 值在柱子上方顯示
textStyle: {
color: '#4a5a6a'// 值得顏色
}
}
}
},
barWidth: 15// 設置柱子寬度，單位為px
}
]
}
myChart.setOption(option)// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
}
// <el-button :key="scope.$index" :loading="scope.row.isLoading" @click="refund(scope.$index, scope.row, scope)">強制退款</el-button>
// 給表格數(shù)據(jù)中的每一條數(shù)據(jù)添加一個字段
// if (!success.data.list) {
// this.tableData = []
// return
// }
// success.data.list = success.data.list.map(item => {
// item = { ...item, ...{ isLoading: false }}
// return item
// })-->
// this.tableData[scope.$index].isLoading = true 設置狀態(tài)
}
}
</script>
<style lang='less' scoped>
.index {
width: 100%;
min-height: 300px;
box-sizing: border-box;
padding: 10px 20px 200px;
// 導航的樣式修改
.el-menu-demo.el-menu--horizontal.el-menu {
width: 100%;
height: 50px;
margin-top: 20px;
.el-menu-item {
height: 50px;
line-height: 50px;
border-top-left-radius: 100%;
}
}
.title {
width: 100%;
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.echartsview {
display: flex;
justify-content: space-around;
.echarts {
width: 48%;
height: 300px;
}
}
.copyview {
box-sizing: border-box;
padding: 0 20px;
width: 100%;
.el-input {
width: 250px;
margin-left: 35px;
}
.el-button {
width: 120px;
margin-left: 12px;
}
}
.exporttoexcelview {
box-sizing: border-box;
width: 100%;
padding: 0 20px;
.el-button {
margin-left: 12px;
}
}
.table_list {
width: 100%;
min-height: 200px;
.el-table {
width: 100%;
}
.el-pagination {
padding: 10px 0px;
width: 100%;
text-align: center;
}
}
.collapse {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.item {
width: 48%;
}
}
.carousel {
display: flex;
justify-content: space-around;
.item {
width: 48%;
height: 200px;
text-align: center;
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
}
}
.cardgroup {
width: 100%;
display: flex;
justify-content: space-around;
.el-card {
width: 280px;
height: 150px;
text-align: center;
}
}
.slider {
width: 100%;
display: flex;
justify-content: space-around;
}
.formlist {
width: 100%;
padding: 0 0 30px;
display: flex;
justify-content: space-around;
.formcontent {
width: 600px;
}
.formother {
width: 40%;
//常用的小布局
.row {
display: table;
width: 100%;
min-height: 100px;
margin-top: 10px;
.left {
width: 80px;
float: left;
text-align: right;
}
.right {
width: calc(100% - 80px);
min-height: 100px;
float: left;
box-sizing: border-box;
border: 1px solid #cccccc;
border-radius: 2px;
padding: 10px;
}
}
.img_show {
width: 100%;
text-align: left;
border: 1px solid #eeeeee;
.content {
width: calc(100% - 78px);
height: 78px;
float: right;
padding: 0px 5px;
span {
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 25px;
word-break: break-all;
}
p {
margin: 0;
margin-top: 5px;
}
}
}
}
}
.content {
width: 100%;
height: 50px;
line-height: 30px;
box-sizing: border-box;
padding: 0 30px;
}
}
</style>
element & echarts
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
相關閱讀更多精彩內容
- 關于element table 如果布局在大外層設置 flex ，左測 sidebar 自由寬度，右邊設置 fle...
- Element-UI，一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的桌面端組件庫可以通過這個組件,來...
- 1、在dialog中使用open方法 2、在定時函數(shù)setTimeout中執(zhí)行方法
- element.ui框架—Table 先說一下項目里修改element.ui樣式，改樣式之前我們需要整明白styl...
- 首先，排除一波寫作心得的吧，這個寫作它對于簡書上面的絕大多數(shù)人來說應該是個興趣愛好，就算有想要變現(xiàn)的想法，有的慢慢...
