bri-components 1.0.0

package/src/components/controls/base/DshSelect.vue

@@ -0,0 +1,231 @@
+<template>
+    <div :class="`DshSelect ycFormItem control-${mode}`">
+        <!-- optionKind值 'flat'、'dropdown' -->
+        <template v-if="canEdit">
+            <!-- 平铺 -->
+            <RadioGroup
+                v-if="['flat', 'button'].includes(showType)"
+                :class="{
+                    'DshSelect-radioGroup': true,
+                    'DshSelect-radioGroup-useColor': selfPropsObj._useColor,
+                    'DshSelect-radioGroup-readonly': $isReadonly(canEdit, selfPropsObj),
+                    'DshSelect-radioGroup-disabled': $isDisabled(canEdit, selfPropsObj),
+                    'DshSelect-radioGroup-scroll': selfPropsObj._span < 24 && !selfPropsObj._br
+                }"
+                v-model="value[controlKey]"
+                :type="radioGroupType"
+                @on-change="change"
+            >
+                <template v-if="listData.length">
+                    <Radio
+                        v-for="(item, index) in listData"
+                        :key="index"
+                        :class="getColorClass(item.color)"
+                        :style="{
+                            backgroundColor: selfPropsObj._useColor ? getBgColor(item.color) : undefined,
+                            color:selfPropsObj._useColor ? getColor(item.color) : undefined,
+                        }"
+                        :label="item._key"
+                        :disabled="item._disabled || !finalCanEdit"
+                        :border="selfPropsObj._useColor"
+                        @click.native="cancelSelect(item)"
+                    >
+                        <span @click.stop="clickOpenTip(item)">
+                            {{ item.name || item._name }}
+                        </span>
+                    </Radio>
+
+                </template>
+
+                <div
+                    v-else
+                    class="dsh-subtip"
+                    style="backgroundColor: #f3f3f3;"
+                >-- 无选择项 --</div>
+            </RadioGroup>
+
+            <!-- 下拉 -->
+            <Select
+                v-else
+                v-model="value[controlKey]"
+                :class="{
+                    'DshSelect-select-readonly': $isReadonly(canEdit, selfPropsObj),
+                    'DshSelect-select-disabled': $isDisabled(canEdit, selfPropsObj)
+                }"
+                :placeholder="selfPropsObj._placeholder"
+                :multiple="selfPropsObj._multiple"
+                :disabled="!finalCanEdit"
+                :clearable="selfPropsObj._clearable"
+                :filterable="selfPropsObj._filterable"
+                :size="selfPropsObj._size"
+                :transfer="selfPropsObj._transfer"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                @on-change="change"
+            >
+                <!-- </Option>必须和输出内容在一行，否则出现空格导致_filterable出bug -->
+                <Option
+                    v-for="(item, index) in listData"
+                    :key="index"
+                    :value="item._key"
+                    :disabled="item._disabled || !finalCanEdit"
+                >
+                    <Icon
+                        v-if="item.icon || item.customIcon"
+                        :type="item.icon"
+                        :custom="item.customIcon ? `bico-font ${item.customIcon}` : undefined"
+                        :color="item.color"
+                        :size="item.size || 20"
+                    />{{ item.name || item._name }}
+                </Option>
+            </Select>
+        </template>
+
+        <Ctooltip
+            v-else
+            :class="commonClass"
+            :content="valStr"
+            maxWidth="200"
+            placement="top"
+            :transfer="true"
+        >
+            <div
+                v-if="curSelectItem"
+                class="DshCheckbox-value-wrapper"
+            >
+                <span
+                    class="DshCheckbox-value hb-show-color-text dsh-ellipsis"
+                    :style="{
+                        background: selfPropsObj._useColor ? getBgColor(curSelectItem.color, 0.1) : '',
+                        color: selfPropsObj._useColor ? getColor(curSelectItem.color) : ''
+                    }"
+                >{{ showVal }}</span>
+            </div>
+            <div
+                v-else
+                class="hb-nodata-text dsh-ellipsis"
+            >
+                <span>暂无内容</span>
+            </div>
+        </Ctooltip>
+
+        <!-- tip项弹框提示 -->
+        <dsh-render :render="tipModalRender"></dsh-render>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+    import selectMixin from "./selectMixin.js";
+    import { resourceData } from "../../../datas/index.js";
+
+    export default {
+        name: "DshSelect",
+        mixins: [controlMixin, selectMixin],
+        props: {},
+        data () {
+            return {
+                flag: false,
+                initListData: [],
+                getBgColor: color => {
+                    let curColor = this.colorMap[color] || this.colorMap["color-1"];
+                    return this.$getColor(curColor, 0.1);
+                },
+                getColor: color => {
+                    return this.colorMap[color] || this.colorMap["color-1"];
+                },
+                getColorClass: color => {
+                    return this.colorMap[color] ? color : "color-1";
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _filterable: true,
+                    _transfer: true,
+                    _data: [],
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            showType () {
+                return this.selfPropsObj._optionKind;
+            },
+            radioGroupType () {
+                return this.showType === "button" ? "button" : undefined;
+            },
+            colorMap () {
+                return this.selfPropsObj.colorMap || resourceData.colorMap;
+            },
+
+            listData () {
+                const listData = (this.selfPropsObj._data || []).concat(this.initListData);
+                if (this.$dataType(this.selfPropsObj._filterFunc, "function")) {
+                    return this.selfPropsObj._filterFunc(listData, this.selfPropsObj, this.value);
+                } else {
+                    return listData;
+                }
+            },
+            curSelectItem () {
+                return this.listData.find(item => item._key === this.value[this.controlKey]);
+            },
+            valStr () {
+                return this.curSelectItem
+                    ? this.curSelectItem.name || this.curSelectItem._name
+                    : "";
+            },
+            showVal () {
+                return this.valStr;
+            }
+        },
+        created () {
+            this.initData();
+        },
+        methods: {
+            initData () {
+                if (this.selfPropsObj._customData && this.selfPropsObj._customData.length) {
+                    this.selfPropsObj._customData.forEach(item => {
+                        this.getListData(item);
+                    });
+                }
+            },
+            getListData (_customData) {
+                this.$https({
+                    url: _customData.url,
+                    params: {
+                        ..._customData.params
+                    },
+                    callback: data => {
+                        this.initListData.push(...data.list.map(item => (
+                            {
+                                _key: item[_customData._key || "_key"],
+                                name: item[_customData._name || "name"]
+                            }
+                        )));
+                    }
+                });
+            },
+            // 取消flat模式的选择项
+            cancelSelect (item) {
+                if (item._disabled !== true && this.selfPropsObj._clearable !== false) {
+                    if (item._key === this.value[this.controlKey]) {
+                        this.value[this.controlKey] = "";
+
+                        this.change();
+                    }
+                }
+
+                this.clickOpenTip(item);
+            },
+            change (...params) {
+                // 修复clear后值为undefined，数据库不更新数据bug
+                if (this.value[this.controlKey] == undefined) {
+                    this.value[this.controlKey] = "";
+                }
+
+                this.$emit("change", this.value[this.controlKey]);
+            }
+        }
+    };
+</script>

package/src/components/controls/base/DshSwitch.vue

@@ -0,0 +1,112 @@
+<template>
+    <div
+        class="DshSwitch ycFormItem"
+        :class="`control-${mode}`"
+        :style="{ textAlign: propsObj._textAlign, width: '100%' }"
+    >
+        <!-- 组件无clearable -->
+        <i-switch
+            v-if="finalCanEdit"
+            v-model="value[propsObj._key]"
+            :size="propsObj._size"
+            :disabled="!finalCanEdit"
+            @on-change="change"
+        >
+            <span
+                slot="open"
+                style="font-size: 12px;"
+            >{{ propsObj._openText }}</span>
+            <span slot="close">{{ propsObj._closeText }}</span>
+        </i-switch>
+        <!-- 查看 和 编辑下无编辑权限 -->
+        <Ctooltip
+            v-else
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+        >
+            <!--  <span class="dsh-ellipsis" :class="`control-${mode}-text`">
+                {{ showVal }}
+            </span> -->
+            <div
+                class="DshCheckbox-value-wrapper"
+                :style="{
+                        textAlign: propsObj._textAlign,
+                        flexGrow: 1,
+                        display: 'flex',
+                        justifyContent: getFlexLayout(propsObj._textAlign)
+                    }"
+            >
+                <span
+                    class="DshCheckbox-value hb-show-color-text dsh-ellipsis"
+                    :style="{
+                        background: value[controlKey] ? '#ECF3FD' : '#FEF6EB',
+                        color: value[controlKey] ? '#3D84EE' : '#F4A135'
+                    }"
+                >{{ showVal }}</span>
+            </div>
+        </Ctooltip>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshSwitch",
+        mixins: [controlMixin],
+        data () {
+            return {};
+        },
+        computed: {
+            showVal () {
+                return this.value[this.controlKey]
+                    ? this.propsObj._openText
+                    : this.propsObj._closeText;
+            }
+        },
+        created () {
+        },
+        methods: {
+            getFlexLayout (align) {
+                let map = {
+                    left: "flex-start",
+                    center: "center",
+                    right: "flex-end"
+                };
+                if (align) {
+                    return map[align];
+                } else {
+                    return "flex-start";
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshSwitch {
+
+    }
+</style>
+<style lang="less">
+    .DshSwitch {
+        .ivu-switch {
+            width: 50px;
+        }
+        .ivu-switch-checked:after {
+            left: 29px;
+        }
+        .ivu-switch-inner {
+            color: #fff;
+            font-size: 12px;
+            position: absolute;
+            left: auto;
+            right: 4px;
+        }
+        .ivu-switch-checked .ivu-switch-inner {
+            left: 3px;
+        }
+    }
+</style>

package/src/components/controls/base/DshUndeveloped.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="DshUndeveloped">
+        {{ tipText }}
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshUndeveloped",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            controlKey () {
+                return this.propsObj.__realKey__ || this.propsObj._key;
+            },
+            tipText () {
+                return this.propsObj.__realKey__
+                    ? `"${this.controlKey}"字段已被删除`
+                    : this.propsObj._type
+                        ? `"${this.controlKey}"字段的${this.propsObj._type}类型暂未开发`
+                        : `"${this.controlKey}"字段已被删除（或字段的_type丢失，此概率很小）`;
+
+            }
+        },
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less">
+    .DshUndeveloped {
+        width: 100%;
+    }
+</style>

package/src/components/controls/base/YSerialNumber.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="YSerialNumber">
+        <dsh-input
+            :mode="canEdit ? 'default' : mode"
+            :value="value"
+            :propsObj="propsObj"
+            :canEdit="false"
+        ></dsh-input>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "YSerialNumber",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    .YSerialNumber {
+        width: 100%;
+    }
+</style>
+<style lang="less">
+    .YSerialNumber {
+
+    }
+</style>

package/src/components/controls/base/ZUpload/YUploadImage.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="YUploadImage">
+        <div class="YUploadImage-set" ref="viewerImage">
+            <div
+                v-if="value[propsObj._key] || propsObj._default || percent"
+                :class="['YUploadImage-set-img', isAvatar ? 'YUploadImage-set-avatar' : '']"
+                :style="{
+                    backgroundImage: `url(${$imageResize(value[propsObj._key] || propsObj._default, imageResizeConfig)})`,
+                    borderRadius: propsObj.radius ? '50%' : ''
+                }"
+            >
+                <img :data-original="value[propsObj._key]" style="display:none">
+                <div v-if="value[propsObj._key] && propsObj._canAction" class="YUploadImage-set-action">
+                    <Icon class="YUploadImage-set-img-action" type="ios-eye-outline" size="16" @click.native="handlePreview"></Icon>
+                    <Icon class="YUploadImage-set-img-action" type="ios-trash-outline" size="16" @click.native="handleRemove"></Icon>
+                </div>
+                <!-- 上传进度 -->
+                <div  v-if="percent" class="YUploadImage-set-img-circle">
+                    <i-circle
+                        class="circle"
+                        :percent="percent"
+                        :stroke-color="percentColor"
+                    >
+                        <Icon v-if="percent == 100" type="ios-checkmark"></Icon>
+                        <span v-else>{{ percent }}%</span>
+                    </i-circle>
+                </div>
+
+            </div>
+            <div class="wrap">
+                <Button type="default" class="btn-cancel-outline z-default">点击上传</Button>
+                <input id="fileupload" class="file" :type="inputType" @change="setImage" />
+            </div>
+        </div>
+
+        <!-- 修改头像模态框 -->
+        <Modal
+            :title="propsObj._title || '修改头像'"
+            v-model="avatarModal"
+            class="bri-modal"
+            width="500"
+            :mask-closable="false"
+            :footer-hide="true"
+            @on-visible-change="visibleChange"
+        >
+            <div class="avatar-modal" style="width:400px;margin: 0 auto;">
+                <dsh-cropper
+                    style="width: 400px;height: 400px;"
+                    ref="cropper"
+                    :src="imgSrc"
+                    alt="Source Image"
+                    :cropmove="cropImage"
+                >
+                </dsh-cropper>
+                <div class="avatar-modal-footer bri-footer">
+                    <Button @click="cancelAvatarModal()">取消</Button>
+                    <Button type="primary" @click="photoSubmit()">保存</Button>
+                </div>
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    import uploadMixin from "./uploadMixin.js";
+    import Viewer from "viewerjs";
+
+    export default {
+        name: "YUploadImage",
+        mixins: [uploadMixin],
+        components: {},
+        props: {
+            value: Object,
+            propsObj: Object,
+            requestOssType: { // 上传的是阿里云还是本地
+                type: String,
+                default: "default"
+            },
+            isAvatar: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                // 头像
+                avatarModal: false,
+                inputType: "file",
+                imgSrc: "",
+                cropImg: ""
+            };
+        },
+        computed: {
+            imageResizeConfig () {
+                return this.propsObj._imageResizeConfig || {
+                    m: "fixed",
+                    w: 100,
+                    h: 100
+                };
+            },
+            finalRequestOssType () {
+                return this.propsObj._requestOssType || this.requestOssType || "default";
+            }
+        },
+        created () {
+        },
+        methods: {
+            // 打开修改头像
+            openAvatar () {
+                this.avatarModal = true;
+            },
+            // 关闭修改头像
+            cancelAvatarModal () {
+                this.avatarModal = false;
+                // this.inputType = "file";
+            },
+            // 头像模态框状态变化，关闭后改变input框类型，保证上传能够连续上传同一张图片
+            visibleChange (bool) {
+                if (!bool) {
+                    this.inputType = "file";
+                }
+            },
+            setImage (e) {
+                if (e.target.files.length != 0) {
+                    const file = e.target.files[0];
+                    if (!file.type.includes("image/")) {
+                        this.$Message.error("请选择一张图片");
+                        return;
+                    }
+                    if (typeof FileReader === "function") {
+                        const reader = new FileReader();
+                        if (this.propsObj._kind == "uploadImage") {
+                            reader.onload = (event) => {
+                                let data = event.target.result;
+                                this.inputType = "text";
+                                if (this.finalRequestOssType === "local") {
+                                    // base64转文件
+                                    const imgFile = this.dataURLtoFile(data, "");
+                                    this.handlePost(imgFile);
+                                } else {
+                                    data = data.split(",")[1];
+                                    let dataBuffer = Buffer.from(data, "base64");
+                                    this.handlePost(dataBuffer);
+                                }
+                            };
+                            reader.readAsDataURL(file);
+                        } else {
+                            reader.onload = (event) => {
+                                this.imgSrc = event.target.result;
+                                // rebuild cropperjs with the updated source
+                                this.$refs.cropper.replace(event.target.result);
+                                this.inputType = "text";
+                            };
+                            reader.readAsDataURL(file);
+                            this.avatarModal = true;
+                        }
+                    } else {
+                        alert("Sorry, FileReader API not supported");
+                    }
+                }
+            },
+            cropImage () {
+                // get image data for post processing, e.g. upload or setting image src
+                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+            },
+            // 获取裁剪后的图片，转成file
+            photoSubmit () {
+                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+                if (this.finalRequestOssType === "local") {
+                    // base64转文件
+                    const imgFile = this.dataURLtoFile(this.cropImg, "");
+                    this.handlePost(imgFile);
+                } else {
+                    let data = this.cropImg;
+                    data = data.split(",")[1];
+
+                    let dataBuffer = Buffer.from(data, "base64");
+                    this.handlePost(dataBuffer);
+                }
+
+                this.cancelAvatarModal();
+            },
+            // 将图片Base64 转成文件
+            dataURLtoFile (dataurl, filename) {
+                // 获取文件扩展名称
+                let arr = dataurl.split(",");
+                let mime = arr[0].match(/:(.*?);/)[1];
+                let extension = mime.split("/")[1];
+                let bstr = atob(arr[1]);
+                let n = bstr.length;
+                let u8arr = new Uint8Array(n);
+                while (n--) {
+                    u8arr[n] = bstr.charCodeAt(n);
+                }
+                return new File([u8arr], `${filename}.${extension}`, {type: mime});
+            },
+            handleSuccess (response, res) {
+                this.value[this.propsObj._key] = res.data.downloadUrl;
+                this.$emit("change", res);
+            },
+            handleError (err) {
+                alert(err);
+            },
+            // 点击文件预览
+            handlePreview (file) {
+                let viewerImage = this.$refs.viewerImage;
+                let viewer = new Viewer(viewerImage, {
+                    url: "data-original",
+                    hidden: function () {
+                        viewer.destroy();
+                    },
+                    loop: false,
+                    zIndex: 2147483647
+                });
+                viewer.show();
+            },
+            // 点击文件删除 - fileList服务器的数据列表
+            handleRemove (file) {
+                this.inputType = "file"; // 删除后可以重新上传
+                this.value[this.propsObj._key] = "";
+                this.change(this.value);
+            },
+            change (...params) {
+                this.$emit("change", ...params);
+            }
+        }
+    };
+</script>