237 lines
8.5 KiB
Vue
237 lines
8.5 KiB
Vue
<template>
|
||
<el-dialog :title="title" top="80px" :visible.sync="dialogVisible" @open="reset">
|
||
<h3 style="color: #3F9EFF;">
|
||
基本信息设置
|
||
</h3>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item label="员工姓名" prop="name">
|
||
<el-input v-model="form.name" placeholder="请输入员工姓名" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4"> </el-col>
|
||
<el-col :span="10">
|
||
<el-form-item label="员工编号" prop="code">
|
||
<el-input v-model="form.code" placeholder="请输入员工编号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item label="手机号" prop="phone">
|
||
<el-input v-model="form.phone" placeholder="请输入手机号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4"> </el-col>
|
||
<el-col :span="10"> <el-form-item label="员工账号" prop="account">
|
||
<el-input v-model="form.account" placeholder="请输入员工账号，建议使用手机号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="10"> <el-form-item label="登录密码">
|
||
<el-input type="password" v-model="form.password" placeholder="请输入登录密码，不填默认123456" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4"> </el-col>
|
||
<el-col :span="10">
|
||
<el-form-item label="优惠类型">
|
||
<el-radio-group v-model="form.discountType" @change="form.maxDiscountAmount = 0">
|
||
<el-radio-button label="1">折扣</el-radio-button>
|
||
<el-radio-button label="0">金额</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item label="最大优惠金额" v-if="form.discountType == 0">
|
||
<el-input-number v-model="form.maxDiscountAmount" controls-position="right" :min="0"
|
||
:max="100000" :step="0.1" style="width: 200px;"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="最低优惠折扣" v-if="form.discountType == 1">
|
||
<el-input-number v-model="form.maxDiscountAmount" controls-position="right" :min="0" :max="0.99"
|
||
:step="0.1" style="width: 200px;"></el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4"> </el-col>
|
||
<el-col :span="10">
|
||
<el-form-item label="角色" prop="roleId">
|
||
<el-select v-model="form.roleId" placeholder="请选择角色">
|
||
<el-option :label="item.name" :value="item.id" v-for="item in roles"
|
||
:key="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<h3 style="color: #3F9EFF;">
|
||
员工权限设置
|
||
</h3>
|
||
<div v-for="item in form.permissions" :key="item.id">
|
||
<h4>{{ item.label }}</h4>
|
||
<el-checkbox v-for="ele in item.children" :true-label="1" :false-label="0" v-model="ele.hasPermission"
|
||
:key="ele.id" :label="ele.label"></el-checkbox>
|
||
</div>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { tbPlussShopStaff, rolesGet, tbPlussShopStaffDetail, tbShopPermissionlist } from '@/api/shop.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
loading: false,
|
||
form: {
|
||
id: '',
|
||
name: '',
|
||
code: '',
|
||
account: '',
|
||
discountType: '',
|
||
maxDiscountAmount: '',
|
||
status: 1,
|
||
isPc: 1,
|
||
isManage: 1,
|
||
roleId: '',
|
||
phone: '',
|
||
password: '',
|
||
checkList: ['选中且禁用', '复选框 A']
|
||
},
|
||
resetForm: '',
|
||
rules: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
code: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
account: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
maxDiscountAmount: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
roleId: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
},
|
||
roles: []
|
||
}
|
||
},
|
||
computed: {
|
||
title() {
|
||
return this.form.id ? '编辑员工' : '添加员工'
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.resetForm = { ...this.form }
|
||
this.rolesGet()
|
||
},
|
||
methods: {
|
||
// 添加或编辑员工
|
||
onSubmitHandle() {
|
||
this.$refs.form.validate(async valid => {
|
||
if (valid) {
|
||
try {
|
||
this.loading = true
|
||
if (this.form.id) {
|
||
this.form.staff_id = this.form.id
|
||
}
|
||
await tbPlussShopStaff(this.form)
|
||
this.loading = false
|
||
this.$emit('success')
|
||
this.close()
|
||
this.$notify({
|
||
title: '成功',
|
||
message: `${this.title}成功`,
|
||
type: 'success'
|
||
});
|
||
} catch (error) {
|
||
this.loading = false
|
||
console.log(error);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取角色列表
|
||
async rolesGet() {
|
||
try {
|
||
const { content } = await rolesGet()
|
||
this.roles = content
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
reset() {
|
||
this.form = { ...this.resetForm }
|
||
},
|
||
close() {
|
||
this.dialogVisible = false
|
||
},
|
||
show(row) {
|
||
this.dialogVisible = true
|
||
if (row && row.id) {
|
||
// this.form = { ...row }
|
||
this.tbPlussShopStaffDetail(row.id)
|
||
} else {
|
||
// this.reset()
|
||
this.getList()
|
||
}
|
||
},
|
||
// 获取员工信息
|
||
async getList() {
|
||
const res = await tbShopPermissionlist()
|
||
this.$set(this.form, 'permissions', res)
|
||
},
|
||
// 通过id获取员工信息
|
||
async tbPlussShopStaffDetail(id) {
|
||
try {
|
||
const res = await tbPlussShopStaffDetail(id)
|
||
this.form = res
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
el-dialog {
|
||
padding-top: 6vh !important;
|
||
}
|
||
</style> |