细节

src/views/dataCenter/course/index.vue

@@ -1,6 +1,36 @@
 <template>
   <a-card :bordered="false">
     <content-header :title="$route.meta.title"></content-header>
+    <!-- 搜索板块 -->
+    <a-row class="row-item-search">
+      <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
+        <a-form-item label="教学名称/教学副标题">
+          <a-input
+            v-model="queryParam.search"
+            style="width: 250px"
+            placeholder="请输入教学名称/教学副标题"
+            allow-clear
+          />
+        </a-form-item>
+        <a-form-item label="教学分类">
+          <a-select @change="getCourseCategory" style="width: 250px" placeholder="请选择">
+            <a-select-option
+              :value="item.course_category_id"
+              v-for="item in courseTypeList"
+              :key="item.course_category_id"
+            >
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item class="search-btn">
+          <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
+        </a-form-item>
+        <a-form-item class="search-btn">
+          <a-button @click="handleReset">重置</a-button>
+        </a-form-item>
+      </a-form>
+    </a-row>
     <div class="table-operator">
       <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
     </div>
@@ -8,6 +38,7 @@
       <span slot="status" slot-scope="text">
         <a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
       </span>
+      <span slot="course_category_id" slot-scope="text">{{ text == 1 ? '基础性教学' : '系统性教学' }} </span>
       <span slot="action" slot-scope="text, item">
         <a style="margin-right: 8px" @click="handleEdit(item)">编辑</a>
         <a @click="handleDelete(item)">删除</a>
@@ -57,13 +88,14 @@ export default {
           dataIndex: 'course_subheading',
         },
         {
-          title: '教学详情',
+          title: '教学分类',
-          dataIndex: 'course_detail',
+          dataIndex: 'course_category_id',
+          scopedSlots: { customRender: 'course_category_id' },
         },
         {
           title: '状态',
           dataIndex: 'status',
-          scopedSlots: { customRender: 'status' }
+          scopedSlots: { customRender: 'status' },
         },
         {
           title: '排序',
@@ -80,9 +112,11 @@ export default {
           scopedSlots: { customRender: 'action' },
         },
       ],
+      queryParam: { search: '', courseCategory: null },
+      searchForm: this.$form.createForm(this),
       // 加载数据方法 必须为 Promise 对象
       loadData: (param) => {
-        return Api.list(param).then((response) => {
+        return Api.list({ ...param, ...this.queryParam }).then((response) => {
           return response.data.list
         })
       },
@@ -92,6 +126,26 @@ export default {
     this.getCourseTypeList()
   },
   methods: {
+    getCourseCategory(val) {
+      this.queryParam.courseCategory = val
+    },
+    // 确认搜索
+    handleSearch(e) {
+      e.preventDefault()
+      this.searchForm.validateFields((error, values) => {
+        if (!error) {
+          this.queryParam = { ...this.queryParam, ...values }
+          this.handleRefresh(true)
+        }
+      })
+    },
+
+    // 重置搜索表单
+    handleReset() {
+      this.queryParam.courseCategory = null
+      this.queryParam.search = ''
+      this.handleRefresh(true)
+    },
     // 获取分类列表
     getCourseTypeList() {
       Api.getCourselist()

src/views/dataCenter/course/modules/AddForm.vue

@@ -29,12 +29,6 @@
             placeholder="请输入教学副标题"
             v-decorator="['course_subheading', { rules: [{ required: true, message: '请输入教学副标题' }] }]"
           />
-        </a-form-item>
-         <a-form-item label="教学详情" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input
-            placeholder="请输入教学详情"
-            v-decorator="['course_detail', { rules: [{ required: true, message: '请输入教学详情' }] }]"
-          />
         </a-form-item>
         <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
           <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
@@ -42,6 +36,12 @@
             <a-radio :value="0">隐藏</a-radio>
           </a-radio-group>
         </a-form-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number
+            :min="0"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
+          />
+        </a-form-item>
         <a-form-item label="教学图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <SelectImage v-decorator="['image_id', { rules: [{ required: true, message: '请上传1张图片 ' }] }]"  />
         </a-form-item>

src/views/dataCenter/course/modules/EditForm.vue

@@ -37,17 +37,17 @@
             v-decorator="['course_subheading', { rules: [{ required: true, message: '请输入教学副标题' }] }]"
           />
         </a-form-item>
-        <a-form-item label="教学详情" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input
-            placeholder="请输入教学详情"
-            v-decorator="['course_detail', { rules: [{ required: true, message: '请输入教学详情' }] }]"
-          />
-        </a-form-item>
         <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
           <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
             <a-radio :value="1">显示</a-radio>
             <a-radio :value="0">隐藏</a-radio>
           </a-radio-group>
+        </a-form-item>
+         <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number
+            :min="0"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
+          />
         </a-form-item>
         <a-form-item label="教学图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <SelectImage
@@ -124,7 +124,7 @@ export default {
       } = this
       // 设置表单内容
       this.$nextTick(() => {
-        setFieldsValue(_.pick(record, ['status','course_name', 'course_subheading', 'course_detail','image_id', 'video_id','course_category_id']))
+        setFieldsValue(_.pick(record, ['sort','status','course_name', 'course_subheading','image_id', 'video_id','course_category_id']))
       })
     },