询盘详情功能重构

src/components/Modal/src/index.less

@@ -41,7 +41,7 @@
   }
 
   .ant-modal-body {
-    padding: 0;
+    padding: 24px;
 
     > .scrollbar > .scrollbar__bar.is-horizontal {
       display: none;
@@ -57,7 +57,7 @@
   }
 
   .ant-modal-header {
-    padding: 16px;
+    padding: 16px 24px;
   }
 
   .ant-modal-content {

src/views/adweb/enquiry/AdwebEnquiryList.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="p-2">
+
     <a-row class="r1" :gutter="8">
       <a-col :xl="7" :xxl="6">
         <div class="choose-site">
@@ -22,69 +23,145 @@
       </a-col>
     </a-row>
 
-    <!--查询区域-->
-    <div class="jeecg-basic-table-form-container">
-      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-row :gutter="24">
-          <a-col :lg="6">
-            <a-form-item name="siteCode">
-              <template #label><span title="站点code，关联站点表">站点co</span></template>
-              <a-input placeholder="请输入站点code，关联站点表" v-model:value="queryParam.siteCode" allow-clear />
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
-              <a-col :lg="6">
-                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
-                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
-                <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
-                  {{ toggleSearchStatus ? '收起' : '展开' }}
-                  <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
-                </a>
-              </a-col>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
+    <a-row class="r2">
+      <a-col :span="8">
+        <p class="t1"><img :src="toReadImg"/>待阅读询盘</p>
+        <p class="t2" @click="getList('noRead')">{{ enquiryNums.noRead }}</p>
+      </a-col>
+      <a-col :span="8">
+        <p class="t1"><img :src="toClassified"/>待分类询盘</p>
+        <p class="t2" @click="getList('wait')">{{ enquiryNums.wait }}</p>
+      </a-col>
+      <a-col :span="8">
+        <p class="t1"><img :src="toTotal"/>累计询盘</p>
+        <p class="t2" @click="getList('all')">{{ enquiryNums.all }}</p>
+      </a-col>
+    </a-row>
+
+    <a-row class="r3" type="flex" :gutter="8">
+      <a-col flex="2">
+        <a-input placeholder="邮箱/姓名/国家" v-model:value="queryParam.searchText"></a-input>
+      </a-col>
+      <a-col flex="2">
+        <a-input placeholder="询盘内容" v-model:value="queryParam.searchContent"></a-input>
+      </a-col>
+      <a-col flex="2">
+        <a-select
+                  :allowClear="true"
+                  placeholder="全部分类"
+                  style="width: 100%"
+                  @change="filterCategory"
+        >
+          <a-select-option :key="2" :value="2">待分类</a-select-option>
+          <a-select-option :key="1" :value="1">有效询盘</a-select-option>
+        </a-select>
+      </a-col>
+      <a-col flex="2">
+        <a-select v-model="queryParam.readStatus"
+                  :allowClear="true"
+                  placeholder="全部阅读状态"
+                  style="width: 100%"
+                  @change="filterStatus"
+        >
+          <a-select-option value="0">
+            未读
+          </a-select-option>
+          <a-select-option value="1">
+            已读
+          </a-select-option>
+        </a-select>
+      </a-col>
+      <a-col v-if="haveSubAccount" flex="2">
+        <a-select placeholder="全部跟进人"
+                  v-model="queryParam.principalUid"
+                  showSearch
+                  allowClear
+                  style="width: 100%"
+                  :filterOption="filterOption">
+          <a-select-option key="ALL" value="ALL">所有人</a-select-option>
+          <a-select-option v-for="principal in subAccountOptions" :key="principal.id"
+                           :value="principal.id">
+            {{ principal.username }}
+          </a-select-option>
+        </a-select>
+      </a-col>
+
+      <a-col flex="500px" style="text-align:right">
+        <a-button type="primary" @click="searchQuery">查询</a-button>
+        <a-button ghost type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
+        <a-button ghost type="primary" @click="handleExportXlsLU()"
+                  style="margin-left: 8px" :loading="excelLoading">导出Excel
+        </a-button>
+        <a-button ghost type="primary" @click="recycleBinVisible" style="margin-left: 8px">回收站
+        </a-button>
+        <a-button ghost type="primary" @click="showBlackList" style="margin-left: 8px">黑名单
+        </a-button>
+      </a-col>
+    </a-row>
+
     <!--引用表格-->
     <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #alertAfter>
+        <a-divider type="vertical" />
+        <a @click="enquiryReady">标为已读</a>
+
+        <template v-if="haveSubAccount && siteCode !== dictSiteCode">
+          <a-divider type="vertical" />
+          <a
+            :style="(userRole.indexOf('admin') > -1 || userRole.indexOf('adweb_admin') > -1 || userRole.indexOf('adweb_seo_manager') > -1 || userRole.indexOf('adweb_site_manager') > -1) ? 'pointer-events: none;' : ''"
+             @click="showEditPrincipalModal">
+            调整跟进人
+          </a>
+        </template>
+
+        <template v-if="siteCode === dictSiteCode" @click="forwardDetailAll">
+          <a-divider type="vertical" />
+          <a @click="forwardDetailAll">
+            转发
+          </a>
+        </template>
+
+        <a-divider type="vertical" />
+        <a @click="batchHandleDelete">删除</a>
+      </template>
+
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 </a-button>
-        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>
-        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls"> 导入 </j-upload-button>
-        <a-dropdown v-if="selectedRowKeys.length > 0">
-          <template #overlay>
-            <a-menu>
-              <a-menu-item key="1" @click="batchHandleDelete">
-                <Icon icon="ant-design:delete-outlined" />
-                删除
-              </a-menu-item>
-            </a-menu>
-          </template>
-          <a-button
-            >批量操作
-            <Icon icon="mdi:chevron-down" />
-          </a-button>
-        </a-dropdown>
-        <!-- 高级查询 -->
-        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
+        <!-- TODO 高级查询 -->
+<!--        <super-query :config="superQueryConfig" @search="handleSuperQuery" />-->
       </template>
       <!--操作栏-->
       <template #action="{ record }">
         <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
       </template>
-      <template #bodyCell="{ column, record, index, text }"> </template>
+
+      <template #bodyCell="{ column, record, index, text }">
+        <template v-if="column.key == 'userEffective'">
+          <a class="theme-color" v-if="text === 2" @click="showEnquiryDetail(record)">{{ record.userEffectiveStr }}</a>
+          <span v-else-if="text == 0" style="color: #fa8c16">{{ record.userEffectiveStr }}</span>
+          <span v-else>{{ record.userEffectiveStr }}</span>
+
+        </template>
+      </template>
     </BasicTable>
     <!-- 表单区域 -->
     <AdwebEnquiryModal ref="registerModal" @success="handleSuccess" />
+
+    <!--询盘详情   reload用于子组件删除询盘功能刷新父组件table showDelBtn用于展示删除按钮-->
+    <enquiry-detail :userEffectiveOption="userEffectiveOption" :showDelBtn="true"
+                    @reload="getTableAndNum()" @ok="getTableAndNum"
+                    ref="enquiryDetailRef"></enquiry-detail>
+
   </div>
 </template>
 
 <script lang="ts" name="adweb-adwebEnquiry" setup>
+  import toReadImg from '/@/assets/enquiry/enquiryListTop3.svg';
+  import toClassified from '/@/assets/enquiry/enquiryListTop2.svg';
+  import toTotal from '/@/assets/enquiry/enquiryListTop4.svg';
+
   import selectSite from '@/components/adweb/selectSite.vue';
-  import { onMounted, reactive, ref } from 'vue';
+  import {nextTick, onMounted, reactive, ref} from 'vue';
   import { BasicTable, TableAction } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { columns, superQuerySchema } from './AdwebEnquiry.data';
@@ -92,10 +169,13 @@
   import AdwebEnquiryModal from './components/AdwebEnquiryModal.vue';
   import { useUserStore } from '/@/store/modules/user';
   import { getAction } from '@/api/manage/manage';
-  import { createLocalStorage } from '@/utils/cache';
+
   import { useMessage } from '@/hooks/web/useMessage';
-  import JUploadButton from '@/components/Button/src/JUploadButton.vue';
+
   import moment from 'moment';
+  import {any} from "vue-types";
+  import {filterOption} from "ant-design-vue/es/vc-mentions/src/util";
+  import enquiryDetail from "@/views/adweb/enquiry/modules/enquiryDetail.vue";
 
   const formRef = ref();
   const queryParam = reactive<any>({});
@@ -119,13 +199,16 @@
       immediate: false, // 不直接触发，通过reload事件触发接口
       beforeFetch: (params) => {
 
-        // TODO 初次进入，获取site code，
-        console.log(queryParam,localStorage.getItem('siteCode'), "queryParamqueryParamqueryParam")
+        //  如果查询条件中没有设置状态，则默认查出所有状态数据
+        if (queryParam.userEffective == undefined) {
+          queryParam.userEffective = '1,2';
+        }
+
         return Object.assign(params, queryParam);
       },
     },
     exportConfig: {
-      name: '询盘信息存储表单',
+      name: '询盘列表',
       url: getExportUrl,
       params: queryParam,
     },
@@ -134,21 +217,25 @@
       success: handleSuccess,
     },
   });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
-
-  const labelCol = reactive({
-    xs: 24,
-    sm: 4,
-    xl: 6,
-    xxl: 4,
-  });
-  const wrapperCol = reactive({
-    xs: 24,
-    sm: 20,
-  });
-  let siteCode: string | null = ref('');
-  let siteList = ref([]);
-
+  const [registerTable, { reload, clearSelectedRowKeys, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  // const labelCol = reactive({
+  //   xs: 24,
+  //   sm: 4,
+  //   xl: 6,
+  //   xxl: 4,
+  // });
+  // const wrapperCol = reactive({
+  //   xs: 24,
+  //   sm: 20,
+  // });
+  //
+  // let siteCode: string | null = ref('');
+
+  // 站点列表
+  let siteList = ref([{'id': '', 'code': ''}]);
+
+  // 询盘数量
   const enquiryNums = ref({
     all: 0,
     noRead: 0,
@@ -156,55 +243,45 @@
     wait: 0,
   });
 
-  let rangeDate: moment.Moment[] = ref(undefined);
+  // 过滤日期范围
+  let rangeDate = ref<any>(any);
 
-  let subAccountOptions = ref([]);
+  // 子账号列表
+  let subAccountOptions = ref([{'id': '', 'username': ''}]);
 
+  // 是否有子账户
   let haveSubAccount = ref(false);
 
+  // 导出excel进度
+  let excelLoading = ref<boolean>(false);
+
+  let userEffectiveOption = ref<[]>([]);
+
+  const enquiryDetailRef = ref(null);
+
   onMounted(async () => {});
 
-  function getSiteList(siteInfo, selectedSiteInfo) {
+  function getSiteList(siteInfo: any[], selectedSiteInfo: any) {
     siteList.value = siteInfo;
 
     if (siteList.value.length === 1) {
       queryParam.siteId = siteList.value[0].id;
     } else {
       let isInSite = false;
-      for (let site in siteList.value) {
-        if (localStorage.getItem('siteCode') !== null && site.code === localStorage.getItem('siteCode')) {
+      for (let index in siteList.value) {
+
+        if (localStorage.getItem('siteCode') !== null && siteList.value[index].code === localStorage.getItem('siteCode')) {
           isInSite = true;
-          queryParam.siteId = site.id;
+          queryParam.siteId = siteList.value[index].id
         }
       }
-      if (localStorage.getItem('siteCode') !== null && isInSite) {
-      } else {
+
+      if (localStorage.getItem('siteCode') == null || !isInSite) {
         queryParam.siteId = siteList.value[0].id;
         localStorage.setItem('siteCode', siteList.value[0].code);
       }
     }
 
-    //如果首页查询数据，直接走下面，return掉，防止接口多次请求
-    // if (routerQuery.timeType) {
-    //   let start
-    //   if (routerQuery.timeType == 'thisWeek') {
-    //     start = moment().subtract(moment().day() - 1, 'days').format('YYYY-MM-DD')
-    //   }
-    //   if (routerQuery.timeType == 'thisMonth') {
-    //     start = moment().startOf('month').format('YYYY-MM-DD');
-    //   }
-    //   let end = moment().format('YYYY-MM-DD')
-    //   rangeDate = [moment(start), moment(end)];
-    //   queryParam.start = start
-    //   queryParam.end = end
-    //   queryParam.dateType = undefined
-    //   getTableAndNum();
-    //   return
-    // }
-
-    // if (routerQuery.siteCode) {
-    //   queryParam.siteId = Number(routerQuery.siteCode)
-    // }
     getTableAndNumWithQueryCondition();
   }
 
@@ -219,11 +296,19 @@
   function changeSite(value, e) {
     queryParam.siteId = e.info.id;
     siteCode.value = localStorage.getItem('siteCode');
-    getTableAndNum(undefined, true);
+    getTableAndNum(true);
+  }
+
+  function filterCategory(value: string) {
+    queryParam.userEffective = value;
+  }
+
+  function filterStatus(value: number) {
+    queryParam.readStatus = value;
   }
 
   //重新刷新页面数据及获取询盘数量
-  function getTableAndNum(arg, clearParam) {
+  function getTableAndNum(clearParam: boolean = false) {
     // 设置默认站点
     let siteId = queryParam.siteId;
 
@@ -253,8 +338,8 @@
       }
     }
 
-    queryParam.fields = 'id,,siteName,contact,fromEmail,whatsApp,phone,fromIp,readStatus,details,principalUid,fromPage,userEffective,countryName,pluginName,recordCtime,action';
-    queryParam.userEffective = '1,2';
+    // queryParam.fields = 'id,,siteName,contact,fromEmail,whatsApp,phone,fromIp,readStatus,details,principalUid,fromPage,userEffective,countryName,pluginName,recordCtime,action';
+    // queryParam.userEffective = '1,2';
     loadData();
   }
 
@@ -309,11 +394,12 @@
       end: queryParam.end,
     };
     getAction('/adweb/adwebEnquiry/getEnquiryNums', d).then((res) => {
+
       if (res.code == 200) {
-        enquiryNums.value.all = siteList.value.all;
-        enquiryNums.value.noRead = siteList.value.noRead;
-        enquiryNums.value.product = siteList.value.product;
-        enquiryNums.value.wait = siteList.value.wait;
+        enquiryNums.value.all = res.result.all;
+        enquiryNums.value.noRead = res.result.noRead;
+        enquiryNums.value.product = res.result.product;
+        enquiryNums.value.wait =res.result.wait;
       } else {
         enquiryNums.value.all = 0;
         enquiryNums.value.noRead = 0;
@@ -327,14 +413,92 @@
   function getSubAccountOptions() {
     getAction('/usercountry/subAccounts/options?siteId=' + queryParam.siteId, null).then((res) => {
       if (res.code === 200) {
-        subAccountOptions.value = siteList;
-        haveSubAccount.value = siteList.value !== null && siteList.value !== undefined && siteList.value.length > 0;
+        subAccountOptions.value = res.result;
+        haveSubAccount.value =  res.result !== null &&  res.result !== undefined &&  res.result.length > 0;
       }
     });
   }
 
-  function loadData() {
-    reload();
+  function getList(type: String) {
+    //清空查询条件
+    queryParam.principalUid = undefined;
+    queryParam.searchText = undefined;
+    queryParam.searchContent = undefined;
+    if (type == 'noRead') {
+      queryParam.readStatus = '0'
+      queryParam.userEffective = undefined
+    }
+    if (type == 'product') {
+      queryParam.userEffective = 1
+      console.log('1', queryParam)
+
+      queryParam.readStatus = undefined
+      console.log('2', queryParam)
+
+    }
+    if (type == 'wait') {
+      queryParam.userEffective = 2
+      queryParam.readStatus = undefined
+    }
+    if (type == 'all') {
+      queryParam.userEffective = undefined
+      queryParam.readStatus = undefined
+    }
+    loadData(1)
+  }
+
+  //批量设为已读
+  function enquiryReady() {
+
+    console.log(selectedRowKeys.value.length, "selectedRowKeysselectedRowKeysselectedRowKeys");
+    if (selectedRowKeys.value.length <= 0) {
+      createMessage.warning('请选择至少一条记录！');
+      return;
+    }
+    getAction('/adweb/adwebEnquiry/read', {id: selectedRowKeys.value.toString()}).then((res) => {
+      if (res.success) {
+        createMessage.success('批量设置已读成功！')
+        getTableAndNum();
+        clearSelectedRowKeys();
+      } else {
+        if (res.code == 403) {
+          createMessage.warning(res.message)
+        } else {
+          createMessage.error('设置失败！')
+        }
+      }
+    })
+  }
+
+  // 加载table列表数据
+  function loadData(page: number = 1) {
+    reload({page: page});
+  }
+
+  // 导出excel
+  function handleExportXlsLU() {
+    excelLoading.value = true;
+
+    delete queryParam.userEffective;
+
+    onExportXls().then(() => {
+      excelLoading.value = false;
+    });
+  }
+
+  //询盘详情
+  async function showEnquiryDetail(record) {
+    if (record.readStatus == 0) {
+      getAction('/adweb/adwebEnquiry/read?id=' + record.id, null).then(() => {
+        getTableAndNum();
+      })
+    }
+
+    await nextTick();
+
+    if (enquiryDetailRef.value && enquiryDetailRef.value.init) {
+      enquiryDetailRef.value.init(record);
+    }
   }
 
   // 高级查询配置
@@ -431,6 +595,8 @@
    * 查询
    */
   function searchQuery() {
+
+    console.log(queryParam.userEffective, "queryParam.userEffectivequeryParam.userEffective");
     reload();
   }
 
@@ -475,4 +641,66 @@
       width: 100%;
     }
   }
+
+  .theme-color {
+    color: @primary-color;
+  }
+
+  .r1 {
+    .choose-site {
+      display: flex;
+    }
+
+    .t1 {
+      font-size: 18px;
+    }
+
+    .ant-calendar-picker {
+      margin-right: 20px;
+
+    }
+
+
+  }
+
+  .r2 {
+    background: #fff;
+    border-radius: 10px;
+    padding: 30px 20px;
+    margin-top: 20px;
+
+    .ant-col:not(:last-child) {
+      border-right: 1px solid #e6e6e6;
+    }
+
+    p {
+      margin: 0;
+      text-align: center;
+
+      &.t1 {
+        color: #333;
+        margin-bottom: 15px;
+
+        img {
+          margin-right: 10px;
+          width: 15px;
+          margin-top: -5px;
+        }
+      }
+
+      &.t2 {
+        color: @primary-color;
+        font-size: 30px;
+        font-weight: 500;
+        line-height: 1;
+        text-decoration: underline;
+        cursor: pointer;
+        padding-left: 25px;
+      }
+    }
+  }
+
+  .r3 {
+    margin-top: 20px;
+  }
 </style>

src/views/adweb/enquiry/modules/enquiryDetail.vue

@@ -2,7 +2,7 @@
   <a-modal
     :title="title"
     :width="width"
-    v-model="modalVisible"
+    v-model:open="modalVisible"
     centered
     :closable="true"
     :keyboard="false"
@@ -81,10 +81,10 @@
               </div>
                   <!-- {{translateContent == '' ?  record.context : translateContent}} -->
                   <i @click="enquiryTransContent">
-                   <img v-if="translateContent == '' " src="../../.././../assets/V2-7/translate1.svg" />
+                   <img v-if="translateContent == '' " src="../../.././../assets/enquiry/translate1.svg" />
                   </i>
                   <i @click="backToEcglish">
-                   <img v-if="translateContent != '' " src="../../.././../assets/V2-7/translate2.svg" />
+                   <img v-if="translateContent != '' " src="../../.././../assets/enquiry/translate2.svg" />
                   </i>
                </span>
           </a-spin>
@@ -205,8 +205,6 @@ export default {
       this.modelUserEffective = record.userEffective
 
       record.cartItems = JSON.parse(record.cartItems);
-      console.log(record.cartItems, "jsonObjectjsonObjectjsonObject");
-      console.log('userEffectiveOption',this.userEffectiveOption)
     },
 
     handleCancel () {
@@ -369,7 +367,7 @@ export default {
 
 
 <style lang="less" scoped>
-.wrap{
+.wrap {
   p{
     margin-bottom: 10px;
     border-bottom: 1px solid #e7e7e7;