bri-components 1.0.3 → 1.1.0

package/lib/styles/bundle.css

@@ -1,5 +1,3 @@
-@import "view-design/dist/styles/iview.css";
-
 @import "codemirror/lib/codemirror.css";
 @import "codemirror/theme/cobalt.css";
 @import "codemirror/theme/base16-light.css";

package/package.json

@@ -1,122 +1,123 @@
 {
-  "name": "bri-components",
-  "version": "1.0.3",
-  "author": "dengshanghui",
-  "description": "a component lib for vue project",
-  "main": "src/index.js",
-  "keywords": [
-    "editor",
-    "tinymce"
-  ],
-  "files": [
-    "lib",
-    "src"
-  ],
-  "license": "ISC",
-  "directories": {
-    "test": "test"
-  },
-  "private": false,
-  "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "start": "npm run dev",
-    "unit": "jest --config test/unit/jest.conf.js --coverage",
-    "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit && npm run e2e",
-    "lint": "eslint --fix --ext .js,.vue src example build config",
-    "build": "node build/build.js",
-    "lib:style": "gulp --gulpfile build/build-style.js",
-    "lib:dev": "webpack --config build/webpack.lib.dev.config.js",
-    "lib:prod": "webpack --config build/webpack.lib.prod.config.js"
-  },
-  "dependencies": {
-    "axios": "^0.23.0",
-    "bri-datas": "^1.0.4",
-    "jshint": "^2.12.0",
-    "minio": "^7.0.26",
-    "stream": "^0.0.2",
-    "view-design": "^4.6.0",
-    "viewerjs": "^1.10.2",
-    "vue-codemirror": "^4.0.6",
-    "vue-cropperjs": "^4.1.0",
-    "vuedraggable": "^2.24.1",
-    "wangeditor": "^4.7.5"
-  },
-  "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^8.2.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^21.0.2",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.22.0",
-    "chalk": "^2.0.1",
-    "chromedriver": "^2.27.2",
-    "compression-webpack-plugin": "^1.1.12",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-spawn": "^5.0.1",
-    "css": "^3.0.0",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.15.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^4.0.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "gulp": "^4.0.2",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-less": "^5.0.0",
-    "gulp-rename": "^2.0.0",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^22.0.4",
-    "jest-serializer-vue": "^0.3.0",
-    "less": "^3.13.1",
-    "less-loader": "^5.0.0",
-    "nightwatch": "^0.9.12",
-    "node-notifier": "^5.1.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-url": "^7.2.1",
-    "rimraf": "^2.6.0",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "url-loader": "^0.5.8",
-    "vue": "^2.5.2",
-    "vue-jest": "^1.0.2",
-    "vue-loader": "^13.3.0",
-    "vue-router": "^3.0.1",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
-  },
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+    "name": "bri-components",
+    "version": "1.1.0",
+    "author": "dengshanghui",
+    "description": "a component lib for vue project",
+    "main": "src/index.js",
+    "keywords": [
+        "editor",
+        "tinymce"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "license": "ISC",
+    "directories": {
+        "test": "test"
+    },
+    "private": false,
+    "scripts": {
+        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+        "start": "npm run dev",
+        "unit": "jest --config test/unit/jest.conf.js --coverage",
+        "e2e": "node test/e2e/runner.js",
+        "test": "npm run unit && npm run e2e",
+        "lint": "eslint --fix --ext .js,.vue src example build config",
+        "build": "node build/build.js",
+        "lib:style": "gulp --gulpfile build/build-style.js",
+        "lib:dev": "webpack --config build/webpack.lib.dev.config.js",
+        "lib:prod": "webpack --config build/webpack.lib.prod.config.js"
+    },
+    "dependencies": {
+        "axios": "^0.23.0",
+        "bri-datas": "^1.0.8-0",
+        "jshint": "^2.12.0",
+        "minio": "^7.0.26",
+        "stream": "^0.0.2",
+        "view-design": "^4.6.0",
+        "viewerjs": "^1.10.2",
+        "vue-codemirror": "^4.0.6",
+        "vue-cropperjs": "^4.1.0",
+        "vue-easytable": "^2.21.9",
+        "vuedraggable": "^2.24.1",
+        "wangeditor": "^4.7.5"
+    },
+    "devDependencies": {
+        "autoprefixer": "^7.1.2",
+        "babel-core": "^6.22.1",
+        "babel-eslint": "^8.2.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "babel-jest": "^21.0.2",
+        "babel-loader": "^7.1.1",
+        "babel-plugin-dynamic-import-node": "^1.2.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+        "babel-plugin-transform-runtime": "^6.22.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-preset-env": "^1.3.2",
+        "babel-preset-stage-2": "^6.22.0",
+        "babel-register": "^6.22.0",
+        "chalk": "^2.0.1",
+        "chromedriver": "^2.27.2",
+        "compression-webpack-plugin": "^1.1.12",
+        "copy-webpack-plugin": "^4.0.1",
+        "cross-spawn": "^5.0.1",
+        "css": "^3.0.0",
+        "css-loader": "^0.28.11",
+        "eslint": "^4.15.0",
+        "eslint-config-standard": "^10.2.1",
+        "eslint-friendly-formatter": "^3.0.0",
+        "eslint-loader": "^1.7.1",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-node": "^5.2.0",
+        "eslint-plugin-promise": "^3.4.0",
+        "eslint-plugin-standard": "^3.0.1",
+        "eslint-plugin-vue": "^4.0.0",
+        "extract-text-webpack-plugin": "^3.0.0",
+        "file-loader": "^1.1.4",
+        "friendly-errors-webpack-plugin": "^1.6.1",
+        "gulp": "^4.0.2",
+        "gulp-clean-css": "^4.3.0",
+        "gulp-less": "^5.0.0",
+        "gulp-rename": "^2.0.0",
+        "html-webpack-plugin": "^2.30.1",
+        "jest": "^22.0.4",
+        "jest-serializer-vue": "^0.3.0",
+        "less": "^3.13.1",
+        "less-loader": "^5.0.0",
+        "nightwatch": "^0.9.12",
+        "node-notifier": "^5.1.2",
+        "optimize-css-assets-webpack-plugin": "^3.2.0",
+        "ora": "^1.2.0",
+        "portfinder": "^1.0.13",
+        "postcss-import": "^11.0.0",
+        "postcss-loader": "^2.0.8",
+        "postcss-url": "^7.2.1",
+        "rimraf": "^2.6.0",
+        "selenium-server": "^3.0.1",
+        "semver": "^5.3.0",
+        "shelljs": "^0.7.6",
+        "uglifyjs-webpack-plugin": "^1.3.0",
+        "url-loader": "^0.5.8",
+        "vue": "^2.5.2",
+        "vue-jest": "^1.0.2",
+        "vue-loader": "^13.3.0",
+        "vue-router": "^3.0.1",
+        "vue-style-loader": "^3.0.1",
+        "vue-template-compiler": "^2.5.2",
+        "webpack": "^3.6.0",
+        "webpack-bundle-analyzer": "^2.9.0",
+        "webpack-dev-server": "^2.9.1",
+        "webpack-merge": "^4.1.0"
+    },
+    "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ]
 }

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

@@ -0,0 +1,117 @@
+<!-- 动态标签 -->
+<template>
+    <div class="BriLabels">
+        <Dropdown
+            class="BriLabels-dropdown"
+            trigger="custom"
+            placement="bottom-start"
+            transfer
+            :visible="listVisible"
+            @on-clickoutside="clickInput"
+        >
+            <Input
+                class="BriLabels-dropdown-input"
+                :value="showValStr"
+                :suffix="inputIcon"
+                readonly
+                @click.native="clickInput"
+            >
+            </Input>
+            <template #list>
+                <DropdownMenu>
+                    <DropdownItem
+                        v-for="item in listData"
+                        :key="item._key"
+                        :class="{
+                            'BriLabels-dropdown-item':true,
+                            'BriLabels-dropdown-item-active':!!val.find(i=>i._key == item._key)
+                        }"
+                    >
+                        {{item.name}}
+                    </DropdownItem>
+                </DropdownMenu>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "BriLabels",
+        mixins: [controlMixin],
+        data () {
+            return {
+                listData: [],
+                listVisible: false,
+                inputIcon: "ios-arrow-down"
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            modKey () {
+                return this.propsObj.modKey;
+            },
+            val: {
+                get () {
+                    return this.value[this.propsObj._key] || [];
+                },
+                set (val) {
+                    this.value[this.propsObj._key] = val;
+                }
+            },
+            showValStr () {
+                let valArr = this.val && this.val.map(item => item.name);
+                return valArr && valArr.join("、");
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.getListData();
+            },
+            getListData () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "memberAll"
+                    },
+                    params: {
+                        search: {
+                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
+                            modKey: this.modKey,
+                            name: this.curVal,
+                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
+                            labelType: this.selfPropsObj._labelType
+                        },
+                        pagination: {
+                            page: 1,
+                            pagesize: 999
+                        }
+                    },
+                    callback: data => {
+                        this.listData = data.list;
+                    }
+                });
+            },
+            clickInput () {
+                this.listVisible = !this.listVisible;
+                if (this.listVisible) {
+                    this.inputIcon = "ios-arrow-up";
+                } else {
+                    this.inputIcon = "ios-arrow-down";
+                }
+            }
+        },
+        watch: {
+        }
+    };
+</script>

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

@@ -1,7 +1,7 @@
 <template>
-    <div :class="`DshCascader ycFormItem control-${mode}`">
-        <!-- 编辑模式 -->
-        <template v-if="finalCanEdit">
+    <div :class="`DshCascader`">
+        <!-- 编辑和disabled模式 -->
+        <template v-if="finalCanEdit  || $isDisabled(canEdit, selfPropsObj)">
             <!-- 多选 多选模式的filterable必须是false，不然出bug -->
             <template v-if="useMultiple === true">
                 <Cascader
@@ -86,17 +86,16 @@
                     v-else
                     style="width: 100%;"
                     :class="{
-                        'DshCascader-readonly': $isReadonly(canEdit, selfPropsObj),
                         'DshCascader-disabled': $isDisabled(canEdit, selfPropsObj)
                     }"
                     :value="value[controlKey]"
                     :data="renderCascaderData"
                     :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :change-on-select="selfPropsObj._changeOnSelect"
                     :clearable="selfPropsObj._clearable"
                     :size="selfPropsObj._size"
-                    :filterable="selfPropsObj._filterable"
+                    :filterable="selfPropsObj._filterable && !$isDisabled(canEdit, selfPropsObj)"
                     :transfer="selfPropsObj._transfer"
                     :transfer-class-name="selfPropsObj._transferClassName"
                     :load-data="loadData"
@@ -107,29 +106,13 @@
             </template>
         </template>
 
-        <!-- 查看 和 编辑下无编辑权限 -->
-        <Ctooltip
+        <!-- 查看模式 -->
+        <control-show
             v-else
-            placement="top"
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
-        >
-            <span
-                v-if="showVal"
-                class="dsh-ellipsis hb-show-text"
-                :class="`control-${mode}-text`"
-            >
-                {{ showVal }}
-            </span>
-            <div
-                v-else
-                class="hb-nodata-text dsh-ellipsis"
-            >
-                <span>暂无内容</span>
-            </div>
-        </Ctooltip>
+            :showVal="showVal"
+            :propsObj="selfPropsObj"
+            :isUnit="isUnit"
+        ></control-show>
     </div>
 </template>
 
@@ -303,16 +286,18 @@
 
             /* ----------- 单选使用 ---------- */
             clickInput () {
-                if (
-                    ["cascader"].includes(this.selfPropsObj._type) &&
-                    this.selfPropsObj._filterable === true &&
-                    this.renderDataFlag === true &&
-                    this.clickInputFlag === true
-                ) {
-                    this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
-                    setTimeout(() => {
-                        this.renderDataFlag = false;
-                    }, 0);
+                if (this.finalCanEdit) {
+                    if (
+                        ["cascader"].includes(this.selfPropsObj._type) &&
+                        this.selfPropsObj._filterable === true &&
+                        this.renderDataFlag === true &&
+                        this.clickInputFlag === true
+                    ) {
+                        this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
+                        setTimeout(() => {
+                            this.renderDataFlag = false;
+                        }, 0);
+                    }
                 }
             },
             // 展开和关闭弹窗时触发

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="DshCascaderMultiple ycFormItem">
+    <div class="DshCascaderMultiple">
         <Cascader
             class="DshCascaderMultiple-control"
             v-model="cascaderVal"

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

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="`DshCheckbox ycFormItem control-${mode}`"
+        class="DshCheckbox"
         ref="dshCheckboxRef"
     >
         <template v-if="canEdit">
@@ -87,11 +87,13 @@
             :transfer="true"
             maxWidth="200"
             :content="showVal"
-            :class="commonClass"
         >
             <div
                 v-if="showVal"
                 class="DshCheckbox-value-wrapper"
+                :style="{
+                    justifyContent: flatShowAlign
+                }"
             >
                 <span
                     v-for="col in colData"
@@ -105,9 +107,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>
 
@@ -169,6 +176,9 @@
             // 选项数据
             colData () {
                 return this.listData.filter(item => (this.value[this.controlKey] || []).includes(item._key));
+            },
+            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/DshCoordinates.vue

@@ -1,11 +1,10 @@
 <template>
-    <div :class="`DshCoordinates ycFormItem control-${mode}`">
+    <div class="DshCoordinates">
         <Ctooltip
             placement="top"
             :transfer="true"
             maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
+            :content="currentVal"
         >
             <!-- 编辑模式 -->
             <div
@@ -38,11 +37,8 @@
             </div>
 
             <!-- 查看模式 -->
-            <span
-                v-else
-                :class="[`dsh-ellipsis control-${mode}-text`, showVal ? 'hb-show-text' : 'hb-nodata-text']"
-            >
-                <span>{{ showVal || '暂无内容' }}</span>
+            <span v-else :class="commonClass">
+                {{ showText }}
             </span>
         </Ctooltip>
 
@@ -177,7 +173,7 @@
                     this.value[this.controlKey] = val;
                 }
             },
-            showVal () {
+            currentVal () {
                 return this.curVal && this.curVal.name;
             },
             curLnglat: {

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

@@ -1,20 +1,19 @@
 <template>
     <div
         v-if="show"
-        :class="`DshDate ycFormItem control-${mode}`"
+        class="DshDate"
     >
-        <template v-if="finalCanEdit">
+        <template v-if="finalCanEdit || $isDisabled(canEdit, selfPropsObj)">
             <template v-if="['time'].includes(subType)">
                 <TimePicker
                     style="width: 100%;"
                     :class="{
-                        'DshDate-time-readonly': $isReadonly(canEdit, selfPropsObj),
                         'DshDate-time-disabled': $isDisabled(canEdit, selfPropsObj)
                     }"
                     v-model="val"
                     :type="subType"
                     :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :clearable="selfPropsObj._clearable"
                     :transfer="selfPropsObj._transfer"
                     @on-change="change"
@@ -25,13 +24,12 @@
                 <DatePicker
                     style="width: 100%;"
                     :class="{
-                        'DshDate-date-readonly': $isReadonly(canEdit, selfPropsObj),
                         'DshDate-date-disabled': $isDisabled(canEdit, selfPropsObj)
                     }"
                     v-model="val"
                     :type="subType"
                     :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :clearable="selfPropsObj._clearable"
                     :options="options"
                     :transfer="selfPropsObj._transfer"
@@ -40,29 +38,13 @@
             </template>
         </template>
 
-        <Ctooltip
+        <!-- 查看模式 -->
+        <control-show
             v-else
-            placement="top"
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
-        >
-            <span
-                v-if="showVal"
-                class="dsh-ellipsis hb-show-text"
-                :class="`control-${mode}-text`"
-            >
-                {{ showVal }}
-            </span>
-            <span
-                v-else
-                class="hb-nodata-text dsh-ellipsis"
-                :class="`control-${mode}-text`"
-            >
-                <span>暂无内容</span>
-            </span>
-        </Ctooltip>
+            :showVal="showVal"
+            :propsObj="selfPropsObj"
+            :isUnit="isUnit"
+        ></control-show>
     </div>
 </template>
 
@@ -140,9 +122,3 @@
         }
     };
 </script>
-
-<style lang="less">
-    .DshDate {
-        width: 100%;
-    }
-</style>