chenrui  2 жил өмнө
parent
commit
d71d5c87d6
1 өөрчлөгдсөн 265 нэмэгдсэн , 87 устгасан
  1. 265 87
      src/components/Table/index.vue

+ 265 - 87
src/components/Table/index.vue

@@ -1,25 +1,68 @@
 <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
+      :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>
+        <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
+            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-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">
+            <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">
@@ -27,18 +70,38 @@
                   </el-tooltip>
                 </span>
                 <span v-if="item.needFilters">
-                  <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
-                    <i slot="reference" :class="[
+                  <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[
+                        <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" />
+                            ]"
+                            :key="option.value + optionIndex"
+                            :value="option.value"
+                            :label="option.text"
+                          />
                         </el-select>
                       </el-form-item>
                     </el-form>
@@ -51,17 +114,77 @@
                 <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>
+                      <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>
+                    <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>
@@ -80,16 +203,38 @@
         <div class="dialog-content">
           <div class="title">{{ tableTitle }}</div>
           <div class="content">
-            <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
+            <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-col
+                  v-for="(item, index) in tableColsCopy"
+                  :key="index"
+                  :span="rows"
+                >
                   <el-form-item :label="item.columnLabel">
-                    <template v-if="
+                    <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-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>
@@ -97,7 +242,11 @@
                       <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>
+                      <el-input
+                        size="small"
+                        v-model="tableForm[item.columnName]"
+                        @change="inputChangeHandler(item.columnName)"
+                      ></el-input>
                     </template>
                   </el-form-item>
                 </el-col>
@@ -105,7 +254,13 @@
             </el-form>
           </div>
           <div class="foot right t30">
-            <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
+            <el-button
+              size="medium"
+              @click="handleOk"
+              class="r24"
+              type="primary"
+              >确定</el-button
+            >
             <el-button @click="flag = false" size="medium">取消</el-button>
           </div>
         </div>
@@ -114,11 +269,20 @@
         <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>
+            <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"
+              class="r24"
+              @click="tableRemove"
+              type="danger"
+              >删除</el-button
+            >
             <el-button size="medium" @click="rmFlag = false">取消</el-button>
           </div>
         </div>
@@ -131,7 +295,12 @@
 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";
+import {
+  Query,
+  GeneralDataReception,
+  Start,
+  Stop,
+} from "@/api/dataIntegration";
 export default {
   name: "DataTable",
   props: {
@@ -234,10 +403,10 @@ export default {
     fixedWidth: {
       type: String,
       default: "180px",
-    }
+    },
   },
   components: { Dialog, NoData },
-  data () {
+  data() {
     return {
       loading: false,
       flag: false,
@@ -267,7 +436,7 @@ export default {
     };
   },
   computed: {
-    dataTableContentStyle () {
+    dataTableContentStyle() {
       const style = {};
       if (this.minHeight) {
         style["min-height"] = this.minHeight;
@@ -278,7 +447,7 @@ export default {
       return style;
     },
     //设置表头-下拉-箭头样式
-    arrowClass () {
+    arrowClass() {
       return function (prop) {
         let classString = "";
         if (this.colShowFilter === prop) {
@@ -295,7 +464,7 @@ export default {
       };
     },
     //设置表头-下拉-选中数据
-    filteredTableData () {
+    filteredTableData() {
       return this.tableData.filter((item) => {
         let flag = true;
         Object.entries(this.filterValues).forEach(([key, value]) => {
@@ -309,7 +478,7 @@ export default {
   },
   watch: {
     dataContent: {
-      handler (val) {
+      handler(val) {
         if (val) {
           console.log(val);
           if (val.companyID) {
@@ -320,27 +489,36 @@ export default {
       },
       deep: true,
     },
+    dataId: {
+      if(val) {
+        console.log(val);
+        if (val.companyID) {
+          this.resetTable();
+          this.getQuery();
+        }
+      },
+    },
   },
-  mounted () {
+  mounted() {
     this.getQuery();
   },
-  updated () {
+  updated() {
     this.$refs["table"]?.doLayout();
   },
   methods: {
-    load () {
+    load() {
       // console.log("分页");
       if (this.noMore || this.loading) {
         return;
       }
       this.getQuery();
     },
-    resetTable () {
+    resetTable() {
       this.page = 0;
       this.noMore = false;
       this.tableData = [];
     },
-    changeSelect (data) {
+    changeSelect(data) {
       if (this.tableForm[data] === "") {
         this.tableForm[data] = null;
       }
@@ -348,13 +526,13 @@ export default {
         this.tableForm[data];
       // console.log(this.tableForm)
     },
-    inputChangeHandler (data) {
+    inputChangeHandler(data) {
       if (this.tableForm[data] === "") {
         this.tableForm[data] = null;
       }
     },
     //获取表格数据
-    async getQuery () {
+    async getQuery() {
       try {
         this.loading = true;
         const { code, returnData } = await Query({
@@ -393,7 +571,7 @@ export default {
       }
     },
     //表格-增/删/改
-    async generalDataReception (data) {
+    async generalDataReception(data) {
       try {
         data = {
           ...data,
@@ -427,17 +605,17 @@ export default {
       }
     },
     // 表格勾选
-    toggleRowSelection (row, isSelected) {
+    toggleRowSelection(row, isSelected) {
       this.$refs["table"].toggleRowSelection(row, isSelected);
     },
     // 表格初始勾选
-    selectTableRows (tableData, selectFlagName) {
+    selectTableRows(tableData, selectFlagName) {
       tableData.forEach((row) => {
         this.$refs["table"].toggleRowSelection(row, !!row[selectFlagName]);
       });
     },
     //初始化表格
-    initTableData () {
+    initTableData() {
       this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
       // console.log(this.tableColsCopy);
       // debugger;
@@ -466,7 +644,7 @@ export default {
       // this.getSelectDataAll(reqUts)
     },
     //获取所有获取弹框-下拉数据-请求状态
-    getSelectDataAll (reqUts) {
+    getSelectDataAll(reqUts) {
       Promise.all(reqUts)
         .then((res) => {
           this.proAll = true;
@@ -476,7 +654,7 @@ export default {
         });
     },
     //获取弹框-下拉数据
-    async getSelectData (id) {
+    async getSelectData(id) {
       const { code, returnData } = await Query({
         id,
         dataContent: [],
@@ -488,7 +666,7 @@ export default {
       }
     },
     //重组table-显示名称
-    setTable () {
+    setTable() {
       this.tableArrs.forEach((item) => {
         this.tableOptions[item].forEach((p) => {
           this.tableDataCopy.forEach((msg) => {
@@ -507,7 +685,7 @@ export default {
       this.tableData = this.tableDataCopy;
     },
     //分组
-    tableGroup (tableData) {
+    tableGroup(tableData) {
       const spanArr = [];
       let pos = 0;
       let ifYj = this.tableGroups[0];
@@ -527,14 +705,14 @@ export default {
       this.spanArr = spanArr;
       this.pos = pos;
     },
-    popoverShowHandler (prop) {
+    popoverShowHandler(prop) {
       this.colShowFilter = prop;
     },
-    popoverHideHandler () {
+    popoverHideHandler() {
       this.colShowFilter = "";
     },
     //分组
-    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (this.tableGroups.includes(column["property"])) {
         const _row = this.spanArr[rowIndex];
         const _col = _row > 0 ? 1 : 0;
@@ -545,7 +723,7 @@ export default {
       }
     },
     //合计
-    getSummaries (param) {
+    getSummaries(param) {
       const { columns, data } = param;
       const sums = [];
       columns.forEach((column, index) => {
@@ -569,15 +747,15 @@ export default {
       return sums;
     },
     //弹框-确定
-    handleOk () {
+    handleOk() {
       this.submitClickHandler();
     },
     //滚动
-    tableLoad () {
+    tableLoad() {
       console.log("d");
     },
     //表格-新增
-    handleAdd () {
+    handleAdd() {
       // this.flag = true;
       //   this.tableType = "add";
       //   this.tableTitle = "新增";
@@ -613,7 +791,7 @@ export default {
       // console.log(this.tableOptions);
     },
     //表格-编辑
-    async handleEdit (row) {
+    async handleEdit(row) {
       if (this.isDialog) {
         if (this.editId) {
           let data = await this.queryOriginRow(
@@ -653,7 +831,7 @@ export default {
         this.$emit("handleEdit", row);
       }
     },
-    async queryOriginRow (editId, queryTemplateColumnSetID) {
+    async queryOriginRow(editId, queryTemplateColumnSetID) {
       try {
         const { code, returnData } = await Query({
           id: editId,
@@ -669,11 +847,11 @@ export default {
       }
     },
     //表格-跳转
-    handleHerf (row) {
+    handleHerf(row) {
       alert("跳转");
     },
     // 新增/编辑-确认
-    submitClickHandler () {
+    submitClickHandler() {
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
           if (this.tableType == "add") {
@@ -688,19 +866,19 @@ export default {
       });
     },
     //表格-删除
-    handleRemove (row) {
+    handleRemove(row) {
       this.rmFlag = true;
       // this.rmTitle = row.className || row.username || row.serviceName || row.queryTemplateName;
       this.rmTitle = row[this.rowTitle];
       this.tableObj = row;
     },
     //表格-删除-确认
-    tableRemove () {
+    tableRemove() {
       this.tableObj.event = 3;
       this.generalDataReception(this.tableObj);
     },
     // 表格-跳转列设置页
-    handleColumnSet (row) {
+    handleColumnSet(row) {
       this.$router.push({
         path: "/systemSettings/queryTemplateChild",
         query: {
@@ -709,7 +887,7 @@ export default {
       });
     },
     // 表格-跳转数据项设置页
-    handleItemSet (row) {
+    handleItemSet(row) {
       this.$router.push({
         path: "/systemSettings/datastructureChild",
         query: {
@@ -718,7 +896,7 @@ export default {
       });
     },
     // 表格-跳转航站设置页
-    handlelodSet (row) {
+    handlelodSet(row) {
       this.$router.push({
         path: "/BasicsData/airportInfoChild",
         query: {
@@ -727,7 +905,7 @@ export default {
       });
     },
     // 表格-节点置页
-    handlenodeSet (row) {
+    handlenodeSet(row) {
       this.$router.push({
         path: "/BasicsData/deployNodeChild",
         query: {
@@ -736,48 +914,48 @@ export default {
       });
     },
     // 表格-查看
-    handleLook (row) {
+    handleLook(row) {
       this.$router.push({
-        name: 'serviceTopology',
+        name: "serviceTopology",
         params: {
           serviceID: row.serviceID,
-          serviceName: row.serviceName
+          serviceName: row.serviceName,
         },
       });
     },
     // 表格-启动/停止
-    async chanheState (row) {
-      const runState = row.runState == '运行' ? 0 : 1
-      const serviceID = row.serviceID
-      this.changeBtn(runState, serviceID)
+    async chanheState(row) {
+      const runState = row.runState == "运行" ? 0 : 1;
+      const serviceID = row.serviceID;
+      this.changeBtn(runState, serviceID);
     },
     // 表格-选中行
-    selectHandler (selection, row) {
+    selectHandler(selection, row) {
       this.$emit("selection-change", selection, row);
     },
-    async changeBtn (state, id) {
-      let res = null
+    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
-        })
+          serviceId: id,
+        });
       } else {
         res = await Stop({
-          serviceId: id
-        })
+          serviceId: id,
+        });
       }
       if (res.code == 0) {
-        this.$message.success(res.message)
+        this.$message.success(res.message);
         this.resetTable();
         this.getQuery();
       } else {
-        this.$message.error(res.message)
+        this.$message.error(res.message);
       }
-    }
+    },
   },
 };
 </script>