Skip to content

H
haoban-4
Commit 5be6474b by 无尘
Options

feat: 增加组件

parent 9096726a
Showing with 108 additions and 92 deletions
src/styles/reset.less
......@@ -752,3 +752,21 @@ input:focus {
.el-table .hide-ellipsis .cell {
text-overflow: clip;
}
/* 提示 */
.el-alert--info {
width: 608px;
font-size: 14px;
color: #606266;
background: rgba(240, 245, 255, 1);
border-radius: 2px;
border: 1px solid rgba(133, 165, 255, 1);
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
align-self: flex-start;
padding-top: 3px;
}
}
src/views/reviewCenter/reviewed.vue
......@@ -4,18 +4,26 @@
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 16:21:14
* @LastEditTime: 2020-07-22 10:12:21
-->
<template>
<div class="reviewed-wrap common-set-wrap">
<div class="right-content">
<div class="right-box" style="min-height: calc(100vh - 126px)">
<div class="reviewed-body-head">
<el-input class="w-250 " placeholder="请输入提交人姓名或门店名称" prefix-icon="el-icon-search" v-model="searchValue" clearable @clear="clearSearch" @keyup.native="value => searchEnterFun(value, searchInput)"> </el-input><el-select class="w-130 m-l-10" v-model="filterValue" placeholder="全部状态" @change="getTableList"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
<div class="tip-body m-b-20">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<span class="el-alert__title">展示管理员审核及绑定解绑记录及门店成员自助增删导购及用户绑定记录</span>
</div>
</div>
</div>
<el-input class="w-344 " placeholder="请输入提交人姓名/账号/手机号/部门名称" prefix-icon="el-icon-search" v-model="searchValue" clearable @clear="clearSearch" @keyup.native="value => searchEnterFun(value, searchInput)"> </el-input><el-select class="w-130 m-l-10" v-model="filterValue" placeholder="全部状态" @change="getTableList"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
><el-select class="w-168 m-l-10" v-model="filterBrand" placeholder="全部品牌" @change="getTableList">
<el-option label="全部品牌" value=""></el-option>
<el-option v-for="item in brandOptions" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option> </el-select
><span class="p-l-10 font-12 color-909399">展示管理员审核记录及门店成员自助增删导购及用户关联记录</span>
>
</div>
<div class="reviewed-body-content">
<el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%">
......@@ -39,26 +47,32 @@
<el-popover placement="top-start" width="300" trigger="hover" @show="showSingleInfo(scope.row.commitStaffId)">
<div class="apply-info-detail">
<div class="flex">
<div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
<div class="apply-info-img flex-align-center flex-pack-center bg-82c5ff ">
<i v-if="!userData.headImg" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="userData.headImg" alt="img" />
</div>
<div class="flex flex-column apply-info-right flex-space-between">
<div class="apply-info-name">
{{ userData.staffName || '--' }} ( {{ userData.position || '--' }})
<!-- <i :class="[userData.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont']"></i> -->
</div>
<div class="apply-info-phone">
<span class="w-80">手机号：</span><span class="w-130">{{ userData.nationCode == '86' ? userData.phoneNumber : '+' + userData.nationCode + '-' + userData.phoneNumber }}</span>
</div>
<div class="apply-info-store">
<span class="w-80">所属部门：</span><span class="w-130">{{ userData.departmentName || '--' }}</span>
<span class="font-14 color-303133">{{ userData.staffName || '--' }}</span> <span class="font-14 color-90939">( {{ userData.sex || '--' }})</span>
<!-- <i :class="[userData.sex == 2 ? 'icon-xingbienv color-ff585c' : 'icon-xingbienan color-508cee', 'iconfont']"></i> -->
</div>
</div>
</div>
<div class="flex flex-space-between">
<div class="font-14 color-606266">账号</div>
<div class="font-14 color-303133">{{ userData.position || '--' }}</div>
</div>
<div class="flex flex-space-between">
<div class="font-14 color-606266">手机号</div>
<div class="font-14 color-303133">{{ userData.nationCode == '86' ? userData.phoneNumber : '+' + userData.nationCode + '-' + userData.phoneNumber }}</div>
</div>
<div class="flex flex-space-between">
<div class="font-14 color-606266">部门</div>
<div class="font-14 color-303133">{{ userData.departmentName || '--' }}</div>
</div>
</div>
<div slot="reference">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic cursor-pointer">
<div class="flex flex-align-center flex-pack-center bg-82c5ff table-head-pic cursor-pointer">
<i v-if="!scope.row.commitStaffImg" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.commitStaffImg" alt="img" />
</div>
......@@ -112,6 +126,20 @@
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="结果">
<template slot-scope="scope">
<span :class="['span-dot', scope.row.auditStatus == 1 || scope.row.auditStatus == 4 ? 'bg-52c41a' : 'bg-f5222d']"></span><span v-if="scope.row.auditStatus == 1">已同意</span><span v-if="scope.row.auditStatus == 4">无需审核</span><span v-if="scope.row.auditStatus == 5">审核失败</span>
<!-- <el-popover class="inline-block" placement="top" width="150" trigger="hover">
<div class="tooltip-text">{{ scope.row.auditReason }}</div>
<div slot="reference">
<span class="" v-if="scope.row.auditStatus == 2" @click="toggleReason(scope.row)" style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">已拒绝</span>
</div>
</el-popover> -->
<el-tooltip v-if="scope.row.auditStatus == 2" class="item" effect="dark" :content="scope.row.auditReason" placement="top-start">
<span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">已拒绝</span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
......@@ -480,15 +508,15 @@ export default {
display: inline-block;
}
.bg-82C5FF {
.bg-82c5ff {
background: #82c5ff;
}
.color-508CEE {
.color-508cee {
color: #508cee;
}
.color-FF585C {
.color-ff585c {
color: #ff585c;
}
......@@ -542,8 +570,8 @@ export default {
overflow: hidden;
}
.w-250 {
width: 250px;
.w-344 {
width: 344px;
}
.m-l-10 {
......@@ -587,9 +615,6 @@ export default {
.m-t-45 {
margin-top: 45px;
}
.v-align-b {
vertical-align: bottom;
}
.text-center {
text-align: center;
}
......@@ -597,16 +622,16 @@ export default {
margin-bottom: 22px;
}
.table-head-pic {
width: 35px;
height: 35px;
width: 40px;
height: 40px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
width: 35px;
height: 35px;
width: 100%;
height: 100%;
border-radius: 3px;
}
}
......@@ -625,13 +650,13 @@ export default {
}
.apply-info-detail {
/*padding: 18px;*/
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.apply-info-img {
width: 64px;
height: 64px;
width: 40px;
height: 40px;
border-radius: 12px;
text-align: center;
i {
......@@ -639,31 +664,16 @@ export default {
color: #e5f3ff;
}
img {
width: 64px;
height: 64px;
width: 100%;
height: 100%;
border-radius: 12px;
}
}
.apply-info-name {
font-size: 16px;
color: #606266;
}
.apply-info-right {
width: 229px;
padding-left: 16px;
font-size: 13px;
color: #606266;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.w-80 {
display: inline-block;
vertical-align: top;
color: #606266;
}
.w-130 {
color: #606266;
}
}
}
......
src/views/reviewCenter/unreview.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 16:20:26
* @LastEditTime: 2020-07-22 10:13:02
-->
<template>
<div class="unreview-wrap common-set-wrap">
......@@ -12,7 +12,7 @@
<div class="right-box" style="min-height: calc(100vh - 126px)">
<div class="reviewed-body-head flex flex-space-between">
<div>
<el-input class="w-250 " placeholder="请输入提交人姓名或门店名称" prefix-icon="el-icon-search" v-model="searchValue" clearable @clear="clearSearch" @keyup.native="value => searchEnterFun(value, searchInput)"> </el-input><el-select v-model="filterValue" placeholder="全部事项" @change="getTableList" class="w-130 m-l-10"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
<el-input class="w-344 " placeholder="请输入提交人姓名/账号/手机号/部门名称" prefix-icon="el-icon-search" v-model="searchValue" clearable @clear="clearSearch" @keyup.native="value => searchEnterFun(value, searchInput)"> </el-input><el-select v-model="filterValue" placeholder="全部事项" @change="getTableList" class="w-130 m-l-10"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
><el-select v-model="filterBrand" placeholder="全部品牌" @change="getTableList" class="w-168 m-l-10">
<el-option label="全部品牌" value=""></el-option>
<el-option v-for="item in brandOptions" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option>
......@@ -43,26 +43,32 @@
<el-popover placement="top-start" width="300" trigger="hover" @show="showSingleInfo(scope.row.commitStaffId)">
<div class="apply-info-detail">
<div class="flex">
<div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
<div class="apply-info-img flex-align-center flex-pack-center bg-82c5ff ">
<i v-if="!userData.headImg" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="userData.headImg" alt="img" />
</div>
<div class="flex flex-column apply-info-right flex-space-between">
<div class="flex flex-column apply-info-right flex-pack-center">
<div class="apply-info-name">
{{ userData.staffName || '--' }} ( {{ userData.position || '--' }})
<!-- <i :class="[userData.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont']"></i> -->
</div>
<div class="apply-info-phone">
<span class="w-80">手机号：</span><span class="w-130">{{ userData.nationCode == '86' ? userData.phoneNumber : '+' + userData.nationCode + '-' + userData.phoneNumber }}</span>
</div>
<div class="apply-info-store">
<span class="w-80">所属部门：</span><span class="w-130">{{ userData.departmentName || '--' }}</span>
<span class="font-14 color-303133">{{ userData.staffName || '--' }}</span> <span class="font-14 color-90939">( {{ userData.sex || '--' }})</span>
<!-- <i :class="[userData.sex == 2 ? 'icon-xingbienv color-ff585c' : 'icon-xingbienan color-508cee', 'iconfont']"></i> -->
</div>
</div>
</div>
<div class="flex flex-space-between">
<div class="font-14 color-606266">账号</div>
<div class="font-14 color-303133">{{ userData.position || '--' }}</div>
</div>
<div class="flex flex-space-between">
<div class="font-14 color-606266">手机号</div>
<div class="font-14 color-303133">{{ userData.nationCode == '86' ? userData.phoneNumber : '+' + userData.nationCode + '-' + userData.phoneNumber }}</div>
</div>
<div class="flex flex-space-between">
<div class="font-14 color-606266">部门</div>
<div class="font-14 color-303133">{{ userData.departmentName || '--' }}</div>
</div>
</div>
<div slot="reference">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic cursor-pointer">
<div class="flex flex-align-center flex-pack-center bg-82c5ff table-head-pic cursor-pointer">
<i v-if="!scope.row.commitStaffImg" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.commitStaffImg" alt="img" />
</div>
......@@ -643,8 +649,8 @@ export default {
};
</script>
<style lang="less" scoped>
.w-250 {
width: 250px;
.w-344 {
width: 344px;
}
.el-select {
vertical-align: middle;
......@@ -719,15 +725,15 @@ export default {
justify-content: flex-start;
}
.bg-82C5FF {
.bg-82c5ff {
background: #82c5ff;
}
.color-508CEE {
.color-508cee {
color: #508cee;
}
.color-FF585C {
.color-ff585c {
color: #ff585c;
}
......@@ -810,23 +816,20 @@ export default {
.m-t-45 {
margin-top: 45px;
}
.v-align-b {
vertical-align: bottom;
}
.reviewed-body-head {
margin-bottom: 22px;
}
.table-head-pic {
width: 35px;
height: 35px;
width: 40px;
height: 40px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
width: 35px;
height: 35px;
width: 100%;
height: 100%;
border-radius: 3px;
}
}
......@@ -845,13 +848,13 @@ export default {
}
.apply-info-detail {
/*padding: 18px;*/
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.apply-info-img {
width: 64px;
height: 64px;
width: 40px;
height: 40px;
border-radius: 12px;
text-align: center;
i {
......@@ -859,31 +862,16 @@ export default {
color: #e5f3ff;
}
img {
width: 64px;
height: 64px;
width: 100%;
height: 100%;
border-radius: 12px;
}
}
.apply-info-name {
font-size: 16px;
color: #606266;
}
.apply-info-right {
width: 229px;
padding-left: 16px;
font-size: 13px;
color: #606266;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.w-80 {
display: inline-block;
vertical-align: top;
color: #606266;
}
.w-130 {
color: #606266;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment