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

src/components/customerComplaints/index.vue

@@ -4,8 +4,11 @@
     <!-- 对话框(添加 / 修改) -->
     <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="客户名称" prop="customerId">
-          <customer-select  v-model="form.customerId" ></customer-select>
+        <el-form-item label="客户编号" prop="customerNumber">
+          <el-input v-model="form.customerNumber" type="text" disabled style="width: 206px"></el-input>
+        </el-form-item>
+        <el-form-item label="客户名称" prop="customerName">
+          <el-input v-model="form.customerName" type="text" disabled style="width: 206px"></el-input>
         </el-form-item>
         <el-form-item label="投诉类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择投诉类型">
@@ -109,6 +112,7 @@ import DictSelector from '@/components/DictSelector'
 import { DICT_TYPE, getDictDatas, getDictDataLabel } from '@/utils/dict'
 import {getBillNoSearch, getOrderNoSearch} from "@/api/ecw/order"
 import customerSelect from "@/views/ecw/customer/customerSelect";
+import CustomerSelectByNumber from '@/views/ecw/customer/customerSelectByNumber.vue'
 
 export default {
   name: "customerComplaints",
@@ -117,9 +121,12 @@ export default {
    * 作为组件时要传入 customerId，用于限制范围和隐藏搜索筛选
    */
   props: {
-    customerId: Number
+    customerId: Number,
+    customerName: String,
+    customerNumber: String,
   },
   components: {
+    CustomerSelectByNumber,
     DictSelector,
     customerSelect
   },
@@ -203,6 +210,8 @@ export default {
       this.form = {
         id: undefined,
         customerId: this.customerId,
+        customerName: this.customerName,
+        customerNumber: this.customerNumber,
         type: undefined,
         orderId: undefined,
         ladingbillId: undefined,

src/views/ecw/customer/customerSelectByNumber.vue

+<template>
+  <el-select :disabled="this.complaint_id === undefined ? false : true" @change="onSelectChange" v-model="customer" filterable remote
+             :remote-method="getCustomerSelectFn" :placeholder="$t('请选择客户编号')">
+    <el-option v-for="item in getCustomerList" :label="item.number" :value="Number(item.id)" :data="item.name" :key="item.id"></el-option>
+  </el-select>
+</template>
+
+<script>
+import {getCustomerList, getCustomerSelect} from "@/api/ecw/customer";
+
+export default {
+  props:{
+    complaint_id: Number,
+   value:{
+     type:Number,
+     default:undefined,
+   },
+  },
+  name: "customerSelectByNumber",
+  mounted() {
+    console.log(this.complaint_id);
+    this.getCustomerSelectFn();
+    this.$nextTick(()=>{
+      this.customer = this.value;
+      if(!(this.customerList.some(i => i.id === this.value)) && this.value !== undefined){
+        getCustomerList({ids:this.value}).then(r => {
+          this.recommended = r.data;
+        })
+      }
+    });
+    this.initializeCustomer();
+  },
+  computed:{
+    getCustomerList(){
+      let index = this.customerList.findIndex(
+        item => item.id === this.recommended[0]?.id
+      )
+       if(index > -1) return this.customerList
+        else return [...this.customerList,...this.recommended]
+    }
+  },
+  data(){
+    return {
+      customer:'',
+      customerList:[],
+      recommended:[],
+    }
+  },
+  methods:{
+
+    getCustomerSelectFn(val){
+      getCustomerSelect({pageNo:1,pageSize:100,customerNumber:val}).then(r => {
+        this.customerList = r.data.list;
+      })
+    },
+    onSelectChange(selectedId) {
+      const selectedItem = this.customerList.find(
+        (item) => Number(item.id) === selectedId
+      );
+      this.customer = selectedId; // 记录选中的客户ID
+      if (selectedItem) {
+        this.$emit("input", { id: selectedId, name: selectedItem.name }); // 返回id和name
+      }
+    },
+    // 初始化时根据传入的 value 请求客户信息
+    initializeCustomer() {
+      console.log('value:' + this.value)
+      console.log('complaint_id:' + this.complaint_id)
+      console.log(this.complaint_id !== undefined ? true : false)
+      if (this.value !== undefined) {
+
+        getCustomerList({ ids: this.value }).then((r) => {
+          const customerData = r.data?.[0];
+          // if (customerData) {
+          //   this.customer = customerData.id;
+          //   this.$emit("input", { id: customerData.id, name: customerData.name + ':select'}); // 返回初始化值
+          // }
+        });
+      }
+    },
+  },
+  watch:{
+    value(val){
+      this.customer = val;
+      this.initializeCustomer(); // 监听传入值的变化
+      if(!(this.customerList.some(i => i.id === val)) && val !== undefined){
+        getCustomerList({ids:val}).then(r => {
+          this.recommended = r.data;
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ecw/customer/index.vue

@@ -702,7 +702,7 @@
     </el-dialog>
     <customer-follow-list :customer-id="customerId" :id="customerId" :customer-service="customerService" :customer-number="customerNumber" @refresh="handleQuery" ref="CustomerFollowList" v-if="customerFollowVisible"></customer-follow-list>
     <customer-follow ref="customerFollow" @refresh="handleQuery" @close="customerFollowVisible = false" v-if="customerFollowVisible" />
-    <customer-complaints :customer-id="customerId" ref="customerComplaints"></customer-complaints>
+    <customer-complaints :customerName="selectedCustomerName" :customerNumber="selectedCustomerNumber" :customer-id="customerId" ref="customerComplaints"></customer-complaints>
     <transfer-customer :show.sync="transferShow" :customer-ids.sync="selectCustomerList"></transfer-customer>
     <add-potential-custom ref="potentialCustom" @change="getList"></add-potential-custom>
     <customer-setting ref="customerSetting" @refresh="getList"></customer-setting>
@@ -873,6 +873,8 @@ export default {
       nodeList: [],
       showLine: false,
       customerId: undefined,
+      selectedCustomerName: "",
+      selectedCustomerNumber: "",
       customerServiceList: [],
       countryList: [],
       creditList: [],
@@ -1152,6 +1154,8 @@ export default {
     },
     complaint(row) {
       this.customerId = row.id
+      this.selectedCustomerName = row.name
+      this.selectedCustomerNumber = row.number
       this.$nextTick(() => {
         this.$refs.customerComplaints.handleAdd()
       })

src/views/ecw/customer/query.vue

@@ -453,7 +453,7 @@
             <customer-log :customerId="id" v-if="'operationLog' === activeName"></customer-log>
           </el-tab-pane>
           <el-tab-pane name="complain" :label="$t('客户投诉')">
-            <customer-complaint v-if="activeName === 'complain'" ref="customerComplaint" :customer-id="id" hidden-search></customer-complaint>
+            <customer-complaint v-if="activeName === 'complain'" ref="customerComplaint" :customerName="customer.name" :customer-id="id" hidden-search></customer-complaint>
           </el-tab-pane>
           <el-tab-pane name="bill" :label="$t('账单')">
             <el-table style="width: 100%" :data="infoListReceiptList">
@@ -710,7 +710,7 @@
       </div>
     </el-dialog>
 
-    <customer-follow ref="customerFollow" v-if="customerFollowVisible" @close="customerFollowVisible = false" :customer-id="id" :customer-service="customer.customerService" :customer-number="customer.number" @refresh="logListCustomerCommonRefresh" />
+    <customer-follow ref="customerFollow" v-if="customerFollowVisible" @close="customerFollowVisible = false" :customer-id="id" :customer-service="customer.customerService" :customer-name="customer.name" :customer-number="customer.number" @refresh="logListCustomerCommonRefresh" />
   </div>
 </template>
 
@@ -1120,7 +1120,7 @@ export default {
             this.$refs["customerFollow"].handleAdd()
           })
         } else {
-          this.$refs["customerComplaint"].handleAdd()
+          this.$refs["customerComplaint"].handleAdd(false)
         }
       })
     },

src/views/ecw/customerComplaint/index.vue

@@ -62,7 +62,7 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="list" border ref="dataTable" id="dataTable" :height="autoHeight">
+    <el-table v-loading="loading" :data="list" border ref="dataTable" id="dataTable" :maxHeight="500">
       <el-table-column :label="$t('投诉编号')" align="center" prop="code" width="150" fixed>
       </el-table-column>
       <el-table-column :label="$t('投诉类型')" align="center" prop="type" width="120" fixed>
@@ -70,14 +70,14 @@
           <dict-tag :type="DICT_TYPE.CUSTOMER_COMPLAINT_TYPE" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column :label="$t('客户编号')" align="center" width="120" fixed>
+      <el-table-column :label="$t('客户名称')" align="center" width="120" fixed>
         <template slot-scope="scope">
-          <div>{{ scope.row.customerNumber }}</div>
+          <div>{{ formatCustomerName(scope.row.customerId) }}</div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('客户名称')" align="center" width="120" fixed>
+      <el-table-column :label="$t('客户编号')" align="center" width="120">
         <template slot-scope="scope">
-          <div>{{ formatCustomerName(scope.row.customerId) }}</div>
+          <div>{{ scope.row.customerNumber }}</div>
         </template>
       </el-table-column>
       <el-table-column :label="$t('投诉日期')" align="center"  width="180">
@@ -146,13 +146,16 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open"  append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <div class="formShow">
           <div>
-          <el-form-item :label="$t('客户名称')" prop="customerId">
-            <customer-select v-model="form.customerId" ></customer-select>
+          <el-form-item :label="$t('客户编号')" prop="customerId">
+            <customer-select-by-number @input="onCustomerSelect" :complaint_id="form.id" v-model="form.customerId" ></customer-select-by-number>
           </el-form-item>
+            <el-form-item :label="$t('客户名称')" prop="customerName">
+              <el-input v-model="form.customerName" type="text" style="width: 206px" :disabled="true"></el-input>
+            </el-form-item>
           <el-form-item :label="$t('投诉类型')" prop="type">
             <el-select v-model="form.type" :placeholder="$t('请选择投诉类型')">
               <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_COMPLAINT_TYPE)"
@@ -203,7 +206,7 @@
           </div>
         </div>
         <el-form-item :label="$t('投诉内容')" prop="content">
-          <el-input v-model="form.content" type="textarea" :placeholder="$t('请输入内容')" />
+          <el-input v-model="form.content" type="textarea" :rows="6" :placeholder="$t('请输入内容')" />
         </el-form-item>
         <el-form-item v-show="form.status == '2'||form.status == '3'" :label="$t('查明原因')" required>
           <el-input type="textarea" :placeholder="$t('请输入查明原因')" v-model="form.ascertainReason"></el-input>
@@ -245,7 +248,7 @@
     </el-dialog>
 
 
-    <el-dialog :title="title" :visible.sync="openCustomer" width="900px" append-to-body>
+    <el-dialog :title="title" :visible.sync="openCustomer" append-to-body>
       <el-form ref="form" :inline="true" :model="form" label-width="80px">
           <el-form-item :label="$t('客户名称')+':'">
             <div>{{ formatCustomerName(form.customerId) }}</div>
@@ -349,6 +352,7 @@ import customerSelect from '@/views/ecw/customer/customerSelect'
 import { getCurrencyPage } from "@/api/ecw/currency";
 import {listServiceUser} from "@/api/system/user";
 import JdInputNumber from "@/views/ecw/customer/components/jd-input-number.vue";
+import CustomerSelectByNumber from '@/views/ecw/customer/customerSelectByNumber.vue'
 
 export default {
   name: "CustomerComplaint",
@@ -357,9 +361,11 @@ export default {
    * 作为组件时要传入 customerId，用于限制范围和隐藏搜索筛选
    */
   props: {
-    customerId: Number
+    customerId: Number,
+    customerName: String,
   },
   components: {
+    CustomerSelectByNumber,
     JdInputNumber,
     CustomerFollow,
     DictSelector,
@@ -410,10 +416,12 @@ export default {
         code: null,
       },
       // 表单参数
-      form: {},
+      form: {
+
+      },
       // 表单校验
       rules: {
-        customerId: [{ required: true, message: this.$t('客户名称不能为空'), trigger: "change" }],
+        customerId: [{ required: true, message: this.$t('客户编号不能为空'), trigger: "change" }],
         type: [{ required: true, message: this.$t('投诉类型不能为空'), trigger: "change" }],
         content: [{ required: true, message: this.$t('投诉内容不能为空'), trigger: "blur" }],
       },
@@ -458,13 +466,20 @@ export default {
       this.$nextTick(() => {
         this.getHeight()
       })
-    },
+    }
   },
   methods: {
     change(val){
       console.log(val,'valll')
     },
 
+    onCustomerSelect(selectedCustomer) {
+      // 自动赋值客户名称
+
+      this.form.customerId = selectedCustomer.id;
+       this.form.customerName = selectedCustomer.name;
+    },
+
     checkContentOverflow() {
       const contentTextElements = this.$refs.contentText;
 
@@ -531,6 +546,7 @@ export default {
       this.form = {
         id: undefined,
         customerId: this.customerId,
+        customerName: this.customerName,
         type: undefined,
         orderId: undefined,
         ladingbillId: undefined,
@@ -559,10 +575,14 @@ export default {
       this.handleQuery();
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd(isAdd) {
       this.reset();
       this.open = true;
       this.title = this.$t('添加客户投诉');
+      // 判断是否新增还是修改，如果是在客户详情页面进来新增，需要带上客户编号和客户名称
+      if (!isAdd){
+        this.form.id = 0;
+      }
       // 新增客诉默认状态为待处理
       this.form.status = 1;
     },
@@ -583,6 +603,8 @@ export default {
       const id = row.id;
       getCustomerComplaint(id).then(response => {
         this.form = response.data;
+        console.log('customerName:' + this.form.customerName)
+        console.log('response:' + response.data.name)
         this.open = true;
         this.title = this.$t('修改客户投诉');
       });
@@ -674,7 +696,7 @@ export default {
     //表格高度自适应
     getHeight() {
       if(!this.isMobile) {
-        this.$refs.dataTable.doLayout()
+        this.$refs.multipleTable.doLayout()
         let getHeightFromBottom = (element, variableHeight) => {
           const elementRect = element.getBoundingClientRect().top;
           const windowHeight = document.documentElement.clientHeight;

src/views/ecw/myCustomerService/index.vue

@@ -403,7 +403,7 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" />
     <customer-follow-list :customer-id="customerId" :id="customerId" :customer-service="customerService" :customer-number="customerNumber" @refresh="handleQuery" ref="CustomerFollowList" v-if="customerFollowVisible"></customer-follow-list>
     <customer-follow ref="customerFollow" @close="customerFollowVisible = false" @refresh="handleQuery" v-if="customerFollowVisible" />
-    <customer-complaints ref="customerComplaint" :customer-id.sync="customerId"></customer-complaints>
+    <customer-complaints ref="customerComplaint" :customerName.sync="selectedCustomerName" :customerNumber.sync="selectedCustomerNumber" :customer-id.sync="customerId"></customer-complaints>
     <transfer-customer :show.sync="show" :customer-ids.sync="selectCustomerList"></transfer-customer>
     <customer-setting ref="customerSetting" @refresh="getList"></customer-setting>
   </div>
@@ -612,6 +612,8 @@ export default {
       showLine: false,
       customerId: undefined,
       selectCustomerList: [],
+      selectedCustomerName: "",
+      selectedCustomerNumber: "",
       //lanbm 2024-05-26 添加参数
       userId: undefined,
       customerService: undefined,
@@ -913,6 +915,8 @@ export default {
     },
     complaint(row) {
       this.customerId = row.id
+      this.selectedCustomerName = row.name
+      this.selectedCustomerNumber = row.number
       this.$nextTick(() => {
         this.$refs["customerComplaint"].handleAdd()
       })