houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-card shadow="never" class="aui-card--fill">
3     <div>
4       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
5         <el-form-item>
6           <el-input v-model="dataForm.storetypename" placeholder="类型名称" clearable></el-input>
7         </el-form-item>
8         <el-form-item>
9           <el-input v-model="dataForm.storetypeno" placeholder="编号" clearable></el-input>
10         </el-form-item>
11         <el-form-item>
12           <el-button @click="searchDataList()">查询</el-button>
13           <el-button v-if="$hasPermission('data:store-type:add')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
14           <el-button v-if="$hasPermission('data:store-type:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
15         </el-form-item>
16       </el-form>
17       <el-table
18               :data="dataList"
19               border
20               v-loading="dataListLoading"
21               @selection-change="selectionChangeHandle"
22               style="width: 100%;">
23         <el-table-column
24                 type="selection"
25                 header-align="center"
26                 align="center"
27                 width="50">
28         </el-table-column>
29         <el-table-column
30                 type="index"
31                 align="center"
32                 width="50"
33                 label="序号"
34         >
35         </el-table-column>
36         <el-table-column
37                 prop="storetypename"
38                 header-align="center"
39                 align="center"
40                 label="类型名称">
41         </el-table-column>
42         <el-table-column
43                 prop="storetypeno"
44                 header-align="center"
45                 align="center"
46                 label="编号">
47         </el-table-column>
48         <el-table-column
49                 prop="storetable"
50                 header-align="center"
51                 align="center"
52                 label="存储位置">
53         </el-table-column>
54         <el-table-column
55                 v-if="$hasPermission('data:store-type:edit')"
56                 fixed="right"
57                 header-align="center"
58                 align="center"
59                 width="150"
60                 label="操作">
61           <template slot-scope="scope">
62             <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
63           </template>
64         </el-table-column>
65       </el-table>
66       <el-pagination
67               @size-change="sizeChangeHandle"
68               @current-change="currentChangeHandle"
69               :current-page="pageIndex"
70               :page-sizes="[10, 20, 50, 100]"
71               :page-size="pageSize"
72               :total="totalPage"
73               layout="total, sizes, prev, pager, next, jumper">
74       </el-pagination>
75       <!-- 弹窗, 新增 / 修改 -->
76       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
77     </div>
78   </el-card>
79 </template>
80
81 <script>
82   import AddOrUpdate from './da-store-type-add-or-update'
83
84   export default {
85     data () {
86       return {
87         dataForm: {
88           storetypename: '',
89           storetypeno: ''
90         },
91         dataList: [],
92         pageIndex: 1,
93         pageSize: 10,
94         totalPage: 0,
95         dataListLoading: false,
96         dataListSelections: [],
97         addOrUpdateVisible: false
98       }
99     },
100     components: {
101       AddOrUpdate
102     },
103     mounted () {
104       this.getDataList()
105     },
106     methods: {
107       searchDataList () {
108         this.pageIndex = 1
109         this.getDataList()
110       },
111       // 获取数据列表
112       getDataList () {
113         this.dataListLoading = true
114         this.$http({
115           url: '/data/data/store-type/list',
116           method: 'get',
117           params: this.$http.adornParams({
118             'page': this.pageIndex,
119             'limit': this.pageSize,
120             'storetypename': this.dataForm.storetypename,
121             'storetypeno': this.dataForm.storetypeno
122           })
123         }).then(({data}) => {
124           if (data && data.code === 0) {
125             this.dataList = data.page.list
126             this.totalPage = data.page.totalCount
127           } else {
128             this.dataList = []
129             this.totalPage = 0
130           }
131           this.dataListLoading = false
132         })
133       },
134       // 每页数
135       sizeChangeHandle (val) {
136         this.pageSize = val
137         this.pageIndex = 1
138         this.getDataList()
139       },
140       // 当前页
141       currentChangeHandle (val) {
142         this.pageIndex = val
143         this.getDataList()
144       },
145       // 多选
146       selectionChangeHandle (val) {
147         this.dataListSelections = val
148       },
149       // 新增 / 修改
150       addOrUpdateHandle (id) {
151         this.addOrUpdateVisible = true
152         this.$nextTick(() => {
153           this.$refs.addOrUpdate.init(id)
154         })
155       },
156       // 删除
157       deleteHandle (id) {
158         var ids = id ? [id] : this.dataListSelections.map(item => {
159           return item.id
160         })
161         this.$confirm(`确定删除选中的${ids.length}项数据?`, '提示', {
162           confirmButtonText: '确定',
163           cancelButtonText: '取消',
164           type: 'warning'
165         }).then(() => {
166           this.$http['post'](`/data/data/store-type/delete`, ids).then(({ data: res }) => {
167             if (res.code !== 0) {
168               return this.$message.error(res.msg)
169             }
170             this.$message({
171               message: this.$t('prompt.success'),
172               type: 'success',
173               duration: 500,
174               onClose: () => {
175                 this.getDataList()
176               }
177             })
178           }).catch(() => {})
179         }).catch(() => {})
180       }
181     }
182   }
183 </script>