From fd6649d6c97466af9143aef1dd9ca8182d7c7a56 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Tue, 28 Sep 2021 16:38:31 +0800
Subject: [PATCH] update table

---
 .../AnjiPlus/anji-crud/anji-crud.vue          | 553 ++++++++++++------
 1 file changed, 387 insertions(+), 166 deletions(-)

diff --git a/report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue b/report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue
index 2a07778a..ce1a1a7c 100644
--- a/report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue
+++ b/report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue
@@ -1,34 +1,107 @@
 <template>
   <div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']">
     <div v-if="hasTreeFieldInQueryForm" class="left-container">
-      <AnjiTree ref="queryFormTree" v-model.trim="queryParams[queryFormTreeField.field]" :is-open="queryFormTreeField.anjiTreeOption.isOpen" :enable-filter="queryFormTreeField.anjiTreeOption.enableFilter" :label-name="queryFormTreeField.label" :url="queryFormTreeField.anjiTreeOption.url" @node-click="handleTreeNodeCheck" />
+      <AnjiTree
+        ref="queryFormTree"
+        v-model.trim="queryParams[queryFormTreeField.field]"
+        :is-open="queryFormTreeField.anjiTreeOption.isOpen"
+        :enable-filter="queryFormTreeField.anjiTreeOption.enableFilter"
+        :label-name="queryFormTreeField.label"
+        :url="queryFormTreeField.anjiTreeOption.url"
+        @node-click="handleTreeNodeCheck"
+      />
     </div>
     <div class="right-container">
       <!-- 查询表单开始 -->
-      <el-form ref="formSearch" :model="queryParams" label-width="100px" v-permission="option.buttons.query.permission">
+      <el-form
+        ref="formSearch"
+        :model="queryParams"
+        label-width="100px"
+        v-permission="option.buttons.query.permission"
+      >
         <el-row>
-          <el-col v-for="(item, index) in queryFormFieldExcludeTree" :key="item.field" :span="queryFormFieldSpan(item)">
-            <el-form-item v-if="index <= 2 || (index > 2 && queryParams.showMoreSearch)" :label="item.label" :rules="item.rules" :prop="item.field">
+          <el-col
+            v-for="(item, index) in queryFormFieldExcludeTree"
+            :key="item.field"
+            :span="queryFormFieldSpan(item)"
+          >
+            <el-form-item
+              v-if="index <= 2 || (index > 2 && queryParams.showMoreSearch)"
+              :label="item.label"
+              :rules="item.rules"
+              :prop="item.field"
+            >
               <!-- 输入框 -->
-              <el-input v-if="item.inputType == 'input' || item.inputType == 'input-number'" v-model.trim="queryParams[item.field]" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="item.disabled" @change="(value) => queryFormChange(item.field, value)" />
+              <el-input
+                v-if="
+                  item.inputType == 'input' || item.inputType == 'input-number'
+                "
+                v-model.trim="queryParams[item.field]"
+                :placeholder="item.placeholder || '请输入'"
+                :clearable="item.clearable !== false"
+                :disabled="item.disabled"
+                @change="value => queryFormChange(item.field, value)"
+              />
               <!-- 开关 -->
-              <el-switch v-else-if="item.inputType == 'switch'" v-model.trim="queryParams[item.field]" :disabled="item.disabled" :active-value="item.switchOption.disableValue" :inactive-value="item.switchOption.enableValue" active-color="#5887fb" inactive-color="#ccc" @change="(value) => queryFormChange(item.field, value)" />
+              <el-switch
+                v-else-if="item.inputType == 'switch'"
+                v-model.trim="queryParams[item.field]"
+                :disabled="item.disabled"
+                :active-value="item.switchOption.disableValue"
+                :inactive-value="item.switchOption.enableValue"
+                active-color="#5887fb"
+                inactive-color="#ccc"
+                @change="value => queryFormChange(item.field, value)"
+              />
               <!-- 下拉框 -->
-              <anji-select v-else-if="item.inputType == 'anji-select'" v-model.trim="queryParams[item.field]" :multiple="item.anjiSelectOption.multiple" :dict-code="item.anjiSelectOption.dictCode" :url="item.anjiSelectOption.url" :method="item.anjiSelectOption.method" :query-param="item.anjiSelectOption.queryParam" :option="item.anjiSelectOption.option" :label="item.anjiSelectOption.label" :disabled-options="item.anjiSelectOption.disabledOptions" :disabled="item.disabled"
-                :merge-label="item.anjiSelectOption.mergeLabel" @change="(value) => queryFormChange(item.field, value)" />
+              <anji-select
+                v-else-if="item.inputType == 'anji-select'"
+                v-model.trim="queryParams[item.field]"
+                :multiple="item.anjiSelectOption.multiple"
+                :dict-code="item.anjiSelectOption.dictCode"
+                :url="item.anjiSelectOption.url"
+                :method="item.anjiSelectOption.method"
+                :query-param="item.anjiSelectOption.queryParam"
+                :option="item.anjiSelectOption.option"
+                :label="item.anjiSelectOption.label"
+                :disabled-options="item.anjiSelectOption.disabledOptions"
+                :disabled="item.disabled"
+                :merge-label="item.anjiSelectOption.mergeLabel"
+                @change="value => queryFormChange(item.field, value)"
+              />
               <!-- 日期时间框  -->
-              <el-date-picker v-else-if="item.inputType.indexOf('date') >= 0" v-model="queryParams[item.field]" style="width: 100%" :placeholder="item.placeholder || '请选择'" :type="item.inputType" :clearable="item.clearable !== false" @change="(value) => queryFormChange(item.field, value)" />
+              <el-date-picker
+                v-else-if="item.inputType.indexOf('date') >= 0"
+                v-model="queryParams[item.field]"
+                style="width: 100%"
+                :placeholder="item.placeholder || '请选择'"
+                :type="item.inputType"
+                :clearable="item.clearable !== false"
+                @change="value => queryFormChange(item.field, value)"
+              />
               <!-- 待扩展的表单类型，请自行扩展 -->
-              <el-input v-else placeholder="组件不支持此类型表单请至组件内部自行扩展" disabled />
+              <el-input
+                v-else
+                placeholder="组件不支持此类型表单请至组件内部自行扩展"
+                disabled
+              />
             </el-form-item>
           </el-col>
 
           <el-col :span="6" style="text-align: center">
-            <el-button type="primary" @click="handleQueryForm('query')">查询</el-button>
+            <el-button type="primary" @click="handleQueryForm('query')"
+              >查询</el-button
+            >
             <el-button type="danger" @click="handleResetForm()">重置</el-button>
             <a style="margin-left: 8px" @click="handleToggleMoreSearch">
-              {{ queryParams.showMoreSearch == true ? '收起' : '展开' }}
-              <i :class="queryParams.showMoreSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+              {{ queryParams.showMoreSearch == true ? "收起" : "展开" }}
+              <i
+                :class="
+                  queryParams.showMoreSearch
+                    ? 'el-icon-arrow-up'
+                    : 'el-icon-arrow-down'
+                "
+              />
             </a>
           </el-col>
         </el-row>
@@ -37,17 +110,50 @@
 
       <!-- 批量操作 -->
       <slot name="buttonLeftOnTable" />
-      <el-button v-if="option.buttons.add.isShow == undefined ? true : option.buttons.add.isShow" v-permission="option.buttons.add.permission" type="primary" icon="el-icon-plus" @click="handleOpenEditView('add')">新增</el-button>
-      <el-button v-if="option.buttons.delete.isShow == undefined ? true : option.buttons.delete.isShow" v-permission="option.buttons.delete.permission" :disabled="disableBatchDelete" type="danger" icon="el-icon-delete" @click="handleDeleteBatch()">删除</el-button>
+      <el-button
+        v-if="
+          option.buttons.add.isShow == undefined
+            ? true
+            : option.buttons.add.isShow
+        "
+        v-permission="option.buttons.add.permission"
+        type="primary"
+        icon="el-icon-plus"
+        @click="handleOpenEditView('add')"
+        >新增</el-button
+      >
+      <el-button
+        v-if="
+          option.buttons.delete.isShow == undefined
+            ? true
+            : option.buttons.delete.isShow
+        "
+        v-permission="option.buttons.delete.permission"
+        :disabled="disableBatchDelete"
+        type="danger"
+        icon="el-icon-delete"
+        @click="handleDeleteBatch()"
+        >删除</el-button
+      >
 
       <!-- 表格开始 -->
-      <el-table :data="records" border @selection-change="handleSelectionChange" @sort-change="handleSortChange">
+      <el-table
+        class="anji_curd_table"
+        :data="records"
+        border
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+      >
         <!--多选-->
         <el-table-column fixed type="selection" width="50" align="center" />
         <!--隐藏列-->
         <el-table-column v-if="tableExpandColumns.length > 0" type="expand">
           <template slot-scope="scope">
-            <p v-for="item in tableExpandColumns" :key="item.field" class="table-expand-item">
+            <p
+              v-for="item in tableExpandColumns"
+              :key="item.field"
+              class="table-expand-item"
+            >
               <span class="titel"> {{ item.label }}: </span>
               <span>{{ scope.row[item.field] }}</span>
             </p>
@@ -56,28 +162,65 @@
         <!--序号-->
         <el-table-column label="序号" min-width="50" align="center">
           <template slot-scope="scope">
-            {{ queryParams.pageSize * (queryParams.pageNumber - 1) + scope.$index + 1 }}
+            {{
+              queryParams.pageSize * (queryParams.pageNumber - 1) +
+                scope.$index +
+                1
+            }}
           </template>
         </el-table-column>
 
         <template v-for="item in option.columns">
-          <el-table-column v-if="item.tableHide != true && item.columnType != 'expand'" :key="item.field" :prop="item.field" :label="fieldLabel(item)" :min-width="item.minWidth || 110" :sortable="item.sortable" :show-overflow-tooltip="true" align="center">
+          <el-table-column
+            v-if="item.tableHide != true && item.columnType != 'expand'"
+            :key="item.field"
+            :prop="item.field"
+            :label="fieldLabel(item)"
+            :min-width="item.minWidth || 110"
+            :sortable="item.sortable"
+            :show-overflow-tooltip="true"
+            align="center"
+          >
             <template slot-scope="scope">
               <div v-if="item.columnType == 'imgPreview'">
                 <!-- 图片缩略图-->
-                <el-image style="width: 25%; height: 50%" fit="contain" :src="scope.row[item.field]" :preview-src-list="[scope.row[item.field]]" />
+                <el-image
+                  style="width: 25%; height: 50%"
+                  fit="contain"
+                  :src="scope.row[item.field]"
+                  :preview-src-list="[scope.row[item.field]]"
+                />
               </div>
               <div v-else>
                 <span v-if="item.inputType == 'switch' && !item.colorStyle">
-                  <el-switch v-model.trim="scope.row[item.field]" :active-value="1" :inactive-value="0" active-color="#5887fb" inactive-color="#ccc" @change="switchChange(scope.row, item.switchOption)" />
+                  <el-switch
+                    v-model.trim="scope.row[item.field]"
+                    :active-value="1"
+                    :inactive-value="0"
+                    active-color="#5887fb"
+                    inactive-color="#ccc"
+                    @change="switchChange(scope.row, item.switchOption)"
+                  />
                 </span>
                 <!-- 带单位 -->
-                <span v-else-if="item.inputType == 'anji-input'">{{ fieldValueByAnjiInput(scope.row[item.field], item) }}</span>
+                <span v-else-if="item.inputType == 'anji-input'">{{
+                  fieldValueByAnjiInput(scope.row[item.field], item)
+                }}</span>
                 <!--表格 a 合并 b上-->
-                <span v-else-if="item.mergeColumn">{{ scope.row[item.field] }}({{ scope.row[item.mergeColumn] }})</span>
+                <span v-else-if="item.mergeColumn"
+                  >{{ scope.row[item.field] }}({{
+                    scope.row[item.mergeColumn]
+                  }})</span
+                >
                 <!-- 没有单位 -->
-                <span v-else-if="item.colorStyle" :class="item.colorStyle[scope.row[item.editField]]">{{ fieldValueByRowRenderer(scope.row, item) }}</span>
-                <span v-else>{{ fieldValueByRowRenderer(scope.row, item) }}</span>
+                <span
+                  v-else-if="item.colorStyle"
+                  :class="item.colorStyle[scope.row[item.editField]]"
+                  >{{ fieldValueByRowRenderer(scope.row, item) }}</span
+                >
+                <span v-else>{{
+                  fieldValueByRowRenderer(scope.row, item)
+                }}</span>
                 <!-- 正常展示模式
                 <div v-if="!item.custom">
                   是第一列数据 && 需要高亮字段不为false 高亮并且可以点击
@@ -92,18 +235,76 @@
           </el-table-column>
         </template>
         <!--操作栏-->
-        <el-table-column align="center" fixed="right" label="操作" :width="option.buttons.customButton && option.buttons.customButton.operationWidth ? option.buttons.customButton.operationWidth : 100">
+        <el-table-column
+          align="center"
+          fixed="right"
+          label="操作"
+          :width="
+            option.buttons.customButton &&
+            option.buttons.customButton.operationWidth
+              ? option.buttons.customButton.operationWidth
+              : 100
+          "
+        >
           <template slot-scope="scope">
             <slot name="edit" :msg="scope.row" />
-            <el-button v-if="(option.buttons.query.isShow == undefined ? true : option.buttons.query.isShow) && hasPermission(option.buttons.edit.permission) == false" type="text" size="small" @click="handleOpenEditView('view', scope.row)" v-permission="option.buttons.query.permission" >查看</el-button>
-            <el-button v-if="option.buttons.edit.isShow == undefined ? true : option.buttons.edit.isShow" type="text" size="small" @click="handleOpenEditView('edit', scope.row)" v-permission="option.buttons.edit.permission" >编辑</el-button>
-            <el-button v-if="hasRowCustomButton == false && option.buttons.delete.isShow == undefined ? true : option.buttons.edit.isShow" type="text" size="small" @click="handleDeleteBatch(scope.row)" v-permission="option.buttons.delete.permission" >删除</el-button>
+            <el-button
+              v-if="
+                (option.buttons.query.isShow == undefined
+                  ? true
+                  : option.buttons.query.isShow) &&
+                  hasPermission(option.buttons.edit.permission) == false
+              "
+              type="text"
+              size="small"
+              @click="handleOpenEditView('view', scope.row)"
+              v-permission="option.buttons.query.permission"
+              >查看</el-button
+            >
+            <el-button
+              v-if="
+                option.buttons.edit.isShow == undefined
+                  ? true
+                  : option.buttons.edit.isShow
+              "
+              type="text"
+              size="small"
+              @click="handleOpenEditView('edit', scope.row)"
+              v-permission="option.buttons.edit.permission"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="
+                hasRowCustomButton == false &&
+                option.buttons.delete.isShow == undefined
+                  ? true
+                  : option.buttons.edit.isShow
+              "
+              type="text"
+              size="small"
+              @click="handleDeleteBatch(scope.row)"
+              v-permission="option.buttons.delete.permission"
+              >删除</el-button
+            >
             <el-dropdown v-if="hasRowCustomButton" trigger="click">
-              <span class="el-dropdown-link"> 更多<i class="el-icon-caret-bottom el-icon--right" /> </span>
+              <span class="el-dropdown-link">
+                更多<i class="el-icon-caret-bottom el-icon--right" />
+              </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item class="clearfix">
                   <slot name="rowButton" :msg="scope.row" />
-                  <el-button v-if="option.buttons.delete.isShow == undefined ? true : option.buttons.edit.isShow" type="text" size="small" @click="handleDeleteBatch(scope.row)" v-permission="option.buttons.delete.permission" >删除</el-button>
+                  <el-button
+                    v-if="
+                      option.buttons.delete.isShow == undefined
+                        ? true
+                        : option.buttons.edit.isShow
+                    "
+                    type="text"
+                    size="small"
+                    @click="handleDeleteBatch(scope.row)"
+                    v-permission="option.buttons.delete.permission"
+                    >删除</el-button
+                  >
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -111,7 +312,17 @@
         </el-table-column>
       </el-table>
       <div class="pagination">
-        <el-pagination v-show="total > 0" background :current-page.sync="queryParams.pageNumber" :page-sizes="$pageSizeAll" :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        <el-pagination
+          v-show="total > 0"
+          background
+          :current-page.sync="queryParams.pageNumber"
+          :page-sizes="$pageSizeAll"
+          :page-size="queryParams.pageSize"
+          layout="total, prev, pager, next, jumper, sizes"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
         <div>
           <slot name="tableSelectionBtn" :selection="checkRecords" />
         </div>
@@ -119,7 +330,14 @@
 
       <!-- 表格结束 -->
 
-      <EditDialog ref="edit" :option="option" :model-type="editDialogModelType" :visible="editDialogOpen" :row-data="editDialogRowData" @closeEvent="editDialogClosedEvent">
+      <EditDialog
+        ref="edit"
+        :option="option"
+        :model-type="editDialogModelType"
+        :visible="editDialogOpen"
+        :row-data="editDialogRowData"
+        @closeEvent="editDialogClosedEvent"
+      >
         <template v-slot:customCard>
           <slot name="cardInEditPage" />
         </template>
@@ -132,13 +350,13 @@
   </div>
 </template>
 <script>
-import AnjiTree from '@/components/AnjiPlus/anji-tree.vue'
-import EditDialog from './edit'
-import request from '@/utils/request'
+import AnjiTree from "@/components/AnjiPlus/anji-tree.vue";
+import EditDialog from "./edit";
+import request from "@/utils/request";
 export default {
   components: {
     EditDialog,
-    AnjiTree,
+    AnjiTree
   },
   props: {
     option: {
@@ -153,14 +371,14 @@ export default {
             query: {},
             edit: {},
             delete: {},
-            add: {},
+            add: {}
           },
           // 表格列
           columns: [],
-          queryFormChange: (fileName, val) => {},
-        }
-      },
-    },
+          queryFormChange: (fileName, val) => {}
+        };
+      }
+    }
   },
   data() {
     return {
@@ -169,8 +387,8 @@ export default {
         showMoreSearch: false, // 是否展开更多搜索条件
         pageNumber: 1,
         pageSize: 10,
-        order: '',
-        sort: '',
+        order: "",
+        sort: ""
       },
 
       checkRecords: [], // 表格中当前选中的记录
@@ -180,73 +398,73 @@ export default {
       // 编辑详情弹框
       editDialogOpen: false, // 新建时主动打开编辑弹框
       editDialogRowData: {}, // 编辑时的主键
-      editDialogModelType: 'view', // 编辑 查看
+      editDialogModelType: "view", // 编辑 查看
 
-      hasRowCustomButton: false, // 除了编辑删除外，还有自定义的行按钮
-    }
+      hasRowCustomButton: false // 除了编辑删除外，还有自定义的行按钮
+    };
   },
   computed: {
     // 左侧树形查询条件
     queryFormTreeField() {
       var treeField = this.option.queryFormFields.find(
-        (item) => item['inputType'] == 'anji-tree'
-      )
-      return treeField
+        item => item["inputType"] == "anji-tree"
+      );
+      return treeField;
     },
     // 查询条件里是否有树形控件
     hasTreeFieldInQueryForm() {
-      return this.isNotBlank(this.queryFormTreeField)
+      return this.isNotBlank(this.queryFormTreeField);
     },
     // 不包含树形控件的查询条件
     queryFormFieldExcludeTree() {
       var treeFields = this.option.queryFormFields.filter(
-        (item) => item['inputType'] != 'anji-tree'
-      )
-      return treeFields
+        item => item["inputType"] != "anji-tree"
+      );
+      return treeFields;
     },
     // 主键的列名
     primaryKeyFieldName() {
       var primaryKey = this.option.columns.find(
-        (item) => item['primaryKey'] == true
-      )
+        item => item["primaryKey"] == true
+      );
       if (primaryKey != null) {
-        return primaryKey['field']
+        return primaryKey["field"];
       } else {
-        return null
+        return null;
         console.warn(
-          '在columns中查找primaryKey=true失败，会导致查询详情和删除失败'
-        )
+          "在columns中查找primaryKey=true失败，会导致查询详情和删除失败"
+        );
       }
     },
 
     // 表格中可展开的列
     tableExpandColumns() {
       var expandColumns = this.option.columns.filter(
-        (item) => item['columnType'] == 'expand'
-      )
-      return expandColumns
+        item => item["columnType"] == "expand"
+      );
+      return expandColumns;
     },
 
     // 是否可以批量删除
     disableBatchDelete() {
-      return this.checkRecords.length <= 0
-    },
+      return this.checkRecords.length <= 0;
+    }
   },
   created() {
     // 为查询框中所有input加上默认值
-    this.option.queryFormFields.forEach((item) => {
+    this.option.queryFormFields.forEach(item => {
       // 动态添加属性
-      this.$set(this.queryParams, item.field, item.defaultValue || null)
-    })
+      this.$set(this.queryParams, item.field, item.defaultValue || null);
+    });
     // 查询列表
-    this.handleQueryForm('query')
-    this.queryFormChange()
+    this.handleQueryForm("query");
+    this.queryFormChange();
   },
   mounted() {
-    if (this.$scopedSlots['rowButton'] != null) {
-      this.hasRowCustomButton = true
+    if (this.$scopedSlots["rowButton"] != null) {
+      this.hasRowCustomButton = true;
     } else {
-      this.hasRowCustomButton = false
+      this.hasRowCustomButton = false;
     }
   },
   methods: {
@@ -254,9 +472,9 @@ export default {
       // console.log(item)
 
       if (item.span != null) {
-        return item.span
+        return item.span;
       } else {
-        return 6
+        return 6;
       }
       // let rowLength = this.option.queryFormFields.length;
       // console.log(rowLength, "ss")
@@ -272,169 +490,169 @@ export default {
     },
     // 切换更多搜索条件
     handleToggleMoreSearch() {
-      this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch
+      this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch;
     },
     // 列上排序切换
     handleSortChange(column) {
       // {column: {…}, prop: "orgCode", order: "ascending"}
       if (column == null || column.prop == null) {
-        console.warn('排序字段名prop为空，无法排序')
-        return
+        console.warn("排序字段名prop为空，无法排序");
+        return;
       }
-      var sort = column.prop // 列表查询默认排序列
-      var order = column.order == 'ascending' ? 'ASC' : 'DESC'
-      this.queryParams['sort'] = sort
-      this.queryParams['order'] = order
-      this.handleQueryForm('query')
+      var sort = column.prop; // 列表查询默认排序列
+      var order = column.order == "ascending" ? "ASC" : "DESC";
+      this.queryParams["sort"] = sort;
+      this.queryParams["order"] = order;
+      this.handleQueryForm("query");
     },
     // 查询按钮
     handleQueryForm(from) {
       // 如果是点查询按钮，把树的查询属性去掉
-      if (from == 'query') {
+      if (from == "query") {
         if (this.hasTreeFieldInQueryForm) {
-          delete this.queryParams[this.queryFormTreeField.field]
+          delete this.queryParams[this.queryFormTreeField.field];
         }
       }
       // 如果是点树查询，把查询区里的属性去掉
-      if (from == 'tree') {
+      if (from == "tree") {
         if (this.hasTreeFieldInQueryForm) {
-          var treeVal = this.queryParams[this.queryFormTreeField.field]
+          var treeVal = this.queryParams[this.queryFormTreeField.field];
           this.queryParams = {
             pageNumber: 1,
-            pageSize: 10,
-          }
-          this.queryParams[this.queryFormTreeField.field] = treeVal
+            pageSize: 10
+          };
+          this.queryParams[this.queryFormTreeField.field] = treeVal;
         }
       }
       // 默认的排序
       if (
-        this.isBlank(this.queryParams['order']) &&
+        this.isBlank(this.queryParams["order"]) &&
         this.isNotBlank(this.option.buttons.query.order)
       ) {
-        this.queryParams['sort'] = this.option.buttons.query.sort
-        this.queryParams['order'] = this.option.buttons.query.order
+        this.queryParams["sort"] = this.option.buttons.query.sort;
+        this.queryParams["order"] = this.option.buttons.query.order;
       }
-      this.queryParams.pageNumber = 1
-      this.handleQueryPageList()
+      this.queryParams.pageNumber = 1;
+      this.handleQueryPageList();
     },
     // 列表查询
     async handleQueryPageList() {
-      var params = this.queryParams
+      var params = this.queryParams;
       // 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort')
-      const { data, code } = await this.option.buttons.query.api(params)
-      if (code != '200') return
-      this.records = data.records
-      this.total = data.total
+      const { data, code } = await this.option.buttons.query.api(params);
+      if (code != "200") return;
+      this.records = data.records;
+      this.total = data.total;
     },
     // 重置
     handleResetForm() {
       this.queryParams = {
         pageNumber: 1,
-        pageSize: 10,
-      }
+        pageSize: 10
+      };
       // this.$refs['queryForm'].resetFields()
       // this.records = []
       // this.total = 0
     },
     // 树形查询条件点击回调
     handleTreeNodeCheck() {
-      this.handleQueryForm('tree')
+      this.handleQueryForm("tree");
       // 为新建页面的对应属性值，绑定上对应的默认值
-      var treeFieldName = this.queryFormTreeField['field']
+      var treeFieldName = this.queryFormTreeField["field"];
       for (var i = 0; i < this.option.columns.length; i++) {
-        var item = this.option.columns[i]
+        var item = this.option.columns[i];
         if (
-          item['editField'] == treeFieldName ||
-          item['field'] == treeFieldName
+          item["editField"] == treeFieldName ||
+          item["field"] == treeFieldName
         ) {
           this.$set(
             this.option.columns[i],
-            'defaultValue',
+            "defaultValue",
             this.queryParams[treeFieldName]
-          )
-          break
+          );
+          break;
         }
       }
     },
     // 编辑和查看操作
     handleOpenEditView(modelType, row) {
-      if (modelType == 'view' || modelType == 'edit') {
-        this.editDialogRowData = row
+      if (modelType == "view" || modelType == "edit") {
+        this.editDialogRowData = row;
       }
-      this.editDialogModelType = modelType
-      if (modelType == 'add') {
+      this.editDialogModelType = modelType;
+      if (modelType == "add") {
         // 新增模式，不需要查询数据详情，直接打开
-        this.editDialogOpen = true
+        this.editDialogOpen = true;
       }
       const obj = {
         type: modelType,
-        value: row,
-      }
-      this.$emit('handleCustomValue', obj)
+        value: row
+      };
+      this.$emit("handleCustomValue", obj);
     },
     // 弹框被关闭时的回调事件
     editDialogClosedEvent(value) {
       // 把列表页中弹框打开标记改成已关闭
-      this.editDialogOpen = false
+      this.editDialogOpen = false;
       // 关闭弹出框时，如果有树，刷新下
       if (
         this.hasTreeFieldInQueryForm &&
         this.$refs.queryFormTree != null &&
         !value
       ) {
-        this.$refs.queryFormTree.queryData()
+        this.$refs.queryFormTree.queryData();
       }
-      this.handleQueryPageList()
+      this.handleQueryPageList();
       // 关闭时 清空表单的验证规则
-      this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields()
+      this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields();
     },
     // 批量删除
     handleDeleteBatch(row) {
-      var ids = []
+      var ids = [];
       if (row != null) {
-        ids.push(row[this.primaryKeyFieldName]) // 删除指定的行
+        ids.push(row[this.primaryKeyFieldName]); // 删除指定的行
       } else {
         // 批量删除选中的行
-        ids = this.checkRecords.map((item) => item[this.primaryKeyFieldName])
+        ids = this.checkRecords.map(item => item[this.primaryKeyFieldName]);
       }
-      this.$confirm('删除确认', '确认要删除吗?', {
-        type: 'warning',
-        confirmButtonClass: 'delete_sure',
-        cancelButtonClass: 'el-button--danger is-plain',
+      this.$confirm("删除确认", "确认要删除吗?", {
+        type: "warning",
+        confirmButtonClass: "delete_sure",
+        cancelButtonClass: "el-button--danger is-plain"
       })
         .then(() => {
-          this.option.buttons.delete.api(ids).then((res) => {
+          this.option.buttons.delete.api(ids).then(res => {
             // {code: "200", message: "操作成功", data: true}
-            this.checkRecords = []
+            this.checkRecords = [];
             // 关闭弹出框时，如果有树，刷新下
             if (
               this.hasTreeFieldInQueryForm &&
               this.$refs.queryFormTree != null
             ) {
-              this.$refs.queryFormTree.queryData()
+              this.$refs.queryFormTree.queryData();
             }
-            this.handleQueryPageList()
-          })
-        })
-        .catch((e) => {
-          e
+            this.handleQueryPageList();
+          });
         })
+        .catch(e => {
+          e;
+        });
     },
 
     // 选择项改变时
     handleSelectionChange(val) {
-      this.checkRecords = val
+      this.checkRecords = val;
     },
     // 页码改变
     handleCurrentChange(pageNumber) {
-      this.queryParams.pageNumber = pageNumber
-      this.handleQueryPageList()
+      this.queryParams.pageNumber = pageNumber;
+      this.handleQueryPageList();
     },
     // 每页size改变时
     handleSizeChange(val) {
-      this.queryParams.pageNumber = 1
-      this.queryParams.pageSize = val
-      this.handleQueryPageList()
+      this.queryParams.pageNumber = 1;
+      this.queryParams.pageSize = val;
+      this.handleQueryPageList();
     },
     // table列文件缩略图
     thumbnailUrl(row, field) {
@@ -453,66 +671,66 @@ export default {
     // 带单位的列，需要转换
     fieldLabel(columnConfig) {
       if (columnConfig == null) {
-        return ''
+        return "";
       }
       if (
-        columnConfig.inputType == 'anji-input' &&
+        columnConfig.inputType == "anji-input" &&
         columnConfig.anjiInput != null
       ) {
-        return `${columnConfig.label}(${columnConfig.anjiInput.unit})`
+        return `${columnConfig.label}(${columnConfig.anjiInput.unit})`;
       } else {
-        return columnConfig.label
+        return columnConfig.label;
       }
     },
     // 带单位的输入框
     fieldValueByAnjiInput(value, columnConfig) {
       if (columnConfig == null) {
-        return value
+        return value;
       }
       if (
-        columnConfig.inputType == 'anji-input' &&
+        columnConfig.inputType == "anji-input" &&
         columnConfig.anjiInput != null
       ) {
-        return value / columnConfig.anjiInput.conversion
+        return value / columnConfig.anjiInput.conversion;
       } else {
-        return value
+        return value;
       }
     },
     // 带表格列格式化的值
     fieldValueByRowRenderer(row, columnConfig) {
       if (
         columnConfig == null ||
-        typeof columnConfig.fieldTableRowRenderer != 'function'
+        typeof columnConfig.fieldTableRowRenderer != "function"
       ) {
-        return row[columnConfig.field]
+        return row[columnConfig.field];
       } else {
-        return columnConfig.fieldTableRowRenderer(row)
+        return columnConfig.fieldTableRowRenderer(row);
       }
     },
     // 暴露给外部crud页面，回传saveForm的值
     getMainEntity() {
-      return this.$refs.edit.getSaveForm()
+      return this.$refs.edit.getSaveForm();
     },
     setMainEntity(object) {
-      this.$refs.edit.setSaveForm(object)
+      this.$refs.edit.setSaveForm(object);
     },
     async switchChange(val, api) {
       request({
         url: api.url,
-        method: 'put',
+        method: "put",
         headers: { noPrompt: false },
-        data: [val.id],
-      }).then((response) => {
-        this.handleQueryPageList()
-      })
+        data: [val.id]
+      }).then(response => {
+        this.handleQueryPageList();
+      });
     },
     queryFormChange(fileName, fieldVal) {
-      if (typeof this.option.queryFormChange == 'function') {
-        this.option.queryFormChange(this.queryParams, fileName, fieldVal)
+      if (typeof this.option.queryFormChange == "function") {
+        this.option.queryFormChange(this.queryParams, fileName, fieldVal);
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -579,4 +797,7 @@ export default {
   flex-direction: row;
   justify-content: space-between;
 }
+.anji_curd_table {
+  margin-top: 20px;
+}
 </style>