添加发货人手机号码，和折叠展示数据

src/views/hisStore/storeProduct/indexZm.vue

@@ -985,19 +985,50 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属公司">
-          <el-select style="width: 240px" v-model="form.companyIds" multiple placeholder="请选择企业" clearable size="small" >
-            <div style="padding: 0 20px; display: flex; justify-content: space-between; line-height: 34px;">
-              <el-button type="text" size="mini" @click="form.companyIds = companyOptions.map(item => item.companyId)">全选</el-button>
-              <el-button type="text" size="mini" @click="form.companyIds = companyOptions.map(item => item.companyId).filter(id => !form.companyIds.includes(id))">反选</el-button>
-              <el-button type="text" size="mini" @click="form.companyIds = []">清空</el-button>
+          <div class="form-company-select">
+            <el-select
+              class="company-select-input"
+              style="width: 240px"
+              v-model="form.companyIds"
+              multiple
+              placeholder="请选择企业"
+              clearable
+              size="small"
+            >
+              <div style="padding: 0 20px; display: flex; justify-content: space-between; line-height: 34px;">
+                <el-button type="text" size="mini" @click="form.companyIds = companyOptions.map(item => item.companyId)">全选</el-button>
+                <el-button type="text" size="mini" @click="form.companyIds = companyOptions.map(item => item.companyId).filter(id => !form.companyIds.includes(id))">反选</el-button>
+                <el-button type="text" size="mini" @click="form.companyIds = []">清空</el-button>
+              </div>
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.companyId"
+                :label="item.companyName"
+                :value="item.companyId"
+              />
+            </el-select>
+            <div v-if="selectedCompanyList.length" class="selected-company-list">
+              <template v-if="selectedCompanyList.length <= 5 || formCompanyIdsExpanded">
+                <el-tag
+                  v-for="item in selectedCompanyList"
+                  :key="item.companyId"
+                  closable
+                  size="mini"
+                  class="selected-company-tag"
+                  @close="removeFormCompanyId(item.companyId)"
+                >{{ item.companyName }}</el-tag>
+              </template>
+              <div v-else class="company-fold-bar">
+                <span class="company-fold-summary">已选择 {{ selectedCompanyList.length }} 个公司</span>
+              </div>
+              <el-button
+                v-if="selectedCompanyList.length > 5"
+                type="text"
+                size="mini"
+                @click="formCompanyIdsExpanded = !formCompanyIdsExpanded"
+              >{{ formCompanyIdsExpanded ? '收起' : '展开' }}</el-button>
             </div>
-            <el-option
-              v-for="item in companyOptions"
-              :key="item.companyId"
-              :label="item.companyName"
-              :value="item.companyId"
-            />
-          </el-select>
+          </div>
         </el-form-item>
         <el-form-item label="所属店铺" prop="storeId" v-if="this.isStores">
           <el-select style="width: 240px" v-model="form.storeId" placeholder="请选择店铺" clearable size="small" >
@@ -1012,6 +1043,29 @@
         <el-form-item label="退货地址" prop="returnAddress">
           <el-input v-model="form.returnAddress" type="textarea" :rows="1" placeholder="请输入退货地址" />
         </el-form-item>
+        <el-form-item label="发货人手机号" prop="senderPhones">
+          <div class="sender-phone-wrap">
+            <el-tag
+              v-for="(phone, index) in senderPhoneList"
+              :key="phone + '-' + index"
+              closable
+              @close="removeSenderPhone(index)"
+              style="margin-right: 8px; margin-bottom: 8px;"
+            >{{ phone }}</el-tag>
+            <template v-if="senderPhoneList.length < 3">
+              <el-input
+                v-model="senderPhoneInput"
+                placeholder="请输入手机号"
+                maxlength="11"
+                size="small"
+                style="width: 180px; margin-right: 8px;"
+                @keyup.enter.native="addSenderPhone"
+              />
+              <el-button type="primary" size="small" @click="addSenderPhone">添加</el-button>
+            </template>
+            <span v-else class="text-muted">最多添加3个手机号</span>
+          </div>
+        </el-form-item>
         <el-form-item label="国药准字" v-if="form.productType==2" prop="prescribeCode">
           <el-input v-model="form.prescribeCode" placeholder="请输入国药准字" />
         </el-form-item>
@@ -1287,6 +1341,8 @@ export default {
       ],
       photoArr:[],
       imageArr:[],
+      senderPhoneList: [],
+      senderPhoneInput: '',
       tagType: [],
       presaleShippingTime: null,
       activeName:"1",
@@ -1317,6 +1373,7 @@ export default {
       // 商品表格数据
       storeProductList: [],
       expandedCompanyRows: {},
+      formCompanyIdsExpanded: false,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -1490,6 +1547,19 @@ export default {
     this.getList();
   },
   computed: {
+    selectedCompanyList() {
+      const ids = this.form.companyIds || [];
+      if (!ids.length) {
+        return [];
+      }
+      return ids.map(id => {
+        const company = this.companyOptions.find(item => item.companyId === id);
+        return {
+          companyId: id,
+          companyName: company ? company.companyName : id
+        };
+      });
+    }
   },
   methods: {
     getCompanyNameList(companyName) {
@@ -1512,6 +1582,12 @@ export default {
       const key = row.productId;
       this.$set(this.expandedCompanyRows, key, !this.expandedCompanyRows[key]);
     },
+    removeFormCompanyId(companyId) {
+      this.form.companyIds = (this.form.companyIds || []).filter(id => id !== companyId);
+      if ((this.form.companyIds || []).length <= 5) {
+        this.formCompanyIdsExpanded = false;
+      }
+    },
     getStatusText(row) {
       console.log()
       if (row.isAudit == 0) {
@@ -2009,6 +2085,7 @@ export default {
         isDisplay:"1",
         companyIds:[],
         returnAddress: "", // 退货地址
+        senderPhones: "", // 发货人手机号
         isDrug: "0", // 是否药品
         originPlace: "", // 原产地
         netContent: "", // 净含量
@@ -2060,6 +2137,40 @@ export default {
       this.attrs=[];
       this.photoArr=[];
       this.imageArr=[];
+      this.senderPhoneList = [];
+      this.senderPhoneInput = '';
+      this.formCompanyIdsExpanded = false;
+    },
+    parseSenderPhones(value) {
+      if (!value) {
+        return [];
+      }
+      return value.split(',').map(phone => phone.trim()).filter(phone => phone);
+    },
+    syncSenderPhonesToForm() {
+      this.form.senderPhones = this.senderPhoneList.join(',');
+    },
+    addSenderPhone() {
+      const phone = (this.senderPhoneInput || '').trim();
+      if (!phone) {
+        return this.$message.warning('请输入手机号');
+      }
+      if (!/^1\d{10}$/.test(phone)) {
+        return this.$message.warning('请输入正确的11位手机号');
+      }
+      if (this.senderPhoneList.includes(phone)) {
+        return this.$message.warning('手机号已存在');
+      }
+      if (this.senderPhoneList.length >= 3) {
+        return this.$message.warning('最多添加3个手机号');
+      }
+      this.senderPhoneList.push(phone);
+      this.senderPhoneInput = '';
+      this.syncSenderPhonesToForm();
+    },
+    removeSenderPhone(index) {
+      this.senderPhoneList.splice(index, 1);
+      this.syncSenderPhonesToForm();
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -2125,6 +2236,8 @@ export default {
         if (this.form.drugImage != null) {
           this.drugImageArr = this.form.drugImage.split(",");
         }
+        this.senderPhoneList = this.parseSenderPhones(this.form.senderPhones);
+        this.senderPhoneInput = '';
 
         //组装attrs数据
         if(response.attrs!=null){
@@ -2257,6 +2370,7 @@ export default {
           } else {
             this.form.tagInfo = null;
           }
+          this.syncSenderPhonesToForm();
           addOrEdit(this.form).then(response => {
             if (response.code === 200) {
               this.msgSuccess("修改成功");
@@ -2348,4 +2462,28 @@ export default {
 .company-name-item {
   word-break: break-all;
 }
+.form-company-select {
+  width: 100%;
+}
+.form-company-select .company-select-input ::v-deep .el-select__tags {
+  display: none;
+}
+.form-company-select .company-select-input ::v-deep .el-input__inner {
+  height: 32px !important;
+}
+.selected-company-list {
+  margin-top: 8px;
+  line-height: 1.5;
+}
+.selected-company-tag {
+  margin: 0 8px 8px 0;
+}
+.company-fold-bar {
+  display: inline-block;
+  margin-right: 8px;
+}
+.company-fold-summary {
+  color: #606266;
+  font-size: 12px;
+}
 </style>

src/views/hisStore/storeProductAudit/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container store-product-audit-page">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
 
       <el-form-item label="商品分类" prop="cateId">
@@ -103,7 +103,8 @@
       <el-tab-pane label="待上架" name="0"></el-tab-pane>
     </el-tabs>-->
 
-    <el-table  height="500" border v-loading="loading" :data="storeProductList" @selection-change="handleSelectionChange">
+    <div class="table-wrapper">
+    <el-table ref="storeProductTable" :height="tableHeight" border v-loading="loading" :data="storeProductList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="ID" align="center" prop="productId" />
       <el-table-column label="商品图片" align="center" width="120">
@@ -119,7 +120,25 @@
       </el-table-column>
       <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
       <el-table-column label="分类" align="center" prop="cateName" />
-      <el-table-column label="所属公司" align="center" prop="companyName" />
+      <el-table-column label="所属公司" align="center" min-width="160">
+        <template slot-scope="scope">
+          <div class="company-name-list">
+            <div
+              v-for="(name, idx) in getDisplayCompanyNameList(scope.row)"
+              :key="idx"
+              class="company-name-item"
+            >{{ name }}</div>
+            <el-button
+              v-if="getCompanyNameList(scope.row.companyName).length > 3"
+              type="text"
+              size="mini"
+              @click="toggleCompanyNameExpand(scope.row)"
+            >
+              {{ isCompanyNameExpanded(scope.row) ? '收起' : `展开(${getCompanyNameList(scope.row.companyName).length})` }}
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="所属店铺" align="center" prop="storeName" />
       <el-table-column label="售价" align="center" prop="price" >
           <template slot-scope="scope" >
@@ -155,8 +174,10 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
 
     <pagination
+      class="pagination-bar"
       v-show="total>0"
       :total="total"
       :page.sync="queryParams.pageNum"
@@ -624,14 +645,35 @@
             </el-select>
         </el-form-item>
         <el-form-item label="所属公司">
-          <el-select style="width: 240px" v-model="form.companyIds" multiple placeholder="请选择企业" clearable size="small" >
-            <el-option
-                    v-for="item in companyOptions"
-                    :key="item.companyId"
-                    :label="item.companyName"
-                    :value="item.companyId"
-                  />
-            </el-select>
+          <div class="company-name-list audit-company-list">
+            <template v-if="auditCompanyList.length">
+              <div
+                v-for="(name, idx) in auditDisplayCompanyList"
+                :key="idx"
+                class="company-name-item"
+              >{{ name }}</div>
+              <el-button
+                v-if="auditCompanyList.length > 3"
+                type="text"
+                size="mini"
+                @click="formAuditCompanyExpanded = !formAuditCompanyExpanded"
+              >
+                {{ formAuditCompanyExpanded ? '收起' : `展开(${auditCompanyList.length})` }}
+              </el-button>
+            </template>
+            <span v-else class="text-muted">-</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="发货人手机号">
+          <div class="sender-phone-display">
+            <el-tag
+              v-for="(phone, index) in auditSenderPhoneList"
+              :key="phone + '-' + index"
+              size="mini"
+              class="sender-phone-tag"
+            >{{ phone }}</el-tag>
+            <span v-if="!auditSenderPhoneList.length" class="text-muted">-</span>
+          </div>
         </el-form-item>
         <!-- 所属店铺 -->
         <el-form-item label="所属店铺">
@@ -753,6 +795,11 @@ export default {
     },
     drugImageArr: function(val) {
       this.form.drugImage = val.join(',');
+    },
+    showSearch() {
+      this.$nextTick(() => {
+        this.calcTableHeight()
+      })
     }
   },
   data() {
@@ -832,6 +879,7 @@ export default {
       storeOptions:[],
       // 遮罩层
       loading: true,
+      tableHeight: 400,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -845,6 +893,8 @@ export default {
       total: 0,
       // 商品表格数据
       storeProductList: [],
+      expandedCompanyRows: {},
+      formAuditCompanyExpanded: false,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -957,6 +1007,31 @@ export default {
       }
     };
   },
+  computed: {
+    auditCompanyList() {
+      const ids = this.form.companyIds || [];
+      if (ids.length) {
+        return ids.map(id => {
+          const company = this.companyOptions.find(item => item.companyId === id);
+          return company ? company.companyName : String(id);
+        });
+      }
+      return this.getCompanyNameList(this.form.companyName);
+    },
+    auditDisplayCompanyList() {
+      const list = this.auditCompanyList;
+      if (list.length <= 3 || this.formAuditCompanyExpanded) {
+        return list;
+      }
+      return list.slice(0, 3);
+    },
+    auditSenderPhoneList() {
+      if (!this.form.senderPhones) {
+        return [];
+      }
+      return String(this.form.senderPhones).split(/[,，]/).map(phone => phone.trim()).filter(Boolean);
+    }
+  },
   created() {
     this.getDicts("store_product_tui_cate").then((response) => {
       this.productTuiCateOptions = response.data;
@@ -989,7 +1064,49 @@ export default {
     this.getTreeselect();
     this.getList();
   },
+  mounted() {
+    this.calcTableHeight();
+    window.addEventListener('resize', this.calcTableHeight);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcTableHeight);
+  },
   methods: {
+    calcTableHeight() {
+      this.$nextTick(() => {
+        const wrapper = this.$el && this.$el.querySelector('.table-wrapper');
+        if (!wrapper) {
+          return;
+        }
+        const height = wrapper.clientHeight;
+        this.tableHeight = height > 200 ? height : 200;
+        this.$nextTick(() => {
+          if (this.$refs.storeProductTable && this.$refs.storeProductTable.doLayout) {
+            this.$refs.storeProductTable.doLayout();
+          }
+        });
+      });
+    },
+    getCompanyNameList(companyName) {
+      if (!companyName) {
+        return [];
+      }
+      return String(companyName).split(/[,，]/).map(s => s.trim()).filter(Boolean);
+    },
+    getDisplayCompanyNameList(row) {
+      const list = this.getCompanyNameList(row.companyName);
+      if (list.length <= 3 || this.isCompanyNameExpanded(row)) {
+        return list;
+      }
+      return list.slice(0, 3);
+    },
+    isCompanyNameExpanded(row) {
+      return !!this.expandedCompanyRows[row.productId];
+    },
+    toggleCompanyNameExpand(row) {
+      const key = row.productId;
+      this.$set(this.expandedCompanyRows, key, !this.expandedCompanyRows[key]);
+    },
     cancel1(){
       this.open1 = false;
       this.form1.attachImage=null;
@@ -1190,6 +1307,7 @@ export default {
         this.storeProductList = response.rows;
         this.total = response.total;
         this.loading = false;
+        this.calcTableHeight();
       });
     },
     // 取消按钮
@@ -1243,6 +1361,7 @@ export default {
         prescribeName: null,
         isDisplay:"1",
         companyIds:[],
+        senderPhones: "",
         isDrug: "0", // 是否药品
         drugImage: null, // 药品展示图
         drugRegCertNo: null, // 药品注册证书编号
@@ -1282,6 +1401,7 @@ export default {
       this.attrs=[];
       this.photoArr=[];
       this.imageArr=[];
+      this.formAuditCompanyExpanded = false;
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -1351,6 +1471,7 @@ export default {
         if (response.data.companyIds != null && response.data.companyIds != undefined && response.data.companyIds.length > 0) {
           this.form.companyIds = response.data.companyIds.split(',').map(Number);
         }
+        this.formAuditCompanyExpanded = false;
 
         this.appIds = this.form.appIds ? this.form.appIds.split(',') : [];
         setTimeout(() => {
@@ -1472,4 +1593,41 @@ export default {
 <style scoped>::v-deep .el-upload-list__item-delete {
   display: none !important;
 }
+.store-product-audit-page {
+  height: calc(100vh - 104px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.table-wrapper {
+  flex: 1;
+  min-height: 200px;
+  overflow: hidden;
+}
+.store-product-audit-page .pagination-bar {
+  flex-shrink: 0;
+  margin-top: 10px;
+}
+.company-name-list {
+  text-align: left;
+  line-height: 1.5;
+}
+.company-name-item {
+  word-break: break-all;
+}
+.audit-company-list {
+  min-height: 32px;
+  line-height: 1.8;
+}
+.sender-phone-display {
+  min-height: 32px;
+  line-height: 1.8;
+}
+.sender-phone-tag {
+  margin: 0 8px 8px 0;
+}
+.text-muted {
+  color: #909399;
+}
 </style>