时间轴

wwl

2024-12-16 597868aaddca867a6e55325acf1467540d58b99c

时间轴

 src/api/system/tijian.js

@@ -95,8 +95,8 @@
export function shijianzhou(data) {
  return request({
    url: "/hosp/order/zongjanyemianshjianzhou",
    method: "get",
    data: data
    method: "post",
    data: data,
  });
}
// 添加过渡表数据

 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
@@ -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) {
@@ -1725,7 +1725,6 @@
      this.CheckBox = val;
      this.queryParams.dw = this.CheckBox.cnName;
      console.log(this.CheckBox,9999);
      
    },
    onPayTypeChange() {
      if (this.payType === "6" && this.form.tjType !== 3) {
@@ -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%;
}
  align-items: flex-start;

.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%;
}
</style>