add

src/components/Table/index.vue

@@ -1,12 +1,37 @@
 <template>
   <div class="data-table">
-    <div :style="{ 'min-height':minHeight + 'vh' }" 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="{ 'min-height': minHeight + 'vh' }"
+      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 v-if="isBtn" class="data-table-btn flex-end">
-        <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
+        <el-button size="small" @click="handleAdd" plain type="primary"
+          >新增</el-button
+        >
       </div>
       <template v-if="tableData.length">
-        <el-table :data="filteredTableData" :span-method="tableSpanMethod" stripe show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%;overflow:auto;">
-          <el-table-column v-for="(item,index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel">
+        <el-table
+          :data="filteredTableData"
+          :span-method="tableSpanMethod"
+          stripe
+          show-summary
+          border
+          ref="table"
+          :height="minHeight - 8 + 'vh'"
+          class="table"
+          style="width: 100%; overflow: auto"
+        >
+          <el-table-column
+            v-for="(item, index) in tableColsCopy"
+            :sortable="item.needSort ? true : false"
+            :key="index"
+            :prop="item.columnName"
+            :label="item.columnLabel"
+          >
             <template #header>
               <span class="colTips">
                 <el-tooltip :content="item.columnDescribe" placement="top">
@@ -14,12 +39,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="['filter-arrow', 'el-icon-arrow-down', arrowClass(item.columnName)]" />
+                <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
+                        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>
@@ -29,8 +80,20 @@
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="100">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
-              <el-button class="rmSc" type="text" @click="handleRemove(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
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -45,12 +108,28 @@
         <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="item.dataType == 'longtext' || item.dataType.includes('int')">
-                      <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
+                    <template
+                      v-if="
+                        item.dataType == 'longtext' ||
+                        item.dataType.includes('int')
+                      "
+                    >
+                      <el-input
+                        size="small"
+                        v-model="tableForm[item.columnName]"
+                      ></el-input>
                     </template>
                   </el-form-item>
                 </el-col>
@@ -58,7 +137,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>
@@ -66,9 +151,21 @@
       <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="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"
+              class="r24"
+              @click="tableRemove"
+              type="danger"
+              >删除</el-button
+            >
             <el-button size="medium" @click="rmFlag = false">取消</el-button>
           </div>
         </div>
@@ -78,45 +175,45 @@
 </template>
 
 <script>
-import { setTableFilters } from '@/utils/table'
-import Dialog from '@/layout/components/Dialog/index.vue'
-import NoData from '@/components/nodata'
-import { Query, GeneralDataReception } from '@/api/dataIntegration'
+import { setTableFilters } from "@/utils/table";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import NoData from "@/components/nodata";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
 export default {
-  name: 'DataTable',
+  name: "DataTable",
   props: {
     //接口ID
     dataId: {
-      type: String || Number
+      type: String || Number,
     },
     //弹框宽度
     width: {
       type: String,
-      default: '560px'
+      default: "560px",
     },
     //弹框表单-行数
     rows: {
       type: Number,
-      default: 3
+      default: 3,
     },
     //弹框-表单文字宽度
     labelWidth: {
       type: String,
-      default: '80px'
+      default: "80px",
     },
     //表格高度
     minHeight: {
       type: Number,
-      default: 65
+      default: 65,
     },
     //是否显示新增按钮
     isBtn: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   components: { Dialog, NoData },
-  data () {
+  data() {
     return {
       loading: false,
       flag: false,
@@ -129,206 +226,208 @@ export default {
       filterValues: {}, //表头-下拉-选中数据
       tableDataCopy: [], //缓存table数据
       tableGroups: [], //表格分组数据
-      colShowFilter: '', //表头-下拉-箭头
+      colShowFilter: "", //表头-下拉-箭头
       spanArr: [], //表格分组数据缓存
       pos: 0, //表格分组计数
-      tableTitle: '新增', //弹框标题
-      tableType: 'add', //弹框类型=新增/编辑
+      tableTitle: "新增", //弹框标题
+      tableType: "add", //弹框类型=新增/编辑
       tableForm: {}, //弹框表单
-      rmTitle: '', //弹框-删除-标题
-      tableObj: {} //增/删/改数据缓存
-    }
+      rmTitle: "", //弹框-删除-标题
+      tableObj: {}, //增/删/改数据缓存
+    };
   },
   computed: {
     //设置表头-下拉-箭头样式
-    arrowClass () {
+    arrowClass() {
       return function (prop) {
-        let classString = ''
+        let classString = "";
         if (this.colShowFilter === prop) {
-          return 'arrow-active'
+          return "arrow-active";
         }
-        if (Object.entries(this.tableDataFilters).find(([key, arr]) => this.filterValues[prop])) {
-          classString += 'arrow-blue'
+        if (
+          Object.entries(this.tableDataFilters).find(
+            ([key, arr]) => this.filterValues[prop]
+          )
+        ) {
+          classString += "arrow-blue";
         }
-        return classString
-      }
+        return classString;
+      };
     },
     //设置表头-下拉-选中数据
-    filteredTableData () {
-      return this.tableData.filter(item => {
-        let flag = true
+    filteredTableData() {
+      return this.tableData.filter((item) => {
+        let flag = true;
         Object.entries(this.filterValues).forEach(([key, value]) => {
-          if (value !== '' && item[key] !== value) {
-            flag = false
+          if (value !== "" && item[key] !== value) {
+            flag = false;
           }
-        })
-        return flag
-      })
-    }
+        });
+        return flag;
+      });
+    },
   },
-  created () {
-    this.getQuery()
+  created() {
+    this.getQuery();
   },
   methods: {
     //获取表格数据
-    async getQuery () {
+    async getQuery() {
       try {
-        this.loading = true
+        this.loading = true;
         const { code, returnData } = await Query({
           id: this.dataId,
-          dataContent: []
-        })
+          dataContent: [],
+        });
         if (code == 0) {
-          this.tableData = returnData.listValues
-          this.tableCols = returnData.columnSet
-          this.serviceId = returnData.submitID
+          this.tableData = returnData.listValues;
+          this.tableCols = returnData.columnSet;
+          this.serviceId = returnData.submitID;
           setTimeout(() => {
-            this.initTableData()
-            this.loading = false
+            this.initTableData();
+            this.loading = false;
           }, 100);
         } else {
-          this.loading = false
-          this.$message.error('获取表格数据失败')
+          this.loading = false;
+          this.$message.error("获取表格数据失败");
         }
       } catch (error) {
-        this.loading = false
-        console.log(error)
+        this.loading = false;
+        console.log(error);
       }
     },
     //表格-增/删/改
-    async generalDataReception (data) {
+    async generalDataReception(data) {
       try {
         const { code, message } = await GeneralDataReception({
           serviceId: this.serviceId,
           dataContent: JSON.stringify(data),
-        })
+        });
         if (code == 0) {
-          this.$message.success(message)
-          this.getQuery()
-          this.flag = false
-          this.rmFlag = false
-          this.tableObj = {}
-          this.tableForm = {}
+          this.$message.success(message);
+          this.getQuery();
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
         } else {
-          this.$message.error(message)
-          this.flag = false
-          this.rmFlag = false
-          this.tableObj = {}
-          this.tableForm = {}
+          this.$message.error(message);
+          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 = {}
+        console.log(error);
+        this.flag = false;
+        this.rmFlag = false;
+        this.tableObj = {};
+        this.tableForm = {};
       }
     },
     //初始化表格
-    initTableData () {
-      this.tableColsCopy = this.tableCols.filter(item => item.needShow)
-      this.tableDataCopy = _.cloneDeep(this.tableData)
-      const datas = _.cloneDeep(this.tableColsCopy)
-      datas.forEach(item => {
-        this.tableDataFilters[item.columnName] = []
+    initTableData() {
+      this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
+      this.tableDataCopy = _.cloneDeep(this.tableData);
+      const datas = _.cloneDeep(this.tableColsCopy);
+      datas.forEach((item) => {
+        this.tableDataFilters[item.columnName] = [];
         if (item.needGroup) {
-          this.tableGroups.push(item.columnName)
+          this.tableGroups.push(item.columnName);
         }
         // this.filterValues[item.columnName] = ''
       });
-      setTableFilters(this.tableData, this.tableDataFilters)
-      this.tableGroup(this.tableData)
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.tableGroup(this.tableData);
     },
     //分组
-    tableGroup (tableData) {
-      const spanArr = []
-      let pos = 0
-      let ifYj = this.tableGroups[0]
+    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)
+          spanArr.push(1);
         } else {
-          if (
-            tableData[i][ifYj] === tableData[i - 1][ifYj]
-          ) {
-            spanArr[pos] += 1
-            spanArr.push(0)
+          if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
+            spanArr[pos] += 1;
+            spanArr.push(0);
           } else {
-            spanArr.push(1)
-            pos = i
+            spanArr.push(1);
+            pos = i;
           }
         }
       }
-      this.spanArr = spanArr
-      this.pos = pos
+      this.spanArr = spanArr;
+      this.pos = pos;
     },
-    popoverShowHandler (prop) {
-      this.colShowFilter = prop
+    popoverShowHandler(prop) {
+      this.colShowFilter = prop;
     },
-    popoverHideHandler () {
-      this.colShowFilter = ''
+    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
+    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
-        }
+          colspan: _col,
+        };
       }
     },
     //弹框-确定
-    handleOk () {
-      this.submitClickHandler()
+    handleOk() {
+      this.submitClickHandler();
     },
     //滚动
-    tableLoad () {
-      console.log('d')
+    tableLoad() {
+      console.log("d");
     },
     //表格-新增
-    handleAdd () {
-      this.flag = true
-      this.tableType = 'add'
-      this.tableTitle = '新增'
-      this.tableForm = {}
+    handleAdd() {
+      this.flag = true;
+      this.tableType = "add";
+      this.tableTitle = "新增";
+      this.tableForm = {};
     },
     //表格-编辑
-    handleEdit (row) {
-      this.flag = true
-      this.tableType = 'edit'
-      this.tableTitle = '编辑'
-      this.tableForm = row
+    handleEdit(row) {
+      this.flag = true;
+      this.tableType = "edit";
+      this.tableTitle = "编辑";
+      this.tableForm = row;
     },
     // 新增/编辑-确认
-    submitClickHandler () {
+    submitClickHandler() {
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
-          if (this.tableType == 'add') {
-            this.tableForm.event = 1
+          if (this.tableType == "add") {
+            this.tableForm.event = 1;
           } else {
-            this.tableForm.event = 2
+            this.tableForm.event = 2;
           }
-          this.generalDataReception(this.tableForm)
+          this.generalDataReception(this.tableForm);
         } else {
-          return false
+          return false;
         }
       });
     },
     //表格-删除
-    handleRemove (row) {
-      this.rmFlag = true
-      this.rmTitle = row.className
-      this.tableObj = row
+    handleRemove(row) {
+      this.rmFlag = true;
+      this.rmTitle = row.className;
+      this.tableObj = row;
     },
     //表格-删除-确认
-    tableRemove () {
-      this.tableObj.event = 3
-      this.generalDataReception(this.tableObj)
-    }
-  }
-}
+    tableRemove() {
+      this.tableObj.event = 3;
+      this.generalDataReception(this.tableObj);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -386,9 +485,32 @@ export default {
         }
       }
     }
+    .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;
+      margin-right: 2px;
+      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: #f56c6c;
+        color: #ffffff;
       }
     }
     .el-table__fixed-right {