客户详情里的客诉和外面的客诉

src/views/ecw/customer/query.vue

@@ -9,7 +9,7 @@
             <el-button type="primary" size="small" @click="$router.push('/customer/edit/' + customerId)">编辑</el-button>
             <el-button type="primary" size="small">报价</el-button>
             <el-button type="primary" size="small" @click="customerFollow.dialogVisible = true">跟进</el-button>
-            <el-button type="primary" size="small">客诉</el-button>
+            <el-button type="primary" size="small" @click="$refs['customerComplaint'].handleAdd()">客诉</el-button>
             <el-button type="danger" size="small">删除</el-button>
           </div>
         </div>
@@ -191,80 +191,7 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="客户投诉">
-            <el-table
-              :data="[]"
-              style="width: 100%"
-            >
-              <el-table-column
-                prop=""
-                label="序号"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="投诉编号"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="投诉类型"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="投诉时间"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="投诉内容"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="登记客服"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="提单号"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="状态"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="查明原因"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="处理时间"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="处理结果"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="赔偿金额"
-              >
-              </el-table-column>
-              <el-table-column
-                prop=""
-                label="操作"
-              >
-                <template v-slot="{row}">
-                  <el-button size="mini" type="text" icon="el-icon-view" @click=""
-                             v-hasPermi="['ecw:customer:query']">编辑</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
+            <customer-complaint ref="customerComplaint" :customer-id="customerId" hidden-search></customer-complaint>
           </el-tab-pane>
           <el-tab-pane label="账单">
 
@@ -361,6 +288,7 @@ import DictSelector from "@/components/DictSelector"
 import {getCustomerContactsList} from "@/api/ecw/customerContacts"
 import {listServiceUser} from "@/api/system/user"
 import {createCustomerFollow, getCustomerFollowPage} from "@/api/ecw/customerFollow"
+import CustomerComplaint from "../customerComplaint"
 
 export default {
   name: 'query',
@@ -368,7 +296,8 @@ export default {
     customerId: String
   },
   components: {
-    DictSelector
+    DictSelector,
+    CustomerComplaint
   },
   created() {
     getNodeList().then(r => {
@@ -440,7 +369,7 @@ export default {
       },
 
       customerFollow: {
-        dialogVisible: true,
+        dialogVisible: false,
         form: {}
       },
 

src/views/ecw/customerComplaint/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
 
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch && !!!customerId" label-width="68px">
       <el-form-item label="客户名称" prop="customerId">
         <el-select v-model="queryParams.customerId" placeholder="请选择客户名称" clearable size="small">
           <el-option v-for="customer in myFollowCustomerList" :key="customer.id" :value="customer.id"
@@ -41,7 +41,7 @@
     </el-form>
 
     <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" v-show="!!!customerId" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['ecw:customer-complaint:create']">新增</el-button>
@@ -95,13 +95,17 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="客户名称" prop="customerId">
-          <el-select v-model="form.customerId" placeholder="请选择客户名称">
-            <el-option label="请选择字典生成" value="" />
+          <el-select v-model="form.customerId" placeholder="请选择客户名称" :disabled="!!customerId">
+            <el-option
+              v-for="item in customerSelect"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id.toString()"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="投诉类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择投诉类型">
-            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_COMPLAINT_TYPE)"
+            <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_COMPLAINT_TYPE)"
                        :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
           </el-select>
         </el-form-item>
@@ -116,7 +120,7 @@
         </el-form-item>
         <el-form-item label="处理状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择处理状态">
-            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_COMPLAINT_STATUS)"
+            <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_COMPLAINT_STATUS)"
                        :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
           </el-select>
         </el-form-item>
@@ -132,9 +136,17 @@
 <script>
 import { createCustomerComplaint, updateCustomerComplaint, deleteCustomerComplaint, getCustomerComplaint, getCustomerComplaintPage, exportCustomerComplaintExcel } from "@/api/ecw/customerComplaint";
 import { getMyFlowCustomerList } from "@/api/ecw/customer";
+import {getCustomerSelect} from "../../../api/ecw/customer"
 
 export default {
   name: "CustomerComplaint",
+  /**
+   * 可以单独作为页面，也可以作为组件被被客户详情页调用。
+   * 作为组件时要传入 customerId，用于限制范围和隐藏搜索筛选
+   */
+  props: {
+    customerId: String
+  },
   components: {
   },
   data() {
@@ -158,7 +170,7 @@ export default {
       queryParams: {
         pageNo: 1,
         pageSize: 10,
-        customerId: null,
+        customerId: this.customerId,
         type: null,
         orderId: null,
         ladingbillId: null,
@@ -173,14 +185,20 @@ export default {
         customerId: [{ required: true, message: "客户名称不能为空", trigger: "change" }],
       },
 
-      myFollowCustomerList: []
+      myFollowCustomerList: [],
+
+      customerSelect: []
     };
   },
   created() {
     this.getList();
     // 获得邮件账号
-    getMyFlowCustomerList().then(response => {
-      this.myFollowCustomerList = response.data;
+    // getMyFlowCustomerList().then(response => {
+    //   this.myFollowCustomerList = response.data;
+    // })
+
+    getCustomerSelect().then(r => {
+      this.customerSelect = r.data
     })
   },
   methods: {
@@ -206,7 +224,7 @@ export default {
     reset() {
       this.form = {
         id: undefined,
-        customerId: undefined,
+        customerId: this.customerId,
         type: undefined,
         orderId: undefined,
         ladingbillId: undefined,