王勇 / dispatch_sys_vue · 提交

转到一个项目

作者 王勇
提交 4b022d42217389871a61a00953618b78ef9f42d7 1 个父辈 99a67d23

修改为带状态表格

内嵌 并排对比
正在显示 2 个修改的文件 包含 98 行增加 和 24 行删除
... ... @@ -13,18 +13,18 @@
<div>
<el-form :model="queryInfo" :rules="queryFormRules" ref="queryFormRef" status-icon>
<el-form-item>
<!-- <el-col :span="4">-->
<!-- <el-form-item prop="userName">-->
<!-- <el-input v-model="queryInfo.userName" prefix-icon="el-icon-search"-->
<!-- placeholder="请输入用户名称" clearable size="small"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="4" style="margin-left: 10px">-->
<!-- <el-form-item prop="userMobile">-->
<!-- <el-input v-model="queryInfo.userMobile" prefix-icon="el-icon-search"-->
<!-- placeholder="请输入联系方式" clearable size="small"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="4">-->
<!-- <el-form-item prop="userName">-->
<!-- <el-input v-model="queryInfo.userName" prefix-icon="el-icon-search"-->
<!-- placeholder="请输入用户名称" clearable size="small"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="4" style="margin-left: 10px">-->
<!-- <el-form-item prop="userMobile">-->
<!-- <el-input v-model="queryInfo.userMobile" prefix-icon="el-icon-search"-->
<!-- placeholder="请输入联系方式" clearable size="small"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="4">
<el-form-item prop="gmtCreate">
<el-date-picker v-model="queryInfo.gmtCreate" type="date" value-format="yyyy-MM-dd"
... ... @@ -59,7 +59,8 @@
</div>
<!--调度记录列表区域-->
<div style="margin-top: 20px;">
<el-table :data="DispatchNoteList" border stripe highlight-current-row v-loading="listLoading"
<el-table :data="DispatchNoteList" border highlight-current-row v-loading="listLoading"
:row-class-name="rowStatus"
element-loading-text="拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="用户名称" prop="userName" align="center" width="100"></el-table-column>
... ... @@ -214,14 +215,15 @@
<el-form :model="showForm" ref="showFormRef"
:inline="true" align="center"
style="background-color: #F5F7FA;margin-left: 5%;margin-right: 5%">
<div style="margin-top: -15px">
<br>
<el-form-item label="用户名称：" prop="userName">
<el-input v-model="showForm.userName" style="width: 200px;" size="small" readonly></el-input>
<el-input v-model="showForm.userName" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="联系方式：" prop="userMobile">
<el-input v-model="showForm.userMobile" style="width: 200px;" size="small" readonly></el-input>
<el-input v-model="showForm.userMobile" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="车辆类型：" prop="vehicleType">
<el-select v-model="showForm.vehicleType" style="width:200px" size="small" readonly
... ... @@ -261,13 +263,16 @@
</el-select>
</el-form-item>
<el-form-item label="创建时间：" prop="gmtCreate">
<el-input v-model="showForm.gmtCreate" style="width: 200px;" size="small" readonly></el-input>
<el-input v-model="showForm.gmtCreate" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="开始时间：" prop="beginTime">
<el-input v-model="showForm.beginTime" style="width: 200px;" size="small" readonly></el-input>
<el-input v-model="showForm.beginTime" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="结束时间：" prop="endTime">
<el-input v-model="showForm.endTime" style="width: 200px;" size="small" readonly></el-input>
<el-input v-model="showForm.endTime" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="记录状态：" prop="status">
<el-select v-model="showForm.status" placeholder="记录状态" style="width:200px" size="small"
... ... @@ -666,8 +671,27 @@
}).catch((error) => {
this.$message.error(error.toString());
});
},
/**
* 根据状态的不同区分颜色
*
* @param row
* @param rowIndex
*/
rowStatus({row, rowIndex}) {
if (row.status === '1') {
return 'success-row';
}
if (row.status === '2') {
return 'run-row';
}
if (row.status === '3') {
return 'cancel-row';
}
if (row.status === '4') {
return 'await-row';
}
}
},
mounted() {
var user = sessionStorage.getItem('user');
... ... @@ -689,6 +713,24 @@
}
</script>
<style scoped>
<style>
/* 完成状态 */
.el-table .success-row {
background: rgba(64, 158, 255, 0.2);
}
/* 执行状态 */
.el-table .run-row {
background: rgba(103, 194, 58, 0.2);
}
/* 取消状态 */
.el-table .cancel-row {
background: rgba(144, 147, 153, 0.2);
}
/* 待执行状态 */
.el-table .await-row {
background: rgba(230, 162, 60, 0.2);
}
</style>
... ...
... ... @@ -61,7 +61,7 @@
</div>
<!--调度记录列表区域-->
<div style="margin-top: 20px;">
<el-table :data="DispatchNoteList" border stripe v-loading="listLoading"
<el-table :data="DispatchNoteList" border v-loading="listLoading"
:row-class-name="rowStatus"
element-loading-text="拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
... ... @@ -815,9 +815,41 @@
* @param row
* @param rowIndex
*/
rowStatus({row, rowIndex}){
rowStatus({row, rowIndex}) {
if (row.status === '1') {
return 'success-row';
}
if (row.status === '2') {
return 'run-row';
}
if (row.status === '3') {
return 'cancel-row';
}
if (row.status === '4') {
return 'await-row';
}
}
}
}
</script>
<style>
/* 完成状态 */
.el-table .success-row {
background: rgba(64, 158, 255, 0.2);
}
/* 执行状态 */
.el-table .run-row {
background: rgba(103, 194, 58, 0.2);
}
/* 取消状态 */
.el-table .cancel-row {
background: rgba(144, 147, 153, 0.2);
}
/* 待执行状态 */
.el-table .await-row {
background: rgba(230, 162, 60, 0.2);
}
</style>
... ...