795 lines
29 KiB
Vue
795 lines
29 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 搜索-->
|
||
<el-card >
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||
<el-form-item label="姓名" prop="name">
|
||
<el-input
|
||
v-model="queryParams.realName"
|
||
placeholder="请输入姓名"
|
||
clearable
|
||
style="width: 240px;"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="手机号" prop="mobile">
|
||
<el-input
|
||
v-model="queryParams.mobile"
|
||
placeholder="请输入手机号"
|
||
clearable
|
||
style="width: 240px;"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="auditedStatus">
|
||
<el-select
|
||
v-model="queryParams.status"
|
||
placeholder="状态"
|
||
clearable
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
v-for="dict in dict.type.zhzt"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||
<!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
|
||
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<!-- 列表信息-->
|
||
<el-card style="margin-top: 20px" >
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
@click="handleAdd"
|
||
>新增员工</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
|
||
<el-table-column type="index" width="80" align="center" label="序号"/>
|
||
<el-table-column label="姓名" align="center" prop="realName" />
|
||
<el-table-column label="员工角色" align="center" prop="roleId" >
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.roleId=='12'">油站站长</span>
|
||
<span v-if="scope.row.roleId=='15'">加油员</span>
|
||
<span v-if="scope.row.roleId=='16'">收银员</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="手机号" align="center" prop="mobile" width="110"/>
|
||
|
||
<el-table-column label="员工码" align="center" prop="staffCode">
|
||
<template slot-scope="scope">
|
||
<span @click="getStaffQRcode(scope.row.id)">
|
||
<svg t="1701161298120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306" width="16" height="16"><path d="M384 64l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2c0 51.2 41.6 89.6 89.6 89.6l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2C473.6 105.6 435.2 64 384 64zM428.8 380.8c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8l0-227.2c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8L428.8 380.8z" p-id="4307"></path><path d="M192 192l134.4 0 0 134.4-134.4 0 0-134.4Z" p-id="4308"></path><path d="M377.6 544l-243.2 0c-48 0-86.4 38.4-86.4 89.6l0 220.8c0 48 38.4 89.6 86.4 89.6l243.2 0c48 0 86.4-38.4 86.4-89.6l0-220.8C467.2 582.4 425.6 544 377.6 544zM422.4 851.2c0 25.6-19.2 44.8-44.8 44.8l-243.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-220.8c0-25.6 19.2-44.8 44.8-44.8l243.2 0c25.6 0 44.8 19.2 44.8 44.8L422.4 851.2z" p-id="4309"></path><path d="M192 668.8l131.2 0 0 131.2-131.2 0 0-131.2Z" p-id="4310"></path><path d="M633.6 470.4l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2c0-51.2-41.6-89.6-89.6-89.6l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2C544 432 585.6 470.4 633.6 470.4zM588.8 153.6c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8l0 227.2c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8L588.8 153.6z" p-id="4311"></path><path d="M700.8 192l134.4 0 0 134.4-134.4 0 0-134.4Z" p-id="4312"></path><path d="M572.8 716.8l137.6 0c12.8 0 22.4-9.6 22.4-22.4l0-137.6c0-12.8-9.6-22.4-22.4-22.4l-137.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 137.6C550.4 707.2 560 716.8 572.8 716.8z" p-id="4313"></path><path d="M886.4 563.2l0 38.4c0 12.8 12.8 25.6 25.6 25.6l38.4 0c12.8 0 25.6-12.8 25.6-25.6l0-38.4c0-12.8-12.8-25.6-25.6-25.6l-38.4 0C899.2 537.6 886.4 547.2 886.4 563.2z" p-id="4314"></path><path d="M582.4 944l48 0c12.8 0 22.4-9.6 22.4-22.4l0-48c0-12.8-9.6-22.4-22.4-22.4l-48 0c-12.8 0-22.4 9.6-22.4 22.4l0 48C560 934.4 569.6 944 582.4 944z" p-id="4315"></path><path d="M944 704l-99.2 0c-16 0-28.8 12.8-28.8 28.8l0 44.8-48 0c-19.2 0-32 12.8-32 32l0 99.2c0 16 12.8 28.8 28.8 28.8l179.2 3.2c16 0 28.8-12.8 28.8-28.8l0-179.2C972.8 716.8 960 704 944 704z" p-id="4316"></path></svg>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="员工状态" align="center" prop="status">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.status=='qy'">启用</el-tag>
|
||
<el-tag type="info" v-if="scope.row.status=='jy'">禁用</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- </el-table-column>-->
|
||
<el-table-column label="一键加油" align="center" prop="isRefuel">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.display" :value="scope.row.isRefuel"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="模板通知" align="center" prop="notice">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.notice" :value="scope.row.notice"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" align="center" prop="createTime" width="150">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="更新时间" align="center" prop="updateTime" width="150">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- <span>{{ parseTime(scope.row.updateTime) }}</span>-->
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
>修改</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</el-card>
|
||
|
||
<!-- 添加或修改对话框 -->
|
||
<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="50%" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="姓名" prop="realName">
|
||
<el-input v-model="form.realName" placeholder="请输入姓名" maxlength="30" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="手机号" prop="mobile">
|
||
<el-input v-model="form.mobile" placeholder="请输入联系人电话" maxlength="30"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="角色组" prop="roleId">
|
||
<el-select v-model="form.roleId" placeholder="请选择角色">
|
||
<el-option
|
||
v-for="item in roleList"
|
||
:key="item.dutyId+''"
|
||
:label="item.dutyName"
|
||
:value="item.dutyId+''"
|
||
></el-option>
|
||
<el-option
|
||
v-if="form.roleId == 12"
|
||
label="油站站长"
|
||
:value="12+''"
|
||
></el-option>
|
||
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- </el-row>-->
|
||
<!-- <el-row>-->
|
||
<el-col :span="8">
|
||
<el-form-item label="登录密码" prop="password">
|
||
<el-input v-model="form.password" type="password" @input="changePassword" placeholder="不填写默认：123456" maxlength="30"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
<el-row>
|
||
|
||
</el-row>
|
||
<!-- <el-row :span="24">-->
|
||
<!-- <el-col :span="2" style="display: flex;margin-bottom: 10px">-->
|
||
<!-- <span style="margin-right: 10px;width: 70px">审核权限</span>-->
|
||
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="22" style="display: flex;margin-bottom: 10px">-->
|
||
<!-- <el-checkbox-group v-model="auditPrem" @change="getCheckbox">-->
|
||
<!-- <el-checkbox-->
|
||
<!-- v-for="dict in dict.type.shqx"-->
|
||
<!-- :key="dict.value"-->
|
||
<!-- :label="dict.label"-->
|
||
<!-- :value="dict.value"-->
|
||
<!-- ></el-checkbox>-->
|
||
<!-- </el-checkbox-group>-->
|
||
|
||
<!-- </el-col>-->
|
||
<!-- </el-row>-->
|
||
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="一键加油" prop="isRefuel">
|
||
<el-select v-model="form.isRefuel">
|
||
<el-option
|
||
v-for="dict in dict.type.display"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
<br/>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
placement="bottom">
|
||
<div slot="content">加油时选择加油员场景使用,选择不显示加油员将无法被指定<br/>(需系统开启加油选择加油员功能)终端支持:(PC、POS、小程序)</div>
|
||
<span>加油时选择加油员场...</span>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="收款通知" prop="notice">
|
||
<el-select v-model="form.notice">
|
||
<el-option
|
||
v-for="dict in dict.type.notice"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
<br/>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
placement="bottom">
|
||
<div slot="content"> 收款成功接收的公众号模板消息通知,需<br/>关注公众号,且本站小程序中会员手机号<br/>信息与当前员工手机号一致 </div>
|
||
<span>收款成功接收的...</span>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="账户状态" prop="status">
|
||
<el-select v-model="form.status">
|
||
<el-option
|
||
v-for="dict in dict.type.zhzt"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
<br/>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
placement="bottom">
|
||
<div slot="content"> 状态禁用后,当前账户则无法进行<br/>登录和操作</div>
|
||
<span>状态禁用后,当前账户...</span>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" >
|
||
<el-form-item label="审核权限">
|
||
<el-select
|
||
v-model="auditPrem"
|
||
multiple
|
||
collapse-tags
|
||
@change="getCheckbox"
|
||
placeholder="请选择">
|
||
<el-checkbox style="margin-left: 100px" :checked="checked" v-model="checked" @change='selectAll'>全选</el-checkbox>
|
||
<!-- <el-option-->
|
||
<!-- v-for="dict in dict.type.shqx"-->
|
||
<!-- :key="dict.label"-->
|
||
<!-- :label="dict.label"-->
|
||
<!-- :value="dict.label"-->
|
||
<!-- >-->
|
||
<el-option
|
||
v-for="dict in shqxList"
|
||
:key="dict.dictValue"
|
||
:label="dict.dictLabel"
|
||
:value="dict.dictValue"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<br/>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
placement="bottom">
|
||
<div slot="content">可设置当前员工是否有油品/商品入库、盘点、审核废止等权限</div>
|
||
<span>可设置当前员工是否有...</span>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="备注信息">
|
||
<el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
:title="title"
|
||
:visible.sync="dialogVisible"
|
||
style="margin-top: 100px"
|
||
width="23%">
|
||
<div style="text-align: center">
|
||
<img id="qrCodeImg" class="qrcode" :src="baseUrl+imgUrl" />
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="handleDownloadqrCode('qrCodeImg')">保存图片到电脑</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from 'qrcode'
|
||
import {getName} from "../../utils/fuint";
|
||
import {addStaff, createStaffQrCode, delStaff, getStaff, listStaff, queryStaff, updateStaff} from "@/api/staff/staff";
|
||
import {getDuty, listDuty} from "@/api/staff/duty";
|
||
import html2canvas from "html2canvas";
|
||
import {getDicts} from "@/api/order/data";
|
||
|
||
export default {
|
||
name: "StaffList",
|
||
dicts: ['ywqx','write_off','display','zhzt','transaction','time_frame','handover','handover_quit',
|
||
'jbjl','official','notice','special_prem','role','shqx','staff_role'],
|
||
data() {
|
||
return {
|
||
// 二维码类型
|
||
type:"",
|
||
checked:false,
|
||
// 二维码图片url
|
||
imgUrl:"",
|
||
// 角色列表
|
||
roleList:[],
|
||
drawer: false,
|
||
dialogVisible: false,
|
||
baseUrl:process.env.VUE_APP_BASE_API,
|
||
// 标题
|
||
title: "",
|
||
// 遮罩层
|
||
loading: false,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
storeOptions: [],
|
||
shqxList: [],
|
||
// role:[],
|
||
posPrem:'',
|
||
posOptions:[
|
||
{value: '首页权限',label: '首页权限',
|
||
children:[
|
||
{value: '禁用普通收款', label: '禁用普通收款' },
|
||
{value: '禁用会员收款', label: '禁用会员收款' },
|
||
{value: '禁用新增会员', label: '禁用新增会员' },
|
||
{value: '禁用订单记录', label: '禁用订单记录' },
|
||
{value: '禁用员工交班', label: '禁用员工交班' },
|
||
]},
|
||
{value: '会员储值',label: '会员储值',children:[{value: '禁止会员充值', label: '禁止会员充值' },]},
|
||
{value: '会员实体卡',label: '会员实体卡',children:[{value: '禁止绑卡换卡', label: '禁止绑卡换卡' },]},
|
||
{value: '会员积分',label: '会员积分',children:[{value: '增加', label: '增加' },{value: '减少', label: '减少' },]},
|
||
{value: '加油金变动',label: '加油金变动',children:[{value: '增加', label: '增加' },{value: '减少', label: '减少' },]},
|
||
{value: '会员卡券',label: '会员卡券',
|
||
children:[
|
||
{value: '优惠券赠送', label: '优惠券赠送' },
|
||
{value: '兑换券赠送', label: '兑换券赠送' },
|
||
]},
|
||
{value: '会员成长值',label: '会员成长值',
|
||
children:[
|
||
{value: '成长值增加', label: '成长值增加' },
|
||
{value: '成长值减少', label: '成长值减少' },
|
||
]},
|
||
],
|
||
props: { multiple: true },
|
||
appletPrem:'',
|
||
appletOptions:[
|
||
{value: '交易',label: '交易',children:[{value: '油品交易', label: '油品交易' },]},
|
||
{value: '库存',label: '库存',
|
||
children:[
|
||
{value: '库存盘点', label: '库存盘点' },
|
||
{value: '库存查询', label: '库存查询' },
|
||
]},
|
||
{value: '核销',label: '核销',
|
||
children:[
|
||
{value: '扫码核销', label: '扫码核销' },
|
||
{value: '核销记录', label: '核销记录' },
|
||
]},
|
||
],
|
||
writeOff:[],
|
||
write:[],
|
||
specialPrem:[],
|
||
auditPrem:[],
|
||
special:[],
|
||
// 总条数
|
||
total: 0,
|
||
// 表格数据
|
||
list: [],
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 日期范围
|
||
dateRange: [],
|
||
// 默认排序
|
||
defaultSort: {prop: 'createTime', order: 'descending'},
|
||
// 表单参数
|
||
form: {
|
||
id:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:'', auditedStatus:'',
|
||
auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'jbtc', record:'qbjl',
|
||
merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'advice_jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
|
||
transaction:'qbjy', writeOff:'',auditPrem:'',specialPrem:'', official:'', status:'qy',pos:'jy',roleId:''
|
||
},
|
||
// 查询参数
|
||
queryParams: {
|
||
page: 1,
|
||
pageSize: 10,
|
||
realName: '',
|
||
mobile: '',
|
||
status: ''
|
||
},
|
||
ifEditPassword:false,
|
||
// 表单校验
|
||
rules: {
|
||
realName: [
|
||
{ required: true, message: "姓名不能为空", trigger: "blur" },
|
||
{ min: 2, max: 30, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur' }
|
||
],
|
||
mobile: [
|
||
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||
{ min: 6, max: 13, message: '手机号不正确', trigger: 'blur' }
|
||
],
|
||
roleId: [
|
||
{ required: true, message: "请选择员工角色", trigger: "blur" }
|
||
],
|
||
isRefuel: [
|
||
{ required: true, message: "请选择加油状态", trigger: "blur" }
|
||
],
|
||
pos: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
transaction: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
notice: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
timeFrame: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
handoverMode: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
handoverPrem: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
handoverOut: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
record: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
merchantStatus: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
screen: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
],
|
||
status: [
|
||
{ required: true, message: "请选择", trigger: "blur" }
|
||
]
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getDuty();
|
||
// this.getStoreList();
|
||
},
|
||
methods: {
|
||
selectAll(val){
|
||
this.auditPrem = []
|
||
if (val) {
|
||
this.shqxList.forEach((item) => {
|
||
this.auditPrem.push(item.dictValue)
|
||
this.form.auditPrem = this.auditPrem.toString();
|
||
})
|
||
} else {
|
||
this.auditPrem = []
|
||
}
|
||
},
|
||
getAuditPrem(){
|
||
getDicts("shqx").then(res => {
|
||
this.shqxList = res.data
|
||
})
|
||
},
|
||
// 获取员工码
|
||
getStaffQRcode(id){
|
||
createStaffQrCode(id).then(res => {
|
||
if (res.code==200){
|
||
this.title = "员工二维码"
|
||
this.dialogVisible = true
|
||
this.imgUrl = res.data
|
||
}
|
||
})
|
||
},
|
||
// 根据字符串获取二维码图片url地址
|
||
getQRcode(code,name){
|
||
this.type = name;
|
||
let opts = {
|
||
errorCorrectionLevel: "L",//容错级别
|
||
type: "image/png",//生成的二维码类型
|
||
quality: 0.3,//二维码质量
|
||
margin: 0,//二维码留白边距
|
||
width: 180,//宽
|
||
height: 180,//高
|
||
text: "http://www.xxx.com",//二维码内容
|
||
color: {
|
||
dark: "#666666",//前景色
|
||
light: "#fff"//背景色
|
||
}
|
||
};
|
||
//this.QRlink 生成的二维码地址url
|
||
QRCode.toDataURL(code, opts , (err, url) => {
|
||
if (err) throw err
|
||
//将生成的二维码路径复制给data的QRImgUrl
|
||
this.imgUrl = url
|
||
})
|
||
if (name=="woc"){
|
||
this.title = "核销二维码"
|
||
}else {
|
||
this.title = "员工二维码"
|
||
}
|
||
this.dialogVisible = true
|
||
},
|
||
// 根据dom生成图片并下载到本地
|
||
handleDownloadqrCode(id) {
|
||
html2canvas(document.getElementById(id)).then((canvas) => {
|
||
let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
|
||
let a = document.createElement('a')
|
||
a.href = imgUrl;
|
||
a.download = "员工二维码"; //文件名
|
||
document.body.appendChild(a);
|
||
a.click(); // 触发点击
|
||
document.body.removeChild(a); // 然后移除
|
||
}).catch(err => {
|
||
console.log(err)
|
||
});
|
||
},
|
||
showDesc(){
|
||
this.drawer = true;
|
||
},
|
||
handleNodeClick1(data) {
|
||
this.form.posPrem = JSON.stringify(data);
|
||
},
|
||
handleNodeClick2(data) {
|
||
this.form.appletPrem = JSON.stringify(data);
|
||
},
|
||
getCheckbox(val){
|
||
console.log("this.auditPrem.toString()",this.auditPrem.toString())
|
||
// this.form.writeOff = this.writeOff.toString();
|
||
// this.form.specialPrem = this.specialPrem.toString();
|
||
this.form.auditPrem = this.auditPrem.toString();
|
||
if (val.length === this.shqxList.length) {
|
||
this.checked = true
|
||
} else {
|
||
this.checked = false
|
||
}
|
||
},
|
||
// 页面跳转
|
||
toTarget(url) {
|
||
this.$router.push( { path: url } );
|
||
},
|
||
getName,
|
||
// 查询列表
|
||
getList() {
|
||
this.loading = true;
|
||
listStaff(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||
this.list = response.data.records;
|
||
this.total = response.data.total;
|
||
this.loading = false;
|
||
}
|
||
);
|
||
},
|
||
// 查询角色列表
|
||
getDuty(){
|
||
listDuty().then(response => {
|
||
this.roleList = response.data
|
||
})
|
||
},
|
||
// 店铺列表
|
||
getStoreList() {
|
||
listStaff().then(response => {
|
||
this.storeOptions = response.data.records;
|
||
}
|
||
);
|
||
},
|
||
// 搜索按钮操作
|
||
handleQuery() {
|
||
this.queryParams.page = 1;
|
||
this.getList();
|
||
},
|
||
// 重置按钮操作
|
||
resetQuery() {
|
||
this.dateRange = [];
|
||
this.resetForm("queryForm");
|
||
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
|
||
this.handleQuery();
|
||
},
|
||
// 状态修改
|
||
handleStatusChange(row) {
|
||
let text = row.auditedStatus == "A" ? "启用" : "禁用";
|
||
this.$modal.confirm('确认要' + text + '"' + row.realName + '"吗？').then(function() {
|
||
// return updateStaffStatus(row.id, row.auditedStatus);
|
||
return updateStaff({id:row.id, auditedStatus:row.auditedStatus})
|
||
}).then(() => {
|
||
this.$modal.msgSuccess(text + "成功");
|
||
}).catch(function() {
|
||
row.auditedStatus = row.auditedStatus === "A" ? "A" : "N";
|
||
});
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.operId)
|
||
this.multiple = !selection.length
|
||
},
|
||
// 排序触发事件
|
||
handleSortChange(column, prop, order) {
|
||
this.queryParams.orderByColumn = column.prop;
|
||
this.queryParams.isAsc = column.order;
|
||
this.getList();
|
||
},
|
||
// 新增按钮操作
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "新增员工";
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.posPrem = '';
|
||
this.appletPrem = '';
|
||
this.writeOff = [];
|
||
this.form.auditPrem = [];
|
||
this.auditPrem = []
|
||
|
||
this.form = {
|
||
id:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:'', auditedStatus:'A',
|
||
auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'jbtc', record:'qbjl',
|
||
merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'advice_jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
|
||
transaction:'qbjy', writeOff:'',auditPrem:'',specialPrem:'', official:'', status:'qy',pos:'jy',roleId:''
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.checked = false;
|
||
this.reset();
|
||
},
|
||
changePassword(){
|
||
this.ifEditPassword = true
|
||
},
|
||
// 提交按钮
|
||
submitForm: function() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
if (this.form.auditPrem){
|
||
this.form.auditPrem = this.form.auditPrem.toString();
|
||
}
|
||
if (!this.form.id) {
|
||
queryStaff({mobile:this.form.mobile}).then( response => {
|
||
if(response.data!=null){
|
||
this.$modal.msgError("手机号已存在");
|
||
}else {
|
||
this.form.posPrem = JSON.stringify(this.form.posPrem);
|
||
this.form.appletPrem = JSON.stringify(this.form.appletPrem);
|
||
addStaff(this.form).then(response => {
|
||
if (response.data==1){
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.checked = false;
|
||
this.getList();
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
if (!this.ifEditPassword){
|
||
this.form.password = ""
|
||
}
|
||
updateStaff(this.form).then(response => {
|
||
if (response.data==1){
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.checked = false;
|
||
this.getList();
|
||
}else {
|
||
this.$modal.msgError("手机号已存在");
|
||
}
|
||
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 修改按钮操作
|
||
async handleUpdate(row) {
|
||
this.reset();
|
||
this.open = true;
|
||
const id = row.id || this.ids;
|
||
await this.getAuditPrem()
|
||
await getStaff(id).then(response => {
|
||
this.form = response.data;
|
||
this.form.password = '123456'
|
||
// this.form.refundPassword = '123456'
|
||
this.open = true;
|
||
this.title = "编辑员工信息";
|
||
if (this.form.auditPrem && this.form.auditPrem.length > 0){
|
||
// this.form.auditPrem = this.form.auditPrem.split(",");
|
||
this.auditPrem = []
|
||
this.auditPrem = this.form.auditPrem.split(",");
|
||
console.log("this.form.auditPrem",this.auditPrem)
|
||
if (this.auditPrem.length === this.shqxList.length) {
|
||
this.checked = true
|
||
} else {
|
||
this.checked = false
|
||
}
|
||
}
|
||
if (this.writeOff.length > 0){
|
||
this.writeOff = this.form.writeOff.split(",");
|
||
}
|
||
if (this.specialPrem.length > 0){
|
||
this.specialPrem = this.form.specialPrem.split(",");
|
||
}
|
||
if (this.posPrem != null && this.posPrem != ""){
|
||
this.posPrem = JSON.parse(this.form.posPrem);
|
||
}
|
||
if (this.appletPrem != null && this.appletPrem != ""){
|
||
this.appletPrem = JSON.parse(this.form.appletPrem);
|
||
}
|
||
});
|
||
},
|
||
// 删除按钮操作
|
||
handleDelete(row) {
|
||
const name = row.realName || this.id;
|
||
this.$modal.confirm('是否确认删除"' + name + '"的员工信息？').then(function() {
|
||
return delStaff(row.id);
|
||
}).then(() => {
|
||
this.queryParams.page = 1
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.app-container{
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f6f8f9;
|
||
}
|
||
.pagin-box{
|
||
background: white;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
.baoguo{
|
||
background: white;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.qrcode{
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-top: 15px;
|
||
}
|
||
</style>
|