erp-el-element/Dialog/addStaff.vue

273 lines
8.3 KiB
Vue

<!--
* @Author: your name
* @Date: 2021-01-30 11:18:29
* @LastEditTime: 2023-02-20 11:00:58
* @LastEditors: ckycjwds 1240973496@qq.com
* @Description: In User Settings Edit
* @FilePath: \aiguo_erp_vue\src\components\Dialog\addbrand.vue
-->
<template>
<div class="bodydialog">
<el-dialog
:title="Obj.DialogTitle"
:visible.sync="dialogVisible"
width="52%"
:before-close="handleClose"
:close-on-click-modal="false"
>
<!-- :close-on-click-modal="false"-->
<el-form
ref="ruleForm"
label-position="left"
:model="ruleForm"
label-width="100px"
:rules="rules"
size="small"
class="demo-ruleForm"
>
<el-row>
<el-col v-for="(item, index) in Input" :key="index" :span="item.span">
<el-form-item
v-if="item.show "
:prop="item.prop"
:label="item.label"
>
<div style="display: flex;width: 100%;">
<div v-if="item.label == '部门'" style="width: 100%;">
<!-- <cascader
:changeOnSelect="true"
canSearch
v-model="ruleForm[item.enName]"
expandType="hover"
:options="item.options"
:popperProps="popperProps"
></cascader> -->
<el-cascader
v-model="ruleForm[item.enName]"
clearable
:props="{ checkStrictly: true }"
:options="item.options"
/>
</div>
<el-input v-else-if="item.label == '基本薪资' || item.label == '登录时长'" v-model="ruleForm[item.enName]" size="mini" :placeholder="item.placeholder" @input="ruleForm[item.enName] = AmountInput(ruleForm[item.enName])">
<span v-if="!!item.append" slot="append">{{ item.append }}</span>
</el-input>
<div v-else-if="item.label == '状态'" style="width: 100%;">
<el-radio-group v-model="ruleForm[item.enName]">
<el-radio :label="0">正常</el-radio>
<el-radio :label="1">非正常</el-radio>
</el-radio-group>
</div>
<div v-else-if="item.label == '小程序'" style="width: 100%;">
<el-radio-group v-model="ruleForm[item.enName]">
<el-radio :label="0">允许</el-radio>
<el-radio :label="1">不允许</el-radio>
</el-radio-group>
</div>
<div v-else-if="item.label == '微信绑定'" style="width: 100%;">
<el-popover
v-if="!ruleForm['openid']"
v-model="popshow"
placement="top"
title=""
width="260"
trigger="click"
@hide="hide()"
>
<el-image src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/erp_img/logo.png" />
<div class="center qrcode">
<el-image style="height:200px;width:200px;" :src="imgurl">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</div>
<div slot="reference" style="color:#005bf5;cursor: pointer;" @click="bind()">
<i class="iconfont iconbangding4" style="margin-right:10px" />
<span>绑定微信</span>
</div>
</el-popover>
<span v-else style="color:green">扫码成功</span>
</div>
<div
:is="item.type"
v-else
v-model="ruleForm[item.enName]"
:placeholder="item.placeholder"
:value="item.value"
:style="item.width"
:format="item.format"
:type="item.TimeType"
:value-format="item.valueformat"
:clearable="true"
:filterable="item.filterable"
:disabled="item.disabled"
:allow-create="item.allowcreate"
:default-first-option="item.defaultfirstoption"
:multiple="item.multiple"
:props="item.props"
:name="item.name"
:show-password="item.showpassword"
@change="change(item.enName, ruleForm[item.enName], Obj.DialogTitle)"
@input="input($event)"
@focus="(v) => focus(ruleForm, item)"
>
<el-option
v-for="items in item.options"
:key="items.value"
:label="items.label"
:value="items.value"
/>
</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="resetForm()">取 消</el-button>
<el-button size="small" type="primary" @click="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { qrcode, wx_unbinding } from '@/api/qrcode'
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name: 'AddStaff',
components: {
QRCode
},
props: {
dialogVisible: {
type: Boolean,
default: () => {
return false
}
},
Obj: {
type: Object,
default: () => {
return {}
}
},
Input: {
type: Array,
default: () => {
return []
}
},
ruleForm: {
type: Object,
default: () => {
return {}
}
},
rules: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
popperProps: {
place: 'bottom-start',
positionFixed: true
},
imgurl: '',
timer: 0,
popshow: false
}
},
watch: {
ruleForm: {
handler() {
console.log(this.ruleForm)
},
deep: true
}
},
methods: {
hide() {
clearInterval(this.timer)
this.popshow = false
},
handleClose() {
this.$refs['ruleForm'].clearValidate()
this.$emit('update:dialogVisible', false)
},
resetForm() {
this.$refs['ruleForm'].clearValidate()
this.$emit('update:dialogVisible', false)
},
input(e) {
this.$forceUpdate()
},
change(enName, e, DialogTitle) {
this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle })
},
focus(row, item) {
this.$emit('Selectfocus', { row: row, item: item })
},
async bind() {
// this.popshow=true
clearInterval(this.timer)
const res = await qrcode({ type: 'erp', user_id: -1 })
this.$nextTick(() => {
this.imgurl = res.datas.qrcode
})
this.timer = setInterval(async() => {
this.$store.dispatch('user/wxbinding', { ticket: res.datas.ticket }).then((res) => {
if (res.errcode == 0) {
// this.$store.dispatch('user/getInfo')
this.ruleForm.openid = res.datas.openid
this.ruleForm.unionid = res.datas.unionid
this.popshow = false
clearInterval(this.timer)
}
})
}, 2000)
},
submitForm(formName, name, DialogTitle) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm)
this.$emit('save', {
row: this.ruleForm,
tabPosition: this.tabPosition,
checked: this.checked,
name: name,
DialogTitle: DialogTitle
})
// this.$emit('update:dialogVisible', false)
} else {
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.bodydialog ::v-deep .el-form-item{
margin-bottom: 18px;
margin-left: 18px;
}
.bodydialog ::v-deep .el-cascader--small{
width: 100%;
}
.center {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
</style>>