Blame view

admin-web-master/src/components/change/cl.vue 4.57 KB
9d8bcb26   wesley88   2
1
2
  <template>
    <div class="policy-selector">
a182f238   wesley88   1
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
      <div class="policy-selector-content">
        <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
          <div
            style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
            <div style="line-height:200%">选择策略</div>
            <div style="display: flex">
              <el-input placeholder="请输入" suffix-icon="el-icon-search" style="margin-right:15px;width: 40%;"
                v-model="pageindex.policyName">
              </el-input>
              <el-button @click="onSearch" style="background-color: #3F9B6A;color: #fff">查询
              </el-button>
              <el-button @click="resetting" class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
              </el-button>
            </div>
          </div>
          <div style="padding: 15px;">
            <div style="padding: 0px 20px 0px 0px;max-height:40vh;overflow-y: auto;">
              <el-table :data="celueData" tooltip-effect="dark" @selection-change="handleSelectionChange"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                <el-table-column label="选择" type="selection" width="55">
                </el-table-column>
                <el-table-column label="策略名称" prop="policyName" show-overflow-tooltip></el-table-column>
                <el-table-column label="适用资源" prop="applicableResources" show-overflow-tooltip></el-table-column>
                <el-table-column label="租金价格" prop="rentalPrice" show-overflow-tooltip></el-table-column>
                <el-table-column label="付款周期" prop="leaseTerm" show-overflow-tooltip></el-table-column>
                <el-table-column label="付款日" prop="payDay" show-overflow-tooltip></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;margin: 20px 0;" class="bom">
        <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
        <el-pagination :current-page="pageindex.pageNumber+1" :page-sizes="[5,10, 20, 50, 100]" :page-size="pageindex.pageSize" background
          small layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
9d8bcb26   wesley88   2
41
42
43
      </div>
      <div class="policy-selector-footer" style="display: flex; justify-content: flex-end; align-items: center;">
        <el-button @click="confirm" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
a182f238   wesley88   1
44
45
        <el-button @click="cancel" class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
9d8bcb26   wesley88   2
46
47
48
49
50
51
52
53
      </div>
    </div>
  </template>
  
  <script>
    import {
      ceGetAll
    } from '@/api/sam.js'
a182f238   wesley88   1
54
55
56
57
58
    export default {
      name: 'PolicySelector',
      data() {
        return {
          total: 0,
9d8bcb26   wesley88   2
59
          pageindex: {
a182f238   wesley88   1
60
61
62
            pageNumber: 0,
            pageSize: 5,
            policyName: ''
9d8bcb26   wesley88   2
63
          },
a182f238   wesley88   1
64
65
66
          selectedRows: [],
          celueData: []
        };
9d8bcb26   wesley88   2
67
      },
a182f238   wesley88   1
68
69
      created() {
        this.getAll()
9d8bcb26   wesley88   2
70
      },
a182f238   wesley88   1
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
      methods: {
        async getAll() {
          const celue = await ceGetAll(this.pageindex)
          this.celueData = celue.data.content
          this.total = celue.data.totalElements
        },
        handleCurrentChange(val) {
          this.pageindex.pageNumber = val-1
          this.getAll()
        },
        handleSizeChange(val) {
          this.pageindex.pageSize = val
        },
        onSearch() {
          this.pageindex.pageNumber = 0
          this.getAll()
        },
        resetting() {
          this.pageindex ={
            pageNumber: 0,
            pageSize: 5,
            policyName: ''
          }
          this.getAll()
        },
        handleSelectionChange(selection) {
          this.selectedRows = selection;
        },
        confirm() {
          this.$emit('minSev', this.selectedRows);
        },
        cancel() {
          this.$emit('mingClose');
        }
9d8bcb26   wesley88   2
105
      }
a182f238   wesley88   1
106
    };
9d8bcb26   wesley88   2
107
108
109
  </script>
  
  <style scoped>
a182f238   wesley88   1
110
111
112
113
114
115
116
117
    .policy-selector {
      padding: 20px;
      width: 100%;
      margin: 0 auto;
      border: 1px solid #ddd;
      /* border-radius: 4px; */
      /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
    }
9d8bcb26   wesley88   2
118
  
a182f238   wesley88   1
119
120
121
122
    .policy-selector-header {
      text-align: left;
      margin-bottom: 20px;
    }
9d8bcb26   wesley88   2
123
  
a182f238   wesley88   1
124
125
126
127
128
    .policy-selector-header h3 {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }
9d8bcb26   wesley88   2
129
  
a182f238   wesley88   1
130
131
132
    .policy-selector-content {
      margin-bottom: 20px;
    }
9d8bcb26   wesley88   2
133
  
a182f238   wesley88   1
134
135
136
137
138
139
    .policy-selector-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  </style>