展示字段

src/views/hisStore/storeProduct/index.vue

@@ -315,7 +315,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" v-if="this.isStores"/>
       <el-table-column label="售价" align="center" prop="price" >
         <template slot-scope="scope" >
@@ -1322,6 +1340,7 @@ export default {
       total: 0,
       // 商品表格数据
       storeProductList: [],
+      expandedCompanyRows: {},
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -1498,6 +1517,26 @@ export default {
         this.appMallOptions = response.rows;
       })
     },
+    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]);
+    },
     getStatusText(row) {
       console.log()
       if (row.isAudit == 0) {
@@ -2582,4 +2621,11 @@ export default {
   margin-bottom: 6px;
   line-height: 1;
 }
+.company-name-list {
+  text-align: left;
+  line-height: 1.5;
+}
+.company-name-item {
+  word-break: break-all;
+}
 </style>

src/views/hisStore/storeProduct/indexZm.vue

@@ -305,7 +305,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" v-if="this.isStores"/>
       <el-table-column label="售价" align="center" prop="price" >
         <template slot-scope="scope" >
@@ -1267,6 +1285,7 @@ export default {
       total: 0,
       // 商品表格数据
       storeProductList: [],
+      expandedCompanyRows: {},
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -1442,6 +1461,26 @@ export default {
   computed: {
   },
   methods: {
+    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]);
+    },
     getStatusText(row) {
       console.log()
       if (row.isAudit == 0) {
@@ -2232,4 +2271,11 @@ export default {
 .scroll-loading, .scroll-end { text-align: center; color: #909399; font-size: 12px; padding: 8px 0; }
 .scroll-more { text-align: center; padding: 8px 0; cursor: pointer; font-size: 12px; color: #409EFF; }
 .scroll-more:hover { text-decoration: underline; }
+.company-name-list {
+  text-align: left;
+  line-height: 1.5;
+}
+.company-name-item {
+  word-break: break-all;
+}
 </style>