KOL管理tab接口联调

src/components/yqrange/kol-manage.vue

@@ -3,16 +3,16 @@
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
       <el-row>
         <el-col :span="6">
-          <el-form-item label="是否显示KOL入口" prop="resource">
-            <el-radio-group v-model="ruleForm.resource">
-              <el-radio label="2">否</el-radio>
-              <el-radio label="1">是</el-radio>
+          <el-form-item label="是否显示KOL入口" prop="showStatus">
+            <el-radio-group v-model="ruleForm.showStatus">
+              <el-radio :label="0">否</el-radio>
+              <el-radio :label="1">是</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="入口文案" prop="name">
-            <el-input v-model="ruleForm.name" placeholder="请输入入口文案，最长6个字"></el-input>
+          <el-form-item label="入口文案" prop="desc">
+            <el-input v-model="ruleForm.desc" placeholder="请输入入口文案，最长6个字"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
@@ -69,11 +69,10 @@
                      @change="nameChange"
                      @visible-change="noSelectHand">
             <el-option
-                v-for="item in nameList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-              <span>{{item.value}}</span>
+                v-for="item in expertList"
+                :key="item.userId"
+                :label="item.option"
+                :value="item.userId">
             </el-option>
           </el-select>
         </el-form-item>
@@ -89,16 +88,23 @@
 <script>
 import Sortable from 'sortablejs';
 import { kolCol } from './util/common';
+import { getExpertList, getExperNametList } from '@/utils/yqrange/rangeApi'
 
 export default {
   components: {
     Sortable
   },
+  props: {
+    circleId: {
+      type: Number | String,
+      default: null
+    }
+  },
   data() {
     return {
       ruleForm: {
-        name: '',
-        resource: '2'
+        desc: '',
+        showStatus: 0
       },
       dialogTitle: '添加KOL',
       addFormVisible: false,
@@ -106,11 +112,13 @@ export default {
         name: '',
       },
       nameList: [],
+      expertList: [],
+      selectExpertItem: {},
       rules: {
-        resource: [
+        showStatus: [
           { required: true, message: '请选择是否展示入口', trigger: 'blur' }
         ],
-        name: [
+        desc: [
           { required: true, message: '请输入入口文案', trigger: 'blur' },
           { max: 6, message: '入口文案长度不能多于6个字符', trigger: 'blur' }
         ]
@@ -121,28 +129,28 @@ export default {
         ],
       },
       col: kolCol,
-      tableData: [
-        {
-          index: 1
-        },
-        {
-          index: 2
-        },
-        {
-          index: 3
-        },
-        {
-          index: 4
-        }
-      ]
+      tableData: []
     }
   },
   mounted() {
+    this.initData();
     this.$nextTick(() => {
       this.rowDrop();
     });
   },
   methods: {
+    initData() {
+      getExpertList(this.circleId).then(res => {
+        if (res.code == '000000') {
+          console.log('获取kol配置',res.data);
+          const { kolConfig, kolRecordList } = res.data;
+          this.ruleForm = kolConfig;
+          this.tableData = kolRecordList;
+        }
+      }).catch(err => {
+        console.log('网络出现点儿问题，稍后重试')
+      })
+    },
     rowDrop() {
       const tbody = document.querySelector('#kolTable tbody');
       Sortable.create(tbody);
@@ -152,6 +160,8 @@ export default {
       if (this.$refs['addForm']) {
         this.$refs['addForm'].resetFields();
       }
+      this.expertList = [];
+      this.selectExpertItem = {};
     },
     handleSave() {
       this.$refs.ruleForm.validate((valid) => {
@@ -163,13 +173,52 @@ export default {
     deleteItem(index) {
       this.tableData.splice(index, 1);
     },
-    remoteMethod(){},
-    nameChange() {},
-    noSelectHand() {},
+    remoteMethod(val){
+      if (val) {
+        getExperNametList(this.circleId, val).then(res => {
+          if (res.code == '000000') {
+            console.log('获取专家列表数据',res.data);
+            this.expertList = res.data;
+          }else {
+            this.expertList = [];
+          }
+        }).catch(err => {
+          console.log('网络出现点儿问题，稍后重试')
+        })
+      }else {
+        this.expertList = [];
+      }
+    },
+    nameChange(val) {
+      // console.log('选中值',val)
+      if (val) {
+        this.expertList.map((item,index) => {
+          if(val == item.userId){
+            this.selectExpertItem = item.kolRecord;
+          }else {
+            this.selectExpertItem = {};
+          }
+        })
+      }else {
+        this.selectExpertItem = {};
+      }
+    },
+    noSelectHand(val) {
+      if (!val && !this.addForm.name) {
+        this.expertList = [];
+        this.selectExpertItem = {};
+      }
+    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           // console.log('form校验通过')
+          let len = this.tableData.length;
+          this.tableData.push({
+            ...this.selectExpertItem,
+            seq: len + 1,
+          });
+          this.expertList = [];
           this.addFormVisible = false;
         }
       });

src/components/yqrange/util/common.js

 export const kolCol = [
   {
     label: '顺序',
-    prop: "index"
+    prop: "seq"
   },
   {
     label: '姓名',
@@ -9,7 +9,7 @@ export const kolCol = [
   },
   {
     label: '地区',
-    prop: "area"
+    prop: "district"
   },
   {
     label: '所在医院',
@@ -21,7 +21,7 @@ export const kolCol = [
   },
   {
     label: '职称',
-    prop: "jobTitle"
+    prop: "title"
   },
   {
     label: '所属团队',

src/utils/yqrange/rangeApi.js

@@ -79,3 +79,21 @@ export const getTotalNumber = (data) => {
     description: '查询已选机构、人员',
   })
 };
+
+export const getExpertList = (circleId) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`circle/kol/admin/circleId/${circleId}/list`),
+    method: 'get',
+    description: '获取kol配置、专家列表',
+  })
+};
+
+export const getExperNametList = (circleId, name) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`circle/kol/admin/circleId/${circleId}/queryName/${name}`),
+    method: 'get',
+    description: '添加专家关联-获取专家下拉',
+  })
+};

src/views/yqrange/range-manage.vue

@@ -28,7 +28,7 @@
             <gp-ranking></gp-ranking>
           </el-tab-pane>
           <el-tab-pane label="KOL管理" name="seven">
-            <kol-manage />
+            <kol-manage :circleId="circleId"/>
           </el-tab-pane>
         </el-tabs>
       </div>