模板页面布局调整

zkqy-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -1,72 +1,73 @@
 <template>
-  <div class="app-container">
-    <el-dialog
-      :title="upload.title"
-      :visible.sync="upload.open"
-      width="400px"
-      append-to-body
-    >
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="
-          upload.url +
-          '?updateSupport=' +
-          upload.updateSupport +
-          '&tableName=' +
-          tableName +
-          '&sqlKey=' +
-          tableKey
-        "
-        v-loading="upload.isUploading"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        :onChange="handleChange"
-        drag
+  <el-card shadow="always" :body-style="{ padding: '10px' }">
+    <div class="app-container">
+      <el-dialog
+        :title="upload.title"
+        :visible.sync="upload.open"
+        width="400px"
+        append-to-body
       >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <!--          <div class="el-upload__tip" slot="tip">-->
-          <!--            <el-checkbox v-model="upload.updateSupport"/>-->
-          <!--            是否更新已经存在的用户数据-->
-          <!--          </div>-->
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link
-            type="primary"
-            :underline="false"
-            style="font-size: 12px; vertical-align: baseline"
-            @click="importTemplate"
-            >下载模板
-          </el-link>
+        <el-upload
+          ref="upload"
+          :limit="1"
+          accept=".xlsx, .xls"
+          :headers="upload.headers"
+          :action="
+            upload.url +
+            '?updateSupport=' +
+            upload.updateSupport +
+            '&tableName=' +
+            tableName +
+            '&sqlKey=' +
+            tableKey
+          "
+          v-loading="upload.isUploading"
+          :disabled="upload.isUploading"
+          :on-progress="handleFileUploadProgress"
+          :on-success="handleFileSuccess"
+          :auto-upload="false"
+          :onChange="handleChange"
+          drag
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip text-center" slot="tip">
+            <!--          <div class="el-upload__tip" slot="tip">-->
+            <!--            <el-checkbox v-model="upload.updateSupport"/>-->
+            <!--            是否更新已经存在的用户数据-->
+            <!--          </div>-->
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              style="font-size: 12px; vertical-align: baseline"
+              @click="importTemplate"
+              >下载模板
+            </el-link>
+          </div>
+        </el-upload>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
         </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-    <Queryfrom
-      :form-vals="templateInfo.where"
-      :statisticList="statisticList"
-      :showCount="showCount"
-      :showSearch="showSearch"
-      @getList="getList"
-      ref="mychild"
-    />
-    <el-row :gutter="10" class="mb8">
-      <!-- 按钮行 start -->
-      <btn-menu-list
-        @topBtnHandler="topBtnHandler"
-        :topBtnArr="topBtnArr"
-        :selection="selection"
-      ></btn-menu-list>
-      <!-- 按钮行 end -->
-      <!-- <template v-else>
+      </el-dialog>
+      <Queryfrom
+        :form-vals="templateInfo.where"
+        :statisticList="statisticList"
+        :showCount="showCount"
+        :showSearch="showSearch"
+        @getList="getList"
+        ref="mychild"
+      />
+      <el-row :gutter="10" class="mb8">
+        <!-- 按钮行 start -->
+        <btn-menu-list
+          @topBtnHandler="topBtnHandler"
+          :topBtnArr="topBtnArr"
+          :selection="selection"
+        ></btn-menu-list>
+        <!-- 按钮行 end -->
+        <!-- <template v-else>
         <el-col :span="1.5">
           <el-button
             type="primary"
@@ -119,133 +120,133 @@
           </el-button>
         </el-col>
       </template> -->
-      <right-toolbar
-        :showCount.sync="showCount"
-        :showSearch.sync="showSearch"
-        :counts="true"
-        @queryTable="pageList"
-      ></right-toolbar>
-    </el-row>
-    <el-table
-      v-loading="loading"
-      :data="tableList"
-      @selection-change="handleSelectionChange"
-      ref="tableRef"
-      :cell-style="cellStyle"
-      :reserve-selection="true"
-      :row-key="getRowKey"
-    >
-      <el-table-column
-        type="selection"
-        width="55"
-        reserve-selection
-        align="center"
+        <right-toolbar
+          :showCount.sync="showCount"
+          :showSearch.sync="showSearch"
+          :counts="true"
+          @queryTable="pageList"
+        ></right-toolbar>
+      </el-row>
+      <el-table
+        v-loading="loading"
+        :data="tableList"
+        @selection-change="handleSelectionChange"
+        ref="tableRef"
+        :cell-style="cellStyle"
+        :reserve-selection="true"
+        :row-key="getRowKey"
       >
-      </el-table-column>
-      <!-- <span v-for="(key, val) in columns" :key="key">
+        <el-table-column
+          type="selection"
+          width="55"
+          reserve-selection
+          align="center"
+        >
+        </el-table-column>
+        <!-- <span v-for="(key, val) in columns" :key="key">
         <el-table-column :label="key" align="center" :prop="val" />
       </span> -->
-      <el-table-column
-        v-for="item in columns"
-        :key="item.key"
-        :label="item.value"
-        align="center"
-        :prop="item.key"
-      >
-        <template slot-scope="scope">
-          <!-- 存在字段样式或字典样式 -->
-          <template
-            v-if="
-              scope.row.styleFieldObj != undefined &&
-              scope.row.styleFieldObj[item.key]
-            "
-          >
-            <!-- 字段样式 -->
-            <template v-if="scope.row.styleFieldObj[item.key].styleType == 1">
-              <!-- 一般字体样式 -->
-              <template
-                v-if="scope.row.styleFieldObj[item.key].fieldStyleType == 0"
-              >
-                <span
-                  :style="`color:${
-                    scope.row.styleFieldObj[item.key].fontColor
-                  }`"
-                  >{{ scope.row[item.key] }}</span
+        <el-table-column
+          v-for="item in columns"
+          :key="item.key"
+          :label="item.value"
+          align="center"
+          :prop="item.key"
+        >
+          <template slot-scope="scope">
+            <!-- 存在字段样式或字典样式 -->
+            <template
+              v-if="
+                scope.row.styleFieldObj != undefined &&
+                scope.row.styleFieldObj[item.key]
+              "
+            >
+              <!-- 字段样式 -->
+              <template v-if="scope.row.styleFieldObj[item.key].styleType == 1">
+                <!-- 一般字体样式 -->
+                <template
+                  v-if="scope.row.styleFieldObj[item.key].fieldStyleType == 0"
                 >
+                  <span
+                    :style="`color:${
+                      scope.row.styleFieldObj[item.key].fontColor
+                    }`"
+                    >{{ scope.row[item.key] }}</span
+                  >
+                </template>
+                <!-- 标签字体样式 -->
+                <template
+                  v-else-if="
+                    scope.row.styleFieldObj[item.key].fieldStyleType == 1
+                  "
+                >
+                  <el-tag
+                    :type="scope.row.styleFieldObj[item.key].tagType"
+                    :effect="
+                      scope.row.styleFieldObj[item.key].isTagFullBg
+                        ? 'dark'
+                        : 'light'
+                    "
+                  >
+                    {{ scope.row[item.key] }}
+                  </el-tag>
+                </template>
               </template>
-              <!-- 标签字体样式 -->
+              <!-- 字典样式 -->
               <template
-                v-else-if="
-                  scope.row.styleFieldObj[item.key].fieldStyleType == 1
-                "
+                v-else-if="scope.row.styleFieldObj[item.key].styleType == 2"
               >
-                <el-tag
-                  :type="scope.row.styleFieldObj[item.key].tagType"
-                  :effect="
-                    scope.row.styleFieldObj[item.key].isTagFullBg
-                      ? 'dark'
-                      : 'light'
+                <span
+                  v-if="
+                    scope.row.styleFieldObj[item.key].listClass == '' ||
+                    scope.row.styleFieldObj[item.key].listClass == 'default'
                   "
+                  >{{ scope.row.styleFieldObj[item.key].dictLabel }}</span
                 >
-                  {{ scope.row[item.key] }}
+                <el-tag
+                  v-else
+                  :type="
+                    scope.row.styleFieldObj[item.key].listClass == 'primary'
+                      ? ''
+                      : scope.row.styleFieldObj[item.key].listClass
+                  "
+                  >{{ scope.row.styleFieldObj[item.key].dictLabel }}
                 </el-tag>
               </template>
             </template>
-            <!-- 字典样式 -->
-            <template
-              v-else-if="scope.row.styleFieldObj[item.key].styleType == 2"
-            >
-              <span
-                v-if="
-                  scope.row.styleFieldObj[item.key].listClass == '' ||
-                  scope.row.styleFieldObj[item.key].listClass == 'default'
-                "
-                >{{ scope.row.styleFieldObj[item.key].dictLabel }}</span
-              >
-              <el-tag
-                v-else
-                :type="
-                  scope.row.styleFieldObj[item.key].listClass == 'primary'
-                    ? ''
-                    : scope.row.styleFieldObj[item.key].listClass
-                "
-                >{{ scope.row.styleFieldObj[item.key].dictLabel }}
-              </el-tag>
+            <!-- 显示默认值 -->
+            <template v-else>
+              {{ scope.row[item.key] }}
             </template>
           </template>
-          <!-- 显示默认值 -->
-          <template v-else>
-            {{ scope.row[item.key] }}
+        </el-table-column>
+        <el-table-column
+          v-if="isShowExcuteCol"
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <Menu
+              :row="scope.row"
+              v-for="btnObj in excuteBtnArr"
+              :key="btnObj.id"
+              :listAll="btnObj"
+              @excuteHandler="excuteHandler"
+            ></Menu>
           </template>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="isShowExcuteCol"
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
-        <template slot-scope="scope">
-          <Menu
-            :row="scope.row"
-            v-for="btnObj in excuteBtnArr"
-            :key="btnObj.id"
-            :listAll="btnObj"
-            @excuteHandler="excuteHandler"
-          ></Menu>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="pageList"
-    />
-    <!-- 添加或修改销售出库单：- 过磅记录生成数据对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <!-- <iframe
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="pageList"
+      />
+      <!-- 添加或修改销售出库单：- 过磅记录生成数据对话框 -->
+      <el-dialog :title="title" :visible.sync="open" append-to-body>
+        <!-- <iframe
         :src="iframeUrl"
         width="100%"
         height="600px"
@@ -253,102 +254,107 @@
         scrolling="no"
       >
       </iframe> -->
-      <!-- <template v-else> -->
-      <template>
-        <FormList
-          v-show="formType == 'dragFormGroup'"
-          ref="formGroupRef"
-          :formList="formList"
-        ></FormList>
-        <!-- <el-button @click="showValue">test</el-button> -->
-      </template>
-      <template>
-        <k-form-build
-          v-if="jsonData && formType == 'dragForm'"
-          class="formBuild"
-          ref="addFromRef"
-          :dynamicData="dynamicData"
-          :defaultValue="defaultValue"
-          @submit="tempSubBtn"
-          @change="formChangeHandler"
-          :value="jsonData"
-        />
-      </template>
+        <!-- <template v-else> -->
+        <template>
+          <FormList
+            v-show="formType == 'dragFormGroup'"
+            ref="formGroupRef"
+            :formList="formList"
+          ></FormList>
+          <!-- <el-button @click="showValue">test</el-button> -->
+        </template>
+        <template>
+          <k-form-build
+            v-if="jsonData && formType == 'dragForm'"
+            class="formBuild"
+            ref="addFromRef"
+            :dynamicData="dynamicData"
+            :defaultValue="defaultValue"
+            @submit="tempSubBtn"
+            @change="formChangeHandler"
+            :value="jsonData"
+          />
+        </template>
 
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="editConfirmHandler">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="editConfirmHandler"
+            >确 定</el-button
+          >
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
 
-    <!-- 绑定按钮dialog -->
-    <el-dialog
-      title="提示"
-      :visible.sync="btnDialogVisible"
-      :before-close="handleClose"
-    >
-      <DialogTemplate
-        ref="dialogRef"
-        :groupKey="groupKey"
-        :rowobj="rowobj"
-        :subCount="subCount"
-        :tableCount="tableCount"
-        :subTableName="subTableName"
-        @addList="addListHandler"
+      <!-- 绑定按钮dialog -->
+      <el-dialog
+        title="提示"
+        :visible.sync="btnDialogVisible"
+        :before-close="handleClose"
       >
-      </DialogTemplate>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="btnDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="btnComfirm">确 定</el-button>
-      </span>
-    </el-dialog>
+        <DialogTemplate
+          ref="dialogRef"
+          :groupKey="groupKey"
+          :rowobj="rowobj"
+          :subCount="subCount"
+          :tableCount="tableCount"
+          :subTableName="subTableName"
+          @addList="addListHandler"
+        >
+        </DialogTemplate>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="btnDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="btnComfirm">确 定</el-button>
+        </span>
+      </el-dialog>
 
-    <!-- 自定义弹窗 -->
-    <el-dialog
-      title="提示"
-      :visible.sync="btnDialogVisible"
-      :before-close="handleClose"
-    >
-      <DialogTemplate
-        ref="dialogRef"
-        :groupKey="groupKey"
-        :rowobj="rowobj"
-        :subCount="subCount"
-        :tableCount="tableCount"
-        :subTableName="subTableName"
-        @addList="addListHandler"
+      <!-- 自定义弹窗 -->
+      <el-dialog
+        title="提示"
+        :visible.sync="btnDialogVisible"
+        :before-close="handleClose"
       >
-      </DialogTemplate>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="btnDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="btnComfirm">确 定</el-button>
-      </span>
-    </el-dialog>
+        <DialogTemplate
+          ref="dialogRef"
+          :groupKey="groupKey"
+          :rowobj="rowobj"
+          :subCount="subCount"
+          :tableCount="tableCount"
+          :subTableName="subTableName"
+          @addList="addListHandler"
+        >
+        </DialogTemplate>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="btnDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="btnComfirm">确 定</el-button>
+        </span>
+      </el-dialog>
 
-    <!-- 打印弹窗 -->
-    <el-dialog title="打印" :visible.sync="printShow" width="30%">
-      <div ref="detailTable" id="detail"></div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="printShow = false">取 消</el-button>
-        <el-button type="primary" @click="confirmPrint">打 印</el-button>
-      </span>
-    </el-dialog>
+      <!-- 打印弹窗 -->
+      <el-dialog title="打印" :visible.sync="printShow" width="30%">
+        <div ref="detailTable" id="detail"></div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="printShow = false">取 消</el-button>
+          <el-button type="primary" @click="confirmPrint">打 印</el-button>
+        </span>
+      </el-dialog>
 
-    <!-- 消息提示弹窗 -->
-    <el-dialog title="提示" :visible.sync="toastShow" width="30%">
-      <span>
-        <i :class="`el-icon-info ${toastType}`"></i>
-        {{ toastMsg || "暂无提示信息" }}
-      </span>
-      <template #footer>
+      <!-- 消息提示弹窗 -->
+      <el-dialog title="提示" :visible.sync="toastShow" width="30%">
         <span>
-          <el-button type="primary" @click="toastShow = false">确认</el-button>
+          <i :class="`el-icon-info ${toastType}`"></i>
+          {{ toastMsg || "暂无提示信息" }}
         </span>
-      </template>
-    </el-dialog>
+        <template #footer>
+          <span>
+            <el-button type="primary" @click="toastShow = false"
+              >确认</el-button
+            >
+          </span>
+        </template>
+      </el-dialog>
 
-    <div id="printDom"></div>
-  </div>
+      <div id="printDom"></div>
+    </div>
+  </el-card>
 </template>
 <script>
 import {
@@ -383,6 +389,7 @@ export default {
       // 提示信息 start
       toastMsg: "",
       toastShow: false,
+      toastType: "",
       // 提示信息 end
       // 顶部按钮数据
       topBtnArr: [], //顶部按钮数据