jy2025-ui/src/views/risk/r3/components/addHz.vue

<template>
  <div>
    <el-form ref="objRef" :model="form" :rules="rules" label-width="120px" label-suffix=":" size="small">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="指标" prop="metricsId">
            <el-select v-model="form.metricsId" filterable placeholder="请输入..." style="width: 100%"
                       @change="changeMetricsId">
              <el-option v-for="item in metricsData" :key="item.metricsId" :label="item.metricsName"
                         :value="item.metricsId"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分析类型" prop="riskType">
            <el-select v-model="form.riskType" disabled placeholder="请选择分析类型" clearable style="width: 100%">
              <el-option
                  v-for="dict in risk_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="趋势恶化方向" prop="upDown">
            <el-select v-model="form.upDown" placeholder="请选择分析类型" clearable style="width: 100%">
              <el-option
                  v-for="dict in risk_up"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="置信区间" required>
            <el-input-number v-model="form.confidenceLevel" :min="95" :max="99" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定时分析" required>
            <el-select v-model="form.timeSwitch" placeholder="请选择是否定时分析">
              <el-option
                  v-for="dict in sys_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="指标对象" prop="objType" required>
            <el-select v-model="form.objType" filterable placeholder="请选择..." style="width: 240px"
                       :disabled="!form.metricsId" @change="changeObjType">
              <el-option v-for="item in [{key:'1',label:'全部'},{key:'2',label:'自定义'}]" :key="item.key"
                         :label="item.label" :value="item.key"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.objType === '2'">
          <el-form-item label="">
            <div class="tree-row" >
              <el-tree style="max-width: 600px" :props="propsNode" :data="modelTreeData" show-checkbox ref="treeRef"
                       node-key="objId"
                       @check-change="handleCheckChange"/>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn-row">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="emit('cancel')">取消</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive} from "vue";
import {listModelMs, listModelObj} from "@/api/risk/r2";
import {addModel, updateModel} from "@/api/risk/model";

const props = defineProps({
  riskType:{
    type:String,
    default:"1"
  }
})
const objRef = ref(null)
const {proxy} = getCurrentInstance()
const {
  analy_result,
  risk_up,
  sys_yes_no,
  risk_type
} = proxy.useDict('risk_type', 'analy_result', 'risk_up', 'sys_yes_no');
const emit = defineEmits(["cancel", "success"])
const treeRef = ref(null)
const riskIds = ref(null)
const treeIndex = ref([])
const data = reactive({
  form: {
    metricsName: "",
    riskType: props.riskType,
    upDown:"",
    metricsId: null,
    objType: "1",
    timeSwitch:"Y",
    confidenceLevel:95,
    objIds: []
  },
  rules: {
    metricsId: {required: true, message: "请选择指标"},
    riskType: {required: true, message: "请选择分析类型"},
    upDown: {required: true, message: "请选择趋势恶化方向"},
  }
})
const metricsData = ref([])
const modelTreeData = ref([])
const {form, rules} = toRefs(data)

const propsNode = {
  label: 'objName',
}

function handleCheckChange(data, checked) {
  form.value.objIds = checked ? [...form.value.objIds, data.objId] : form.value.objIds.filter(item => item !== data.objId)
}

function changeMetricsId(id) {
  form.value.metricsName = metricsData.value.find(item => item.metricsId === id).metricsName
  changeObjType(form.value.objType)
}

async function changeObjType(val) {
  if (val === "2") {
    form.value.objIds = []
    const res = await listModelObj(form.value.metricsId)
    modelTreeData.value = res.data
  } else {
    form.value.objIds = []
  }
}

onMounted(async () => {
  const res = await listModelMs()
  metricsData.value = res.data
})

async function submitForm() {
  objRef.value.validate(async valid => {
    if (valid) {
      const res = riskIds.value ? await updateModel({...form.value, riskId: riskIds.value}) : await addModel(form.value)
      proxy.$message.success(res.msg)
      emit('success')
    }
  })
}

async function editInfo(row) {
  treeIndex.value = []
  const {metricsName, riskType,upDown, timeSwitch, metricsId, objType, riskId,confidenceLevel} = row
  form.value = {metricsName, riskType, upDown,timeSwitch, metricsId, objType, confidenceLevel,objIds:[]}
  riskIds.value = riskId
  await changeObjType(objType)
  treeRef.value!.setCheckedNodes(row.riskObjList)
}

defineExpose({editInfo})

</script>
<style scoped lang="scss">
.tree-row {
  width: 100%;
  border: 1px solid #f1f1f1;
  padding: 5px;
}

.btn-row {
  display: flex;
  justify-content: center;
  margin: 0px -20px 0 -20px;
  padding-top: 20px;
  border-top: 1px solid #f1f1f1;
}
</style>