CABaggageData2.0/src/components/Table/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="isStatus || isStatuser ? 'flex' : 'flex-end'"
        class="data-table-btn"
      >
        <div v-if="isStatus || isStatuser" class="vStatus">
          <slot name="header" />
        </div>
        <template v-if="isBtn">
          <template v-if="isAuth">
            <el-button
              v-if="btnAuthAdd"
              size="small"
              @click="handleAdd"
              plain
              type="primary"
              >新增</el-button
            >
          </template>
          <template v-else>
            <el-button size="small" @click="handleAdd" plain type="primary"
              >新增</el-button
            >
          </template>
        </template>
      </div>
      <template v-if="tableData.length">
        <div>
          <el-table
            v-el-table-infinite-scroll="load"
            :data="filteredTableData"
            :summary-method="getSummaries"
            :span-method="tableSpanMethod"
            :tree-props="treeProps"
            :row-key="rowKeyTree"
            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-if="selectionEnable"
              type="selection"
              width="35"
            />
            <el-table-column v-if="isStatus" width="55">
              <template slot-scope="scope">
                <div class="tableStatus">
                  <div
                    v-if="filteredTableData[scope.$index].nodeState == '运行'"
                    class="status0"
                  >
                    <span class="icon"></span>
                  </div>
                  <div
                    v-else-if="
                      filteredTableData[scope.$index].nodeState == '停止'
                    "
                    class="status1"
                  >
                    <span class="icon"></span>
                  </div>
                  <div v-else class="status2"><span class="icon"></span></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in tableColsCopy"
              :sortable="item.needSort ? true : false"
              :key="index"
              :prop="item.columnName"
              :label="item.columnLabel"
              :show-overflow-tooltip="showOverflowTooltip"
            >
              <template #header>
                <span class="colTips">
                  <el-tooltip :content="item.columnDescribe" placement="top">
                    <span>{{ item.columnLabel }}</span>
                  </el-tooltip>
                </span>
                <span v-if="item.needFilters">
                  <el-popover
                    placement="bottom"
                    trigger="click"
                    @show="popoverShowHandler(item.columnName)"
                    @hide="popoverHideHandler"
                  >
                    <i
                      slot="reference"
                      :class="[
                        'filter-arrow',
                        'el-icon-arrow-down',
                        arrowClass(item.columnName),
                      ]"
                    />
                    <el-form>
                      <el-form-item :label="item.columnLabel">
                        <el-select
                          v-model="filterValues[item.columnName]"
                          size="small"
                          placeholder="筛选"
                          default-first-option
                          filterable
                          clearable
                        >
                          <el-option
                            v-for="(option, optionIndex) in tableDataFilters[
                              item.columnName
                            ]"
                            :key="option.value + optionIndex"
                            :value="option.value"
                            :label="option.text"
                          />
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </el-popover>
                </span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" :width="fixedWidth">
              <template slot-scope="scope">
                <div class="hd-td">
                  <div class="hd-tr">
                    <template v-if="isStatus">
                      <el-button
                        type="text"
                        @click="handleLook(scope.row)"
                        size="small"
                        class="rmScs"
                        >查看</el-button
                      >
                      <template
                        v-if="
                          scope.row.serviceTypeCode == 2 ||
                          scope.row.serviceTypeCode == 4
                        "
                      >
                        <el-button
                          type="text"
                          v-if="scope.row.nodeState == '停止'"
                          @click="stateChangeHandler(scope.row)"
                          size="small"
                          class="rmScs"
                          >启动</el-button
                        >
                        <el-button
                          type="text"
                          v-if="scope.row.nodeState == '运行'"
                          @click="stateChangeHandler(scope.row)"
                          size="small"
                          class="rmScs"
                          >停止</el-button
                        >
                      </template>
                    </template>
                    <!-- <el-button class="hrefBtn" type="text" @click="handleHerf(scope.row)" size="small">跳转</el-button> -->
                    <template v-if="isAuth">
                      <el-button
                        v-if="btnAuthEdit"
                        type="text"
                        @click="handleEdit(scope.row)"
                        size="small"
                        class="rmScs"
                        >编辑</el-button
                      >
                    </template>
                    <template v-else>
                      <el-button
                        type="text"
                        @click="handleEdit(scope.row)"
                        size="small"
                        class="rmScs"
                        >编辑</el-button
                      >
                    </template>
                    <template v-if="isAuth">
                      <el-button
                        v-if="btnAuthDel"
                        class="rmSc"
                        type="text"
                        @click="handleRemove(scope.row)"
                        size="small"
                        >删除</el-button
                      >
                    </template>
                    <template v-else>
                      <el-button
                        class="rmSc"
                        type="text"
                        @click="handleRemove(scope.row)"
                        size="small"
                        >删除</el-button
                      >
                    </template>
                    <el-button
                      class="rmScs"
                      v-if="withColumnSet"
                      type="text"
                      size="small"
                      @click="handleColumnSet(scope.row)"
                      >列设置</el-button
                    >
                    <el-button
                      class="rmScs"
                      v-if="withItemSet"
                      type="text"
                      size="small"
                      @click="handleItemSet(scope.row)"
                      >数据项</el-button
                    >
                    <template v-if="withlodSet">
                      <template v-if="isAuth">
                        <el-button
                          class="rmScser"
                          v-if="btnAuthWithlodSet"
                          type="text"
                          size="small"
                          @click="handlelodSet(scope.row)"
                          >航站设置</el-button
                        >
                      </template>
                      <template v-else>
                        <el-button
                          class="rmScser"
                          type="text"
                          size="small"
                          @click="handlelodSet(scope.row)"
                          >航站设置</el-button
                        >
                      </template>
                    </template>
                    <template v-if="withnodeSet">
                      <template v-if="isAuth">
                        <el-button
                          v-if="btnAuthWithnodeSet"
                          class="rmScser"
                          type="text"
                          size="small"
                          @click="handlenodeSet(scope.row)"
                          >位置设置</el-button
                        >
                      </template>
                      <template v-else>
                        <el-button
                          class="rmScser"
                          type="text"
                          size="small"
                          @click="handlenodeSet(scope.row)"
                          >位置设置</el-button
                        >
                      </template>
                    </template>
                    <el-button
                      v-if="withPreview"
                      type="text"
                      size="small"
                      class="rmScs"
                      @click="handlePreview(scope.row)"
                      >预览</el-button
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <p v-if="noMore" style="text-align: center">没有更多了</p> -->
        </div>
      </template>
      <template v-else>
        <NoData image-width="auto" image-height="100%" />
      </template>
    </div>
    <div class="data-table-dialog">
      <!--新增/编辑-->
      <Dialog :width="width" :isBody="isBody" :flag="flag">
        <div class="dialog-content">
          <div class="title">{{ tableTitle }}</div>
          <div class="contents">
            <el-form
              ref="ruleForm"
              :model="tableForm"
              :label-width="labelWidth"
            >
              <el-row :gutter="20">
                <el-col
                  v-for="(item, index) in tableColsCopy"
                  :key="index"
                  :span="rows"
                >
                  <el-form-item :label="item.columnLabel">
                    <template
                      v-if="
                        item.listqueryTemplateID ||
                        item.listqueryTemplateID == 0
                      "
                    >
                      <el-select
                        v-if="asShow"
                        class="input-shadow"
                        size="small"
                        filterable
                        default-first-option
                        style="width: 100%"
                        v-model="tableForm[item.columnName]"
                        @change="changeSelect(item.columnName, item)"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in tableOptions[item.columnName]"
                          :key="item.v ? item.v : item.planDepartureApt"
                          :label="item.k ? item.k : item.planDepartureApt"
                          :value="
                            item.setlabel === 'positionDescribe'
                              ? item.v
                              : item.v != undefined
                              ? item.v
                              : item.planDepartureApt
                          "
                        >
                        </el-option>
                      </el-select>
                    </template>
                    <template v-else-if="item.dataType == 'longtext'">
                      <el-input
                        size="small"
                        :rows="1"
                        type="textarea"
                        @change="inputChangeHandler(item.columnName)"
                        v-model="tableForm[item.columnName]"
                      ></el-input>
                    </template>
                    <template v-else-if="item.dataType == 'datetime'">
                      <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="tableForm[item.columnName]"
                        :rows="1"
                        type="datetime"
                        placeholder="选择日期时间"
                        @change="inputChangeHandler(item.columnName)"
                      >
                      </el-date-picker>
                    </template>
                    <template v-else-if="item.dataType == 'number'">
                      <el-input
                        size="small"
                        v-model.number="tableForm[item.columnName]"
                        onkeyup="value=value.replace(/[^1-9]/g,'')"
                        @change="inputChangeHandler(item.columnName)"
                      ></el-input>
                    </template>
                    <template v-else>
                      <el-input
                        size="small"
                        v-model="tableForm[item.columnName]"
                        @change="inputChangeHandler(item.columnName)"
                      ></el-input>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="foot right">
            <el-button
              size="medium"
              @click="handleOk"
              class="r24"
              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 request from "@/utils/request";
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,
  GeneralDataReception,
  Start,
  Stop,
} from "@/api/dataIntegration";
export default {
  name: "DataTable",
  props: {
    isDialog: {
      type: Boolean,
      default: true,
    },
    tableup: {
      type: Boolean,
      default: false,
    },
    //接口ID
    dataId: {
      type: [String, Number],
      default: "",
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    dataContent: {
      type: Object,
      default: () => ({}),
    },
    //是否显示状态
    isStatus: {
      type: Boolean,
      default: false,
    },
    //是否显示名称
    isStatuser: {
      type: Boolean,
      default: false,
    },
    //弹框宽度
    width: {
      type: String,
      default: "560px",
    },
    //弹框表单-行数
    rows: {
      type: Number,
      default: 3,
    },
    //弹框-表单文字宽度
    labelWidth: {
      type: String,
      default: "80px",
    },
    //表格高度
    tableHeight: {
      type: [String, Number],
      default: 0,
    },
    minHeight: {
      type: Number,
      default: 65,
    },
    //是否显示树形表格
    isTree: {
      type: Boolean,
      default: false,
    },
    //树形props
    treeProps: {
      type: Object,
      default: function () {
        return { children: "children", hasChildren: "hasChildren" };
      },
    },
    //树形标识id
    rowKeyTree: {
      type: String,
      default: "companyID",
    },
    //是否显示新增按钮
    isBtn: {
      type: Boolean,
      default: true,
    },
    // 是否显示合计行
    showSummary: {
      type: Boolean,
      default: false,
    },
    marginTop: {
      type: String,
      default: "0px",
    },
    // 是否可选中行
    selectionEnable: {
      type: Boolean,
      default: false,
    },
    // 懒加载
    withLazyLoad: {
      type: Boolean,
      default: false,
    },
    // 不换行，溢出隐藏
    showOverflowTooltip: {
      type: Boolean,
      default: false,
    },
    // 表格-操作-列设置按钮显示
    withColumnSet: {
      type: Boolean,
      default: false,
    },
    // 表格-操作-项设置按钮显示
    withItemSet: {
      type: Boolean,
      default: false,
    },
    // 表格-操作-项设置按钮显示
    withlodSet: {
      type: Boolean,
      default: false,
    },
    // 表格-操作-节点按钮显示
    withnodeSet: {
      type: Boolean,
      default: false,
    },
    // 表格-操作-查询模板预览
    withPreview: {
      type: Boolean,
      default: false,
    },
    //操作列宽度
    fixedWidth: {
      type: String,
      default: "180px",
    },
    //弹框是否显示在body上
    isBody: {
      type: Boolean,
      default: false,
    },
    //新增按钮权限
    authAdd: {
      type: String,
      default: "",
    },
    //编辑按钮权限
    authEdit: {
      type: String,
      default: "",
    },
    //删除按钮权限
    authDel: {
      type: String,
      default: "",
    },
    //位置设置权限
    authWithnodeSet: {
      type: String,
      default: "",
    },
    //航站设置权限
    authWithlodSet: {
      type: String,
      default: "",
    },
    //是否启用权限按钮
    isAuth: {
      type: Boolean,
      default: false,
    },
  },
  components: { Dialog, NoData },
  data() {
    return {
      asShow: true,
      loading: false,
      flag: false,
      serviceId: null,
      rmFlag: false,
      rowTitle: "",
      page: 0,
      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: {},
    };
  },
  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;
      };
    },
    //设置表头-下拉-选中数据
    filteredTableData() {
      if (this.isTree) {
        this.tableData = translateDataToTreeAllTreeMsg(
          this.tableData,
          "parentID",
          "companyID"
        );
      }
      return this.tableData.filter((item) => {
        let flag = true;
        Object.entries(this.filterValues).forEach(([key, value]) => {
          if (value !== "" && item[key] !== value) {
            flag = false;
          }
        });
        return flag;
      });
    },
    btnAuthAdd() {
      if (this.roles.includes(this.authAdd)) {
        return true;
      } else {
        return false;
      }
    },
    btnAuthEdit() {
      if (this.roles.includes(this.authEdit)) {
        return true;
      } else {
        return false;
      }
    },
    btnAuthDel() {
      if (this.roles.includes(this.authDel)) {
        return true;
      } else {
        return false;
      }
    },
    btnAuthWithnodeSet() {
      if (this.roles.includes(this.authWithnodeSet)) {
        return true;
      } else {
        return false;
      }
    },
    btnAuthWithlodSet() {
      if (this.roles.includes(this.authWithlodSet)) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    dataContent: {
      handler(val) {
        if (val) {
          if (val.companyID) {
            this.resetTable();
            this.getQuery();
          }
        }
      },
      deep: true,
    },
    //监听机场变更的id  不可删除
    // dataId: {
    //   if(val) {
    //
    //     if (val.companyID) {
    //       this.resetTable();
    //       this.getQuery();
    //     }
    //   },
    // },
  },
  mounted() {
    this.getQuery();
  },
  updated() {
    this.$refs["table"]?.doLayout();
  },
  methods: {
    eledite() {
      this.flag = false;
      const arrbegin = _.cloneDeep(this.tableOptionscp);
      this.tableOptions = arrbegin;
    },
    load() {
      //
      if (!this.isTree) {
        if (this.noMore || this.loading) {
          return;
        }
        this.getQuery();
      }
    },
    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 = null;
            }
          }
        });
        // 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 = null;
            }
          }
        });
        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() {
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          id: this.dataId,
          needPage: ++this.page,
          dataContent: Object.values(this.dataContent),
        });
        if (code == 0) {
          if (returnData.listValues.length === 0) {
            this.page--;
            this.noMore = true;
            this.loading = false;
          }
          const titleColumn = returnData.columnSet.find(
            (item) => item.needShow === 1
          );
          if (titleColumn) {
            this.rowTitle = titleColumn.columnName;
          }
          this.tableData.push(...returnData.listValues);
          this.tableCols = returnData.columnSet;
          this.serviceId = returnData.submitID;
          setTimeout(() => {
            this.initTableData();
            this.loading = false;
          }, 100);
        } else {
          this.page--;
          this.loading = false;
          this.$message.error("获取表格数据失败");
        }
      } catch (error) {
        this.page--;
        this.loading = false;
      }
    },
    //表格-增/删/改
    async generalDataReception(data) {
      try {
        data = {
          ...data,
          ...this.dataContent,
        };
        const { code, message } = await GeneralDataReception({
          serviceId: this.serviceId,
          dataContent: JSON.stringify(data),
        });
        if (code == 0) {
          this.$message.success("操作成功");
          this.resetTable();
          this.getQuery();
          this.flag = false;
          this.rmFlag = false;
          this.tableObj = {};
          this.tableForm = {};
          // this.$router.go(0);
        } else {
          this.$message.error("操作失败");
          this.flag = false;
          this.rmFlag = false;
          this.tableObj = {};
          this.tableForm = {};
        }
      } catch (error) {
        this.flag = false;
        this.rmFlag = false;
        this.tableObj = {};
        this.tableForm = {};
      }
    },
    // 表格勾选
    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.tableDataCopy = _.cloneDeep(this.tableData);
      const datas = _.cloneDeep(this.tableColsCopy);
      // const reqUts = [];
      datas.forEach(async (item) => {
        this.tableDataFilters[item.columnName] = [];
        if (item.needGroup) {
          this.tableGroups.push(item.columnName);
        }
        if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
          this.tableArrs.push(item.columnName);
          // const reqUt = this.getSelectData(item.listqueryTemplateID)
          // reqUts.push(reqUt)
          if (!this.tableOptions[item.columnName]) {
            //开始位置beginPosition 结束位置endPosition (区分开始结束位置必须传null)
            if (
              item.columnName !== "beginPosition" &&
              item.columnName !== "endPosition"
            ) {
              this.tableOptions[item.columnName] = await this.getSelectData(
                item.listqueryTemplateID
              );
            } else {
              this.tableOptions[item.columnName] = await this.getSelectData(
                item.listqueryTemplateID,
                null
              );
              this.tabledatacopy[item.columnName] = _.cloneDeep(
                this.tableOptions[item.columnName]
              );
            }
          } else {
            if (
              item.columnName === "beginPosition" ||
              item.columnName === "endPosition"
            ) {
              this.tableOptions[item.columnName] = await this.getSelectData(
                item.listqueryTemplateID,
                null
              );
            }
          }
          //
        }
        // this.filterValues[item.columnName] = ''
      });
      setTableFilters(this.tableData, this.tableDataFilters);
      this.tableGroup(this.tableData);
      this.selectTableRows(this.tableData, "DeployID");
      this.tableOptionscp = _.cloneDeep(this.tableOptions);
      const arrbegin = _.cloneDeep(this.tableOptions);
      if (arrbegin) {
        setTimeout(() => {
          this.tableData.forEach((element) => {
            if (this.tableOptions.beginNode) {
              arrbegin.beginNode.forEach((res) => {
                if (res.v === element.beginNode) {
                  element.beginNode = res.k;
                }
              });
              arrbegin.endNode.forEach((res) => {
                if (res.v == element.endNode) {
                  element.endNode = res.k;
                }
              });
              arrbegin.calculationBasis.forEach((res) => {
                if (res.v == element.calculationBasis) {
                  element.calculationBasis = res.k;
                }
              });
              //位置
              this.tabledatacopy.beginPosition.forEach((res) => {
                if (res.v == element.beginPosition) {
                  element.beginPosition = res.k;
                }
              });
              this.tabledatacopy.endPosition.forEach((res) => {
                if (res.v == element.endPosition) {
                  element.endPosition = res.k;
                }
              });
            }
          });
        }, 100);
      }
      // this.getSelectDataAll(reqUts)
    },
    //获取所有获取弹框-下拉数据-请求状态
    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 = "";
    },
    //分组
    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 = "新增";
      //   this.tableForm = {};
      if (this.isDialog) {
        this.flag = true;
        this.tableType = "add";
        this.tableTitle = "新增";
        this.tableForm = {};
      } else {
        this.$emit("handleAdd");
      }

      //
    },
    //表格-编辑
    async handleEdit(row) {
      if (this.tableup) {
        this.$router.push({
          path: "/BasicsData/warningEdit",
          query: {
            id: row.alarmSceneId,
          },
        });
      } else {
        if (this.isDialog) {
          if (this.editId) {
            let data = await this.queryOriginRow(
              this.editId,
              row.queryTemplateColumnSetID
            );
            this.tableForm = JSON.parse(JSON.stringify(data));
          } else {
            this.tableForm = JSON.parse(JSON.stringify(row));
            if (this.tableForm.beginNode) {
              const datas = _.cloneDeep(this.tableColsCopy);
              // const reqUts = [];
              datas.forEach(async (item) => {
                if (item.columnLabel === "开始位置") {
                  this.tableOptions.beginNode.forEach((element) => {
                    if (this.tableForm.beginNode == element.k) {
                      this.tableForm.beginNode = element.v;
                    }
                  });
                  this.tableOptions.beginPosition = await this.getSelectData(
                    item.listqueryTemplateID,
                    this.tableForm.beginNode
                  );
                  this.asShow = false;
                  this.asShow = true;
                }
              });
            }
            if (this.tableForm.endNode) {
              const datas = _.cloneDeep(this.tableColsCopy);
              // const reqUts = [];
              datas.forEach(async (item) => {
                if (item.columnLabel === "结束位置") {
                  this.tableOptions.endNode.forEach((element) => {
                    if (this.tableForm.endNode == element.k) {
                      this.tableForm.endNode = element.v;
                    }
                  });
                  this.tableOptions.endPosition = await this.getSelectData(
                    item.listqueryTemplateID,
                    this.tableForm.endNode
                  );
                  this.asShow = false;
                  this.asShow = true;
                }
              });
            }
            if (this.tableOptions.beginPosition) {
              this.tableOptions.beginPosition.forEach((res) => {
                if (res.k == this.tableForm.beginPosition) {
                  this.tableForm.beginPosition = res.v;
                }
              });
            }
            //位置
            if (this.tableOptions.calculationBasis) {
              this.tableOptions.calculationBasis.forEach((res) => {
                if (res.k == this.tableForm.calculationBasis) {
                  this.tableForm.calculationBasis = res.v;
                }
              });
            }
            // if (this.tableOptions.endPosition) {
            //   this.tableOptions.endPosition.forEach((res) => {
            //     if (res.k == this.tableForm.endPosition) {
            //       this.tableForm.endPosition = res.v;
            //     }
            //   });
            // }
          }
          this.flag = true;
          this.tableType = "edit";
          this.tableTitle = "编辑";
        } else {
          this.$emit("handleEdit", row);
        }
      }
    },
    async queryOriginRow(editId, queryTemplateColumnSetID) {
      try {
        const { code, returnData } = await Query({
          id: editId,
          dataContent: [queryTemplateColumnSetID],
        });
        if (Number(code) === 0) {
          return returnData.listValues[0];
        } else {
          this.$message.error("失败");
        }
      } catch (error) {}
    },
    //表格-跳转
    handleHerf(row) {
      alert("跳转");
    },
    // 新增/编辑-确认
    submitClickHandler() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.tableType == "add") {
            this.tableForm.event = 1;
          } else {
            this.tableForm.event = 2;
          }
          this.generalDataReception(this.tableForm);
        } 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;
    },
    //表格-删除-确认
    tableRemove() {
      this.tableObj.event = 3;
      this.generalDataReception(this.tableObj);
    },
    // 表格-跳转列设置页
    handleColumnSet(row) {
      this.$router.push({
        path: "/systemSettings/queryTemplateChild",
        query: {
          queryTemplateID: row.queryTemplateID,
        },
      });
    },
    // 表格-跳转数据项设置页
    handleItemSet(row) {
      this.$router.push({
        path: "/systemSettings/datastructureChild",
        query: {
          dataStructureID: row.dataStructureID,
        },
      });
    },
    // 表格-跳转航站设置页
    handlelodSet(row) {
      this.$router.push({
        path: "/BasicsData/airportInfoChild",
        query: {
          IATACode: row.IATACode,
        },
      });
    },
    // 表格-节点置页
    handlenodeSet(row) {
      this.$router.push({
        path: "/BasicsData/deployNodeChild",
        query: {
          nodeCode: row.nodeCode,
        },
      });
    },
    // 表格-查看
    handleLook(row) {
      this.$router.push({
        name: "serviceTopology",
        params: {
          serviceID: row.serviceID,
          serviceName: row.serviceName,
        },
      });
    },
    // 表格-启动/停止
    async stateChangeHandler(row) {
      const runState = row.runState == "运行" ? 0 : 1;
      const serviceID = row.serviceID;
      // this.changeBtn(runState, serviceID);
      this.changeState(runState, serviceID);
    },
    // 表格-选中行
    selectHandler(selection, row) {
      this.$emit("selection-change", selection, row);
    },
    // 表格-查询模板预览
    handlePreview(row) {
      this.$emit("preview", row);
    },
    async changeBtn(state, id) {
      let res = null;
      // const { code, message } = await GeneralDataReception({
      //   serviceId: 61,
      //   dataContent: JSON.stringify(obj)
      // })
      if (state) {
        res = await Start({
          serviceId: id,
        });
      } else {
        res = await Stop({
          serviceId: id,
        });
      }
      if (res.code == 0) {
        this.$message.success(res.message);
        this.resetTable();
        this.getQuery();
      } else {
        this.$message.error(res.message);
      }
    },
    async changeState(runState, serviceID) {
      try {
        const operate = runState ? "start" : "stop";
        const {
          code,
          returnData: { listValues },
        } = await Query({
          id: DATACONTENT_ID.sysServiceNodeListId,
          dataContent: [serviceID],
        });
        if (Number(code) === 0) {
          if (listValues.length) {
            Promise.all(
              listValues.map((node) =>
                request({
                  url: `${node.serviceURL}${operate}`,
                  method: "post",
                  data: {
                    serviceId: serviceID,
                  },
                })
              )
            ).then((results) => {
              if (results.every((result) => Number(result.code) === 0)) {
                this.$message.success("操作成功");
              } else {
                this.$message.error("操作失败");
              }
            });
          }
        } else {
          this.$message.error("查询节点失败");
        }
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  // background-color: #fff;
  // padding: 20px;
  .data-table-content {
    height: 100%;
  }
  ::v-deep .table {
    width: 100%;
    .cell {
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: Helvetica, "Microsoft YaHei";
      letter-spacing: 0;
    }
    .cell-click {
      cursor: pointer;
      color: #2d7cff;
      &.cell-clicked {
        color: purple;
      }
    }
    .el-table__header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
        > .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: #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: #2d67e3;
      }
    }
    .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: #2d67e3;
      }
    }
    .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: #2d67e3;
        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: #2d7cff;
    font-weight: bold;
  }
}
.el-select-dropdown__item.hover {
  background: #d2d6df;
}
.data-table-dialog {
  ::v-deep .dialog-content {
    .el-form-item__content {
      line-height: 41px;
    }
  }
}
</style>