143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
|
<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>
|