n20-common-lib 1.2.3 → 1.2.6

package/README.md

@@ -1,27 +1,3 @@
-# vue-demo
+# n20-common-lib
 
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
-
-[element-ui](/node_modules/element-ui/src)
-
-[element-ui/packages](/node_modules/element-ui/packages)
-
-[element-ui/lib](/node_modules/element-ui/lib)
+## nstc web pc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "1.2.3",
+  "version": "1.2.6",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/cl-expandable-pane.scss

@@ -6,7 +6,6 @@
     color: $--color-text-primary;
     border-radius: $--border-radius-base;
     padding: 0 12px;
-    margin-top: 12px;
     margin-bottom: 24px;
   }
   .n20-tips {

package/src/assets/css/cl-expandable.scss

@@ -6,7 +6,6 @@
     color: $--color-text-primary;
     border-radius: $--border-radius-base;
     padding: 0 12px;
-    margin-top: 12px;
     margin-bottom: 24px;
   }
   .n20-tips {

package/src/assets/css/cl-form-item.scss

@@ -1,6 +1,7 @@
-$--s: 1366px - 160px;
+$--s: 1024px;
 $--m: 1366px + 160px;
 $--l: 1920px;
+$--input-max: 304px;
 
 .el-form-item[span],
 .el-form-item[span-s],
@@ -52,7 +53,7 @@ $--l: 1920px;
   }
 }
 
-@for $i from 1 through 200 {
+@for $i from 1 through 20 {
   .el-form[gutter='#{$i}0'] {
     margin-left: $i * -5px;
     margin-right: $i * -5px;
@@ -107,7 +108,129 @@ $--l: 1920px;
 }
 
 .w-224 {
-  width: $--input-width;
+  width: $--input-width !important;
+}
+.input-w {
+  width: $--input-width !important;
+}
+
+.el-form.label-width-6em {
+  margin-left: 96px;
+  margin-right: 14px;
+  .n20-title {
+    margin-left: -96px;
+    margin-right: -14px;
+  }
+  .el-form-item.col-span-24 {
+    @media only screen and (min-width: ($--l + 1px)) {
+      .el-textarea {
+        max-width: calc(25% + 1.5em + #{$--input-max});
+        width: calc(50% - 3em);
+      }
+    }
+
+    @media only screen and (max-width: $--l) {
+      .el-textarea {
+        max-width: calc(33.33% + 2em + #{$--input-max});
+        width: calc(66.66% - 2em);
+      }
+    }
+
+    @media only screen and (max-width: $--m) {
+      .el-textarea {
+        max-width: calc(50% + 3em + #{$--input-max});
+        width: 100%;
+      }
+    }
+
+    @media only screen and (max-width: $--s) {
+      .el-form-item {
+        max-width: none;
+        width: 100%;
+      }
+    }
+  }
+}
+.el-form.label-width-10em {
+  margin-left: 40px;
+  margin-right: 70px;
+  .n20-title {
+    margin-left: -40px;
+    margin-right: -70px;
+  }
+  .el-form-item.col-span-24 {
+    @media only screen and (min-width: ($--l + 1px)) {
+      .el-textarea {
+        max-width: calc(25% + 2.5em + #{$--input-max});
+        width: calc(50% - 5em);
+      }
+    }
+
+    @media only screen and (max-width: $--l) {
+      .el-textarea {
+        max-width: calc(33.33% + 3.33em + #{$--input-max});
+        width: calc(66.66% - 3.33em);
+      }
+    }
+
+    @media only screen and (max-width: $--m) {
+      .el-textarea {
+        max-width: calc(50% + 5em + #{$--input-max});
+        width: 100%;
+      }
+    }
+
+    @media only screen and (max-width: $--s) {
+      .el-form-item {
+        max-width: none;
+        width: 100%;
+      }
+    }
+  }
+}
+.el-form.label-width-6em,
+.label-width-10em {
+  .el-form-item {
+    width: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 0;
+  }
+  @media only screen and (min-width: ($--s + 1px)) {
+    .el-form-item__content {
+      max-width: $--input-max;
+    }
+  }
+  .el-form-item.col-span-24 {
+    width: 100%;
+    .el-form-item__content {
+      max-width: none;
+    }
+  }
+
+  @media only screen and (min-width: ($--l + 1px)) {
+    .el-form-item {
+      width: 25%;
+    }
+  }
+
+  @media only screen and (max-width: $--l) {
+    .el-form-item {
+      width: 33.33%;
+    }
+  }
+
+  @media only screen and (max-width: $--m) {
+    .el-form-item {
+      width: 50%;
+    }
+  }
+
+  @media only screen and (max-width: $--s) {
+    .el-form-item {
+      width: 100%;
+    }
+  }
 }
 
 .el-input,

package/src/assets/css/normalize.scss

@@ -4,7 +4,7 @@ $--border-radius-base: 4px !default;
 $--input-width: 224px !default;
 
 // 项目中可以直接使用
-// .w-224 {width: $--input-width;}
+// .input-w {width: $--input-width;}
 // .button-4em{min-width: 72px;}
 /* 格式化样式
 ---------------- */

package/src/components/Filters/index.vue

@@ -357,6 +357,12 @@ export default {
       if (elPoppers.length <= 1) {
         this.showPop = false
       }
+    },
+    setOptions(key, opts) {
+      let item = this.filterList.find((f) => f.value === key)
+      if (item) {
+        item.options = opts || []
+      }
     }
   }
 }

package/src/components/SelectTree/index.vue

@@ -130,21 +130,18 @@ export default {
         if (!val && !this.multiple) {
           this.wCdList = []
           this.$refs['tree']?.setCurrentKey(null)
-          this.$emit('change', val, undefined)
           return
         }
         if (!this.multiple) {
           if (val === undefined || val === null) {
             this.wCdList = []
             this.$refs['tree']?.setCurrentKey(null)
-            this.$emit('change', val, undefined)
             return
           }
         } else {
           if (val.length === 0) {
             this.wCdList = []
             this.$refs['tree']?.setCurrentKey(null)
-            this.$emit('change', val, undefined)
             return
           }
         }
@@ -156,13 +153,11 @@ export default {
           let valueObj = dataList.find((d) => d[this.props.value] === val)
           this.wCdList = valueObj ? [valueObj] : []
           this.$refs['tree']?.setCurrentKey(val)
-          this.$emit('change', val, valueObj)
         } else {
           this.wCdList = dataList.filter((d) =>
             val.includes(d[this.props.value])
           )
           this.$refs['tree']?.setCheckedKeys(val)
-          this.$emit('change', val, this.wCdList)
         }
       },
       immediate: true
@@ -192,11 +187,13 @@ export default {
 
         let vK = this.props.value
         this.$emit('input', data[vK])
+        this.$emit('change', data[vK], data)
         this.$refs['select'].blur()
       }
     },
     checkChange(data, { checkedKeys, checkedNodes }) {
       this.$emit('input', checkedKeys)
+      this.$emit('change', checkedKeys, checkedNodes)
     },
     filterNode(value, data) {
       if (!value) return true

package/src/components/Table/index.vue

@@ -21,6 +21,7 @@
         v-else
         :key="'cl-table-' + i"
         :formatter="item.formatter | colfF"
+        :filters="item.filters | colftF(filtersMap)"
         v-bind="item"
       />
     </template>
@@ -104,7 +105,7 @@ export default {
         let mc = colf.match(/{(\S+)\|rate}/)
         let key = mc && mc[1]
 
-        return (row) => numerify(row[key], '0.00[00]')
+        return (row) => numerify(row[key], '0.000000')
       } else {
         let mc = colf.match(/{[^}]+}/g) || []
         let mcv = mc.map((m) => m.replace(/{|}/g, ''))
@@ -117,6 +118,10 @@ export default {
           return str
         }
       }
+    },
+    colftF(colft, fMap) {
+      if (typeof colft !== 'string') return colft
+      return fMap[colft]
     }
   },
   props: {
@@ -133,6 +138,10 @@ export default {
       require: true,
       default: () => []
     },
+    filtersMap: {
+      type: Object,
+      default: () => ({})
+    },
     pageObj: {
       type: Object,
       default: undefined

package/src/plugins/SetMenuTree/setmenutree.vue

@@ -79,10 +79,10 @@
               { required: true, message: '请输入名称', trigger: 'blur' }
             ]"
           >
-            <el-input v-model="activeMenu.label" class="w-224" />
+            <el-input v-model="activeMenu.label" class="input-w" />
           </el-form-item>
           <el-form-item label="属性:">
-            <el-select v-model="activeMenu.resType" class="w-224">
+            <el-select v-model="activeMenu.resType" class="input-w">
               <el-option value="1" label="左边栏菜单" />
               <el-option value="2" label="隐藏菜单" />
               <el-option value="3" label="权限按钮" />
@@ -99,7 +99,7 @@
           >
             <el-input
               v-model="activeMenu.appNo"
-              class="w-224"
+              class="input-w"
               @change="(val) => setAppNo(val, activeMenu)"
             />
           </el-form-item>
@@ -112,7 +112,7 @@
                 { required: true, message: '请输入访问路径', trigger: 'blur' }
               ]"
             >
-              <el-input v-model="activeMenu.pageurl" class="w-224" />
+              <el-input v-model="activeMenu.pageurl" class="input-w" />
             </el-form-item>
             <el-form-item label="图标:">
               <div class="flex-box">
@@ -151,7 +151,7 @@
             </el-form-item>
           </template>
           <el-form-item v-if="activeMenu.treeno" label="权限编码:">
-            <div class="w-224 flex-box">
+            <div class="input-w flex-box">
               <el-input class="flex-item" :value="activeMenu.treeno" readonly />
             </div>
           </el-form-item>

package/style/css/normalize.scss

@@ -4,7 +4,7 @@ $--border-radius-base: 4px !default;
 $--input-width: 224px !default;
 
 // 项目中可以直接使用
-// .w-224 {width: $--input-width;}
+// .input-w {width: $--input-width;}
 // .button-4em{min-width: 72px;}
 /* 格式化样式
 ---------------- */