@xilonglab/vue-main 0.7.8

package/packages/dialog/XlImagePreviewDialog.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineOptions({ name: "XlImagePreviewDialog" })
+
+import { ref } from 'vue'
+
+
+const props = defineProps({
+    url: {
+        type: String,
+        default: ''
+    }
+})
+
+const visible = ref(false)
+
+
+defineExpose({
+    show() {
+        visible.value = true
+    }
+})
+</script>
+
+
+<template>
+    <el-dialog class="xl-image-preview-dialog xl-dialog" v-model="visible" width="50%">
+        <el-image :src="url"></el-image>
+    </el-dialog>
+</template>
+  
+
+  
+<style lang="less"></style>
+  
+  
+  
+         
+  
+  
+  

package/packages/dialog/XlMessageDialog.vue

@@ -0,0 +1,74 @@
+<script setup>
+defineOptions({ name: "XlMessageDialog" })
+
+import { ref } from 'vue'
+
+const props = defineProps({
+    l: {
+        type: String,
+        default: "",
+    },
+    handler: {
+        type: Function,
+        default: ()=>{},
+    }
+});
+
+const emits = defineEmits(['confirm', 'cancel'])
+
+
+const visible = ref(false)
+
+const onConfirm = () => {
+    hide()
+    emits('confirm')
+    props.handler()
+}
+
+const onCancel = () => {
+    hide()
+    emits('cancel')
+}
+
+const show = () => {
+    visible.value = true
+}
+
+const hide = () => {
+    visible.value = false
+}
+
+
+defineExpose({ show })
+</script>
+
+
+<template>
+    <el-dialog class="xl-message-dialog xl-dialog" v-model="visible" title="提示" width="30%">
+        <div class="message">
+            <span>{{ l }}</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="onCancel">取消</el-button>
+            <el-button type="primary" @click="onConfirm">确定</el-button>
+        </div>
+    </el-dialog>
+</template>
+    
+    
+<style lang="less">
+.xl-message-dialog {
+    .el-dialog__header {
+        text-align: left;
+    }
+
+    .message {
+        text-align: left;
+    }
+
+    .dialog-footer {
+        text-align: center;
+        margin-top: 20px;
+    }
+}
+</style>

package/packages/dialog/XlReviewDialog.vue

@@ -0,0 +1,115 @@
+<script setup>
+defineOptions({ name: "XlReviewDialog" })
+
+import { ref } from 'vue';
+
+
+const emits = defineEmits(['confirm', 'pass', 'reject', 'close'])
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: "提示",
+    },
+    width: {
+        default: 30,
+    },
+    validate: {
+        type: Function,
+        default() {
+            return true
+        }
+    },
+    passCallback: {
+        type: Function,
+        default: async () => 0
+    },
+    rejectCallback: {
+        type: Function,
+        default: async () => 0
+    }
+});
+
+const visible = ref(false);
+
+const onPass = async () => {
+    const validation = await props.validate()
+    if (validation) {
+        emits('confirm');
+        const error = await props.passCallback()
+        if (!error) {
+            hide();
+            emits('pass');
+        }
+    }
+};
+
+const onReject = async () => {
+    const error = await props.rejectCallback()
+    if (!error) {
+        hide();
+        emits('reject');
+    }
+};
+
+const onClose = () => {
+    emits('close');
+};
+
+const show = () => {
+    visible.value = true;
+};
+
+const hide = () => {
+    visible.value = false;
+};
+
+defineExpose({ show })
+</script>
+
+
+<template>
+    <el-dialog class="xl-review-dialog xl-dialog" :title="title" v-model="visible" @close="onClose" :width="width + '%'">
+        <slot />
+        <div style="text-align: center; padding: 10px; margin-top: 20px">
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="onPass">通过</el-button>
+                <el-button type="danger" @click="onReject">驳回</el-button>
+            </span>
+        </div>
+    </el-dialog>
+</template>
+
+
+<style lang="less">
+.xl-review-dialog {
+    text-align: left;
+
+    border-radius: 10px 10px 7px 7px !important;
+    padding: 0;
+
+    .el-dialog__header {
+        border-radius: 7px 7px 0 0;
+        padding: 14px 20px 10px;
+        background: transparent linear-gradient(90deg, #073052 0%, rgb(100, 100, 100) 100%) 0% 0% no-repeat padding-box !important;
+
+        .el-dialog__headerbtn {
+            top: 14px;
+        }
+
+        .el-dialog__title,
+        .el-dialog__close {
+            color: rgb(245, 245, 245) !important;
+        }
+
+        .el-dialog__headerbtn {
+            top: 3px !important;
+        }
+
+    }
+
+    .el-dialog__body {
+        padding: 10px 10px 5px 10px;
+    }
+}
+</style>

package/packages/dialog/XlStateDialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineOptions({ name: "XlStateDialog" })
+
+const props = defineProps({
+    dialogRef: {},
+    state: {},
+    ruleMap: {},
+    handler: {},
+    title: {},
+    labelWidth: {}
+})
+</script>
+
+<template>
+    <xl-form-dialog :ref="dialogRef" :title="title" :label-width="labelWidth" :data="state"
+        :ruleMap="ruleMap" :callback="handler">
+        <slot/>
+    </xl-form-dialog>
+</template>
+
+<style lang="less"></style>

package/packages/form/XlCascader.vue

@@ -0,0 +1,46 @@
+<script setup>
+defineOptions({ name: "XlCascader" })
+
+import { computed } from 'vue';
+
+
+const props = defineProps({
+    tmp: {
+        type: String,
+        default: "",
+    },
+    options: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    width: {
+        default: 300,
+    },
+})
+
+const emits = defineEmits(['change'])
+
+const value = computed({
+    get() {
+        return props.tmp.split("/");
+    },
+    set(data) {
+        emits('change', data.join("/"));
+    },
+});
+</script>
+
+
+<template>
+    <el-cascader class="xl-cascader" v-model="value" :options="options" :placeholder="placeholder"
+        :style="{ width: width + 'px' }"></el-cascader>
+</template>
+
+
+<style></style>

package/packages/form/XlCheckbox.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineOptions({ name: "XlCheckbox" })
+
+import { ref, computed } from 'vue';
+
+
+const props = defineProps({
+    tmp: {
+        type: Array,
+        default: () => [],
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    max: {
+        type: Number,
+        default: 1,
+    },
+});
+
+
+const emits = defineEmits(['change']);
+
+
+const value = computed({
+    get() {
+        return props.tmp;
+    },
+    set(data) {
+        emits('change', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-checkbox-group class="xl-checkbox-group" v-model="value" :max="max">
+        <el-checkbox class="xl-checkbox" v-for="(option, index) in options" :key="index" :label="option.value">{{
+            option.label }}</el-checkbox>
+    </el-checkbox-group>
+</template>
+    
+    
+<style></style>

package/packages/form/XlDate.vue

@@ -0,0 +1,54 @@
+<script setup>
+defineOptions({ name: "XlDate" })
+
+import { computed } from 'vue';
+
+
+const props = defineProps({
+    l: {
+        type: String,
+        default: "",
+    },
+    placeholder: {
+        type: String,
+        default: "选择日期",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    tmp: {
+        type: String,
+        default: "",
+    },
+    width: {
+        default: 100,
+    },
+});
+
+const emits = defineEmits(['change'])
+
+const value = computed({
+    get() {
+        return props.tmp;
+    },
+    set(data) {
+        emits('change', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-date-picker class="xl-date xl-form-item" type="date" :placeholder="l?l:placeholder" format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD" v-model="value" :disabled="disabled" clearable :style="{ width: `${width}px` }" />
+</template>
+
+
+<style lang="less">
+.xl-date {
+    .el-input__prefix {
+        display: none !important;
+    }
+}
+</style>

package/packages/form/XlFormCol.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineOptions({ name: "XlFormCol" })
+
+const props = defineProps({
+    span: {},
+    l: {},
+    p: {}
+})
+</script>
+
+<template>
+    <el-col :span="span">
+        <el-form-item :label="l" :prop="p">
+            <slot />
+        </el-form-item>
+    </el-col>
+</template>
+
+<style lang="less"></style>

package/packages/form/XlFormRow.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineOptions({ name: "XlFormRow" })
+
+const props = defineProps({
+    l: {},
+    p: {}
+})
+</script>
+
+<template>
+    <el-row>
+        <el-col :span="24">
+            <el-form-item :label="l" :prop="p">
+                <slot />
+            </el-form-item>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="less"></style>

package/packages/form/XlImageInput.vue

@@ -0,0 +1,127 @@
+<script setup>
+defineOptions({ name: "XlImageInput" })
+
+import { ref, computed } from 'vue'
+const conversion = require('image-conversion')
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        default: "",
+    },
+    api: {
+        type: Function,
+        default: () => ({})
+    },
+    width: {
+        default: 635
+    },
+    height: {
+        default: 750
+    },
+    headers: {
+        type: Object,
+        default: () => ({})
+    },
+    params: {
+        type: Object,
+        default: () => ({})
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    compress: {
+        default: 0,
+    },
+    accept: {
+        type: String,
+        default: ''
+    },
+})
+
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+
+
+const loading = ref(false)
+
+
+function beforeUpload() {
+    loading.value = true
+}
+
+function onSuccess(data, file, filelist) {
+    loading.value = false;
+    emits('update:modelValue', data)
+}
+
+async function upload(option) {
+    let formData = new FormData();
+    const { api, params } = props
+    let { file } = option
+
+    if (props.compress) {
+        const res = await conversion.compress(file, props.compress)
+        file = new File([res], file.name, { lastModified: Date.now() })
+    }
+
+    formData.append("file", file);
+    formData.append("filename", file.name);
+    for (let key in params) {
+        formData.append(key, params[key]);
+    }
+    return api(formData);
+}
+</script>
+
+
+<template>
+    <el-upload class="xl-image-input" action="" v-loading="loading" :headers="headers" :http-request="upload"
+        :before-upload="beforeUpload" :on-success="onSuccess" :show-file-list="false" :disabled="disabled"
+        :accept="props.accept">
+        <img v-if="value" class="image" :src="`https://storage.heinz97.top/${value}`"
+            :style="`max-width: ${width}px;max-height:${height}px`" />
+        <el-icon v-else class="icon" :style="`width: ${width}px;height:${height}px`">
+            <Plus />
+        </el-icon>
+    </el-upload>
+</template>
+  
+  
+<style lang="less">
+.xl-image-input {
+
+    .el-upload {
+        border: 1px dashed var(--el-border-color);
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: var(--el-transition-duration-fast);
+
+        &:hover {
+            border-color: var(--el-color-primary);
+        }
+    }
+
+    .image {
+        display: block;
+    }
+
+    .el-icon.icon {
+        font-size: 28px;
+        color: #8c939d;
+        text-align: center;
+    }
+}
+</style>

package/packages/form/XlInput.vue

@@ -0,0 +1,53 @@
+<script setup>
+defineOptions({ name: "XlInput" })
+
+import { computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    l: {
+        type: String,
+        default: "",
+    },
+    modelValue: {
+        default: "",
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    type: {
+        type: String,
+        default: "text",
+    },
+    disabled: {
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+});
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-input class="xl-input xl-form-item" v-model="value" :placeholder="l?l:placeholder" :type="type" :disabled="disabled"
+        :style="{ width: `${width}px` }"></el-input>
+</template>
+
+
+<style scoped>
+.xl-input {}
+</style>

package/packages/form/XlMapSelect.vue

@@ -0,0 +1,72 @@
+<script setup>
+defineOptions({ name: "XlMapSelect" })
+
+import { ref, computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        default: '',
+    },
+    values: {
+        type: Array,
+        default: () => [],
+    },
+    map: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
+    allowCreate: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+      <el-select class="xl-map-select xl-form-item" v-model="value" :placeholder="placeholder"
+        :disabled="disabled" :style="{ width: `${width}px` }" :multiple="multiple" clearable>
+        <el-option v-for="val in values" :key="val" :label="map[val]" :value="val"/>
+    </el-select>
+</template>
+
+
+<style lang="less" scoped>
+.el-select {
+    margin: 3px 0;
+}
+
+.el-input__inner {
+    padding: 0 5px !important;
+}
+</style>

package/packages/form/XlNumber.vue

@@ -0,0 +1,11 @@
+<script setup>
+defineOptions({ name: "XlNumber" })
+</script>
+
+
+<template>
+    <xl-input type="number" v-bind="$props" />
+</template>
+
+
+<style scoped></style>