Skip to content

H
haoban-4
Commit b65d9e50 by 无尘
Options

feat: 增加步骤组件

parent c7ffddbb
Showing with 390 additions and 77 deletions
src/components/company/auth-commit-success.vue
......@@ -3,89 +3,23 @@
* @Author : 无尘
* @Date : 2020-02-13 14:02:40
* @LastEditors: 无尘
* @LastEditTime: 2020-07-22 11:07:50
* @FilePath : \Hapi-demoj:\公司\haoban-3\src\components\company\new-depart-member.vue
* @LastEditTime: 2020-07-22 16:21:49
* @FilePath : j:\公司\haoban-3\src\components\company\auth-commit-success.vue
-->
<!--
<new-depart-member :departObj="departObj"></new-depart-member>
import newDepartMember from '@/components/company/new-depart-member.vue';
<auth-commit-success></auth-commit-success>
import authCommitSuccess from '@/components/company/auth-commit-success.vue';
-->
<template>
<div class="depart-list-body">
<div class="depart-name-wrap">
<div class="depart-name">
<span class="font-16 p-r-10 iconfont iconqiye-tianchong color-303133"></span><span class="font-16 color-303133 font-w-600">{{ departObj.departmentName }} （{{ total }}人）</span>
</div>
<div class="auth-commit-success">
<div class="commit-success-img">
<img src="" alt="">
</div>
<div class="m-t-20">
<div class="depart-condition-wrap flex flex-space-between ">
<div>
<el-input placeholder="请输入姓名/手机号" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
<el-select v-model="activeFlag" placeholder="所有状态" class="m-l-6" @change="changeStatus">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<div class="flex">
<el-tooltip content="通讯录日志" placement="top">
<div class="log-icon flex flex-align-center flex-pack-center cursor-pointer " @click="toLog"><span class="font-14 iconfont icontongxunlu color-909399"></span></div>
</el-tooltip>
<div class="to-log-btn font-12 color-2f54eb cursor-pointer" @click="toShowTip">查看帮助提示</div>
</div>
</div>
<div class="m-t-20">
<el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<!-- <el-table-column type="selection" width="55"> </el-table-column> @selection-change="handleSelectionChange" -->
<el-table-column label="姓名" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.staffName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="职务" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.postion || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="手机号码" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.nationCode }}-{{ scope.row.phoneNumber }}</template
>
</el-table-column>
<el-table-column prop="" label="导购ID">
<template slot="header" >
<el-tooltip class="item" effect="light" placement="right">
<div slot="content">
是否使用好办3.0小程序
</div>
<span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">使用状态</span>
</el-tooltip>
</template>
<template slot-scope="scope">
<span :class="['inline-block iconfont iconhuaban', scope.row.activeFlag == 1 ? 'color-2f54eb' : 'color-c0c4cc']"></span>
</template>
</el-table-column>
<el-table-column prop="" label="关联详情" show-overflow-tooltip>
<template slot="header" >
<el-tooltip class="item" effect="light" placement="right">
<div slot="content">员工关联导购详情，因只能识别企业微信用户usrid且门店与部门不相关联，<br />所以虽然在一个部门下，但是可能出现一个人关联多个导购code。<br />即一个用户对应多个导购code</div>
<span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">关联详情</span>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-button type="text" @click="showRelateDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="showDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
<div class="commit-success-text">已提交管理员审核，请通知管理员及时审核</div>
<div class="commit-success-btn">
<el-button @click="changeRoute('/authMerchant')">返回授权列表</el-button><el-button @click="changeRoute('/auditLog')">进入审核列表</el-button>
</div>
<add-member v-if="memberVisible" :defaultDepart="defaultDepart" :memberObj="memberObj" @refreshData="refreshData" @changeObj="changeObj"></add-member>
<mod-depart v-if="modVisible" :selectObj="multipleSelection" @modDepartData="modDepartData"></mod-depart>
<related-table v-if="relateShow" :relateRow="relateRow" @closeTable="closeTable"></related-table>
<help-tip v-if="tipShow" @toCloseTip="toCloseTip"></help-tip>
</div>
</template>
<script>
......@@ -102,7 +36,12 @@ export default {
};
},
methods: {
/**
* 路由跳转
*/
changeRoute(path) {
this.$router.push(path);
},
},
watch: {
......
src/components/company/auth-step.vue 0 → 100644
<!--
* @Descripttion : 当前组件信息
* @Author : 无尘
* @Date : 2020-02-13 16:13:59
* @LastEditors: 无尘
* @LastEditTime: 2020-07-22 16:20:32
* @FilePath : j:\公司\haoban-4\src\components\company\auth-step.vue
-->
<!--
<auth-step :activeStep="activeStep" @refreshData="refreshData"></auth-step>
import authStep from '@/components/company/auth-step.vue';
-->
<template>
<div>
<div :class="['auth-step-body', active == 0? 'step-one': 'step-two']">
<el-steps :active="active" finish-status="success">
<el-step title="GIC商户授权" description=""></el-step>
<el-step title="审核员授权" description=""></el-step>
</el-steps>
</div>
</div>
</template>
<script>
export default {
name: 'auth-step',
components: {},
props: {
activeStep: {
type: String,
default() {
return '0';
}
}
},
data() {
return {
active: '0'
};
},
methods: {
},
watch: {
activeStep(newData) {
this.active = newData;
}
},
mounted() {
const that = this;
that.active = that.activeStep;
}
};
</script>
<style lang="less" scoped>
.auth-step-body {
width: 600px;
margin: 0 auto;
}
</style>
src/styles/reset.less
......@@ -770,3 +770,93 @@ input:focus {
padding-top: 3px;
}
}
/* 授权步骤 */
.step-one {
.el-steps {
.el-step {
.el-step__main {
margin-left:-15px;
}
&:first-child {
.el-step__head {
.el-step__icon {
font-size: 12px;
color: #fff;
background: #2f54eb;
border: 1px;
}
.el-step__line {
height: 1px;
background-color: #c4c6cf;
}
&.is-success {
color: #2f54eb;
border-color: #2f54eb;
}
}
.el-step__title {
&.is-wait {
color: #303133;
}
&.is-success {
color: #303133;
}
}
}
&:last-child {
.el-step__title {
&.is-wait {
color: #606266;
}
}
}
}
}
}
.step-two {
.el-steps {
.el-step {
.el-step__main {
margin-left:-15px;
}
.el-step__head {
.el-step__icon {
font-size: 12px;
background: #2f54eb;
border: 1px;
}
.el-step__line {
height: 1px;
background-color: #c4c6cf;
}
&.is-success {
color: #2f54eb;
border-color: #2f54eb;
.el-step__icon {
background: #fff;
border: 1px solid #2f54eb;
}
}
&.is-wait {
.el-step__icon {
color: #fff;
}
}
}
.el-step__title {
&.is-wait {
color: #303133;
}
&.is-success {
color: #303133;
}
}
}
}
}
src/views/business/newAuthMerchant.vue
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-07-22 16:50:29
-->
<template>
<div class="my-customer-wrap common-set-wrap">
<nav-crumb :navpath="navpath"> </nav-crumb>
<div class="right-content">
<div class="right-box" style="min-height: calc(100vh - 104px);">
<div class="apps-content flex" style="min-height: calc(100vh - 104px);">
<div class="apps-content-right">
<div class="new-auth-body">
<div>
<auth-step :activeStep="activeStep"></auth-step>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <vue-gic-footer></vue-gic-footer> -->
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import authStep from '@/components/company/auth-step.vue';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public';
export default {
name: 'newAuthMerchant',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '通讯录',
path: '/contactsList'
},
{
name: '授权商户',
path: '/authMerchant'
},
{
name: '新建授权',
path: ''
}
],
activeStep: '1',
brandOptions: [], // 商户列表
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
tableData: [],
};
},
computed: {},
methods: {
/**
* 路由跳转
*/
changeRoute(path) {
this.$router.push(path);
},
/**
* 获取品牌商户
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage3-web/wx-enterprise-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandOptions = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {};
getRequest('/haoban-manage3-web/wx-enterprise-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result || [];
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {},
mounted() {
const that = this;
that.getBrandData();
document.documentElement.style.backgroundColor = '#f0f2f5';
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
navCrumb,
authStep
}
};
</script>
<style type="text/less" lang="less" scoped>
.span-dot {
display: inline-block;
vertical-align: middle;
width: 6px;
height: 6px;
margin-right: 6px;
border-radius: 3px;
&.bg-52c41a {
background: #52c41a;
}
&.bg-f5222d {
background: #f5222d;
}
}
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.line-h-18 {
line-height: 18px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.w-293 {
width: 293px;
}
.w-191 {
width: 191px;
}
.el-alert--info {
background: rgba(240, 245, 255, 1);
border-radius: 2px;
border: 1px solid rgba(133, 165, 255, 1);
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
.el-alert__icon {
font-size: 12px;
padding-top: 3px;
}
}
.my-customer-wrap {
height: 100%;
}
.right-content {
/*width: 100%;*/
padding: 0 20px 20px 20px;
min-height: calc(100% - 160px);
.right-box {
background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-right {
width: 100%;
padding: 20px;
background: #fff;
.overstore-body {
background: #fff;
}
.daily-set-wrap {
height: 100%;
background: #fff;
}
.app-detail-wrap {
height: 100%;
background: #fff;
}
.common-set-wrap {
height: 100%;
background: #fff;
}
}
}
}
}
</style>
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