inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <x-card v-if="hasPerm('sysSms:page')">
4       <div slot="content" class="table-page-search-wrapper">
5         <a-form layout="inline">
6           <a-row :gutter="48">
7             <a-col :md="8" :sm="24">
8               <a-form-item label="手机号">
9                 <a-input v-model="queryParam.phoneNumbers" placeholder="请输入手机号"/>
10               </a-form-item>
11             </a-col>
12             <a-col :md="8" :sm="24">
13               <a-form-item label="发送状态">
14                 <a-select v-model="queryParam.status" placeholder="请选择发送状态" >
15                   <a-select-option v-for="(item,index) in statusDictTypeDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
16                 </a-select>
17               </a-form-item>
18             </a-col>
19             <template v-if="advanced">
20               <a-col :md="8" :sm="24">
21                 <a-form-item label="来源">
22                   <a-select v-model="queryParam.source" placeholder="请选择来源" >
23                     <a-select-option v-for="(item,index) in sourceDictTypeDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
24                   </a-select>
25                 </a-form-item>
26               </a-col>
27             </template>
28             <a-col :md="!advanced && 8 || 24" :sm="24">
29               <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
30                 <a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button>
31                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
32                 <a @click="toggleAdvanced" style="margin-left: 8px">
33                   {{ advanced ? '收起' : '展开' }}
34                   <a-icon :type="advanced ? 'up' : 'down'"/>
35                 </a>
36               </span>
37             </a-col>
38           </a-row>
39         </a-form>
40       </div>
41     </x-card>
42     <a-card :bordered="false">
43       <s-table
44         ref="table"
45         :columns="columns"
46         :data="loadData"
47         :alert="false"
48         :rowKey="(record) => record.id"
49         :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
50       >
51         <span slot="status" slot-scope="text">
52           {{ statusFilter(text) }}
53         </span>
54         <span slot="source" slot-scope="text">
55           {{ sourceFilter(text) }}
56         </span>
57       </s-table>
58     </a-card>
59   </div>
60 </template>
61 <script>
62   import { STable, XCard } from '@/components'
63   import { smsPage } from '@/api/modular/system/smsManage'
64   import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
65   export default {
66     components: {
67       XCard,
68       STable
69     },
70     data () {
71       return {
72         // 高级搜索 展开/关闭
73         advanced: false,
74         // 查询参数
75         queryParam: {},
76         // 表头
77         columns: [
78           {
79             title: '手机号',
80             dataIndex: 'phoneNumbers'
81           },
82           {
83             title: '短信验证码',
84             dataIndex: 'validateCode'
85           },
86           {
87             title: '短信模板ID',
88             dataIndex: 'templateCode'
89           },
90           {
91             title: '发送状态',
92             dataIndex: 'status',
93             scopedSlots: { customRender: 'status' }
94           },
95           {
96             title: '来源',
97             dataIndex: 'source',
98             scopedSlots: { customRender: 'source' }
99           },
100           {
101             title: '失效时间',
102             dataIndex: 'invalidTime'
103           }
104         ],
105         // 加载数据方法 必须为 Promise 对象
106         loadData: parameter => {
107           return smsPage(Object.assign(parameter, this.queryParam)).then((res) => {
108             return res.data
109           })
110         },
111         selectedRowKeys: [],
112         selectedRows: [],
113         statusDictTypeDropDown: [],
114         sourceDictTypeDropDown: []
115       }
116     },
117     created () {
118       this.sysDictTypeDropDown()
119     },
120     methods: {
121       sourceFilter (source) {
122         // eslint-disable-next-line eqeqeq
123         const values = this.sourceDictTypeDropDown.filter(item => item.code == source)
124         if (values.length > 0) {
125           return values[0].value
126         }
127       },
128       statusFilter (status) {
129         // eslint-disable-next-line eqeqeq
130         const values = this.statusDictTypeDropDown.filter(item => item.code == status)
131         if (values.length > 0) {
132           return values[0].value
133         }
134       },
135       /**
136        * 获取字典数据
137        */
138       sysDictTypeDropDown () {
139         sysDictTypeDropDown({ code: 'send_type' }).then((res) => {
140           this.statusDictTypeDropDown = res.data
141         })
142         sysDictTypeDropDown({ code: 'sms_send_source' }).then((res) => {
143           this.sourceDictTypeDropDown = res.data
144         })
145       },
146       toggleAdvanced () {
147         this.advanced = !this.advanced
148       },
149       onSelectChange (selectedRowKeys, selectedRows) {
150         this.selectedRowKeys = selectedRowKeys
151         this.selectedRows = selectedRows
152       }
153     }
154   }
155 </script>
156 <style lang="less">
157   .table-operator {
158     margin-bottom: 18px;
159   }
160   button {
161     margin-right: 8px;
162   }
163 </style>