ebiz-ai-knowledge-manage/src/views/applicationManagement/employRule/components/RuleViewDialog.vue

<template>
  <el-dialog
    title="查看规则"
    :visible.sync="dialogVisible"
    width="600px"
    @close="handleClose"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-width="120px"
      v-loading="loading"
    >
      <!-- 规则类型 -->
      <el-form-item label="规则类型">
        <el-select
          v-model="ruleForm.ruleType"
          placeholder="请选择规则类型"
          style="width: 100%"
          disabled
        >
          <el-option
            v-for="item in ruleTypeList"
            :key="item.typeCode"
            :label="item.typeName"
            :value="item.typeCode"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 字段类型 -->
      <el-form-item label="字段类型">
        <el-select
          v-model="ruleForm.ruleField"
          placeholder="请选择字段类型"
          style="width: 100%"
          disabled
        >
          <el-option
            v-for="item in fieldTypeList"
            :key="item.fieldName"
            :label="item.fieldComment"
            :value="item.fieldName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 规则描述 -->
      <el-form-item label="规则描述">
        <el-input
          type="textarea"
          v-model="ruleForm.ruleDesc"
          placeholder="请输入规则描述"
          :rows="3"
          disabled
        ></el-input>
      </el-form-item>

      <!-- 风险提示话术 -->
      <el-form-item label="风险提示话术">
        <el-input
          v-model="ruleForm.riskScript"
          placeholder="请输入风险提示话术"
          disabled
        ></el-input>
      </el-form-item>

      <!--      &lt;!&ndash; 校验内容类型 &ndash;&gt;-->
      <!--      <el-form-item label="校验内容类型">-->
      <!--        <el-select -->
      <!--          v-model="ruleForm.checkType" -->
      <!--          placeholder="请选择校验内容类型" -->
      <!--          style="width: 100%"-->
      <!--          disabled-->
      <!--        >-->
      <!--          <el-option label="表单信息" :value="1"></el-option>-->
      <!--          <el-option label="文本文件" :value="2"></el-option>-->
      <!--          <el-option label="图片" :value="3"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <!--      &lt;!&ndash; 风险类型 &ndash;&gt;-->
      <!--      <el-form-item label="风险类型">-->
      <!--        <el-select -->
      <!--          v-model="ruleForm.riskType" -->
      <!--          placeholder="请选择风险类型" -->
      <!--          style="width: 100%"-->
      <!--          disabled-->
      <!--        >-->
      <!--          <el-option-->
      <!--            v-for="item in riskTypeList"-->
      <!--            :key="item.riskTypeCode"-->
      <!--            :label="item.riskType"-->
      <!--            :value="item.riskTypeCode">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <!--      &lt;!&ndash; 运行类型 &ndash;&gt;-->
      <!--      <el-form-item label="运行类型">-->
      <!--        <el-radio-group v-model="ruleForm.runType" disabled>-->
      <!--          <el-radio label="ai">AI</el-radio>-->
      <!--          <el-radio label="func">函数</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

      <!-- 规则状态 -->
      <!--      <el-form-item label="规则状态">-->
      <!--        <el-switch-->
      <!--          v-model="ruleForm.ruleStatus"-->
      <!--          :active-value="1"-->
      <!--          :inactive-value="0"-->
      <!--          active-text="启用"-->
      <!--          inactive-text="未启用"-->
      <!--          disabled-->
      <!--        >-->
      <!--        </el-switch>-->
      <!--      </el-form-item>-->
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="medium">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryRuleDetail } from '@/api/riskCheck/rule'

export default {
  name: 'RuleViewDialog',
  props: {
    // 对话框是否可见
    visible: {
      type: Boolean,
      default: false
    },
    // 当前规则数据
    ruleData: {
      type: Object,
      default: () => ({})
    },
    // 规则类型选项列表
    ruleTypeOptions: {
      type: Array,
      default: () => []
    },
    // 字段类型选项列表
    fieldTypeOptions: {
      type: Array,
      default: () => []
    },
    // 风险类型选项列表
    riskTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      // 表单数据
      ruleForm: {
        id: '',
        ruleType: '',
        ruleField: '',
        ruleDesc: '',
        riskScript: '',
        checkType: 1,
        riskType: '',
        ruleStatus: 0,
        runType: 'ai'
      }
    }
  },
  computed: {
    // 对话框可见性
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    // 规则类型选项列表
    ruleTypeList() {
      return this.ruleTypeOptions.length > 0
        ? this.ruleTypeOptions
        : [
            { typeName: '基本信息', typeCode: 'basic_rule' },
            { typeName: '投保信息', typeCode: 'insurance_rule' }
          ]
    },
    // 字段类型选项列表
    fieldTypeList() {
      return this.fieldTypeOptions.length > 0
        ? this.fieldTypeOptions
        : [
            { fieldComment: '保险期限（天）', fieldName: 'insurance_period' },
            { fieldComment: '投保金额', fieldName: 'insurance_amount' }
          ]
    },
    // 风险类型选项列表
    riskTypeList() {
      return this.riskTypeOptions.length > 0
        ? this.riskTypeOptions
        : [
            {
              riskType: '费率与投保方案不合理风险',
              riskTypeCode: 'rate_plan_risk'
            },
            {
              riskType: '保险责任不明确风险',
              riskTypeCode: 'insurance_liability_risk'
            }
          ]
    }
  },
  watch: {
    // 监听规则数据变化
    ruleData: {
      handler(val) {
        if (val && Object.keys(val).length > 0) {
          this.ruleForm = Object.assign({}, val)
        }
      },
      immediate: true
    }
  },
  methods: {
    // 关闭对话框
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
</style>