From 597868aaddca867a6e55325acf1467540d58b99c Mon Sep 17 00:00:00 2001
From: wwl <xchao828@163.com>
Date: 星期一, 16 十二月 2024 18:01:00 +0800
Subject: [PATCH] 时间轴
---
src/views/hosp/order/index.vue | 158 ++++++++++++++++++++++------------------------------
1 files changed, 66 insertions(+), 92 deletions(-)
diff --git a/src/views/hosp/order/index.vue b/src/views/hosp/order/index.vue
index 940c2db..4c6f0cf 100644
--- a/src/views/hosp/order/index.vue
+++ b/src/views/hosp/order/index.vue
@@ -42,7 +42,7 @@
<el-form-item
label="鍗曚綅鍚嶇О"
prop="tjCompName"
- style="margin-left: 20px;margin-right: 500px;"
+ style="margin-left: 20px; margin-right: 500px"
>
<el-select
:remote-method="getRemoteData"
@@ -54,7 +54,6 @@
placeholder="璇烽�夋嫨鍗曚綅鍚嶇О"
clearable
@change="searchSelect"
-
>
<el-option
v-for="dict in CompanyList"
@@ -64,10 +63,7 @@
/>
</el-select>
</el-form-item>
- <el-form-item
- label="鐘舵��"
- prop="zt"
- >
+ <el-form-item label="鐘舵��" prop="zt">
<el-select
:remote-method="getRemoteData"
v-model="queryParams.zt"
@@ -77,7 +73,6 @@
placeholder="璇烽�夋嫨鐘舵��"
clearable
@change="searchSelect"
-
>
<el-option
v-for="item in ztList"
@@ -87,7 +82,11 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="鐧昏鏃堕棿" prop="createTimeList" style="margin-right: 107px;" >
+ <el-form-item
+ label="鐧昏鏃堕棿"
+ prop="createTimeList"
+ style="margin-right: 107px"
+ >
<el-date-picker
v-model="createTimeList"
type="datetimerange"
@@ -142,20 +141,20 @@
>
</el-form-item>
</el-form>
- <!-- <div class="timeline-wrapper">
- <el-timeline :reverse="false" class="horizontal-timeline">
- <el-timeline-item
- v-for="(item, index) in timelineData"
- :key="index"
- :timestamp="item.timestamp"
- :position="index % 2 === 0 ? 'left' : 'right'">
- <el-card :body-style="{ padding: '20px' }">
- <h3>{{ item.title }}</h3>
- <p>{{ item.description }}</p>
- </el-card>
- </el-timeline-item>
- </el-timeline>
- </div> -->
+ <template v-for="(item, index) in shijianlist" >
+ <div :key="index" style="margin-bottom: 20px" v-if="shijianlist.length > 0">
+ {{findNameByTjnum(item.tjNUm) }}
+ <el-steps :space="200" :active="item.sjz" finish-status="success" align-center>
+ <el-step title="鏈"></el-step>
+ <el-step title="鍦ㄦ"></el-step>
+ <el-step title="宸插畬鎴�"></el-step>
+ <el-step title="宸插鏍�"></el-step>
+ <el-step title="鐢熸垚鎶ュ憡"></el-step>
+ <el-step title="鎶ュ憡鏍告敹"></el-step>
+ <el-step title="宸插嚭鎶ュ憡"></el-step>
+ </el-steps>
+ </div>
+</template>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@@ -402,14 +401,14 @@
</el-table-column>
<!-- <el-table-column label="鍒涘缓浜�" align="center" prop="createBy" /> -->
<!-- <el-table-column label="鏇存柊浜�" align="center" prop="updateBy" /> -->
- <!-- <el-table-column
+ <!-- <el-table-column
label="鍗曚綅宸ュ彿"
align="center"
prop="firmWorkId"
width="100px"
:show-overflow-tooltip="true"
/> -->
-
+
<!-- <el-table-column label="閮ㄩ棬鍚�" align="center" prop="firmDeptName" /> -->
<!-- <el-table-column label="瀹㈡埛鐓х墖" align="center" prop="photo" /> -->
@@ -1530,16 +1529,13 @@
data() {
return {
ztList: [
- {name:'鏈',id: 0},{name:'鍦ㄦ',id: 1},{name:'宸插畬鎴�',id: 2},{name:'宸插鏍�',id: 3},{name:'鐢熸垚鎶ュ憡',id: 4},{name:'鎶ュ憡鏍告敹',id: 5},{name:'宸插嚭鎶ュ憡',id: 6},
- ],
- timelineData: [
- { timestamp: '2024-01-01', title: '鏈', description: 'This is event 1 description' },
- { timestamp: '2024-01-05', title: '鍦ㄦ', description: 'This is event 2 description' },
- { timestamp: '2024-01-10', title: '宸插畬鎴�', description: 'This is event 3 description' },
- { timestamp: '2024-01-15', title: '宸插鏍�', description: 'This is event 4 description' },
- { timestamp: '2024-01-15', title: '鐢熸垚鎶ュ憡', description: 'This is event 4 description' },
- { timestamp: '2024-01-15', title: '鎶ュ憡鏍告敹', description: 'This is event 4 description' },
- { timestamp: '2024-01-15', title: '宸插嚭鎶ュ憡', description: 'This is event 4 description' },
+ { name: "鏈", id: 0 },
+ { name: "鍦ㄦ", id: 1 },
+ { name: "宸插畬鎴�", id: 2 },
+ { name: "宸插鏍�", id: 3 },
+ { name: "鐢熸垚鎶ュ憡", id: 4 },
+ { name: "鎶ュ憡鏍告敹", id: 5 },
+ { name: "宸插嚭鎶ュ憡", id: 6 },
],
DataList3: [],
bldhid: "",
@@ -1596,7 +1592,7 @@
TreedataList: [],
discount: 10,
DataList: [],
- tjNUms: [],
+ shijianlist: [],
// 濂楅鎻愪氦鎸夐挳
confirm: false,
list1: true,
@@ -1644,8 +1640,8 @@
bgbeginTime: null,
bgendTime: null,
xmmc: null,
- tjCompName:'',
- dw:null
+ tjCompName: "",
+ dw: null,
},
startTime: "",
startTime1: "",
@@ -1708,6 +1704,10 @@
});
},
methods: {
+ findNameByTjnum(tjnum) {
+ const order = this.orderList.find(orderItem => orderItem.tjNumber === tjnum);
+ return order ? order.tjCustomerName : '鏈壘鍒�'; // 濡傛灉鎵句笉鍒板搴旂殑椤癸紝杩斿洖涓�涓粯璁ゅ��
+ },
// 鎼滅储
getRemoteData(query) {
if (query) {
@@ -1724,8 +1724,7 @@
searchSelect(val) {
this.CheckBox = val;
this.queryParams.dw = this.CheckBox.cnName;
- console.log(this.CheckBox,9999);
-
+ console.log(this.CheckBox, 9999);
},
onPayTypeChange() {
if (this.payType === "6" && this.form.tjType !== 3) {
@@ -1825,11 +1824,11 @@
this.total = response.data.total;
this.loading = false;
});
- // 鑾峰彇鍗曚綅淇℃伅闆嗗悎
- getCompany(this.queryParams).then((response) => {
+ // 鑾峰彇鍗曚綅淇℃伅闆嗗悎
+ getCompany(this.queryParams).then((response) => {
this.CompanyList = response.data;
- console.log( this.CompanyList,555);
-
+ console.log(this.CompanyList, 555);
+
this.loading = false;
});
},
@@ -2027,7 +2026,7 @@
djendTime: null,
bgbeginTime: null,
bgendTime: null,
- dw: null
+ dw: null,
};
this.resetForm("form");
},
@@ -2104,14 +2103,14 @@
bgbeginTime: null,
bgendTime: null,
xmmc: null,
- tjCompName:'',
- dw:null
- }
+ tjCompName: "",
+ dw: null,
+ };
this.handleQuery();
},
// 澶氶�夋閫変腑鏁版嵁
handleSelectionChange(selection) {
- this.tjNUms = selection.map(item => item.tjNumber);
+ let tjNUms = selection.map((item) => item.tjNumber);
selection.forEach((item) => {
this.orderIds = item.orderId;
this.tjnumbers = item.tjNumber;
@@ -2127,11 +2126,15 @@
this.ids = selection.map((item) => item.orderId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
- shijianzhou({
- tjNUms: this.tjNUms
- }).then((res) => {
- console.log(res)
- })
+ if (tjNUms.length > 0) {
+ shijianzhou(tjNUms).then((res) => {
+ this.shijianlist = res.data
+ });
+ } else{
+ this.shijianlist = []
+ }
+
+
},
/** 鏂板鎸夐挳鎿嶄綔 */
// handleAdd() {
@@ -2812,7 +2815,7 @@
},
};
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.pag {
width: 100%;
display: flex;
@@ -2910,45 +2913,16 @@
display: flex;
flex-direction: column;
}
-.timeline-wrapper {
- overflow-x: auto;
- padding: 20px;
- width: 100%;
+::v-deep .el-step__title.is-process {
+ color: rgb(24, 144, 255);
}
-
-.horizontal-timeline {
+::v-deep .el-step__head.is-process {
+ color: rgb(24, 144, 255);
+ border-color: rgb(24, 144, 255);
+}
+.shijian{
display: flex;
- align-items: center;
- justify-content: flex-start;
- flex-wrap: nowrap;
- padding: 20px 0;
- width: 100%;
-}
-
-.el-timeline-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 0 20px;
-}
-
-.el-timeline-item .el-card {
- width: 150px;
- border-radius: 10px;
-}
-
-.el-timeline-item .el-timeline-item-tail {
- display: none;
-}
-
-.el-timeline-item .el-timeline-item-dot {
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translateX(-50%);
- width: 12px;
- height: 12px;
- background-color: #409EFF;
- border-radius: 50%;
+ align-items: flex-start;
+
}
</style>
--
Gitblit v1.8.0