lukeyan
2 years ago
parent
6980f30793
commit
8b2635f07e
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<!-- 我的流程 -->
|
||||
<div>
|
||||
<div class="course_body">
|
||||
<div class="search_top">
|
||||
<div class="btn">
|
||||
<el-button @click="search_data">搜索</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
<el-form :model="search" class="search_top_form">
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model="search.course_select" @change="change_course">
|
||||
<el-option
|
||||
v-for="item in course_list"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="search.course_time"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="search.word"
|
||||
placeholder="请选择关键词"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search_table">
|
||||
<el-table
|
||||
:data="table_data"
|
||||
:header-cell-style="table_header"
|
||||
:cell-style="{ background: 'revert', 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column prop="course_name" label="流程名称" width="420">
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="创建时间" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_type" label="流程类型" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_status" label="流程状态" width="220">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ color: styleChange(scope.row.course_status) }">
|
||||
{{ scope.row.course_status }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tips" label="当前节点" width="220">
|
||||
</el-table-column>
|
||||
<el-table-column prop="person" label="未操作者" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="operation" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
class="operation"
|
||||
@click="check_details(scope.row)"
|
||||
>详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="table_pagination">
|
||||
<el-pagination
|
||||
:background="true"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[5, 10]"
|
||||
:pager-count="5"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNum"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "MyCourse",
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
course_select: "待审核",
|
||||
course_num: "1", // 表格查询待定入参
|
||||
course_time: [this.get_today(), this.get_tomorrow()],
|
||||
word: "",
|
||||
},
|
||||
course_list: [
|
||||
{ label: "待审核", value: "1" },
|
||||
{ label: "通过", value: "2" },
|
||||
{ label: "驳回", value: "3" },
|
||||
{ label: "处置中", value: "4" },
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
table_data: [
|
||||
{
|
||||
course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
|
||||
create_time: "2023-06-06 12:53:30",
|
||||
course_type: "防疫安全",
|
||||
course_status: "进行中",
|
||||
tips: "治安大队",
|
||||
person: "王伟、李勋勋",
|
||||
},
|
||||
{
|
||||
course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
|
||||
create_time: "2023-06-06 12:53:30",
|
||||
course_type: "防疫安全",
|
||||
course_status: "处置成功",
|
||||
tips: "治安大队",
|
||||
person: "王伟、李勋勋",
|
||||
},
|
||||
{
|
||||
course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
|
||||
create_time: "2023-06-06 12:53:30",
|
||||
course_type: "防疫安全",
|
||||
course_status: "处置失败",
|
||||
tips: "治安大队",
|
||||
person: "王伟、李勋勋",
|
||||
},
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
change_course(val) {
|
||||
this.search.course_num = this.course_list.find((item) => {
|
||||
item.label === val;
|
||||
}).value;
|
||||
},
|
||||
// 查询
|
||||
search_data() {
|
||||
console.log("this.search.course_time", this.search.course_time);
|
||||
let param = {
|
||||
startTime:
|
||||
this.search.course_time == null
|
||||
? ""
|
||||
: this.dateConversion(this.search.course_time[0]),
|
||||
endTime:
|
||||
this.search.course_time == null
|
||||
? ""
|
||||
: this.dateConversion(this.search.course_time[1]),
|
||||
};
|
||||
console.log("param", param);
|
||||
},
|
||||
// 重置查询
|
||||
reset() {
|
||||
this.search.course_select = "待审核";
|
||||
this.search.course_num = "1";
|
||||
this.search.course_time = [this.get_today(), this.get_tomorrow()];
|
||||
this.search.word = "";
|
||||
this.search_data();
|
||||
},
|
||||
// 详情点击跳转
|
||||
check_details(val) {
|
||||
console.log(val);
|
||||
this.$emit("change_to_detail");
|
||||
},
|
||||
// 转换时间格式
|
||||
dateConversion(value) {
|
||||
let date = new Date(value);
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
let M = date.getMinutes();
|
||||
M = M < 10 ? "0" + M : M;
|
||||
let s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
|
||||
return dateTime;
|
||||
},
|
||||
// 获取当前时间
|
||||
get_today() {
|
||||
let date = new Date();
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let dateTime =
|
||||
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||
return dateTime;
|
||||
},
|
||||
// 获取明天时间
|
||||
get_tomorrow() {
|
||||
let date = new Date();
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate() + 1;
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let dateTime =
|
||||
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||
return dateTime;
|
||||
},
|
||||
// 表头样式
|
||||
table_header({ row, rowIndex }) {
|
||||
console.log(row);
|
||||
console.log(rowIndex);
|
||||
return {
|
||||
"text-align": "center", // 表头文字居中
|
||||
color: "#fff",
|
||||
border: "0.1px solid #3b4f5c",
|
||||
};
|
||||
},
|
||||
// 跟后端返回判断流程状态颜色
|
||||
styleChange(val) {
|
||||
switch (val) {
|
||||
case "进行中":
|
||||
return "#3eba75";
|
||||
// case "yellow":
|
||||
// return "#FDA722";
|
||||
case "处置成功":
|
||||
return "#2eb9ef";
|
||||
case "处置失败":
|
||||
return "#e55b5b";
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.pageNum = 1;
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.pageNum = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-table {
|
||||
// width: 96vw;
|
||||
height: 60vh;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0.1px solid #3f5564;
|
||||
thead {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border: 0.1px solid #3f5564;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#284f49,
|
||||
#2f6363 5%,
|
||||
#233b38 80%
|
||||
) !important;
|
||||
|
||||
& th {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
/deep/ .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border: 0.1px solid #3f5564;
|
||||
}
|
||||
/deep/.el-button.operation {
|
||||
background-color: #182527;
|
||||
border: 0px;
|
||||
color: #2fabdc;
|
||||
}
|
||||
|
||||
/deep/.el-button.operation:hover,
|
||||
.el-button.operation:focus {
|
||||
background-color: #182527;
|
||||
border: 0px;
|
||||
color: #2fabdc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
.course_body {
|
||||
height: 72vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
.search_top {
|
||||
width: 96vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
/deep/.el-form {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
margin-left: 0.5vw;
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input__inner {
|
||||
// width: 300px;
|
||||
border-radius: 0px;
|
||||
border: 1px solid #3d505e;
|
||||
// border: 0.5px dashed;
|
||||
background: #283436;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 查询框点击颜色变化 */
|
||||
.el-input__inner:focus,
|
||||
.el-input__inner:hover {
|
||||
border-color: #1b3736;
|
||||
}
|
||||
.el-range-input {
|
||||
color: #fff;
|
||||
background: #283436;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-range-separator {
|
||||
color: #fff;
|
||||
width: 10%;
|
||||
}
|
||||
/deep/.el-input__icon.el-range__close-icon {
|
||||
display: none;
|
||||
}
|
||||
.btn {
|
||||
margin-left: 8px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.el-button {
|
||||
width: 70px;
|
||||
height: 4.1vh;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
color: #34e1b3;
|
||||
border: 2px solid #137868;
|
||||
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.search_table {
|
||||
width: 96vw;
|
||||
height: 67vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
}
|
||||
}
|
||||
.table_pagination {
|
||||
width: 96vw;
|
||||
height: 5vh;
|
||||
/deep/.el-input--suffix .el-input__inner {
|
||||
color: #fff;
|
||||
border: 0.1px solid #277f79;
|
||||
border-radius: 0px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
width: 5vw;
|
||||
// height: 2.6vh;
|
||||
// line-height: 2.6vh;
|
||||
}
|
||||
/deep/.el-input__icon {
|
||||
color: #fff;
|
||||
line-height: 2.6vh;
|
||||
height: 2.6vh;
|
||||
}
|
||||
/deep/.el-pagination {
|
||||
margin-left: 65%;
|
||||
margin-top: 2vh;
|
||||
.el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
.el-input__inner {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #277f79;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-prev {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #277f79;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
border: 0.1px solid #277f79;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.btn-next {
|
||||
border: 0.1px solid #277f79;
|
||||
border-radius: 0px;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.el-pager {
|
||||
li {
|
||||
border: 0.1px solid #34a6a6;
|
||||
background: #3c4b4a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!-- 我的流程详情 -->
|
||||
<div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="表单信息" name="first">
|
||||
<MyCourseDetailForm ref="myCourseDetailForm"></MyCourseDetailForm>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流程图" name="second">流程图</el-tab-pane>
|
||||
<el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MyCourseDetailForm from "./myCourseDetailForm";
|
||||
export default {
|
||||
name: "MyCourseDetail",
|
||||
components:{
|
||||
MyCourseDetailForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-tabs__active-bar.is-top {
|
||||
display: none;
|
||||
background: #33cccc;
|
||||
}
|
||||
/deep/.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
background: #5b748c;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px;
|
||||
// margin-right: 20px;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top.is-active {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-bottom: 4px solid #33cccc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
#3a5856,
|
||||
#3b746c
|
||||
) !important;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top:focus,
|
||||
.el-tabs__item.is-top:hover {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-bottom: 4px solid #33cccc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
#3a5856,
|
||||
#3b746c
|
||||
) !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue