创建教材时分类多选

src/api/book.js

@@ -64,6 +64,13 @@ export function GetBookTypeList(data) {
 }
 
 /**
+ * 获取教材类型列表（新版）
+ */
+export function GetBookTypeList_Book(data) {
+  return http.post(`${process.env.VUE_APP_BookWebSI}?MethodName=book-book_manager-GetBookTypeList`, data);
+}
+
+/**
  * 得到教材章节结构
  */
 export function GetBookChapterStruct(data) {

src/views/book/create.vue

@@ -54,12 +54,20 @@
             filterable
             allow-create
             default-first-option
+            popper-class="label-name"
             placeholder="请输入标签，回车确认"
           />
         </el-form-item>
-        <el-form-item label="分类" prop="type_id">
-          <el-select v-model="form.type_id" placeholder="选择分类">
-            <el-option v-for="{ id: typeId, name } in type_list" :key="typeId" :label="name" :value="typeId" />
+        <el-form-item label="分类" prop="type_name_list">
+          <el-select
+            v-model="form.type_name_list"
+            placeholder="选择分类"
+            multiple
+            allow-create
+            filterable
+            default-first-option
+          >
+            <el-option v-for="item in type_list" :key="item" :label="item" :value="item" />
           </el-select>
         </el-form-item>
         <el-form-item label="简介" prop="description">
@@ -83,7 +91,7 @@
 
 <script>
 import { fileUpload } from '@/api/app';
-import { GetBook, UpdateBook, AddBook, GetBookTypeList } from '@/api/book';
+import { GetBook, UpdateBook, AddBook, GetBookTypeList_Book } from '@/api/book';
 import { twoDecimal } from '@/utils/validate';
 
 export default {
@@ -99,7 +107,7 @@ export default {
         price: '',
         price_old: '',
         label_name_list: '',
-        type_id: '',
+        type_name_list: [],
         description: '',
       },
       formRules: {
@@ -107,7 +115,7 @@ export default {
         name: [{ required: true, message: '请输入书籍名称', trigger: 'blur' }],
         author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
         price: [{ required: true, message: '请输入现价', trigger: 'blur' }],
-        type_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
+        type_name_list: [{ required: true, message: '请选择分类', trigger: 'blur' }],
         description: [{ required: true, message: '请输入简介', trigger: 'blur' }],
       },
       type_list: [],
@@ -122,7 +130,7 @@ export default {
     if (this.book_id) {
       this.getBookDetail();
     }
-    GetBookTypeList().then(({ type_list }) => {
+    GetBookTypeList_Book().then(({ type_list }) => {
       this.type_list = type_list;
     });
   },
@@ -174,13 +182,13 @@ export default {
     },
     getBookDetail() {
       GetBook({ id: this.book_id }).then(
-        ({ name, picture_id, picture_url, author, type_id, price, price_old, label_name_list, description }) => {
+        ({ name, picture_id, picture_url, author, type_name_list, price, price_old, label_name_list, description }) => {
           this.form = {
             name,
             picture_id,
             picture_url,
             author,
-            type_id,
+            type_name_list,
             price,
             price_old,
             label_name_list,
@@ -320,7 +328,7 @@ export default {
 </style>
 
 <style lang="scss">
-.el-select-dropdown.el-popper.is-multiple {
+.el-select-dropdown.el-popper.is-multiple.label-name {
   display: none;
 
   .el-select-dropdown__empty {