页面完成

.env.production

@@ -1,6 +1,6 @@
 NODE_ENV = 'production'
 VUE_APP_TYPE= 'prod'
 # VUE_APP_URL = 'https://cnbg.yaoyi.net'
-# VUE_APP_URL = 'https://mic-t.cnbg.com.cn'
-VUE_APP_URL = 'https://mic.cnbg.com.cn'
+VUE_APP_URL = 'https://mic-t.cnbg.com.cn'
+# VUE_APP_URL = 'https://mic.cnbg.com.cn'
 

src/api/serviceManagement/servicesToBeReviewed/index.js

@@ -17,3 +17,29 @@ export function getTaskTypeAvailApi(query) {
     params: query
   });
 }
+
+// 获取生产企业
+export function getDeptv2Avail(query) {
+  return request({
+    url: ' /admin/dept/v2/avail',
+    method: 'get',
+    params: query
+  });
+}
+
+// 获取代表名称
+export function getUserV2Avail(query) {
+  return request({
+    url: ' /admin/user/v2/avail',
+    method: 'get',
+    params: query
+  });
+}
+// 管理产品名称
+export function getDrug2Avail(query) {
+  return request({
+    url: ' /admin/drug/v2/avail',
+    method: 'get',
+    params: query
+  });
+}

src/views/serviceManagement/servicesToBeReviewed/index.vue

@@ -1,16 +1,16 @@
 <template>
   <basic-container>
     <div class="search-content">
-      <el-form :model="searchFrom" label-width="120px">
+      <el-form :model="searchFrom" label-width="140px">
         <el-row>
           <el-col :span="6">
-            <el-form-item label="年度">
-              <el-date-picker clearable class="w100" v-model="searchFrom.year" type="year" placeholder="选择年" format="yyyy" value-format="yyyy"> </el-date-picker>
+            <el-form-item label="服务包年度">
+              <el-date-picker clearable class="w100" v-model="searchFrom.year" type="year" placeholder="请选择服务包年度" format="yyyy" value-format="yyyy"> </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="季度">
-              <el-select v-model="searchFrom.quarter" placeholder="请选择服务类型" class="w100" clearable>
+            <el-form-item label="服务包季度">
+              <el-select v-model="searchFrom.quarter" placeholder="请选择服务季度" class="w100" clearable>
                 <el-option label="第一季度" :value="1"></el-option>
                 <el-option label="第二季度" :value="2"></el-option>
                 <el-option label="第三季度" :value="3"></el-option>
@@ -19,7 +19,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="代表提交时间">
+            <el-form-item label="服务提交时间">
               <el-date-picker class="w100" clearable v-model="searchFrom.createTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
               </el-date-picker>
             </el-form-item>
@@ -34,21 +34,47 @@
         </el-row>
         <el-row>
           <el-col :span="6">
-            <el-form-item label="服务包所属省份">
-              <el-select v-model="searchFrom.provAbbr" placeholder="请选择省份" class="w100" clearable>
-                <el-option v-for="province in abbreviationsProvincesList" :key="province" :label="province" :value="province" />
+            <el-form-item label="服务供应商">
+              <el-select v-model="searchFrom.vendorId" placeholder="请选择服务供应商" class="w100" clearable filterable>
+                <el-option v-for="item in deptListArr" :key="item.entId" :label="item.name" :value="item.entId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="业务员姓名">
+              <el-select v-model="searchFrom.salesId" placeholder="请选择业务员姓名" class="w100" clearable filterable>
+                <el-option v-for="item in userListArr" :key="item.userId" :label="item.realName" :value="item.userId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="产品所属生产企业">
+              <el-select v-model="searchFrom.mahName" @change="mahNameChange" placeholder="请选择产品所属生产企业" class="w100" clearable>
+                <el-option v-for="item in mahNameArr" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="生产企业">
-              <el-select v-model="searchFrom.mahName" placeholder="请选择省份" class="w100" clearable @change="">
-                <el-option v-for="item in mahName" :key="mahNameArr" :label="item.label" :value="item.value" />
+            <el-form-item label="关联产品名称">
+              <el-select v-model="searchFrom.skuId" placeholder="请选择关联产品名称" class="w100" :disabled="drugDisabled" clearable filterable>
+                <el-option v-for="item in currDrugList" :key="item.id" :label="item.drugName" :value="item.id" />
               </el-select>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="6">
-            <el-button type="success" @click="clickBtn">搜索</el-button>
+            <el-form-item label="服务包所属省份">
+              <el-select v-model="searchFrom.provAbbr" placeholder="请选择省份" class="w100" clearable>
+                <el-option v-for="province in abbreviationsProvincesList" :key="province" :label="province" :value="province" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2">
+            <div class="search-btns">
+              <el-button type="success" @click="clickBtn">搜索</el-button>
+              <el-button @click="clearSearch">清空</el-button>
+            </div>
           </el-col>
         </el-row>
       </el-form>
@@ -80,7 +106,7 @@
 </template>
 
 <script>
-import { getTaskV2PageApi, getTaskTypeAvailApi } from '@/api/serviceManagement/servicesToBeReviewed/index.js';
+import { getTaskV2PageApi, getTaskTypeAvailApi, getDeptv2Avail, getDrug2Avail, getUserV2Avail } from '@/api/serviceManagement/servicesToBeReviewed/index.js';
 import { tableOptin } from './index.js';
 import { getDictType } from '@/api/common';
 import abbreviationsProvinces from '@/const/abbreviationsProvinces.js';
@@ -94,6 +120,11 @@ export default {
       taskStatusArr: [],
       taskTypeAvailArr: [],
       mahNameArr: [],
+      deptListArr: [],
+      drugListArr: [],
+      userListArr: [],
+      currDrugList: [],
+      drugDisabled: true,
       abbreviationsProvincesList: abbreviationsProvinces,
       searchFrom: {
         year: '',
@@ -101,7 +132,10 @@ export default {
         quarter: '',
         createTime: '',
         provAbbr: '',
-        mahName: ''
+        mahName: '',
+        vendorId: '',
+        salesId: '',
+        skuId: ''
       },
       page: {
         pageSizes: [10, 50, 100, 300, 500],
@@ -126,6 +160,16 @@ export default {
       getTaskTypeAvailApi().then((res) => {
         this.taskTypeAvailArr = res.data.data;
       });
+      getDeptv2Avail().then((res) => {
+        this.deptListArr = res.data.data;
+      });
+      getUserV2Avail().then((res) => {
+        this.userListArr = res.data.data;
+      });
+
+      getDrug2Avail().then((res) => {
+        this.drugListArr = res.data.data;
+      });
     },
     async getList() {
       this.tableLoading = true;
@@ -159,14 +203,45 @@ export default {
       this.page.currentPage = 1;
       this.getList();
     },
+    clearSearch() {
+      this.searchFrom = {
+        year: '',
+        taskTypeId: '',
+        quarter: '',
+        createTime: '',
+        provAbbr: '',
+        mahName: '',
+        vendorId: '',
+        salesId: '',
+        skuId: ''
+      };
+    },
     pageChange(obj) {
       console.log('obj', obj);
       this.page.currentPage = obj.currentPage;
       this.page.pageSize = obj.pageSize;
       this.getList();
+    },
+    mahNameChange(e) {
+      if (e) {
+        const curr = this.drugListArr[e];
+        this.currDrugList = curr;
+
+        this.drugDisabled = false;
+      } else {
+        this.searchFrom.skuId = '';
+        this.currDrugList = [];
+        this.drugDisabled = true;
+      }
     }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.search-btns {
+  margin-left: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+</style>