|
|
@@ -0,0 +1,1135 @@
|
|
|
+<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 ? 'flex' : 'flex-end'" class="data-table-btn">
|
|
|
+ <div v-if="isStatus" class="vStatus">
|
|
|
+ <slot name="header" />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ v-if="isBtn"
|
|
|
+ size="small"
|
|
|
+ @click="handleAdd"
|
|
|
+ plain
|
|
|
+ type="primary"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <template v-if="tableData.length">
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ v-el-table-infinite-scroll="load"
|
|
|
+ :data="filteredTableData"
|
|
|
+ :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-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].runState == '运行'"
|
|
|
+ class="status0"
|
|
|
+ >
|
|
|
+ <span class="icon"></span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="status1"><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
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ v-if="scope.row.runState == '停止'"
|
|
|
+ @click="chanheState(scope.row)"
|
|
|
+ size="small"
|
|
|
+ class="rmScs"
|
|
|
+ >启动</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ v-if="scope.row.runState == '运行'"
|
|
|
+ @click="chanheState(scope.row)"
|
|
|
+ size="small"
|
|
|
+ class="rmScs"
|
|
|
+ >停止</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <!-- <el-button class="hrefBtn" type="text" @click="handleHerf(scope.row)" size="small">跳转</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
|
|
|
+ >
|
|
|
+ <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
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ class="rmScser"
|
|
|
+ v-if="withlodSet"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="handlelodSet(scope.row)"
|
|
|
+ >航站设置</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ class="rmScser"
|
|
|
+ v-if="withnodeSet"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="handlenodeSet(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" :flag="flag">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="title">{{ tableTitle }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <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
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="tableForm[item.columnName]"
|
|
|
+ @change="changeSelect(item.columnName)"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tableOptions[item.columnName]"
|
|
|
+ :key="item.v"
|
|
|
+ :label="item.k"
|
|
|
+ :value="item.v"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <!-- <template v-else-if="item.dataType == 'longtext'">
|
|
|
+ <el-input size="small" :rows="1" type="textarea" v-model="tableForm[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 t30">
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ @click="handleOk"
|
|
|
+ class="r24"
|
|
|
+ type="primary"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="flag = false" size="medium">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+ <Dialog :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 t30">
|
|
|
+ <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 {
|
|
|
+ Query,
|
|
|
+ GeneralDataReception,
|
|
|
+ Start,
|
|
|
+ Stop,
|
|
|
+} from "@/api/dataIntegration";
|
|
|
+export default {
|
|
|
+ name: "DataTable",
|
|
|
+ props: {
|
|
|
+ isDialog: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ //接口ID
|
|
|
+ dataId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ editId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ dataContent: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ //是否显示状态
|
|
|
+ isStatus: {
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ //是否显示新增按钮
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ //操作列宽度
|
|
|
+ fixedWidth: {
|
|
|
+ type: String,
|
|
|
+ default: "180px",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: { Dialog, NoData },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ 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, //重组时-所有请求是否都完成
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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() {
|
|
|
+ return this.tableData.filter((item) => {
|
|
|
+ let flag = true;
|
|
|
+ Object.entries(this.filterValues).forEach(([key, value]) => {
|
|
|
+ if (value !== "" && item[key] !== value) {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return flag;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dataContent: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ console.log(val);
|
|
|
+ if (val.companyID) {
|
|
|
+ this.resetTable();
|
|
|
+ this.getQuery();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ //监听机场变更的id 不可删除
|
|
|
+ dataId: {
|
|
|
+ if(val) {
|
|
|
+ console.log(val);
|
|
|
+ if (val.companyID) {
|
|
|
+ this.resetTable();
|
|
|
+ this.getQuery();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getQuery();
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ this.$refs["table"]?.doLayout();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ load() {
|
|
|
+ // console.log("分页");
|
|
|
+ if (this.noMore || this.loading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.getQuery();
|
|
|
+ },
|
|
|
+ resetTable() {
|
|
|
+ this.page = 0;
|
|
|
+ this.noMore = false;
|
|
|
+ this.tableData = [];
|
|
|
+ },
|
|
|
+ changeSelect(data) {
|
|
|
+ if (this.tableForm[data] === "") {
|
|
|
+ this.tableForm[data] = null;
|
|
|
+ }
|
|
|
+ this.tableForm[this.tableOptions[data][0].setvalue] =
|
|
|
+ this.tableForm[data];
|
|
|
+ // console.log(this.tableForm)
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //表格-增/删/改
|
|
|
+ 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 = {};
|
|
|
+ } else {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ this.flag = false;
|
|
|
+ this.rmFlag = false;
|
|
|
+ this.tableObj = {};
|
|
|
+ this.tableForm = {};
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(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]);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //初始化表格
|
|
|
+ initTableData() {
|
|
|
+ this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
|
|
|
+ // console.log(this.tableColsCopy);
|
|
|
+ // debugger;
|
|
|
+ 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)
|
|
|
+ this.tableOptions[item.columnName] = await this.getSelectData(
|
|
|
+ item.listqueryTemplateID
|
|
|
+ );
|
|
|
+ // console.log(this.tableOptions[item.columnName])
|
|
|
+ }
|
|
|
+ // this.filterValues[item.columnName] = ''
|
|
|
+ });
|
|
|
+ setTableFilters(this.tableData, this.tableDataFilters);
|
|
|
+ this.tableGroup(this.tableData);
|
|
|
+ this.selectTableRows(this.tableData, "DeployID");
|
|
|
+ // this.getSelectDataAll(reqUts)
|
|
|
+ },
|
|
|
+ //获取所有获取弹框-下拉数据-请求状态
|
|
|
+ getSelectDataAll(reqUts) {
|
|
|
+ Promise.all(reqUts)
|
|
|
+ .then((res) => {
|
|
|
+ this.proAll = true;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.proAll = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取弹框-下拉数据
|
|
|
+ async getSelectData(id) {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id,
|
|
|
+ dataContent: [],
|
|
|
+ });
|
|
|
+ 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() {
|
|
|
+ console.log("d");
|
|
|
+ },
|
|
|
+ //表格-新增
|
|
|
+ handleAdd() {
|
|
|
+ // this.flag = true;
|
|
|
+ // this.tableType = "add";
|
|
|
+ // this.tableTitle = "新增";
|
|
|
+ // this.tableForm = {};
|
|
|
+ if (this.isDialog) {
|
|
|
+ this.flag = true;
|
|
|
+ this.tableType = "add";
|
|
|
+ this.tableTitle = "新增";
|
|
|
+ this.tableForm = {};
|
|
|
+ if (this.dataContent.nodeID) {
|
|
|
+ this.tableForm.nodeCode = this.dataContent.nodeID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.companyID) {
|
|
|
+ this.tableForm.companyID = this.dataContent.companyID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.IATACode) {
|
|
|
+ this.tableForm.IATACode = this.dataContent.IATACode;
|
|
|
+ }
|
|
|
+ // this.tableForm.
|
|
|
+ } else {
|
|
|
+ if (this.dataContent.nodeID) {
|
|
|
+ this.tableForm.nodeCode = this.dataContent.nodeID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.IATACode) {
|
|
|
+ this.tableForm.IATACode = this.dataContent.IATACode;
|
|
|
+ }
|
|
|
+ if (this.dataContent.companyID) {
|
|
|
+ this.tableForm.companyID = this.dataContent.companyID;
|
|
|
+ }
|
|
|
+ this.$emit("handleAdd");
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(this.tableOptions);
|
|
|
+ },
|
|
|
+ //表格-编辑
|
|
|
+ async handleEdit(row) {
|
|
|
+ if (this.isDialog) {
|
|
|
+ if (this.editId) {
|
|
|
+ let data = await this.queryOriginRow(
|
|
|
+ this.editId,
|
|
|
+ row.queryTemplateColumnSetID
|
|
|
+ );
|
|
|
+ this.tableForm = JSON.parse(JSON.stringify(data));
|
|
|
+ if (this.dataContent.nodeID) {
|
|
|
+ this.tableForm.nodeCode = this.dataContent.nodeID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.companyID) {
|
|
|
+ this.tableForm.companyID = this.dataContent.companyID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.IATACode) {
|
|
|
+ this.tableForm.IATACode = this.dataContent.IATACode;
|
|
|
+ }
|
|
|
+ // this.tableForm =this.tableForm;
|
|
|
+ // Object.entries(tableForm).forEach(([key, value]) => {
|
|
|
+ // this.tableForm[key] = value
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ this.tableForm = JSON.parse(JSON.stringify(row));
|
|
|
+ if (this.dataContent.nodeID) {
|
|
|
+ this.tableForm.nodeCode = this.dataContent.nodeID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.companyID) {
|
|
|
+ this.tableForm.companyID = this.dataContent.companyID;
|
|
|
+ }
|
|
|
+ if (this.dataContent.IATACode) {
|
|
|
+ this.tableForm.IATACode = this.dataContent.IATACode;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
+ console.log(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: {
|
|
|
+ nodeID: row.nodeID,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表格-查看
|
|
|
+ handleLook(row) {
|
|
|
+ this.$router.push({
|
|
|
+ name: "serviceTopology",
|
|
|
+ params: {
|
|
|
+ serviceID: row.serviceID,
|
|
|
+ serviceName: row.serviceName,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表格-启动/停止
|
|
|
+ async chanheState(row) {
|
|
|
+ const runState = row.runState == "运行" ? 0 : 1;
|
|
|
+ const serviceID = row.serviceID;
|
|
|
+ this.changeBtn(runState, serviceID);
|
|
|
+ },
|
|
|
+ // 表格-选中行
|
|
|
+ selectHandler(selection, row) {
|
|
|
+ this.$emit("selection-change", selection, 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.data-table {
|
|
|
+ width: 100%;
|
|
|
+ // background-color: #fff;
|
|
|
+ // padding: 20px;
|
|
|
+ ::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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+</style>
|
