春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
wujian
2024-01-18 b395c6c17048f4862dd07e54fdb2122905402794
提交 | 用户 | 时间
fd2207 1 <template>
懒 2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4       <el-form-item label="公告标题" prop="noticeTitle">
5         <el-input
6           v-model="queryParams.noticeTitle"
7           placeholder="请输入公告标题"
8           clearable
9           @keyup.enter.native="handleQuery"
10         />
11       </el-form-item>
12       <el-form-item label="操作人员" prop="createBy">
13         <el-input
14           v-model="queryParams.createBy"
15           placeholder="请输入操作人员"
16           clearable
17           @keyup.enter.native="handleQuery"
18         />
19       </el-form-item>
20       <el-form-item label="类型" prop="noticeType">
21         <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
22           <el-option
23             v-for="dict in dict.type.sys_notice_type"
24             :key="dict.value"
25             :label="dict.label"
26             :value="dict.value"
27           />
28         </el-select>
29       </el-form-item>
30       <el-form-item>
31         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
32         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
33       </el-form-item>
34     </el-form>
35
36     <el-row :gutter="10" class="mb8">
37       <el-col :span="1.5">
38         <el-button
39           type="primary"
40           plain
41           icon="el-icon-plus"
42           size="mini"
43           @click="handleAdd"
44           v-hasPermi="['system:notice:add']"
45         >新增</el-button>
46       </el-col>
47       <el-col :span="1.5">
48         <el-button
49           type="success"
50           plain
51           icon="el-icon-edit"
52           size="mini"
53           :disabled="single"
54           @click="handleUpdate"
55           v-hasPermi="['system:notice:edit']"
56         >修改</el-button>
57       </el-col>
58       <el-col :span="1.5">
59         <el-button
60           type="danger"
61           plain
62           icon="el-icon-delete"
63           size="mini"
64           :disabled="multiple"
65           @click="handleDelete"
66           v-hasPermi="['system:notice:remove']"
67         >删除</el-button>
68       </el-col>
69       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
70     </el-row>
71
72     <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
73       <el-table-column type="selection" width="55" align="center" />
74       <el-table-column label="序号" align="center" prop="noticeId" width="100" />
75       <el-table-column
76         label="公告标题"
77         align="center"
78         prop="noticeTitle"
79         :show-overflow-tooltip="true"
80       />
81       <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
82         <template slot-scope="scope">
83           <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
84         </template>
85       </el-table-column>
86       <el-table-column label="状态" align="center" prop="status" width="100">
87         <template slot-scope="scope">
88           <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
89         </template>
90       </el-table-column>
91       <el-table-column label="创建者" align="center" prop="createBy" width="100" />
92       <el-table-column label="创建时间" align="center" prop="createTime" width="100">
93         <template slot-scope="scope">
94           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
95         </template>
96       </el-table-column>
97       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
98         <template slot-scope="scope">
99           <el-button
100             size="mini"
101             type="text"
102             icon="el-icon-edit"
103             @click="handleUpdate(scope.row)"
104             v-hasPermi="['system:notice:edit']"
105           >修改</el-button>
106           <el-button
107             size="mini"
108             type="text"
109             icon="el-icon-delete"
110             @click="handleDelete(scope.row)"
111             v-hasPermi="['system:notice:remove']"
112           >删除</el-button>
113         </template>
114       </el-table-column>
115     </el-table>
116
117     <pagination
118       v-show="total>0"
119       :total="total"
120       :page.sync="queryParams.pageNum"
121       :limit.sync="queryParams.pageSize"
122       @pagination="getList"
123     />
124
125     <!-- 添加或修改公告对话框 -->
126     <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
127       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
128         <el-row>
129           <el-col :span="12">
130             <el-form-item label="公告标题" prop="noticeTitle">
131               <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
132             </el-form-item>
133           </el-col>
134           <el-col :span="12">
135             <el-form-item label="公告类型" prop="noticeType">
136               <el-select v-model="form.noticeType" placeholder="请选择公告类型">
137                 <el-option
138                   v-for="dict in dict.type.sys_notice_type"
139                   :key="dict.value"
140                   :label="dict.label"
141                   :value="dict.value"
142                 ></el-option>
143               </el-select>
144             </el-form-item>
145           </el-col>
146           <el-col :span="24">
147             <el-form-item label="状态">
148               <el-radio-group v-model="form.status">
149                 <el-radio
150                   v-for="dict in dict.type.sys_notice_status"
151                   :key="dict.value"
152                   :label="dict.value"
153                 >{{dict.label}}</el-radio>
154               </el-radio-group>
155             </el-form-item>
156           </el-col>
157           <el-col :span="24">
158             <el-form-item label="内容">
159               <editor v-model="form.noticeContent" :min-height="192"/>
160             </el-form-item>
161           </el-col>
162         </el-row>
163       </el-form>
164       <div slot="footer" class="dialog-footer">
165         <el-button type="primary" @click="submitForm">确 定</el-button>
166         <el-button @click="cancel">取 消</el-button>
167       </div>
168     </el-dialog>
169   </div>
170 </template>
171
172 <script>
173 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
174
175 export default {
176   name: "Notice",
177   dicts: ['sys_notice_status', 'sys_notice_type'],
178   data() {
179     return {
180       // 遮罩层
181       loading: true,
182       // 选中数组
183       ids: [],
184       // 非单个禁用
185       single: true,
186       // 非多个禁用
187       multiple: true,
188       // 显示搜索条件
189       showSearch: true,
190       // 总条数
191       total: 0,
192       // 公告表格数据
193       noticeList: [],
194       // 弹出层标题
195       title: "",
196       // 是否显示弹出层
197       open: false,
198       // 查询参数
199       queryParams: {
200         pageNum: 1,
201         pageSize: 10,
202         noticeTitle: undefined,
203         createBy: undefined,
204         status: undefined
205       },
206       // 表单参数
207       form: {},
208       // 表单校验
209       rules: {
210         noticeTitle: [
211           { required: true, message: "公告标题不能为空", trigger: "blur" }
212         ],
213         noticeType: [
214           { required: true, message: "公告类型不能为空", trigger: "change" }
215         ]
216       }
217     };
218   },
219   created() {
220     this.getList();
221   },
222   methods: {
223     /** 查询公告列表 */
224     getList() {
225       this.loading = true;
226       listNotice(this.queryParams).then(response => {
227         this.noticeList = response.rows;
228         this.total = response.total;
229         this.loading = false;
230       });
231     },
232     // 取消按钮
233     cancel() {
234       this.open = false;
235       this.reset();
236     },
237     // 表单重置
238     reset() {
239       this.form = {
240         noticeId: undefined,
241         noticeTitle: undefined,
242         noticeType: undefined,
243         noticeContent: undefined,
244         status: "0"
245       };
246       this.resetForm("form");
247     },
248     /** 搜索按钮操作 */
249     handleQuery() {
250       this.queryParams.pageNum = 1;
251       this.getList();
252     },
253     /** 重置按钮操作 */
254     resetQuery() {
255       this.resetForm("queryForm");
256       this.handleQuery();
257     },
258     // 多选框选中数据
259     handleSelectionChange(selection) {
260       this.ids = selection.map(item => item.noticeId)
261       this.single = selection.length!=1
262       this.multiple = !selection.length
263     },
264     /** 新增按钮操作 */
265     handleAdd() {
266       this.reset();
267       this.open = true;
268       this.title = "添加公告";
269     },
270     /** 修改按钮操作 */
271     handleUpdate(row) {
272       this.reset();
273       const noticeId = row.noticeId || this.ids
274       getNotice(noticeId).then(response => {
275         this.form = response.data;
276         this.open = true;
277         this.title = "修改公告";
278       });
279     },
280     /** 提交按钮 */
281     submitForm: function() {
282       this.$refs["form"].validate(valid => {
283         if (valid) {
284           if (this.form.noticeId != undefined) {
285             updateNotice(this.form).then(response => {
286               this.$modal.msgSuccess("修改成功");
287               this.open = false;
288               this.getList();
289             });
290           } else {
291             addNotice(this.form).then(response => {
292               this.$modal.msgSuccess("新增成功");
293               this.open = false;
294               this.getList();
295             });
296           }
297         }
298       });
299     },
300     /** 删除按钮操作 */
301     handleDelete(row) {
302       const noticeIds = row.noticeId || this.ids
303       this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
304         return delNotice(noticeIds);
305       }).then(() => {
306         this.getList();
307         this.$modal.msgSuccess("删除成功");
308       }).catch(() => {});
309     }
310   }
311 };
312 </script>