完成环境变量

src/components/AntDesignVue/CustomAntDesignVue/TableColumChoose/index.vue

@@ -13,8 +13,7 @@ const props = defineProps({
 const status = ref(false);
 const checkedKeys = ref(props.columnList.filter((item) => item.status === true).map((item) => item.key));
 
-const handleClose = () => {
+const handleClose = () => {};
-};
 watch(checkedKeys, (newVal) => {
     props.columnList.forEach((item) => {
         if (checkedKeys.value.includes(item.key)) {
@@ -24,18 +23,28 @@ watch(checkedKeys, (newVal) => {
         }
     });
 });
+// ! 排序
 const onDrop = (info) => {
     const before = info.dragNode.pos.split('-').slice(-1)[0];
     const after = info.node.pos.split('-').slice(-1)[0];
     const target = props.columnList.splice(before, 1)[0];
     props.columnList.splice(after, 0, target);
 };
+// ! 全选
+function chooseAll() {
+    checkedKeys.value = props.columnList.map((item) => {
+        item.status = true;
+        return item.key;
+    });
+}
 </script>
 
 <template>
     <div>
         <AButton shape="circle" :icon="h(BgColorsOutlined)" @click="status = true" />
         <a-drawer v-model:open="status" title="表格列选择" placement="right" :fieldNames="{ title: 'name' }" @close="handleClose">
+            <AButton @click="chooseAll">全选</AButton>
+            <ADivider />
             <a-tree class="draggable-tree" draggable block-node checkable v-model:checkedKeys="checkedKeys" :tree-data="props.columnList" @drop="onDrop" />
             <!--            @dragenter="onDragEnter"-->
         </a-drawer>

src/components/AntDesignVue/index.js

@@ -28,7 +28,18 @@ import {
     Input,
     Radio,
     RadioGroup,
-    InputNumber, Affix, Anchor, AnchorLink, Tree, InputSearch, Tooltip, Drawer, Checkbox, CheckboxGroup, Popconfirm,
+    InputNumber,
+    Affix,
+    Anchor,
+    AnchorLink,
+    Tree,
+    InputSearch,
+    Tooltip,
+    Drawer,
+    Checkbox,
+    CheckboxGroup,
+    Popconfirm,
+    Divider,
 } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
 
@@ -73,6 +84,7 @@ export function setupCustomAntDesignVueComponents(app) {
         Checkbox, // ! 多选
         CheckboxGroup,
         Popconfirm, // ! 气泡确认框
+        Divider, // ! 分割线
     ];
     for (let component of componentList) {
         app.component(component.name, component);

src/components/Custom/Framework/Pacman/index.vue

@@ -1,5 +1,6 @@
 
-<script setup name="Pacman">
+<script setup name="PacmanLoading">
+defineOptions({ name: 'PacmanLoading' });
 defineProps(['loading']);
 </script>
 

src/components/Custom/index.js

@@ -13,6 +13,7 @@
 
 import ModalTemplate from '@/components/Custom/Framework/ModalTemplate/index.vue';
 import WorkContainer from '@/components/Custom/Framework/WorkContainer/index.vue';
+import Pacman from '@CustomComponents/Framework/Pacman/index.vue';
 
 // 自定义组件挂载到APP
 export function setupCustomComponents(app){
@@ -20,4 +21,6 @@ export function setupCustomComponents(app){
     app.component('ModalTemplate', ModalTemplate);
     // ! 框架结构
     app.component('WorkContainer', WorkContainer);
+    // ! 框架结构
+    app.component('PacmanLoading', Pacman);
 }

src/main.js

@@ -1,7 +1,14 @@
 // ! 日志记录
 import Pino from 'pino';
-window.pino = new Pino({
+window.pino = Pino({
-    level: 'trace'
+    level: 'trace',
+    customLevels: {
+        deb: 20,
+    },
+    browser: {
+        asObject: true,
+        serialize: true
+    },
 });
 import './assets/main.css';
 import { createApp } from 'vue';

src/utils/logger.js

@@ -0,0 +1,17 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-x7129】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: logger.js -
+// | @创建时间: 2024-07-10 18:08
+// | @更新时间: 2024-07-10 18:08
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+export class initLogger{
+    constructor() {
+    }
+}

src/views/Auth/Dict/DictForm.vue

@@ -90,8 +90,9 @@ const handleAck = () => {
             if (Array.isArray(value.pid) && value.pid.length > 0) {
                 data.pid = value.pid.slice(-1)[0];
             }
-            props.data.handleAck(data);
+            props.data.handleAck(data).then(() => {
-            clearInput();
+                clearInput();
+            }).catch(e => e);
         })
         .catch((err) => {
             formRef.value.scrollToField(err.errorFields[0]?.name);

src/views/Auth/Dict/DictTree.vue

@@ -1,4 +1,7 @@
-<script setup>
+<script setup name="DictTree">
+defineOptions({
+    name: 'DictTree',
+});
 import { useBaseDataStore } from '@/stores/baseData.js';
 import { onMounted, reactive } from 'vue';
 import { IconPool } from '@/components/AntDesignVue/Icon/index.js';

src/views/Auth/Dict/index.vue

@@ -111,6 +111,7 @@ async function handleUpdate(data) {
     formData.isUpdate = true;
     formData.dictId = data.dictId;
     formData.formData.pid = data.pid;
+    formData.handleAck = handleUpdateAck;
     formData.formData.dictKey = data.dictKey;
     formData.formData.dictDesc = data.dictDesc;
     formData.formData.dictName = data.dictName;
@@ -119,7 +120,6 @@ async function handleUpdate(data) {
     formData.formData.serviceKey = data.serviceKey;
     formData.formData.root = data.root;
     formData.formData.orderNum = data.orderNum;
-    formData.handleAck = handleUpdateAck;
 }
 // ! 确认更新数据
 async function handleUpdateAck(data) {

src/views/Auth/Env/DataModal.js

@@ -12,6 +12,9 @@
 // | ------------------------------------------------------------
 
 // Env表单数据
+import { IconPool } from '@/components/AntDesignVue/Icon/index.js';
+import { h } from 'vue';
+
 export class EnvFormType {
     constructor() {
         return new Object({
@@ -19,9 +22,9 @@ export class EnvFormType {
             envName: '',
             envKey: '',
             envVal: '',
-            valIsDict: false,
+            valIsDict: 0,
             envDesc: '',
-            root: false,
+            root: 0,
             orderNum: 0,
             serviceKey: undefined,
         });
@@ -40,7 +43,7 @@ export class EnvSearchType {
             root: undefined,
             serviceKey: undefined,
             status: undefined,
-            hierarchy: undefined,
+            hierarchy: [],
         });
     }
 }
@@ -64,5 +67,101 @@ export class EnvFormRulesType {
 
 // Env表格列数据
 export class EnvTableColumnType {
-    constructor() {}
+    constructor() {
+        return new Object({
+            index: {
+                title: '序号',
+                key: 'index',
+                width: 70, // 你可以根据需要设置列宽
+                customRender: ({ text, record, index, column }) => `${index + 1}`, // 使用索引 + 1 来显示序号
+            },
+            envKey: {
+                title: '变量标识',
+                dataIndex: 'envKey',
+                key: 'envKey',
+            },
+            envName: {
+                title: '变量名称',
+                dataIndex: 'envName',
+                key: 'envName',
+                resizable: true,
+                width: 200,
+            },
+            envVal: {
+                title: '变量值',
+                dataIndex: 'envVal',
+                key: 'envVal',
+                customRender: ({ text, record, index, column }) => (record.valIsDict == 1 ? record.envDictName : text),
+            },
+            valIsDict: {
+                title: '字典',
+                dataIndex: 'valIsDict',
+                key: 'valIsDict',
+                customRender: ({ text, record, index, column }) => (text == '1' ? '是' : '否'),
+                width: '45px',
+            },
+            root: {
+                title: 'Root',
+                dataIndex: 'root',
+                key: 'root',
+                customRender: ({ text, record, index, column }) => (text == '1' ? '是' : '否'),
+                width: '50px',
+            },
+            serviceKey: {
+                title: '所属服务',
+                dataIndex: 'serviceKey',
+                key: 'serviceKey',
+            },
+            haveChildren: {
+                title: '子项',
+                dataIndex: 'haveChildren',
+                key: 'haveChildren',
+                width: '50px',
+            },
+            createtime: {
+                title: '创建时间',
+                dataIndex: 'createtime',
+                key: 'createtime',
+                width: '140px',
+                sorter: true,
+            },
+            createName: {
+                title: '创建人',
+                dataIndex: 'createName',
+                key: 'createName',
+            },
+            updatetime: {
+                title: '更新时间',
+                dataIndex: 'updatetime',
+                key: 'updatetime',
+                maxWidth: '140px',
+                minWidth: '140px',
+            },
+            updateName: {
+                title: '更新人',
+                dataIndex: 'updateName',
+                key: 'updateName',
+            },
+            action: {
+                title: '操作',
+                dataIndex: 'action',
+                key: 'action',
+                width: 100,
+                align: 'center',
+            },
+        });
+    }
+}
+
+// Env可选表格列
+export class EnvTableColumnChooseType {
+    constructor() {
+        const excludeColumn = ['updateName', 'updatetime', 'createName'];
+        const tableColumn = new EnvTableColumnType();
+        return Object.keys(tableColumn).map((i) => ({
+            title: tableColumn[i].title,
+            key: tableColumn[i].key,
+            status: excludeColumn.includes(i) ? false : true,
+        }));
+    }
 }

src/views/Auth/Env/EnvForm.vue

@@ -44,12 +44,12 @@ const handleAck = () => {
             if (Array.isArray(value.envVal) && value.envVal.length > 0) {
                 data.envVal = value.envVal.slice(-1)[0];
             }
-            props.data.handleAck(data);
+            props.data.handleAck(data).then(() => {
-            clearInput();
+                clearInput();
+            }).catch(e => e);
         })
         .catch((err) => {
-            console.log(err);
+            formRef.value.scrollToField(err?.errorFields[0]?.name);
-            formRef.value.scrollToField(err.errorFields[0]?.name);
         });
 };
 // ! 取消
@@ -86,6 +86,7 @@ watch(props.data.formData, (newVal, oldVal) => {
 });
 
 onMounted(() => {
+    window.pino.info('@3 EnvForm  Mounted!');
     // ! 检测Env列表
     if (baseDataStore.state.envList.length == 0) {
         baseDataStore.getEnvList();
@@ -139,10 +140,10 @@ onMounted(() => {
                 <AInput style="width: 100%" v-model:value="props.data.formData.envName" placeholder="请输入变量名称" :maxlength="32" showCount />
             </AFormItem>
 
-            <AFormItem label="数据来源于变量" name="root">
+            <AFormItem label="数据来源于变量" name="valIsDict">
                 <ARadioGroup v-model:value="props.data.formData.valIsDict" name="radioGroup">
-                    <ARadio :value="true">是</ARadio>
+                    <ARadio :value="1">是</ARadio>
-                    <ARadio :value="false">否</ARadio>
+                    <ARadio :value="0">否</ARadio>
                 </ARadioGroup>
             </AFormItem>
 
@@ -169,8 +170,8 @@ onMounted(() => {
 
             <AFormItem label="原始数据Root" name="root">
                 <ARadioGroup v-model:value="props.data.formData.root" name="radioGroup">
-                    <ARadio :value="true">是</ARadio>
+                    <ARadio :value="1">是</ARadio>
-                    <ARadio :value="false">否</ARadio>
+                    <ARadio :value="0">否</ARadio>
                 </ARadioGroup>
             </AFormItem>
 

src/views/Auth/Env/EnvPage.vue

@@ -1,10 +1,13 @@
 <script setup name="EnvPage">
 import { onMounted, reactive, watch } from 'vue';
-import { EnvFormType, EnvSearchType } from './DataModal.js';
+import { EnvFormType, EnvSearchType, EnvTableColumnChooseType } from './DataModal.js';
 import EnvForm from './EnvForm.vue';
-import { CoreDict, CoreEnv } from '@/api/index.js';
+import EnvTable from './EnvTable.vue';
+import EnvTree from './EnvTree.vue';
+import { CoreEnv } from '@/api/index.js';
 import { useMessage } from 'naive-ui';
 import { useBaseDataStore } from '@/stores/baseData.js';
+import DictTable from '@/views/Auth/Dict/DictTable.vue';
 const baseDataStore = useBaseDataStore();
 const Message = useMessage();
 defineOptions({
@@ -12,7 +15,18 @@ defineOptions({
 });
 
 onMounted(() => {
-    window.pino.info('EnvPage Mounted!');
+    window.pino.info('@1 EnvPage  Mounted!');
+    window.pino.deb('debug@1 EnvPage  Mounted!');
+    window.pino.error('error@1 EnvPage  Mounted!');
+    window.pino.fatal('fatal@1 EnvPage  Mounted!');
+    window.pino.info('info@1 EnvPage  Mounted!');
+    window.pino.warn('warn@1 EnvPage  Mounted!');
+    window.pino.trace('trace@1 EnvPage  Mounted!');
+    console.log(window.pino);
+    getPage();
+    if(baseDataStore.state.serviceList.length == 0){
+        baseDataStore.getServiceList();
+    }
 });
 
 // 待查询次数
@@ -45,7 +59,7 @@ const tableData = reactive({
         handleRemoveAck,
         handleUpdate,
     },
-    tableColumnList: [],
+    columnList: new EnvTableColumnChooseType(),
 });
 // @1确认添加
 async function handleCreateAck(data) {
@@ -67,9 +81,24 @@ async function handleRemoveAck(data) {
     baseDataStore.getEnvList();
 }
 // @3更新数据 todo
-async function handleUpdate(data) {}
+async function handleUpdate(data) {
+    formData.modelName = '更新变量';
+    formData.status = true;
+    formData.isUpdate = true;
+    formData.envId = data.envId;
+    formData.handleAck = handleUpdateAck;
+    Object.keys(formData.formData).forEach(key => {
+        formData.formData[key] = data[key];
+    });
+}
 // @4确认更新数据 todo
-async function handleUpdateAck(data) {}
+async function handleUpdateAck(data) {
+    await CoreEnv.updateEnv(formData.envId, data);
+    Message.success('更新变量成功!');
+    clearFormData();
+    getPage();
+    baseDataStore.getEnvList();
+}
 // @5监听筛选 todo
 watch(tableData.pageInfo, () => {
     if (searchCount === 0) {
@@ -84,7 +113,9 @@ watch(tableData.pageInfo, () => {
 });
 // @6获取表格数据
 async function getPage() {
-    const resd = await CoreEnv.getEnv(tableData.pageInfo);
+    const pageInfo = {...tableData.pageInfo};
+    pageInfo.hierarchy = pageInfo.hierarchy.length > 0 ? pageInfo.hierarchy[0] : undefined
+    const resd = await CoreEnv.getEnv(pageInfo);
     tableData.dataSource = resd.rowData;
     tableData.total = Number(resd.total);
 }
@@ -130,9 +161,38 @@ function clearFormData() {
         <template #header>
             <ASpace>
                 <CreateAntdButton name="变量" @click="formData.status = true" />
+                <TableColumChoose v-model:columnList="tableData.columnList" />
+                <AInputSearch v-model:value="tableData.pageInfo.envInfo" placeholder="变量名称/标识/描述/值" style="width: 200px" @search="getPage" />
+                <ASelect
+                    style="width: 150px"
+                    placeholder="请选择所属服务"
+                    allowClear
+                    v-model:value="tableData.pageInfo.serviceKey"
+                    :options="baseDataStore.state.serviceList"
+                    :field-names="{ label: 'serviceName', value: 'serviceKey', options: 'children' }"
+                />
+                <ASelect
+                    placeholder="是否为原始数据"
+                    style="width: 150px"
+                    allowClear
+                    v-model:value="tableData.pageInfo.root"
+                    :options="[
+                        { label: '是', value: 1 },
+                        { label: '否', value: 0 },
+                    ]"
+                />
             </ASpace>
         </template>
-        <template #main></template>
+        <template #main>
+            <div class="envBody">
+                <div class="tree">
+                    <EnvTree v-model:selectedKeys="tableData.pageInfo.hierarchy"/>
+                </div>
+                <div class="table">
+                    <EnvTable :tableData="tableData"/>
+                </div>
+            </div>
+        </template>
         <template #footer>
             <APagination
                 v-model:current="tableData.pageInfo.pageNumber"

src/views/Auth/Env/EnvTable.vue

@@ -0,0 +1,77 @@
+<script setup name="EnvTable">
+import { computed, onMounted, ref } from 'vue';
+import { EnvTableColumnType } from '@/views/Auth/Env/DataModal.js';
+import PacmanLoading from '@/components/Custom/Framework/Pacman/index.vue';
+
+defineOptions({
+    name: 'EnvTable',
+});
+onMounted(() => {
+    window.pino.info('@2 EnvTable Mounted!');
+});
+const props = defineProps({
+    tableData: {
+        type: Object,
+        required: true,
+    },
+});
+const isLoading = ref(true);
+// ! 表格列对象
+const tableColumnObject = new EnvTableColumnType();
+const tableColumns = computed(() => {
+    // ! 判断是否存在表格列参数
+    setTableAuto();
+    if (props.tableData.columnList && props.tableData.columnList.length > 0) {
+        // ! 过滤选择后的表格列参数
+        const existColumn = props.tableData.columnList.filter((i) => i.status === true);
+        if (existColumn.length == 0) {
+            // ! 过滤后的列不存在，传默认的列
+            return Object.keys(tableColumnObject).map((column) => tableColumnObject[column]);
+        } else {
+            // ! 传过滤后的列
+            return existColumn.map((column) => tableColumnObject[column.key]);
+        }
+    } else {
+        // 传默认的列
+        return Object.keys(tableColumnObject).map((column) => tableColumnObject[column]);
+    }
+});
+function setTableAuto(){
+    isLoading.value = false;
+    setTimeout(() => {
+        isLoading.value = true;
+    }, 100);
+}
+
+function handleResizeColumn(w, col) {
+    col.width = w;
+}
+</script>
+
+<template>
+    <PacmanLoading v-if="!isLoading" loading="1"/>
+    <ATable
+        v-if="isLoading"
+        style="height: 100%"
+        :dataSource="props.tableData.dataSource"
+        :columns="tableColumns"
+        @change="props.tableData.methods.handleTableChange"
+        :pagination="false"
+        sticky
+        tableLayout="auto"
+        @resizeColumn="handleResizeColumn"
+        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+        :scroll="{ scrollToFirstRowOnChange: true }"
+    >
+        <template #bodyCell="{ column, record }">
+            <template v-if="column?.key === 'action'">
+                <ASpace>
+                    <TableRemoveButton :ackDelete="() => props.tableData.methods.handleRemoveAck(record)" />
+                    <TableUpdateButton @click="props.tableData.methods.handleUpdate(record)" />
+                </ASpace>
+            </template>
+        </template>
+    </ATable>
+</template>
+
+<style scoped></style>

src/views/Auth/Env/EnvTree.vue

@@ -0,0 +1,34 @@
+<script setup name="EnvTree">
+defineOptions({
+    name: 'EnvTree',
+});
+import { useBaseDataStore } from '@/stores/baseData.js';
+import { onMounted, reactive } from 'vue';
+const baseDataStore = useBaseDataStore();
+
+
+// ! 树字段重置
+const fieldNames = reactive({
+    children:'children', title:'label', key:'id'
+});
+
+// 当页面加载时
+onMounted(() => {
+    window.pino.info('@4 EnvTree  Mounted');
+    // ! 检测获取字典列表
+    if (baseDataStore.state.envList?.length == 0) {
+        baseDataStore.getEnvList();
+    }
+});
+</script>
+
+<template>
+    <ATree
+        :treeData="baseDataStore.state.envTree"
+        :show-line="true"
+        show-icon
+        :fieldNames="fieldNames"
+    />
+</template>
+
+<style scoped></style>