Merge branch 'dev-kol-20210324' of...

Merge branch 'dev-kol-20210324' of http://192.168.110.53/com.pica.cloud.education.frontend/pica.cloud.web-education-admin into dev-kol-20210324

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>
@@ -39,7 +39,7 @@
           <template slot-scope="scope">
             <p>{{ scope.row[item.prop] }}</p>
             <div v-if="item.prop === 'operate'">
-              <el-button size="small">移除</el-button>
+              <el-button size="small" @click="deleteItem(scope.$index)">移除</el-button>
             </div>
           </template>
         </el-table-column>
@@ -48,62 +48,181 @@
         <el-button type="primary" @click="handleSave">保存</el-button>
       </el-row>
     </el-row>
+    <el-dialog :title="dialogTitle"
+               :visible.sync="addFormVisible"
+               :close-on-press-escape="false"
+               :close-on-click-modal="false">
+      <el-form ref="addForm"
+               :rules="rules2"
+               :model="addForm"
+               label-width="150px"
+               label-suffix=":"
+               size="small">
+        <el-form-item label="姓名" prop="name">
+          <el-select v-model="addForm.name"
+                     filterable
+                     remote
+                     placeholder="请输入专家姓名或医院名称,多个关键字用空格隔开"
+                     clearable
+                     style="width: 100%;"
+                     :remote-method="remoteMethod"
+                     @change="nameChange"
+                     @visible-change="noSelectHand">
+            <el-option
+                v-for="item in expertList"
+                :key="item.userId"
+                :label="item.option"
+                :value="item.userId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="text-align: center">
+        <el-button size="small" type="primary" @click="submitForm('addForm')">确 定</el-button>
+        <el-button size="small" @click="addFormVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <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: {
+        desc: '',
+        showStatus: 0
+      },
+      dialogTitle: '添加KOL',
+      addFormVisible: false,
+      addForm: {
         name: '',
-        resource: '2'
       },
+      nameList: [],
+      expertList: [],
+      selectExpertItem: {},
       rules: {
-        resource: [
+        showStatus: [
           { required: true, message: '请选择是否展示入口', trigger: 'blur' }
         ],
-        name: [
+        desc: [
           { required: true, message: '请输入入口文案', trigger: 'blur' },
           { max: 6, message: '入口文案长度不能多于6个字符', trigger: 'blur' }
         ]
       },
+      rules2: {
+        name: [
+          { required: true, message: '请输入专家姓名或医院名称,多个关键字用空格隔开', trigger: 'change' },
+        ],
+      },
       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);
     },
-    handleAdd() {},
-    handleSave() {}
+    handleAdd() {
+      this.addFormVisible = true;
+      if (this.$refs['addForm']) {
+        this.$refs['addForm'].resetFields();
+      }
+      this.expertList = [];
+      this.selectExpertItem = {};
+    },
+    handleSave() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          // console.log('form校验通过')
+        }
+      });
+    },
+    deleteItem(index) {
+      this.tableData.splice(index, 1);
+    },
+    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;
+        }
+      });
+    },
   },
 }
 </script>

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>