273 lines
8.3 KiB
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>>
|