jy2025-ui/src/views/risk/r2/components/addModel.vue

<template>
  <div>
    <el-form ref="objRef" :model="form" :rules="rules" label-width="120px" label-suffix=":">
      <el-form-item label="指标" prop="metricsId">
        <el-select v-model="form.metricsId" filterable placeholder="请输入..." style="width: 240px"
                   @change="changeMetricsId">
          <el-option v-for="item in metricsData" :key="item.metricsId" :label="item.metricsName"
                     :value="item.metricsId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="分析类型">
        异类分析
      </el-form-item>
      <el-form-item label="定时分析" prop="timeSwitch" 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-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>
        <div class="tree-row" v-if="form.objType === '2'">
          <el-tree style="max-width: 600px" :props="props" :data="modelTreeData" show-checkbox ref="treeRef"
                   node-key="objId"
                   @check-change="handleCheckChange"/>
        </div>
      </el-form-item>
    </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 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: "3",
    timeSwitch: "Y",
    metricsId: null,
    objType: "1",
    objIds: []
  },
  rules: {
    metricsId: {required: true, message: "请选择指标"}
  }
})
const metricsData = ref([])
const modelTreeData = ref([])
const {form, rules} = toRefs(data)

const props = {
  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, timeSwitch, metricsId, objType, riskId} = row
  form.value = {metricsName, riskType, timeSwitch, metricsId, objType, 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;
  margin-top: 10px;
}

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