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.ssysId" placeholder="请选择系统" clearable allow-create filterable style="width: 180px">
            <el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.id" />
          </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>
    <el-tabs v-model="activeTab" type="border-card" class="full-height-tabs">
      <el-tab-pane label="值类型参数调整" name="valueType">
        <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="400" 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>
      </el-tab-pane>
      <el-tab-pane label="业务类型参数调整" name="businessType">
        <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="400" 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>
      </el-tab-pane>
      <el-tab-pane label="字段处理类型参数调整" name="columnType">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="openAddDialog3">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="selectedRows3.length !== 1" @click="openEditDialog3(selectedRows3[0])">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="selectedRows3.length === 0" @click="deleteSelected3">删除</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="configList3" @selection-change="handleSelectionChange3" style="width: 100%" height="400" border stripe>
          <el-table-column type="selection" width="55" />
          <el-table-column prop="opType" label="处理类型" />
          <el-table-column prop="colType" label="字段类型" />
          <el-table-column prop="colAttr" label="字段属性" />
          <el-table-column prop="ratio" label="阈值" />
          <el-table-column prop="updBy" label="更新人" />
          <el-table-column prop="updTime" label="更新时间" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <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" >
        <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>
    <el-dialog :title="title" v-model="open3" width="500px" append-to-body :before-close="handleClose3">
      <el-form ref="clasFormRef3" :model="form3" :rules="rules3" label-width="120px">
        <el-form-item label="处理类型" prop="opType">
          <el-input v-model="form3.opType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字段类型" prop="regexPattern">
          <el-input v-model="form3.colType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字段属性" prop="regexPattern">
          <el-input v-model="form3.colAttr" autocomplete="off" />
        </el-form-item>
        <el-form-item label="阈值" prop="ratio">
          <el-input v-model.number="form3.ratio" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属系统" prop="ssysId">
          <el-select v-model="form3.ssysId" placeholder="请选择系统" clearable allow-create filterable style="width: 350px">
            <el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属模式" prop="mdlName">
          <el-input v-model="form3.mdlName" autocomplete="off"  />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="open3 = false">取消</el-button>
        <el-button type="primary" @click="submitForm3">保存</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,
  getBusiLabelList,
  deleteDataopLabel,
  editDataopLabel,
  addDataopLabel,
  getColOpTypeLabelList,
} from "@/api/metadataConfig/metadataConfig";
import useUserStore  from '@/store/modules/user'; // 注意路径是否正确

const userStore = useUserStore(); // 正确调用
const dsSysList = userStore.dsSysList; // 访问属性
const queryForm = reactive({
  ssysId: undefined,
  mdlName: "",
});
const activeTab = ref('valueType');
const configList1 = ref([]); // 值类型参数数据
const configList2 = ref([]); // 业务类型参数数据
const configList3 = ref([]); // 字段类型参数数据
const loading = ref(false);

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

const clasFormRef1 = ref(null); // 值类型 formRef
const clasFormRef2 = ref(null); // 业务类型 formRef
const clasFormRef3 = ref(null); // 字段处理类型 formRef

const form1 = reactive({
  datatype: "",
  ratio: null,
});
const form2 = reactive({
  regexName: "",
  regexPattern: "",
  ratio: null,
});
const form3 = reactive({
  opType: "",
  colType: "",
  colAttr: "",
  ssysId: undefined,
  mdlName: "",
  ratio: 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 rules3 = {
  opType: [{ required: true, message: "请输入处理类型", trigger: "blur" }],
  colType: [{ required: true, message: "请输入字段类型", trigger: "blur" }],
  colAttr: [{ required: true, message: "请输入字段属", trigger: "blur" }],
  ratio: [{ required: true, message: "请输入阈值", trigger: "blur" }],
};

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

function handleSelectionChange1(val) {
  selectedRows1.value = val;
}
function handleSelectionChange2(val) {
  selectedRows2.value = val;
}
function handleSelectionChange3(val) {
  selectedRows3.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() {
  loading.value = true;
  try {
    const res = await getColOpTypeLabelList(queryForm);
    configList3.value = res.data || [];
  } catch (error) {
    ElMessage.error("获取字段处理类型列表失败");
  } finally {
    loading.value = false;
  }
}

function resetQuery() {
  queryForm.ssysId = undefined;
  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,ssysId:queryForm.ssysId,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("操作失败，请重试");
    }
  });
}
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.onum);
      }
      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 openAddDialog3() {
  title.value = "新增字段处理类型参数";
  Object.assign(form3, {
    opType: "",
    colType: "",
    colAttr: "",
    ssysId: queryForm.ssysId,
    mdlName: queryForm.mdlName,
    ratio: null,
  });
  open3.value = true;
}

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

function openEditDialog3(row) {
  if (!row) {
    ElMessage.warning("请选择一条记录进行编辑");
    return;
  }
  title.value = "编辑字段处理类型参数";
  Object.assign(form3, row);
  open3.value = true;
}

function submitForm2() {
  clasFormRef2.value.validate(async (valid) => {
    if (!valid) return;
    const submitData = { ...form2,ssysId:queryForm.ssysId,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 submitForm3() {
  clasFormRef3.value.validate(async (valid) => {
    if (!valid) return;
    const submitData = { ...form3};
    try {
      if (title.value.includes("新增")) {
        await addDataopLabel(submitData);
        ElMessage.success("新增成功");
      } else {
        await editDataopLabel(submitData);
        ElMessage.success("编辑成功");
      }
      open3.value = false;
      await getList3();
    } 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 deleteSelected3() {
  if (selectedRows3.value.length === 0) {
    ElMessage.warning("请至少选择一条记录删除");
    return;
  }
  ElMessageBox.confirm(
    `确定删除选中的 ${selectedRows3.value.length} 条字段处理类型参数吗？`,
    "提示",
    { type: "warning" }
  ).then(async () => {
    try {
      for (const row of selectedRows3.value) {
        await deleteDataopLabel(row.onum);
      }
      ElMessage.success("删除成功");
      getList3();
    } catch {
      ElMessage.error("删除失败，请重试");
    }
  });
}

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

function handleClose3(done) {
  clasFormRef3.value.resetFields();
  done();
}

onMounted(() => {
  getList1();
  getList2();
  getList3();
});
</script>
<style scoped>
.app-container {
  padding: 20px;
  background: #fff;
}
.section-block {
  margin-top: 30px;
}
.section-header {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 12px;
}

.action-bar {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}
.filter-form {
  margin-bottom: 10px;
}
.config-form {
  max-width: 600px;
  padding: 20px 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
</style>