vue-fastapi-admin/vue-fastapi-frontend/src/views/metadataConfig/metaclas/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-form :inline="true" :model="queryForm">

        <el-form-item label="归属系统">
        <el-select v-model="queryForm.ssysCd" placeholder="请选择系统" clearable   allow-create filterable  style="width: 180px">
          <el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
        <el-form-item label="模式名">
          <el-input
            v-model="queryForm.mdlName"
            placeholder="请输入模式名"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
<span> 值类型参数调整</span>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="openAddDialog1"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="selectedRows1.length !== 1"
          @click="openEditDialog1(selectedRows1[0])"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="selectedRows1.length === 0"
          @click="deleteSelected1"
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="configList1"
      @selection-change="handleSelectionChange1"
      style="width: 100%"
      height="500"

      border
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="datatype" label="值类型"/>
      <el-table-column prop="ratio" label="阈值"/>
      <el-table-column prop="updBy" label="更新人"/>

      <el-table-column prop="updTime" label="更新时间" />
    </el-table>

<span> 业务类型参数调整</span>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="openAddDialog2"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="selectedRows2.length !== 1"
          @click="openEditDialog2(selectedRows2[0])"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="selectedRows2.length === 0"
          @click="deleteSelected2"
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="configList2"
      @selection-change="handleSelectionChange2"
      style="width: 100%"
      height="500"
      border
      stripe
    >
   <el-table-column type="selection" width="55" />
      <el-table-column prop="regexName" label="业务类型"/>
      <el-table-column prop="regexPattern" label="正则表达式"  />
      <el-table-column prop="ratio" label="阈值"  />
      <el-table-column prop="updBy" label="更新人" />

      <el-table-column prop="updTime" label="更新时间"  />
    </el-table>

<span> 字段处理类型参数调整</span>  
<el-form
        ref="clasFormRef3"
        :model="form3"
        label-width="120px"
        size="small"
      >
<span>唯一类型数值类判定条件</span>

        <el-form-item label="空值率小于" prop="config1">
          <el-input v-model="form3.config1" autocomplete="off" />
        </el-form-item>
        <el-form-item label="值长度方差小于" prop="config2">
          <el-input v-model.number="form3.config2" autocomplete="off" />
        </el-form-item>
        <el-form-item label="重复率大于" prop="config3">
          <el-input v-model.number="form3.config3" autocomplete="off" />
        </el-form-item>
        <span>唯一类型非数值类判定条件</span>
        <el-form-item label="重复率大于" prop="config4">
          <el-input v-model.number="form3.config4" autocomplete="off" />
        </el-form-item>
        <span>忽略类型数值类判断条件</span>
        <el-form-item label="空值率大于" prop="config5">
          <el-input v-model.number="form3.config5" autocomplete="off" />
        </el-form-item>
        <span>忽略类型其他判断条件</span>
        <el-form-item label="平均值长大于" prop="config6">
          <el-input v-model.number="form3.config6" autocomplete="off" />
        </el-form-item>
      </el-form>
        <el-button type="primary" @click="submitForm3">保存</el-button>
    <el-dialog
      :title="title"
      v-model="open1"
      width="500px"
      append-to-body
      :before-close="handleClose1"
    >
      <el-form
        ref="clasFormRef1"
        :model="form1"
        :rules="rules1"
        label-width="120px"
        size="small"
      >

        <el-form-item label="值类型" prop="datatype">
          <el-input v-model="form1.datatype" autocomplete="off" />
        </el-form-item>
        <el-form-item label="阈值" prop="ratio">
          <el-input v-model.number="form1.ratio" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button @click="open1 = false">取消</el-button>
        <el-button type="primary" @click="submitForm1">保存</el-button>
      </template>
    </el-dialog>
        <el-dialog
      :title="title"
      v-model="open2"
      width="500px"
      append-to-body
      :before-close="handleClose2"
    >
      <el-form
        ref="clasFormRef2"
        :model="form2"
        :rules="rules2"
        label-width="120px"
        size="small"
      >

        <el-form-item label="业务类型" prop="regexName">
          <el-input v-model="form2.regexName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="正则表达式" prop="regexPattern">
          <el-input v-model="form2.regexPattern" autocomplete="off" />
        </el-form-item>
        <el-form-item label="阈值" prop="ratio">
          <el-input v-model.number="form2.ratio" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button @click="open2 = false">取消</el-button>
        <el-button type="primary" @click="submitForm2">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  deleteDatatypeLabel,
  editDatatypeLabel,
  addDatatypeLabel,
  getDatatypeLabelList,
  deleteBusiLabel,
  editBusiLabel,
  addBusiLabel,
  addDataopLabel,
  getDataopLabelList,
  getBusiLabelList
} from "@/api/metadataConfig/metadataConfig";
import useUserStore  from '@/store/modules/user'; // 注意路径是否正确

const userStore = useUserStore(); // 正确调用
const dsSysList = userStore.dsSysList; // 访问属性
const queryForm = reactive({
  ssysCd: "*",
  mdlName: "*",
});

const configList1 = ref([]); // 值类型参数数据
const configList2 = ref([]); // 业务类型参数数据
const loading = ref(false);

const open1 = ref(false); // 值类型弹窗开关
const open2 = ref(false); // 业务类型弹窗开关
const title = ref("");

const clasFormRef1 = ref(null); // 值类型 formRef
const clasFormRef2 = ref(null); // 业务类型 formRef

const form1 = reactive({
  datatype: "",
  ratio: null,
});
const form2 = reactive({
  regexName: "",
  regexPattern: "",
  ratio: null,
});
const form3 = reactive({
  config1: null,
  config2: null,
  config3: null,
  config4: null,
  config5: null,
  config6: null,
  config7: null,
});

const rules1 = {
  datatype: [{ required: true, message: "请输入值类型", trigger: "blur" }],
  ratio: [{ required: true, message: "请输入阈值", trigger: "blur" }],
};
const rules2 = {
  regexName: [{ required: true, message: "请输入业务类型", trigger: "blur" }],
  regexPattern: [{ required: true, message: "请输入正则表达式", trigger: "blur" }],
  ratio: [{ required: true, message: "请输入阈值", trigger: "blur" }],
};

const selectedRows1 = ref([]);
const selectedRows2 = ref([]);

function handleSelectionChange1(val) {
  selectedRows1.value = val;
}
function handleSelectionChange2(val) {
  selectedRows2.value = val;
}

async function getList1() {
  loading.value = true;
  try {
    const res = await getDatatypeLabelList(queryForm);
    configList1.value = res.data || [];
  } catch (error) {
    ElMessage.error("获取值类型列表失败");
  } finally {
    loading.value = false;
  }
}

async function getList2() {
  loading.value = true;
  try {
    const res = await getBusiLabelList(queryForm);
    configList2.value = res.data || [];
  } catch (error) {
    ElMessage.error("获取业务类型列表失败");
  } finally {
    loading.value = false;
  }
}
async function getList3() {

    const res = await getDataopLabelList(queryForm);
    Object.assign(form3, res.data);


}

function resetQuery() {
  queryForm.ssysCd = "*";
  queryForm.mdlName = "*";
  getList1();
  getList2();
  getList3();
}

function handleSearch() {
  getList1();
  getList2();
  getList3();

}

// ===== 值类型弹窗处理 =====
function openAddDialog1() {
  title.value = "新增值类型参数";
  Object.assign(form1, { datatype: "", ratio: null });
  open1.value = true;
}
function openEditDialog1(row) {
  if (!row) {
    ElMessage.warning("请选择一条记录进行编辑");
    return;
  }
  title.value = "编辑值类型参数";
  Object.assign(form1, row);
  open1.value = true;
}

function submitForm1() {
  clasFormRef1.value.validate(async (valid) => {
    if (!valid) return;
    const submitData = { ...form1,ssysCd:queryForm.ssysCd,mdlName:queryForm.mdlName };
    try {
      if (title.value.includes("新增")) {
        await addDatatypeLabel(submitData);
        ElMessage.success("新增成功");
      } else {
        await editDatatypeLabel(submitData);
        ElMessage.success("编辑成功");
      }
      open1.value = false;
      getList1();
    } catch (error) {
      ElMessage.error("操作失败，请重试");
    }
  });
}
async function submitForm3() {

    const submitData = { ...form3,ssysCd:queryForm.ssysCd,mdlName:queryForm.mdlName };
    try {
        await addDataopLabel(submitData);
        ElMessage.success("编辑成功");
 
    } catch (error) {
      ElMessage.error("操作失败，请重试");
    }
}
function deleteSelected1() {
  if (selectedRows1.value.length === 0) {
    ElMessage.warning("请至少选择一条记录删除");
    return;
  }
  ElMessageBox.confirm(
    `确定删除选中的 ${selectedRows1.value.length} 条值类型参数吗？`,
    "提示",
    { type: "warning" }
  ).then(async () => {
    try {
      for (const row of selectedRows1.value) {
        await deleteDatatypeLabel(row.clasOnum);
      }
      ElMessage.success("删除成功");
      getList1();
    } catch {
      ElMessage.error("删除失败，请重试");
    }
  });
}

function handleClose1(done) {
  clasFormRef1.value.resetFields();
  done();
}

// ===== 业务类型弹窗处理 =====
function openAddDialog2() {
  title.value = "新增业务类型参数";
  Object.assign(form2, {
    regexName: "",
    regexPattern: "",
    ratio: null,
  });
  open2.value = true;
}

function openEditDialog2(row) {
  if (!row) {
    ElMessage.warning("请选择一条记录进行编辑");
    return;
  }
  title.value = "编辑业务类型参数";
  Object.assign(form2, row);
  open2.value = true;
}

function submitForm2() {
  clasFormRef2.value.validate(async (valid) => {
    if (!valid) return;
    const submitData = { ...form2,ssysCd:queryForm.ssysCd,mdlName:queryForm.mdlName};
    try {
      if (title.value.includes("新增")) {
        await addBusiLabel(submitData);
        ElMessage.success("新增成功");
      } else {
        await editBusiLabel(submitData);
        ElMessage.success("编辑成功");
      }
      open2.value = false;
      getList2();
    } catch {
      ElMessage.error("操作失败，请重试");
    }
  });
}

function deleteSelected2() {
  if (selectedRows2.value.length === 0) {
    ElMessage.warning("请至少选择一条记录删除");
    return;
  }
  ElMessageBox.confirm(
    `确定删除选中的 ${selectedRows2.value.length} 条业务类型参数吗？`,
    "提示",
    { type: "warning" }
  ).then(async () => {
    try {
      for (const row of selectedRows2.value) {
        await deleteBusiLabel(row.onum);
      }
      ElMessage.success("删除成功");
      getList2();
    } catch {
      ElMessage.error("删除失败，请重试");
    }
  });
}

function handleClose2(done) {
  clasFormRef2.value.resetFields();
  done();
}

onMounted(() => {
  getList1();
  getList2();
  getList3();
});
</script>