123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <template>
- <view class="evan-form-show flex flex_column">
- <view class="flex_1">
- <evanForm ref="formData" :rules="ruleValidate" :model="formData">
- <evanFormItem label="员工姓名" prop="name">
- <input class="form-input" placeholder-class="form-input-placeholder" :maxlength="30" placeholder="请输入姓名(最多30个字符)" v-model="formData.name" />
- </evanFormItem>
- <evanFormItem label="手机号码" prop="mobile">
- <input type="number" :disabled="formData.isManager==1 && formData.id?true:false" class="form-input" placeholder="请输入您的手机号码" placeholder-class="form-input-placeholder" v-model="formData.mobile" :maxlength="11"/>
- </evanFormItem>
- <evanFormItem label="性别" prop="sex">
- <view style="width: 100%;display:flex;justify-content: flex-end;">
- <u-radio-group v-model="formData.sex">
- <u-radio
- v-for="(item, index) in sexList" :key="index"
- :name="item.value"
- shape="circle"
- >
- {{item.name}}
- </u-radio>
- </u-radio-group>
- </view>
- </evanFormItem>
- <evanFormItem label="岗位" v-if="!isEdit||formData.isManager==0" prop="roleNames">
- <u-input type="select" style="width:100%" input-align="right" placeholder="请选择岗位" @click="showRoles=true" v-model="formData.roleNames"/>
- <u-popup v-model="showRoles" mode="bottom">
- <view style="padding: 1rem;width: 100%;">
- <view style="position: relative;padding: 0.5rem;width: 100%;text-align: center;border-bottom: 1px solid #eee;font-size:1.1rem;">
- <text @click="toAddRole()" style="color:#066cff;position: absolute;left:0;top:0.5rem;font-size:0.9rem;">新增岗位</text>
- 选择岗位
- </view>
- <view style="padding:1rem;min-height: 15rem;" v-if="roleList.length">
- <u-radio-group wrap v-model="formData.roleIds" @change="radioGroupChange">
- <u-radio
- v-for="(item, index) in roleList" :key="item.id"
- :name="item.id"
- :disabled="!item.isEnable"
- :icon-size="30"
- :label-size="32"
- >
- {{item.name}}
- </u-radio>
- </u-radio-group>
- </view>
- <view style="color: #999;text-align: center;padding:3rem 0;" v-else>
- 暂无岗位信息,请点击“新增岗位”
- </view>
- </view>
- </u-popup>
- </evanFormItem>
- </evanForm>
- </view>
- <view class="form-footer-btn flex align_center justify_center">
- <u-button shape="circle" v-if="isEdit&&formData.isManager==0" @click="delPerson()" :custom-style="{width:'300rpx',marginRight:'20rpx' }">删除</u-button>
- <u-button shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'300rpx' }" @click="save('formData')">保存</u-button>
- </view>
- </view>
- </template>
- <script>
- import {saveEmployee, delEmployee } from '@/api/employee'
- import { getRoleList } from '@/api/powerRole-md.js'
- import evanForm from '@/components/evan-form/evan-form.vue'
- import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
- export default{
- components:{
- evanForm,
- evanFormItem,
- },
- data(){
- return{
- showRoles: false,
- roleList: [], // 角色 数据列表
- roleArr: [], // 当前所选角色
- formData:{
- name: '',
- sex: '1',
- mobile: '',
- },
- ruleValidate: {
- name: [{ required: true, message: '请输入员工姓名'}],
- mobile: [{required: true, min:11, message: '请输入正确手机号码'}],
- sex: [{ required: true, message: '请选择性别' }],
- },
- sexList: [
- {
- value: 1,
- name: '男',
- disabled: false,
- },
- {
- value: 0,
- name: '女',
- disabled: false
- }
- ],
- isManager: '',
- isEdit: false
- }
- },
- onLoad() {
- this.init()
- this.getRole()
-
- const _this = this;
- uni.$on("refashRoleList",function(data){
- _this.getRole()
- if(data){
- _this.formData.roleIds = data.id;
- _this.formData.roleNames = data.name;
- }
- })
- },
- methods:{
- // 初始化数据
- init(){
- let data = this.$store.state.vuex_nowStaffData
- console.log(data)
- // 编辑信息
- if(!!data){
- this.isEdit = true
- this.formData = Object.assign({},this.formData,data)
- }else{
- this.isEdit = false
- this.formData.workFlag = '1'
- this.formData.userType = '1'
- }
- // 添加员工或非负责人时显示岗位
- if(!this.isEdit || this.formData.isManager==0){
- this.ruleValidate.roleNames = [{ required: true, message: '请选择岗位' }]
- }
- uni.setNavigationBarTitle({
- title: !!data ? "编辑员工" : '新增员工'
- })
- },
- // 获取角色
- getRole(){
- getRoleList().then(res => {
- this.roleList = res.data || []
- })
- },
- radioGroupChange(e) {
- console.log(e);
- this.formData.roleIds = e;
- const roleNames = this.roleList.find(item => item.id == e);
- this.formData.roleNames = roleNames?roleNames.name:'';
- this.showRoles = false
- },
- toAddRole(){
- this.showRoles = false
- uni.navigateTo({
- url:'/pages/storeManage/roleSetting/addRole?type=add'
- })
- },
- // 保存
- save(name){
- let data=this.formData
- this.$refs[name].validate((valid) => {
- if (valid) {
- if(!this.formData.roleNames && this.formData.isManager==0){
- uni.showToast({icon: 'none', title: '请选择岗位'})
- }else{
- saveEmployee(data).then(res=>{
- console.log(res)
- if(res.status == 200){
- uni.showToast({icon: 'none', title:'保存成功'})
- this.cancel()
- }else{
- uni.showToast({icon: 'none', title: res.message})
- }
- })
- }
- }
- })
- },
- // 删除员工
- delPerson(){
- let _this = this
- const item = this.formData
- uni.showModal({
- title: '提示',
- content: '数据删除后无法恢复, 确认删除吗?',
- success: (ret) => {
- if(ret.confirm||ret.index==0){
- // 删除数据
- delEmployee({id: item.id}).then(res=>{
- if(res.status == 200){
- this.cancel()
- }
- uni.showToast({icon: 'none', title: res.message})
- })
- }
- }
- })
- },
- cancel(){
- setTimeout(function(){
- uni.navigateBack()
- },100)
- }
- }
- }
- </script>
- <style lang="less">
- .evan-form-show {
- padding: 0;
- background-color: #fff;
- height: 100vh;
- > view{
- padding:0.8rem;
- }
- .form-footer-btn{
- padding: 0.8rem 1.5rem;
- }
- .form-input {
- font-size: 28rpx;
- color: #333;
- text-align: right;
- width: 95%;
- box-sizing: border-box;
- height: 60rpx;
- &.textarea{
- height: 240rpx;
- padding: 24rpx 0;
- text-align: left;
- }
- }
- .form-input-placeholder {
- font-size: 28rpx;
- color: #999;
- }
- }
- </style>
|