1、dk-form增加多选组件

components/dkbase/dk-form/dk-form.js

@@ -27,11 +27,11 @@ Component({
     // 结果集
     value: {
       type: String,
-      observer: function (newVal) { 
+      observer: function (newVal) {
         if (newVal) {
           this.setData({
             form: JSON.parse(newVal) || {}
-          }) 
+          })
         }
       }
     }
@@ -43,6 +43,7 @@ Component({
   data: {
     // 是否显示pop
     show: false,
+    mutishow: false,
     $t: app.globalData.lang,
     routeUrl: app.globalData['routeUrl'],
     item: null,
@@ -102,13 +103,24 @@ Component({
     open(e) {
       let item = e.currentTarget.dataset;
       this.setData({
-        show: true,
         dropCode: item.key,
         dropName: item.name,
         dropType: item.type,
         index: item.index,
         card: item.card
       })
+      console.log('ee',e);
+      // 单选
+      if (item.item.type == 'drop') {
+        this.setData({
+          show: true
+        })
+        // 多选
+      } else if (item.item.type == 'mutidrop') {
+        this.setData({
+          mutishow: true
+        })
+      }
     },
     /**
      * @desc   : 非空校验
@@ -148,8 +160,13 @@ Component({
     chooseData(e) {
       let contentObj = this.data.contentObj;
       let form = this.data.form
-      form[this.data.dropCode] = e.detail.value;
-      form[this.data.dropName] = e.detail.text;
+      if(e.detail.ids){
+        form[this.data.dropCode + 's'] = e.detail.ids;
+        form[this.data.dropName + 's'] = e.detail.names;
+      }else{
+        form[this.data.dropCode] = e.detail.value;
+        form[this.data.dropName] = e.detail.text;
+      }
       let card = this.data.card;
       // 选择后清空校验提示信息
       if (card && contentObj[card][this.data.index]?.errMsg && e.detail) {
@@ -160,8 +177,9 @@ Component({
         form: form,
         contentObj: contentObj
       })
+      console.log('ffff',this.data.form);
       // 如果处理id，name还需要赋值其他，需要在页面事件中自行处理
-      this.triggerEvent("chooseData", { code: this.data.dropCode, item: e.detail.item })
+      this.triggerEvent("chooseData", { code: this.data.dropCode, list: e.detail.list })
     },
     /**
      * @desc   : 修改输入框的值

components/dkbase/dk-form/dk-form.wxml

@@ -7,9 +7,12 @@
       <van-field wx:if="{{item.type=='str'}}" label-class="{{item.required?'red-label':'nomal-label' }}" data-key="{{item.code}}"
       data-item="{{item}}" data-index="{{index}}" data-card="{{card}}" value="{{ form[item.code]}}" input-align="left" label="{{item.title?item.title:$t[item.code]}}" placeholder="{{wxmlUtil.setPlaceholder($t,item.title?item.title:item.code)}}" autosize border="{{ false }}" readonly="{{!!item.readonly}}" input-class="dk-cell-value-class" maxlength="{{item.maxlength?item.maxlength:50}}" right-icon="{{item.rightIcon}}" bind:change="changeField" errorMessage="{{item.errMsg}}">
       </van-field>
-      <!--下拉-->
+      <!--单选下拉-->
       <van-field wx:if="{{item.type=='drop'}}" label-class="{{item.required?'red-label':'nomal-label' }}" data-name="{{item.name}}" data-key="{{item.code}}" data-item="{{item}}" data-index="{{index}}" data-card="{{card}}" value="{{ form[item.name]}}" input-align="left" label="{{item.title?item.title:$t[item.code]}}" placeholder="{{wxmlUtil.setPlaceholder($t,item.title?item.title:item.code)}}" is-link catchtap="open" autosize border="{{ false }}" readonly="{{true}}" input-class="dk-cell-value-class" data-type='{{item.dropType}}' errorMessage="{{item.errMsg}}">
       </van-field>
+      <!--多选下拉-->
+      <van-field wx:if="{{item.type=='mutidrop'}}" label-class="{{item.required?'red-label':'nomal-label' }}" data-name="{{item.name}}" data-key="{{item.code}}" data-item="{{item}}" data-index="{{index}}" data-card="{{card}}" value="{{ form[item.name + 's']}}" input-align="left" label="{{item.title?item.title:$t[item.code]}}" placeholder="{{wxmlUtil.setPlaceholder($t,item.title?item.title:item.code)}}" is-link catchtap="open" autosize border="{{ false }}" readonly="{{true}}" input-class="dk-cell-value-class" data-type='{{item.dropType}}' errorMessage="{{item.errMsg}}">
+      </van-field>
       <!--选择框-->
       <van-field wx:if="{{item.type=='checkbox'}}" input-width="200rpx" input-class="dk-cell-value-class" label-class="nomal-label" input-align="left" value="{{ form[item.code] ? '  需要' : '  不需要' }}" label="{{item.title?item.title:$t[item.code]}}" autosize border="{{ false }}" readonly="{{true}}" errorMessage="{{item.errMsg}}">
         <view slot="inputbefor" style="text-align: left;padding-left: 10rpx;" data-item="{{item}}" data-index="{{index}}" data-card="{{card}}" data-value="{{form[item.code]}}" data-key="{{item.code}}" catchtap="changeCheckBox">
@@ -39,5 +42,8 @@
     </view>
   </view>
 </view>
-<!--弹出-->
-<dk-single-dropdown-item show="{{show}}" typeName='{{dropType}}' bind:commit='chooseData' bind:muticlose='muticlose'></dk-single-dropdown-item>
+<!--单选-->
+<dk-single-dropdown-item show="{{show}}" typeName='{{dropType}}' bind:commit='chooseData' bind:muticlose='muticlose'></dk-single-dropdown-item>
+
+<!--多选-->
+<dk-muti-dropdown-item show="{{mutishow}}" typeName='{{dropType}}' bind:commit='chooseData' bind:muticlose='muticlose'></dk-muti-dropdown-item>

components/dkbusiness/dk-muti-dropdown-item/dk-muti-dropdown-item.js

@@ -15,9 +15,9 @@ Component({
    * 组件的属性列表
    */
   properties: {
-     /**
-      *是否在搜索顶部加一个高度
-     */
+    /**
+     *是否在搜索顶部加一个高度
+    */
     Top_Height_Flag: {
       type: Boolean,
       value: false
@@ -33,7 +33,7 @@ Component({
       type: String,
       value: ''
     },
-    ids:{
+    ids: {
       type: Array,
       value: [],
       observer: function (newVal) {
@@ -49,9 +49,9 @@ Component({
         }
       }
     },
-    jobIds:{
+    jobIds: {
       type: Array,
-      value: [] 
+      value: []
     },
     //是否显示标识，显示后在加载数据
     show: {
@@ -65,8 +65,10 @@ Component({
         }
         // 给类型赋值
         this.setDataSource();
-        let datalist = this.data.datalist;
-        if (datalist.length == 0) {
+        let datalists = this.data.datalists;
+        let datalist = datalists[this.data.typeName] || []
+        // if (datalist.length == 0) {
+        if (!datalists[this.data.typeName] || datalists[this.data.typeName].length == 0) {
           let DataSourceCode = this.data.DataSourceCode
           let typeName = this.data.typeName
           this.getdata(DataSourceCode).then(res => {
@@ -105,21 +107,21 @@ Component({
                 datalist.push(item)
               })
             }
-             else if (typeName === 'loseReason'){
-              list.forEach(item2 =>{
-                let item ={
-                  id:item2.id,
-                  name:item2.name,
+            else if (typeName === 'loseReason') {
+              list.forEach(item2 => {
+                let item = {
+                  id: item2.id,
+                  name: item2.name,
                   checked: false
                 }
                 datalist.push(item)
               })
             }
-            else if (typeName === 'warehouse'){
-              list.forEach(item2 =>{
-                let item ={
-                  id:item2.id,
-                  name:item2.name,
+            else if (typeName === 'warehouse') {
+              list.forEach(item2 => {
+                let item = {
+                  id: item2.id,
+                  name: item2.name,
                   checked: false
                 }
                 datalist.push(item)
@@ -127,8 +129,9 @@ Component({
             }
 
             let finallist = [...datalist]
+            datalists[this.data.typeName] = [...datalist]
             this.setData({
-              datalist: datalist,
+              datalists: datalists,
               finallist: finallist
             })
             this.setCheck()
@@ -142,17 +145,18 @@ Component({
    * 组件的初始数据
    */
   data: {
-    ids:[],
+    ids: [],
     DataSourceCode: '',
     // 是否点击清除按钮
     isClickClear: false,
-    datalist: [],
+    datalists: {},
     finallist: [],
     condition: '',
     dataValue: '',
     name: '',
     label_title: '可选',
     count: 0,
+    radio: null,
     defaultCheackFlag: false //默认选中数据
   },
   lifetimes: {
@@ -177,12 +181,12 @@ Component({
         name = '渠道'
       }
       //流失原因
-      if(typeName === 'loseReason'){
+      if (typeName === 'loseReason') {
         DataSourceCode = 'loseReason'
         name = '流失原因'
       }
       //仓库
-      if(typeName === 'warehouse'){
+      if (typeName === 'warehouse') {
         DataSourceCode = 'warehouse'
         name = '仓库'
       }
@@ -202,6 +206,31 @@ Component({
    */
   methods: {
     /**
+     * @desc   : 值改变
+     * @author : 周兴
+     * @date   : 2024/1/26 11:46
+     */
+    onChange(e) {
+      let datalists = this.data.datalists
+      let datalist = datalists[this.data.typeName] || []
+      if (datalist) {
+        datalist.forEach(it => {
+          it.checked = false;
+        })
+        if (e.detail && e.detail.length > 0) {
+          e.detail.forEach(it => {
+            if (datalist[it]) {
+              datalist[it].checked = true;
+            }
+          })
+        }
+        this.setData({
+          radio: e.detail,
+          datalists: datalists,
+        })
+      }
+    },
+    /**
      * @desc   : 给类型赋值
      * @author : 周兴
      * @date   : 2024/1/26 11:46
@@ -211,7 +240,7 @@ Component({
       let typeName = this.data.typeName
       let docName = this.data.docName
       let name = ''
-      console.log('typeName', typeName);
+      // console.log('typeName', typeName);
       // 部门
       if (typeName === 'org') {
         DataSourceCode = 'org'
@@ -244,14 +273,15 @@ Component({
     },
     setCheck() {
       let ids = this.data.ids
-      let dataList = [...this.data.datalist]
-      this.data.datalist.forEach(it => {
+      let datalists = this.data.datalists
+      let dataList = datalists[this.data.typeName]
+      dataList.forEach(it => {
         if (ids.some(it2 => it2 == it.id)) {
           it.checked = true
         }
       })
       this.setData({
-        datalist: dataList
+        datalists: datalists
       })
     },
     /**
@@ -266,11 +296,11 @@ Component({
         param.docName = this.data.docName
       }
 
-    
-      if(DataSourceCode === 'staff'  && this.data.jobIds && this.data.jobIds.length > 0 ){
+
+      if (DataSourceCode === 'staff' && this.data.jobIds && this.data.jobIds.length > 0) {
         param.jobIds = this.data.jobIds
       }
-      if(DataSourceCode === 'warehouse'){
+      if (DataSourceCode === 'warehouse') {
         param.cpId = app.globalData.user.cpId
       }
       return new Promise((resolve, reject) => {
@@ -293,13 +323,12 @@ Component({
       // 为了关闭外面的下拉
       this.triggerEvent('muticlose')
     },
-
     /**
      * 勾选或者勾选
      */
     checkItem: function (e) {
-     
-      let datalist = this.data.datalist
+      let datalists = this.data.datalists
+      let datalist = datalists[this.data.typeName]
       let finallist = this.data.finallist
       let id = e.target.dataset.id
       let count = this.data.count
@@ -331,7 +360,7 @@ Component({
       }
 
       this.setData({
-        datalist: datalist,
+        datalists: datalists,
         finallist: finallist,
         count: count,
         label_title: label_title
@@ -353,16 +382,18 @@ Component({
           datalist.push(item)
         }
       })
-
+      let datalists = this.data.datalists
+      datalists[this.data.typeName] = datalist
       this.setData({
-        datalist: datalist
+        datalists: datalists
       })
     },
     /**
      * 焦点离开事件
      */
     blur_input() {
-      if (this.data.datalist.length <= 0) {
+      let datalist = this.data.datalists[this.data.typeName]
+      if (datalist.length <= 0) {
         this.reset()
       }
     },
@@ -370,7 +401,7 @@ Component({
      * 重置
      */
     reset: function () {
-      let datalist = this.data.datalist
+      let datalists = this.data.datalists
       let finallist = this.data.finallist
 
       if (finallist == null || finallist.length === 0) return
@@ -380,12 +411,14 @@ Component({
       finallist.forEach(item => {
         item.checked = false
       })
-      datalist = [...finallist]
+      let datalist = [...finallist]
+      datalists[this.data.typeName] = datalist
       this.setData({
         finallist: finallist,
-        datalist: datalist,
+        datalists: datalists,
         condition: '',
         count: 0,
+        radio:[],
         label_title: '可选',
         defaultCheackFlag: true
       })
@@ -413,12 +446,13 @@ Component({
     clearAll() {
       // 清空控件
       this.setData({
-        datalist: [],
+        datalists: {},
         finallist: [],
         condition: '',
         isClickClear: true,
         dataValue: '',
         count: 0,
+        radio: [],
         label_title: '可选'
       })
     },
@@ -433,15 +467,16 @@ Component({
       })
 
       let datalist = [...finallist]
-      this.triggerEvent('muticommit', {
+      this.triggerEvent('commit', {
         ids: '',
         names: '',
-        qvUserids: ''
+        list: []
       })
-
+      let datalists = this.data.datalists
+      datalists[this.data.typeName]
       // 清空控件
       this.setData({
-        datalist: datalist,
+        datalists: datalists,
         finallist: finallist,
         condition: '',
         isClickClear: true,
@@ -458,18 +493,16 @@ Component({
       if (datalist == null || datalist.length === 0) return
       let ids = []
       let names = []
-      let qvUserids = []
       datalist.forEach(item => {
         if (item.checked) {
           ids.push(item.id)
           names.push(item.name)
-          qvUserids.push(item.qvUserid)
         }
       })
-      this.triggerEvent('muticommit', {
+      this.triggerEvent('commit', {
         ids: ids.join(','),
         names: names.join(','),
-        qvUserids: qvUserids.join(';'),
+        list: datalist.filter(it => it.checked),
         idList: ids,
       })
       this.setData({
@@ -483,7 +516,8 @@ Component({
       if (this.data.defaultCheackFlag && flag) {
         return
       }
-      let datalist = this.data.datalist
+      let datalists = this.data.datalists
+      let datalist = datalists[this.data.typeName]
       nameList.forEach(it => {
         datalist.forEach(res => {
           //判断接收参数是否跟原有一致
@@ -494,7 +528,7 @@ Component({
       })
       let finallist = [...datalist]
       this.setData({
-        datalist: datalist,
+        datalists: datalists,
         finallist: finallist
       })
     }

components/dkbusiness/dk-muti-dropdown-item/dk-muti-dropdown-item.wxml

@@ -1,3 +1,4 @@
+<wxs src='../../../utils/wxmlUtil.wxs' module="wxmlUtil"></wxs>
 <!-- 弹窗 -->
 <van-popup show="{{show}}" position="right" z-index="9999999" custom-style="overflow-x:hidden;width: 75%;z-index:9999999;height:100%;" bind:close="onClose">
  
@@ -13,7 +14,11 @@
    <view class="scroll_search" style="overflow-x:hidden;">
      <scroll-view class="scroll_position"  scroll-x="{{false}}" scroll-y enable-back-to-top>
        <view wx:if="{{Top_Height_Flag}}" style="height: 21vw;background: #fff;"></view>
-       <view wx:for="{{datalist}}" class="checkbos_padding" data-index="{{index}}" data-id="{{item.id}}">
+       <van-checkbox-group value="{{ radio }}" bind:change="onChange">
+          <van-checkbox wx:for="{{datalists[typeName]}}" shape="round" icon-size="16px"  data-index="{{index}}" data-id="{{item.id}}" name="{{index}}" custom-class="custom-class" checked-color="#1B365D" label-class="{{wxmlUtil.defineIndexOf(radio,index + '')>=0?'label-checked-class':'label-class'}}">{{item.name}}
+          </van-checkbox>
+        </van-checkbox-group>
+       <!-- <view wx:for="{{datalist}}" class="checkbos_padding" data-index="{{index}}" data-id="{{item.id}}">
          <van-cell custom-class="cell-class" border="{{false}}" title-width="280rpx"  clickable="{{true}}" bind:click="checkItem"  data-item="{{item.checked}}"  data-index="{{index}}" data-id="{{item.id}}">
            <view Slot="title">
              <van-checkbox other-style="display:flex;" use-icon-slot shape="square" value="{{ item.checked }}" data-index="{{index}}"  data-id="{{item.id}}">
@@ -24,7 +29,7 @@
              </van-checkbox>
            </view>
          </van-cell>
-       </view>
+       </view> -->
      </scroll-view>
    </view>
  </view>

components/dkbusiness/dk-muti-dropdown-item/dk-muti-dropdown-item.wxss

@@ -22,6 +22,24 @@
   font-size:14px;
 }
 
+.label-class{
+  margin-left:10rpx !important;
+  font-size: 13px;
+  color:#95A8CB !important;
+  width: 100%;
+}
+
+.label-checked-class{
+  margin-left:10rpx !important;
+  font-size: 13px;
+  color:#1B365D !important;
+  width: 100%;
+}
+
+.custom-class{
+  margin: 20rpx 40rpx 36rpx 40rpx;
+}
+
 .scroll_search {
   flex: 1;
   overflow: scroll;
@@ -113,4 +131,5 @@
   padding-top: 5px !important;
   padding-bottom: 5px !important;
 
-}
+}
+

components/dkbusiness/dk-single-dropdown-item/dk-single-dropdown-item.js

@@ -75,8 +75,11 @@ Component({
         }
         // 给类型赋值
         this.setDataSource();
-        let datalist = this.data.datalist;
-        if (datalist.length == 0) {
+        // let datalist = this.data.datalist;
+        let datalists = this.data.datalists;
+        let datalist = datalists[this.data.typeName] || []
+        // if (datalist.length == 0) {
+        if (!datalists[this.data.typeName] || datalists[this.data.typeName].length == 0) {
           let DataSourceCode = this.data.DataSourceCode
           let typeName = this.data.typeName
 
@@ -99,14 +102,19 @@ Component({
             datalist = list
             let finallist = [...datalist]
             this.setData({
-              datalist: datalist,
+              // datalist: datalist,
               finallist: finallist,
               radio: this.properties.content ? ("男" == this.properties.content ? 0 : ("女" == this.properties.content1 ? 1 : 2)) : ''
             })
           } else {
             this.getdata(DataSourceCode).then(res => {
               let list = res.data.data
-              if (list == null || list.length <= 0) return
+              if (list == null || list.length <= 0){
+                this.setData({
+                  datalist:[]
+                })
+                return;
+              }
 
               let datalist = []
 
@@ -182,8 +190,10 @@ Component({
               } 
 
               let finallist = [...datalist]
+              datalists[this.data.typeName] = [...datalist]
               this.setData({
-                datalist: datalist,
+                // datalist: datalist,
+                datalists:datalists,
                 finallist: finallist
               })
             })
@@ -192,11 +202,11 @@ Component({
         } else {
           if (this.properties.contentID) {
             // 重刷选中项
-            datalist.forEach(item => {
+            datalists[this.data.typeName].forEach(item => {
               item.checked = item.id == this.properties.contentID ? true : false;
             })
             this.setData({
-              datalist: datalist
+              datalists: datalists,
             })
           }
         }
@@ -211,7 +221,7 @@ Component({
     DataSourceCode: '',
     // 是否点击清除按钮
     isClickClear: false,
-    datalist: [],
+    // datalist: [],
     finallist: [],
     condition: '',
     dataValue: '',
@@ -221,6 +231,7 @@ Component({
     radio: null,
     label_title: '可选',
     count: 0,
+    datalists:{},
     pageInfo: {
       pageSize: 5,
       currentPage: 1
@@ -409,7 +420,7 @@ Component({
      * 焦点离开事件
      */
     blur_input() {
-      if (this.data.datalist.length <= 0) {
+      if (this.data.datalists[this.data.typeName].length <= 0) {
         this.reset()
       }
     },
@@ -419,7 +430,7 @@ Component({
      * @date   : 2024/1/26 11:46
      */
     onChange(e) {
-      let datalist = this.data.datalist
+      let datalist = this.data.datalists[this.data.typeName] || []
       if (datalist && datalist.length > e.detail) {
         datalist.forEach(it => {
           it.checked = false;
@@ -428,7 +439,7 @@ Component({
         let item = datalist[e.detail];
         this.setData({
           radio: e.detail,
-          datalist: datalist,
+          // datalist: datalist,
           show: false
         })
         this.triggerEvent('commit', {
@@ -470,17 +481,19 @@ Component({
             radio: nmb - 1
           })
         }
-
       })
+      let datalists = this.data.datalists
+      datalists[this.data.typeName] = datalist
       this.setData({
-        datalist: datalist
+        datalists: datalists
       })
     },
     /**
      * 重置
      */
     reset: function () {
-      let datalist = this.data.datalist
+      // let datalist = this.data.datalist
+      let datalist = this.data.datalists[this.data.typeName]
       let finallist = this.data.finallist
       if (finallist == null || finallist.length === 0) return
 
@@ -492,7 +505,8 @@ Component({
 
       this.setData({
         finallist: finallist,
-        datalist: datalist,
+        // datalist: datalist,
+        datalists:datalists,
         condition: '',
         radio: '',
 
@@ -532,15 +546,19 @@ Component({
         ids: '',
         names: ''
       })
+      let datalists = this.data.datalists
+      datalists[thsi.data.typeName] = datalist
 
       // 清空控件
       this.setData({
-        datalist: datalist,
+        // datalist: datalist,
+        datalists:datalists,
         finallist: finallist,
         condition: '',
         isClickClear: true,
         dataValue: '',
         count: 0,
+        radio:null,
         label_title: '可选',
         defaultCheackFlag: true
       })
@@ -549,9 +567,9 @@ Component({
      * 提交
      */
     commit: function () {
-      let datalist = this.data.datalist
+      // let datalist = this.data.datalist
+      let datalist = this.data.datalists[this.data.typeName]
       if (datalist == null || datalist.length === 0) return
-      console.log('item', datalist);
       // 获取选中的那条数据
       let filters = datalist.filter(it => it.checked);
       if (filters && filters.length > 0) {
@@ -572,7 +590,8 @@ Component({
       if (this.data.defaultCheackFlag && flag) {
         return
       }
-      let datalist = this.data.datalist
+      // let datalist = this.data.datalist
+      let datalist = this.data.datalists[this.data.typeName]
       nameList.forEach(it => {
         datalist.forEach(res => {
           //判断接收参数是否跟原有一致
@@ -583,14 +602,16 @@ Component({
       })
       let finallist = [...datalist]
       this.setData({
-        datalist: datalist,
+        // datalist: datalist,
+        datalists:datalists,
         finallist: finallist
       })
     }
   },
   //如果数据没有更改 恢复原来数据 param 需要还原的数据 IDName 更改组件名字
   replyCheckedData() {
-    let datalist = this.data.datalist
+    // let datalist = this.data.datalist
+    let datalist = this.data.datalists[this.data.typeName]
     //调用重置
     // this.reset()
 

components/dkbusiness/dk-single-dropdown-item/dk-single-dropdown-item.wxml

@@ -12,7 +12,7 @@
       <scroll-view class="scroll_position" scroll-x="{{false}}" scroll-y enable-back-to-top>
 
         <van-radio-group value="{{ radio }}" bind:change="onChange">
-          <van-radio wx:for="{{datalist}}" shape="round" icon-size="16px"  data-index="{{index}}" data-id="{{item.id}}" name="{{index}}" custom-class="custom-class" checked-color="#1B365D" label-class="{{radio==index?'label-checked-class':'label-class'}}">{{item.name}}
+          <van-radio wx:for="{{datalists[typeName]}}" shape="round" icon-size="16px"  data-index="{{index}}" data-id="{{item.id}}" name="{{index}}" custom-class="custom-class" checked-color="#1B365D" label-class="{{radio==index?'label-checked-class':'label-class'}}">{{item.name}}
           </van-radio>
         </van-radio-group>
 

components/dkbusiness/dk-single-dropdown-item/dk-single-dropdown-item.wxss

@@ -37,13 +37,15 @@
 .label-class{
   margin-left:10rpx !important;
   font-size: 13px;
-  color:#95A8CB !important
+  color:#95A8CB !important;
+  width: 100%;
 }
 
 .label-checked-class{
   margin-left:10rpx !important;
   font-size: 13px;
-  color:#1B365D !important
+  color:#1B365D !important;
+  width: 100%;
 }
 
 .custom-class{