客户信息表号码脱敏处理

src/api/qw/companyCustomer.js

@@ -61,7 +61,7 @@ export function getCompanyUserAndDoctor() {
   })
 }
 
-// 根据手机号分页查询处方列表（销售端）
+// 根据主键id分页查询处方列表（销售端）
 export function getPrescribeListByPhone(data) {
   return request({
     url: '/qw/companyCustomer/getPrescribeListByPhone',
@@ -69,8 +69,16 @@ export function getPrescribeListByPhone(data) {
     data: data
   })
 }
+// 根据主键id分页查询处方列表
+export function getPrescribeListByIdAndPhone(data) {
+  return request({
+    url: '/qw/companyCustomer/getPrescribeListByIdAndPhone',
+    method: 'post',
+    data: data
+  })
+}
 
-// 根据手机号分页查询信息采集列表
+// 根据主键id分页查询信息采集列表
 export function getCollectionInfoListByPhone(data) {
   return request({
     url: '/qw/companyCustomer/getCollectionInfoListByPhone',
@@ -78,3 +86,12 @@ export function getCollectionInfoListByPhone(data) {
     data: data
   })
 }
+
+// 根据主键id分页查询信息采集列表
+export function getCollectionInfoListByIdAndPhone(data) {
+  return request({
+    url: '/qw/companyCustomer/getCollectionInfoListByIdAndPhone',
+    method: 'post',
+    data: data
+  })
+}

src/views/qw/companyCustomer/CollectionInfoDialog.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import { getCollectionInfoListByPhone } from '@/api/qw/companyCustomer'
+import { getCollectionInfoListByIdAndPhone } from '@/api/qw/companyCustomer'
 import { parseTime } from '@/utils/common'
 
 export default {
@@ -104,9 +104,9 @@ export default {
       type: Boolean,
       default: false
     },
-    phone: {
-      type: String,
-      default: ''
+    id:{
+      type: Number,
+      default: null
     }
   },
   data() {
@@ -138,7 +138,7 @@ export default {
   },
   watch: {
     visible(newVal) {
-      if (newVal && this.phone) {
+      if (newVal && this.id) {
         this.queryParams.pageNum = 1
         this.getList()
       }
@@ -153,8 +153,8 @@ export default {
     },
     getList() {
       this.loading = true
-      getCollectionInfoListByPhone({
-        phone: this.phone,
+      getCollectionInfoListByIdAndPhone({
+        id: this.id,
         pageNum: this.queryParams.pageNum,
         pageSize: this.queryParams.pageSize
       }).then(response => {

src/views/qw/companyCustomer/index.vue

@@ -62,6 +62,7 @@
       <el-table-column label="负责医生" align="center" prop="doctorName" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
         <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.myCustomerFlag" @click="handleUpdate(scope.row)">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" v-if="scope.row.myCustomerFlag" @click="handleDelete(scope.row)">删除</el-button>
           <el-button size="mini" type="text" icon="el-icon-view" @click="handlePrescribe(scope.row)">查看处方</el-button>
@@ -78,67 +79,57 @@
       @pagination="getList"
     />
 
-    <!-- 新增/编辑弹窗（保持不变） -->
+    <!-- 新增/编辑/详情 弹窗 -->
     <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
         <!-- 第一行：客户姓名、性别、年龄、电话 -->
         <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;">
-          <el-form-item label="客户姓名" prop="customerName" style="flex: 1; min-width: 140px; margin-bottom: 0;">
-            <el-input v-model="form.customerName" placeholder="请输入客户姓名" />
+          <el-form-item label="客户姓名" prop="customerMane" style="flex: 1; min-width: 140px; margin-bottom: 0;">
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input v-model="form.customerName" placeholder="请输入客户姓名" :disabled="isDetail" />
           </el-form-item>
           <el-form-item label="性别" prop="sex" style="flex: 0.6; min-width: 100px; margin-bottom: 0;">
-            <el-select v-model="form.sex" placeholder="请选择" style="width: 100%">
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-select v-model="form.sex" placeholder="请选择" style="width: 100%" :disabled="isDetail">
               <el-option v-for="dict in sexOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="年龄" prop="age" style="flex: 0.7; min-width: 120px; margin-bottom: 0;">
-            <el-input-number
-              v-model="form.age"
-              :min="18"
-              :max="200"
-              placeholder="年龄"
-              controls-position="right"
-              style="width: 100%"
-            />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input-number v-model="form.age" :min="18" :max="200" placeholder="年龄" controls-position="right" style="width: 100%" :disabled="isDetail" />
           </el-form-item>
           <el-form-item label="电话" prop="phone" style="flex: 1.2; min-width: 150px; margin-bottom: 0;">
-            <el-input v-model="form.phone" placeholder="请输入电话" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input v-model="form.phone" placeholder="请输入电话" :disabled="isDetail" />
           </el-form-item>
         </div>
 
         <!-- 第二行：地址、建档时间 -->
         <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;">
           <el-form-item label="地址" prop="address" style="flex: 2; min-width: 200px; margin-bottom: 0;">
-            <el-input v-model="form.address" placeholder="请输入地址" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input v-model="form.address" placeholder="请输入地址" :disabled="isDetail" />
           </el-form-item>
           <el-form-item label="建档时间" prop="filingTime" style="flex: 1; min-width: 180px; margin-bottom: 0;">
-            <el-date-picker
-              v-model="form.filingTime"
-              type="datetime"
-              placeholder="选择建档时间"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              style="width: 100%"
-            />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-date-picker v-model="form.filingTime" type="datetime" placeholder="选择建档时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" :disabled="isDetail" />
           </el-form-item>
         </div>
 
-        <!-- 第三行：客服姓名、约诊时间、负责医生（新增时客服与医生只读，并带隐藏ID） -->
+        <!-- 第三行：客服姓名、约诊时间、负责医生 -->
         <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;">
           <el-form-item label="客服姓名" prop="companyUserName" style="flex: 1; min-width: 130px; margin-bottom: 0;">
-            <el-input v-model="form.companyUserName" placeholder="客服姓名" :disabled="!form.id" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input v-model="form.companyUserName" placeholder="客服姓名" :disabled="isDetail" />
             <input type="hidden" v-model="form.companyUserId" />
           </el-form-item>
           <el-form-item label="约诊时间" prop="appointmentTime" style="flex: 1.2; min-width: 180px; margin-bottom: 0;">
-            <el-date-picker
-              v-model="form.appointmentTime"
-              type="datetime"
-              placeholder="选择约诊时间"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              style="width: 100%"
-            />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-date-picker v-model="form.appointmentTime" type="datetime" placeholder="选择约诊时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" :disabled="isDetail" />
           </el-form-item>
           <el-form-item label="负责医生" prop="doctorName" style="flex: 1; min-width: 130px; margin-bottom: 0;">
-            <el-input v-model="form.doctorName" placeholder="负责医生" :disabled="!form.id" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input v-model="form.doctorName" placeholder="负责医生" :disabled="isDetail" />
             <input type="hidden" v-model="form.doctorId" />
           </el-form-item>
         </div>
@@ -146,24 +137,32 @@
         <!-- 独占行文本域 -->
         <div style="margin-bottom: 15px;">
           <el-form-item label="现病史" prop="presentIllness" style="margin-bottom: 0;">
-            <el-input type="textarea" v-model="form.presentIllness" placeholder="请输入现病史" :rows="3" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input type="textarea" v-model="form.presentIllness" placeholder="请输入现病史" :rows="3" :disabled="isDetail" />
           </el-form-item>
         </div>
         <div style="margin-bottom: 15px;">
           <el-form-item label="现用药情况" prop="currentMedication" style="margin-bottom: 0;">
-            <el-input type="textarea" v-model="form.currentMedication" placeholder="请输入现用药情况" :rows="3" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input type="textarea" v-model="form.currentMedication" placeholder="请输入现用药情况" :rows="3" :disabled="isDetail" />
           </el-form-item>
         </div>
         <div style="margin-bottom: 0;">
           <el-form-item label="过敏史" prop="allergyHistory" style="margin-bottom: 0;">
-            <el-input type="textarea" v-model="form.allergyHistory" placeholder="请输入过敏史" :rows="3" />
+            <!-- 2. 绑定 :disabled="isDetail" -->
+            <el-input type="textarea" v-model="form.allergyHistory" placeholder="请输入过敏史" :rows="3" :disabled="isDetail" />
           </el-form-item>
         </div>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+
+      <!-- 3. 在底部只显示“关闭”按钮，不显示“确定”和“取消” -->
+      <div slot="footer" class="dialog-footer" v-if="!isDetail">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+      <div slot="footer" class="dialog-footer" v-else>
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
     </el-dialog>
 
     <!-- 处方列表弹窗 -->
@@ -210,18 +209,18 @@
     </el-dialog>
 
     <!-- 信息采集弹窗 -->
-    <collection-info-dialog :visible.sync="collectionVisible" :phone="currentPhone" />
+    <collection-info-dialog :visible.sync="collectionVisible" :id="currentId" />
   </div>
 </template>
 
 <script>
 import {
   listCustomer, getCustomer, addCustomer, updateCustomer, delCustomer, exportCustomer,
-  getCompanyUserAndDoctor, getPrescribeListByPhone
+  getCompanyUserAndDoctor, getPrescribeListByIdAndPhone
 } from '@/api/qw/companyCustomer'
 import { parseTime } from '@/utils/common'
 
-import CollectionInfoDialog from './CollectionInfoDialog.vue'  // 引入信息采集表组件
+import CollectionInfoDialog from './CollectionInfoDialog.vue'
 
 export default {
   name: "Customer",
@@ -233,12 +232,8 @@ export default {
         return;
       }
       const phone = String(value).trim();
-      if (!/^\d{11}$/.test(phone)) {
-        callback(new Error('电话号码必须为11位数字'));
-        return;
-      }
-      if (!/^1[3-9]\d{9}$/.test(phone)) {
-        callback(new Error('请输入有效的手机号码（1开头，第二位3-9）'));
+      if (phone.length !== 11) {
+        callback(new Error('电话号码必须为11个字符'));
         return;
       }
       callback();
@@ -301,6 +296,7 @@ export default {
       prescribeList: [],
       prescribeTotal: 0,
       currentPhone: '',
+      currentId: null,
       prescribeQueryParams: {
         pageNum: 1,
         pageSize: 10
@@ -316,6 +312,8 @@ export default {
       ],
       //控制信息采集弹窗的变量
       collectionVisible: false,
+      //详情弹窗
+      isDetail: false,
     }
   },
   created() {
@@ -351,6 +349,26 @@ export default {
       this.open = false;
       this.reset();
     },
+    /**
+     * 处理详情按钮点击
+     */
+    handleDetail(row) {
+      this.reset();
+      const id = row.id;
+      getCustomer(id).then(response => {
+        this.form = response.data;
+        // 将数字类型的 sex 转换为字符串，以匹配 el-select 的 value
+        if (this.form.sex !== undefined && this.form.sex !== null) {
+          this.form.sex = String(this.form.sex);
+        }
+        // 设置为详情模式，开启只读
+        this.isDetail = true;
+        this.open = true;
+        this.title = "客户详情";
+      }).catch(() => {
+        this.$message.error("获取客户详情失败");
+      });
+    },
     reset() {
       this.form = {
         id: null,
@@ -370,6 +388,8 @@ export default {
         allergyHistory: null
       };
       this.resetForm("form");
+      // 重置详情模式
+      this.isDetail = false;
     },
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -479,7 +499,7 @@ export default {
         this.$message.warning('该客户未登记手机号，无法查询处方');
         return;
       }
-      this.currentPhone = row.phone;
+      this.currentId = row.id;
       this.prescribeQueryParams.pageNum = 1;
       this.prescribeOpen = true;
       this.getPrescribeList();
@@ -488,11 +508,11 @@ export default {
     getPrescribeList() {
       this.prescribeLoading = true;
       const params = {
-        phone: this.currentPhone,
+        id: this.currentId,
         pageNum: this.prescribeQueryParams.pageNum,
         pageSize: this.prescribeQueryParams.pageSize
       };
-      getPrescribeListByPhone(params).then(response => {
+      getPrescribeListByIdAndPhone(params).then(response => {
         // 后端返回 TableDataInfo，直接取 rows 和 total
         this.prescribeList = response.rows || [];
         this.prescribeTotal = response.total || 0;
@@ -507,7 +527,7 @@ export default {
         this.$message.warning('该客户未登记手机号，无法查看信息采集表')
         return
       }
-      this.currentPhone = row.phone
+      this.currentId = row.id
       this.collectionVisible = true
     },
   },