BCA/src/views/newTable/index.vue

<template>
  <div class="data-table" :style="{ marginTop: marginTop }">
    <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
      <div class="flex">
        <div :class="dataId ? 'bcTitle': 'manageTitle'">{{ dataTitle }}</div>
        <el-button size="small" :class="dataId ? 'bcButton':''" :disabled="!dataContent.service_id" @click="handleAdd" plain type="primary">新增</el-button>
      </div>
      <template v-if="tableData.length">
        <div style="height:100%">
          <el-table v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
            <el-table-column v-for="(item, index) in tableColsCopy" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip" :formatter="formatter">
              <template #header>
                <el-tooltip :content="item.columnDescribe || item.columnLabel" placement="top">
                  <TableHeaderCell :label="item.columnLabel" :filter-options="tableDataFilters[item.columnName]" :filter-values.sync="filterValues[item.columnName]" :sortable="item.needSort" :sort-rule.sync="tableDataSortRules[item.columnName]" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作" :width="fixedWidth">
              <template slot-scope="scope">
                <div class="hd-td">
                  <!-- <el-button type="text" size="small" class="rmScs">测试</el-button> -->
                  <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
                  <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-else>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </div>
    <div class="data-table-dialog">
      <!--新增/编辑-->
      <Dialog :width="width" :isBody="isBody" :flag="flag">
        <div class="dialog-content">
          <div class="title">{{ tableTitle }}</div>
          <div style="max-height:580px;overflow-y: scroll;" class="contents">
            <el-form ref="ruleForm" :model="form" :label-width="labelWidth">
              <div class="flex-wrap">
                <el-form-item class="flex1 r40" label="算法排序">
                  <el-input size="small" placeholder="请输入算法排序" clearable v-model="form.library_sort"></el-input>
                </el-form-item>
                <el-form-item class="flex1" label="算法名称">
                  <el-input size="small" placeholder="请输入算法名称" clearable v-model="form.library_name"></el-input>
                </el-form-item>
              </div>
              <el-form-item class="flex1" label="前置条件">
                <el-input size="small" type="textarea" rows="3" placeholder="请输入前置条件" clearable v-model="form.is_exec"></el-input>
              </el-form-item>
              <div class="flex-wrap">
                <el-form-item class="flex1 r40" label="参数位置">
                  <el-input size="small" placeholder="请输入参数位置" clearable v-model="form.parmIndex"></el-input>
                </el-form-item>
                <el-form-item class="flex1" label="算法类型">
                  <el-select size="small" v-model="form.library_type" placeholder="请选择算法类型">
                    <el-option label="java" :value="1"></el-option>
                    <el-option label="js脚本" :value="2"></el-option>
                    <el-option label="数据库" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="flex-wrap">
                <el-form-item class="flex1 r40" label="数据源名称">
                  <el-select size="small" v-model="form.datasource_id" clearable placeholder="请选择数据源">
                    <el-option v-for="(item,index) in dataSourceArrs" :key="index" :label="item.dataSourceName" :value="item.dataSourceID"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="flex1" label="目标数据对象">
                  <el-input size="small" placeholder="请输入目标数据对象" clearable v-model="form.sourceObjectName"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="是否动态表">
                <el-radio-group v-model="form.isActiveTable">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="数据表达式">
                <el-input size="small" type="textarea" rows="3" placeholder="请输入数据表达式" clearable v-model="form.computing_expression"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="foot right">
            <el-button size="medium" @click="handleOk" class="r24 bcButton" type="primary">提交</el-button>
            <el-button @click="eledite" size="medium">取消</el-button>
          </div>
        </div>
      </Dialog>
      <Dialog :isBody="isBody" :flag="rmFlag">
        <div class="airportInfoDialog">
          <div class="title del-title">删除</div>
          <div class="content del-content">
            <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
            ？
          </div>
          <div class="foot right Delfoot">
            <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
            <el-button size="medium" @click="rmFlag = false">取消</el-button>
          </div>
        </div>
      </Dialog>
    </div>
  </div>
</template>

<script>
import { setTableFilters } from "@/utils/table";
import Dialog from "@/layout/components/Dialog/index.vue";
import NoData from "@/components/nodata";
import { translateDataToTreeAllTreeMsg } from "@/utils/validate";
import { Query, newData, modifyData, moveData } from "@/api/webApi";
import pf from '@/layout/mixin/publicFunc'
import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
export default {
  name: "DataTable",
  mixins: [pf],
  props: {
    dataContent: {
      type: Object,
      default: () => ({}),
    },
    //弹框宽度
    width: {
      type: String,
      default: "630px",
    },
    //弹框是否显示在body上
    isBody: {
      type: Boolean,
      default: false,
    },
    //弹框表单-行数
    rows: {
      type: Number,
      default: 24,
    },
    //弹框-表单文字宽度
    labelWidth: {
      type: String,
      default: "100px",
    },
    //表格高度
    tableHeight: {
      type: [String, Number],
      default: 0,
    },
    minHeight: {
      type: Number,
      default: 89,
    },
    // 是否显示合计行
    showSummary: {
      type: Boolean,
      default: false,
    },
    marginTop: {
      type: String,
      default: "0px",
    },
    // 不换行，溢出隐藏
    showOverflowTooltip: {
      type: Boolean,
      default: false,
    },
    //操作列宽度
    fixedWidth: {
      type: String,
      default: "180px",
    },
    dataId: {
      type: Number
    },
    dataTitle: {
      type: String,
      default: "",
    },
  },
  components: { Dialog, NoData, TableHeaderCell },
  data () {
    return {
      pageTitle: '',
      asShow: true,
      loading: false,
      flag: false,
      serviceId: null,
      rmFlag: false,
      rowTitle: "",
      page: 0,
      pageSize: 10,
      noMore: false,
      tableCols: [], //表头数据
      tableData: [], //表格数据
      tableColsCopy: [], //表头数据缓存
      tableDataFilters: {}, //表头-下拉数据
      filterValues: {}, //表头-下拉-选中数据
      tableDataCopy: [], //缓存table数据
      tableGroups: [], //表格分组数据
      colShowFilter: "", //表头-下拉-箭头
      spanArr: [], //表格分组数据缓存
      pos: 0, //表格分组计数
      tableTitle: "新增", //弹框标题
      tableType: "add", //弹框类型=新增/编辑
      tableForm: {}, //弹框表单
      rmTitle: "", //弹框-删除-标题
      tableObj: {}, //增/删/改数据缓存
      tableOptions: {}, //弹框-下来数据缓存
      tableArrs: [], //重组table-表头下拉
      proAll: false, //重组时-所有请求是否都完成
      roles: JSON.parse(sessionStorage.getItem("userAuthList")) ?? [],
      tableOptionscp: {},
      tabledatacopy: {},
      queryId: '',
      form: {
        computing_expression: null,
        is_exec: null,
        isActiveTable: null,
        library_name: null,
        library_sort: null,
        library_type: null,
        parmIndex: null,
        sourceObjectName: null,
        datasource_id: null
      },
      datasource_id: 4,
      dataSourceArrs: [],
      tableDataSortRules: {},
    };
  },
  watch: {
    dataContent: {
      handler (val) {
        if (val.service_id) {
          this.queryId = val.service_id
          this.resetTable();
          this.getColumnData(val.service_id)
          // this.getQuery(this.dataId);
        } else {
          this.resetTable();
        }
      },
      deep: true
    }
  },
  computed: {
    dataTableContentStyle () {
      const style = {};
      if (this.minHeight) {
        style["min-height"] = this.minHeight;
      }
      if (this.tableHeight) {
        style["height"] = this.tableHeight;
      }
      return style;
    },
    //设置表头-下拉-箭头样式
    arrowClass () {
      return function (prop) {
        let classString = "";
        if (this.colShowFilter === prop) {
          return "arrow-active";
        }
        if (
          Object.entries(this.tableDataFilters).find(
            ([key, arr]) => this.filterValues[prop]
          )
        ) {
          classString += "arrow-blue";
        }
        return classString;
      };
    },
    //设置新增修改表单类型
    fromDataType () {
      return function (type) {
        if (type) {
          return type.replace(/\([^\)]*\)/g, '')
        }
      }
    },

    //设置表头-下拉-选中数据
    dealedTableData () {
      const filtered = this.tableData.filter(item => {
        let flag = true
        Object.entries(this.filterValues).forEach(([key, arr]) => {
          if (arr.length && !arr.includes(String(item[key]))) {
            flag = false
          }
        })
        return flag
      })
      const sortRules = Object.entries(this.tableDataSortRules).reduce(
        (pre, [key, value]) => {
          if (value) {
            pre[0].push(key)
            value = value === 'ascending' ? 'asc' : 'desc'
            pre[1].push(value)
          }
          return pre
        },
        [[], []]
      )
      return this._.orderBy(filtered, sortRules[0], sortRules[1])
    },
  },
  mounted () {
    this.getDataSourceId(SERVICE_ID.serTableDataId)
  },
  updated () {
    this.$refs["table"]?.doLayout();
  },
  methods: {
    //获取表头数据
    async getColumnData (id) {
      try {
        const { code, returnData } = await this.getQueryList(SERVICE_ID.getTableColumnId, { serviceOutPutId: SERVICE_ID.serTableId });
        if (code == 0) {
          if (returnData && returnData.length) {
            const titleColumn = returnData.find(
              (item) => item.needShow === 1
            );
            if (titleColumn) {
              this.rowTitle = titleColumn.columnName;
            }
            this.tableCols = returnData;
            this.setTableCols();
            this.getQuery(id);
          }
        } else {
          this.$message.error("获取表头数据失败");
        }
      } catch (error) {
        console.log(error)
      }
    },
    eledite () {
      this.flag = false;
      const arrbegin = _.cloneDeep(this.tableOptionscp);
      this.tableOptions = arrbegin;
    },
    setTableCols () {
      this.tableCols.forEach(({ columnName, needFilters, needSort }) => {
        if (needFilters) {
          this.$set(this.tableDataFilters, columnName, [])
          this.$set(this.filterValues, columnName, [])
        }
        if (needSort) {
          this.$set(this.tableDataSortRules, columnName, '')
        }
      })
    },
    load () {
      //
      if (!this.isTree) {
        if (this.noMore || this.loading) {
          return;
        }
        this.getQuery(this.queryId);
      }
    },
    resetTable () {
      this.page = 0;
      this.noMore = false;
      this.tableData = [];
    },
    changeSelect (data, name) {
      if (this.tableForm[data] === "") {
        this.tableForm[data] = null;
      }
      this.tableForm[this.tableOptions[data][0].setvalue] =
        this.tableForm[data];
      const arrbegin = _.cloneDeep(this.tabledatacopy);
      if (this.tableForm.beginNode) {
        this.tableOptions.beginPosition = arrbegin.beginPosition.filter(
          (i) => i.nodeCode === this.tableForm.beginNode
        );
        arrbegin.beginPosition.forEach((element) => {
          if (element.v === this.tableForm.beginPosition) {
            if (element.nodeCode !== this.tableForm.beginNode) {
              this.tableForm.beginPosition = "";
            }
          }
        });
        // let arr = [];
        // this.tableOptions.beginPosition.forEach((element) => {
        //   arr.push(element.nodeCode);
        // });
        // if (
        //   !arr.includes(this.tableForm.beginPosition) &&
        //   this.tableForm.beginNode
        // ) {
        //   this.tableForm.beginPosition = null;
        // }
        this.asShow = false;
        this.asShow = true;
      }
      if (this.tableForm.beginPosition && !this.tableForm.beginNode) {
        arrbegin.beginPosition.forEach((element) => {
          if (this.tableForm.beginPosition === element.v) {
            this.tableForm.beginNode = element.nodeCode;
          }
        });
      }
      if (this.tableForm.endNode) {
        this.tableOptions.endPosition = arrbegin.endPosition.filter(
          (i) => i.nodeCode === this.tableForm.endNode
        );
        arrbegin.endPosition.forEach((element) => {
          if (element.v === this.tableForm.endPosition) {
            if (element.nodeCode !== this.tableForm.endNode) {
              this.tableForm.endPosition = "";
            }
          }
        });
        this.asShow = false;
        this.asShow = true;
      }
      if (this.tableForm.endPosition && !this.tableForm.endNode) {
        arrbegin.endPosition.forEach((element) => {
          if (this.tableForm.endPosition === element.v) {
            this.tableForm.endNode = element.nodeCode;
          }
        });
      }
    },
    inputChangeHandler (data) {
      if (this.tableForm[data] === "") {
        this.tableForm[data] = null;
      }
    },
    //获取表格数据
    async getQuery (id) {
      try {
        this.loading = true;
        const { code, returnData } = await this.getQueryListAuth(this.dataId, { service_id: id }, ++this.page, this.pageSize);
        if (code == 0) {
          if (returnData.length === 0) {
            this.page--;
            this.noMore = true;
            this.loading = false;
          } else {
            this.tableData.push(...returnData);
            // this.tableCols = columnset;
            setTimeout(() => {
              this.initTableData();
              this.loading = false;
            }, 100);
          }
        } else {
          this.page--;
          this.loading = false;
          this.$message.error("获取表格数据失败");
        }
      } catch (error) {
        console.log(error)
        this.page--;
        this.loading = false;
      }
    },
    //表格-增/删/改
    async generalDataReception (event, data) {
      try {
        const params = {
          serviceId: this.dataId,
          dataContent: data,
          event: `${event}`,
        };
        const { code } =
          event == 1
            ? await newData(params)
            : event == 2
              ? await modifyData(params)
              : await moveData(params);
        if (code == 0) {
          this.$message.success("操作成功");
          this.resetTable();
          this.getQuery(this.queryId);
          this.flag = false;
          this.rmFlag = false;
          this.tableObj = {};
          this.form = {};
          // this.$router.go(0);
        } else {
          this.$message.error("操作失败");
          this.flag = false;
          this.rmFlag = false;
          this.tableObj = {};
          this.form = {};
        }
      } catch (error) {
        this.flag = false;
        this.rmFlag = false;
        this.tableObj = {};
        this.form = {};
      }
    },
    // 表格勾选
    toggleRowSelection (row, isSelected) {
      this.$refs["table"].toggleRowSelection(row, isSelected);
    },
    // 表格初始勾选
    selectTableRows (tableData, selectFlagName) {
      tableData.forEach((row) => {
        this.$refs["table"].toggleRowSelection(row, !!row[selectFlagName]);
      });
      this.$emit("selectionAll", this.$refs.table.selection);
    },
    //初始化表格
    initTableData () {
      this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
      this.tableColsCopy = _.orderBy(this.tableColsCopy, ['orderNumber'], ['asc']);
      this.tableDataCopy = _.cloneDeep(this.tableData);
      const datas = _.cloneDeep(this.tableColsCopy);
      // const reqUts = [];
      datas.forEach(async (item) => {
        if (item.needGroup) {
          this.tableGroups.push(item.columnName);
        }
      });
      const dats = this.setTableFilters(this.tableData, this.tableDataFilters)
      this.tableDataFilters = _.cloneDeep(dats)
      // this.selectTableRows(this.tableData, "DeployID");
      this.tableGroup(this.tableData)
      // this.getSelectDataAll(reqUts)
    },
    setTableFilters (tableData, filters) {
      const tempSets = {}
      Object.keys(filters).forEach(key => {
        tempSets[key] = new Set()
      })
      tableData.forEach(item => {
        Object.keys(tempSets).forEach(key => {
          ; (item[key] ?? '') !== '' && tempSets[key].add(String(item[key]))
        })
      })
      Object.keys(tempSets).forEach(key => {
        filters[key] = _.orderBy(
          [...tempSets[key]].map(value => ({
            text: value,
            value,
          })),
          o => o.value
        )
      })
      return filters
    },
    //获取所有获取弹框-下拉数据-请求状态
    getSelectDataAll (reqUts) {
      Promise.all(reqUts)
        .then((res) => {
          this.proAll = true;
        })
        .catch((err) => {
          this.proAll = false;
        });
    },
    //获取弹框-下拉数据
    async getSelectData (id, name) {
      // name ? [name] : name === null ? [null]: [],
      const { code, returnData } = await Query({
        id,
        dataContent: name ? [name] : name === null ? [null] : [],
      });
      if (code == 0) {
        return returnData.listValues;
      } else {
        return [];
      }
    },
    //重组table-显示名称
    setTable () {
      this.tableArrs.forEach((item) => {
        this.tableOptions[item].forEach((p) => {
          this.tableDataCopy.forEach((msg) => {
            if (msg[item] == p.v) {
              msg[item] = p.k;
            }
          });
          this.tableDataFilters[item].forEach((cap) => {
            if (cap.value == p.v) {
              cap.text = p.k;
              cap.value = p.k;
            }
          });
        });
      });
      this.tableData = this.tableDataCopy;
    },
    //分组
    tableGroup (tableData) {
      const spanArr = [];
      let pos = 0;
      let ifYj = this.tableGroups[0];
      for (let i = 0; i < tableData.length; i++) {
        if (i === 0) {
          spanArr.push(1);
        } else {
          if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      this.spanArr = spanArr;
      this.pos = pos;
    },
    popoverShowHandler (prop) {
      this.colShowFilter = prop;
    },
    popoverHideHandler () {
      this.colShowFilter = "";
    },
    formatter (row, column, cellValue, index) {
      const sameColumn = this.tableCols.find(
        col => col.columnName === column.property
      )
      if (sameColumn && this.fromDataType(sameColumn.dataType) === 'datetime') {
        return (cellValue ?? '').replace('T', ' ')
      }
      return cellValue
    },
    //分组
    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (this.tableGroups.includes(column["property"])) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    //合计
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        this.tableColsCopy.forEach((p) => {
          if (column.property == p.columnName && p.needCount) {
            const values = data.map((item) => Number(item[column.property]));
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += "";
            }
          }
        });
      });
      return sums;
    },
    //弹框-确定
    handleOk () {
      this.submitClickHandler();
    },
    //滚动
    tableLoad () { },
    //表格-新增
    handleAdd () {
      this.flag = true;
      this.tableType = "add";
      this.tableTitle = "新增算法配置";
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          this.form[key] = null
        }
      }
    },
    async getDataSourceId (id) {
      const { code, returnData } = await this.getQueryList(id, this.dataContent);
      if (code == 0) {
        this.dataSourceArrs = returnData
      }
    },
    //表格-编辑
    handleEdit (row) {
      this.flag = true;
      this.tableType = "edit";
      this.tableTitle = "编辑算法配置";
      this.form = JSON.parse(JSON.stringify(row));
      this.form.isActiveTable = row.isActiveTable == '1' ? true : false
    },

    successData () {
      this.$message.success("操作成功");
      this.resetTable();
      this.getQuery(this.queryId);
      this.flag = false;
      this.rmFlag = false;
      this.tableObj = {};
      this.form = {};
    },

    // 新增/编辑-确认
    submitClickHandler () {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          this.form = Object.assign(this.form, this.dataContent)
          if (this.tableType == "add") {
            const { code } = await this.getChangeList(this.dataId, this.form, 1)
            if (code == 0) {
              this.successData()
            }
          } else {
            const { code } = await this.getChangeList(this.dataId, this.form, 2, 'library_id')
            if (code == 0) {
              this.successData()
            }
          }
        } else {
          return false;
        }
      });
    },
    //表格-删除
    handleRemove (row) {
      this.rmFlag = true;
      // this.rmTitle = row.className || row.username || row.serviceName || row.queryTemplateName;
      this.rmTitle = row[this.rowTitle];
      this.tableObj = row;
    },
    //表格-删除-确认
    async tableRemove () {
      const { code } = await this.getChangeList(this.dataId, this.tableObj, 3)
      if (code == 0) {
        this.successData()
      }
    },

    // 表格-选中行
    selectHandler (selection, row) {
      this.$emit("selection-change", selection, row);
    },
    // 表格-查询模板预览
    handlePreview (row) {
      this.$emit("preview", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  // background-color: #fff;
  padding: 20px;
  .data-table-content {
    height: 100%;
    .nodata {
      margin-top: 25px;
    }
  }
  .bcButton {
    background: #2f3480;
    border-radius: 4px;
    border-color: #2f3480;
    color: #ffffff;
  }
  .bcButton.is-disabled {
    color: #8cc5ff;
    background-color: #2f3480;
    border-color: #d9ecff;
  }
  .bcTitle {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
  }
  ::v-deep .table {
    width: 100%;
    margin-top: 25px;
    .cell {
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: Helvetica, "Microsoft YaHei";
      letter-spacing: 0;
    }
    .hd-td {
      display: flex;
      justify-content: center;
    }
    .cell-click {
      cursor: pointer;
      color: #2f3480;
      &.cell-clicked {
        color: purple;
      }
    }
    .el-table__header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
        .el-tooltip {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          line-height: 34px;
        }
        > .el-checkbox {
          display: none;
        }
      }
      .has-gutter {
        tr {
          .bgl-huang {
            background: #fcf0b1;
          }
        }
      }
    }
    .el-table__body-wrapper {
      tr.bgl-hui {
        background: #d2d6df;
        td {
          background: #d2d6df;
        }
        &.redBorder {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #e83f82;
          }
        }
      }
    }
    .rmScs {
      width: 48px;
      height: 24px;
      border-color: #b2cbde;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      span {
        color: #2f3480;
      }
    }
    .rmScser {
      width: 60px;
      height: 24px;
      border-color: #9ebbf7;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      span {
        color: #2f3480;
      }
    }
    .rmSc {
      width: 48px;
      height: 24px;
      background: #eb2f3b;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        color: #ffffff;
      }
    }

    .hrefBtn {
      width: 48px;
      height: 24px;
      background: #6f81bc;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        color: #ffffff;
      }
    }
    .tableStatus {
      font-size: 14px;
      .icon {
        width: 14px;
        height: 14px;
        background: #2f3480;
        border-radius: 2px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -2px;
      }
      .status0 {
        position: relative;
        top: 5px;
      }
      .status1 {
        position: relative;
        top: 5px;
        .icon {
          background-color: #afb4bf;
        }
      }
      .status2 {
        position: relative;
        top: 5px;
        .icon {
          background-color: #eb2f3b;
        }
      }
    }
    .el-table__fixed-right {
      thead {
        div {
          color: #101116;
        }
      }
    }
    .hd-td {
      .hd-tr {
        display: flex;
        justify-content: center;
        flex-direction: row;
        padding: 0 8px;
      }
    }
  }
  .data-table-btn {
    margin-top: 13px;
    line-height: 32px;
    margin-bottom: 20px;
  }
}
.filter-arrow {
  cursor: pointer;
  transition: 0.3s transform;
  &.arrow-active {
    transform: rotate(-180deg);
  }
  &.arrow-blue {
    color: #2f3480;
    font-weight: bold;
  }
}
.el-select-dropdown__item.hover {
  background: #d2d6df;
}
.data-table-dialog {
  ::v-deep .dialog-content {
    .title {
      background-color: #2f3480;
    }
    .bcButton {
      background-color: #2f3480;
    }
    .contents {
      padding: 24px;
      .el-form {
        padding-right: 0;
      }
      .el-select {
        width: 100%;
      }
      .r40 {
        margin-right: 60px;
      }
    }
    .datetimes {
      width: 100%;
    }
    .el-form-item__content {
      line-height: 41px;
    }
  }
}
</style>