blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <x-card v-if="hasPerm('sysDictType: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.name" allow-clear placeholder="请输入类型名称"/>
10               </a-form-item>
11             </a-col>
12             <a-col :md="8" :sm="24">
13               <a-form-item label="唯一编码" v-if="hasPerm('sysDictType:page')">
14                 <a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
15               </a-form-item>
16             </a-col>
17             <a-col :md="8" :sm="24">
18               <span class="table-page-search-submitButtons">
19                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
20                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
21               </span>
22             </a-col>
23           </a-row>
24         </a-form>
25       </div>
26     </x-card>
27     <a-card :bordered="false">
28       <s-table
29         ref="table"
30         :columns="columns"
31         :data="loadData"
32         :alert="false"
33         :rowKey="(record) => record.code"
34       >
35         <template slot="operator" v-if="hasPerm('sysDictType:add')">
36           <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysDictType:add')">新增类型</a-button>
37         </template>
38         <span slot="status" slot-scope="text">
39           {{ statusFilter(text) }}
40         </span>
41         <span slot="action" slot-scope="text, record">
42           <a @click="$refs.dataIndex.index(record)">字典</a>
43           <a-divider type="vertical" v-if="hasPerm('sysDictType:edit') || hasPerm('sysDictType:delete')"/>
44           <a-dropdown v-if="hasPerm('sysDictType:edit') || hasPerm('sysDictType:delete')">
45             <a class="ant-dropdown-link">
46               更多 <a-icon type="down" />
47             </a>
48             <a-menu slot="overlay">
49               <a-menu-item v-if="hasPerm('sysDictType:edit')">
50                 <a @click="$refs.editForm.edit(record)">编辑</a>
51               </a-menu-item>
52               <a-menu-item v-if="hasPerm('sysDictType:delete')">
53                 <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => sysDictTypeDelete(record)">
54                   <a>删除</a>
55                 </a-popconfirm>
56               </a-menu-item>
57             </a-menu>
58           </a-dropdown>
59         </span>
60       </s-table>
61       <add-form ref="addForm" @ok="handleOk" />
62       <edit-form ref="editForm" @ok="handleOk" />
63       <data-index ref="dataIndex" @ok="handleOk" />
64     </a-card>
65   </div>
66 </template>
67 <script>
68   import { STable, XCard } from '@/components'
69   import { sysDictTypePage, sysDictTypeDelete, sysDictTypeDropDown } from '@/api/modular/system/dictManage'
70   import addForm from './addForm'
71   import editForm from './editForm'
72   import dataIndex from './dictdata/index'
73   export default {
74     components: {
75       XCard,
76       STable,
77       addForm,
78       editForm,
79       dataIndex
80     },
81     data () {
82       return {
83         // 查询参数
84         queryParam: {},
85         // 表头
86         columns: [
87           {
88             title: '类型名称',
89             dataIndex: 'name'
90           },
91           {
92             title: '唯一编码',
93             dataIndex: 'code'
94           },
95           {
96             title: '排序',
97             dataIndex: 'sort'
98           },
99           {
100             title: '备注',
101             dataIndex: 'remark',
102             width: 200
103           },
104           {
105             title: '状态',
106             dataIndex: 'status',
107             scopedSlots: { customRender: 'status' }
108           }, {
109             title: '操作',
110             width: '150px',
111             dataIndex: 'action',
112             scopedSlots: { customRender: 'action' }
113           }
114         ],
115         // 加载数据方法 必须为 Promise 对象
116         loadData: parameter => {
117           return sysDictTypePage(Object.assign(parameter, this.queryParam)).then((res) => {
118             return res.data
119           })
120         },
121         statusDict: []
122       }
123     },
124     created () {
125       this.sysDictTypeDropDown()
126     },
127     methods: {
128       statusFilter (status) {
129         // eslint-disable-next-line eqeqeq
130         const values = this.statusDict.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: 'common_status' }).then((res) => {
140           this.statusDict = res.data
141         })
142       },
143       sysDictTypeDelete (record) {
144         sysDictTypeDelete(record).then((res) => {
145           if (res.success) {
146             this.$message.success('删除成功')
147             this.$refs.table.refresh()
148           } else {
149             this.$message.error('删除失败：' + res.message)
150           }
151         }).catch((err) => {
152           this.$message.error('删除错误：' + err.message)
153         })
154       },
155       handleOk () {
156         this.$refs.table.refresh()
157       }
158     }
159   }
160 </script>
161 <style lang="less">
162   .table-operator {
163     margin-bottom: 18px;
164   }
165   button {
166     margin-right: 8px;
167   }
168 </style>