tijiao

src/views/base/region/index.vue

@@ -15,91 +15,79 @@
             node-key="id"
             :props="defaultProps"
             @node-click="handleNodeClick" />
-          <!-- <el-tree ref="tree" :data="deptOptions" node-key="id" 
-          :filter-node-method="filterNode" :props="defaultProps"
-          @node-click="handleNodeClick" /> -->
         </div>
-        <!-- <div class="buttons">
-    <el-button  @click="getCheckedNodes($event)">添加区域</el-button>
-  </div> -->
         <vab-query-form-left-panel :span="2">
           <el-button icon="el-icon-plus" type="primary" @click="getCheckedNodes($event)">添加区域</el-button>
         </vab-query-form-left-panel>
       </el-col>
-      <el-col :span="19" :xs="27">
-        <vab-query-form>
-          <vab-query-form-left-panel :span="20">
-            <el-form :inline="true" :model="queryForm" @submit.native.prevent>
-              <el-form-item style="letter-spacing: 12px">
-                <el-input v-model.trim="queryForm.custCode" clearable placeholder="客户编码" />
-              </el-form-item>
-              &nbsp;
 
-              <el-form-item>
-                <el-input v-model.trim="queryForm.custName" clearable placeholder="客户名称" />
-              </el-form-item>
-              &nbsp;
-              <el-form-item label="" prop="custIndustry">
-                <el-select v-model="custIndustry" placeholder="请选择客户行业" style="width: 100%">
-                  <el-option
-                    v-for="item in industryOptions"
-                    :key="item.value"
-                    :label="item.value"
-                    :value="item.value" />
-                </el-select>
-              </el-form-item>
-              <el-form-item style="margin-right: 5px">
-                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
-                <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
-              </el-form-item>
-            </el-form>
-            <vab-query-form-left-panel :span="15">
-              <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
-            </vab-query-form-left-panel>
-          </vab-query-form-left-panel>
-          <vab-query-form-right-panel :span="29">
-            <el-button icon="el-icon-download" />
-            <table-tool :check-list.sync="checkList" :columns="columns" />
-          </vab-query-form-right-panel>
-        </vab-query-form>
-        <el-table
-          v-loading="listLoading"
-          border
-          :data="list"
-          style="width: 100%; height: 500px"
-          @selection-change="setSelectRows">
-          <el-table-column
-            v-for="(item, index) in finallyColumns"
-            :key="index"
-            align="center"
-            :label="item.label"
-            :prop="item.prop"
-            show-overflow-tooltip
-            :sortable="item.sortable"
-            :width="item.width">
-            <template #default="{ row }">
-              <span>{{ row[item.prop] }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="操作" show-overflow-tooltip width="85">
-            <template #default="{ row }">
-              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
-              <el-button type="text" @click="handleDelete(row)">删除</el-button>
-            </template>
-          </el-table-column>
-          <template #empty>
-            <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
+      <vab-query-form>
+        <vab-query-form-top-panel>
+          <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+            <el-form-item style="letter-spacing: 12px">
+              <el-input v-model.trim="queryForm.custCode" clearable placeholder="客户编码" />
+            </el-form-item>
+            <el-form-item>
+              <el-input v-model.trim="queryForm.custName" clearable placeholder="客户名称" />
+            </el-form-item>
+            <el-form-item label="" prop="custIndustry">
+              <el-select v-model="custIndustry" placeholder="请选择客户行业" style="width: 100%">
+                <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item style="margin-right: 5px">
+              <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+              <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </vab-query-form-top-panel>
+      </vab-query-form>
+      <vab-query-form>
+        <vab-query-form-left-panel :span="12" style="margin-bottom: 10px">
+          <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
+        </vab-query-form-left-panel>
+        <vab-query-form-right-panel :span="12">
+          <el-button icon="el-icon-download" />
+          <table-tool :check-list.sync="checkList" :columns="columns" />
+        </vab-query-form-right-panel>
+      </vab-query-form>
+      <el-table
+        v-loading="listLoading"
+        border
+        :data="list"
+        style="width: 100%; height: 500px"
+        @selection-change="setSelectRows">
+        <el-table-column
+          v-for="(item, index) in finallyColumns"
+          :key="index"
+          align="center"
+          :label="item.label"
+          :prop="item.prop"
+          show-overflow-tooltip
+          :sortable="item.sortable"
+          :width="item.width">
+          <template #default="{ row }">
+            <span>{{ row[item.prop] }}</span>
           </template>
-        </el-table>
-        <el-pagination
-          background
-          :current-page="queryForm.pageNum"
-          :layout="layout"
-          :page-size="queryForm.pageSize"
-          :total="total"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange" />
-      </el-col>
+        </el-table-column>
+        <el-table-column align="center" label="操作" show-overflow-tooltip width="85">
+          <template #default="{ row }">
+            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+            <el-button type="text" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
+        </template>
+      </el-table>
+      <el-pagination
+        background
+        :current-page="queryForm.pageNum"
+        :layout="layout"
+        :page-size="queryForm.pageSize"
+        :total="total"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange" />
     </el-row>
     <edit ref="edit" @fetch-data="fetchData" />