<template>
<div>
<el-dialog
title="分享折扣模板"
top="8vh"
:visible="sharTemplateShow"
:before-close="beforeClose"
@close="handleCloseDialog"
@open="openDialog"
>
<el-form ref="formSearch" :model="formSearch" label-width="100px" :rules="formSearchRules">
<el-form-item label="分享用户:" prop="sharList">
<el-select
v-model="formSearch.sharList"
multiple
filterable
allow-create
style="width:90%"
default-first-option
placeholder="请选择分享用户"
value-key
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.nickName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template v-slot:footer>
<el-button
style="margin-top: 12px"
type="primary"
@click="onSubmit"
>确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
// GET 获取分享的用户列表 // POST 分享用户按钮 // GET 查看分享情况
import { reqGetShareUser, reqShareDiscountTemplate, reqGetShareInfoList } from '@/api/discount'
export default {
name: 'CloudControlTemplateShar',
props: {
sharTemplateShow: {
type: Boolean,
required: true
},
// userIdList: {
// type: Array,
// required: true
// }
sharId: {
type: String,
required: true
}
},
data() {
return {
formSearch: {
sharList: []
},
options: [],
formSearchRules: {
sharList: [{ required: true, message: '请选择分享用户', trigger: ['blur', 'change'] }]
}
}
},
mounted() {
},
methods: {
// 开启
openDialog() {
this.getShareUser()
},
// 取消
handleCloseDialog() {
this.$emit('update:sharTemplateShow', false)
this.formSearch.sharList = ''
this.$refs.formSearch.resetFields()
},
// 关闭弹层前
async beforeClose(done) {
const confirmResult = await this.$confirm(
'内容还未保存,此操作会导致信息丢失!是否继续?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch((err) => err)
if (confirmResult === 'cancel') return
done()
},
// 获取分享拥护
async getShareUser() {
const { result: res } = await reqGetShareUser()
this.options = res
console.log(res)
},
// 确认
async onSubmit() {
// if (this.formSearch.sharList.length <= 0) return this.$message.warning('请选择分享用户')
this.$refs.formSearch.validate(async(valid) => {
if (!valid) return
console.log(this.sharId, this.formSearch.sharList)
const res = await reqShareDiscountTemplate({
discountTemplateId: this.sharId,
userIdList: this.formSearch.sharList
})
if (res.code === 200) {
this.$message.success('分享成功')
this.handleCloseDialog()
this.$emit('getlistTemplate')
}
// console.log(res)
})
},
// GET 查看分享情况 回显
async getShareInfoList() {
const res = await reqGetShareInfoList(this.sharId)
// console.log(res)
const Ids = res.map(item => item.shareUserId)
this.formSearch.sharList = Ids // 多选框数据回显 Id与 options数组里的ID对应即可
}
}
}
</script>
<style lang="scss" scoped>
</style>
element-ui select 多选框 使用 默认数据回显
最新推荐文章于 2024-09-04 08:33:34 发布