查询模板预览

.gitignore

@@ -15,3 +15,4 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
+.prettierrc

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "printWidth": 200,
-  "tabWidth": 2
-}

src/components/SimpleTable/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div
+    v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    class="table-wrapper"
+  >
+    <el-table
+      ref="table"
+      v-el-table-infinite-scroll="load"
+      :data="dealedTableData"
+      :header-cell-class-name="headerCellClass"
+      :span-method="tableSpanMethod"
+      :tree-props="treeProps"
+      :row-key="rowKeyTree"
+      :show-summary="showSummary"
+      :summary-method="getSummaries"
+      height="100%"
+      stripe
+      fit
+      border
+    >
+      <el-table-column
+        v-for="col in filteredTableCols"
+        :key="col.columnName"
+        :prop="col.columnName"
+        :label="col.columnLabel"
+        :width="col.width"
+        :show-overflow-tooltip="showOverflowTooltip"
+      >
+        <template #header>
+          <el-tooltip
+            :content="col.columnDescribe || col.columnLabel"
+            placement="top"
+          >
+            <TableHeaderCell
+              :label="col.columnLabel"
+              :filter-options="tableDataFilters[col.columnName]"
+              :filter-values.sync="filterValues[col.columnName]"
+              filter-style="arrow"
+              :sortable="!!col.needSort"
+              :sort-rule.sync="tableDataSortRules[col.columnName]"
+            />
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import TableHeaderCell from '../TableHeaderCell'
+import { setTableFilters } from '@/utils/table'
+import { Query } from '@/api/dataIntegration'
+
+export default {
+  name: 'SimpleTable',
+  components: { TableHeaderCell },
+  props: {
+    queryId: {
+      type: [String, Number],
+      required: true
+    },
+    queryString: {
+      type: String,
+      default: ''
+    },
+    // 是否显示树形表格
+    isTree: {
+      type: Boolean,
+      default: false
+    },
+    // 树形props
+    treeProps: {
+      type: Object,
+      default: function () {
+        return { children: 'children', hasChildren: 'hasChildren' }
+      }
+    },
+    // 树形标识id
+    rowKeyTree: {
+      type: String,
+      default: 'companyID'
+    },
+    // 是否显示合计行
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    // 不换行，溢出隐藏
+    showOverflowTooltip: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      page: 0,
+      noMore: false,
+      tableCols: [], // 表头数据
+      tableData: [], // 表格数据
+      tableDataFilters: {}, // 表头-下拉数据
+      filterValues: {}, // 表头-下拉-选中数据
+      tableDataSortRules: {}, // 表头-排序
+      tableGroups: [], // 表格分组规则
+      spanArr: [] // 表格分组数据缓存
+    }
+  },
+  computed: {
+    filteredTableCols() {
+      return this.tableCols.filter(col => col.needShow)
+    },
+    dealedTableData() {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(item[key])) {
+            flag = false
+          }
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
+    }
+  },
+  watch: {
+    queryString: {
+      handler() {
+        this.resetTable()
+        this.queryTableData()
+      },
+      immediate: true
+    },
+    dealedTableData: {
+      handler(arr) {
+        const spanArr = []
+        let pos = 0
+        arr.forEach((item, index, arr) => {
+          if (index === 0) {
+            spanArr.push(1)
+          } else {
+            if (this.tableGroups.every(prop => arr[index][prop] === arr[index - 1][prop])) {
+              spanArr[pos] += 1
+              spanArr.push(0)
+            } else {
+              spanArr.push(1)
+              pos = index
+            }
+          }
+        })
+        this.spanArr = spanArr
+      },
+      deep: true
+    }
+  },
+  updated() {
+    this.$refs['table']?.doLayout()
+  },
+  methods: {
+    load() {
+      if (!this.isTree) {
+        if (this.noMore || this.loading) {
+          return
+        }
+        this.queryTableData()
+      }
+    },
+    resetTable() {
+      this.page = 0
+      this.noMore = false
+      this.tableData = []
+    },
+    initTableData() {
+      this.tableDataFilters = {}
+      this.filteredTableCols.forEach(col => {
+        this.tableDataFilters[col.columnName] = []
+        if (col.needGroup) {
+          this.tableGroups.push(col.columnName)
+        }
+      })
+      setTableFilters(this.tableData, this.tableDataFilters)
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
+    // 分组
+    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
+    },
+    async queryTableData() {
+      this.loading = true
+      try {
+        const {
+          code,
+          returnData: { columnSet, listValues }
+        } = await Query({
+          id: this.queryId,
+          needPage: ++this.page,
+          dataContent: this.queryString ? { whereString: this.queryString } : []
+        })
+        if (Number(code) === 0) {
+          if (listValues.length === 0) {
+            this.page--
+            this.noMore = true
+          }
+          this.tableCols = columnSet
+          this.$emit('get-column-set', columnSet)
+          this.tableData.push(...listValues)
+          this.initTableData()
+        } else {
+          this.page--
+          this.$message.error('获取表格数据失败')
+        }
+      } catch (error) {
+        console.log('出错了', error.message || error)
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-wrapper {
+  width: 100%;
+  height: 100%;
+  ::v-deep .el-table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, 'Microsoft YaHei';
+      letter-spacing: 0;
+    }
+    .el-table__header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+        > .el-checkbox {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Table/index.vue

@@ -92,6 +92,7 @@
                     <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 v-if="withPreview" type="text" size="small" class="rmScs" @click="handlePreview(scope.row)">预览</el-button>
                   </div>
                 </div>
               </template>
@@ -280,6 +281,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 表格-操作-查询模板预览
+    withPreview: {
+      type: Boolean,
+      default: false,
+    },
     //操作列宽度
     fixedWidth: {
       type: String,
@@ -778,6 +784,10 @@ export default {
     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({

src/components/TableHeaderCell/index.vue

@@ -8,6 +8,9 @@
 -->
 <template>
   <div class="table-header-cell">
+    <template v-if="!filterable || filterStyle === 'arrow'">
+      <span>{{ label }}</span>
+    </template>
     <template v-if="filterable">
       <el-popover
         class="table-header-cell-popover"
@@ -16,14 +19,16 @@
         @show="expand = true"
         @hide="expand = false"
       >
-        <!-- <i
-        slot="reference"
-        :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]"
-      /> -->
         <span
+          v-if="filterStyle === 'underline'"
           slot="reference"
           :class="['btn-filter', { 'btn-filter-active': active }]"
         >{{ label }}</span>
+        <i
+          v-if="filterStyle === 'arrow'"
+          slot="reference"
+          :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]"
+        />
         <el-form>
           <el-form-item :label="label">
             <el-select
@@ -47,9 +52,6 @@
         </el-form>
       </el-popover>
     </template>
-    <template v-else>
-      <span>{{ label }}</span>
-    </template>
     <template v-if="sortable">
       <span
         class="caret-wrapper"
@@ -70,12 +72,16 @@ export default {
       type: String,
       default: ''
     },
+    filterStyle: {
+      type: String,
+      default: 'underline'
+    },
     filterOptions: {
-      type: [Array, undefined],
+      type: Array,
       default: undefined
     },
     filterValues: {
-      type: [Array, undefined],
+      type: Array,
       default: undefined
     },
     sortable: {
@@ -98,7 +104,7 @@ export default {
       return this.filterValues?.length
     },
     filterable() {
-      return this.filterOptions
+      return this.filterOptions?.length
     }
   },
   watch: {
@@ -116,17 +122,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// .filter-arrow {
-//   cursor: pointer;
-//   transition: 0.3s transform;
-//   &.arrow-expand {
-//     transform: rotate(-180deg);
-//   }
-//   &.arrow-active {
-//     color: #2d7cff;
-//     font-weight: bold;
-//   }
-// }
+.filter-arrow {
+  cursor: pointer;
+  transition: 0.3s transform;
+  &.arrow-expand {
+    transform: rotate(-180deg);
+  }
+  &.arrow-active {
+    color: #2d7cff;
+    font-weight: bold;
+  }
+}
 .btn-filter {
   cursor: pointer;
   position: relative;

src/router/routes/routes-file-two.js

@@ -8,12 +8,22 @@ const systemSettingsRoutes = {
       path: '/systemSettings',
       name: 'systemSettings',
       component: () => import('@/views/systemSettings/index'),
-      meta: { title: '系统设置', icon: 'systemSettings', imgstyle: 'ic_setting_nav_default.png', imgstyleup: 'ic_setting_nav_check.png', keepAlive: false },
+      meta: {
+        title: '系统设置',
+        icon: 'systemSettings',
+        imgstyle: 'ic_setting_nav_default.png',
+        imgstyleup: 'ic_setting_nav_check.png',
+        keepAlive: false
+      },
       children: [
         {
           path: '/systemSettings',
           name: 'serviceManagement',
-          component: { render(c) { return c('router-view') } },
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
           redirect: '/systemSettings',
           meta: { title: '服务管理', keepAlive: false },
           hidden: true,
@@ -23,7 +33,7 @@ const systemSettingsRoutes = {
             {
               path: '/systemSettings',
               meta: { title: '服务管理', keepAlive: false },
-              component: () => import('@/views/systemSettings/views/serviceManagement/serviceHome'),
+              component: () => import('@/views/systemSettings/views/serviceManagement/serviceHome')
             },
             {
               path: '/systemSettings/serviceEdit',
@@ -51,7 +61,7 @@ const systemSettingsRoutes = {
               hidden: false,
               isAlone: true,
               src: require('@/assets/nav/ic_setting_top@2x.png')
-            },
+            }
           ]
         },
         {
@@ -75,68 +85,85 @@ const systemSettingsRoutes = {
         {
           path: '/systemSettings/queryTemplate',
           name: 'queryTemplate',
-          component: { render(c) { return c('router-view') } },
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
           redirect: '/systemSettings/queryTemplate',
           meta: { title: '查询模板', keepAlive: false },
           hidden: true,
           src: require('@/assets/nav/ic_setting_top_default.png'),
           srcer: require('@/assets/nav/ic_setting_top_check.png'),
-          children: [{
-            path: '/systemSettings/queryTemplate',
-            meta: { title: '查询模板', keepAlive: false },
-            component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplate'),
-          },
-          {
-            path: '/systemSettings/queryTemplateadd',
-            name: 'queryTemplateadd',
-            component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateadd'),
-            meta: { title: '新增查询模板', keepAlive: false },
-            hidden: false,
-            isAlone: true,
-            src: require('@/assets/nav/ic_setting_top@2x.png')
-          },
-          {
-            path: '/systemSettings/queryTemplateedit',
-            name: 'queryTemplateedit',
-            component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateedit'),
-            meta: { title: '编辑查询模板', keepAlive: false },
-            hidden: false,
-            isAlone: true,
-            src: require('@/assets/nav/ic_setting_top@2x.png')
-          },
-          {
-            path: '/systemSettings/queryTemplateChild',
-            name: 'queryTemplateChild',
-            component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateChild'),
-            meta: { title: '查询项设置', keepAlive: false },
-            hidden: false,
-            isAlone: true,
-            src: require('@/assets/nav/ic_setting_top@2x.png')
-          }
+          children: [
+            {
+              path: '/systemSettings/queryTemplate',
+              meta: { title: '查询模板', keepAlive: false },
+              component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplate')
+            },
+            {
+              path: '/systemSettings/queryTemplateadd',
+              name: 'queryTemplateadd',
+              component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateadd'),
+              meta: { title: '新增查询模板', keepAlive: false },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
+            {
+              path: '/systemSettings/queryTemplateedit',
+              name: 'queryTemplateedit',
+              component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateedit'),
+              meta: { title: '编辑查询模板', keepAlive: false },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
+            {
+              path: '/systemSettings/queryTemplateChild',
+              name: 'queryTemplateChild',
+              component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateChild'),
+              meta: { title: '查询项设置', keepAlive: false },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
+            {
+              path: '/systemSettings/queryTemplatePreview',
+              name: 'QueryTemplatePreview',
+              component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplatePreview'),
+              meta: { title: '查询模板预览', noToolBar: true },
+              hidden: false
+            }
           ]
         },
         {
           path: '/systemSettings/datastructure',
           name: 'datastructure',
-          component: { render(c) { return c('router-view') } },
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
           meta: { title: '数据结构', keepAlive: false },
           hidden: true,
           src: require('@/assets/nav/ic_setting_top_default.png'),
           srcer: require('@/assets/nav/ic_setting_top_check.png'),
-          children: [{
-            path: '/systemSettings/datastructure',
-            meta: { title: '数据结构', keepAlive: false },
-            component: () => import('@/views/systemSettings/views/datastructure/datastructureHome'),
-          },
-          {
-            path: '/systemSettings/datastructureChild',
-            name: 'datastructureChild',
-            component: () => import('@/views/systemSettings/views/datastructure/datastructureChild'),
-            meta: { title: '数据项', keepAlive: false },
-            hidden: false,
-            isAlone: true,
-            src: require('@/assets/nav/ic_setting_top@2x.png')
-          }
+          children: [
+            {
+              path: '/systemSettings/datastructure',
+              meta: { title: '数据结构', keepAlive: false },
+              component: () => import('@/views/systemSettings/views/datastructure/datastructureHome')
+            },
+            {
+              path: '/systemSettings/datastructureChild',
+              name: 'datastructureChild',
+              component: () => import('@/views/systemSettings/views/datastructure/datastructureChild'),
+              meta: { title: '数据项', keepAlive: false },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            }
           ]
         },
         // {
@@ -165,7 +192,7 @@ const systemSettingsRoutes = {
           hidden: true,
           src: require('@/assets/nav/ic_setting_top_default.png'),
           srcer: require('@/assets/nav/ic_setting_top_check.png')
-        },
+        }
         // {
         //   path: '/systemSettings/servicedeployment',
         //   name: 'servicedeployment',
@@ -208,6 +235,6 @@ const systemSettingsRoutes = {
 // }
 
 export default [
-  systemSettingsRoutes,
+  systemSettingsRoutes
   // queryTemplateRoutes
 ]

src/views/baggageManagement/components/container/index.vue

@@ -467,4 +467,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/systemSettings/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="dashboard">
+    <router-view v-if="$route.meta && $route.meta.noToolBar" />
     <!--导航-->
-    <ToolBar />
+    <ToolBar v-else />
   </div>
 </template>
 

src/views/systemSettings/views/queryTemplate/queryTemplate.vue

@@ -15,11 +15,13 @@
       labelWidth="100px"
       :min-height="70"
       width="800px"
-      :show-overflow-tooltip="true"
-      :with-column-set="true"
+      is-statuser
+      show-overflow-tooltip
+      with-column-set
+      with-preview
       @handleAdd="handleAdd"
       @handleEdit="handleEdit"
-      :isStatuser="true"
+      @preview="handlePreview"
     >
       <template v-slot:header>
         <div class="status flex-wrap">
@@ -297,6 +299,16 @@ export default {
         console.log("错误", error);
       }
     },
+    // 查询模板预览
+    handlePreview({ queryTemplateID, queryTemplateName }) {
+      this.$router.push({
+        path: '/systemSettings/queryTemplatePreview',
+        query: {
+          queryTemplateID,
+          queryTemplateName
+        }
+      })
+    }
   },
 };
 </script>

src/views/systemSettings/views/queryTemplate/queryTemplatePreview.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="template-wrapper">
+    <div class="template-header">
+      <div class="manageTitle">{{ queryTemplateName }}</div>
+      <el-button
+        size="small"
+        type="primary"
+        @click="dialogShow"
+      >高级搜索</el-button>
+    </div>
+    <div class="template-content">
+      <SimpleTable
+        :query-id="queryTemplateID"
+        :query-string="queryString"
+        show-overflow-tooltip
+        @get-column-set="getColumnSet"
+      />
+    </div>
+    <Dialog
+      :flag="dialogFlag"
+      width="852px"
+    >
+      <div
+        id="dialogSearch"
+        ref="dialog"
+        :tabindex="0"
+        @keyup.self.esc="dialogHide"
+      >
+        <div class="title">
+          <span>高级搜索</span>
+          <i
+            class="el-icon-close"
+            @click="dialogHide"
+          />
+        </div>
+        <div class="content">
+          <div class="btns">
+            <el-button
+              type="primary"
+              size="small"
+              plain
+              @click="addParamsHandler"
+            >新增</el-button>
+            <el-button
+              type="primary"
+              size="small"
+              @click="advancedQueryHandler"
+            >查询</el-button>
+          </div>
+          <el-form
+            ref="paramsForm"
+            class="query-params"
+            :model="paramsForm"
+            :rules="paramsForm.validateRules"
+            :inline="true"
+          >
+            <el-table
+              :data="paramsForm.params"
+              height="370"
+              border
+              stripe
+            >
+              <el-table-column
+                type="index"
+                label="行号"
+                :index="index => index + 1"
+                align="center"
+                width="60"
+              />
+              <el-table-column
+                v-for="(col, index) in tableCols"
+                :key="index"
+                :label="col.label"
+                :align="col.align || 'center'"
+              >
+                <template slot-scope="scope">
+                  <el-form-item :prop="'params.' + scope.$index + '.' + col.prop">
+                    <template v-if="col.prop === 'comparisonOperators' && col.inputType === 'select' || col.inputType[scope.$index] === 'select'">
+                      <el-select
+                        v-model="scope.row[col.prop]"
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="(option, index) in col.options[scope.$index]"
+                          :key="index"
+                          :value="option.value"
+                          :label="option.label"
+                        />
+                      </el-select>
+                    </template>
+                    <template v-else-if="col.inputType === 'select'">
+                      <el-select
+                        v-model="scope.row[col.prop]"
+                        placeholder="请选择"
+                        @change="value => { selectChangeHandler(value, scope.$index, index) }"
+                      >
+                        <el-option
+                          v-for="(option, index) in col.options"
+                          :key="index"
+                          :value="option.value"
+                          :label="option.label"
+                        />
+                      </el-select>
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'text'">
+                      <el-input
+                        v-model="scope.row[col.prop]"
+                        placeholder="请输入"
+                      />
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'number'">
+                      <el-input
+                        v-model="scope.row[col.prop]"
+                        placeholder="请输入"
+                        @keydown.native="inputCheck(scope.row[col.prop])"
+                        @input="inputLimit(scope.row[col.prop], scope.$index)"
+                      />
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'date'">
+                      <el-date-picker
+                        v-model="scope.row[col.prop]"
+                        type="date"
+                        format="yyyy-MM-dd"
+                        value-format="yyyy-MM-dd"
+                        placeholder="请选择"
+                      />
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'datetime'">
+                      <el-date-picker
+                        v-model="scope.row[col.prop]"
+                        type="datetime"
+                        format="yyyy-MM-dd HH:mm:ss"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        placeholder="请选择"
+                      />
+                    </template>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                width="80"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <el-popconfirm
+                    title="是否要删除这一行？"
+                    @confirm="deleteRow(scope.$index)"
+                  >
+                    <span
+                      slot="reference"
+                      class="clickable-delete"
+                    >删除</span>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import SimpleTable from '@/components/SimpleTable'
+import Dialog from '@/layout/components/Dialog'
+import { Query } from '@/api/dataIntegration'
+
+const comparisonOperatorOptions = [
+  {
+    label: '小于等于',
+    value: '<='
+  },
+  {
+    label: '大于等于',
+    value: '>='
+  },
+  {
+    label: '小于',
+    value: '<'
+  },
+  {
+    label: '大于',
+    value: '>'
+  },
+  {
+    label: '等于',
+    value: '='
+  },
+  {
+    label: '不等于',
+    value: '!='
+  },
+  {
+    label: '为空',
+    value: 'is Null'
+  },
+  {
+    label: '不为空',
+    value: 'is not Null'
+  },
+  {
+    label: '包含',
+    value: 'like'
+  }
+]
+
+export default {
+  name: 'QueryTemplatePreview',
+  components: {
+    SimpleTable,
+    Dialog
+  },
+  data() {
+    return {
+      queryTemplateID: null,
+      queryTemplateName: '查询模板预览',
+      queryString: '',
+      dialogFlag: false,
+      paramsForm: {
+        params: [
+          {
+            leftBrackets: '',
+            paramKey: '',
+            comparisonOperators: '',
+            paramValue: '',
+            rightBrackets: '',
+            connector: ''
+          }
+        ],
+        validateRules: {}
+      },
+      checkValue: '',
+      tableCols: [
+        {
+          prop: 'leftBrackets',
+          label: '左括号',
+          inputType: 'select',
+          options: [
+            {
+              label: '(',
+              value: '('
+            },
+            {
+              label: '((',
+              value: '(('
+            },
+            {
+              label: '(((',
+              value: '((('
+            }
+          ]
+        },
+        {
+          prop: 'paramKey',
+          label: '项',
+          inputType: 'select',
+          options: []
+        },
+        {
+          prop: 'comparisonOperators',
+          label: '比较符',
+          inputType: 'select',
+          options: []
+        },
+        {
+          prop: 'paramValue',
+          label: '值',
+          inputType: ['text'],
+          options: []
+        },
+        {
+          prop: 'rightBrackets',
+          label: '右括号',
+          inputType: 'select',
+          options: [
+            {
+              label: ')',
+              value: ')'
+            },
+            {
+              label: '))',
+              value: '))'
+            },
+            {
+              label: ')))',
+              value: ')))'
+            }
+          ]
+        },
+        {
+          prop: 'connector',
+          label: '连接',
+          inputType: 'select',
+          options: [
+            {
+              label: '并且',
+              value: 'and'
+            },
+            {
+              label: '或者',
+              value: 'or'
+            }
+          ]
+        }
+      ],
+      columnSet: {}
+    }
+  },
+  created() {
+    const { queryTemplateID, queryTemplateName } = this.$route.query
+    if ((queryTemplateID ?? '') !== '') {
+      this.queryTemplateID = Number(queryTemplateID)
+    } else {
+      this.$router.push('/')
+    }
+    if ((queryTemplateName ?? '') !== '') {
+      this.queryTemplateName = queryTemplateName
+    }
+  },
+  methods: {
+    dialogShow() {
+      this.dialogFlag = true
+      this.$nextTick(() => {
+        this.dialogFocus()
+      })
+    },
+    dialogFocus() {
+      this.$refs['dialog'].focus()
+    },
+    dialogHide() {
+      this.dialogFlag = false
+    },
+    addParamsHandler() {
+      this.tableCols[3].inputType.push('text')
+      this.paramsForm.params.push({
+        leftBrackets: '',
+        paramKey: '',
+        comparisonOperators: '',
+        paramValue: '',
+        rightBrackets: '',
+        connector: ''
+      })
+    },
+
+    selectChangeHandler(value, rowIndex, colIndex) {
+      if (colIndex === 1) {
+        const { dataType, options } = this.columnSet[value]
+        if (dataType === 'date') {
+          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.tableCols[3].inputType[rowIndex] = 'date'
+        } else if (dataType === 'datetime') {
+          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.tableCols[3].inputType[rowIndex] = 'datetime'
+        } else if (options) {
+          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4, 5)
+          this.tableCols[3].inputType[rowIndex] = 'select'
+          this.tableCols[3].options[rowIndex] = options
+        } else if (dataType !== 'number') {
+          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.tableCols[3].inputType[rowIndex] = 'number'
+        } else {
+          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4)
+          this.tableCols[3].inputType[rowIndex] = 'text'
+        }
+
+        this.paramsForm.params[rowIndex].comparisonOperators = this.tableCols[2].options[rowIndex][0].value
+      }
+    },
+    inputCheck(value) {
+      this.checkValue = value
+    },
+    inputLimit(value, rowIndex) {
+      if (!/^[\-|\+]?((([1-9][0-9]*)|0)(\.[0-9]{0,2})?)?$/.test(value)) {
+        this.paramsForm.params[rowIndex].paramValue = this.checkValue
+      }
+    },
+    advancedQueryHandler() {
+      let bracketsDifference = 0
+      try {
+        const paramsRowNum = this.paramsForm.params.length
+        const queryString = this.paramsForm.params.reduce(
+          (preString, { leftBrackets, paramKey, comparisonOperators, paramValue, rightBrackets, connector }, index) => {
+            bracketsDifference += leftBrackets.length - rightBrackets.length
+            if (bracketsDifference < 0) {
+              throw new Error('左右括号不匹配！')
+            }
+            return (
+              preString +
+              leftBrackets +
+              paramKey +
+              ` ${comparisonOperators} ` +
+              (comparisonOperators === 'like' ? `%${paramValue}%` : paramValue) +
+              rightBrackets +
+              (index < paramsRowNum - 1 ? connector : '')
+            )
+          },
+          ''
+        )
+        if (bracketsDifference !== 0) {
+          throw new Error('左右括号不匹配！')
+        }
+        console.log(queryString)
+        // this.queryString = queryString
+        this.dialogHide()
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    getColumnSet(columnSet) {
+      this.columnSet = {}
+      this.tableCols[1].options = []
+      columnSet.forEach(async column => {
+        if (!this.columnSet[column.columnName]) {
+          this.columnSet[column.columnName] = column
+          if (column.listqueryTemplateID && !this.columnSet[column.columnName.options]) {
+            const options = await this.getSelectData(column.listqueryTemplateID)
+            this.columnSet[column.columnName].options = options.map(option => ({
+              label: option.k,
+              value: option.v
+            }))
+          }
+          this.tableCols[1].options.push({
+            label: column.columnLabel,
+            value: column.columnName
+          })
+        }
+      })
+    },
+    deleteRow(index) {
+      this.tableCols[3].inputType.splice(index, 1)
+      this.paramsForm.params.splice(index, 1)
+    },
+    // 获取下拉数据
+    async getSelectData(id) {
+      try {
+        const { code, returnData } = await Query({
+          id,
+          dataContent: []
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues
+        } else {
+          return []
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  line-height: 32px;
+  margin-bottom: 20px;
+}
+.template-content {
+  height: calc(100vh - 80px - 24px - 32px - 20px - 14px);
+}
+#dialogSearch {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    .el-icon-close {
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    margin: 0 0 20px;
+    padding: 0 24px;
+    .btns {
+      display: flex;
+      justify-content: flex-end;
+      padding: 20px 0;
+      .el-button {
+        width: 72px;
+        &:not(:first-child) {
+          margin-left: 16px;
+        }
+      }
+    }
+    ::v-deep .query-params {
+      padding: 0;
+      .el-table {
+        width: 100%;
+        .el-table__header {
+          .el-table__cell {
+            padding: 0;
+            .cell {
+              height: 40px;
+              line-height: 40px;
+              font-family: Helvetica, 'Microsoft YaHei';
+              font-weight: bold;
+              color: #303133;
+            }
+          }
+        }
+        .el-table__body {
+          .el-table__cell {
+            padding: 0;
+            .cell {
+              padding: 0;
+              .el-form-item {
+                margin: 0;
+                height: 40px;
+                .el-input__inner {
+                  background: transparent;
+                  border: none;
+                  color: #101116;
+                  font-family: Helvetica, 'Microsoft YaHei';
+                  &:hover {
+                    background-color: #ffffff;
+                  }
+                }
+                .el-select {
+                  .el-icon-arrow-up::before {
+                    content: '\e78f';
+                    color: #101116;
+                  }
+                  .el-icon-arrow-down::before {
+                    content: '\e790';
+                    color: #101116;
+                  }
+                }
+              }
+              .clickable-delete {
+                font-family: Microsoft YaHei;
+                color: #ed3c3c;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>