需求32 客户投诉页面和列表调整

src/views/ecw/customerComplaint/index.vue

@@ -6,6 +6,11 @@
       <el-form-item :label="$t('客户名称')" prop="customerId">
        <customer-select v-model="queryParams.customerId" ></customer-select>
       </el-form-item>
+
+      <el-form-item :label="$t('客户编号')" prop="customerNumber">
+        <el-input v-model="queryParams.customerNumber" :placeholder="$t('请输入客户编号')" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+
       <el-form-item :label="$t('投诉类型')" prop="type">
         <el-select v-model="queryParams.type" :placeholder="$t('请选择投诉类型')" clearable size="small">
           <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_COMPLAINT_TYPE)"
@@ -57,15 +62,20 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column :label="$t('投诉编号')" align="center" prop="code" >
+    <el-table v-loading="loading" :data="list" border ref="dataTable" id="dataTable" :height="autoHeight">
+      <el-table-column :label="$t('投诉编号')" align="center" prop="code" width="150" fixed>
       </el-table-column>
-      <el-table-column :label="$t('投诉类型')" align="center" prop="type">
+      <el-table-column :label="$t('投诉类型')" align="center" prop="type" width="120" fixed>
         <template slot-scope="scope">
           <dict-tag :type="DICT_TYPE.CUSTOMER_COMPLAINT_TYPE" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column :label="$t('客户名称')" align="center" >
+      <el-table-column :label="$t('客户编号')" align="center" width="120" fixed>
+        <template slot-scope="scope">
+          <div>{{ scope.row.customerNumber }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('客户名称')" align="center" width="120" fixed>
         <template slot-scope="scope">
           <div>{{ formatCustomerName(scope.row.customerId) }}</div>
         </template>
@@ -75,9 +85,33 @@
           <span>{{ parseTime(scope.row.createTime)}}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('登记客服')" align="center" prop="adminNickname">
+
+      <!-- 投诉内容列 -->
+      <el-table-column :label="$t('投诉内容')" align="center" prop="content" width="400">
+        <template #default="{ row }">
+          <div class="content-cell">
+            <div class="content-text" :title="row.content">
+              <!-- 限制显示两行，显示"更多"按钮 -->
+              <span v-if="row.content.length > maxLength">
+              {{ row.content.slice(0, maxLength) }}
+              <el-popover
+                placement="bottom"
+                width="400"
+                trigger="click"
+                :content="row.content"
+              >
+                <el-button slot="reference" size="mini" type="text">更多</el-button>
+              </el-popover>
+            </span>
+              <span v-else>{{ row.content }}</span>
+            </div>
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column :label="$t('状态')" align="center" prop="status">
+
+      <el-table-column :label="$t('登记客服')" align="center" width="120" prop="adminNickname">
+      </el-table-column>
+      <el-table-column :label="$t('状态')" align="center" width="120" prop="status">
         <template slot-scope="scope">
           <dict-tag :type="DICT_TYPE.CUSTOMER_COMPLAINT_STATUS" :value="scope.row.status" />
         </template>
@@ -95,7 +129,7 @@
           <span v-if="scope.row.status === 3">{{getCurrencyLabel(scope.row.currencyUnit)}}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
+      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                      v-hasPermi="['ecw:customer-complaint:update']">{{$t('修改')}}</el-button>
@@ -332,6 +366,12 @@ export default {
     customerSelect
   },
   computed:{
+    isMobile() {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+      // 匹配常见的移动设备标识
+      const mobileIdentifiers = ['Android', 'webOS', 'iPhone', 'iPad', 'iPod', 'BlackBerry', 'Windows Phone'];
+      return mobileIdentifiers.some(identifier => userAgent.includes(identifier));
+    },
     isChinese(){
       return this.$i18n.locale === 'zh_CN'
     },
@@ -394,7 +434,9 @@ export default {
         rows: 20,
       },
       currencyList:[],
-    serviceUserList:[]
+      serviceUserList:[],
+      autoHeight: 600,
+      maxLength: 50  // 限制显示的字符长度
     };
   },
   created() {
@@ -405,10 +447,41 @@ export default {
      getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
 
   },
+  mounted() {
+    // 页面加载完成后，检查所有行的文本是否超过两行
+    this.$nextTick(() => {
+      this.checkContentOverflow();
+    });
+  },
+  watch:{
+    showSearch() {
+      this.$nextTick(() => {
+        this.getHeight()
+      })
+    },
+  },
   methods: {
     change(val){
       console.log(val,'valll')
     },
+
+    checkContentOverflow() {
+      const contentTextElements = this.$refs.contentText;
+
+      // 遍历所有的文本元素，检查是否溢出
+      contentTextElements.forEach((element, index) => {
+        const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10); // 获取行高
+        const maxHeight = lineHeight * 2; // 限制为两行的高度
+
+        // 判断文本是否超出两行
+        if (element.scrollHeight > maxHeight) {
+          this.$set(this.overflowStatus, index, true); // 设置该行文本为溢出
+        } else {
+          this.$set(this.overflowStatus, index, false); // 设置该行文本为未溢出
+        }
+      });
+    },
+
     getBillList(key){
       getBillNoSearch({key, pageNo: 1, pageSize: 20}).then(r => {
         if (r.code === 0){
@@ -597,7 +670,23 @@ export default {
         }
       }
       return this.$t('找不到客户') + ':' + customerId;
+    },
+    //表格高度自适应
+    getHeight() {
+      if(!this.isMobile) {
+        this.$refs.dataTable.doLayout()
+        let getHeightFromBottom = (element, variableHeight) => {
+          const elementRect = element.getBoundingClientRect().top;
+          const windowHeight = document.documentElement.clientHeight;
+          const elementHeightFromBottom = windowHeight - elementRect;
+          const result = elementHeightFromBottom - variableHeight;
+          return result;
         }
+        const element = document.getElementById('dataTable');
+        const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
+        this.autoHeight =getHeightFromBottom(element, variableHeight);
+      }
+    },
   }
 };
 </script>
@@ -608,4 +697,23 @@ export default {
   .formShow div{
     flex: 1;
   }
+
+  .content-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .content-text {
+    max-width: 400px; /* 设置内容最大宽度 */
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* 限制最多显示两行 */
+    -webkit-box-orient: vertical;
+  }
+
+
 </style>