接口地址库区选择改多选框

Signed-off-by: TanYibin <5491541@qq.com>

接口地址库区选择改多选框
Signed-off-by: TanYibin <5491541@qq.com>
谭毅彬
1 parent f082fe8e
Showing 1 changed file with 33 additions and 16 deletions
ant-design-vue-jeecg/src/views/system/config/AddressList.vue
@@ -6,11 +6,10 @@
         <a-row :gutter="24">
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="库区">
-              <a-select show-search placeholder="请选择库区" option-filter-prop="children" v-model="queryParam.zoneCode" >
-                <a-select-option v-for="item in zoneList" :key="item.name" :value="item.code">
-                  {{ item.name }}
-                </a-select-option>
-              </a-select>
+              <a-form-model-item prop="zoneOptions">
+                <j-multi-select-tag v-model="queryParam.zoneCode" :options="zoneOptions" placeholder="请选择">
+                </j-multi-select-tag>
+              </a-form-model-item>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -37,17 +36,27 @@
     <!-- 操作按钮区域 -->
     <div class="table-operator">
       <a-button @click="handleAdd" v-has="'address:add'" type="primary" icon="plus">新增</a-button>
-      <a-button v-has="'address:export'" type="primary" icon="download" @click="handleExportXls('接口地址')">导出</a-button>
-      <a-upload v-has="'address:import'" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+      <a-button v-has="'address:export'" type="primary" icon="download" @click="handleExportXls('接口地址')"
+        >导出</a-button
+      >
+      <a-upload
+        v-has="'address:import'"
+        name="file"
+        :showUploadList="false"
+        :multiple="false"
+        :headers="tokenHeader"
+        :action="importExcelUrl"
+        @change="handleImportExcel"
+      >
         <a-button type="primary" icon="import">导入</a-button>
       </a-upload>
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay" v-has="'address:deleteBatch'">
-          <a-menu-item key="1" @click="batchDel">
-            <a-icon type="delete"/> 删除  </a-menu-item>
+          <a-menu-item key="1" @click="batchDel"> <a-icon type="delete" /> 删除 </a-menu-item>
         </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作
-          <a-icon type="down"/>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
         </a-button>
       </a-dropdown>
     </div>
@@ -57,7 +66,7 @@
       <a-table
         ref="table"
         size="middle"
-        :scroll="{x:true}"
+        :scroll="{ x: true }"
         bordered
         rowKey="id"
         :columns="columns"
@@ -65,8 +74,8 @@
         :pagination="ipagination"
         :loading="loading"
         class="j-table-force-nowrap"
-        @change="handleTableChange">
-
+        @change="handleTableChange"
+      >
         <span slot="zoneCode" slot-scope="zoneCode">
           <a-tag :key="zoneCode" color="blue">
             {{ solutionZoneCode(zoneCode) }}
@@ -76,7 +85,7 @@
         <span slot="action" slot-scope="text, record">
           <a v-has="'address:edit'" @click="handleEdit(record)">编辑</a>
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
           <a-dropdown>
             <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
             <a-menu slot="overlay">
@@ -91,7 +100,6 @@
             </a-menu>
           </a-dropdown>
         </span>
-
       </a-table>
     </div>
@@ -116,6 +124,7 @@ export default {
     return {
       description: '接口地址管理页面',
       zoneList: [],
+      zoneOptions: [],
       // 表头
       columns: [
         {
@@ -196,6 +205,14 @@ export default {
     getZoneList().then(res => {
       if (res.success) {
         this.zoneList = res.result
+        //延迟半秒执行,避免组件未加载完,数据已经加载完
+        setTimeout(() => {
+          //slice可以在数组的任何位置进行删除/添加操作
+          this.zoneOptions.splice(0, 1)
+          for (let i = 0; i < res.result.length; i++) {
+            this.zoneOptions.push({ value: res.result[i].code, text: res.result[i].name })
+          }
+        }, 500)
       }
     })
   },