deat: Wallpaper

src/components/BatchImageAdd/index.vue

@@ -25,7 +25,18 @@
         </el-dialog>
       </el-form-item>
       <el-form-item v-if="hasType" label="类型">
-        <el-input v-model.trim="type" placeholder="请输入类型" />
+        <el-select
+          v-if="typeList && typeList.length > 0"
+          v-model="type"
+          allow-create
+          default-first-option
+          filterable
+          placeholder="请选择类型"
+          style="width: 100%"
+        >
+          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <el-input v-else v-model.trim="type" placeholder="请输入类型" />
       </el-form-item>
       <el-form-item label="是否启用">
         <el-switch v-model="isEnabled" active-text="启用" :active-value="true" inactive-text="禁用" :inactive-value="false" />
@@ -52,6 +63,10 @@
         type: Boolean,
         default: false,
       },
+      typeList: {
+        type: Array,
+        default: () => [],
+      },
     },
     data() {
       return {

src/views/spring/wallpaper/system/components/AppManagementEdit.vue

@@ -2,8 +2,8 @@
   <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
     <el-form ref="form" label-width="80px" :model="form" :rules="rules">
       <el-form-item label="壁纸类型" prop="type">
-        <el-select v-model="form.type" placeholder="请选择壁纸类型" style="width: 100%">
+        <el-select v-model="form.type" allow-create default-first-option filterable placeholder="请选择壁纸类型" style="width: 100%">
-          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.name" />
+          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="壁纸图片" prop="imageUrl">

src/views/spring/wallpaper/system/index.vue

@@ -3,6 +3,7 @@
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
         <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
+        <el-button icon="el-icon-plus" type="primary" @click="handleBatchAdd">批量添加</el-button>
       </vab-query-form-left-panel>
       <vab-query-form-right-panel :span="12">
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
@@ -18,7 +19,7 @@
 
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
       <el-table-column align="center" label="排序" prop="sort" show-overflow-tooltip />
-      <el-table-column align="center" label="类型" prop="type" show-overflow-tooltip />
+      <el-table-column align="center" label="类型" prop="categoryName" show-overflow-tooltip />
       <el-table-column align="center" label="壁纸" width="100">
         <template slot-scope="scope">
           <el-tooltip class="item" :content="scope.row.id" effect="dark" placement="top">
@@ -54,18 +55,23 @@
       @size-change="handleSizeChange"
     />
     <edit ref="edit" @fetch-data="fetchData" />
+    <batch-image-add ref="batchAdd" :do-add="doAdd" :has-type="true" :type-list="typeList" @fetch-data="fetchData" />
   </div>
 </template>
 
 <script>
-  import { doDelete, getList, toggleEnable, doMoveUp, doMoveDown } from '@/api/spring/wallpaper/system'
+  import { doDelete, getList, toggleEnable, doMoveUp, doMoveDown, doAdd } from '@/api/spring/wallpaper/system'
+  import { getAllList } from '@/api/spring/wallpaper/type'
   import Edit from './components/AppManagementEdit'
+  import BatchImageAdd from '@/components/BatchImageAdd'
 
   export default {
     name: 'SystemWallpaper',
-    components: { Edit },
+    components: { Edit, BatchImageAdd },
     data() {
       return {
+        doAdd,
+        typeList: [],
         list: null,
         listLoading: true,
         layout: 'total, sizes, prev, pager, next, jumper',
@@ -82,12 +88,20 @@
     },
     created() {
       this.fetchData()
+      this.fetchTypeList()
     },
 
     beforeDestroy() {
       clearTimeout(this.timeOutID)
     },
     methods: {
+      async fetchTypeList() {
+        const { data } = await getAllList()
+        this.typeList = data || []
+      },
+      handleBatchAdd() {
+        this.$refs['batchAdd'].show()
+      },
       setSelectRows(val) {
         this.selectRows = val
       },