<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入样式 --> <link rel="stylesheet" href="../../plugins/element-ui/index.css" /> <link rel="stylesheet" href="../../styles/common.css" /> <link rel="stylesheet" href="../../styles/page.css" /> </head> <body> <div class="dashboard-container" id="hearCase-app"> <div class="container"> <div class="tableBar"> <el-input v-model="input" placeholder="请输入案件名称" style="width: 250px" clearable @keyup.enter.native="handleQuery" > <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init" ></i> </el-input> <div class="tableLab" style="display: flex; align-items: center; justify-content: space-between;"> <el-date-picker v-model="orderTime" clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择日期" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" style="width: 400px;margin-left: 20px;" ></el-date-picker> <el-button type="primary" class="search-btn" @click="init">查询</el-button> <span class="span-btn delBut non" @click="deleteHandle('批量', null)">批量删除</span> <span class="span-btn blueBug non" @click="statusHandle('1')">批量开庭</span> <span style="border:none;" class="span-btn delBut non" @click="statusHandle('0')">批量结案</span> <el-button type="primary" @click="addCaseType('add')" > + 新建案件 </el-button> </div> </div> <el-table :data="tableData" stripe class="tableBox" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="25" ></el-table-column> <el-table-column prop="caseNum" label="案件号" ></el-table-column> <el-table-column prop="plaintiffName" label="原告" ></el-table-column> <el-table-column prop="defendantName" label="被告" ></el-table-column> <el-table-column prop="court" label="法院名称" ></el-table-column> <el-table-column label="案件状态"> <template slot-scope="scope"> <span style="margin-right: 10px;"> {{ String(scope.row.caseStatus) === '1' ? '已开庭' : String(scope.row.caseStatus) === '2' ? '已执行' : String(scope.row.caseStatus) === '3' ? '已结案' : 其他 }} </span> </template> </el-table-column> <el-table-column prop="trialTime" label="开庭时间" > </el-table-column> <el-table-column label="操作" width="160" align="center" > <template slot-scope="scope"> <el-button type="text" size="small" class="blueBug" @click="addCaseType(scope.row.id)" > 修改 </el-button> <el-button type="text" size="small" class="blueBug" @click="statusHandle(scope.row)" > 结案 </el-button> <el-button type="text" size="small" class="delBut non" @click="deleteHandle('单删', scope.row.id)" > 删除 </el-button> </template> </el-table-column> </el-table> <el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange" :current-page.sync="page" @current-change="handleCurrentChange" ></el-pagination> </div> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="../../plugins/vue/vue.js"></script> <!-- 引入组件库 --> <script src="../../plugins/element-ui/index.js"></script> <!-- 引入axios --> <script src="../../plugins/axios/axios.min.js"></script> <script src="../../js/request.js"></script> <script src="../../api/food.js"></script> <script src="../../api/hearCase.js"></script> <script> new Vue({ el: '#hearCase-app', data() { return { input: '', counts: 0, page: 1, pageSize: 10, tableData : [], dishState : '', checkList: [] } }, computed: {}, created() { this.init() }, mounted() { }, methods: { async init () { const params = { page: this.page, pageSize: this.pageSize, name: this.input ? this.input : undefined } await getHearCasePage(params).then(res => { if (String(res.code) === '1') { this.tableData = res.data.records || [] this.counts = res.data.total } }).catch(err => { this.$message.error('请求出错了:' + err) }) }, getImage (image) { return `/common/download?name=${image}` }, handleQuery() { this.page = 1; this.init(); }, // 添加 addCaseType (st) { if (st === 'add'){ window.parent.menuHandle({ id: '3', url: '/backend/page/hearCase/add.html', name: '添加案件' },true) } else { window.parent.menuHandle({ id: '3', url: '/backend/page/hearCase/add.html?id='+st, name: '修改案件' },true) } }, // 删除 deleteHandle (type, id) { if (type === '批量' && id === null) { if (this.checkList.length === 0) { return this.$message.error('请选择删除对象') } } this.$confirm('确认删除该菜品, 是否继续?', '确定删除', { 'confirmButtonText': '确定', 'cancelButtonText': '取消', }).then(() => { deleteDish(type === '批量' ? this.checkList.join(',') : id).then(res => { if (res.code === 1) { this.$message.success('删除成功!') this.handleQuery() } else { this.$message.error(res.msg || '操作失败') } }).catch(err => { this.$message.error('请求出错了:' + err) }) }) }, //状态更改 statusHandle (row) { let params = {} if (typeof row === 'string' ) { if (this.checkList.length === 0) { this.$message.error('批量操作,请先勾选操作菜品!') return false } params.id = this.checkList.join(',') params.status = row } else { params.id = row.id params.status = row.status ? '0' : '1' } this.dishState = params this.$confirm('确认更改该菜品状态?', '提示', { 'confirmButtonText': '确定', 'cancelButtonText': '取消', 'type': 'warning' }).then(() => { // 起售停售---批量起售停售接口 dishStatusByStatus(this.dishState).then(res => { if (res.code === 1) { this.$message.success('菜品状态已经更改成功!') this.handleQuery() } else { this.$message.error(res.msg || '操作失败') } }).catch(err => { this.$message.error('请求出错了:' + err) }) }) }, // 全部操作 handleSelectionChange (val){ let checkArr = [] val.forEach((n) => { checkArr.push(n.id) }) this.checkList = checkArr }, handleSizeChange (val) { this.pageSize = val this.init() }, handleCurrentChange (val) { this.page = val this.init() } } }) </script> </body> </html>