cip-components/cip-form-input/special-view/audit-status/view.vue

<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>