1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <template>
- <div class="audit-status">
- <span>{{viewValue}}</span>
- <template v-if="isShowOtherValue && contentValue">
- <el-popover :title="titleValue" :content="contentValue" placement="top" trigger="hover">
- <template #reference>
- <i class="el-icon-warning cip-danger-color" style="margin-left:4px"></i>
- </template>
- </el-popover>
- </template>
- </div>
- </template>
- <script>
- import { computed, readonly } from 'vue'
- import { ElPopover } from 'element-plus'
- import { formInputViewProps } from '../../form-input-props'
- import { useFormView } from '../../../hooks/form-input'
- export default {
- components: { ElPopover },
- props: formInputViewProps,
- setup (props) {
- const { securityConfig } = useFormView(props)
- const isShowOtherValue = computed(() => {
- if (!securityConfig.value.showOtherValue) return false
- // 转为数组
- const showOtherValue = [].concat(securityConfig.value.showOtherValue)
- return showOtherValue.includes(props.modelValue)
- })
- const contentValue = computed(() => {
- const { formatterOther } = securityConfig.value
- if (typeof formatterOther === 'function') return formatterOther(props.modelValue, readonly(securityConfig.value), props.dependOnValues)
- return props.otherValue
- })
- const titleValue = computed(() => {
- const { formatterTitle } = securityConfig.value
- if (typeof formatterTitle === 'function') return formatterTitle(props.modelValue, readonly(securityConfig.value), props.dependOnValues)
- return props.otherLabel
- })
- const viewValue = computed(() => {
- const { formatter } = securityConfig.value
- if (typeof formatter === 'function') return formatter(props.modelValue, readonly(securityConfig.value))
- return props.modelValue
- })
- return {
- isShowOtherValue,
- contentValue,
- titleValue,
- viewValue
- }
- }
- }
- </script>
- <style lang="less">
- .audit-status{
- display: flex;
- align-items: center;
- }
- </style>
|