<script lang="ts" setup>
|
import { computed, reactive, ref } from 'vue'
|
import { deepCopy } from '@/utils/utils'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { storeToRefs } from 'pinia'
|
import { ElMessage } from 'element-plus-secondary'
|
const loading = ref(false)
|
const subject = ref()
|
const subjectDialogShow = ref(false)
|
const dvMainStore = dvMainStoreWithOut()
|
const { canvasViewInfo } = storeToRefs(dvMainStore)
|
|
const state = reactive({
|
viewId: null
|
})
|
const curDataSetParamsInfo = ref([])
|
|
const resetForm = () => {
|
subject.value.clearValidate()
|
subjectDialogShow.value = false
|
}
|
const subjectForm = ref(null)
|
const rules = ref({})
|
|
const optInit = item => {
|
if (item) {
|
state.viewId = item.id
|
const chartInfo = canvasViewInfo.value[state.viewId]
|
curDataSetParamsInfo.value = deepCopy(chartInfo.calParams)
|
subjectDialogShow.value = true
|
}
|
}
|
|
const saveSubject = () => {
|
if (disabledCheck.value) {
|
ElMessage.error('请输入正确参数')
|
return
|
}
|
canvasViewInfo.value[state.viewId]['calParams'] = curDataSetParamsInfo.value
|
useEmitt().emitter.emit('calcData-' + state.viewId, canvasViewInfo.value[state.viewId])
|
resetForm()
|
}
|
|
const disabledCheck = computed(() => {
|
return (
|
!curDataSetParamsInfo.value ||
|
(curDataSetParamsInfo.value &&
|
curDataSetParamsInfo.value.filter(item => item.value === null || item.value === undefined)
|
.length > 0)
|
)
|
})
|
|
const statesCheck = () => {
|
return subjectDialogShow.value
|
}
|
|
const handleDialogClick = e => {
|
e.preventDefault()
|
e.stopPropagation()
|
}
|
|
defineExpose({
|
optInit,
|
statesCheck,
|
resetForm
|
})
|
</script>
|
|
<template>
|
<el-dialog
|
v-loading="loading"
|
title="计算参数输入"
|
v-model="subjectDialogShow"
|
width="400px"
|
:before-close="resetForm"
|
@click="handleDialogClick"
|
>
|
<el-form
|
v-if="subjectDialogShow"
|
label-position="top"
|
ref="subject"
|
:model="subjectForm"
|
:rules="rules"
|
@submit.prevent
|
>
|
<el-form-item
|
v-for="paramsItem in curDataSetParamsInfo"
|
:key="paramsItem"
|
class="form-item"
|
:prop="'value_' + paramsItem.name"
|
>
|
<template #label>
|
<label class="m-label">
|
计算字段[{{ paramsItem.name }}] <span style="color: red">*</span>
|
</label>
|
</template>
|
<el-input-number
|
style="width: 100%"
|
v-model="paramsItem.value"
|
placeholder="请输入一个数字"
|
controls-position="right"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button secondary @click="resetForm()">取消</el-button>
|
<el-button type="primary" @click="saveSubject()">确认</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<style lang="less" scoped>
|
:deep(.ed-dialog__header) {
|
text-align: left;
|
}
|
.m-label {
|
color: #1f2329;
|
font-size: 14px;
|
font-style: normal;
|
font-weight: 400;
|
line-height: 14px;
|
display: inline-block;
|
}
|
.form-item {
|
margin-bottom: 16px;
|
:deep(.ed-form-item__label) {
|
line-height: 14px !important;
|
}
|
|
:deep(.ed-input__inner) {
|
font-size: 14px !important;
|
}
|
|
:deep(.ed-form-item__error) {
|
top: 88%;
|
}
|
.ed-input {
|
--ed-input-height: 32px !important;
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
:deep(.avatar-uploader-container) {
|
margin-bottom: 0px;
|
}
|
}
|
</style>
|
