工作组项目管理；资料群组维护

src/api/incomePaymentsApi.js

@@ -0,0 +1,7 @@
+import { getAction } from '@api/manage'
+
+const getWorkingGroupById = (params) => getAction('/project/payWorkingGroup/queryById', params)
+
+export {
+	getWorkingGroupById
+}

src/views/dataNetworkDiskManagement/committee/CommitteeMaintenance.vue

@@ -1,97 +1,91 @@
 <template>
-  <a-card :bordered="false">
-    <!--    查询区域-start -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select placeholder="请选择分标委名称"
-                        show-search
-                        option-filter-prop="children"
-                        v-model="queryParam.name"
-                        :filter-option="filterOption">
-                <a-select-option v-for="item in dataSource" :key="item.id" :value="item.name">{{ item.name }}</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input placeholder="请输入用户名称" v-model="queryParam.contactsName"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="群组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入群组名称" v-model="queryParam.fenBiaoWeiName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入用户名称" v-model="queryParam.contactsName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span class="table-page-search-submitButtons">
               <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
               <a-button icon="reload" @click="searchReset">重置</a-button>
             </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!--    查询区域-end-->
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    查询区域-end-->
 
-    <!--    操作按钮区域-->
-    <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
-      <a-button type="primary" icon="export" @click="handleExportXls('分标委维护')">导出</a-button>
-      <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
-    </div>
-    <!--    操作按钮区域-end-->
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="plus" @click="handleAdd">新增群组</a-button>
+        <a-button type="primary" icon="export" @click="handleExportXls('群组维护')">导出</a-button>
+        <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
 
-    <!--    table表格区域-->
-    <div>
-      <a-table rowKey="id"
-               :scroll="{x: 1300}"
-               :columns="columns"
-               :data-source="dataSource"
-               :pagination="ipagination"
-               bordered
-               :loading="loading"
-               class="j-table-force-nowrap">
-        <template slot="text" slot-scope="text,record">
-          <j-ellipsis :value="text" :length="20"></j-ellipsis>
-        </template>
+      <!--    table表格区域-->
+      <div>
+        <a-table rowKey="id"
+                 :scroll="{x: 1300}"
+                 :columns="columns"
+                 :data-source="dataSource"
+                 :pagination="ipagination"
+                 bordered
+                 :loading="loading"
+                 class="j-table-force-nowrap">
+          <template slot="text" slot-scope="text,record">
+            <j-ellipsis :value="text" :length="20"></j-ellipsis>
+          </template>
 
-        <span slot="operation" class="action-span-cell" slot-scope="text, record">
-          <a @click="handleAddCommitteeMember(record)">新增委员</a>
+          <span slot="operation" class="action-span-cell" slot-scope="text, record">
+          <a @click="handleAddCommitteeMember(record)">新增成员</a>
           <a @click="handleEdit(record)">编辑</a>
           <a @click="handleDelete(record.id)">删除</a>
         </span>
 
-        <a-table
-            rowKey="id"
-            slot="expandedRowRender"
-            slot-scope="text, record"
-            :columns="committeeMemberColumns"
-            :data-source="record.committeeMember"
-            :pagination="false"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-            @change="handleTableChange"
-            class="j-table-force-nowrap">
-          <template slot="textRow" slot-scope="text,record">
-            <j-ellipsis :value="text" :length="20"></j-ellipsis>
-          </template>
+          <a-table
+              rowKey="childrenId"
+              slot="expandedRowRender"
+              slot-scope="record"
+              :columns="committeeMemberColumns"
+              :data-source="record.list"
+              :pagination="false"
+              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+              class="j-table-force-nowrap">
+            <template slot="textRow" slot-scope="text, itemRecord">
+              <j-ellipsis :value="text" :length="20"></j-ellipsis>
+            </template>
 
-          <span slot="action" class="action-span-cell" slot-scope="text, record">
-            <a @click="handleEdit(record)">编辑</a>
-            <a @click="handleDelete(record.id)">删除</a>
+            <span slot="action" class="action-span-cell" slot-scope="text, itemRecord">
+            <a @click="handleDeleteMember(itemRecord.childrenId)">删除</a>
           </span>
+          </a-table>
         </a-table>
-      </a-table>
-    </div>
-    <!--    /table表格区域-->
+      </div>
+      <!--    /table表格区域-->
 
-    <!--    新增分标委-->
-    <committee-module ref="modalForm" @ok="modalFormOk"></committee-module>
-
-    <committee-member-module ref="memberModalForm" @ok="modalFormOk"></committee-member-module>
-  </a-card>
+      <!--    新增群组-->
+      <committee-module ref="modalForm" @ok="modalFormOk"></committee-module>
+      <committee-member-module ref="memberModalForm" @ok="modalFormOk"></committee-member-module>
+    </a-card>
+  </div>
 </template>
 
 <script>
@@ -99,13 +93,16 @@ import { JeroListMixin } from '@/mixins/JeroListMixin'
 import CommitteeModule from '@views/dataNetworkDiskManagement/committee/modules/CommitteeModule'
 import CommitteeMemberModule from '@views/dataNetworkDiskManagement/committee/modules/CommitteeMemberModule'
 import { getAction } from '@api/manage'
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_committee.png'
 
 export default {
   name: 'CommitteeMaintenance',
-  components: { CommitteeModule, CommitteeMemberModule },
+  components: { CommitteeModule, CommitteeMemberModule, PageHeaderTitle },
   mixins: [JeroListMixin],
   data() {
     return {
+      IconImg,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }
@@ -115,11 +112,11 @@ export default {
         sm: { span: 10 }
       },
       url: {
-        list: '/payCaseCommittee/payCaseCommittee/list',
-        committeeMemberList: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/list',
-        delete: '',
-        deleteBatch: '',
-        exportXlsUrl: ''
+        list: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/find',
+        delete: '/payCaseCommittee/payCaseCommittee/delete',
+        deleteMember: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/delete',
+        deleteBatch: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/deleteBatch',
+        exportXlsUrl: '/payCaseCommittee/payCaseCommittee/exportXls'
       },
       // 父级表头
       columns: [
@@ -133,7 +130,7 @@ export default {
             return parseInt(index) + 1
           }
         }, {
-          title: '分标委名称',
+          title: '群组名称',
           align: 'center',
           dataIndex: 'name',
           scopedSlots: { customRender: 'text' }
@@ -145,7 +142,7 @@ export default {
           scopedSlots: { customRender: 'operation' }
         }
       ],
-      // 委员表头
+      // 成员表头
       committeeMemberColumns: [
         {
           title: '序号',
@@ -159,7 +156,7 @@ export default {
         }, {
           title: '姓名',
           align: 'center',
-          dataIndex: 'contactsName',
+          dataIndex: 'peopleName',
           scopedSlots: { customRender: 'textRow' }
         }, {
           title: '企业名称',
@@ -169,12 +166,12 @@ export default {
         }, {
           title: '职务',
           align: 'center',
-          dataIndex: '',
+          dataIndex: 'post',
           scopedSlots: { customRender: 'textRow' }
         }, {
           title: '手机号',
           align: 'center',
-          dataIndex: '',
+          dataIndex: 'phone',
           scopedSlots: { customRender: 'textRow' }
         }, {
           title: '操作',
@@ -188,61 +185,49 @@ export default {
     }
   },
   methods: {
-    loadData(arg) {
-      if (!this.url.list) {
-        this.$message.error("请设置url.list属性!")
-        return
-      }
-      //加载数据 若传入参数1则加载第一页的内容
-      if (arg === 1) {
-        this.ipagination.current = 1;
-      }
-      let params = this.getQueryParams();//查询条件
-      this.loading = true;
-      getAction(this.url.list, params).then((res) => {
-        if (res.success) {
-          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
-          this.dataSource = res.result.records
-          if (this.dataSource.length > 0) {
-            this.dataSource.forEach(item => {
-              const param = {
-                committeeId: item.id
-              }
-              getAction(this.url.committeeMemberList, param).then(tt =>{
-                item.committeeMember = tt.result.records
-              })
-            })
-          }
-          if (res.result.total) {
-            this.ipagination.total = res.result.total;
-            //清空列表选中
-            this.onClearSelected()
-          } else {
-            this.ipagination.total = 0;
-          }
-          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
-        }
-        if (res.code === 510) {
-          this.$message.warning(res.message)
-        }
-        this.loading = false;
-      }).finally(() => {
-        this.loading = false
-      })
-    },
     // 下拉框的搜索
     filterOption(input, option) {
       return (
           option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       )
     },
+    handleAdd() {
+      this.$refs.modalForm.add();
+      this.$refs.modalForm.title = "新增群组";
+      this.$refs.modalForm.disableSubmit = false;
+    },
+    /**
+     * 新增成员
+     * @param record
+     */
     handleAddCommitteeMember(record) {
-      console.log(record)
       record.committeeId = record.id
       this.$refs.memberModalForm.add(record);
       this.$refs.memberModalForm.title = "新增成员";
       this.$refs.memberModalForm.disableSubmit = false;
-    }
+    },
+    handleDeleteMember(id) {
+      console.log(id)
+      if (!this.url.deleteMember) {
+        this.$message.error("请设置url.deleteMember属性!")
+        return
+      }
+      var that = this;
+      this.$confirm({
+        title: "确认删除",
+        content: "确定要删除此条数据吗?",
+        onOk: function () {
+          getAction(that.url.deleteMember, {id: id}).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message);
+              that.loadData();
+            } else {
+              that.$message.warning(res.message);
+            }
+          });
+        }
+      });
+    },
   }
 }
 </script>

src/views/dataNetworkDiskManagement/committee/modules/CommitteeMemberModule.vue

@@ -12,8 +12,8 @@
       <a-form :form="form">
         <a-row>
           <a-col :xl="12" :sm="24">
-            <a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input placeholder="请输入分标委名称"
+            <a-form-item label="群组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入群组名称"
                        v-decorator="['name',validatorRules.name]"
                        :disabled="true"
                        :maxLength='50'
@@ -112,6 +112,9 @@ export default {
           rules: [{ required: true, message: '请选择联系人' }],
           validateTrigger: 'blur'
         }
+      },
+      url: {
+        add: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/add'
       }
     }
   },
@@ -120,9 +123,13 @@ export default {
       this.edit(record)
     },
     edit(record) {
+      console.log(record)
       this.form.resetFields()
-      this.model = Object.assign({}, record)
-      console.log(this.model, '=========')
+      let recordValue = {
+        name: record.name,
+        committeeId: record.id
+      }
+      this.model = Object.assign({}, recordValue)
       this.visible = true
       this.$nextTick(() => {
         this.form.setFieldsValue(pick(this.model, 'name'))
@@ -137,16 +144,16 @@ export default {
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
-          values.dataSource = this.dataForm
-          values.signingUp = this.applyAdd
-          let httpurl = ''
+          let httpurl = this.url.add
           let method = 'post'
-          if (!this.model.id) {
-            httpurl += this.url.add
-          } else {
-            httpurl += this.url.edit
+          const submitValue = Object.assign(this.model, values)
+          const formData = {
+            committeeId: submitValue.committeeId,
+            companyId: submitValue.companyId,
+            companyName: submitValue.companyName,
+            contactsId: submitValue.contactsId,
+            contactsName: submitValue.contactsName
           }
-          const formData = Object.assign(this.model, values)
           console.log('表单提交数据', formData)
           httpAction(httpurl, formData, method).then((res) => {
             if (res.success) {
@@ -173,8 +180,11 @@ export default {
       console.log(value)
       this.selectedCompany = value
       this.model.contactsId = undefined
+      this.model.email = undefined
+      this.model.phone = undefined
+      this.model.post = undefined
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.model, 'contactsId', 'mailContactsId'))
+        this.form.setFieldsValue(pick(this.model, 'contactsId', 'email', 'phone', 'post'))
       })
     },
     /**

src/views/dataNetworkDiskManagement/committee/modules/CommitteeModule.vue

@@ -64,6 +64,10 @@ export default {
           rules: [{ required: true, message: '请输入分标委名称' }],
           validateTrigger: 'blur'
         }
+      },
+      url: {
+        add: '/payCaseCommittee/payCaseCommittee/add',
+        edit: '/payCaseCommittee/payCaseCommittee/edit'
       }
     }
   },
@@ -76,7 +80,7 @@ export default {
       this.model = Object.assign({}, record)
       this.visible = true
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.model, ))
+        this.form.setFieldsValue(pick(this.model, 'name', 'remark'))
       })
     },
     close() {
@@ -88,8 +92,6 @@ export default {
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
-          values.dataSource = this.dataForm
-          values.signingUp = this.applyAdd
           let httpurl = ''
           let method = 'post'
           if (!this.model.id) {
@@ -97,6 +99,7 @@ export default {
           } else {
             httpurl += this.url.edit
           }
+          console.log(values, '============')
           const formData = Object.assign(this.model, values)
           console.log('表单提交数据', formData)
           httpAction(httpurl, formData, method).then((res) => {

src/views/projectManagement/GeneralProjectManagement.vue

@@ -13,7 +13,7 @@
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <a-input placeholder="请输入来款单位" v-model="queryParam.chargeCompanyName"></a-input>
+                <a-input placeholder="请输入来款单位" v-model="queryParam.chargeCompanyTemporaryName"></a-input>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -28,7 +28,7 @@
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <a-input placeholder="请输入来款项目" v-model="queryParam.businessName"></a-input>
+                <a-input placeholder="请输入联系人" v-model="queryParam.contactsTemporaryName"></a-input>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -162,7 +162,7 @@ export default {
           title: '来款单位',
           align: 'center',
           width: 200,
-          dataIndex: 'chargeCompanyName',
+          dataIndex: 'chargeCompanyTemporaryName',
           scopedSlots: { customRender: 'text' }
         }, {
           title: '应收金额',
@@ -184,7 +184,7 @@ export default {
           title: '企业联系人',
           align: 'center',
           width: 140,
-          dataIndex: 'contactsName',
+          dataIndex: 'contactsTemporaryName',
           scopedSlots: { customRender: 'text' }
         }, {
           title: '打包',

src/views/projectManagement/MemberUnitMaintenance.vue

@@ -2,25 +2,31 @@
   <div>
     <page-header-title :is-level-one="false" :level-two-title="workingGroupProject"></page-header-title>
     <a-card :bordered="false">
+      <div class="part-title"><div class="part-title-text">工作组信息</div></div>
       <!--    工作组信息区域-->
       <div class="work-group-detail">
-        <div class="work-group-detail-item work-group-detail-item-small" v-for="item in detailTitleList"
+        <div class="work-group-detail-item work-group-detail-item-small"
+             v-for="item in detailTitleList"
              :key="item.title">
           <div class="work-group-detail-item-title">{{ item.title }}:</div>
-          <div class="work-group-detail-item-content"></div>
+          <div class="work-group-detail-item-content" v-if="item.fieldName === 'chargeNoticeAId' || item.fieldName === 'chargeNoticeBId'">
+            {{ workingGroupDetail[item.fieldName] }}
+          </div>
+          <div class="work-group-detail-item-content" v-else>{{ workingGroupDetail[item.fieldName] }}</div>
         </div>
         <div class="work-group-detail-item">
           <div class="work-group-detail-item-title">任务及目标:</div>
-          <div class="work-group-detail-item-content"></div>
+          <div class="work-group-detail-item-content">{{ workingGroupDetail.missionAndObjectives }}</div>
         </div>
         <div class="work-group-detail-item">
           <div class="work-group-detail-item-title">备注:</div>
-          <div class="work-group-detail-item-content"></div>
+          <div class="work-group-detail-item-content">{{ workingGroupDetail.remarks }}</div>
         </div>
       </div>
       <!--    /工作组信息区域-->
 
       <!--    查询区域-->
+      <div class="part-title"><div class="part-title-text">成员信息</div></div>
       <div class="table-page-search-wrapper">
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row>
@@ -99,6 +105,7 @@
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JYearDate from '@comp/jero/JYearDate'
 import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import { getWorkingGroupById } from '@api/incomePaymentsApi'
 
 export default {
   name: 'MemberUnitMaintenance',
@@ -111,42 +118,43 @@ export default {
   },
   data() {
     return {
+      disableMixinCreated: true,
       workingGroupProject: '',
       workingGroupProjectId: '',
       detailTitleList: [
         {
           title: '工作组项目名称',
-          fieldName: ''
+          fieldName: 'workingGroupProject'
         }, {
           title: '负责人A',
-          fieldName: ''
+          fieldName: 'principalNameA'
         }, {
           title: '负责人B',
-          fieldName: ''
+          fieldName: 'principalNameB'
         }, {
           title: '每年召开次数',
-          fieldName: ''
+          fieldName: 'convokeNum'
         }, {
           title: '运行周期',
-          fieldName: ''
+          fieldName: 'operationCycle'
         }, {
           title: '本年应收款A',
-          fieldName: ''
+          fieldName: 'yearChargeA'
         }, {
           title: '收费通知号A',
-          fieldName: ''
+          fieldName: 'chargeNoticeNoA'
         }, {
           title: '收费通知A',
-          fieldName: ''
+          fieldName: 'chargeNoticeAId'
         }, {
           title: '本年应收款B',
-          fieldName: ''
+          fieldName: 'yearChargeB'
         }, {
           title: '收费通知号B',
-          fieldName: ''
+          fieldName: 'chargeNoticeNoB'
         }, {
           title: '收费通知B',
-          fieldName: ''
+          fieldName: 'chargeNoticeBId'
         }
       ],
       labelCol: {
@@ -229,17 +237,26 @@ export default {
           width: 180,
           scopedSlots: { customRender: 'action' }
         }
-      ]
+      ],
+      workingGroupDetail: {}
     }
   },
   created() {
-    this.workingGroupProject = this.$route.query.workingGroupProject
-    this.workingGroupProjectId = this.$route.query.workingGroupProjectId
+    // 初始化工作组信息
+    this.initWorkGruopData()
   },
   methods: {
-    backWorkingGroupProject() {
-      this.$router.push({
-        path: '/projectManagement/WorkingGroupProjectManagement'
+    /**
+     * 初始化工作组信息
+     */
+    initWorkGruopData() {
+      this.workingGroupProject = this.$route.query.workingGroupProject
+      this.workingGroupProjectId = this.$route.query.workingGroupProjectId
+      let param = {
+        id: this.workingGroupProjectId
+      }
+      getWorkingGroupById(param).then(res => {
+        this.workingGroupDetail = res.result
       })
     }
   }
@@ -249,12 +266,28 @@ export default {
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
-.title {
+.part-title {
+  padding: 10px 0;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  color: #333333;
+  position: relative;
 
   &-text {
-    padding-left: 1rem;
-    font-size: 18px;
-    line-height: 22px;
+    padding-left: 20px;
+  }
+
+  &-text::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    background: #069f99;
   }
 }
 
@@ -277,15 +310,17 @@ export default {
     display: flex;
     padding: 5px 5px;
     width: 100%;
+    font-size: 14px;
 
     &-title {
       flex-shrink: 0;
-      color: #9e9e9e;
+      color: #999999;
     }
 
     &-content {
       padding-left: 5px;
       word-break: break-all;
+      color: #2F3133;
     }
   }
 }

src/views/projectManagement/WorkingGroupProjectManagement.vue

@@ -239,11 +239,11 @@ export default {
   }
 
   &-partial-payment {
-    background-color: rgb(0, 133, 192);
+    background: linear-gradient(0deg,#0075a9 0%, #0096d8 100%);
   }
 
   &-non-payment {
-    background-color: rgb(232, 232, 232);
+    background: #e8e8e8;
   }
 }
 </style>