|
|
@@ -1,386 +0,0 @@
|
|
|
-<script setup lang="ts">
|
|
|
-import XEUtils from "xe-utils";
|
|
|
-import Config from "./config.vue";
|
|
|
-import { useI18n } from "vue-i18n";
|
|
|
-import { clone } from "@pureadmin/utils";
|
|
|
-import { reactive, ref, unref, nextTick } from "vue";
|
|
|
-import { useCopyToClipboard } from "@pureadmin/utils";
|
|
|
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
|
-import {
|
|
|
- VXETable,
|
|
|
- type TablePublicMethods,
|
|
|
- type VxeTableInstance,
|
|
|
- type VxeFormPropTypes,
|
|
|
- type VxeTableEvents,
|
|
|
- type FormMethods
|
|
|
-} from "vxe-table";
|
|
|
-import Delete from "@iconify-icons/ep/delete";
|
|
|
-import EditPen from "@iconify-icons/ep/edit-pen";
|
|
|
-
|
|
|
-type onEditNRow = {
|
|
|
- name: string;
|
|
|
- model: string;
|
|
|
-};
|
|
|
-
|
|
|
-defineOptions({
|
|
|
- name: "Dict"
|
|
|
-});
|
|
|
-
|
|
|
-const { t } = useI18n();
|
|
|
-
|
|
|
-const dictData = reactive({
|
|
|
- submitLoading: false,
|
|
|
- showEdit: false,
|
|
|
- selectRow: null,
|
|
|
- filterName: "",
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "状态",
|
|
|
- model: "",
|
|
|
- children: [
|
|
|
- {
|
|
|
- id: "1-1",
|
|
|
- name: "服务状态",
|
|
|
- model: "serviceStatus"
|
|
|
- },
|
|
|
- {
|
|
|
- id: "1-2",
|
|
|
- name: "在线状态",
|
|
|
- model: "onlienStatus"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- { id: 2, name: "操作系统", model: "operatingSystem" }
|
|
|
- ],
|
|
|
- formData: {
|
|
|
- name: "",
|
|
|
- model: ""
|
|
|
- },
|
|
|
- formItems: [
|
|
|
- {
|
|
|
- field: "name",
|
|
|
- title: "字典名称",
|
|
|
- span: 24,
|
|
|
- itemRender: {
|
|
|
- name: "$input",
|
|
|
- props: { placeholder: "请输入字典名称" }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- field: "model",
|
|
|
- title: "字典类型",
|
|
|
- span: 24,
|
|
|
- itemRender: {
|
|
|
- name: "$input",
|
|
|
- props: {
|
|
|
- placeholder: "请输入字典类型",
|
|
|
- //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
|
|
|
- disabled: true
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- align: "right",
|
|
|
- span: 24,
|
|
|
- itemRender: {
|
|
|
- name: "$buttons",
|
|
|
- children: [
|
|
|
- { props: { type: "submit", content: "提交", status: "primary" } },
|
|
|
- { props: { type: "reset", content: "重置" } }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- ] as VxeFormPropTypes.Items
|
|
|
-});
|
|
|
-
|
|
|
-const originData = clone(dictData.tableData, true);
|
|
|
-
|
|
|
-const xTree = ref<TablePublicMethods>();
|
|
|
-const xForm = ref<FormMethods>();
|
|
|
-
|
|
|
-const handleSearch = () => {
|
|
|
- const filterName = XEUtils.toValueString(dictData.filterName).trim();
|
|
|
-
|
|
|
- if (filterName) {
|
|
|
- const options = { children: "children" };
|
|
|
- const searchProps = ["name"];
|
|
|
-
|
|
|
- dictData.tableData = XEUtils.searchTree(
|
|
|
- originData,
|
|
|
- item =>
|
|
|
- searchProps.some(
|
|
|
- key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
|
|
|
- ),
|
|
|
- options
|
|
|
- );
|
|
|
-
|
|
|
- // 搜索之后默认展开所有子节点
|
|
|
- nextTick(() => {
|
|
|
- const $table = xTree.value;
|
|
|
- $table.setAllTreeExpand(true);
|
|
|
- });
|
|
|
- } else {
|
|
|
- dictData.tableData = originData;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 创建一个防防抖函数，调用频率间隔 100 毫秒
|
|
|
-const searchEvent = XEUtils.debounce(
|
|
|
- function () {
|
|
|
- handleSearch();
|
|
|
- },
|
|
|
- 100,
|
|
|
- { leading: false, trailing: true }
|
|
|
-);
|
|
|
-
|
|
|
-const confirmEvent = async () => {
|
|
|
- const type = await VXETable.modal.confirm("您确定要删除吗？");
|
|
|
- (await type) === "confirm" &&
|
|
|
- VXETable.modal.message({
|
|
|
- content: "测试数据，不可删除",
|
|
|
- status: "error"
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-function commonFn(value, disabled) {
|
|
|
- dictData.selectRow = value;
|
|
|
- dictData.showEdit = true;
|
|
|
- dictData.formItems[1].itemRender.props.disabled = disabled;
|
|
|
-}
|
|
|
-
|
|
|
-// 新增
|
|
|
-function onAdd() {
|
|
|
- commonFn(null, false);
|
|
|
-}
|
|
|
-
|
|
|
-// 新增子类型
|
|
|
-function onAddChild(row?: object) {
|
|
|
- console.log("onAddChild", row);
|
|
|
- commonFn(null, false);
|
|
|
-}
|
|
|
-
|
|
|
-// 编辑
|
|
|
-function onEdit(row?: onEditNRow) {
|
|
|
- dictData.formData = {
|
|
|
- name: row.name,
|
|
|
- model: row.model ? row.model : "暂无字典类型"
|
|
|
- };
|
|
|
- commonFn(row, true);
|
|
|
- // VXETable.modal.message({
|
|
|
- // content: "测试数据，不可编辑",
|
|
|
- // status: "error"
|
|
|
- // });
|
|
|
-}
|
|
|
-
|
|
|
-// 拷贝当前列表项的数据（字典类型）
|
|
|
-const { clipboardValue } = useCopyToClipboard();
|
|
|
-const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
|
|
|
- clipboardValue.value = unref(row).model;
|
|
|
-};
|
|
|
-
|
|
|
-const xTable = ref({} as VxeTableInstance);
|
|
|
-
|
|
|
-const submitEvent = () => {
|
|
|
- dictData.submitLoading = true;
|
|
|
- setTimeout(() => {
|
|
|
- const $table = xTable.value;
|
|
|
- dictData.submitLoading = false;
|
|
|
- dictData.showEdit = false;
|
|
|
- if (dictData.selectRow) {
|
|
|
- VXETable.modal.message({ content: "保存成功", status: "success" });
|
|
|
- Object.assign(dictData.selectRow, dictData.formData);
|
|
|
- } else {
|
|
|
- VXETable.modal.message({ content: "新增成功", status: "success" });
|
|
|
- $table.insert(dictData.formData);
|
|
|
- }
|
|
|
- }, 500);
|
|
|
-};
|
|
|
-
|
|
|
-const drawer = ref(false);
|
|
|
-
|
|
|
-function onDeploy(value?: object) {
|
|
|
- console.log("onDeploy", value);
|
|
|
- drawer.value = true;
|
|
|
-}
|
|
|
-
|
|
|
-function handleClose() {
|
|
|
- drawer.value = false;
|
|
|
-}
|
|
|
-
|
|
|
-function onExpand() {
|
|
|
- xTree.value.setAllTreeExpand(true);
|
|
|
-}
|
|
|
-
|
|
|
-function onUnExpand() {
|
|
|
- xTree.value.clearTreeExpand();
|
|
|
-}
|
|
|
-
|
|
|
-function onHide() {
|
|
|
- xForm.value.reset();
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <!-- 工具栏 -->
|
|
|
- <vxe-toolbar class="bg-bg_color">
|
|
|
- <template #buttons>
|
|
|
- <div class="ml-[20px]">
|
|
|
- <label class="dark:text-text_color_regular">字典名称： </label>
|
|
|
- <el-input
|
|
|
- class="!w-[200px]"
|
|
|
- v-model="dictData.filterName"
|
|
|
- :placeholder="t('buttons.hssearch')"
|
|
|
- @keyup.prevent="searchEvent"
|
|
|
- @input="searchEvent"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #tools>
|
|
|
- <el-button-group>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon('fa:plus-square-o')"
|
|
|
- @click="onAdd"
|
|
|
- >
|
|
|
- {{ t("buttons.hsadd") }}
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon('fa:folder-open-o')"
|
|
|
- @click="onExpand"
|
|
|
- >
|
|
|
- {{ t("buttons.hsexpendAll") }}
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon('fa:folder-o')"
|
|
|
- @click="onUnExpand"
|
|
|
- >
|
|
|
- {{ t("buttons.hscollapseAll") }}
|
|
|
- </el-button>
|
|
|
- </el-button-group>
|
|
|
- </template>
|
|
|
- </vxe-toolbar>
|
|
|
-
|
|
|
- <!-- 列表 -->
|
|
|
- <vxe-table
|
|
|
- ref="xTree"
|
|
|
- border
|
|
|
- resizable
|
|
|
- :tree-config="{
|
|
|
- children: 'children',
|
|
|
- iconOpen: 'fa fa-minus-square-o',
|
|
|
- iconClose: 'fa fa-plus-square-o'
|
|
|
- }"
|
|
|
- :data="dictData.tableData"
|
|
|
- @cell-dblclick="cellDBLClickEvent"
|
|
|
- >
|
|
|
- <vxe-table-column tree-node field="name" title="字典名称" />
|
|
|
- <vxe-table-column title="字典类型">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tooltip
|
|
|
- effect="dark"
|
|
|
- :content="'双击复制：' + row.model"
|
|
|
- placement="right"
|
|
|
- >
|
|
|
- <span class="text-model">{{ row.model }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </vxe-table-column>
|
|
|
- <vxe-table-column title="操作" width="360" fixed="right">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon(EditPen)"
|
|
|
- @click="onEdit(row)"
|
|
|
- >
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon('fa:plus-square-o')"
|
|
|
- @click="onAddChild(row)"
|
|
|
- >
|
|
|
- 新增子类型
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- v-show="row.model"
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon('fa:cog')"
|
|
|
- @click="onDeploy(row)"
|
|
|
- >
|
|
|
- 字典配置
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :icon="useRenderIcon(Delete)"
|
|
|
- @click="confirmEvent"
|
|
|
- >
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-table-column>
|
|
|
- </vxe-table>
|
|
|
-
|
|
|
- <!-- 修改、添加弹框 -->
|
|
|
- <vxe-modal
|
|
|
- resize
|
|
|
- width="450"
|
|
|
- v-model="dictData.showEdit"
|
|
|
- :title="dictData.selectRow ? '编辑' : '新增'"
|
|
|
- :loading="dictData.submitLoading"
|
|
|
- @hide="onHide"
|
|
|
- >
|
|
|
- <template #default>
|
|
|
- <vxe-form
|
|
|
- ref="xForm"
|
|
|
- :data="dictData.formData"
|
|
|
- :items="dictData.formItems"
|
|
|
- title-align="right"
|
|
|
- title-width="100"
|
|
|
- @submit="submitEvent"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </vxe-modal>
|
|
|
-
|
|
|
- <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.vxe-input + .vxe-button,
|
|
|
-.vxe-input + .vxe-button--dropdown,
|
|
|
-.vxe-button + .vxe-button,
|
|
|
-.vxe-button + .vxe-button--dropdown {
|
|
|
- margin-left: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.vxe-button.type--button:not(.is--round) {
|
|
|
- border-radius: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.vxe-toolbar.size--medium {
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.vxe-table--render-default.size--medium {
|
|
|
- margin-top: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.vxe-button.size--medium.type--button {
|
|
|
- margin-right: 0.07em;
|
|
|
-}
|
|
|
-
|
|
|
-.text-model {
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
xiaoxian521