@xilonglab/vue-main 0.7.8

package/packages/index.js

@@ -0,0 +1,130 @@
+import XlSideBar from './XlSideBar.vue'
+import XlControlBar from './XlControlBar.vue'
+import XlBreadcrumb from './XlBreadcrumb.vue'
+
+// Button Components
+import XlAsyncButton from './button/XlAsyncButton.vue'
+import XlButton from './button/XlButton.vue'
+import XlDeleteButton from './button/XlDeleteButton.vue'
+import XlEditButton from './button/XlEditButton.vue'
+import XlIconButton from './button/XlIconButton.vue'
+import XlUploadButton from './button/XlUploadButton.vue'
+
+// Form Components
+import XlCascader from './form/XlCascader.vue'
+import XlCheckbox from './form/XlCheckbox.vue'
+import XlDate from './form/XlDate.vue'
+import XlFormCol from './form/XlFormCol.vue'
+import XlFormRow from './form/XlFormRow.vue'
+import XlImageInput from './form/XlImageInput.vue'
+import XlInput from './form/XlInput.vue'
+import XlMapSelect from './form/XlMapSelect.vue'
+import XlNumber from './form/XlNumber.vue'
+import XlRadio from './form/XlRadio.vue'
+import XlRawSelect from './form/XlRawSelect.vue'
+import XlRegion from './form/XlRegion.vue'
+import XlSearchSelect from './form/XlSearchSelect.vue'
+import XlSelect from './form/XlSelect.vue'
+import XlSwitch from './form/XlSwitch.vue'
+import XlTabRadio from './form/XlTabRadio.vue'
+import XlTags from './form/XlTags.vue'
+import XlTextarea from './form/XlTextarea.vue'
+import XlTime from './form/XlTime.vue'
+
+// Dialog Components
+import XlDialog from './dialog/XlDialog.vue'
+import XlFormDialog from './dialog/XlFormDialog.vue'
+import XlStateDialog from './dialog/XlStateDialog.vue'
+import XlEditReviewDialog from './dialog/XlEditReviewDialog.vue'
+import XlImagePreviewDialog from './dialog/XlImagePreviewDialog.vue'
+import XlMessageDialog from './dialog/XlMessageDialog.vue'
+import XlReviewDialog from './dialog/XlReviewDialog.vue'
+
+// Main Components
+import XlDataView from './main/XlDataView.vue'
+import XlFormDialog2 from './main/XlFormDialog2.vue'
+import XlNavBar from './main/XlNavBar.vue'
+import XlTabView from './main/XlTabView.vue'
+import XlToolBar from './main/XlToolBar.vue'
+import XlVerticalMenu from './main/XlVerticalMenu.vue'
+import XlStatusIndicator from './main/XlStatusIndicator.vue'
+import XlUpdateIndicator from './main/XlUpdateIndicator.vue'
+import XlAutoSaver from './main/XlAutoSaver.vue'
+import XlLoginForm from './main/XlLoginForm.vue'
+
+const components = [
+    XlSideBar,
+    XlControlBar,
+    XlBreadcrumb,
+    // Buttons
+    XlAsyncButton,
+    XlButton,
+    XlDeleteButton,
+    XlEditButton,
+    XlIconButton,
+    XlUploadButton,
+    // Forms
+    XlCascader,
+    XlCheckbox,
+    XlDate,
+    XlFormCol,
+    XlFormRow,
+    XlImageInput,
+    XlInput,
+    XlMapSelect,
+    XlNumber,
+    XlRadio,
+    XlRawSelect,
+    XlRegion,
+    XlSearchSelect,
+    XlSelect,
+    XlSwitch,
+    XlTabRadio,
+    XlTags,
+    XlTextarea,
+    XlTime,
+    // Dialogs
+    XlDialog,
+    XlFormDialog,
+    XlStateDialog,
+    XlEditReviewDialog,
+    XlImagePreviewDialog,
+    XlMessageDialog,
+    XlReviewDialog,
+    // Main Components
+    XlDataView,
+    XlFormDialog2,
+    XlNavBar,
+    XlTabView,
+    XlToolBar,
+    XlVerticalMenu,
+    XlStatusIndicator,
+    XlUpdateIndicator,
+    XlAutoSaver,
+    XlLoginForm
+];
+
+const install = (app) => {
+    components.forEach((component) => {
+        app.component(component.name, component);
+    });
+};
+
+let componentsJson = {}
+components.forEach(component => {
+    const componentName = component.name
+    component.install = function (app) {
+        app.component(componentName, component)
+    }
+    componentsJson[componentName] = component
+})
+
+
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue)
+}
+
+export default {
+    install,
+    ...componentsJson
+}

package/packages/main/XlAutoSaver.vue

@@ -0,0 +1,75 @@
+<script setup>
+defineOptions({ name: "XlAutoSaver" })
+
+import { reactive } from 'vue'
+
+
+const props = defineProps({
+    api: {
+        type: Function,
+        default: async () => { }
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const state = reactive({
+    saving: false,
+    lastUpdateTime: null
+})
+
+async function onBlur() {
+    let { api, disabled } = props;
+    if (disabled) {
+        return;
+    }
+    state.saving = true;
+    const code = await api();
+    state.saving = false;
+    if (code == 1) {
+        state.lastUpdateTime = new Date();
+    }
+}
+
+async function onClick() {
+    const { api, disabled } = props;
+    if (disabled) {
+        return;
+    }
+    let now = new Date();
+    let lapse = state.lastUpdateTime ? now - state.lastUpdateTime : 3500;
+    if (lapse > 3000 && !state.saving) {
+        state.saving = true;
+        try {
+            const code = await api();
+            if (code == 1) {
+                state.lastUpdateTime = new Date();
+            }
+        } catch (error) {
+            console.error('Auto save failed:', error);
+        } finally {
+            state.saving = false;
+        }
+    }
+}
+
+
+defineExpose({
+    state
+})
+</script>
+
+<template>
+    <div class="xl-auto-saver" @mouseleave="onBlur" @click="onClick">
+        <slot />
+    </div>
+</template>
+
+<style lang="less">
+.xl-auto-saver {
+    display: flex;
+    flex-flow: column;
+}
+</style>

package/packages/main/XlDataView.vue

@@ -0,0 +1,212 @@
+<script setup>
+defineOptions({ name: "XlDataView" })
+
+import { inject, computed } from 'vue'
+
+const props = defineProps({
+    selectable: {
+        type: Boolean,
+        default: false,
+    },
+    columns: {
+        type: Array,
+        default: () => [],
+    },
+    showSummary: {
+        type: Boolean,
+        default: true,
+    },
+    rowClick: {
+        type: Function,
+        default: () => { },
+    },
+    summaryMethod: {
+        type: Function,
+    },
+    showIndex: {
+        type: Boolean,
+        default: false,
+    },
+    disableAdd: {
+        type: Boolean,
+        default: false,
+    },
+    pagination: {
+        type: Object,
+        default() {
+            return {
+                pageNum: 1,
+                pageSize: 20,
+                total: 0,
+            };
+        },
+    },
+    spanMethod: {
+        type: Function,
+        default: () => { },
+    },
+    headerCellStyle: {
+        type: Function,
+        default: () => { },
+    },
+    rowClassName: {
+        type: Function,
+        default: () => { },
+    },
+    rowKey: {
+        type: Function,
+        default: () => { },
+    },
+    rowDblClick: {
+        type: Function,
+        default: () => { },
+    },
+    selectionChange: {
+        type: Function,
+        default: () => { },
+    },
+    layout: {
+        type: String,
+        default: 'prev, pager, next, jumper'
+    },
+    small: {
+        type: Boolean,
+        default: false
+    },
+    chinese: {
+        type: String,
+        default: ''
+    },
+    english: {},
+    type: {
+        type: String,
+        default: ''
+    },
+    width: {
+        default: 70
+    },
+    labelWidth: {
+        default: 90
+    },
+    callback: {
+        type: Function,
+        default: () => { },
+    },
+});
+
+const { refs, api, params, obj, chartOptions, total } = inject('injections')
+</script>
+
+
+<template>
+    <div :class="['xl-data-view', english]">
+        <xl-tool-bar :type="type" :table="refs.table" :params="params" @query="() => api.stat()">
+            <template #inputs>
+                <template v-for="col in columns" :key="col.prop">
+                    <template v-if="col.search">
+                        <component 
+                            :is="`xl-${col.search.type || 'input'}`"
+                            :placeholder="col.label"
+                            v-model="params[col.prop]"
+                            v-bind="col.search || {}"
+                        />
+                    </template>
+                </template>
+                <slot name="inputs" />
+            </template>
+            <template #buttons>
+                <slot name="buttons" />
+                <el-button class="add-btn" v-if="!disableAdd" type="success" @click="() => api.onAdd()">新增</el-button>
+            </template>
+        </xl-tool-bar>
+        <xl-query-page-table v-show="params.view != 'chart'" :ref="refs.table" :api="api" :params="params"
+            v-bind="$props" :summary-method="summaryMethod?summaryMethod:()=>({0:total})" :sort-change="(data) => api.sort(data)">
+            <template v-for="col in columns" :key="col.prop">
+                <template v-if="!col.hidden">
+                    <xl-datetime-col 
+                    v-if="col.type === 'datetime'"
+                    :l="col.label"
+                    :p="col.prop"
+                />
+                <xl-map-col
+                    v-else-if="col.type === 'map'"
+                    :l="col.label"
+                    :p="col.prop"
+                    :width="col.width"
+                    :map="col.map"
+                />
+                <xl-status-col
+                    v-else-if="col.type === 'status'"
+                    :l="col.label"
+                    :p="col.prop"
+                    :map="col.map"
+                />
+                <xl-review-col
+                    v-else-if="col.type === 'review'"
+                    :l="col.label"
+                    :p="col.prop"
+                />
+                <xl-clamp-col
+                    v-else-if="col.type === 'clamp'"
+                    :l="col.label"
+                    :p="col.prop"
+                    :width="col.width"
+                />
+                <xl-bool-col
+                    v-else-if="col.type === 'bool'"
+                    :l="col.label"
+                    :p="col.prop"
+                    :width="col.width"
+                />
+                <xl-col
+                    v-else
+                    :l="col.label"
+                    :p="col.prop"
+                    :width="col.width"
+                />
+                </template>
+            </template>
+            <slot name="columns" />
+        </xl-query-page-table>
+        <xl-chart v-show="params.view == 'chart'" :options="chartOptions" />
+        <xl-form-dialog-2
+            :ref="refs.editDialog" 
+            :title="chinese" 
+            :width="width" 
+            :label-width="labelWidth" 
+            :data="obj"
+            :columns="columns" 
+            :callback="callback"
+        >
+            <el-row>
+                <template v-for="col in columns" :key="col.prop">
+                    <xl-form-col 
+                        v-if="col.form" 
+                        :span="col.form.span" 
+                        :l="col.label" 
+                        :p="col.prop"
+                    >
+                        <component 
+                            :is="`xl-${col.form.type || 'input'}`"
+                            v-model="obj[col.prop]"
+                            v-bind="col.form || {}"
+                        />
+                    </xl-form-col>
+                </template>
+            </el-row>
+            <slot name="items" />
+        </xl-form-dialog-2>
+        <slot name="others" />
+        <xl-message-dialog :ref="refs.deleteDialog" message="确认删除?" @confirm="() => api.delete()" />
+    </div>
+</template>
+
+
+<style lang="less">
+.xl-data-view {
+    div.cell {
+        padding: 0 !important;
+
+    }
+}
+</style>

package/packages/main/XlFormDialog2.vue

@@ -0,0 +1,80 @@
+<script setup>
+defineOptions({ name: "XlFormDialog2" })
+
+import { ref, computed } from 'vue'
+
+
+const emits = defineEmits(['confirm', 'finish'])
+
+const props = defineProps({
+    title: {},
+    width: {},
+    data: {},
+    columns: {
+        default() {
+            return []
+        }
+    },
+    labelWidth: {
+        default: 70
+    },
+    callback: {
+        type: Function,
+        default: () => { },
+    }
+})
+
+const refs = {
+    dialog: ref(null),
+    form: ref(null),
+}
+
+const convertColumnsToRules = (columns) => {
+  const rules = {};
+  columns.forEach(col => {
+    if (col.form?.required) {
+      rules[col.prop] = [{
+        required: true,
+        message: `请输入${col.label}`,
+        trigger: "blur"
+      }];
+    }
+  });
+  return rules;
+};
+
+const rules = computed(() => convertColumnsToRules(props.columns));
+
+async function validate() {
+    let flag = 0
+    await refs.form.value.validate(function (valid) {
+        flag = valid
+    })
+    return flag
+}
+
+defineExpose({
+    show() {
+        refs.dialog.value.show()
+    }
+})
+</script>
+
+
+<template>
+    <xl-dialog class="xl-edit-dialog" :ref="refs.dialog" :title="title" :width="width" :validate="validate"
+        :callback="callback" @finish="emits('finish')">
+        <el-form :ref="refs.form" :model="data" :rules="rules" :label-width="`${labelWidth}px`">
+            <slot />
+        </el-form>
+    </xl-dialog>
+</template>
+
+
+<style lang="less">
+.xl-edit-dialog {
+    .xl-form-item {
+        width: 100% !important;
+    }
+}
+</style>

package/packages/main/XlLoginForm.vue

@@ -0,0 +1,192 @@
+<script setup>
+defineOptions({ name: "XlLoginForm" })
+
+import { ref, reactive, computed, onMounted } from 'vue'
+
+
+const props = defineProps({
+    scope: {
+        type: Object,
+        default() {
+            return {}
+        },
+    }
+});
+
+const emits = defineEmits(['login', 'keyEnter'])
+
+
+const rules = {
+    name: [
+        { required: true, message: '请输入用户名', trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' }
+    ],
+    captcha: [
+        { required: true, message: "请输入验证码", trigger: "blur" },
+    ],
+};
+
+
+const loginForm = ref(null)
+
+const form = reactive({
+    name: "",
+    password: "",
+    captcha: "",
+    uuid: "",
+})
+const nameError = ref('')
+const passwordError = ref('')
+const captchaError = ref('')
+const captchaUrl = computed(() => {
+    return `/api/system/captcha?uuid=${form.uuid}`
+})
+
+function getUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+        return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
+    })
+}
+
+async function validate() {
+    let flag = true
+    await loginForm.value.validate(valid => {
+        flag = valid
+    })
+    return flag
+}
+
+const Captcha = {
+    refresh() {
+        form.uuid = getUUID();
+    }
+}
+
+const Cookie = {
+    get() {
+        if (document.cookie.length > 0) {
+            let arr = document.cookie.split("; ");
+            for (let i = 0; i < arr.length; i++) {
+                let arr2 = arr[i].split("=");
+                if (arr2[0] == "name") {
+                    form.name = arr2[1];
+                } else if (arr2[0] == "password") {
+                    form.password = arr2[1];
+                    props.scope.isRemember = true;
+                }
+            }
+        }
+    },
+    delete(cookiename) {
+        let d = new Date();
+        d.setDate(d.getDate() - 1);
+        let expires = ";expires=" + d;
+        let name = cookiename;
+        let value = "";
+        document.cookie = name + "=" + value + expires + "; ";
+    },
+    set() {
+        let { name, password } = form;
+        if (props.scope.isRemember) {
+            document.cookie = `name=${name}`;
+            document.cookie = `password=${password}`;
+        } else {
+            Cookie.delete("password");
+        }
+    }
+}
+
+
+const Error = {
+    reset() {
+        nameError.value = "";
+        passwordError.value = "";
+        captchaError.value = "";
+    },
+    user() {
+        this.reset()
+        nameError.value = "用户不存在";
+    },
+    password() {
+        this.reset()
+        passwordError.value = "密码错误";
+    },
+    captcha() {
+        this.reset()
+        captchaError.value = "验证码错误";
+    },
+}
+
+onMounted(() => {
+    Cookie.get()
+    Captcha.refresh()
+})
+
+defineExpose({ form, Captcha, Cookie, Error, validate })
+</script>
+
+
+<template>
+    <el-form class="xl-login-form" ref="loginForm" :model="form" :rules="rules" @keyup.enter="emits('keyEnter')">
+        <el-form-item prop="name" :error="nameError">
+            <el-input v-model="form.name" placeholder="用户名">
+                <template #prepend>
+                    <el-icon>
+                        <User />
+                    </el-icon>
+                </template>
+            </el-input>
+        </el-form-item>
+        <el-form-item prop="password" :error="passwordError">
+            <el-input type="password" v-model="form.password" placeholder="密码">
+                <template #prepend>
+                    <el-icon>
+                        <Lock />
+                    </el-icon>
+                </template>
+            </el-input>
+        </el-form-item>
+        <el-form-item class="captcha" prop="captcha" :error="captchaError">
+            <el-input v-model="form.captcha" type="number" size="large" placeholder="验证码">
+                <template #prepend>
+                    <el-icon>
+                        <CircleCheck />
+                    </el-icon>
+                </template>
+            </el-input>
+            <img :src="captchaUrl" @click="Captcha.refresh" alt="验证码" />
+        </el-form-item>
+    </el-form>
+</template>
+
+
+<style lang="less">
+.xl-login-form {
+    .el-input{
+        height:40px;
+    }
+    .captcha {
+        width: 100%;
+
+        .el-form-item__content {
+            width: 100%;
+            display: flex;
+
+            .el-input {
+                flex: 3;
+            }
+
+            img {
+                flex: 2;
+                border: 1px solid rgb(220, 220, 220);
+                width: 152px;
+                height: 40px;
+                margin-left: 10px;
+            }
+        }
+
+    }
+}
+</style>