oil-station/fuintAdmin/src/views/staff/list.vue
2023-10-11 18:45:54 +08:00

737 lines
25 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="category">
<el-select v-model="queryParams.category" clearable placeholder="请选择员工类别">
<el-option
v-for="item in categoryOptions"
:key="item.key"
:label="item.name"
:value="item.key"
></el-option>
</el-select>
</el-form-item>
<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.auditedStatus"
placeholder="状态"
clearable
style="width: 240px"
>
<el-option key="A" label="启用" value="A"/>
<el-option key="N" label="禁用" value="N"/>
</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 label="ID" align="center" prop="id" width="80" />
<el-table-column label="姓名" align="center" prop="realName" />
<el-table-column label="手机号" align="center" prop="mobile" width="110"/>
<el-table-column label="核销权限" align="center" prop="writeOff">
<template slot-scope="scope">
<dict-tag :options="dict.type.write_off" :value="scope.row.write_off"/>
</template>
</el-table-column>
<el-table-column label="特殊权限" align="center" prop="specialPrem">
<template slot-scope="scope">
<dict-tag :options="dict.type.special_prem" :value="scope.row.special_prem"/>
</template>
</el-table-column>
<el-table-column label="退款权限" align="center" prop="refund">
<template slot-scope="scope">
<dict-tag :options="dict.type.ywqx" :value="scope.row.refund"/>
</template>
</el-table-column>
<el-table-column label="审核状态" align="center" prop="storeName">
<template slot-scope="scope">
<el-switch
v-model="scope.row.auditedStatus"
active-value="A"
inactive-value="N"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="员工状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.zhzt" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="公众号" align="center" prop="official">
<template slot-scope="scope">
<dict-tag :options="dict.type.official" :value="scope.row.official"/>
</template>
</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"
v-hasPermi="['staff:list']"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
v-hasPermi="['staff:list']"
@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" :visible.sync="open" width="60%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="24">
<el-form-item label="员工类别" prop="category">
<el-select v-model="form.category" placeholder="请选择员工类别">
<el-option key="0" label="请选择员工类别" value="0"></el-option>
<el-option
v-for="item in categoryOptions"
:key="item.key"
:label="item.name"
:value="item.key"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<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-col :span="8">
<el-form-item label="角色组" prop="role">
<el-select v-model="form.role" placeholder="请选择角色">
<el-option
v-for="item in role"
:key="item.dutyId"
:label="item.dutyName"
:value="item.dutyId"
></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" placeholder="请输入登录密码" maxlength="30"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="退款权限" prop="refund">
<el-select v-model="form.refund" placeholder="请选择权限">
<el-option
v-for="dict in dict.type.ywqx"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="退款密码" prop="refundPassword">
<el-input v-model="form.applypassword" placeholder="请输入登录密码" maxlength="30"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" style="display: flex;margin-bottom: 20px">
<template>
<span style="margin-right: 10px">核销权限</span>
<el-checkbox-group v-model="writeOff" @change="getCheckbox">
<el-checkbox
v-for="dict in dict.type.write_off"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-checkbox>
</el-checkbox-group>
</template>
</el-col>
<el-col :span="14" style="display: flex">
<span style="margin-right: 10px">特殊权限</span>
<el-checkbox-group v-model="specialPrem">
<el-checkbox
v-for="dict in dict.type.special_prem"
: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>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="POS加油员" prop="pos">
<el-select v-model="form.pos">
<el-option
v-for="dict in dict.type.zhzt"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交易统计" prop="transaction">
<el-select v-model="form.transaction">
<el-option
v-for="dict in dict.type.transaction"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<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>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="指定油枪" prop="oilGunId" v-if="form.notice == zdyx">
<el-select v-model="form.oilGunId">
<el-option
v-for="dict in dict.type.notice"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="时间范围" prop="timeFrame">
<el-select v-model="form.timeFrame" placeholder="请选择角色">
<el-option
v-for="dict in dict.type.time_frame"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="交班模式" prop="handoverMode">
<el-select v-model="form.handoverMode" placeholder="请选择所属店铺">
<el-option
v-for="dict in dict.type.handover"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交班权限" prop="handoverPrem">
<el-select v-model="form.handoverPrem" placeholder="请选择所属店铺">
<el-option
v-for="dict in dict.type.ywqx"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交班退出" prop="handoverOut">
<el-select v-model="form.handoverOut">
<el-option
v-for="dict in dict.type.handover_quit"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="交班记录" prop="record">
<el-select v-model="form.record">
<el-option
v-for="dict in dict.type.jbjl"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交班商户号" prop="merchantStatus">
<el-select v-model="form.merchantStatus">
<el-option
v-for="dict in dict.type.zhzt"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="员工筛选" prop="screen">
<el-select v-model="form.screen">
<el-option
v-for="dict in dict.type.zhzt"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="POS权限" prop="posPrem">
<el-select
v-model="form.posPrem"
multiple
filterable
allow-create
default-first-option
placeholder="请选择文章标签">
<el-option
v-for="item in posOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="小程序权限" prop="appletPrem">
<el-select
v-model="form.appletPrem"
multiple
filterable
allow-create
default-first-option
placeholder="请选择文章标签">
<el-option
v-for="item in appletOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<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>
</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>
</div>
</template>
<script>
import { getStaffList, getStaffInfo, updateStaffStatus, deleteStaff, saveStaff } from "@/api/staff";
import {getName} from "../../utils/fuint";
import {addStaff, delStaff, getStaff, listStaff, updateStaff} from "@/api/staff/staff";
import {listDuty} from "@/api/staff/duty";
export default {
name: "StaffList",
dicts: ['ywqx','write_off','special_prem','display','zhzt','transaction','time_frame','handover','handover_quit',
'jbjl','official','notice','special_prem'],
data() {
return {
// 标题
title: "",
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
categoryOptions: [],
storeOptions: [],
role:[],
posOptions:[],
appletOptions:[],
writeOff:[],
specialPrem:[],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 默认排序
defaultSort: {prop: 'createTime', order: 'descending'},
// 表单参数
form: {
id:'', category:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:'', auditedStatus:'',
auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'', record:'',
merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
transaction:'qbjy', writeOff:[],specialPrem:[], official:'', status:'qy',pos:'jy'
},
// 查询参数
queryParams: {
page: 1,
pageSize: 10,
realName: '',
mobile: '',
auditedStatus: ''
},
// 表单校验
rules: {
realName: [
{ required: true, message: "姓名不能为空", trigger: "blur" },
{ min: 2, max: 30, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur' }
],
mobile: [
{ required: true, message: "手机号不能为空", trigger: "blur" },
{ min: 11, max: 20, message: '手机号长度必须11', trigger: 'blur' }
],
role: [
{ 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: {
getCheckbox(){
console.log(this.writeOff)
},
// 页面跳转
toTarget(url) {
this.$router.push( { path: url } );
},
getName,
// 查询列表
getList() {
// this.loading = true;
listStaff().then(response => {
this.list = response.data.records;
this.total = response.data.total;
response.data.records.forEach(item=>{
this.categoryOptions.push(item.category)
})
}
);
// getStaffList(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
// this.list = response.data.paginationResponse.content;
// this.total = response.data.paginationResponse.totalElements;
// this.categoryOptions = response.data.categoryList;
// this.loading = false;
// }
// );
},
// 查询角色
getDuty(){
listDuty().then(response => {
this.role = response.data
})
},
// 店铺列表
getStoreList() {
listStaff().then(response => {
this.storeOptions = response.data.records;
}
);
// searchStore().then(response => {
// this.storeOptions = response.data.storeList;
// }
// );
},
// 搜索按钮操作
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);
}).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.form = {
id:'', category:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:'', auditedStatus:'A',
auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'', record:'',
merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
transaction:'qbjy', writeOff:'',specialPrem:'', official:'', status:'qy',pos:'jy'
};
this.resetForm("form");
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 提交按钮
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (!this.form.id) {
console.log(this.form)
addStaff(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
} else {
updateStaff(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}
}
});
},
// 修改按钮操作
handleUpdate(row) {
this.open = true;
const id = row.id || this.ids;
getStaff(id).then(response => {
this.form = response.data;
// this.form.category = response.data.staffInfo.category + '';
this.open = true;
this.title = "编辑员工信息";
});
},
// 删除按钮操作
handleDelete(row) {
const name = row.realName || this.id;
this.$modal.confirm('是否确认删除"' + name + '"的数据项?').then(function() {
return delStaff(row.id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
};
</script>
<style scoped>
.app-container{
width: 100%;
height: 100vh;
background: #f6f8f9;
}
.pagin-box{
background: white;
box-sizing: border-box;
padding: 20px;
}
.baoguo{
background: white;
box-sizing: border-box;
padding: 20px;
margin-bottom: 20px;
}
</style>