Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/views/device/Instance/Detail/Info/components/Tags/Save.vue

@@ -34,8 +34,8 @@
                                       )
                                     : record.type === 'boolean'
                                     ? [
-                                          { label: '是', value: true },
+                                          { label: record?.dataType?.trueText, value: record?.dataType?.trueValue },
-                                          { label: '否', value: false },
+                                          { label: record?.dataType?.falseText, value: record?.dataType?.falseValue },
                                       ]
                                     : undefined
                             "

src/views/system/DataSource/Management/index.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="mangement-container">
+    <page-container>
+        <div class="manager-container">
             <div class="left">
                 <j-input-search
                     v-model:value="leftData.searchValue"
@@ -13,16 +14,17 @@
                     defaultExpandAll
                     :tree-data="leftData.treeData"
                     v-model:selectedKeys="leftData.selectedKeys"
-                @select="leftData.onSelect"
+                    @select="onSelect"
                 >
                     <template #title="{ dataRef }">
                         <div
                             v-if="dataRef.root"
-                        :style="`
+                            style="
                                 justify-content: space-between;
                                 display: flex;
                                 align-items: center;
-                            `"
+                                width: 200px;
+                            "
                         >
                             <span>
                                 {{ dataRef.title }}
@@ -30,7 +32,7 @@
                             <AIcon
                                 type="PlusOutlined"
                                 style="color: #1d39c4"
-                            @click="leftData.addTable"
+                                @click="addTable"
                             />
                         </div>
                         <span v-else>
@@ -41,86 +43,131 @@
             </div>
             <div class="right">
                 <div class="btns">
-                <j-button type="primary" @click="table.clickSave"
+                    <j-button type="primary" @click="clickSave">保存</j-button>
-                    >保存</j-button
-                >
                 </div>
-            <j-pro-table
+                <j-form ref="formRef" :model="table">
-                ref="tableRef"
+                    <j-table
-                :columns="table.columns"
+                        :columns="columns"
-                model="TABLE"
                         :dataSource="table.data"
+                        :pagination="false"
+                        :scroll="{ y: 500 }"
+                    >
+                        <template #bodyCell="{ column, record, index }">
+                            <template v-if="column.key === 'name'">
+                                <j-form-item
+                                    :name="['data', index, 'name']"
+                                    :rules="[
+                                        {
+                                            max: 64,
+                                            message: '最多可输入64个字符',
+                                        },
+                                        {
+                                            required: true,
+                                            message: '请输入名称',
+                                        },
+                                    ]"
                                 >
-                <template #name="slotProps">
                                     <j-input
-                        :disabled="slotProps.scale !== undefined"
+                                        :disabled="record.scale !== undefined"
-                        v-model:value="slotProps.name"
+                                        v-model:value="record.name"
                                         placeholder="请输入名称"
-                        :maxlength="64"
                                     />
+                                </j-form-item>
                             </template>
-                <template #type="slotProps">
+                            <template v-else-if="column.key === 'type'">
+                                <j-form-item
+                                    :name="['data', index, 'type']"
+                                    :rules="[
+                                        {
+                                            max: 64,
+                                            message: '最多可输入64个字符',
+                                        },
+                                        {
+                                            required: true,
+                                            message: '请输入类型',
+                                        },
+                                    ]"
+                                >
                                     <j-input
-                        v-model:value="slotProps.type"
+                                        v-model:value="record.type"
                                         placeholder="请输入类型"
-                        :maxlength="64"
                                     />
+                                </j-form-item>
                             </template>
-                <template #length="slotProps">
+                            <template v-else-if="column.key === 'length'">
+                                <j-form-item :name="['data', index, 'length']">
                                     <j-input-number
-                        v-model:value="slotProps.length"
+                                        v-model:value="record.length"
                                         :min="0"
                                         :max="99999"
+                                        style="width: 100%"
                                     />
+                                </j-form-item>
                             </template>
-                <template #precision="slotProps">
+                            <template v-else-if="column.key === 'precision'">
+                                <j-form-item
+                                    :name="['data', index, 'precision']"
+                                >
                                     <j-input-number
-                        v-model:value="slotProps.precision"
+                                        v-model:value="record.precision"
                                         :min="0"
                                         :max="99999"
+                                        style="width: 100%"
                                     />
+                                </j-form-item>
                             </template>
-                <template #notnull="slotProps">
+                            <template v-else-if="column.key === 'notnull'">
+                                <j-form-item
+                                    :name="['data', index, 'notnull']"
+                                >
                                     <j-radio-group
-                        v-model:value="slotProps.notnull"
+                                        v-model:value="record.notnull"
                                         button-style="solid"
                                     >
-                        <j-radio-button :value="true">是</j-radio-button>
+                                        <j-radio-button :value="true"
-                        <j-radio-button :value="false">否</j-radio-button>
+                                            >是</j-radio-button
+                                        >
+                                        <j-radio-button :value="false"
+                                            >否</j-radio-button
+                                        >
                                     </j-radio-group>
+                                </j-form-item>
                             </template>
-                <template #comment="slotProps">
+                            <template v-else-if="column.key === 'comment'">
+                                <j-form-item
+                                    :name="['data', index, 'notnull']"
+                                >
                                     <j-input
-                        v-model:value="slotProps.comment"
+                                        v-model:value="record.comment"
                                         placeholder="请输入说明"
                                     />
+                                </j-form-item>
                             </template>
-                <template #action="slotProps">
+                            <template v-else-if="column.key === 'action'">
                                 <PermissionButton
-                        :hasPermission="`{permission}:delete`"
+                                    hasPermission="system/DataSource:delete"
                                     type="link"
                                     :tooltip="{ title: '删除' }"
+                                    :danger="true"
                                     :popConfirm="{
                                         title: `确认删除`,
-                            onConfirm: () => table.clickDel(slotProps),
+                                        onConfirm: () => clickDel(record),
                                     }"
-                        :disabled="slotProps.status"
+                                    :disabled="record.status"
                                 >
                                     <AIcon type="DeleteOutlined" />
                                 </PermissionButton>
                             </template>
-            </j-pro-table>
+                        </template>
-            <j-botton class="add-row" @click="table.addRow">
+                    </j-table>
+                </j-form>
+
+                <j-button class="add-row" @click="addRow">
                     <AIcon type="PlusOutlined" /> 新增行
-            </j-botton>
+                </j-button>
             </div>
         </div>
-    <div class="dialogs">
+        <j-modal v-model:visible="dialog.visible" title="新增" @ok="handleOk">
-        <j-modal
-            v-model:visible="dialog.visible"
-            title="新增"
-            @ok="dialog.handleOk"
-        >
             <j-form :model="dialog.form" ref="addFormRef">
                 <j-form-item
                     label="名称"
@@ -129,22 +176,22 @@
                         {
                             required: true,
                             message: '请输入名称',
-                            trigger: 'change',
                         },
                         {
                             max: 64,
                             message: '最多可输入64个字符',
-                            trigger: 'change',
+                            trigger: 'blur',
                         },
                         {
-                            pattern: /^[0-9].*$/,
+                            // pattern: /^[0-9].*$/,
-                            message: '不能以数字开头',
+                            // message: '不能以数字开头',
                             trigger: 'change',
+                            validator: checkName,
                         },
                         {
                             pattern: /^\w+$/,
                             message: '名称只能由数字、字母、下划线、中划线组成',
-                            trigger: 'change',
+                            trigger: 'blur',
                         },
                     ]"
                 >
@@ -155,7 +202,7 @@
                 </j-form-item>
             </j-form>
         </j-modal>
-    </div>
+    </page-container>
 </template>
 
 <script setup lang="ts" name="Management">
@@ -166,140 +213,137 @@ import {
     saveTable_api,
     delSaveRow_api,
 } from '@/api/system/dataSource';
+import { onlyMessage } from '@/utils/comm';
 import { FormInstance, message } from 'ant-design-vue';
 import { DataNode } from 'ant-design-vue/lib/tree';
+import _ from 'lodash';
 import { cloneDeep } from 'lodash';
 import type { dbColumnType, dictItemType, sourceItemType } from '../typing';
 
 const id = useRoute().query.id as string;
 
-const info = reactive({
+const columns = [
-    data: {} as sourceItemType,
-    init: () => {
-        id &&
-            getDataSourceInfo_api(id).then((resp: any) => {
-                info.data = resp.result;
-            });
-    },
-});
-
-const leftData = reactive({
-    searchValue: '',
-    sourceTree: [] as dictItemType[],
-    treeData: [] as DataNode[],
-    selectedKeys: [] as string[],
-    oldKey: '',
-
-    init: () => {
-        leftData.getTree();
-        watch(
-            [
-                () => leftData.searchValue,
-                () => leftData.sourceTree,
-                () => info.data,
-            ],
-            (n) => {
-                if (leftData.sourceTree.length < 1 || !info.data.shareConfig)
-                    return;
-                let filterArr = [];
-                if (leftData.searchValue) {
-                    filterArr = leftData.sourceTree.filter((item) =>
-                        item.name.includes(n[0]),
-                    );
-                } else filterArr = leftData.sourceTree;
-                leftData.treeData = [
-                    {
-                        title: info.data.shareConfig.schema,
-                        key: info.data.shareConfig.schema,
-                        root: true,
-                        children: filterArr.map((item) => ({
-                            title: item.name,
-                            key: item.name,
-                        })),
-                    },
-                ];
-                leftData.selectedKeys = [filterArr[0].name];
-                leftData.onSelect([filterArr[0].name]);
-            },
-            {},
-        );
-    },
-    getTree: () => {
-        rdbTree_api(id)
-            .then((resp: any) => {
-                leftData.sourceTree = resp.result;
-            })
-            .catch(() => {});
-    },
-    onSelect: (selectedKeys: string[], e?: any) => {
-        if (e?.node?.root) {
-            leftData.selectedKeys = [leftData.oldKey];
-            return;
-        }
-        leftData.oldKey = selectedKeys[0];
-        const key = selectedKeys[0];
-        table.getTabelData(key);
-    },
-    addTable: (e: Event) => {
-        e.stopPropagation();
-    },
-});
-
-const table = reactive({
-    columns: [
     {
         title: '列名',
         dataIndex: 'name',
         key: 'name',
-            scopedSlots: true,
     },
     {
         title: '类型',
         dataIndex: 'type',
         key: 'type',
-            scopedSlots: true,
     },
     {
         title: '长度',
         dataIndex: 'length',
         key: 'length',
-            scopedSlots: true,
     },
     {
         title: '精度',
         dataIndex: 'precision',
         key: 'precision',
-            scopedSlots: true,
     },
     {
         title: '不能为空',
         dataIndex: 'notnull',
         key: 'notnull',
-            scopedSlots: true,
     },
     {
         title: '说明',
         dataIndex: 'comment',
         key: 'comment',
-            scopedSlots: true,
     },
     {
         title: '操作',
         dataIndex: 'action',
         key: 'action',
-            scopedSlots: true,
     },
-    ],
+];
-    data: [] as dbColumnType[],
+const formRef = ref();
 
-    getTabelData: (key: string) => {
+const getInfo = (_id: string) => {
+    getDataSourceInfo_api(_id).then((resp: any) => {
+        info.data = resp.result;
+    });
+};
+
+const info = reactive({
+    data: {} as sourceItemType,
+});
+
+const leftData = reactive({
+    searchValue: '',
+    sourceTree: [] as dictItemType[],
+    treeData: [] as any[],
+    selectedKeys: [] as string[],
+    oldKey: '',
+});
+
+const queryTables = (key: string) => {
+    if (key) {
         rdbTables_api(id, key).then((resp: any) => {
             table.data = resp.result.columns.map(
-                (item: object, index: number) => ({ ...item, index }),
+                (item: object, index: number) => ({
+                    ...item,
+                    index,
+                }),
             );
         });
+    }
+};
+
+const handleSearch = (refresh?: boolean) => {
+    rdbTree_api(id)
+        .then((resp: any) => {
+            if (resp.status === 200) {
+                leftData.sourceTree = resp.result;
+                if (refresh) {
+                    leftData.selectedKeys = [resp.result[0]?.name];
+                    queryTables(resp.result[0]?.name);
+                } else {
+                    queryTables(leftData.selectedKeys[0]);
+                }
+            }
+        })
+        .catch(() => {});
+};
+
+const onSelect = (selectedKeys: string[], e?: any) => {
+    if (e?.node?.root) {
+        leftData.selectedKeys = [leftData.oldKey];
+        return;
+    }
+    if (!selectedKeys[0]) {
+        return;
+    }
+    leftData.oldKey = selectedKeys[0];
+    const key = selectedKeys[0];
+    queryTables(key);
+};
+
+const addTable = (e: Event) => {
+    e?.stopPropagation();
+    dialog.visible = true;
+};
+
+watch(
+    () => id,
+    (newId) => {
+        if (newId) {
+            getInfo(newId);
+            handleSearch(true);
+        }
     },
-    addRow: () => {
+    {
+        immediate: true,
+    },
+);
+
+const table = reactive({
+    data: [] as dbColumnType[],
+});
+
+const addRow = () => {
     const initData: dbColumnType = {
         precision: 0,
         length: 0,
@@ -309,22 +353,9 @@ const table = reactive({
         name: '',
     };
     table.data.push(initData);
-    },
-    clickSave: () => {
-        const columns = cloneDeep(table.data);
-        columns.forEach((item) => delete item.index);
-        const params = {
-            name: leftData.selectedKeys[0],
-            columns,
 };
-        saveTable_api(id, params).then((resp) => {
+
-            if (resp.status === 200) {
+const clickDel = (row: any) => {
-                message.success('操作成功');
-                table.getTabelData(params.name);
-            }
-        });
-    },
-    clickDel: (row: any) => {
     if (row.scale !== undefined) {
         delSaveRow_api(id, leftData.selectedKeys[0], [row.name]).then(
             (resp: any) => {
@@ -332,8 +363,29 @@ const table = reactive({
             },
         );
     } else table.data.splice(row.index, 1);
-    },
+};
+
+const clickSave = () => {
+    formRef.value.validate().then((_data: any) => {
+        console.log(_data)
+        // const columns = cloneDeep(table.data);
+        // columns.forEach((item) => delete item.index);
+        // if (!columns.length) {
+        //     onlyMessage('请配置数据源字段', 'error');
+        //     return;
+        // }
+        // const params = {
+        //     name: leftData.selectedKeys[0],
+        //     columns,
+        // };
+        // saveTable_api(id, params).then((resp) => {
+        //     if (resp.status === 200) {
+        //         message.success('操作成功');
+        //         queryTables(params.name);
+        //     }
+        // });
     });
+};
 
 const addFormRef = ref<FormInstance>();
 const dialog = reactive({
@@ -341,7 +393,9 @@ const dialog = reactive({
     form: {
         name: '',
     },
-    handleOk: () => {
+});
+
+const handleOk = () => {
     addFormRef.value &&
         addFormRef.value.validate().then(() => {
             const name = dialog.form.name;
@@ -352,62 +406,97 @@ const dialog = reactive({
             leftData.oldKey = name;
             leftData.selectedKeys = [name];
             table.data = [];
+            dialog.visible = false;
+            addFormRef.value?.resetFields();
         });
-    },
+};
-});
 
-init();
+watch(
-function init() {
+    [() => leftData.searchValue, () => leftData.sourceTree],
-    info.init();
+    ([m, n]) => {
-    leftData.init();
+        if (!!m) {
+            const list = n.filter((item) => {
+                return item.name.includes(m);
+            });
+            leftData.treeData = [
+                {
+                    title: info.data.shareConfig.schema,
+                    key: info.data.shareConfig.schema,
+                    root: true,
+                    children: list.map((item) => ({
+                        title: item.name,
+                        key: item.name,
+                    })),
+                },
+            ];
+            if (!_.map(list, 'name').includes(leftData.selectedKeys[0])) {
+                leftData.selectedKeys = [list[0]?.name];
+                queryTables(list[0]?.name);
             }
+        } else {
+            leftData.treeData = [
+                {
+                    title: info.data.shareConfig.schema,
+                    key: info.data.shareConfig.schema,
+                    root: true,
+                    children: leftData.sourceTree.map((item) => ({
+                        title: item.name,
+                        key: item.name,
+                    })),
+                },
+            ];
+        }
+    },
+    { deep: true },
+);
+
+const checkName = (_: any, value: any) =>
+    new Promise((resolve, reject) => {
+        if (value) {
+            const first = value.slice(0, 1);
+            if (typeof Number(first) === 'number' && !isNaN(Number(first))) {
+                reject('不能以数字开头');
+            } else {
+                resolve('');
+            }
+        }
+    });
 </script>
 
 <style lang="less" scoped>
-.mangement-container {
+.manager-container {
-    margin: 24px;
     padding: 24px;
     background-color: #fff;
     display: flex;
+    min-height: 500px;
 
     .left {
         flex-basis: 280px;
-        padding-right: 24px;
+        padding: 0 24px;
         box-sizing: border-box;
-
-        :deep(.ant-tree-treenode) {
-            width: 100%;
-            .ant-tree-switcher-noop {
-                display: none;
-            }
-            .ant-tree-node-content-wrapper {
-                width: 100%;
-                .ant-tree-title {
-                    width: 100%;
-                }
-            }
-            &:first-child .ant-tree-node-selected {
-                background-color: transparent;
-            }
-        }
     }
     .right {
         width: calc(100% - 280px);
         box-sizing: border-box;
         border-left: 1px solid #f0f0f0;
+        padding-left: 24px;
 
         .btns {
             display: flex;
             justify-content: right;
-            padding: 0px 24px;
         }
 
         .add-row {
             display: block;
             text-align: center;
             width: 100%;
+            margin: 24px 0;
             cursor: pointer;
         }
+
+        .ant-form-item {
+            margin-bottom: 0;
+        }
     }
 }
 </style>

src/views/system/DataSource/components/EditDialog.vue

@@ -6,7 +6,7 @@
         :title="dialogTitle"
         :confirmLoading="loading"
         @ok="confirm"
-        @cancel="emits('update:visible', false)"
+        @cancel="emits('cancel')"
     >
         <j-form ref="formRef" :model="form.data" layout="vertical">
             <j-row :gutter="24">
@@ -51,7 +51,7 @@
                                 message: '请输入URL',
                                 trigger: 'change',
                             },
-                            { validator: form.checkUrl, trigger: 'blur' },
+                            { validator: checkUrl, trigger: 'blur' },
                         ]"
                     >
                         <j-input
@@ -193,9 +193,8 @@ import { FormInstance, message } from 'ant-design-vue';
 import { Rule } from 'ant-design-vue/lib/form';
 import type { dictItemType, optionItemType, sourceItemType } from '../typing';
 
-const emits = defineEmits(['confirm', 'update:visible']);
+const emits = defineEmits(['confirm', 'cancel']);
 const props = defineProps<{
-    visible: boolean;
     data: sourceItemType;
 }>();
 // 弹窗相关
@@ -203,30 +202,8 @@ const dialogTitle = computed(() =>
     props.data.id ? '编辑数据源' : '新增数据源',
 );
 const loading = ref(false);
-const confirm = () => {
-    loading.value = true;
-    formRef.value
-        ?.validate()
-        .then(() => form.submit())
-        .then((resp: any) => {
-            if (resp.status === 200) {
-                message.success('操作成功');
-                emits('confirm');
-                emits('update:visible', false);
-            }
-        })
-        .finally(() => (loading.value = false));
-};
 
-const formRef = ref<FormInstance>();
+const checkUrl = (_rule: Rule, value: string): Promise<any> => {
-const form = reactive({
-    data: {
-        ...props.data,
-    } as sourceItemType,
-
-    typeOptions: [] as optionItemType[],
-
-    checkUrl: (_rule: Rule, value: string): Promise<any> => {
     if (!value) return Promise.reject('请输入URL');
     const arr = value.split(':');
     if (arr?.[0] === 'jdbc' || arr?.[0] === 'r2dbc') {
@@ -234,8 +211,9 @@ const form = reactive({
     } else {
         return Promise.reject('请输入正确的URL');
     }
-    },
+};
-    getTypeOption: () => {
+
+const getTypeOption = () => {
     getDataTypeDict_api().then((resp: any) => {
         const result = resp.result as dictItemType[];
         form.typeOptions = result.map((item) => ({
@@ -243,10 +221,45 @@ const form = reactive({
             value: item.id,
         }));
     });
-    },
+};
-    submit: () => {
+
-        return saveDataSource_api(form.data);
+const formRef = ref<FormInstance>();
-    },
+const form = reactive({
+    data: {
+        ...props.data,
+    } as sourceItemType,
+    typeOptions: [] as optionItemType[],
 });
-form.getTypeOption();
+
+watch(
+    () => props.data,
+    (newValue) => {
+        form.data = {...newValue, shareConfig: { ...newValue?.shareConfig }}
+    },
+    {
+        immediate: true,
+        deep: true
+    },
+);
+
+onMounted(() => {
+    getTypeOption();
+})
+
+const confirm = () => {
+    loading.value = true;
+    formRef.value
+        ?.validate()
+        .then(async (_data: any) => {
+            const resp = await saveDataSource_api({ ...props.data, ..._data });
+            if (resp.status === 200) {
+                message.success('操作成功');
+                emits('confirm');
+                formRef.value?.resetFields()
+            }
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
 </script>

src/views/system/DataSource/index.vue

@@ -14,8 +14,13 @@
                 model="TABLE"
                 :params="queryParams"
                 :defaultParams="{
+                    pageSize: 10,
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"
+                :pagination="{
+                    showSizeChanger: true,
+                    pageSizeOptions: ['10', '20', '50', '100'],
+                }"
             >
                 <template #headerTitle>
                     <PermissionButton
@@ -31,7 +36,7 @@
                         :status="slotProps.state?.value"
                         :text="slotProps.state?.text"
                         :statusNames="{
-                            enabled: 'success',
+                            enabled: 'processing',
                             disabled: 'error',
                         }"
                     >
@@ -116,6 +121,7 @@
                                     ? '请先禁用，再删除'
                                     : '删除',
                             }"
+                            :danger="true"
                             :popConfirm="{
                                 title: `确认删除`,
                                 onConfirm: () => table.clickDel(slotProps),
@@ -130,7 +136,7 @@
 
             <EditDialog
                 v-if="dialog.visible"
-                v-model:visible="dialog.visible"
+                @cancel="table.cancel"
                 :data="dialog.selectItem"
                 @confirm="table.refresh"
             />
@@ -211,7 +217,7 @@ const columns = [
                     value: 'enabled',
                 },
                 {
-                    label: '已禁用',
+                    label: '禁用',
                     value: 'disabled',
                 },
             ],
@@ -277,7 +283,13 @@ const table = {
     // 刷新列表
     refresh: () => {
         tableRef.value.reload();
+        dialog.visible = false
+        dialog.selectItem = {}
     },
+    cancel: () => {
+        dialog.visible = false
+        dialog.selectItem = {}
+    }
 };
 table.getTypeOption();