优化分类样式

src/components/WebSet/classification.vue

@@ -48,40 +48,52 @@
       </ul>
     </div>
     <el-table :data="DataList" style="width:100%" v-loading='loading'>
-      <el-table-column fixed :label="$t('ground.fenleimc')">
+      <el-table-column fixed :label="$t('ground.fenleimc')" width="150">
         <template slot-scope="scope">
           <div>
             {{scope.row.CategoryName}}</div>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('objFill.cengji')">
+      <el-table-column :label="$t('objFill.cengji')" width="80">
         <template slot-scope="scope">
           <div>
             {{['', $t('objFill.jibies')[0],$t('objFill.jibies')[1],$t('objFill.jibies')[2]][scope.row.Level]}}</div>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('objFill.v101.Rest.fuji')">
+      <el-table-column :label="$t('objFill.v101.Rest.fuji')" width="80">
         <template slot-scope="scope">
           <div>
             {{scope.row.ParentName}}</div>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('objFill.v101.Rest.shifouremen')">
+      <el-table-column :label="$t('objFill.v101.Rest.shifouremen')" width="80">
         <template slot-scope="scope">
           <div>
             {{scope.row.IsHot === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
           <div>{{scope.row.TotalInventory}}</div>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('op.IsSelfGuidedTour')">
+      <el-table-column :label="$t('op.IsSelfGuidedTour')" width="100">
         <template slot-scope="scope">
           <div>
             {{scope.row.IsSelfGuidedTour === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('hotel.hotel_corrlelatition')">
+      <el-table-column :label="$t('hotel.hotel_corrlelatition')">
         <template slot-scope="scope">
-          <template v-if="scope.row.AreaList&&scope.row.AreaList.length>0">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="scope.row.Areas+scope.row.Lines+scope.row.Seriess"
+            placement="top"
+          >
+            <div style="white-space: nowrap;width: 100%;overflow: hidden;text-overflow: ellipsis;">
+              <p v-if="scope.row.Areas">{{ scope.row.Areas }}</p>
+              <p v-if="scope.row.Lines">{{ scope.row.Lines }}</p>
+              <p v-if="scope.row.Seriess">{{ scope.row.Seriess }}</p>
+            </div>
+          </el-tooltip>
+          <!-- <template v-if="scope.row.AreaList&&scope.row.AreaList.length>0">
             <div>
               <span v-for="(file,fIndex) in scope.row.AreaList" :key="`d_`+scope.row.Id+`_a_`+fIndex">
                 {{file.Name}}{{(fIndex== (scope.row.AreaList.length-1)&&scope.row.AreaList.length>1)?"":","}}
@@ -101,33 +113,33 @@
                 {{file.Name}}{{(fIndex== (scope.row.SeriesList.length-1)&&scope.row.SeriesList.length>1)?"":","}}
               </span>
             </div>
-          </template>
+          </template> -->
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('objFill.v101.paixuma')">
+      <el-table-column :label="$t('objFill.v101.paixuma')" width="80">
         <template slot-scope="scope">
           <div>
             {{scope.row.Sort}}</div>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('objFill.v101.activity.col6.t8')">
+      <el-table-column :label="$t('objFill.v101.activity.col6.t8')" width="100">
         <template slot-scope="scope">
           <el-image class="icon" :src="scope.row.Icon" :preview-src-list="[scope.row.Icon]"> </el-image>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('objFill.v101.Rest.beijintup')">
+      <el-table-column :label="$t('objFill.v101.Rest.beijintup')" width="130">
         <template slot-scope="scope">
           <el-image class="icon" :src="scope.row.BackgroundImage" :preview-src-list="[scope.row.BackgroundImage]">
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column fixed :label="$t('admin.admin_status')">
+      <el-table-column :label="$t('admin.admin_status')" width="80">
         <template slot-scope="scope">
           <div>
             {{scope.row.Enable === 1 ? $t('fnc.qiyong') :$t('active.ld_jinyong')}}</div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('system.table_operation')" header-align="center">
+      <el-table-column fixed="right" :label="$t('system.table_operation')" header-align="center" width="100">
         <template slot-scope="scope">
           <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
             <el-button type="primary" icon="el-icon-edit" circle
@@ -437,7 +449,32 @@
         this.loading = true
         this.apipost('ws_post_GetCategoryPageList', this.msg, res => {
           if (res.data.resultCode == 1) {
+            let arrList = function(list){
+              list.forEach(x=>{
+                x.Areas = ''
+                x.Lines = ''
+                x.Seriess = ''
+              })
+            }
+            arrList(res.data.data.pageData)
             this.DataList = res.data.data.pageData;
+            for(let i=0;i<this.DataList.length;i++){
+              if(this.DataList[i].AreaList&&this.DataList[i].AreaList.length>0){
+                for(let j=0;j<this.DataList[i].AreaList.length;j++){
+                  this.DataList[i].Areas+=this.DataList[i].AreaList[j].Name+ (j!=this.DataList[i].AreaList.length-1?',':'')
+                }
+              }
+              if(this.DataList[i].LineList&&this.DataList[i].LineList.length>0){
+                for(let j=0;j<this.DataList[i].LineList.length;j++){
+                  this.DataList[i].Lines+=this.DataList[i].LineList[j].Name+ (j!=this.DataList[i].LineList.length-1?',':'')
+                }
+              }
+              if(this.DataList[i].SeriesList&&this.DataList[i].SeriesList.length>0){
+                for(let j=0;j<this.DataList[i].SeriesList.length;j++){
+                  this.DataList[i].Seriess+=this.DataList[i].SeriesList[j].Name+ (j!=this.DataList[i].SeriesList.length-1?',':'')
+                }
+              }
+            }
             this.total = res.data.data.count;
           }
           this.loading = false