inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 /* eslint-disable eqeqeq */
I 2 <template>
3   <div>
4     <x-card v-if="hasPerm('sysApp:page')">
5       <div slot="content" class="table-page-search-wrapper">
6         <a-form layout="inline">
7           <a-row :gutter="48">
8             <a-col :md="8" :sm="24">
9               <a-form-item label="应用名称">
10                 <a-input v-model="queryParam.name" allow-clear placeholder="请输入应用名称"/>
11               </a-form-item>
12             </a-col>
13             <a-col :md="8" :sm="24">
14               <a-form-item label="唯一编码">
15                 <a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
16               </a-form-item>
17             </a-col>
18             <a-col :md="8" :sm="24">
19               <span class="table-page-search-submitButtons">
20                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
21                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
22               </span>
23             </a-col>
24           </a-row>
25         </a-form>
26       </div>
27     </x-card>
28     <a-card :bordered="false" >
29       <a-spin :spinning="loading">
30         <s-table
31           ref="table"
32           :columns="columns"
33           :data="loadData"
34           :alert="false"
35           :rowKey="(record) => record.id"
36         >
37           <template slot="operator" v-if="hasPerm('sysApp:add')">
38             <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysApp:add')">新增应用</a-button>
39           </template>
40           <span slot="active" slot-scope="text">
41             {{ activeFilter(text) }}
42           </span>
43           <span slot="status" slot-scope="text">
44             {{ statusFilter(text) }}
45           </span>
46           <span slot="action" slot-scope="text, record">
47             <a v-if="hasPerm('sysApp:edit')" @click="$refs.editForm.edit(record)">编辑</a>
48             <a-divider type="vertical" v-if="hasPerm('sysApp:edit') & hasPerm('sysApp:delete')" />
49             <a-popconfirm v-if="hasPerm('sysApp:delete')" placement="topRight" title="确认删除?" @confirm="() => sysAppDelete(record)">
50               <a>删除</a>
51             </a-popconfirm>
52             <a-divider type="vertical" v-if="hasPerm('sysApp:setAsDefault') & hasPerm('sysApp:delete') & record.active == 'N' || hasPerm('sysApp:edit') & hasPerm('sysApp:setAsDefault') & record.active == 'N'" />
53             <a-popconfirm v-if="hasPerm('sysApp:setAsDefault') & record.active == 'N'" placement="topRight" title="设置为默认应用?" @confirm="() => sysDefault(record)">
54               <a>设为默认</a>
55             </a-popconfirm>
56           </span>
57         </s-table>
58         <add-form ref="addForm" @ok="handleOk" />
59         <edit-form ref="editForm" @ok="handleOk" />
60       </a-spin>
61     </a-card>
62   </div>
63 </template>
64 <script>
65   import { STable, XCard } from '@/components'
66   import { getAppPage, sysAppDelete, sysAppSetAsDefault } from '@/api/modular/system/appManage'
67   import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
68   import editForm from './editForm'
69   import addForm from './addForm'
70   export default {
71     components: {
72       XCard,
73       STable,
74       editForm,
75       addForm
76     },
77     data () {
78       return {
79         // description: '面包屑说明',
80         // 查询参数
81         queryParam: {},
82         // 表头
83         columns: [
84           {
85             title: '应用名称',
86             dataIndex: 'name'
87           },
88           {
89             title: '唯一编码',
90             dataIndex: 'code'
91           },
92           {
93             title: '是否默认',
94             dataIndex: 'active',
95             scopedSlots: { customRender: 'active' }
96           },
97           {
98             title: '状态',
99             dataIndex: 'status',
100             scopedSlots: { customRender: 'status' }
101           }
102         ],
103         tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
104         // 加载数据方法 必须为 Promise 对象
105         loadData: parameter => {
106           return getAppPage(Object.assign(parameter, this.queryParam)).then((res) => {
107             return res.data
108           })
109         },
110         loading: false,
111         statusDict: [],
112         activeDict: []
113       }
114     },
115     created () {
116       this.sysDictTypeDropDown()
117       if (this.hasPerm('sysApp:edit') || this.hasPerm('sysApp:delete') || this.hasPerm('sysApp:setAsDefault')) {
118         this.columns.push({
119           title: '操作',
120           width: '200px',
121           dataIndex: 'action',
122           scopedSlots: { customRender: 'action' }
123         })
124       }
125     },
126     methods: {
127       activeFilter (active) {
128         // eslint-disable-next-line eqeqeq
129         const values = this.activeDict.filter(item => item.code == active)
130         if (values.length > 0) {
131           return values[0].value
132         }
133       },
134       statusFilter (status) {
135         // eslint-disable-next-line eqeqeq
136         const values = this.statusDict.filter(item => item.code == status)
137         if (values.length > 0) {
138           return values[0].value
139         }
140       },
141       /**
142        * 获取字典数据
143        */
144       sysDictTypeDropDown () {
145         sysDictTypeDropDown({ code: 'yes_or_no' }).then((res) => {
146           this.activeDict = res.data
147         })
148         sysDictTypeDropDown({ code: 'common_status' }).then((res) => {
149           this.statusDict = res.data
150         })
151       },
152       handleOk () {
153         this.$refs.table.refresh()
154       },
155       sysDefault (record) {
156         this.loading = true
157         sysAppSetAsDefault({ id: record.id }).then((res) => {
158           this.loading = false
159            if (res.success) {
160              this.$message.success('设置成功')
161              this.$refs.table.refresh()
162            } else {
163              this.$message.error('设置失败:' + res.message)
164            }
165         })
166       },
167       /**
168        * 删除应用
169        */
170       sysAppDelete (record) {
171         this.loading = true
172         sysAppDelete(record).then((res) => {
173           this.loading = false
174           if (res.success) {
175             this.$message.success('删除成功')
176             this.$refs.table.refresh()
177           } else {
178             this.$message.error('删除失败:' + res.message)
179           }
180         }).catch((err) => {
181           this.$message.error('删除错误:' + err.message)
182         })
183       }
184     }
185   }
186 </script>
187 <style scoped>
188   .table-operator {
189     margin-bottom: 18px;
190   }
191   button {
192     margin-right: 8px;
193   }
194 </style>