ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/numberTemplate/NumberTemplate.vue

@@ -0,0 +1,166 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            编号模版
+            <el-tooltip>
+                <template #content>
+                    定义编号模版，应用中可以使用特定的API根据编号模版生成有序的文本编号。
+                </template>
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <div
+                style="flex:1; display: flex; flex-direction: row-reverse; gap: 8px;
+                     width: 100%">
+
+                <ja-button :icon="Refresh" plain @click="loadData"
+                           :loading="loading"
+                           tooltip="重新加载数据" shortcut="Alt+R"> 刷新
+                </ja-button>
+                <ja-button type="success" :icon="Plus" :loading="loading"
+                           v-if="props.mode === 'develop'"
+                           @click="onCreateNewClick" tooltip="新建编号模版" shortcut="Alt+N">新建
+                </ja-button>
+                <el-input :suffix-icon="Search" style="width: 240px" placeholder="输入模板名称检索"
+                          v-model="nameToSearch" @input="debounceLoadData" v-focus></el-input>
+            </div>
+        </template>
+        <template #body>
+            <div style="height:100%; display: flex; flex-direction: column;">
+                <div style="flex: auto;">
+                    <vxe-table
+                        :loading="loading"
+                        size="small"
+                        stripe
+                        ref="tableRef"
+                        height="100%"
+                        :column-config="{resizable: true}"
+                        :row-config="{ isHover: true, height:40 }"
+                        :data="templates"
+                        class="vxe-table--scrollbar">
+                        <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                        <vxe-column field="name" title="模版名称" show-overflow width="250px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="description" title="模版说明" show-overflow
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column title="操作" fixed="right" width="200px" show-overflow
+                                    show-header-overflow>
+                            <template #default="{ row }">
+                                <!-- row.disabled -->
+                                <el-button link type="warning" :icon="Edit"
+                                           @click="onEditClick(row)">编辑
+                                </el-button>
+
+                                <el-button link type="danger" :icon="Delete"
+                                           @click="onDeleteClick(row)">
+                                    删除
+                                </el-button>
+                            </template>
+                        </vxe-column>
+                        <template #empty>
+                            <el-empty/>
+                        </template>
+                    </vxe-table>
+                </div>
+                <div style="flex:none; display: flex; flex-direction: row-reverse; padding: 12px">
+                    <el-pagination
+                        background
+                        :page-sizes="pageSizes"
+                        layout="total, sizes, prev, pager, next"
+                        v-model:page-size="pageSize"
+                        v-model:current-page="page"
+                        @current-change="loadData"
+                        @size-change="loadData"
+                        :total="total"/>
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+    <editor :mode="editMode" v-model="editorVisible" :data="currentData" @success="loadData"
+            :app-id="props.appId" :dev-mode="props.mode"></editor>
+</template>
+
+<script setup lang="ts">
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {Delete, Edit, Plus, QuestionFilled, Refresh, Search} from "@element-plus/icons-vue";
+import {
+    type ProjectedStringIdTemplate,
+    useAppApi,
+    useLoading,
+    useStringIdTemplateApi
+} from "@jari-ace/app-bolts";
+import {JaButton, useAppInstances} from "@jari-ace/element-plus-component";
+import {onUnmounted, ref, watch} from 'vue';
+import {pageSizes} from "@/hooks/usePageSize";
+import {VxeColumn, VxeTable} from "vxe-table";
+import Editor from "./components/Editor.vue"
+import {debounce} from "lodash-es";
+import {ElMessageBox} from "element-plus";
+
+const props = defineProps<{
+    appId?: string;
+    mode: 'develop' | 'manage'
+}>();
+const loading = useLoading();
+const api = useStringIdTemplateApi();
+const page = ref(1);
+const pageSize = ref(50);
+const templates = ref<ProjectedStringIdTemplate[]>();
+const total = ref(0);
+const editMode = ref<'new' | 'update'>('new');
+const editorVisible = ref(false);
+const nameToSearch = ref("");
+const {getById: getAppById} = useAppInstances()
+const appName = ref<string>();
+const currentData = ref<ProjectedStringIdTemplate>();
+const debounceLoadData = debounce(loadData, 1000);
+
+async function loadData() {
+    if (!props.appId) return;
+    appName.value = (await getAppById(props.appId)).name
+    if (nameToSearch.value && nameToSearch.value.length > 0) {
+        const res = await api.findByName(appName.value, nameToSearch.value, page.value
+                                                                       - 1, pageSize.value)
+        templates.value = res.content;
+        total.value = res.totalElements;
+    } else {
+        const res = await api.getByApp(appName.value, page.value - 1, pageSize.value)
+        templates.value = res.content;
+        total.value = res.totalElements;
+    }
+}
+
+function onCreateNewClick() {
+    editMode.value = "new";
+    editorVisible.value = true;
+}
+
+function onEditClick(d: ProjectedStringIdTemplate) {
+    currentData.value = d;
+    editMode.value = "update";
+    editorVisible.value = true;
+}
+
+async function onDeleteClick(d: ProjectedStringIdTemplate) {
+    await ElMessageBox.confirm("确定删除此编号模版吗？", "确认删除");
+    await api.delete(d.id, d.dataVersion)
+    await loadData();
+}
+
+watch(() => props.appId, loadData)
+
+loadData();
+
+onUnmounted(() => {
+    debounceLoadData.cancel()
+})
+</script>
+
+<style scoped>
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/numberTemplate/components/Editor.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {
+    createAxiosWithoutCache,
+    type CreateStringIdTemplateCommand,
+    type CreateStringIdTemplatePartCommand,
+    type ProjectedStringIdTemplate,
+    type ProjectedStringIdTemplatePart,
+    type StringIdTemplate,
+    type StringIdTemplatePart,
+    type UpdateStringIdTemplateCommand,
+    type UpdateStringIdTemplatePartCommand,
+    useLoading,
+    useStringIdTemplateApi
+} from "@jari-ace/app-bolts";
+import {
+    JaForm,
+    useBackendValidations,
+    JaFormItem,
+    JaInput,
+    JaSelect,
+    JaSwitch, JaButton, useNumberTemplates, useAppInstances
+} from "@jari-ace/element-plus-component";
+import {CaretBottom, Edit, Minus, Plus, QuestionFilled} from "@element-plus/icons-vue";
+import {EditOutlined} from "@ant-design/icons-vue";
+
+const visible = defineModel<boolean>({
+    required: true,
+    default: false
+});
+const props = defineProps<{
+    mode: 'new' | 'update',
+    devMode: 'manage' | 'develop'
+    data?: ProjectedStringIdTemplate,
+    appId?: string;
+}>();
+const emits = defineEmits(["success"]);
+const state = ref<{
+    formData: CreateStringIdTemplateCommand | UpdateStringIdTemplateCommand;
+}>({
+    formData: newStringIdTemplate()
+})
+const title = ref<string>();
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useStringIdTemplateApi(axios);
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const form = ref<InstanceType<typeof JaForm>>();
+const parts = ref<ProjectedStringIdTemplatePart[]>([])
+const selectedParts = ref<ProjectedStringIdTemplatePart[]>([]);
+const {refreshNumberTemplatesCache} = useNumberTemplates()
+const {getById: getAppById} = useAppInstances()
+
+function newStringIdTemplate(): CreateStringIdTemplateCommand {
+    return {
+        app: {
+            id: props.appId ?? '0',
+        },
+        description: "",
+        name: ""
+    };
+}
+
+async function onOpen() {
+    if (props.mode == 'update') {
+        if (!props.data) return;
+        const res = await api.getById(props.data?.id);
+        parts.value = res.parts;
+        state.value.formData = res;
+    } else {
+        state.value.formData = newStringIdTemplate();
+        parts.value = [];
+    }
+    title.value = props.mode == 'new' ? "新建编号模版" : "修改编号模版"
+}
+
+function submit() {
+    if (props.mode === 'new') {
+        const cmd = {
+            ...state.value.formData,
+            app: {
+                id: props.appId,
+            }
+        } as CreateStringIdTemplateCommand;
+        form.value?.validate(
+            () => api.create(cmd)
+                     .then(t => {
+                         emits("success", t);
+                         visible.value = false;
+                     }))
+    } else {
+        const cmd = state.value.formData as UpdateStringIdTemplateCommand;
+        form.value?.validate(() => api.update(cmd)
+                                      .then(t => {
+                                          visible.value = false;
+                                          emits("success", t);
+                                      }));
+    }
+}
+
+function onPartsSelectionChanged(val: StringIdTemplatePart[]) {
+    selectedParts.value = val;
+}
+
+//#region parts对话框
+const partDlgVisible = ref(false);
+const pAxios = createAxiosWithoutCache();
+const pLoading = useLoading(pAxios);
+const pApi = useStringIdTemplateApi(pAxios);
+const pState = ref<{
+    formData: CreateStringIdTemplatePartCommand | UpdateStringIdTemplatePartCommand
+}>({
+    formData: newStringTemplatePart()
+})
+const pValidator = useBackendValidations(Object.keys(pState.value.formData), pAxios);
+const pEditMode = ref<'create' | 'update'>();
+const pTitle = ref<string>();
+const pForm = ref<InstanceType<typeof JaForm>>();
+
+function onAddNewPartClick() {
+    pEditMode.value = "create";
+    pState.value.formData = newStringTemplatePart();
+    partDlgVisible.value = true;
+}
+
+async function onEditPartClick(p: StringIdTemplatePart) {
+    pEditMode.value = "update";
+    pState.value.formData = await api.getPart(p.id);
+    partDlgVisible.value = true;
+}
+
+async function onDelPartClick() {
+    await pApi.deletePart(selectedParts.value);
+    selectedParts.value.forEach(p => {
+        const idx2 = parts.value.findIndex(x => x.id === p.id);
+        if (idx2 >= 0)
+            parts.value.splice(idx2, 1);
+    });
+    selectedParts.value = [];
+}
+
+function newStringTemplatePart() {
+    return {
+        id: '0',
+        dataVersion: 0,
+        /**
+         * 序号
+         */
+        sortIndex: parts.value?.length ?? 0 > 0 ? Math.max(...parts.value!.map(p => p.sortIndex))
+                                                  + 10 : 10,
+        /**
+         * 模板类型
+         */
+        partType: "EXPRESSION",
+        /**
+         * 表达式
+         */
+        elExpression: "",
+        /**
+         * 引用序列
+         */
+        referencedParts: [],
+        /**
+         * 序列名称
+         */
+        sequenceName: "",
+        /**
+         * 手动模式下指定的序列名后缀
+         */
+        manualSuffix: "",
+        /**
+         * 输出数字长度
+         */
+        fixNumLength: 4,
+        /**
+         * 数字序列重置模式
+         */
+        resetMode: "BY_MONTH",
+        /**
+         * 是否严格时序序列
+         */
+        strictSequence: false,
+        /**
+         * 是否动态序列
+         */
+        dynamicSequence: false
+    } as CreateStringIdTemplatePartCommand;
+}
+
+function onPartDlgOpen() {
+    if (pEditMode.value == 'create') {
+        pTitle.value = "创建模版组件"
+    } else {
+        pTitle.value = "编辑模版组件";
+    }
+}
+
+async function onPartSubmitClick() {
+    const app = await getAppById(props.appId!)
+    if (pEditMode.value === 'create') {
+        pForm.value?.validate(() => pApi.createPart({
+            ...pState.value.formData,
+            template: {
+                id: (
+                    state.value.formData as UpdateStringIdTemplateCommand
+                ).id,
+            }
+        }).then(() => {
+            refreshNumberTemplatesCache(app.name)
+            partDlgVisible.value = false;
+            pApi.getById((
+                state.value.formData as UpdateStringIdTemplateCommand
+            ).id)
+                .then(res => parts.value = res.parts);
+        }));
+    } else {
+        pForm.value?.validate(async () => pApi.updatePart(pState.value.formData as UpdateStringIdTemplatePartCommand)
+                                              .then(() => {
+                                                  refreshNumberTemplatesCache(app.name)
+                                                  partDlgVisible.value = false;
+                                                  pApi.getById((
+                                                      state.value.formData as UpdateStringIdTemplateCommand
+                                                  ).id)
+                                                      .then(res => parts.value = res.parts);
+                                              }))
+    }
+}
+
+//#endregion
+
+</script>
+
+<template>
+    <el-drawer v-model="visible" destroy-on-close append-to-body :title="title"
+               @open="onOpen" size="540px">
+        <ja-form :model="state" :validator="validator" ref="form">
+            <ja-form-item label="模版名称" prop="name" required>
+                <ja-input v-focus :disabled="props.devMode === 'manage'"></ja-input>
+            </ja-form-item>
+            <ja-form-item label="模版说明" prop="description">
+                <ja-input/>
+            </ja-form-item>
+        </ja-form>
+        <p v-if="props.mode === 'update'"
+           style="display: flex; background-color: var(--el-color-info-light-9);padding: 8px 4px; margin: 12px 0;">
+            <el-text type="info" style="flex:auto">
+                <el-icon>
+                    <caret-bottom></caret-bottom>
+                </el-icon>
+                模版组件
+                <el-tooltip content="模版组件定义编号的各个组成部分的生成规则">
+                    <el-icon>
+                        <question-filled></question-filled>
+                    </el-icon>
+                </el-tooltip>
+            </el-text>
+            <ja-button tooltip="新建组件" :icon="Plus" plain circle @click="onAddNewPartClick"
+                       size="small" shortcut="Alt+A"></ja-button>
+            <ja-button tooltip="删除组件" :icon="Minus" plain circle @click="onDelPartClick"
+                       size="small" shortcut="Alt+D"></ja-button>
+        </p>
+        <el-table v-if="props.mode === 'update'" :data="parts"
+                  @selection-change="onPartsSelectionChanged">
+            <el-table-column type="selection" width="55"/>
+            <el-table-column prop="sortIndex" label="序号" width="60"></el-table-column>
+            <el-table-column prop="partType" label="类型" width="95">
+                <template #default="scope">
+                    <el-tag v-if="scope.row.partType === 'EXPRESSION'" type="primary">表达式
+                    </el-tag>
+                    <el-tag type="warning" v-else>数字序列</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="表达式/序列名">
+                <template #default="scope">
+                    {{
+                        scope.row.partType === "EXPRESSION" ? scope.row.elExpression :
+                            scope.row.sequenceName
+                    }}
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80">
+                <template #default="scope">
+                    <el-button link type="primary" :icon="Edit"
+                               @click="onEditPartClick(scope.row)">
+                        编辑
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <template #footer>
+            <ja-button type="primary" :loading="loading" @click="submit" shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button plain @click="visible=false">取消</el-button>
+        </template>
+    </el-drawer>
+    <el-dialog v-model="partDlgVisible" draggable destroy-on-close append-to-body :title="pTitle"
+               @open="onPartDlgOpen" width="540px">
+        <ja-form :validator="pValidator" :model="pState" ref="pForm">
+            <ja-form-item label="序号" required prop="sortIndex">
+                <ja-input-number v-focus/>
+            </ja-form-item>
+            <ja-form-item label="组件类型" prop="partType">
+                <ja-select>
+                    <el-option label="表达式" value="EXPRESSION"></el-option>
+                    <el-option label="数字序列" value="SEQUENCE"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="表达式" prop="elExpression" required
+                          label-remark="使用Spring EL表达式生成结果文本。<br/>
+注：EL表达式中可以使用的变量包括：<br/>
+1. user - 当前登录用户对象，可以获取姓名、部门等属性，包括扩展属性<br/>
+2. timestamp - 当前系统时间<br/>
+3. 从获取新编号方法调用处传入的参数，变量名为Map参数的Key<br/>
+示例表达式：<pre>
+        'CKD-' + #user.getDepartment()
+                      .getAttributes()
+                      .get('my-custom-attr')
+               + '-' + #timeStamp.getYear().toString()
+               + '-' + #myParam1</pre>"
+                          v-if="(pState.formData as CreateStringIdTemplatePartCommand).partType === 'EXPRESSION'">
+                <ja-input></ja-input>
+            </ja-form-item>
+            <template
+                v-if="(pState.formData as CreateStringIdTemplatePartCommand).partType === 'SEQUENCE'">
+                <ja-form-item label="动态序列名" prop="dynamicSequence"
+                              label-remark="启用动态序列名，可以使用其他组件的生成结果作为序列名">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="引用组件" prop="referencedParts" required
+                              v-if="(pState.formData as CreateStringIdTemplatePartCommand).dynamicSequence">
+                    <ja-select multiple value-key="id" tag-type="primary">
+                        <el-option
+                            v-for="p in parts?.filter(x=> x.id !== (pState.formData as UpdateStringIdTemplatePartCommand).id)"
+                            :key="p.id" :value="p"
+                            :label="'部件-' + p.sortIndex"></el-option>
+                    </ja-select>
+                </ja-form-item>
+                <ja-form-item v-else label="数字序列名称" required prop="sequenceName"
+                              label-remark="从指定名称的数字序列取数作为生成结果。<br/>如果指定名称的数字序列不存在，会在生成编号时自动创建。">
+                    <ja-input></ja-input>
+                </ja-form-item>
+                <ja-form-item label="严格时间序列" prop="strictSequence"
+                              label-remark="从序列取数将按照时间顺序递增">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="数字输出位数" prop="fixNumLength"
+                              label-remark="输出的数字位数，如果位数不足，左侧补零">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="重置模式" prop="resetMode"
+                              label-remark="重置数字序列，重新从1开始计数">
+                    <ja-select>
+                        <el-option label="不重置" value="NONE"></el-option>
+                        <el-option label="每年重置" value="BY_YEAR"></el-option>
+                        <el-option label="每月重置" value="BY_MONTH"></el-option>
+                        <el-option label="每周重置" value="BY_WEEK"></el-option>
+                        <el-option label="每天重置" value="BY_DAY"></el-option>
+                    </ja-select>
+                </ja-form-item>
+            </template>
+        </ja-form>
+        <template #footer>
+            <ja-button type="primary" :loading="pLoading" @click="onPartSubmitClick"
+                       shortcut="Ctrl+Alt+Enter" :disabled="pLoading">确定
+            </ja-button>
+            <el-button plain @click="partDlgVisible=false">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>