初始提交

components/Jnpf/RoleSelect/index.vue

@@ -0,0 +1,135 @@
+<template>
+	<view class="jnpf-role-select w-full">
+		<selectBox v-model="innerValue" :placeholder="placeholder" @openSelect="openSelect" :select-open="selectShow"
+			:disabled="disabled"  />
+		<SelectPopup v-model="selectShow" :getOptions="getOptions" :multiple="multiple" :selectedData="selectedData"
+			@close="handleClose" @confirm="handleConfirm" />
+	</view>
+</template>
+
+<script>
+	import SelectPopup from './SelectPopup';
+	import selectBox from '@/components/selectBox'
+	import {
+		useBaseStore
+	} from '@/store/modules/base'
+	import {
+		getRoleCondition
+	} from '@/api/common'
+	const baseStore = useBaseStore()
+	export default {
+		name: 'jnpf-role-select',
+		components: {
+			SelectPopup,
+			selectBox
+		},
+		props: {
+			modelValue: {
+				default: ''
+			},
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			selectType: {
+				type: String,
+				default: 'all'
+			},
+			ableIds: {
+				type: Array,
+				default: () => []
+			},
+		},
+		data() {
+			return {
+				selectShow: false,
+				innerValue: '',
+				selectedData: [],
+				allList: [],
+			}
+		},
+		watch: {
+			modelValue: {
+				handler() {
+					this.setDefault()
+				},
+				immediate: true
+			},
+			allList: {
+				handler() {
+					this.setDefault()
+				},
+				deep: true,
+			},
+		},
+		created() {
+			this.initData()
+		},
+		methods: {
+			async initData() {
+				this.allList = await baseStore.getRoleList()
+			},
+			setDefault() {
+				if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
+				let selectedData = [];
+				let val = this.multiple ? this.modelValue : [this.modelValue];
+				for (let i = 0; i < val.length; i++) {
+					inner: for (let j = 0; j < this.allList.length; j++) {
+						if (this.allList[j].id === val[i]) {
+							selectedData.push(this.allList[j])
+							break inner
+						}
+					}
+				}
+				this.selectedData = selectedData
+				this.innerValue = this.selectedData.map(o => o.fullName).join();
+			},
+			getOptions() {
+				return new Promise((resolve, reject) => {
+					if (this.selectType === 'custom') {
+						const query = {
+							ids: this.ableIds
+						}
+						getRoleCondition(query).then(res => {
+							resolve(res.data || [])
+						}).catch(error => {
+							reject(error)
+						})
+					} else {
+						baseStore.getRoleList().then(res => {
+							resolve(res || [])
+						})
+					}
+				})
+			},
+			setNullValue() {
+				this.innerValue = '';
+				this.selectedData = [];
+			},
+			openSelect() {
+				if (this.disabled) return
+				this.selectShow = true
+			},
+			handleConfirm(selectedData, selectedIds) {
+				if (!this.multiple) {
+					this.$emit('update:modelValue', selectedIds[0])
+					this.$emit('change', selectedIds[0], selectedData[0])
+				} else {
+					this.$emit('update:modelValue', selectedIds)
+					this.$emit('change', selectedIds, selectedData)
+				}
+			},
+			handleClose() {
+				this.selectShow = false
+			}
+		}
+	}
+</script>