KOL管理新增与逻辑处理

src/components/yqrange/kol-manage.vue

@@ -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,6 +48,41 @@
         <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 nameList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              <span>{{item.value}}</span>
+            </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>
 
@@ -65,6 +100,12 @@ export default {
         name: '',
         resource: '2'
       },
+      dialogTitle: '添加KOL',
+      addFormVisible: false,
+      addForm: {
+        name: '',
+      },
+      nameList: [],
       rules: {
         resource: [
           { required: true, message: '请选择是否展示入口', trigger: 'blur' }
@@ -74,6 +115,11 @@ export default {
           { max: 6, message: '入口文案长度不能多于6个字符', trigger: 'blur' }
         ]
       },
+      rules2: {
+        name: [
+          { required: true, message: '请输入专家姓名或医院名称,多个关键字用空格隔开', trigger: 'change' },
+        ],
+      },
       col: kolCol,
       tableData: [
         {
@@ -99,11 +145,35 @@ export default {
   methods: {
     rowDrop() {
       const tbody = document.querySelector('#kolTable tbody');
-
       Sortable.create(tbody);
     },
-    handleAdd() {},
-    handleSave() {}
+    handleAdd() {
+      this.addFormVisible = true;
+      if (this.$refs['addForm']) {
+        this.$refs['addForm'].resetFields();
+      }
+    },
+    handleSave() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          // console.log('form校验通过')
+        }
+      });
+    },
+    deleteItem(index) {
+      this.tableData.splice(index, 1);
+    },
+    remoteMethod(){},
+    nameChange() {},
+    noSelectHand() {},
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // console.log('form校验通过')
+          this.addFormVisible = false;
+        }
+      });
+    },
   },
 }
 </script>