vue-fastapi-admin/vue-fastapi-frontend/src/views/datastd/stddict/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="dbResoursName"
            placeholder="请输入字典分类"
            clearable
            prefix-icon="search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="dbResourceOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ data.name }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>

      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="字典编号" prop="dictNum">
            <el-input
              v-model="queryParams.dictNum"
              placeholder="请输入标准字典编号"
              clearable
              style="width: 220px"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 操作按钮 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['meta:metaSecurityCol:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleEdit"
              v-hasPermi="['meta:metaSecurityCol:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleRemove"
              v-hasPermi="['meta:metaSecurityCol:remove']"
              >删除</el-button
            >
          </el-col>
        </el-row>

        <!-- 表格展示 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="归属" align="center" width="200">
            <template #default="{ row }">
              {{
                row.dictLevel === "company"
                  ? "公司级"
                  : "系统级(" + row.sysName + ")"
              }}
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template #default="{ row }">
              {{ row.dictType == 0 ? "基础数据" : "指标数据" }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="来源系统" width="150" align="center" prop="sysName" /> -->
          <el-table-column
            label="字典编号"
            width="150"
            align="center"
            prop="dictNum"
          />
          <el-table-column
            label="字典英文名"
            width="120"
            align="center"
            prop="dictCode"
          />
          <el-table-column
            label="字典中文名"
            width="120"
            align="center"
            prop="dictName"
          />
          <el-table-column
            label="字典业务定义"
            width="120"
            align="center"
            prop="dictMenu"
          />
          <el-table-column label="数据类型" align="center" prop="dataType" />
          <el-table-column label="数据标准" align="center" prop="stdCode" />
          <el-table-column label="字典状态" align="center" prop="dictStatus">
            <template #default="scope">
              <dict-tag
                :options="std_code_appr"
                :value="scope.row.dictStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="业务认责部门"
            width="120"
            align="center"
            prop="bussDeptName"
          />
          <el-table-column
            label="业务认责人员"
            width="120"
            align="center"
            prop="bussUser"
          />
          <el-table-column
            label="技术认责部门"
            width="120"
            align="center"
            prop="techDeptName"
          />
          <el-table-column
            label="技术认责人员"
            width="120"
            align="center"
            prop="techUser"
          />
          <el-table-column
            label="更新者"
            width="120"
            align="center"
            prop="updateBy"
          />
          <el-table-column
            label="更新时间"
            width="120"
            align="center"
            prop="updateTime"
          />
          <el-table-column label="操作" align="center" width="180">
            <template #default="scope">
              <el-button
                @click="handleEdit(scope.row)"
                type="text"
                icon="Edit"
              />
              <el-button
                @click="handleRemove(scope.row)"
                type="text"
                icon="Delete"
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handlePagination"
        />
      </el-col>
    </el-row>
    <AddEditForm
      :data="selectedRow"
      :isEdit="isEdit"
      :dbResourceOldList="dbResourceOldList"
      v-model:visible="dialogVisible"
      @refresh="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import {
  listStdDict,
  addStdDict,
  getStdDict,
  updateStdDict,
  deleteStdDict,
} from "@/api/datastd/std"; // 更新为新的接口
import { datasourcetree } from "@/api/meta/metatask";
import AddEditForm from "./AddEditForm.vue";
const { proxy } = getCurrentInstance();
const { std_code_status, std_code_appr } = proxy.useDict(
  "std_code_status",
  "std_code_appr"
);

const queryParams = ref({
  dictNum: "",
  dictName: "",
  dictType: "",
  sysName: "",
  classId: "dict",
  sysId: "",
  pageNum: 1,
  pageSize: 10,
});
const single = ref(true);
const multiple = ref(true);
const dbResoursName = ref(undefined);
const defaultProps = { children: "children", label: "name" };
const dialogVisible = ref(false);
const selectedRow = ref(null);
const isEdit = ref(false);
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const ids = ref([]);
const codeNums = ref([]);

const dbResourceOptions = ref([]);

const handlePagination = (pageNum, pageSize) => {
  queryParams.value.pageNum = pageNum;
  queryParams.value.pageSize = pageSize;
  handleQuery();
};

const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.indexOf(value) !== -1;
};

const handleNodeClick = (data) => {
  queryParams.value.sysId = data.id === 9999 ? undefined : data.id;
  handleQuery();
};

const handleSelectionChange = (selection) => {
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.id);
  codeNums.value = selection.map((item) => item.dictNum);
};

const getList = async () => {
  loading.value = true;
  const response = await listStdDict(queryParams.value);
  tableData.value = response.rows;
  total.value = response.total;
  loading.value = false;
};

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryParams.value = {
    dictNum: "",
    dictName: "",
    dictType: "",
    sysName: "",
    sysId: undefined,
    pageNum: 1,
    pageSize: 10,
  };
  getList();
};

const handleRemove = (row) => {
  const idsToDelete = row.id ? [row.id] : ids.value;
  const codesToDelete = row.codeNum ? [row.codeNum] : codeNums.value;
  proxy.$modal
    .confirm(
      '是否确认删除字典编号为"' + codesToDelete.toString() + '"的数据项？'
    )
    .then(function () {
      return deleteStdDict(idsToDelete.toString());
    })
    .then(() => {
      handleQuery();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
};
const dbResourceOldList = ref([]);

const handleAdd = () => {
  console.log("update:visible", 111);
  isEdit.value = false;
  selectedRow.value = {
    dictLevel: "company",
    sysId: 10000,
    sysName: "公司级",
    dictType: "",
    dictNum: "",
    dictCode: "",
    dictName: "",
    dictMenu: "",
    dataType: "",
    stdCode: "",
    bussDeptId: "",
    bussUser: "",
    techDeptId: "",
    techUser: "",
  };

  // 清空选中的数据
  dialogVisible.value = true;
};

const handleEdit = (row) => {
  const id = row.id ? row.id : ids.value.toString();
  getStdDict(id).then((response) => {
    selectedRow.value = response.data;
    isEdit.value = true;
    dialogVisible.value = true;
  });
};

onMounted(() => {
  datasourcetree().then((response) => {
    dbResourceOldList.value = response.rows;
    dbResourceOptions.value = [
      { id: 10000, name: "公司级字典", parentId: 0, children: [] },
      {
        id: 99999,
        name: "系统级字典",
        parentId: 0,
        children: response.rows.map((element) => ({
          ...element,
          parentId: "99999",
        })),
      },
    ];
  });
  getList();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.head-container {
  margin-bottom: 0px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
}

.custom-tree-node i {
  margin-right: 8px;
}
</style>