WXL
2025-08-06 2eff945fb9fc0d17b2098b26aba74ab192ec3727
src/views/followvisit/record/detailpage/index.vue
@@ -215,7 +215,12 @@
    </div>
    <div class="Followuserinfos">
      <div>
        <el-form ref="form" :model="form" label-width="120px">
        <el-form
          ref="userform"
          :model="form"
          :rules="userrules"
          label-width="120px"
        >
          <div class="headline">
            <div>人工处理</div>
            <el-row :gutter="20">
@@ -224,6 +229,13 @@
                  <el-input
                    placeholder="联系电话缺失"
                    v-model="userform.telcode"
                  >
                    <el-button
                      slot="append"
                      icon="el-icon-phone"
                      @click="handleCall(userform.telcode, 'tel')"
                      :disabled="!isValidPhone(userform.telcode)"
                    ></el-button
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8"
@@ -231,6 +243,13 @@
                  <el-input
                    placeholder="联系人电话缺失"
                    v-model="userform.relativetelcode"
                  >
                    <el-button
                      slot="append"
                      icon="el-icon-phone"
                      @click="handleCall(userform.relativetelcode, 'relative')"
                      :disabled="!isValidPhone(userform.relativetelcode)"
                    ></el-button
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8"
@@ -241,13 +260,37 @@
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <div style="margin-left: 30px">
              <el-button type="primary" plain @click="Editsingletasksonyic('')"
                >保存服务</el-button
              >
            </div>
          </div>
          <el-row :gutter="20" v-if="callStatus !== 'idle'">
            <el-col :span="24">
              <el-alert
                :title="callStatusText"
                :type="callStatusType"
                :closable="false"
                show-icon
              />
            </el-col>
          </el-row>
          <!-- 挂断按钮(仅在通话中显示) -->
          <el-row :gutter="20" v-if="callStatus === 'connected'">
            <el-col :span="24" style="text-align: center; margin-top: 10px">
              <el-button
                type="danger"
                icon="el-icon-phone"
                @click="endCurrentCall"
                :loading="isEndingCall"
              >
                挂断电话
              </el-button>
            </el-col>
          </el-row>
          <el-form-item label="随访记录">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
@@ -355,7 +398,11 @@
    </div>
    <div>
      <h2>一键呼叫功能</h2>
      <CallButton />
      <CallButton
        ref="callButton"
        :phoneNumber="currentPhoneNumber"
        style="display: none"
      />
    </div>
    <div>
      <el-tabs v-model="activeName" type="border-card">
@@ -704,6 +751,7 @@
                :picker-options="pickerOptions"
                align="right"
                v-model="form.date1"
                class="custom-disabled"
              ></el-date-picker>
            </el-form-item>
          </el-col>
@@ -753,10 +801,29 @@
  components: {
    CallButton,
  },
  dicts: ["sys_normal_disable", "sys_user_sex", "sys_yujing", "sys_suggest"],
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入联系电话"));
      }
      setTimeout(() => {
        if (!/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error("请输入正确的11位手机号码"));
        } else {
          callback();
        }
      }, 300);
    };
    return {
      userid: "",
      currentPhoneNumber: "",
      callType: "", // 用于区分是哪个电话
      // 已有数据...
      callStatus: "idle", // idle, calling, connected, ended, failed
      isEndingCall: false,
      currentCall: null, // 当前通话对象
      input: "今天身体还不错",
      radio: "2",
      taskname: "",
@@ -774,6 +841,10 @@
          { required: true, message: "请选择随访方式", trigger: "change" },
        ],
        date1: [{ required: true, message: "请选择随访时间", trigger: "blur" }],
      },
      userrules: {
        telcode: [{ validator: validatePhone, trigger: "blur" }],
        relativetelcode: [{ validator: validatePhone, trigger: "blur" }],
      },
      url: "http://9.208.2.190:8090/smartor/serviceExternal/query360PatInfo",
      postData: {
@@ -810,6 +881,10 @@
        },
      },
      pickerOptions: {
        disabledDate(time) {
          // 禁用今天及之前的日期
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
        shortcuts: [
          {
            text: "七天后",
@@ -901,7 +976,28 @@
      patid: null,
    };
  },
  computed: {
    callStatusText() {
      const statusMap = {
        idle: "准备呼叫",
        calling: `正在呼叫 ${this.currentPhoneNumber}...`,
        connected: `已接通 ${this.currentPhoneNumber}`,
        ended: "通话已结束",
        failed: "呼叫失败",
      };
      return statusMap[this.callStatus];
    },
    callStatusType() {
      const typeMap = {
        idle: "info",
        calling: "warning",
        connected: "success",
        ended: "info",
        failed: "error",
      };
      return typeMap[this.callStatus];
    },
  },
  created() {
    this.taskid = this.$route.query.taskid;
    this.id = this.$route.query.id;
@@ -996,17 +1092,29 @@
      // 根据选择的随访方式设置时间
      const now = new Date();
      if (value.includes("七天后")) {
        this.form.date1 = new Date(Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 7);
        this.form.date1 = new Date(
          Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 7
        );
      } else if (value.includes("15天后")) {
        this.form.date1 = new Date(Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 15);
        this.form.date1 = new Date(
          Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 15
        );
      } else if (value.includes("一个月后")) {
        this.form.date1 = new Date(Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 30);
        this.form.date1 = new Date(
          Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 30
        );
      } else if (value.includes("三个月后")) {
        this.form.date1 = new Date(Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 90);
        this.form.date1 = new Date(
          Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 90
        );
      } else if (value.includes("六个月后")) {
        this.form.date1 = new Date(Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 180);
        this.form.date1 = new Date(
          Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 180
        );
      } else if (value.includes("一年后")) {
        this.form.date1 = new Date(Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 365);
        this.form.date1 = new Date(
          Date.parse(this.form.endtime) + 3600 * 1000 * 24 * 365
        );
      }
    },
@@ -1140,10 +1248,10 @@
                    path: "/logisticsservice/record",
                  });
                }
              } else if (form.serviceType == 2) {
              } else if (this.form.serviceType == 2) {
                if (this.visitCount) {
                  this.$router.push({
                    path: "/followvisit/again",
                    path: "/logisticsservice/again",
                  });
                } else {
                  this.$router.push({
@@ -1157,6 +1265,96 @@
          // 如果有任何一个异步操作失败,会进入这里
          console.error("发生错误:", error);
        });
    },
    // 验证电话号码格式并返回错误信息
validatePhoneNumber(phone) {
  if (!phone) {
    return { isValid: false, message: '请输入电话号码' };
  }
  // 手机号正则
  const mobileRegex = /^1[3-9]\d{9}$/;
  // 带区号的固定电话(完整格式)
  const landlineFullRegex = /^0\d{2,3}-?\d{7,8}$/;
  // 不带区号的固定电话(仅本地号码)
  const landlineLocalRegex = /^\d{7,8}$/;
  if (mobileRegex.test(phone)) {
    return { isValid: true, type: 'mobile' };
  } else if (landlineFullRegex.test(phone)) {
    return { isValid: true, type: 'landline' };
  } else if (landlineLocalRegex.test(phone)) {
    return {
      isValid: false,
      message: '本地号码请添加区号(如028-1234567)'
    };
  } else {
    return {
      isValid: false,
      message: '请输入正确的电话号码(手机号或带区号的固定电话)'
    };
  }
},
// 使用示例
isValidPhone(phone) {
  return this.validatePhoneNumber(phone).isValid;
},
    handleCall(phone, type) {
      if (!this.isValidPhone(phone)) {
        this.$message.error("请输入正确的手机号码");
        return;
      }
      this.currentPhoneNumber = phone;
      this.callType = type;
      this.callStatus = "calling";
      this.$nextTick(() => {
        this.$refs.callButton.startCall();
        // 监听通话状态变化
        this.$refs.callButton.$on("call-status-change", (status) => {
          this.handleCallStatusChange(status);
        });
      });
    },
    // 处理通话状态变化
    handleCallStatusChange(status) {
      console.log(status,'status');
      this.callStatus = status.type;
      if (status.type === "connected") {
        this.currentCall = {
          phone: this.currentPhoneNumber,
          type: this.callType,
          startTime: new Date(),
        };
      } else if (status.type === "ended" || status.type === "failed") {
        this.currentCall = null;
      }
      // 可以根据状态执行其他操作
      if (status.type === "failed") {
        this.$message.error(`呼叫失败: ${status.text}`);
      }
    },
    // 结束当前通话
    endCurrentCall() {
      if (!this.currentCall) return;
      this.isEndingCall = true;
      this.$refs.callButton.endCall();
      // 3秒后重置状态
      setTimeout(() => {
        this.isEndingCall = false;
      }, 3000);
    },
    yuyingetdetail() {
      this.tableDatatop.forEach((item, index) => {
@@ -1203,7 +1401,7 @@
            })
            .catch(() => {
              if (this.form.serviceType == 13) {
                if (this.visitCount) {
                if (this.visitCount != 1) {
                  this.$router.push({
                    path: "/logisticsservice/zbAgain",
                  });
@@ -1213,7 +1411,7 @@
                  });
                }
              } else if (form.serviceType == 2) {
                if (this.visitCount) {
                if (this.visitCount != 1) {
                  this.$router.push({
                    path: "/followvisit/again",
                  });
@@ -1249,11 +1447,12 @@
          this.form = res.rows[0].serviceSubtaskList.find(
            (item) => item.id == this.id
          );
          console.log(this.form.serviceType, "serviceType");
          this.logsheetlist = res.rows[0].serviceSubtaskList;
          this.templateid = this.logsheetlist[0].templateid;
          const targetDate = new Date(this.form.longSendTime); // 目标日期
          const now = new Date(); // 当前时间
          this.form.endtime = this.formatTime(this.form.endtime);
          if (now < targetDate && this.form.sendstate == 2) {
            this.$confirm("当前服务未到发送时间请谨慎修改", "提示", {
              confirmButtonText: "确定",
@@ -1405,7 +1604,6 @@
          form.finishtime = "";
          if (form.resource) {
            if (form.resource == 2) {
              form.serviceType = 13;
              form.visitDeptCode = localStorage.getItem("deptCode");
              form.visitDeptName = "随访中心";
            } else {
@@ -1418,16 +1616,18 @@
          }
          // form.id = null;
          form.sendstate = 2;
          console.log(form.serviceType, "form.serviceType");
          addserviceSubtask(form).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("创建成功");
              if (form.serviceType == 13) {
                this.$router.push({
                  path: "/logisticsservice/again",
                  path: "/logisticsservice/zbAgain",
                });
              } else if (form.serviceType == 2) {
                this.$router.push({
                  path: "/logisticsservice/zbAgain",
                  path: "/logisticsservice/again",
                });
              }
            } else {
@@ -1631,6 +1831,19 @@
  background-color: #f57676;
  border-color: #f57676;
}
.el-icon-phone {
  transition: all 0.3s;
}
.el-button[disabled] .el-icon-phone {
  color: #c0c4cc;
}
.el-button:not([disabled]) .el-icon-phone {
  color: #409eff;
}
.el-button:not([disabled]):hover .el-icon-phone {
  color: #66b1ff;
  transform: scale(1.1);
}
.mulsz {
  font-size: 25px;
  margin-top: 20px;