bri-components 1.0.5 → 1.1.0

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

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`DshNumber ycFormItem control-${mode}`">
+    <div :class="`DshNumber`">
         <!-- 编辑模式 组件无clearable -->
         <template v-if="finalCanEdit">
             <BriInputNumber
@@ -33,26 +33,12 @@
                 v-if="selfPropsObj._showProgress"
                 :percent="value[controlKey] > 100 ? 100 : toDecimal(value[controlKey])"
             />
-            <Ctooltip
+            <control-show
                 v-else
-                placement="top"
-                :transfer="true"
-                :content="String(showVal)"
-                :class="commonClass"
-            >
-                <span
-                    v-if="$isFormItemHasData(showVal)"
-                    class="dsh-ellipsis hb-show-text"
-                >
-                    {{ showVal }}
-                </span>
-                <span
-                    v-else
-                    class="dsh-ellipsis hb-nodata-text"
-                >
-                    <span>暂无内容</span>
-                </span>
-            </Ctooltip>
+                :showVal="String(showVal)"
+                :propsObj="selfPropsObj"
+                :isUnit="isUnit"
+            ></control-show>
         </template>
     </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
     <!-- 组件无clearable -->
-    <div :class="`DshNumberange ycFormItem control-${mode}`">
+    <div class="DshNumberange">
         <!-- 最小值 -->
         <div class="DshNumberange-left">
             <BriInputNumber

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

@@ -32,7 +32,13 @@
             <div
                 v-else
                 class="DshPackage-nodata"
-            ><span>暂无数据</span>
+            >
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
             </div>
         </div>
     </div>

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

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`DshSelect ycFormItem control-${mode}`">
+    <div class="DshSelect">
         <!-- optionKind值 'flat'、'dropdown' -->
         <template v-if="canEdit">
             <!-- 平铺 -->
@@ -82,7 +82,6 @@
 
         <Ctooltip
             v-else
-            :class="commonClass"
             :content="valStr"
             maxWidth="200"
             placement="top"
@@ -91,9 +90,12 @@
             <div
                 v-if="curSelectItem"
                 class="DshCheckbox-value-wrapper"
+                :style="{
+                    justifyContent: flatShowAlign
+                }"
             >
                 <span
-                    class="DshCheckbox-value hb-show-color-text dsh-ellipsis"
+                    class="DshCheckbox-value dsh-ellipsis"
                     :style="{
                         background: selfPropsObj._useColor ? getBgColor(curSelectItem.color, 0.1) : '',
                         color: selfPropsObj._useColor ? getColor(curSelectItem.color) : ''
@@ -102,9 +104,14 @@
             </div>
             <div
                 v-else
-                class="hb-nodata-text dsh-ellipsis"
+                class="control-nodata-text dsh-ellipsis"
             >
-                <span>暂无内容</span>
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
             </div>
         </Ctooltip>
 
@@ -177,6 +184,9 @@
             },
             showVal () {
                 return this.valStr;
+            },
+            flatShowAlign () {
+                return !this.propsObj._align || this.propsObj._align == "left" || !this.isUnit ? "flex-start" : this.propsObj._align == "right" ? "flex-end" : "center";
             }
         },
         created () {

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

@@ -1,7 +1,6 @@
 <template>
     <div
-        class="DshSwitch ycFormItem"
-        :class="`control-${mode}`"
+        class="DshSwitch"
         :style="{ textAlign: propsObj._textAlign, width: '100%' }"
     >
         <!-- 组件无clearable -->
@@ -26,9 +25,6 @@
             maxWidth="200"
             :content="showVal"
         >
-            <!--  <span class="dsh-ellipsis" :class="`control-${mode}-text`">
-                {{ showVal }}
-            </span> -->
             <div
                 class="DshCheckbox-value-wrapper"
                 :style="{
@@ -39,7 +35,7 @@
                     }"
             >
                 <span
-                    class="DshCheckbox-value hb-show-color-text dsh-ellipsis"
+                    class="DshCheckbox-value control-show-color-text dsh-ellipsis"
                     :style="{
                         background: value[controlKey] ? '#ECF3FD' : '#FEF6EB',
                         color: value[controlKey] ? '#3D84EE' : '#F4A135'

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

@@ -1,7 +1,6 @@
 <template>
     <div class="YSerialNumber">
         <dsh-input
-            :mode="canEdit ? 'default' : mode"
             :value="value"
             :propsObj="propsObj"
             :canEdit="false"

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

@@ -11,12 +11,10 @@
         v-else
         :class="[
             prefixCls,
-            'ycFormItem',
             'ZUpload',
             `ZUpload-${showType}`,
-            { 'ZUpload-readonly': mode === 'default' && $isReadonly(canEdit, propsObj) },
-            { 'ZUpload-disabled': mode === 'default' && $isDisabled(canEdit, propsObj) },
-            commonClass
+            { 'ZUpload-readonly': $isReadonly(canEdit, propsObj) },
+            { 'ZUpload-disabled': $isDisabled(canEdit, propsObj) },
         ]"
     >
         <!-- 上传 -->
@@ -55,11 +53,11 @@
                         <span v-else-if="showType=='old'">{{ percent }}%</span>
                     </i-circle>
                     <template v-else>
-                        <Icon
-                            v-if="['inline'].includes(showType)"
-                            custom="bico-font bico-upload1"
-                        />
-                        <span>上传</span>
+                        <dsh-icons
+                            :list="$getOperationList([propsObj._fileType === 'image' ? 'add' : 'upload'])"
+                            @click="handleClick"
+                        ></dsh-icons>
+                        <span v-if="showType!='inline'">点击上传{{ propsObj._fileType === 'image' ? "图片" : "文件" }}</span>
                     </template>
                 </div>
             </slot>
@@ -74,6 +72,7 @@
                 :isReadonly="$isReadonly(canEdit, propsObj)"
                 :isDisabled="$isDisabled(canEdit, propsObj)"
                 :finalCanEdit="finalCanEdit"
+                :isUnit="isUnit"
                 @on-file-remove="handleRemove"
                 @on-file-preview="handlePreview"
             ></upload-list>
@@ -171,6 +170,14 @@
         },
         data () {
             return {
+                operationMap: {
+                    upload: {
+                        customIcon: "bico-upload1"
+                    },
+                    add: {
+                        icon: "md-add"
+                    }
+                },
                 prefixCls: prefixCls,
                 dragOver: false,
                 tempIndex: 1
@@ -229,7 +236,6 @@
         },
         methods: {
             handleClick () {
-                if (this.itemDisabled) return;
                 this.$refs.input.click();
             },
             handleChange (e) {

package/src/components/controls/base/ZUpload/upload-list.vue

@@ -56,7 +56,7 @@
                 class="uploadList-nodata"
             >
                 <Icon type="ios-time" />
-                <span>未上传文件</span>
+                <span>{{ noText }}</span>
             </div>
         </template>
         <!-- 自定义新的展示方式 -->
@@ -90,7 +90,7 @@
                     ></dsh-icons>
                 </div>
             </div>
-            <span v-else>未上传文件</span>
+            <span v-else class="uploadList-inline-nodata">{{ noText }}</span>
         </template>
     </div>
 </template>
@@ -114,7 +114,8 @@
             isReadonly: Boolean,
             isDisabled: Boolean,
             finalCanEdit: Boolean,
-            propsObj: Object
+            propsObj: Object,
+            isUnit: Boolean
         },
         computed: {
             operationMap () {
@@ -145,15 +146,19 @@
             },
             imageResizeConfig () {
                 return {};
-                // this.propsObj._imageResizeConfig || (this.showType == "inline" ? {
-                //     m: "lfit",
-                //     w: 34,
-                //     h: 37
-                // } : {
-                //     m: "lfit",
-                //     w: 76,
-                //     h: 50
-                // });
+            },
+            noText () {
+                if (this.files && this.files.length) {
+                    return "";
+                } else {
+                    if (this.finalCanEdit) {
+                        return `未上传${this.propsObj._fileType === "image" ? "图片" : "文件"} `;
+                    } else if (this.isUnit) {
+                        return "-";
+                    } else {
+                        return "暂无内容";
+                    }
+                }
             }
         },
         data () {

package/src/components/controls/base/ZUpload/uploadMixin.js

@@ -97,11 +97,7 @@ export default {
                 }
             })
                 .then(response => {
-                    const newResponse = {
-                        data: response,
-                        res: {}
-                    };
-                    this.handleSuccess && this.handleSuccess(newResponse, newResponse.data, file);
+                    this.handleSuccess && this.handleSuccess(response, response.data, file);
                     callback && callback(response.data);
                 }).catch(error => {
                     this.handleError && this.handleError(error, {}, file);

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

@@ -0,0 +1,52 @@
+<template>
+    <div class="controlShow">
+        <Ctooltip
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+        >
+            <span
+                v-if="$isFormItemHasData(showVal)"
+                class="dsh-ellipsis controlShow-val"
+            >
+                {{ showVal }}
+            </span>
+            <span
+                v-else
+                class="controlShow-nodata dsh-ellipsis"
+            >
+                {{noDataText}}
+            </span>
+        </Ctooltip>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: "controlShow",
+        props: {
+            showVal: String,
+            propsObj: {
+                type: Object,
+                default: () => {
+                    return {};
+                }
+            },
+            isUnit: Boolean
+        },
+        data () {
+            return {
+            };
+        },
+        computed: {
+            noDataText () {
+                return this.isUnit ? "-" : "暂无数据";
+            }
+        },
+        created () {
+        },
+        methods: {
+        }
+    };
+</script>

package/src/components/controls/base/textMultiple/DshTextMultiple.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="DshTextMultiple ycFormItem">
+    <div class="DshTextMultiple">
         <Input
             class="DshTextMultiple-control"
             v-model="text"

package/src/components/controls/controlMap.js

@@ -35,6 +35,8 @@ const componentNameMap = {
     tag: "DshDivider",
     labels: "DshLabels",
     package: "DshPackage",
+    flatTable: "flatTable",
+    cascaderTable: "cascaderTable",
 
     back: "DshBack",
     undefined: "DshUndeveloped",
@@ -62,6 +64,8 @@ const pathMap = {
         DshDivider: "./base/DshDivider.vue",
         DshLabels: "./base/DshLabels.vue",
         DshPackage: "./base/DshPackage.vue",
+        flatTable: "./senior/flatTable.vue",
+        cascaderTable: "./senior/cascaderTable",
 
         DshBack: "./base/DshBack.vue",
         DshUndeveloped: "./base/DshUndeveloped.vue"

package/src/components/controls/controlMixin.js

@@ -1,9 +1,5 @@
 export default {
     props: {
-        mode: {
-            type: String,
-            default: "default"
-        },
         canEdit: {
             type: Boolean,
             default: true
@@ -19,6 +15,10 @@ export default {
             default () {
                 return {};
             }
+        },
+        isUnit: {
+            type: Boolean,
+            default: false
         }
     },
     data () {
@@ -57,15 +57,21 @@ export default {
                 _clearable: this.finalCanEdit && (this.propsObj._clearable === undefined ? true : this.propsObj._clearable)
             };
         },
-        // 不同mode模式下readOnly 和disabled样式名
+        currentVal () {
+            return this.value[this.controlKey];
+        },
         commonClass () {
-            let commonClass = `control-${this.mode}-${this.$isReadonly(this.canEdit, this.propsObj)
-                ? "readonly"
-                : this.$isDisabled(this.canEdit, this.propsObj)
-                    ? "disabled"
-                    : "edit"
-            }`;
-            return commonClass;
+            return {
+                "dsh-ellipsis": true,
+                "control-edit": this.finalCanEdit,
+                "control-disabled": this.$isDisabled(this.canEdit, this.propsObj),
+                // "control-readonly": this.$isReadonly(this.canEdit, this.propsObj),
+                "control-show": !this.canEdit,
+                "control-notext": !this.currentVal
+            };
+        },
+        showText () {
+            return this.currentVal || (this.isUnit ? "-" : "暂无内容");
         }
     },
     methods: {

package/src/components/controls/senior/cascaderTable.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="cascaderTable" :id="`cascaderTable${controlKey}`">
+        <!-- 表格查看 -->
+        <span v-if="isUnit" class="cascaderTable-unit">
+            <dsh-icons
+                :list="$getOperationList(['link'])"
+            ></dsh-icons>
+            <span class="cascaderTable-unit-text">
+                {{ value[controlKey] && value[controlKey].tree.length || 0 }}行
+            </span>
+        </span>
+
+        <!-- 配置端默认模式-->
+        <dsh-btn-modal v-else-if="propsObj._key === '_default'">
+            <dsh-cascader-table
+                :canEdit="finalCanEdit"
+                :treeColumns="treeColumns"
+                :subColumns="subColumns"
+                :data="value[controlKey]"
+                :propsObj="propsObj"
+                @change="change"
+            ></dsh-cascader-table>
+        </dsh-btn-modal>
+
+        <template v-else>
+            <!-- 操作按钮 -->
+            <dsh-buttons
+                class="cascaderTable-btns"
+                itemClass="cascaderTable-btns-item"
+                :list="$getOperationList(operationFieldList)"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+
+            <dsh-cascader-table
+                v-if="value[controlKey]"
+                useCol
+                :canEdit="finalCanEdit"
+                :treeColumns="treeColumns"
+                :subColumns="subColumns"
+                :data="value[controlKey]"
+                :propsObj="propsObj"
+                @change="change"
+            ></dsh-cascader-table>
+
+            <dsh-modal
+                v-model="isEnlarge"
+                mode="custom"
+                :propsObj="modalPropsObj"
+            >
+                <dsh-cascader-table
+                    v-if="value[controlKey] && isEnlarge"
+                    useCol
+                    :canEdit="finalCanEdit"
+                    :treeColumns="treeColumns"
+                    :subColumns="subColumns"
+                    :data="value[controlKey]"
+                    :propsObj="propsObj"
+                    @change="change"
+                ></dsh-cascader-table>
+            </dsh-modal>
+        </template>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "cascaderTable",
+        mixins: [controlMixin],
+        components: {},
+        props: {},
+        data () {
+            return {
+                operationMap: {
+                    canExport: {
+                        name: "导出",
+                        type: "canExport",
+                        icon: "md-share-alt",
+                        size: "small",
+                        btnType: "text",
+                        event: "openExportModal"
+                    },
+                    canEnlarge: {
+                        name: "全屏展示",
+                        type: "canEnlarge",
+                        icon: "md-expand",
+                        size: "small",
+                        btnType: "text",
+                        event: "enlarge"
+                    },
+                    link: {
+                        customIcon: "bico-Cascadetable"
+                    }
+                },
+                isEnlarge: false,
+                timer: null
+            };
+        },
+        computed: {
+            modalPropsObj () {
+                return {
+                    title: this.propsObj._name,
+                    fullscreen: true,
+                    showSlotClose: false,
+                    closable: true
+                };
+            },
+            operationFieldList () {
+                return this.propsObj._isExport ? ["canExport", "canEnlarge"] : ["canEnlarge"];
+            },
+            treeColumns () {
+                return this.value[this.controlKey]._treeForm
+                    ? this.value[this.controlKey]._treeForm
+                    : this.propsObj._treeForm;
+            },
+            subColumns () {
+                return this.propsObj._subForm;
+            }
+        },
+        created () {},
+        methods: {
+            // 发生变动
+            change (...params) {
+                this.$emit("change", ...params);
+            },
+
+            // 导出点击
+            openExportModal (operationItem) {
+                operationItem.disabled = true;
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "exportCascaderTableExcel",
+                        params: {
+                            modKey: this.modKey
+                        }
+                    },
+                    params: {
+                        _key: this.controlKey,
+                        _id: this.value._id
+                    },
+                    callback: data => {
+                        setTimeout(() => {
+                            operationItem.disabled = false;
+                        }, 500);
+                        this.timer = setInterval(this.getTransitStatus(data.jobId, data.excel_url), 1000);
+                    }
+                });
+            },
+            getTransitStatus (id, url) {
+                let that = this;
+                return function () {
+                    that.getJobStatus(id, url);
+                };
+            },
+            getJobStatus (id, url) {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "getJobStatus"
+                    },
+                    params: {
+                        jobId: id
+                    },
+                    callback: data => {
+                        if (data.status === "completed") {
+                            clearInterval(this.timer);
+                            window.location.href = data.url;
+                        } else if (data.status === "failed") {
+                            clearInterval(this.timer);
+                            // this.exportBtnLoading = false;
+                            this.$Message.info({ content: "操作失败，请稍后再试" });
+                        }
+                    },
+                    error: data => {
+                        this.timer = null;
+                    }
+                });
+            },
+
+            // 打开全屏模态框
+            enlarge () {
+                this.isEnlarge = true;
+            }
+        }
+    };
+</script>