report/report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue

<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"
      />
    </div>
    <div class="right-container">
      <div class="top_part">
        <!-- 查询表单开始 -->
        <el-form
          v-if="queryFormTreeHide == false"
          ref="formSearch"
          :model="queryParams"
          label-width="100px"
          style="border-bottom: 1px solid #dbdde3; margin-bottom: 10px"
        >
          <div class="screenFlex">
            <div class="searchFormFlex">
              <el-row>
                <template v-for="(item, index) in queryFormFieldExcludeTree">
                  <el-col
                    v-if="index < 3 || queryParams.showMoreSearch"
                    :key="item.field"
                    :span="8"
                  >
                    <el-form-item
                      :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-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"
                        :local-options="item.anjiSelectOption.localOptions"
                        @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"
                        :format="item.format"
                        :value-format="item.valueFormat"
                        :clearable="item.clearable !== false"
                        @change="value => queryFormChange(item.field, value)"
                      />
                      <anji-cascader
                        v-else-if="item.inputType == 'anji-cascader'"
                        v-model.trim="queryParams[item.field]"
                        :disabled="item.disabled"
                        :single-display="item.anjiCascader.singleDisplay"
                        :url="item.anjiCascader.url"
                        @change="
                          value => queryFormChange(item.field, value, null)
                        "
                      />
                      <!-- 待扩展的表单类型，请自行扩展 -->
                      <el-input
                        v-else
                        placeholder="组件不支持此类型表单请至组件内部自行扩展"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </div>

            <div class="screenButtons">
              <el-button
                v-if="queryFormFieldExcludeTree.length > 3"
                class="button"
                size="mini"
                plain
                @click="handleToggleMoreSearch"
              >
                <i
                  :class="
                    queryParams.showMoreSearch
                      ? 'el-icon-arrow-up'
                      : 'el-icon-arrow-down'
                  "
                />
                {{ queryParams.showMoreSearch == true ? "展开" : "收起" }}
              </el-button>
              <el-button
                class="button"
                size="mini"
                plain
                @click="handleResetForm()"
                >重置</el-button
              >
              <el-button
                class="button"
                size="mini"
                type="primary"
                @click="handleQueryForm('query')"
                >查询</el-button
              >
            </div>
          </div>
        </el-form>
        <!-- 查询表单结束 -->
        <!-- 批量操作 -->
        <div style="padding-bottom: 8px">
          <slot name="buttonLeftOnTable" :selection="checkRecords" />
          <el-button
            v-if="
              option.buttons.add.isShow == undefined
                ? true
                : option.buttons.add.isShow
            "
            v-permission="option.buttons.add.permission"
            class="button"
            plain
            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"
            class="button"
            plain
            :disabled="disableBatchDelete"
            type="danger"
            icon="el-icon-delete"
            @click="handleDeleteBatch()"
            >删除</el-button
          >
          <slot name="buttonRightOnTable" :selection="checkRecords" />
        </div>
      </div>

      <!-- 表格开始 -->
      <div class="main_part">
        <div class="page_main">
          <el-table
            ref="tables"
            class="elTable"
            align="center"
            :data="records"
            :row-class-name="tableRowClassName"
            border
            @selection-change="handleSelectionChange"
            @sort-change="handleSortChange"
            @row-dblclick="handleSelectionDblclick"
            @row-contextmenu="rowContextMenu"
          >
            <!--多选-->
            <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"
                >
                  <span class="titel"> {{ item.label }}: </span>
                  <span>{{ scope.row[item.field] }}</span>
                </p>
              </template>
            </el-table-column>
            <!--序号-->
            <el-table-column label="序号" min-width="50" align="center">
              <template slot-scope="scope">
                {{
                  queryParams.pageSize * (queryParams.pageNumber - 1) +
                    scope.$index +
                    1
                }}
              </template>
            </el-table-column>

            <template v-for="(item, index) in option.columns">
              <el-table-column
                v-if="item.tableHide != true && item.columnType != 'expand'"
                :key="index"
                :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]]"
                    />
                  </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)"
                      />
                    </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.colorStyle"
                      :class="item.colorStyle[scope.row[item.editField]]"
                      >{{ fieldValueByRowRenderer(scope.row, item) }}</span
                    >
                    <span v-else>{{
                      fieldValueByRowRenderer(scope.row, item)
                    }}</span>
                  </div>
                </template>
              </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
              "
            >
              <template slot-scope="scope">
                <slot name="rowButton" :msg="scope.row" />
                <el-button
                  v-if="
                    option.buttons.edit.isShow == undefined
                      ? true
                      : option.buttons.edit.isShow
                  "
                  type="text"
                  size="small"
                  @click="handleOpenEditView('edit', scope.row)"
                  >编辑</el-button
                >
                <el-button
                  v-if="
                    hasCustomButtonInRowMore == false &&
                    option.buttons.delete.isShow == undefined
                      ? true
                      : option.buttons.edit.isShow
                  "
                  type="text"
                  size="small"
                  @click="handleDeleteBatch(scope.row)"
                  >删除</el-button
                >
                <el-dropdown v-if="hasCustomButtonInRowMore" trigger="click">
                  <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="rowButtonInMore" :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)"
                        >删除</el-button
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div class="page_bottom">
            <div class="pagination">
              <div>
                <slot name="tableSelectionBtn" :selection="checkRecords" />
              </div>
              <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>
          </div>
        </div>
      </div>
      <!-- 表格结束 -->
      <EditDialog
        ref="edit"
        :submit-detail-data="option.submitDetailData"
        :handle-detail-data="option.handleDetailData"
        :option="option"
        :model-type="editDialogModelType"
        :visible="editDialogOpen"
        :row-data="editDialogRowData"
        @closeEvent="editDialogClosedEvent"
      >
        <template v-slot:customCard>
          <slot name="cardInEditPage" />
        </template>
        <template slot="editBtn" slot-scope="scope">
          <slot name="editBtnPage" :rowData="scope" />
        </template>
      </EditDialog>
    </div>
    <slot name="pageSection" />
    <!-- 右键菜单 -->
    <anji-contextMenu
      :visible.sync="isShowRowContextMenu"
      :style-obj="contextMenuConfigStyle"
    >
      <div
        v-for="(item, index) in option.contextMenu"
        :key="index"
        class="contextMenu"
      >
        <el-button
          type="text"
          :disabled="item.disabled"
          class="contextMenuItem"
          @click="handleContextMenuItem(item)"
          >{{ item.label }}</el-button
        >
      </div>
    </anji-contextMenu>
  </div>
</template>
<script>
import AnjiTree from "@/components/AnjiPlus/anji-tree.vue";
import EditDialog from "./edit";
import request from "@/utils/request";
import anjiContextMenu from "@/components/AnjiPlus/anji-contextMenu";
export default {
  components: {
    EditDialog,
    AnjiTree,
    anjiContextMenu
  },
  props: {
    option: {
      require: true,
      type: Object,
      default: () => {
        return {
          formHeight: this.$refs.formSearch.$el.offsetHeight,
          // 详情页中输入框左边文字宽度
          labelWidth: "120px",
          // 查询区隐藏
          queryFormHide: false,
          // 查询表单条件
          queryFormFields: [],
          // 按钮
          buttons: {
            query: {},
            edit: {},
            delete: {},
            add: {}
          },
          // 表格列
          columns: [],
          queryFormChange: (fileName, val) => {}
        };
      }
    }
  },
  data() {
    return {
      // 查询表单提交的值
      queryParams: {
        showMoreSearch: false, // 是否展开更多搜索条件
        pageNumber: 1,
        pageSize: 10,
        order: "",
        sort: ""
      },

      checkRecords: [], // 表格中当前选中的记录
      records: [], // 接口返回的记录列表
      total: 0, // 接口返回的总条数

      // 编辑详情弹框
      editDialogOpen: false, // 新建时主动打开编辑弹框
      editDialogRowData: {}, // 编辑时的主键
      editDialogModelType: "view", // 编辑 查看

      hasCustomButtonInRowMore: false, // 除了编辑删除外，还有自定义的行按钮

      isShowRowContextMenu: false,
      contextMenuConfigStyle: {},
      contextMenuRow: {}
    };
  },

  computed: {
    // 查询区隐藏
    queryFormTreeHide() {
      const flag =
        this.option.queryFormHide != null && this.option.queryFormHide == true;
      return flag;
    },
    // 左侧树形查询条件
    queryFormTreeField() {
      const treeField = this.option.queryFormFields.find(
        item => item["inputType"] == "anji-tree"
      );
      return treeField;
    },
    // 查询条件里是否有树形控件
    hasTreeFieldInQueryForm() {
      return this.isNotBlank(this.queryFormTreeField);
    },
    // 不包含树形控件的查询条件
    queryFormFieldExcludeTree() {
      let treeFields = this.option.queryFormFields.filter(
        item => item["inputType"] != "anji-tree"
      );
      return treeFields;
    },
    // 主键的列名
    primaryKeyFieldName() {
      let primaryKey = this.option.columns.find(
        item => item["primaryKey"] == true
      );
      if (primaryKey != null) {
        return primaryKey["field"];
      } else {
        return null;
      }
    },

    // 表格中可展开的列
    tableExpandColumns() {
      let expandColumns = this.option.columns.filter(
        item => item["columnType"] == "expand"
      );
      return expandColumns;
    },

    // 是否可以批量删除
    disableBatchDelete() {
      return this.checkRecords.length <= 0;
    }
  },
  created() {
    // 为查询框中所有input加上默认值
    this.option.queryFormFields.forEach(item => {
      // 动态添加属性
      this.$set(this.queryParams, item.field, item.defaultValue || null);
    });
    // 查询列表
    if (this.option.skipQuery || this.option.skipQuery == undefined) {
      this.handleQueryForm("query");
    }
    this.queryFormChange();
  },
  mounted() {
    if (this.$scopedSlots["rowButtonInMore"] != null) {
      this.hasCustomButtonInRowMore = true;
    } else {
      this.hasCustomButtonInRowMore = false;
    }
    console.log(`是否有自定义行按钮: ${this.hasCustomButtonInRowMore}`);
  },
  methods: {
    queryFormFieldSpan(item) {
      if (item.span != null) {
        return item.span;
      } else {
        return 6;
      }
    },
    // 切换更多搜索条件
    handleToggleMoreSearch() {
      this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch;
    },
    // 列上排序切换
    handleSortChange(column) {
      // {column: {…}, prop: "orgCode", order: "ascending"}
      if (column == null || column.prop == null) {
        console.warn("排序字段名prop为空，无法排序");
        return;
      }
      let sort = column.prop; // 列表查询默认排序列
      let order = column.order == "ascending" ? "ASC" : "DESC";
      this.queryParams["sort"] = sort;
      this.queryParams["order"] = order;
      this.handleQueryForm("query");
    },
    // 查询按钮
    handleQueryForm(from) {
      // 如果是点查询按钮，把树的查询属性去掉
      if (from == "query") {
        if (this.hasTreeFieldInQueryForm) {
          delete this.queryParams[this.queryFormTreeField.field];
        }
      }
      // 如果是点树查询，把查询区里的属性去掉
      if (from == "tree") {
        if (this.hasTreeFieldInQueryForm) {
          let treeVal = this.queryParams[this.queryFormTreeField.field];
          this.queryParams = {
            pageNumber: 1,
            pageSize: 10
          };
          this.queryParams[this.queryFormTreeField.field] = treeVal;
        }
      }
      // 默认的排序
      if (
        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.pageNumber = 1;

      // 添加一些其他的查询参数
      if (this.option.buttons.query.params) {
        const params = this.option.buttons.query.params;
        for (const key in params) {
          this.queryParams[key] = params[key];
        }
      }

      this.handleQueryPageList();
    },
    // 外部追加参数进来
    handleAddQueryParams(k, v) {
      this.queryParams[k] = v;
    },
    // 列表查询
    async handleQueryPageList() {
      // 将特殊参数值urlcode处理
      let 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;
    },
    // 重置
    handleResetForm() {
      const showMoreSearch = this.queryParams.showMoreSearch;
      this.queryParams = {
        order: "",
        sort: "",
        pageNumber: 1,
        pageSize: 10,
        showMoreSearch
      };

      // 查询条件表单只读模式下不重置默认值
      const queryFormFieldsOption = this.option.queryFormFields;
      queryFormFieldsOption.forEach(el => {
        if (el.disabled) {
          this.queryParams[el.field] = el.defaultValue;
        }
      });
    },
    // 树形查询条件点击回调
    handleTreeNodeCheck() {
      this.handleQueryForm("tree");
      // 为新建页面的对应属性值，绑定上对应的默认值
      let treeFieldName = this.queryFormTreeField["field"];
      for (let i = 0; i < this.option.columns.length; i++) {
        let item = this.option.columns[i];
        if (
          item["editField"] == treeFieldName ||
          item["field"] == treeFieldName
        ) {
          this.$set(
            this.option.columns[i],
            "defaultValue",
            this.queryParams[treeFieldName]
          );
          break;
        }
      }
    },
    // 编辑和查看操作
    handleOpenEditView(modelType, row) {
      if (modelType == "view" || modelType == "edit") {
        this.editDialogRowData = row;
      }
      this.editDialogModelType = modelType;
      if (modelType == "add") {
        // 新增模式，不需要查询数据详情，直接打开
        this.editDialogOpen = true;
      }
      const obj = {
        type: modelType,
        value: row
      };
      this.$emit("handleCustomValue", obj);
    },
    // 弹框被关闭时的回调事件
    editDialogClosedEvent(value) {
      // 把列表页中弹框打开标记改成已关闭
      this.editDialogOpen = false;
      // 关闭弹出框时，如果有树，刷新下
      if (
        this.hasTreeFieldInQueryForm &&
        this.$refs.queryFormTree != null &&
        !value
      ) {
        this.$refs.queryFormTree.queryData();
      }
      this.$emit("handleCustomClose");
      this.handleQueryPageList();
      // 关闭时 清空表单的验证规则
      this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields();
    },
    // 批量删除
    handleDeleteBatch(row) {
      let ids = [];
      if (row != null) {
        ids.push(row[this.primaryKeyFieldName]); // 删除指定的行
      } else {
        // 批量删除选中的行
        ids = this.checkRecords.map(item => item[this.primaryKeyFieldName]);
      }
      this.$confirm("删除确认", "确认要删除吗?", {
        type: "warning",
        confirmButtonClass: "delete_sure",
        cancelButtonClass: "el-button--danger is-plain"
      })
        .then(() => {
          this.option.buttons.delete.api(ids).then(res => {
            // {code: "200", message: "操作成功", data: true}
            this.checkRecords = [];
            // 关闭弹出框时，如果有树，刷新下
            if (
              this.hasTreeFieldInQueryForm &&
              this.$refs.queryFormTree != null
            ) {
              this.$refs.queryFormTree.queryData();
            }
            this.handleQueryPageList();
          });
        })
        .catch(e => {
          e;
        });
    },

    // 选择项改变时
    handleSelectionChange(val) {
      if (val.length > 0) {
        val.forEach(el => {
          this.records.forEach(ev => {
            if (el.id == ev.id) {
              ev.dblClickFlag = true;
              ev.bgColor = true;
            }
          });
        });
      } else {
        this.records.forEach(ev => {
          ev.dblClickFlag = false;
          ev.bgColor = false;
        });
      }
      this.isShowRowContextMenu = false;
      this.checkRecords = val;
    },
    // 双击
    handleSelectionDblclick(row) {
      row.dblClickFlag = !row.dblClickFlag;
      row.bgColor = row.dblClickFlag;
      this.$refs.tables.toggleRowSelection(row, row.dblClickFlag);
    },
    // 右键
    rowContextMenu(row, column, event) {
      event.preventDefault();
      this.option.contextMenu.forEach(el => {
        if (el.flag == "all") {
          el.disabled = !(this.checkRecords.length > 1);
        } else {
          el.disabled = this.checkRecords.length > 1;
        }
      });

      // 设置右键位置
      this.contextMenuConfigStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px",
        display: "block"
      };
      // 获取当前右键行数据
      this.contextMenuRow = row;
      // 获取我们自定义的右键菜单
      this.isShowRowContextMenu = true;
    },
    handleContextMenuItem(item) {
      if (item.flag == "all") {
        item.click({ selection: this.checkRecords });
      } else {
        item.click({ msg: this.contextMenuRow });
      }
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.queryParams.pageNumber = pageNumber;
      this.handleQueryPageList();
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = val;
      this.handleQueryPageList();
    },
    // 带单位的列，需要转换
    fieldLabel(columnConfig) {
      let objUnitText = "";
      const localStorageUnit = this.getSettingByName("unit_conversion");
      const objUnit = {};
      for (const key in localStorageUnit) {
        columnConfig.anjiInput &&
          key
            .toLowerCase()
            .indexOf(columnConfig.anjiInput.unit.toLowerCase()) != -1 &&
          (objUnit[key] = localStorageUnit[key]);
      }
      for (const key in objUnit) {
        key.toLowerCase().indexOf("text") != -1 && (objUnitText = objUnit[key]);
      }
      if (columnConfig == null) {
        return "";
      }
      if (
        columnConfig.inputType == "anji-input" &&
        columnConfig.anjiInput != null
      ) {
        return columnConfig.anjiInput["defaultUnit"] == undefined
          ? `${columnConfig.label}(${objUnitText})`
          : `${columnConfig.label}(${columnConfig.anjiInput["defaultUnit"]})`;
      } else {
        return columnConfig.label;
      }
    },
    // 带单位的输入框
    fieldValueByAnjiInput(value, columnConfig) {
      console.log(1);
      const localStorageUnit = this.getSettingByName("unit_conversion");
      let objUnitConversion = "";
      let objUnitKeepPoint = "";
      let objUnitConversionRadioGroup = [];
      const objUnit = {};
      for (const key in localStorageUnit) {
        columnConfig.anjiInput &&
          key
            .toLowerCase()
            .indexOf(columnConfig.anjiInput.unit.toLowerCase()) != -1 &&
          (objUnit[key] = localStorageUnit[key]);
      }
      for (const key in objUnit) {
        key.toLowerCase().indexOf("conversion") != -1 &&
          key.toLowerCase().indexOf("conversiontext") == -1 &&
          key.toLowerCase().indexOf("conversionradiogroup") == -1 &&
          (objUnitConversion = objUnit[key]);
        key.toLowerCase().indexOf("keeppoint") != -1 &&
          (objUnitKeepPoint = objUnit[key]);
        Array.isArray(objUnit[key]) &&
          (objUnitConversionRadioGroup = objUnit[key]);
      }

      if (columnConfig == null) {
        return value;
      }
      if (
        columnConfig.inputType == "anji-input" &&
        columnConfig.anjiInput != null
      ) {
        if (columnConfig.anjiInput["defaultUnit"] == undefined) {
          // 不存在
          return (value / objUnitConversion).toFixed(objUnitKeepPoint || 2);
        } else {
          const coversion = objUnitConversionRadioGroup.find(
            item => item.label == columnConfig.anjiInput["defaultUnit"]
          )["value"];
          return (value / coversion).toFixed(objUnitKeepPoint || 2);
        }
      } else {
        return value;
      }
    },
    // 带表格列格式化的值
    fieldValueByRowRenderer(row, columnConfig) {
      if (
        columnConfig == null ||
        typeof columnConfig.fieldTableRowRenderer != "function"
      ) {
        return row[columnConfig.field];
      } else {
        return columnConfig.fieldTableRowRenderer(row);
      }
    },
    // 暴露给外部crud页面，回传saveForm的值
    getMainEntity() {
      return this.$refs.edit.getSaveForm();
    },
    setMainEntity(object) {
      this.$refs.edit.setSaveForm(object);
    },
    async switchChange(val, api) {
      request({
        url: api.url,
        method: "put",
        headers: { noPrompt: false },
        data: [val.id]
      }).then(response => {
        this.handleQueryPageList();
      });
    },
    queryFormChange(fileName, fieldVal) {
      if (typeof this.option.queryFormChange == "function") {
        this.option.queryFormChange(this.queryParams, fileName, fieldVal);
      }
    },
    // 给表格某行改变颜色
    tableRowClassName({ row, rowIndex }) {
      if ((row.urgentFlag || row.tableRow) && !row.bgColor) {
        return "warning-row";
      } else if ((row.urgentFlag || row.tableRow) && row.bgColor) {
        return "warning-row bgColor";
      } else if ((!row.urgentFlag || !row.tableRow) && row.bgColor) {
        return "bgColor";
      }
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
    }
  }
};
</script>

<style scoped lang="scss">
.right-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  .main_part {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    border-radius: 4px;
    padding: 12px 20px 12px;
    margin-top: 4px;
    height: 100%;
    position: relative;
  }
}
/deep/.button {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-table .cell {
  text-align: center;
}
/deep/.elTable {
  margin: 10px 0 50px;
}
.el-table {
  // 看这里！！！
  // 深度选择器，去除默认的padding
  /deep/ th {
    padding: 0;
    height: 36px;
  }
  /deep/ td {
    padding: 0;
    height: 36px;
  }
}
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f9fbfd;
}
.screenFlex {
  display: flex;
}
.searchFormFlex {
  flex: 1;
}
.screenButtons {
  padding-left: 20px;
}
.style-btn {
  pointer-events: none;
}
.page-container {
  height: 100%;
  position: relative;
  .left-container {
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 4px 0px 0px 4px;
    padding: 20px 20px 0;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
  }
  .right-container {
    width: calc(80% - 5px);
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    border-radius: 0px 4px 4px 0px;
    padding: 20px 20px 0;
    height: 100%;
  }
}
.el-table .cell,
.el-table td div {
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-dropdown {
  font-size: 12px;
  display: inline;
  color: #5887fb;
  cursor: pointer;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
  min-width: 80px;
  max-width: 110px;
  float: right;
  .el-button--text {
    float: right;
  }
  &:hover {
    background: none !important;
  }
  /deep/.el-button--text:hover,
  .el-button--text:focus {
    color: #799ffc !important;
    background-color: #ecf5ff !important;
    border-color: transparent;
  }
  .el-button--mini {
    float: right;
  }
  .el-button--text:hover,
  .el-button--text:focus {
    color: #799ffc;
    border-color: transparent;
    // background-color: transparent;
    // background: red !important;
  }
  .el-button + .el-button {
    margin-left: 0 !important;
    float: right;
  }
}
/deep/.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  margin: 0 5px;
  border-radius: 2px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5887fb;
  color: #ffffff;
  border-radius: 4px;
}
.page_bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 14px;
  margin-right: 20px;
}
.el-table /deep/ .warning-row {
  color: red !important;
}
.el-table /deep/ .bgColor {
  background: #d9ecff;
}
/deep/.edit_button {
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  margin-right: 5px;
  /deep/ i {
    font-size: 30px;
  }
}
.el-form-item--mini.el-form-item {
  margin-bottom: 12px;
}
.el-table /deep/ .success-row {
  background: #f9fbfd !important;
}

.contextMenu {
  width: 100px;
  .contextMenuItem {
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
  }
  &:hover {
    background: #f9fbfd;
  }
}
</style>