浏览代码

统一按钮颜色,可global.less 中自定义

lilei 4 年之前
父节点
当前提交
6e8ff6d337

+ 106 - 0
src/components/global.less

@@ -534,3 +534,109 @@ body {
     }
   }
 }
+
+/* 扩展ant design pro按钮组件颜色 */
+.ant-btn.button-primary {
+  background-color: #39f;
+  border-color: #39f;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #52a6fb;
+    border-color: #52a6fb;
+  }
+ 
+  &:active, &.active {
+    background-color: #3d80bf;
+    border-color: #3d80bf;
+  }
+}
+ 
+.ant-btn.button-info {
+  background-color: #2db7f5;
+  border-color: #2db7f5;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #32c8f5;
+    border-color: #32c8f5;
+  }
+ 
+  &:active, &.active {
+    background-color: #27a3d8;
+    border-color: #27a3d8;
+  }
+}
+ 
+.ant-btn.button-success {
+  background-color: #0c6;
+  border-color: #0c6;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #01dc8c;
+    border-color: #01dc8c;
+  }
+ 
+  &:active, &.active {
+    background-color: #00af57;
+    border-color: #00af57;
+  }
+}
+ 
+.ant-btn.button-warning {
+  background-color: #f90;
+  border-color: #f90;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #ffb60a;
+    border-color: #ffb60a;
+  }
+ 
+  &:active, &.active {
+    background-color: #dd8500;
+    border-color: #dd8500;
+  }
+}
+ 
+.ant-btn.button-error {
+  background-color: #f30;
+  border-color: #f30;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #ff4639;
+    border-color: #ff4639;
+  }
+ 
+  &:active, &.active {
+    background-color: #d62a00;
+    border-color: #d62a00;
+  }
+}
+ 
+.ant-btn.button-geekblue {
+  background-color: #2F54EB;
+  border-color: #2F54EB;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #1d39c4;
+    border-color: #1d39c4;
+  }
+ 
+  &:active, &.active {
+    background-color: #597ef7;
+    border-color: #597ef7;
+  }
+}
+ 
+.ant-btn.button-purple {
+  background-color: #722ED1;
+  border-color: #722ED1;
+  margin: 0 5px;
+  &:hover, &:focus {
+    background-color: #9254de;
+    border-color: #9254de;
+  }
+ 
+  &:active, &.active {
+    background-color: #531dab;
+    border-color: #531dab;
+  }
+}

+ 12 - 12
src/views/financialManagement/companyCollectionPayment/list.vue

@@ -83,15 +83,15 @@
       bordered>
       <!-- 结算单号 -->
       <template slot="purchaseNo" slot-scope="text, record">
-        <span style="color: #ed1c24;cursor: pointer;" @click="handleDetail(record)">{{record.purchaseNo}}</span>
+        <span style="color: #ed1c24;cursor: pointer;" @click="handleDetail(record)">{{ record.purchaseNo }}</span>
       </template>
       <!-- 结算方式 -->
       <template slot="sss" slot-scope="text, record">
-        <span>{{record.state == 1 ? '现金' : '微信'}}</span>
+        <span>{{ record.state == 1 ? '现金' : '微信' }}</span>
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" @click="handleDetail(record)" id="companyCollectionPaymentList-detail-btn">详情</a-button>
+        <a-button size="small" type="primary" class="button-success" @click="handleDetail(record)" id="companyCollectionPaymentList-detail-btn">详情</a-button>
       </template>
     </s-table>
   </a-card>
@@ -104,7 +104,7 @@ export default {
   components: { STable, VSelect },
   data () {
     return {
-      advanced: false,  //  高级搜索 展开/关闭
+      advanced: false, //  高级搜索 展开/关闭
       disabled: false, //  查询、重置按钮是否可操作
       // 查询参数
       queryParam: {},
@@ -134,7 +134,7 @@ export default {
         //   return data
         // })
         const _this = this
-        return new Promise(function(resolve, reject){
+        return new Promise(function (resolve, reject) {
           const data = {
             pageNo: 1,
             pageSize: 10,
@@ -150,20 +150,20 @@ export default {
           _this.disabled = false
           resolve(data)
         })
-      },
+      }
     }
   },
   methods: {
     //  详情
-    handleDetail(row){
-      this.$router.push({ path: `/financialManagement/companyCollectionPayment/detail/${row.id}`})
+    handleDetail (row) {
+      this.$router.push({ path: `/financialManagement/companyCollectionPayment/detail/${row.id}` })
     },
     //  审核
-    handleExamine(row, type){
+    handleExamine (row, type) {
       const _this = this
       this.$confirm({
         title: '提示',
-        content: '操作后不可恢复,确定要进行'+ (type==1 ? ' 通过 ' : ' 不通过 ') +'操作吗?',
+        content: '操作后不可恢复,确定要进行' + (type == 1 ? ' 通过 ' : ' 不通过 ') + '操作吗?',
         centered: true,
         onOk () {
           // delectRolePower({
@@ -187,7 +187,7 @@ export default {
       this.oldTime = undefined
       this.newTime = undefined
       this.$refs.table.refresh(true)
-    },
+    }
   }
 }
 </script>
@@ -197,4 +197,4 @@ export default {
       margin-top: 15px;
     }
   }
-</style>
+</style>

+ 4 - 6
src/views/financialManagement/companyReceivablePayable/list.vue

@@ -44,11 +44,9 @@
       bordered>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" @click="handleCollection(record)" id="companyReceivablePayableList-collection-btn">收款</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handlePayment(record)" id="companyReceivablePayableList-payment-btn">付款</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleDetail(record)" id="companyReceivablePayableList-detail-btn">详情</a-button>
+        <a-button size="small" type="primary" class="button-info" @click="handleCollection(record)" id="companyReceivablePayableList-collection-btn">收款</a-button>
+        <a-button size="small" type="primary" class="button-warning" @click="handlePayment(record)" id="companyReceivablePayableList-payment-btn">付款</a-button>
+        <a-button size="small" type="primary" class="button-success" @click="handleDetail(record)" id="companyReceivablePayableList-detail-btn">详情</a-button>
       </template>
     </s-table>
   </a-card>
@@ -71,7 +69,7 @@ export default {
         { title: '单位类型', dataIndex: 'pssayType', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '应收金额', dataIndex: 'totalP', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
         { title: '应付金额', dataIndex: 'tostalP', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 180, align: 'center' }
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 250, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {

+ 7 - 12
src/views/financialManagement/expenseManagement/list.vue

@@ -94,17 +94,12 @@
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" @click="handleExamine(record, 1)" id="expenseManagement-adopt-btn">通过</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleExamine(record, 2)" id="expenseManagement-unadopt-btn">不通过</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleEdit(record)" id="expenseManagement-edit-btn">编辑</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleSubmit(record)" id="expenseManagement-submit-btn">提交</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleDetail(record)" id="expenseManagement-detail-btn">详情</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleDel(record)" id="expenseManagement-del-btn">删除</a-button>
+        <a-button size="small" type="primary" class="button-info" @click="handleExamine(record, 1)" id="expenseManagement-adopt-btn">通过</a-button>
+        <a-button size="small" type="primary" class="button-warning" @click="handleExamine(record, 2)" id="expenseManagement-unadopt-btn">不通过</a-button>
+        <a-button size="small" type="primary" class="button-primary" @click="handleEdit(record)" id="expenseManagement-edit-btn">编辑</a-button>
+        <a-button size="small" type="primary" class="button-geekblue" @click="handleSubmit(record)" id="expenseManagement-submit-btn">提交</a-button>
+        <a-button size="small" type="primary" class="button-success" @click="handleDetail(record)" id="expenseManagement-detail-btn">详情</a-button>
+        <a-button size="small" type="primary" class="button-error" @click="handleDel(record)" id="expenseManagement-del-btn">删除</a-button>
       </template>
     </s-table>
     <!-- 详情 -->
@@ -133,7 +128,7 @@ export default {
         { title: '金额', dataIndex: 'totalAmount', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
         { title: '单据状态', scopedSlots: { customRender: 'auditStatus' }, width: 110, align: 'center' },
         { title: '结算状态', scopedSlots: { customRender: 'financialStatus' }, width: 110, align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 320, align: 'center', fixed: 'right' }
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 450, align: 'center', fixed: 'right' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {

+ 5 - 3
src/views/financialManagement/financialCollection/list.vue

@@ -1,7 +1,7 @@
 <template>
   <a-card size="small" :bordered="false" class="financialCollectionList-wrap">
     <!-- 标签页 -->
-    <a-tabs type="card" default-active-key="ALL" @change="handleTabChange" class="finacialPay-tabs">
+    <a-tabs type="card" default-active-key="ALL" @change="handleTabChange" class="financialCollectionList-tabs ">
       <a-tab-pane v-for="item in tabPaneData" :key="item.bizType">
         <span slot="tab">{{ item.bizName }}({{ item.countNum }})</span>
       </a-tab-pane>
@@ -88,14 +88,16 @@
       <template slot="action" slot-scope="text, record">
         <a-button
           size="small"
-          type="link"
+          type="primary"
+          class="button-info"
           v-if="record.settleState == 'FINISH'"
           @click="handleVoucher(record)"
           id="financialCollectionList-voucher-btn">凭证</a-button>
         <a-button
           size="small"
-          type="danger"
+          type="primary"
           :loading="loading"
+          class="button-warning"
           v-else
           @click="handleCollectionSing(record)"
           id="financialCollectionList-pay-btn">收款</a-button>

+ 4 - 2
src/views/financialManagement/financialPayment/list.vue

@@ -87,13 +87,15 @@
       <template slot="action" slot-scope="text, record">
         <a-button
           size="small"
-          type="link"
+          type="primary"
+          class="button-info"
           v-if="record.settleState == 'FINISH'"
           @click="handleVoucher(record)"
           id="finacialPay-voucher-btn">凭证</a-button>
         <a-button
           size="small"
-          type="danger"
+          type="primary"
+          class="button-warning"
           :loading="loading"
           v-else
           @click="handlePay(record)"

+ 15 - 17
src/views/financialManagement/inventoryReview/list.vue

@@ -50,23 +50,21 @@
       bordered>
       <!-- 采购单号 -->
       <template slot="purchaseNo" slot-scope="text, record">
-        <span style="color: #ed1c24;cursor: pointer;">{{record.purchaseNo}}</span>
+        <span style="color: #ed1c24;cursor: pointer;">{{ record.purchaseNo }}</span>
       </template>
       <!-- 采购入库单号 -->
       <template slot="purchaseNos" slot-scope="text, record">
-        <span style="color: #ed1c24;cursor: pointer;">{{record.purchaseNo}}</span>
+        <span style="color: #ed1c24;cursor: pointer;">{{ record.purchaseNo }}</span>
       </template>
       <!-- 状态 -->
       <template slot="state" slot-scope="text, record">
-        <span>{{record.state == 1 ? '已启用' : '已禁用'}}</span>
+        <span>{{ record.state == 1 ? '已启用' : '已禁用' }}</span>
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" @click="handleExamine(record, 1)" id="inventoryReview-adopt-btn">通过</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleExamine(record, 2)" id="inventoryReview-unadopt-btn">不通过</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleDetail(record)" id="inventoryReview-detail-btn">详情</a-button>
+        <a-button size="small" type="primary" class="button-info" @click="handleExamine(record, 1)" id="inventoryReview-adopt-btn">通过</a-button>
+        <a-button size="small" type="primary" class="button-warning" @click="handleExamine(record, 2)" id="inventoryReview-unadopt-btn">不通过</a-button>
+        <a-button size="small" type="primary" class="button-success" @click="handleDetail(record)" id="inventoryReview-detail-btn">详情</a-button>
       </template>
     </s-table>
   </a-card>
@@ -93,7 +91,7 @@ export default {
         { title: '盘点审核时间', dataIndex: 'sauditTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
         { title: '财务审核时间', dataIndex: 'auditTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
         { title: '财务审核状态', scopedSlots: { customRender: 'auditStatus' }, width: 120, align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 190, align: 'center', fixed: 'right' }
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 250, align: 'center', fixed: 'right' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -108,7 +106,7 @@ export default {
         //   return data
         // })
         const _this = this
-        return new Promise(function(resolve, reject){
+        return new Promise(function (resolve, reject) {
           const data = {
             pageNo: 1,
             pageSize: 10,
@@ -124,20 +122,20 @@ export default {
           _this.disabled = false
           resolve(data)
         })
-      },
+      }
     }
   },
   methods: {
     //  详情
-    handleDetail(row){
-      this.$router.push({ path: `/financialManagement/inventoryReview/detail/${row.id}`})
+    handleDetail (row) {
+      this.$router.push({ path: `/financialManagement/inventoryReview/detail/${row.id}` })
     },
     //  审核
-    handleExamine(row, type){
+    handleExamine (row, type) {
       const _this = this
       this.$confirm({
         title: '提示',
-        content: '操作后不可恢复,确定要进行'+ (type==1 ? ' 通过 ' : ' 不通过 ') +'操作吗?',
+        content: '操作后不可恢复,确定要进行' + (type == 1 ? ' 通过 ' : ' 不通过 ') + '操作吗?',
         centered: true,
         onOk () {
           // delectRolePower({
@@ -161,7 +159,7 @@ export default {
       this.oldTime = undefined
       this.newTime = undefined
       this.$refs.table.refresh(true)
-    },
+    }
   }
 }
 </script>
@@ -171,4 +169,4 @@ export default {
       margin-top: 15px;
     }
   }
-</style>
+</style>

+ 4 - 6
src/views/financialManagement/warehousingAudit/list.vue

@@ -73,11 +73,9 @@
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" @click="handleExamine(record, 1)" id="warehousingAudit-adopt-btn">通过</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleExamine(record, 2)" id="warehousingAudit-unadopt-btn">不通过</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleDetail(record)" id="warehousingAudit-detail-btn">详情</a-button>
+        <a-button size="small" type="primary" class="button-info" @click="handleExamine(record, 1)" id="warehousingAudit-adopt-btn">通过</a-button>
+        <a-button size="small" type="primary" class="button-warning" @click="handleExamine(record, 2)" id="warehousingAudit-unadopt-btn">不通过</a-button>
+        <a-button size="small" type="primary" class="button-success" @click="handleDetail(record)" id="warehousingAudit-detail-btn">详情</a-button>
       </template>
     </s-table>
   </a-card>
@@ -105,7 +103,7 @@ export default {
         { title: '入库时间', dataIndex: 'sauditTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
         { title: '财务审核时间', dataIndex: 'auditTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
         { title: '财务审核状态', scopedSlots: { customRender: 'auditStatus' }, width: 120, align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 190, align: 'center', fixed: 'right' }
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 250, align: 'center', fixed: 'right' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {

+ 1 - 1
src/views/financialManagement/withdrawalManagement/list.vue

@@ -24,7 +24,7 @@
     </a-alert>
     <!-- 操作按钮 -->
     <div class="table-operator">
-      <a-button id="withdrawalManagementList-tx" type="primary" @click="">申请提现</a-button>
+      <a-button id="withdrawalManagementList-tx" type="primary" class="button-warning" @click="">申请提现</a-button>
     </div>
     <!-- 列表 -->
     <s-table