APP文件新增
This commit is contained in:
142
JeecgUniapp-master/src/components/Popup/Popup.vue
Normal file
142
JeecgUniapp-master/src/components/Popup/Popup.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="Popup">
|
||||
<view class="inputArea" :class="{ clear: !!showText }" @click="handleClick">
|
||||
<wd-input
|
||||
:placeholder="`请选择${$attrs.label}`"
|
||||
type="text"
|
||||
readonly
|
||||
v-model="showText"
|
||||
clearable
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<view v-if="!!showText && !$attrs.disabled" class="u-iconfont u-icon-close" @click.stop="handleClear"></view>
|
||||
</view>
|
||||
<popupReportModal
|
||||
v-if="reportModal.show"
|
||||
:code="code"
|
||||
:showFiled="reportModal.showFiled"
|
||||
:multi="multi"
|
||||
@close="handleClose"
|
||||
@change="handleChange"
|
||||
></popupReportModal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, useAttrs } from 'vue'
|
||||
import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
|
||||
import { http } from '@/utils/http'
|
||||
import popupReportModal from './components/popupReportModal.vue'
|
||||
defineOptions({
|
||||
name: 'Popup',
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
fieldConfig: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
setFieldsValue: {
|
||||
type: Function,
|
||||
required: true,
|
||||
default: () => {},
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
multi: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
spliter: {
|
||||
type: String,
|
||||
default: ',',
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const toast = useToast()
|
||||
const showText = ref('')
|
||||
const attrs: any = useAttrs()
|
||||
const reportModal = reactive({
|
||||
show: false,
|
||||
showFiled: props.fieldConfig.map((item) => item['source']).join(','),
|
||||
})
|
||||
if (!props.code || props.fieldConfig.length == 0) {
|
||||
toast.error('popup参数未正确配置!')
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听value数值
|
||||
*/
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
showText.value = val && val.length > 0 ? val.split(props.spliter).join(',') : ''
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
function callBack(rows) {
|
||||
let fieldConfig: any = props.fieldConfig
|
||||
//匹配popup设置的回调值
|
||||
let values = {}
|
||||
let labels = []
|
||||
for (let item of fieldConfig) {
|
||||
let val = rows.map((row) => row[item.source])
|
||||
val = val.length == 1 ? val[0] : val.join(',')
|
||||
item.target.split(',').forEach((target) => {
|
||||
values[target] = val
|
||||
})
|
||||
}
|
||||
showText.value = labels.join(',')
|
||||
props.setFieldsValue(values)
|
||||
emit('change', values)
|
||||
// emit('update:modelValue', values)
|
||||
}
|
||||
|
||||
// 清空
|
||||
const handleClear = () => {
|
||||
showText.value = ''
|
||||
handleChange([])
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
if (!attrs.disabled) {
|
||||
reportModal.show = true
|
||||
}
|
||||
}
|
||||
const handleClose = () => {
|
||||
reportModal.show = false
|
||||
}
|
||||
const handleChange = (data) => {
|
||||
console.log('选中的值:', data)
|
||||
callBack(data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inputArea {
|
||||
position: relative;
|
||||
.u-icon-close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: calc(14px + 4px);
|
||||
color: #585858;
|
||||
font-size: 15px;
|
||||
}
|
||||
&.clear {
|
||||
:deep(.wd-input__body) {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user