zq
4 months ago
11 changed files with 4035 additions and 262 deletions
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<div class="min-width" style="background: #F5F7FA;"> |
|||
<div class="doctor-list-wrap "> |
|||
<p class="pageTitle">医生列表</p> |
|||
<el-form> |
|||
<div class="selectAllTable-wrap flex-between"> |
|||
<div class="left flex"> |
|||
<div class="checkboxAll"> |
|||
<el-checkbox @change="handleCheckAllChange" |
|||
v-model="checked">全选</el-checkbox> |
|||
</div> |
|||
<span class="totalCount">共{{ totalNum }}条，已选{{ selectNum }}条</span> |
|||
<GuipButton type="ignore" :btnstyle="{width:'99px',height:'32px',margin:'0 26px'}" @click="batchOperate('1')">批量禁用</GuipButton> |
|||
<GuipButton type="ignore" :btnstyle="{width:'99px',height:'32px'}" @click="batchOperate('2')">批量启用</GuipButton> |
|||
</div> |
|||
<div class="right flex mt32"> |
|||
<span>搜索医生</span> |
|||
<GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px" placeholder="输入姓名" /> |
|||
<GuipButton @click="addDoctor" size="form">新增医生</GuipButton> |
|||
</div> |
|||
</div> |
|||
<div class="tableList mt32"> |
|||
<div class="top flex-between mb24"> |
|||
<div class="left left1 flex"> |
|||
<el-checkbox @change="handleCheckAllChange(1)" |
|||
v-model="checked1"></el-checkbox> |
|||
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> |
|||
<span class="name">张虎</span> |
|||
<span>13788990987</span> |
|||
<GuipSwitch :modelValue="switchValue" @change="onSwitchChange(1)"> |
|||
</GuipSwitch> |
|||
<GuipButton type="text" @click="editDoctor(1)">编辑</GuipButton> |
|||
</div> |
|||
<div class="right"> |
|||
<GuipButton type="system" size="form" @click="addHospital(1)">添加医院</GuipButton> |
|||
</div> |
|||
|
|||
</div> |
|||
<GuipTable :multiple="true" :tableData="tableData" style="width: 100%" ref="table_1" |
|||
:show-header="false" :loading="loading"> |
|||
<el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column> |
|||
</GuipTable> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
const cityOptions = ['上海', '北京', '广州', '深圳']; |
|||
import store from '@/store'; |
|||
import GuipTable from '@/components/GuipTable.vue'; |
|||
// import SvgIcon from '@/components/SvgIcon.vue'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ |
|||
sort:1 |
|||
} |
|||
], |
|||
loading:false, |
|||
switchValue:true, |
|||
checked:false, |
|||
checked1:false, |
|||
totalNum: 0, |
|||
selectNum: 0, |
|||
isIndeterminate:true, |
|||
doctorList:[ |
|||
{ |
|||
id:10, |
|||
name:'一二', |
|||
idcard:'532524198711223615', |
|||
desc:'就哈哈哈哈，嗷跳舞', |
|||
detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。', |
|||
tag:'专业', |
|||
phone:'17785748373', |
|||
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', |
|||
status:true, |
|||
list:[ |
|||
{ |
|||
hos:[ |
|||
'第三人民医院 针灸科', |
|||
'第一人民医院 中医科', |
|||
], |
|||
time:'2054 - 10 - 03', |
|||
status:true, |
|||
group:'2组', |
|||
setMenu:'4套餐', |
|||
nums:'88项', |
|||
checked:false, |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
id:10, |
|||
name:'一二', |
|||
idcard:'532524198711223615', |
|||
desc:'就哈哈哈哈，嗷跳舞', |
|||
detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。', |
|||
tag:'专业', |
|||
phone:'17785748373', |
|||
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', |
|||
status:false, |
|||
list:[ |
|||
{ |
|||
hos:[ |
|||
'第三人民医院 针灸科', |
|||
'第一人民医院 中医科', |
|||
], |
|||
time:'2054 - 10 - 03', |
|||
status:true, |
|||
group:'2组', |
|||
setMenu:'4套餐', |
|||
nums:'88项', |
|||
checked:false, |
|||
}, |
|||
{ |
|||
hos:[ |
|||
'第三人民医院 针灸科', |
|||
'第一人民医院 中医科', |
|||
], |
|||
time:'2054 - 10 - 03', |
|||
status:true, |
|||
group:'2组', |
|||
setMenu:'4套餐', |
|||
nums:'88项', |
|||
checked:false, |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
id:10, |
|||
name:'一二', |
|||
idcard:'532524198711223615', |
|||
desc:'就哈哈哈哈，嗷跳舞', |
|||
detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。', |
|||
tag:'专业', |
|||
phone:'17785748373', |
|||
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', |
|||
status:false, |
|||
list:[ |
|||
{ |
|||
hos:[ |
|||
'第三人民医院 针灸科', |
|||
'第一人民医院 中医科', |
|||
], |
|||
time:'2054 - 10 - 03', |
|||
status:true, |
|||
group:'2组', |
|||
setMenu:'4套餐', |
|||
nums:'88项', |
|||
checked:false, |
|||
}, |
|||
] |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
components: { |
|||
// GuipToolTip, |
|||
// SvgIcon, |
|||
GuipInput, |
|||
GuipButton, |
|||
GuipSwitch, |
|||
GuipTable, |
|||
// CustomDropdown |
|||
}, |
|||
created() { |
|||
store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏 |
|||
}, |
|||
computed: { |
|||
}, |
|||
methods: { |
|||
handleCheckAllChange(val) { |
|||
this.checkedCities = val ? cityOptions : []; |
|||
this.isIndeterminate = false; |
|||
}, |
|||
batchOperate(type){ |
|||
if(type== '1'){ |
|||
// 禁用 |
|||
|
|||
}else{ |
|||
// 启用 |
|||
|
|||
} |
|||
}, |
|||
onSwitchChange(index){ |
|||
console.log(index,'===='); |
|||
}, |
|||
addDoctor(){ |
|||
console.log('添加医生'); |
|||
}, |
|||
addHospital(index){ |
|||
console.log(index,'===='); |
|||
}, |
|||
editDoctor(index){ |
|||
console.log(index,'===='); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-avatar{ |
|||
width: 26px; |
|||
height: 26px; |
|||
} |
|||
.doctor-list-wrap { |
|||
margin: 12px; |
|||
background: #fff; |
|||
padding: 32px 36px; |
|||
height: 100%; |
|||
border-radius: 4px; |
|||
.left,.right{ |
|||
align-items: center; |
|||
} |
|||
.selectAllTable-wrap{ |
|||
align-items: center; |
|||
.totalCount{ |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
color: #8A9099; |
|||
margin-left: 12px; |
|||
} |
|||
.right{ |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
} |
|||
} |
|||
.left1{ |
|||
gap: 12px; |
|||
} |
|||
.el-form-item{ |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
|
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,986 @@ |
|||
<template> |
|||
<div class="elementWrap"> |
|||
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 --> |
|||
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef"> |
|||
|
|||
<div class="ele-item"> |
|||
<label for="">单选框11：</label> |
|||
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language" |
|||
@change="radioChange" :rules="rules.language" /> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">下拉框：</label> |
|||
<GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options" |
|||
defaultValue="选项1" /> |
|||
</div> |
|||
<div> |
|||
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3> |
|||
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton> |
|||
|
|||
<el-form> |
|||
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange" |
|||
:multiple="true" autoColumn="true" :loading="tableLoading"> |
|||
<!-- <template slot="header"> --> |
|||
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column> |
|||
<!-- <el-table-column prop="type"> |
|||
<template slot="header"> |
|||
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions" |
|||
defaultValue="全部检测类型" @change="changeSelectType" /> |
|||
</template> |
|||
|
|||
<template slot-scope="scope"> |
|||
{{ type2name[scope.row.type] }} |
|||
</template> |
|||
</el-table-column> --> |
|||
|
|||
<el-table-column prop="created_at" label="时间" width="200"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex cell_render"> |
|||
<GuipToolTip content="文字居中"> |
|||
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ |
|||
scope.row.payment |
|||
== |
|||
'0' ? '文字居中' : '文字居中' }}</span> |
|||
</GuipToolTip> |
|||
<GuipToolTip content="图标居中"> |
|||
<svg-icon :size="16" :path="require('@/assets/tableEdit.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" /> |
|||
</GuipToolTip> |
|||
|
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="unit_num" label="数量" width="180"> |
|||
<template slot-scope="scope"> |
|||
<GuipToolTip content="单元格局中"> |
|||
<div class="flex"> |
|||
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ |
|||
scope.row.payment |
|||
== |
|||
'0' ? '单元格局中' : '单元格局中' }}</span> |
|||
<svg-icon :size="16" :path="require('@/assets/tableEdit.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" /> |
|||
</div> |
|||
|
|||
</GuipToolTip> |
|||
</template> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="name2" label="姓名" width="150"></el-table-column> |
|||
<el-table-column prop="price" label="价格" width="150"> |
|||
<!-- <template slot-scope="scope"> |
|||
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span> |
|||
</template> --> |
|||
<!-- 气泡弹出框 后期样式自定义--> |
|||
<!-- <template slot-scope="scope"> |
|||
<el-popover trigger="click" placement="top"> |
|||
<input type="text"> |
|||
<div slot="reference" class="name-wrapper"> |
|||
<el-tag size="medium">{{ scope.row.price }}</el-tag> |
|||
</div> |
|||
</el-popover> |
|||
</template> --> |
|||
</el-table-column> |
|||
<el-table-column prop="address" label="地址1" width="150"> </el-table-column> |
|||
<el-table-column prop="address" label="地址2" width="250"> </el-table-column> |
|||
<el-table-column prop="address" label="地址3" width="150"> </el-table-column> |
|||
<el-table-column prop="address1" label="地址测试" width="100"></el-table-column> |
|||
<el-table-column prop="price2" label="价格" width="300"> |
|||
<template slot-scope="scope"> |
|||
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card" |
|||
prop="card" :options="options" defaultValue="选项1" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作(固定右)" width="200" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleClick(scope.row)" type="text">查看</el-button> |
|||
<el-button type="text">编辑</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div> |
|||
<h3 for="">表格(带气泡框),内容自定义：</h3> |
|||
<el-form> |
|||
<GuipTable :tableData="tableData2" :key="random()" ref="multipleTable" |
|||
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px" |
|||
:columns="columns" @confirm="onConfirm" @cancel="onCancel"> |
|||
<!-- 自定义姓名列的气泡框内容 --> |
|||
<template #popover-content-name="{ row, column }"> |
|||
<div> |
|||
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序" |
|||
:prop="column.label" placeholder="这是" /> |
|||
</div> |
|||
</template> |
|||
<template #popover-content-age="{ row, column }"> |
|||
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄" |
|||
:prop="column.label" placeholder="这是" unit="岁"> |
|||
</GuipInput> |
|||
</template> |
|||
<!-- 自定义地址列的气泡框内容 --> |
|||
<template #popover-content-address="{ row, column }"> |
|||
<div> |
|||
<p>自定义内容：{{ column.label }}</p> |
|||
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择"> |
|||
<el-option label="北京市" value="北京市" /> |
|||
<el-option label="上海市" value="上海市" /> |
|||
<el-option label="广州市" value="广州市" /> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
</GuipTable> |
|||
|
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="ele-item"> |
|||
<label for="">文本域：</label> |
|||
<GuipTextarea disabled :styleObject="styleObject" /> |
|||
</div> |
|||
|
|||
|
|||
<div class="ele-item"> |
|||
<label for="">输入框：</label> |
|||
<GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" /> |
|||
|
|||
<div style="width: 20px;height: 10px;"></div> |
|||
|
|||
<GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100" |
|||
@change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput" |
|||
placeholder="这是自定义默认提示语" /> |
|||
|
|||
<div style="width: 20px;height: 10px;"></div> |
|||
|
|||
<GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px"> |
|||
<span slot="prependshow">http:</span> |
|||
<img slot="prefix" src="../assets/radio_checked.svg" alt=""> |
|||
<!-- 输入框后面小图标 -事件自定义 --> |
|||
<i slot="suffix" class="el-icon-close" @click="handleClear"></i> |
|||
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> --> |
|||
|
|||
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改--> |
|||
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> --> |
|||
|
|||
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改--> |
|||
<span slot="appendshow">.checkcopy.com</span> |
|||
</GuipInput> |
|||
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> --> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">单选框：</label> |
|||
<el-radio v-model="radio1" :label="1">选项一</el-radio> |
|||
<el-radio v-model="radio1" :label="2">选项二</el-radio> |
|||
</div> |
|||
|
|||
<div class="ele-item"> |
|||
<label for="">单选框组：</label> |
|||
<el-radio-group v-model="radio" @input="radioChange"> |
|||
<el-radio :label="3">备选项</el-radio> |
|||
<el-radio :label="6">备选项</el-radio> |
|||
<el-radio :label="9">备选项</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">按钮尺寸：</label> |
|||
<GuipButton size="superBig">加盟并进入后台</GuipButton> |
|||
<GuipButton size="big">准备完毕，验证自有域名</GuipButton> |
|||
<GuipButton size="page">下一步</GuipButton> |
|||
<GuipButton size="primary">保存</GuipButton> |
|||
<GuipButton size="table">新增站点</GuipButton> |
|||
<GuipButton size="form">前往添加</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">强按钮：</label> |
|||
<!-- 默认 type= primary normal 样式 --> |
|||
<GuipButton>默认</GuipButton> |
|||
<GuipButton loading>按钮</GuipButton> |
|||
<GuipButton disabled>按钮</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">弱按钮：</label> |
|||
<GuipButton type="ignore">按钮</GuipButton> |
|||
<GuipButton type="ignore" loading>按钮</GuipButton> |
|||
<GuipButton type="ignore" disabled>按钮</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">中按钮：</label> |
|||
<GuipButton type="system">按钮</GuipButton> |
|||
<GuipButton type="system" loading>按钮</GuipButton> |
|||
<GuipButton type="system" disabled>按钮</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">文字按钮：</label> |
|||
<GuipButton type="text" >强引导</GuipButton> |
|||
<GuipButton type="grey" >弱引导</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label> |
|||
<hover-button button-text="上传文件" :default-icon="require('../assets/upLoad_grey.svg')" |
|||
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B" |
|||
hover-text-color="#006AFF" @click="btnClick" /> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">独特按钮单独写样式：</label> |
|||
<div class="btn1">创建首个网站</div> |
|||
</div> |
|||
<!-- 暂时废弃 --> |
|||
<!-- <div class="ele-item"> |
|||
<label for="">常规按钮：</label> |
|||
<GuipButton>默认按钮</GuipButton> |
|||
<GuipButton type="mild" size="medium">轻度按钮</GuipButton> |
|||
<GuipButton type="primary">按钮</GuipButton> |
|||
<GuipButton type="reverseMild">按钮</GuipButton> |
|||
<GuipButton type="primary" loading>按钮</GuipButton> |
|||
<GuipButton type="success" :plain="plain">按钮</GuipButton> |
|||
<GuipButton type="info" :plain="plain">按钮</GuipButton> |
|||
<GuipButton type="warning" :plain="plain">按钮</GuipButton> |
|||
<GuipButton type="danger" :plain="plain">按钮</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">禁用按钮：</label> |
|||
<GuipButton disabled>默认按钮</GuipButton> |
|||
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton> |
|||
<GuipButton type="reverseMild" disabled>按钮</GuipButton> |
|||
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton> |
|||
<GuipButton type="success" disabled>按钮</GuipButton> |
|||
<GuipButton type="info" disabled>按钮</GuipButton> |
|||
<GuipButton type="warning" disabled>按钮</GuipButton> |
|||
<GuipButton type="danger" disabled>按钮</GuipButton> |
|||
</div> |
|||
<div class="ele-item"> |
|||
<label for="">三种尺寸按钮：</label> |
|||
<GuipButton type="primary">默认按钮</GuipButton> |
|||
<GuipButton type="primary" size="medium">中等按钮</GuipButton> |
|||
<GuipButton type="primary" size="small">小的按钮</GuipButton> |
|||
<GuipButton type="primary" size="mini">迷你按钮</GuipButton> |
|||
</div> --> |
|||
<div class="ele-item"> |
|||
<label for="">自定义宽高按钮：</label> |
|||
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton> |
|||
</div> |
|||
|
|||
<div class="ele-item"> |
|||
<label for="">提示：</label> |
|||
<GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton> |
|||
<GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton> |
|||
<GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton> |
|||
</div> |
|||
|
|||
<div style="width: 600px;"> |
|||
<h3>表单左右布局（直接使用封装好的input）</h3> |
|||
<!-- 表单左右布局 --> |
|||
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username" |
|||
:rules="usernameRules" placeholder="这是自定义默认提11示语" /> |
|||
</div> |
|||
|
|||
<div style="width: 800px;height: 150px;"> |
|||
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3> |
|||
<GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age" |
|||
prop="age" placeholder="这是自定义默认提示语" /> |
|||
</div> |
|||
|
|||
<div class="ele-item"> |
|||
<label for="">开关L</label> |
|||
<GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
<el-table |
|||
:data="tableData3" |
|||
:span-method="objectSpanMethod" |
|||
:border="true" |
|||
style="width: 100%; margin-top: 20px"> |
|||
<el-table-column |
|||
prop="id" |
|||
label="ID" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="amount1" |
|||
label="数值 1（元）"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="amount2" |
|||
label="数值 2（元）"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="amount3" |
|||
label="数值 3（元）"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-button type="primary" @click="submitForm">Submit</el-button> |
|||
|
|||
</el-form> |
|||
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;"> |
|||
--------------------分割线0------------------------------</div> |
|||
|
|||
<div style="display: flex;" class="ele-item"> |
|||
<label for="">日期选择器</label> |
|||
<el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div ref="ScaleBox" class="ScaleBox"> |
|||
<!-- Form 组件--> |
|||
<!-- @headdenForm="headdenForm" --> |
|||
<!-- @changeSelect="changeSelect" --> |
|||
<!-- <GuipForm |
|||
:fromItem="fromItem" |
|||
:formNewList="formList" |
|||
:detail="edit" |
|||
:disabled="edit" |
|||
ref="VabForm" |
|||
/> |
|||
<div class="cardfooter" style="display: flex;"> |
|||
<el-button @click="cancellation">取消</el-button> |
|||
<el-button @click="save" type="primary">保存</el-button> |
|||
</div> --> |
|||
</div> |
|||
<div class="flex ele-item"> |
|||
<label for="">一些功能集合</label> |
|||
<GuipButton type="primary" @click="openDialog">打开弹框</GuipButton> |
|||
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton> |
|||
</div> |
|||
<div class="flex ele-item"> |
|||
<label for="">提示信息</label> |
|||
<GuipToolTip content="这是一个提示"> |
|||
<GuipButton type="primary" size="page">悬停查看提示</GuipButton> |
|||
</GuipToolTip> |
|||
|
|||
<GuipToolTip placement="bottom" effect="light"> |
|||
<GuipButton type="primary" size="page">自定义提示内容</GuipButton> |
|||
<template #content> |
|||
<div style="max-width: 200px"> |
|||
<h4>自定义标题</h4> |
|||
<p>这里可以放任何HTML内容</p> |
|||
<el-button size="mini">甚至按钮</el-button> |
|||
</div> |
|||
</template> |
|||
</GuipToolTip> |
|||
<GuipToolTip placement="bottom" effect="light" content="点击进入编辑"> |
|||
<svg-icon :path="require('@/assets/tableEdit.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" /> |
|||
</GuipToolTip> |
|||
</div> |
|||
|
|||
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false" |
|||
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose" |
|||
@dialogVisibleChange="dialogVisibleChange"> |
|||
<!-- 自定义内容 --> |
|||
<div> |
|||
<p>这是一个自定义内容的弹框。</p> |
|||
</div> |
|||
</GuipDialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { rules } from "../assets/vabForm"; |
|||
// @ is an alias to /src |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GuipDialog from '@/components/GuipDialog.vue'; |
|||
import GuipRadio from '@/components/GuipRadio.vue'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipSelect from '@/components/GuipSelect.vue'; |
|||
import GuipTable from '@/components/GuipTable.vue'; |
|||
import GuipTextarea from '@/components/GuipTextarea.vue' |
|||
import GuipToolTip from '@/components/GuipToolTip.vue' |
|||
import HoverButton from '@/components/HoverButton.vue' |
|||
import SvgIcon from '@/components/SvgIcon.vue'; |
|||
|
|||
// import { mapState } from 'vuex' |
|||
// import store from '@/store'; |
|||
|
|||
export default { |
|||
name: 'HomeView', |
|||
components: { |
|||
GuipTextarea, |
|||
GuipTable, |
|||
GuipSwitch, |
|||
GuipDialog, |
|||
GuipRadio, |
|||
GuipButton, |
|||
GuipInput, |
|||
GuipSelect, |
|||
GuipToolTip, |
|||
HoverButton, |
|||
SvgIcon |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData3: [{ |
|||
id: '12987122', |
|||
name: '王小虎', |
|||
amount1: '234', |
|||
amount2: '3.2', |
|||
amount3: 10 |
|||
}, { |
|||
id: '12987123', |
|||
name: '王小虎', |
|||
amount1: '165', |
|||
amount2: '4.43', |
|||
amount3: 12 |
|||
}, { |
|||
id: '12987124', |
|||
name: '王小虎', |
|||
amount1: '324', |
|||
amount2: '1.9', |
|||
amount3: 9 |
|||
}, { |
|||
id: '12987125', |
|||
name: '王小虎', |
|||
amount1: '621', |
|||
amount2: '2.2', |
|||
amount3: 17 |
|||
}, { |
|||
id: '12987126', |
|||
name: '王小虎', |
|||
amount1: '539', |
|||
amount2: '4.1', |
|||
amount3: 15 |
|||
}], |
|||
tableWidth: 0, |
|||
currentPage: 1, //当前页 |
|||
pageSize: 5, //每页的容量 |
|||
total: 0, //列表总数 |
|||
tableLoading: false, |
|||
timer: null, |
|||
date1: '', |
|||
switchValue: true, |
|||
dialogVisible: false,//是否展示弹框 |
|||
showCancelButton: true, // 控制是否显示取消按钮 |
|||
showCloseButton: true, // 控制是否显示关闭按钮 |
|||
form: { |
|||
username: '', |
|||
language: '', |
|||
}, |
|||
languageOptions: [ |
|||
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' }, |
|||
{ label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh' }, |
|||
{ label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh' }, // 禁用选项 |
|||
{ label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh' }, |
|||
], |
|||
rules: { |
|||
username: [ |
|||
{ required: true, message: '请输入用户名', trigger: 'blur' } |
|||
], |
|||
card: [ |
|||
{ required: true, message: '请选择有效信息', trigger: 'blur' } |
|||
], |
|||
language: [ |
|||
{ required: true, message: '请选择语言', trigger: 'blur' }, |
|||
], |
|||
phone: [ |
|||
{ required: true, message: '请输入手机号', trigger: 'blur' } |
|||
], |
|||
age: [ |
|||
{ required: true, message: '请输入年龄', trigger: 'blur' } |
|||
] |
|||
}, |
|||
usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules |
|||
msg: "测试", |
|||
title: "相关附件", |
|||
edit: false, |
|||
action: true, |
|||
header: false, |
|||
width: 1920, |
|||
height: 1080, |
|||
dataList: [ |
|||
{ name: "张三", age: 19, id: 1 }, |
|||
{ name: "李四", age: 20, id: 2 }, |
|||
], |
|||
formList: [], |
|||
// 模拟数据 详细 测试 |
|||
fromItem: { |
|||
id: "Shanghai", |
|||
id1: "选项4", |
|||
name: "用户名", |
|||
radioId: "2", |
|||
checkboxId: ["上海", "北京"], |
|||
textareaIner: "textarea", |
|||
dateTime: "2023-09-12 00:00:00", |
|||
uploadList: [ |
|||
{ |
|||
name: "小梨猫.jpg", |
|||
size: 160517, |
|||
uid: 1695291434025, |
|||
url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2", |
|||
}, |
|||
], |
|||
}, |
|||
// 表格数据 |
|||
tableData2: [{ |
|||
date: '2016-05-03', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄', |
|||
price: '20', |
|||
age: 20, |
|||
// 在支持修改的项目中，需要主动保留一份原始数据 |
|||
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄' |
|||
}, { |
|||
date: '2016-05-02', |
|||
name: '王小虎11', |
|||
address: '上海市普陀区金沙江路 151811 弄', |
|||
price: '10', |
|||
age: 30, |
|||
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄' |
|||
|
|||
}, { |
|||
date: '2016-05-04', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄', |
|||
price: '200', |
|||
}, { |
|||
date: '2016-05-01', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}, { |
|||
date: '2016-05-08', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}, { |
|||
date: '2016-05-06', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}, { |
|||
date: '2016-05-07', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}], |
|||
// 表格列配置 |
|||
columns: [ |
|||
{ prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框 |
|||
{ prop: 'age', label: '年龄', popover: true }, // 不支持气泡框 |
|||
{ prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框 |
|||
], |
|||
optionss: [ |
|||
{ |
|||
value: "选项1", |
|||
label: "黄金糕", |
|||
}, |
|||
{ |
|||
value: "选项2", |
|||
label: "双皮奶", |
|||
}, |
|||
{ |
|||
value: "选项3", |
|||
label: "蚵仔煎", |
|||
}, |
|||
{ |
|||
value: "选项4", |
|||
label: "龙须面", |
|||
}, |
|||
{ |
|||
value: "选项5", |
|||
label: "北京烤鸭", |
|||
}, |
|||
], |
|||
cities: [ |
|||
{ |
|||
value: "Beijing", |
|||
label: "北京", |
|||
}, |
|||
{ |
|||
value: "Shanghai", |
|||
label: "上海", |
|||
}, |
|||
{ |
|||
value: "Nanjing", |
|||
label: "南京", |
|||
}, |
|||
{ |
|||
value: "Chengdu", |
|||
label: "成都", |
|||
}, |
|||
{ |
|||
value: "Shenzhen", |
|||
label: "深圳", |
|||
}, |
|||
{ |
|||
value: "Guangzhou", |
|||
label: "广州", |
|||
} |
|||
], |
|||
tableData:[], |
|||
input: 'hahhahah', |
|||
defaultValue: 'asdasda', |
|||
radio: 3, |
|||
radio1: 5, |
|||
btnstyleObj: { |
|||
width: '388px', |
|||
height: '46px', |
|||
borderRadius: '4px', |
|||
background: '#006AFF', |
|||
}, |
|||
btnstyleObj1: { |
|||
width: '247px', |
|||
height: '46px', |
|||
borderRadius: '4px', |
|||
}, |
|||
styleObject: { |
|||
width: '200px', |
|||
height: '40px' |
|||
}, |
|||
styleObject1: { |
|||
width: '600px', |
|||
height: '50px' |
|||
}, |
|||
plain: false, |
|||
|
|||
options: [{ |
|||
value: '选项1', |
|||
label1: '黄金hhhhhh', |
|||
label: '黄金糕' |
|||
}, { |
|||
value: '选项2', |
|||
label1: '双皮奶hhhhhhhhh', |
|||
label: '双皮奶' |
|||
}, { |
|||
value: '选项3', |
|||
label1: '蚵仔煎hhhhhhhhh', |
|||
label: '蚵仔煎' |
|||
}, { |
|||
value: '选项4', |
|||
label1: '双皮奶hhhhhhhhh', |
|||
label: '龙须面' |
|||
}, { |
|||
value: '选项5', |
|||
label1: '双皮奶hhhhhhhhh', |
|||
label: '北京烤鸭' |
|||
}], |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getStagePurchase() |
|||
|
|||
// this.$loadingFn.show() |
|||
// setInterval(()=>{ |
|||
// this.$loadingFn.hide() |
|||
// },70000) |
|||
// this.timer = setTimeout(() => { |
|||
// this.$store.dispatch('hideLoading') |
|||
// }, 2000) |
|||
// this.timer = null; |
|||
|
|||
}, |
|||
methods: { |
|||
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
console.log(row, column); |
|||
if (rowIndex % 2 === 0) { |
|||
if (columnIndex === 0) { |
|||
return [1, 2]; |
|||
} else if (columnIndex === 1) { |
|||
return [0, 0]; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
console.log(row, column); |
|||
|
|||
if (columnIndex === 0) { |
|||
if (rowIndex % 2 === 0) { |
|||
return { |
|||
rowspan: 2, |
|||
colspan: 1 |
|||
}; |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
openMessage(type) { |
|||
console.log(type); |
|||
// 单独指定方法调用 |
|||
switch(type){ |
|||
case 'success': |
|||
this.$Message.success('成功，文案自定义') |
|||
break; |
|||
case 'error': |
|||
this.$Message.error('失败，文案自定义') |
|||
break; |
|||
case 'info': |
|||
this.$Message.info('提示，文案自定义') |
|||
break; |
|||
} |
|||
// 自定义选项 |
|||
// this.$Message({ |
|||
// type: 'success', |
|||
// title: '成功标题', |
|||
// message: '这是一条成功的提示消息', |
|||
// duration: 5000, |
|||
// showClose: true, |
|||
// center: true |
|||
// }) |
|||
}, |
|||
showTooltip() { |
|||
this.$refs.tooltip.show() |
|||
}, |
|||
hideTooltip() { |
|||
this.$refs.tooltip.hide() |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
this.getStagePurchase() |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
this.getStagePurchase() |
|||
}, |
|||
getStagePurchase() { |
|||
this.tableLoading = true |
|||
const that = this |
|||
that.tableData = [] |
|||
this.$http('POST', '/supernew/ajax_get_stage_purchase', { |
|||
type: 0, |
|||
cur_page: 1, |
|||
page_size: 5, |
|||
},{ |
|||
headers:{ |
|||
'AUTH': '3c901fa4a19a7ad9d01238890863d499' |
|||
} |
|||
}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
// console.log(that.tableData,'---that.tableData'); |
|||
// that.type2name = response.data.type2name |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
btnClick() { |
|||
|
|||
}, |
|||
openLoading() { |
|||
this.$store.dispatch('showLoading') |
|||
setTimeout(() => { |
|||
this.$store.dispatch('hideLoading') |
|||
}, 2000) |
|||
|
|||
}, |
|||
handleFilter(column) { |
|||
// 在这里处理筛选逻辑 |
|||
console.log('筛选列:', column); |
|||
}, |
|||
// 部分情况可能导致页面不更新，增加 key 强制重新渲染 |
|||
random() { |
|||
var randomNumber = Math.random(); |
|||
return randomNumber |
|||
}, |
|||
onSwitchChange(value) { |
|||
console.log('Switch 状态变化:', this.switchValue, value); |
|||
}, |
|||
// 弹框相关方法---start |
|||
openDialog() { |
|||
this.dialogVisible = true; |
|||
}, |
|||
// 确认按钮事件 |
|||
handleConfirm() { |
|||
this.$message.success('点击了确认按钮'); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 取消按钮事件 |
|||
handleCancel() { |
|||
this.$message.warning('点击了取消按钮'); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 关闭弹框事件 |
|||
handleClose() { |
|||
this.$message.info('弹框已关闭'); |
|||
this.dialogVisible = false; |
|||
}, |
|||
dialogVisibleChange(data) { |
|||
console.log(data, 'data098908090'); |
|||
}, |
|||
// 弹框相关方法---end |
|||
|
|||
// 选择表格某一项 点击 |
|||
handlePriceClick(row) { |
|||
this.currentRow = row; |
|||
this.editedPrice = row.price; |
|||
this.dialogVisible = true; |
|||
}, |
|||
|
|||
// 表格气泡框----- |
|||
// 确认事件 |
|||
onConfirm(row, prop) { |
|||
console.log('确认修改:', row, prop); |
|||
this.$message.success('修改成功'); |
|||
this.$set(this.tableData, row) |
|||
console.log(this.tableData, 'this.tableData====='); |
|||
}, |
|||
// 取消事件 |
|||
onCancel(row, prop) { |
|||
console.log('取消修改:', row, prop); |
|||
this.$message.info('已取消'); |
|||
this.$set(this.tableData, row) |
|||
}, |
|||
// 表格气泡框----- |
|||
|
|||
// 监听单选框组变化 |
|||
radioChange(data) { |
|||
console.log(data, 'radio--data'); |
|||
}, |
|||
handleClick(row) { |
|||
console.log(row); |
|||
}, |
|||
submitForm() { |
|||
this.$refs.formRef.validate((valid) => { |
|||
console.log(this.form, '======formxinxi'); |
|||
if (valid) { |
|||
alert('提交成功!'); |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置表单 |
|||
resetForm() { |
|||
this.$refs.form.resetFields(); |
|||
}, |
|||
triggerError() { |
|||
this.$refs.formRef.validateField('username', (error) => { |
|||
if (error) { |
|||
console.log('错误信息:', error); |
|||
} else { |
|||
console.log('无错误'); |
|||
} |
|||
}); |
|||
}, |
|||
getFormdata() { |
|||
console.log(this.$refs.GuipInput.value); |
|||
}, |
|||
handleInput(value) { |
|||
console.log(value, 'value===输入框输入得知'); |
|||
}, |
|||
handleClear(value) { |
|||
this.defaultValue = '这是我清除后给的文案' |
|||
// this.handleInput('') |
|||
console.log(value, 'value===qinghcu'); |
|||
}, |
|||
getList() { |
|||
console.log('zhixingle--'); |
|||
const dataList = rules(); |
|||
dataList.forEach((item) => { |
|||
if (item.field === "id") { |
|||
item.options = this.cities; |
|||
} |
|||
if (item.field === "id1") { |
|||
item.options = this.optionss; |
|||
} |
|||
}); |
|||
this.formList = dataList; |
|||
}, |
|||
save() { |
|||
this.$refs.VabForm.submitForm("ruleForm"); |
|||
}, |
|||
//取消 |
|||
cancellation() { |
|||
this.$refs.VabForm.resetForm("ruleForm"); |
|||
}, |
|||
// 表格点击、选择 |
|||
handleSelectionChange(data) { |
|||
// 多选模式下的时候 data 为数组格式 |
|||
// 单选的时候是 对象 |
|||
console.log(data, '表格行信息'); |
|||
}, |
|||
// 全选按钮 |
|||
toggleAllSelection() { |
|||
// console.log(this.$refs.multipleTable,'this.$refs.multipleTable'); |
|||
this.$refs.multipleTable.$refs.guiptable.toggleAllSelection(); |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.timer) { |
|||
clearTimeout(this.timer) |
|||
// 确保离开组件时关闭 loading |
|||
this.$store.dispatch('hideContentLoading') |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.elementWrap { |
|||
/* width: 100%; */ |
|||
padding: 30px 40px; |
|||
background: #fff; |
|||
|
|||
.ele-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin: 20px 0 30px; |
|||
|
|||
label { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
width: 100px; |
|||
margin-right: 10px; |
|||
text-align: left; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.ScaleBox { |
|||
width: 1000px; |
|||
background-size: 100% 100%; |
|||
-ms-transition: 0.3s; |
|||
transition: 0.3s; |
|||
-ms-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.cardfooter { |
|||
width: 100%; |
|||
bottom: 20px; |
|||
right: 30px; |
|||
text-align: right; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.btn1 { |
|||
cursor: pointer; |
|||
font-weight: bold; |
|||
width: 114px; |
|||
height: 40px; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 11px 12px; |
|||
box-sizing: border-box; |
|||
color: #FFFFFF; |
|||
border-radius: 4px; |
|||
transition: all .3s; |
|||
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%); |
|||
|
|||
&:hover { |
|||
opacity: 0.7; |
|||
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,876 @@ |
|||
<template> |
|||
<div class="demo-wrap min-flex-right"> |
|||
<div class="flex-between flex-end pagetitle"> |
|||
<h4>{{ pageTitle }}</h4> |
|||
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px"> |
|||
<!-- <DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" |
|||
@change="handleDateChange" /> --> |
|||
</CustomDropdown> |
|||
</div> |
|||
<div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" |
|||
style="margin-bottom: 20px;text-align: left" class="beforeNotice"> |
|||
<!-- <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 未计成本</p> --> |
|||
<div v-if="dataType == 'ver_type'" class="noticeBot column"> |
|||
<p>1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|||
<p>2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|||
<p>3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|||
</div> |
|||
<div v-if="dataType == 'check_type'" class="noticeBot column"> |
|||
<p>1. AI（服务器成本）</p> |
|||
<p>2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI</p> |
|||
<p>3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|||
</div> |
|||
</div> |
|||
<div class=" flex-common" id=""> |
|||
<el-form> |
|||
<GuipTable :tableData="tableData" style="width: 100%" :border="true" @sort-change="handleSortChange" |
|||
:loading="loading" @cell-mouse-enter="handleRowHover"> |
|||
<el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column> |
|||
<el-table-column |
|||
v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" |
|||
prop="name" :key="selectedType" :label="type_select[selectedType]" min-width="120"> |
|||
|
|||
<template slot="header"> |
|||
<el-select class="custom-select tableHeaderSelect" popper-class="custom-select-dropdown" |
|||
v-model="selectedType" @change="changeRankType"> |
|||
<el-option v-for="(item,type) in type_select" :key="type" :label="item" :value="type"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
<template slot-scope="scope"> |
|||
<GuipToolTip :content=" scope.row.name"> |
|||
<span class=nowrap>{{ scope.row.name }}</span> |
|||
</GuipToolTip> |
|||
</template> |
|||
|
|||
</el-table-column> |
|||
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column> |
|||
|
|||
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" |
|||
:prop="String(index + 1)" |
|||
:render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label" |
|||
sortable="custom" min-width="170"> |
|||
|
|||
<!--产品利润排行展示查看更多--> |
|||
<template v-if="index == 3 && dataRank == 1" v-slot="{ row, $index }"> |
|||
<!-- <el-popover v-model="row.id_popover" placement="top" trigger="manual" |
|||
:ref="`popover-${$index}`" :append-to-body="false" :visible-arrow="true" |
|||
popper-class="custom-popover" @show="popshow"> --> |
|||
<el-popover v-model="row.id_popover" :ref="`popover-${row.id}`" |
|||
placement="bottom" trigger="manual" :append-to-body="false" :visible-arrow="true" |
|||
popper-class="custom-popover" @show="popshow" > |
|||
|
|||
<div v-if="type != 'agent'" class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3> |
|||
{{ row.name }} |
|||
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span> |
|||
</h3> |
|||
<span class="flex point" @click="closePop(row,'id')"> |
|||
<img src="@/assets/close.svg"> |
|||
</span> |
|||
</div> |
|||
<el-table :data="tableData1" style="width: 100%"> |
|||
<el-table-column prop="value_1" width="200" label="日期"></el-table-column> |
|||
|
|||
<el-table-column width="200" :label="rank_type_desc[dataRank]"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.value_2 }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div v-else class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3> |
|||
{{ row.name }} |
|||
<span class="lookMore" @click="goLookCheckTypeRank(row.id)">查看更多</span> |
|||
</h3> |
|||
<span class="flex point" @click="closePop(row,'id')"> |
|||
<img src="@/assets/close.svg"> |
|||
</span> |
|||
</div> |
|||
<el-table :data="tableData1" style="width: 100%"> |
|||
<el-table-column prop="sort" width="95" label="排序"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="name" width="250" label="服务名称"></el-table-column> |
|||
<el-table-column prop="rate" width="130" label="毛利占比"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.rate }} % |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column width="150" :label="rank_type_desc[dataRank]"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.value_1 }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="value_2" width="130" label="订单数"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<div class="flex" slot="reference"> |
|||
{{ row[field] }}{{ $index }} |
|||
<!-- <svg-icon :size="14" v-if="row[field] *100 != 0" |
|||
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" /> --> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
</template> |
|||
<template v-else slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row[field] }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<!--产品利润排行展示代理商排行--> |
|||
<el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" |
|||
:render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) " |
|||
key="top" prop="top" label="代理商排行" width="250" fixed="right"> |
|||
<template v-slot="{ row, $index }"> |
|||
<!-- :fallback-placements="['bottom','top','left']" --> |
|||
<el-popover v-model="row.id_popover_2" :ref="`popover_2-${$index}`" |
|||
placement="bottom" trigger="manual" :append-to-body="false" :visible-arrow="true" |
|||
popper-class="custom-popover" @show="popshow" > |
|||
<!-- <el-popover v-model="row.id_popover_2" :ref="`popover_2-${$index}`" trigger="manual" |
|||
popper-class="custom-popover" @show="popshow" :append-to-body="false" |
|||
:visible-arrow="true" |
|||
> --> |
|||
<div class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3> |
|||
{{ row.name }} 代理商排行 |
|||
<span class="lookMore" @click="goLookAgentRank(row.id)">查看更多</span> |
|||
</h3> |
|||
<span class="flex point" @click="closePop(row,'id')"> |
|||
<img src="@/assets/close.svg"> |
|||
</span> |
|||
</div> |
|||
<GuipTable :data="tableData1" style="width: 100%" max-height="218"> |
|||
<el-table-column prop="sort" width="100" label="排行"></el-table-column> |
|||
<el-table-column prop="name" width="200" label="代理商"></el-table-column> |
|||
<el-table-column prop="value_1" width="200" label="销售额"></el-table-column> |
|||
</GuipTable> |
|||
</div> |
|||
<span v-if="top_list[row.id]" slot="reference" class="flex"> |
|||
No.1 {{ top_list[row.id]['name'] }} |
|||
<!-- <svg-icon :size="14" @click="handleClick2(row, $index, 'id')" |
|||
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" /> --> |
|||
</span> |
|||
<span v-else slot="reference">暂无排行</span> |
|||
</el-popover> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|||
:total="parseInt(total)"> |
|||
</el-pagination> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import DateSelect from '@/components/super/DateSelect.vue'; |
|||
import GuipTable from '@/components/GuipTable.vue'; |
|||
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|||
// import SvgIcon from '@/components/SvgIcon.vue'; |
|||
import GuipToolTip from '@/components/GuipToolTip.vue'; |
|||
// import HoverImage from '@/components/super/HoverImage.vue'; |
|||
export default { |
|||
name: 'rank_batch_list', |
|||
props: { |
|||
pageTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
rank_type: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
components: { |
|||
// HoverImage, |
|||
GuipToolTip, |
|||
// SvgIcon, |
|||
GuipTable, |
|||
// DateSelect, |
|||
CustomDropdown |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
viewDesc: { |
|||
'month': '月份', |
|||
'monthTwo': '月份', |
|||
'year': '年份', |
|||
}, |
|||
rank_type_desc: { |
|||
1: '毛利润', |
|||
2: '订单数', |
|||
3: '退单数', |
|||
4: '充值金额', |
|||
}, |
|||
type_desc: { |
|||
'agent': '代理商昵称', |
|||
'ver_type': '品牌名称', |
|||
'check_type': '服务名称', |
|||
}, |
|||
type_select: { |
|||
'ver_type': '按品牌名称', |
|||
'check_type': '按服务名称', |
|||
}, |
|||
selectedType: 'check_type', |
|||
view: 'month', |
|||
labels: ['', '', '', ''], |
|||
current_month: '', |
|||
valueFields: ['value_1', 'value_2', 'value_3', 'value_4'], |
|||
currentPage: 1, //当前页 |
|||
pageSize: 10, //每页的容量 |
|||
total: 0, //列表总数 |
|||
sort_by: 4, |
|||
sort_order: 2, |
|||
text: '',//下拉框显示具体文案 |
|||
selectedDate: new Date(),//默认当天日期 |
|||
dataType: '', |
|||
dataRank: '', |
|||
tableData: [], |
|||
top_list: [], |
|||
tableData1: [], |
|||
show_detail_index: 0, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init() |
|||
}, |
|||
computed: {}, |
|||
watch: { |
|||
'$route'() { |
|||
this.init() |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
document.title = this.pageTitle; |
|||
|
|||
this.text = this.getNowDate() |
|||
this.dataType = this.type |
|||
this.dataRank = this.rank_type |
|||
|
|||
this.getRankingData(); |
|||
}, |
|||
handleUpdateView(newView) { |
|||
this.view = newView; |
|||
}, |
|||
getNowDate() { |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
|||
const currentYearMonth = `${year}-${month}`; |
|||
return `${currentYearMonth}` |
|||
}, |
|||
getDate(dateStr) { |
|||
const date = new Date(dateStr); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
if (this.view == 'year') { |
|||
return `${year}` |
|||
} else { |
|||
return `${year}-${month}` |
|||
} |
|||
}, |
|||
handleDateChange(date) { |
|||
this.text = this.getDate(date) |
|||
this.selectedDate = date; |
|||
localStorage.setItem('date', JSON.stringify(date)) |
|||
|
|||
this.$refs.dropdownRef.closeDropdown(); |
|||
|
|||
this.currentPage = 1; |
|||
this.getRankingData() |
|||
}, |
|||
goLookMoreData(id) { |
|||
let query = {} |
|||
query.date = this.text |
|||
query.rank_type = this.dataRank |
|||
if (this.dataType == 'agent') { |
|||
query.aid = id |
|||
} |
|||
if (this.dataType == 'ver_type') { |
|||
query.ver_type = id |
|||
} |
|||
if (this.dataType == 'check_type') { |
|||
query.check_type = id |
|||
} |
|||
window.open(this.$router.resolve({ |
|||
path: '/super/ranking/detail', |
|||
query: query |
|||
}).href, '_blank') |
|||
}, |
|||
goLookAgentRank(id) { |
|||
let query = {} |
|||
query.date = this.text |
|||
query.rank_type = this.dataRank |
|||
query.type = 'agent' |
|||
if (this.dataType == 'ver_type') { |
|||
query.ver_type = id |
|||
} |
|||
if (this.dataType == 'check_type') { |
|||
query.check_type = id |
|||
} |
|||
window.open(this.$router.resolve({ |
|||
path: '/super/ranking/list', |
|||
query: query |
|||
}).href, '_blank') |
|||
}, |
|||
goLookCheckTypeRank(id) { |
|||
let query = {} |
|||
query.date = this.text |
|||
query.rank_type = this.dataRank |
|||
query.type = 'check_type' |
|||
query.aid = id |
|||
window.open(this.$router.resolve({ |
|||
path: '/super/ranking/list', |
|||
query: query |
|||
}).href, '_blank') |
|||
}, |
|||
closePop(row, type) { |
|||
row[type + '_popover'] = false; |
|||
row[type + '_popover_2'] = false; |
|||
}, |
|||
handleClick(row, index, type) { |
|||
// 关闭其他行的弹框 |
|||
this.tableData.forEach((item, i) => { |
|||
item[type + '_popover_2'] = false; |
|||
if (i !== index) { |
|||
item[type + '_popover'] = false; |
|||
} |
|||
}); |
|||
// 打开当前行的弹框 |
|||
row[type + '_popover'] = true; |
|||
|
|||
let obj = {} |
|||
if (this.dataType == 'agent') { |
|||
obj.aid = row.id |
|||
} |
|||
if (this.dataType == 'ver_type') { |
|||
obj.ver_type = row.id |
|||
} |
|||
if (this.dataType == 'check_type') { |
|||
obj.check_type = row.id |
|||
} |
|||
if (this.dataType == 'agent') { |
|||
let obj = {} |
|||
obj.aid = row.id |
|||
this.getCheckTypeRankingList(obj); |
|||
} else { |
|||
this.getRankingDetail(obj); |
|||
} |
|||
}, |
|||
handleClick2(row, index, type) { |
|||
console.log('执行了'); |
|||
// 关闭其他行的弹框 |
|||
this.tableData.forEach((item, i) => { |
|||
item[type + '_popover'] = false; |
|||
if (i !== index) { |
|||
item[type + '_popover_2'] = false; |
|||
} |
|||
}); |
|||
// 打开当前行的弹框 |
|||
row[type + '_popover_2'] = true; |
|||
|
|||
let obj = {} |
|||
if (this.dataType == 'agent') { |
|||
obj.aid = row.id |
|||
} |
|||
if (this.dataType == 'ver_type') { |
|||
obj.ver_type = row.id |
|||
} |
|||
if (this.dataType == 'check_type') { |
|||
obj.check_type = row.id |
|||
} |
|||
this.getAgentRankingList(obj); |
|||
}, |
|||
popshow() { |
|||
var ariaEls = document.querySelectorAll('.el-popover') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
|
|||
ariaEls = document.querySelectorAll('.el-radio__original') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
}, |
|||
handleSortChange({ prop, order }) { |
|||
console.log('prop--排序', prop); |
|||
this.sort_by = 4; |
|||
this.sort_order = 2; |
|||
if (order == 'ascending') { |
|||
this.sort_by = prop; |
|||
this.sort_order = 1; |
|||
} |
|||
if (order == 'descending') { |
|||
this.sort_by = prop; |
|||
this.sort_order = 2; |
|||
} |
|||
this.currentPage = 1; |
|||
this.getRankingData() |
|||
}, |
|||
handleRowHover(row) { |
|||
this.show_detail_index = row.sort |
|||
}, |
|||
changeRankType() { |
|||
this.dataType = this.selectedType |
|||
this.getRankingData() |
|||
}, |
|||
getRankingData() { |
|||
this.setLabelText(); |
|||
|
|||
if (this.dataType == 'agent') { |
|||
this.getAgentRanking() |
|||
} |
|||
if (this.dataType == 'ver_type') { |
|||
this.getVerRanking() |
|||
} |
|||
if (this.dataType == 'check_type') { |
|||
this.getTypeRanking() |
|||
} |
|||
}, |
|||
setLabelText() { |
|||
const date = new Date(this.text); |
|||
const year = date.getFullYear(); |
|||
const month = date.getMonth() + 1; |
|||
|
|||
const currentYear = new Date().getFullYear(); |
|||
const currentMonth = new Date().getMonth() + 1; |
|||
|
|||
this.current_month = ''; |
|||
if (this.view === 'month' && year == currentYear && month == currentMonth) { |
|||
this.current_month = '(当月)'; |
|||
} |
|||
|
|||
this.labels = []; |
|||
if (this.view === 'year') { |
|||
for (let i = 3; i >= 0; i--) { |
|||
this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]); |
|||
} |
|||
} else { |
|||
const monthLabels = []; |
|||
for (let i = 3; i >= 0; i--) { |
|||
let m = month - i; |
|||
if (m <= 0) m += 12; |
|||
|
|||
monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]); |
|||
} |
|||
this.labels = monthLabels; |
|||
} |
|||
}, |
|||
getAgentRanking() { |
|||
//代理商排行 |
|||
const that = this |
|||
that.tableData = [] |
|||
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sort_by: that.sort_by, |
|||
sort_order: that.sort_order, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getVerRanking() { |
|||
//品牌排行 |
|||
const that = this |
|||
that.tableData = [] |
|||
that.top_list = [] |
|||
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sort_by: that.sort_by, |
|||
sort_order: that.sort_order, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.top_list = response.data.top_list |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getTypeRanking() { |
|||
//产品排行 |
|||
const that = this |
|||
that.tableData = [ |
|||
|
|||
{ |
|||
id |
|||
: |
|||
6, |
|||
name |
|||
: |
|||
"维普大学生版", |
|||
sort |
|||
: |
|||
1, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"479,820.85" |
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
94, |
|||
name |
|||
: |
|||
"ai中文大学生版", |
|||
sort |
|||
: |
|||
2, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"0" |
|||
|
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
6, |
|||
name |
|||
: |
|||
"维普大学生版", |
|||
sort |
|||
: |
|||
1, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"479,820.85" |
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
94, |
|||
name |
|||
: |
|||
"ai中文大学生版", |
|||
sort |
|||
: |
|||
2, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"0" |
|||
|
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
94, |
|||
name |
|||
: |
|||
"ai中文大学生版", |
|||
sort |
|||
: |
|||
2, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"569,820.85" |
|||
|
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
94, |
|||
name |
|||
: |
|||
"ai中文大学生版", |
|||
sort |
|||
: |
|||
2, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"569,820.85" |
|||
|
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
94, |
|||
name |
|||
: |
|||
"ai中文大学生版", |
|||
sort |
|||
: |
|||
2, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"569,820.85" |
|||
|
|||
}, |
|||
{ |
|||
id |
|||
: |
|||
94, |
|||
name |
|||
: |
|||
"ai中文大学生版", |
|||
sort |
|||
: |
|||
2, |
|||
value_1 |
|||
: |
|||
"23,754.25", |
|||
value_2 |
|||
: |
|||
"43,012.15", |
|||
value_3 |
|||
: |
|||
"61,869.09", |
|||
value_4 |
|||
: |
|||
"569,820.85" |
|||
|
|||
} |
|||
] |
|||
that.top_list = { |
|||
94: { |
|||
id |
|||
: |
|||
"94", |
|||
name |
|||
: |
|||
"尚志教育", |
|||
value_1 |
|||
: |
|||
"156409.50" |
|||
}, |
|||
6: { |
|||
id |
|||
: |
|||
"6", |
|||
name |
|||
: |
|||
"千校论文查重平台", |
|||
value_1 |
|||
: |
|||
"238081.00" |
|||
} |
|||
} |
|||
// that.tableData = [] |
|||
// that.top_list = [] |
|||
// this.loading = true; |
|||
// this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
|||
// date: that.text, |
|||
// rank_type: that.dataRank, |
|||
// sort_by: that.sort_by, |
|||
// sort_order: that.sort_order, |
|||
// cur_page: that.currentPage, |
|||
// page_size: that.pageSize, |
|||
// }).then(response => { |
|||
// this.loading = false; |
|||
// this.$nextTick(() => { |
|||
// that.tableData = response.data.list |
|||
// that.top_list = response.data.top_list |
|||
// that.total = response.data.total |
|||
// }) |
|||
// }).catch(error => { |
|||
// console.error(error, 'error') |
|||
// }) |
|||
}, |
|||
getRankingDetail(obj) { |
|||
const that = this |
|||
that.tableData1 = [] |
|||
this.$http('POST', '/supernew/ajax_get_rank_detail', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sort_by: 2, |
|||
sort_order: 2, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData1 = response.data.list.slice(0, 5) |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getAgentRankingList(obj) { |
|||
const that = this |
|||
that.tableData1 = [] |
|||
this.$http('POST', '/supernew/ajax_get_agent_rank_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
cur_page: 1, |
|||
page_size: 5, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData1 = response.data.list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getCheckTypeRankingList(obj) { |
|||
const that = this |
|||
that.tableData1 = [] |
|||
this.$http('POST', '/supernew/ajax_get_type_rank_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
cur_page: 1, |
|||
page_size: 5, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData1 = response.data.list.slice(0, 5) |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
this.getRankingData() |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
this.getRankingData() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.pagetitle { |
|||
h4 { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
::v-deep .custom-popover { |
|||
position: fixed !important; |
|||
// max-height: 290px; |
|||
// overflow-y: auto; |
|||
margin-top: 0 !important; |
|||
margin-left: 0 !important; |
|||
transform: none !important; |
|||
} |
|||
|
|||
.lookMore { |
|||
cursor: pointer; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.beforeNotice { |
|||
margin-top: 12px; |
|||
border-radius: 4px; |
|||
background: #F2F7FF; |
|||
border: 1px solid #BFDAFF; |
|||
padding: 20px 14px; |
|||
color: #1E2226; |
|||
letter-spacing: 0.08em; |
|||
|
|||
.noticeTop { |
|||
gap: 8px; |
|||
margin-bottom: 12px; |
|||
|
|||
} |
|||
|
|||
.noticeBot { |
|||
gap: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.tableHeaderSelect ::v-deep .el-input__inner { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
letter-spacing: 0.08em; |
|||
font-family: Microsoft YaHei UI; |
|||
color: #1E2226; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<div class="siteSetting-wrap"> |
|||
<!-- <RankingLeft /> --> |
|||
<SliderMenu :menuData= "rankMenuData" /> |
|||
<!-- <SliderMenu :menuData= "rankMenuData" :default-collapsed="false" |
|||
@collapse-change="handleCollapseChange"/> --> |
|||
<!-- 主内容区域 --> |
|||
<main class="main-content" ref="scrollContainer"> |
|||
<router-view></router-view> |
|||
<Footer></Footer> |
|||
</main> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Footer from '@/components/Footer.vue'; |
|||
import SliderMenu from '@/components/SliderMenu.vue'; |
|||
// import RankingLeft from '@/components/super/RankingLeft.vue' |
|||
import { mapState } from 'vuex'; |
|||
|
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
Footer, |
|||
SliderMenu, |
|||
// RankingLeft, |
|||
}, |
|||
data() { |
|||
return { |
|||
path: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['rankMenuData']), // 直接映射 state 中的 count 属性到组件的局部计算属性中 |
|||
}, |
|||
mounted() { |
|||
this.path = this.$route.path; |
|||
if(this.$route.query.str) localStorage.setItem('token', this.$route.query.str) |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.demo-wrap { |
|||
width: 100%; |
|||
letter-spacing: 0.08em; |
|||
|
|||
::v-deep .el-popover.el-popper { |
|||
padding: 20px; |
|||
} |
|||
|
|||
|
|||
.custom-select { |
|||
width: 110px; |
|||
border: none; |
|||
border-radius: 0; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
height: 30px; |
|||
} |
|||
|
|||
.custom-select .el-input__inner { |
|||
background: none; |
|||
border: 1px solid transparent; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
font-size: 14px; |
|||
color: #1e2226; |
|||
font-weight: bold; |
|||
padding: 0; |
|||
} |
|||
|
|||
.custom-select .el-input:focus-within { |
|||
background: none; |
|||
border-color: #F5F7FA !important; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
outline: none; |
|||
} |
|||
} |
|||
|
|||
.pop-wrap { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
box-sizing: border-box; |
|||
|
|||
.pop-top { |
|||
h3 { |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: 18px; |
|||
letter-spacing: 0.08em; |
|||
color: #1D2129; |
|||
margin: 0; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin-left: 12px; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #006AFF; |
|||
} |
|||
} |
|||
|
|||
img { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.custom-select-dropdown { |
|||
width: 210px; |
|||
margin-left: -16px; |
|||
} |
|||
|
|||
.custom-select-dropdown .el-select-dropdown__list { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.custom-select-dropdown .el-select-dropdown__item { |
|||
color: #1E2226; |
|||
padding: 0 12px; |
|||
} |
|||
|
|||
.custom-select-dropdown .el-select-dropdown__item:hover { |
|||
background: #F6F7FA; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.custom-select-dropdown .el-select-dropdown__item.selected { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.custom-select-dropdown .el-select-dropdown__item.selected::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 10px; |
|||
transform: translateY(-50%); |
|||
width: 16px; |
|||
height: 16px; |
|||
// background-image: url('../../../assets/super/select-active.svg'); |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
opacity: 1; |
|||
} |
|||
|
|||
</style> |
|||
<style scoped lang="scss"> |
|||
.siteSetting-wrap { |
|||
display: flex; |
|||
height: 100%; |
|||
} |
|||
|
|||
.main-content { |
|||
flex: 1; |
|||
padding: 12px; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue