xs-common-plugins 1.2.0 → 1.2.3

package/src/components/Search/product_option/index.scss

@@ -3,7 +3,7 @@
 .select-empty-group {
     width: 660px;
     font-size: 14px;
-
+    
     .row {
         position: relative;
         margin: 0 8px;

package/src/components/Search/product_option/index.vue

@@ -8,7 +8,7 @@
               <span class="title">商品品类</span>
             </div>
             <div class="body">
-              <el-radio-group class="product-type" v-model="selectedType" size="mini">
+              <el-radio-group class="product-type" v-model="selectedType" size="mini" @change="changeProductType">
                 <el-radio
                   v-for="typeItem in $enumList.EnumProductType"
                   :key="typeItem.Id"
@@ -391,13 +391,6 @@ export default {
   mixins: [MIX_VMODEL],
   components: {},
   watch: {
-    selectedType: {
-      handler(nVal) {
-        this.loadSource();
-      },
-      immediate: true
-    },
-
     selectedAreaCode: {
       handler(nVal) {
         console.log(nVal, "=====>");

package/src/components/Search/product_option/methods.js

@@ -7,7 +7,10 @@ export default {
   },
   mountedInit() {
   },
-
+  // 切换商品品类
+  changeProductType (value) {
+    this.loadSource();
+  },
   checkboxHandle(event, fieldName) {
     this.keys = []
     this.checkboxForm = {
@@ -36,12 +39,21 @@ export default {
       typeId: parseInt(this.selectedType)
     }).then(res => {
       if (res.data) {
-        this.areaCodeDicList = res.data.areaCodeDic
-        this.arsIdDicList = res.data.arsIdDic
-        this.denomIncList = res.data.denomInc
+        this.areaCodeDicList = res.data.areaCodeDic // 地区/种类列表
+        this.arsIdDicList = res.data.arsIdDic // 运营商类目列表
+        this.denomIncList = res.data.denomInc // 面值列表
       } else {
         this.areaCodeDicList = this.arsIdDicList = this.denomIncList = []
       }
+      let list = []
+      this.areaCodeDicList.forEach(item => { list.push([item.value]) });
+      this.selectedAreaCode = list // selectedAreaCode  地区/种类
+      this.selectedArsId = this.formatData(this.arsIdDicList)   // selectedArsId 运营商类目
+      this.selectedDenomInc = Object.values(this.denomIncList) // selectedDenomInc 面值
+      this.checkboxHandle()
     })
+  },
+  formatData (list) {
+    return list.map(item => item.value)
   }
 }

package/src/components/Search_filter/index.scss

@@ -1,105 +1,105 @@
-.contentBox{
-    display: flex;
-    padding: 0 5px;
-    
-}
-.searchBox{
-  display: flex;
-}
-.buttonBox{
-  display: flex;
-}
-
- .el-select__tags{
-  flex-wrap: nowrap;
-}
- .el-form-item__content{
-  display: flex;
-  // word-spacing:-1em;
-  // min-width: 150px;
-}
-.shortcut{
-  padding: 0 10px;
-  display: flex;
-  .tabs{
-    margin: 10px 10px 10px 0;
-  }
-}
-
- .select-popper {
-  // background-color: rgba(0, 0, 0, 0.8);;
-  // border-radius: 0.08rem;
-  // border: solid 0.02rem #1c395d;
-  // font-family: PingFangSC-Regular;
-  .el-select-dropdown__item.selected {
-    // font-family: PingFangSC-Regular;
-    // font-size: 0.28rem;
-    // color: rgba(74, 141, 253, 1);
-  }
-  .el-select-dropdown__item.selected::after{
-    content: "";
-    
-  }
-  ul{
-    // display: flex;
-    // flex-wrap: wrap;
-  }
-  .el-select-dropdown__list{
-    padding: 0;
-  }
-
-  li {
-    // color: #000;
-    // background: transparent;
-    // font-size: 0.28rem;
-    // width: 500px;
-  }
-  .el-select-dropdown__item{
-    margin-right: 10px;
-
-  }
-  .el-select-dropdown__item:hover,
-  .el-select-dropdown__item.hover {
-    // background-color: rgba(110, 147, 206, 0.2);
-    // margin-right: 1px;
-  }
-  .popper__arrow::after {
-    // border-bottom-color: rgba(0, 0, 0, 0.8);;
-  }
-  .popper__arrow {
-    // border-bottom-color: rgba(0, 0, 0, 0.8);;
-  }
-  .el-select-dropdown__empty {
-    // padding: 0.2rem;
-    // font-size: 0.28rem;
-  }
-}
-.option{
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 500px;
-  margin-top: 10px;
-  span{
-    margin-right: 10px;
-  }
-    .el-select-dropdown__item.selected::after{
-    content: "";
-    
-  }
-}
-.el-tabs {
-  max-width: 300px;
-}
-
-.el-dropdown-menu{
-  padding: 0;
-}
-.dateRange >>> .el-date-editor--daterange {
-  max-width: 250px;
-}
-.el-radio {
-  visibility: hidden;
-}
-.el-select{
-  width: 100%;
+.contentBox{
+    display: flex;
+    padding: 0 5px;
+    
+}
+.searchBox{
+  display: flex;
+}
+.buttonBox{
+  display: flex;
+}
+
+ .el-select__tags{
+  flex-wrap: nowrap;
+}
+ .el-form-item__content{
+  display: flex;
+  // word-spacing:-1em;
+  // min-width: 150px;
+}
+.shortcut{
+  padding: 0 10px;
+  display: flex;
+  .tabs{
+    margin: 10px 10px 10px 0;
+  }
+}
+
+ .select-popper {
+  // background-color: rgba(0, 0, 0, 0.8);;
+  // border-radius: 0.08rem;
+  // border: solid 0.02rem #1c395d;
+  // font-family: PingFangSC-Regular;
+  .el-select-dropdown__item.selected {
+    // font-family: PingFangSC-Regular;
+    // font-size: 0.28rem;
+    // color: rgba(74, 141, 253, 1);
+  }
+  .el-select-dropdown__item.selected::after{
+    content: "";
+    
+  }
+  ul{
+    // display: flex;
+    // flex-wrap: wrap;
+  }
+  .el-select-dropdown__list{
+    padding: 0;
+  }
+
+  li {
+    // color: #000;
+    // background: transparent;
+    // font-size: 0.28rem;
+    // width: 500px;
+  }
+  .el-select-dropdown__item{
+    margin-right: 10px;
+
+  }
+  .el-select-dropdown__item:hover,
+  .el-select-dropdown__item.hover {
+    // background-color: rgba(110, 147, 206, 0.2);
+    // margin-right: 1px;
+  }
+  .popper__arrow::after {
+    // border-bottom-color: rgba(0, 0, 0, 0.8);;
+  }
+  .popper__arrow {
+    // border-bottom-color: rgba(0, 0, 0, 0.8);;
+  }
+  .el-select-dropdown__empty {
+    // padding: 0.2rem;
+    // font-size: 0.28rem;
+  }
+}
+.option{
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 500px;
+  margin-top: 10px;
+  span{
+    margin-right: 10px;
+  }
+    .el-select-dropdown__item.selected::after{
+    content: "";
+    
+  }
+}
+.el-tabs {
+  max-width: 300px;
+}
+
+.el-dropdown-menu{
+  padding: 0;
+}
+.dateRange >>> .el-date-editor--daterange {
+  max-width: 250px;
+}
+.el-radio {
+  visibility: hidden;
+}
+.el-select{
+  width: 100%;
 }

package/src/components/TableItem/TableItem.vue

@@ -1,56 +1,56 @@
-<template>
-    <el-table-column
-        :label="label"
-        :width="width"
-        :header-align="headerAlign" 
-        :align="align"
-    >
-      <template slot-scope="scope">
-        <template v-if="isSlot">
-            <slot :name="slotName" :row="scope.row" :index="scope.$index"></slot>
-        </template>
-        <template v-else>
-            <span>{{ scope.row[prop] }}</span>
-        </template>
-      </template>
-    </el-table-column>
-</template>
-
-<script>
-export default {
-    name: 'tableItem',
-    props: {
-        label: {
-            type: String,
-        },
-        width: {
-            type: [String, Number],
-        },
-        value: {
-            type: [String, Number]
-        },
-        headerAlign: {
-            type: String,
-            default:'center'
-        },
-        align: {
-            type: String,
-            default:'left'
-        },
-        prop: {
-            type: String,
-        },
-        isSlot: {
-            type: [String, Boolean],
-            default: true
-        },
-        slotName: {
-            type: String
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-
+<template>
+    <el-table-column
+        :label="label"
+        :width="width"
+        :header-align="headerAlign" 
+        :align="align"
+    >
+      <template slot-scope="scope">
+        <template v-if="isSlot">
+            <slot :name="slotName" :row="scope.row" :index="scope.$index"></slot>
+        </template>
+        <template v-else>
+            <span>{{ scope.row[prop] }}</span>
+        </template>
+      </template>
+    </el-table-column>
+</template>
+
+<script>
+export default {
+    name: 'tableItem',
+    props: {
+        label: {
+            type: String,
+        },
+        width: {
+            type: [String, Number],
+        },
+        value: {
+            type: [String, Number]
+        },
+        headerAlign: {
+            type: String,
+            default:'center'
+        },
+        align: {
+            type: String,
+            default:'left'
+        },
+        prop: {
+            type: String,
+        },
+        isSlot: {
+            type: [String, Boolean],
+            default: true
+        },
+        slotName: {
+            type: String
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
 </style>

package/src/components/TextOVer/index.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="textOVer">
-    <span class="textOVerThree">
-      {{ text }}
-    </span>
-    <el-button
-      v-if="text"
-      type="text"
-      size="mini"
-      v-clipboard:copy="text"
-      v-clipboard:success="onCopy"
-      v-clipboard:error="onError"
-      >复制</el-button
-    >
-  </div>
-
-  <!-- 
-    导入 :import
-    调用: <TextOVer :text="text"></TextOVer>
-   -->
-</template>
-<script>
-export default {
-  props: {
-    text: [String],
-  },
-  methods: {
-    onCopy: function (e) {
-      this.$message({
-        type: "success",
-        message: "复制成功",
-      });
-    },
-    onError: function (e) {
-      this.$message({
-        type: "error",
-        message: "复制失败",
-      });
-    },
-  },
-};
-</script>
-<style lang="scss">
-.textOVer {
-  text-align: center;
-  .textOVerThree {
-    display: -webkit-box;
-    overflow: hidden;
-    white-space: normal !important;
-    text-overflow: ellipsis;
-    word-wrap: break-word;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-}
+<template>
+  <div class="textOVer">
+    <span class="textOVerThree">
+      {{ text }}
+    </span>
+    <el-button
+      v-if="text"
+      type="text"
+      size="mini"
+      v-clipboard:copy="text"
+      v-clipboard:success="onCopy"
+      v-clipboard:error="onError"
+      >复制</el-button
+    >
+  </div>
+
+  <!-- 
+    导入 :import
+    调用: <TextOVer :text="text"></TextOVer>
+   -->
+</template>
+<script>
+export default {
+  props: {
+    text: [String],
+  },
+  methods: {
+    onCopy: function (e) {
+      this.$message({
+        type: "success",
+        message: "复制成功",
+      });
+    },
+    onError: function (e) {
+      this.$message({
+        type: "error",
+        message: "复制失败",
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.textOVer {
+  text-align: center;
+  .textOVerThree {
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal !important;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 </style>