查询模板预览修改

src/components/SimpleTable/index.vue

@@ -6,48 +6,58 @@
     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"
-      :row-class-name="rowClass"
-      :cell-class-name="cellClass"
-      :span-method="tableSpanMethod"
-      :show-summary="showSummary"
-      :summary-method="tableSummaryMethod"
-      :height="height"
-      stripe
-      fit
-      border
-      @cell-click="cellClickHandler"
-    >
-      <el-table-column
-        v-for="col in filteredTableCols"
-        :key="col.columnName"
-        :prop="col.columnName"
-        :label="col.columnLabel"
-        :width="col.width"
-        :show-overflow-tooltip="showOverflowTooltip"
-        :formatter="tableFormatter"
+    <template v-if="filteredTableCols.length">
+      <el-table
+        ref="table"
+        v-el-table-infinite-scroll="load"
+        :data="dealedTableData"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="rowClass"
+        :cell-class-name="cellClass"
+        :span-method="tableSpanMethod"
+        :show-summary="showSummary"
+        :summary-method="tableSummaryMethod"
+        :height="height"
+        stripe
+        fit
+        border
+        @cell-click="cellClickHandler"
       >
-        <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>
+        <el-table-column
+          v-for="col in filteredTableCols"
+          :key="col.columnName"
+          :prop="col.columnName"
+          :label="col.columnLabel"
+          :width="col.width"
+          :show-overflow-tooltip="showOverflowTooltip"
+          :formatter="tableFormatter"
+        >
+          <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>
+    </template>
+    <template v-else>
+      <div
+        :style="{ height: height }"
+        class="no-column"
+      >
+        查询模板列设置未完成
+      </div>
+    </template>
   </div>
 </template>
 
@@ -349,4 +359,12 @@ export default {
     }
   }
 }
+.no-column {
+  padding-top: 20px;
+  background-color: #ffffff;
+  color: #909399;
+  text-align: center;
+  font-size: 20px;
+  font-family: Helvetica, 'Microsoft YaHei';
+}
 </style>

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

@@ -8,7 +8,21 @@
 -->
 <template>
   <div class="airportInfo">
-    <DataTable tableHeight="700" :data-id="dataId" :rows="12" labelWidth="100px" :min-height="70" width="800px" is-statuser show-overflow-tooltip with-column-set with-preview @handleAdd="handleAdd" @handleEdit="handleEdit" @preview="handlePreview">
+    <DataTable
+      tableHeight="700"
+      :data-id="dataId"
+      :rows="12"
+      labelWidth="100px"
+      :min-height="70"
+      width="800px"
+      is-statuser
+      show-overflow-tooltip
+      with-column-set
+      with-preview
+      @handleAdd="handleAdd"
+      @handleEdit="handleEdit"
+      @preview="handlePreview"
+    >
       <template v-slot:header>
         <div class="status flex-wrap">
           <div class="manageTitle">查询模板</div>
@@ -69,8 +83,19 @@
           ？
         </div>
         <div class="DelFoot right t30">
-          <el-button size="medium" class="r25 buwitch" type="danger" @click="remove()">删除</el-button>
-          <el-button size="medium" class="r26" @click="flag = false">取消</el-button>
+          <el-button
+            size="medium"
+            class="r25 buwitch"
+            type="danger"
+            @click="remove()"
+            >删除</el-button
+          >
+          <el-button
+            size="medium"
+            class="r26"
+            @click="flag = false"
+            >取消</el-button
+          >
         </div>
       </div>
     </Dialog>
@@ -78,31 +103,31 @@
 </template>
 <script>
 // import Search from '@/layout/components/Search/index.vue'
-import Dialog from "@/layout/components/Dialog/index.vue";
-import { findarrays } from "@/utils/validate";
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { findarrays } from '@/utils/validate'
 // import { AirlinesInquiry } from '@/api/SystemSettings'
 import {
   exceptiontype,
-  exceptionadd,
+  exceptionadd
   // exceptiondel
-} from "@/api/acquisition";
-import { GeneralDataReception, Query } from "@/api/dataIntegration";
-import DataTable from "@/components/Table";
+} from '@/api/acquisition'
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+import DataTable from '@/components/Table'
 export default {
-  name: "AirportInfo",
+  name: 'AirportInfo',
   components: {
     // Search,
     Dialog,
-    DataTable,
+    DataTable
   },
-  data () {
+  data() {
     return {
       dataId: DATACONTENT_ID.sysQueryTabId,
       arr: [
         {
-          typeName: "名称",
-          typeCode: "测试",
-        },
+          typeName: '名称',
+          typeCode: '测试'
+        }
       ], // 内容数据
       flag: false, // 删除弹框开关
       addFlag: false, // 新增机场信息弹框开关
@@ -112,183 +137,183 @@ export default {
       listDate: {},
       rmObj: {
         // 删除内容
-        name: "",
+        name: ''
       },
       ruleForm: {
         // 新增机场信息表单
-        name: "",
-        fullName: "",
-        code: "",
+        name: '',
+        fullName: '',
+        code: ''
       },
       EditForm: {
-        name: "",
-        fullName: "",
-        code: "",
+        name: '',
+        fullName: '',
+        code: ''
       },
       rules: {
         // 新增机场信息表单验证
-        name: [{ required: true, message: "请输入航司简称", trigger: "blur" }],
-        fullName: [
-          { required: true, message: "请输入航司全称", trigger: "blur" },
-        ],
-        code: [
-          { required: true, message: "请输入航司二字码", trigger: "blur" },
-        ],
+        name: [{ required: true, message: '请输入航司简称', trigger: 'blur' }],
+        fullName: [{ required: true, message: '请输入航司全称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入航司二字码', trigger: 'blur' }]
       },
-      modid: "",
-    };
+      modid: ''
+    }
   },
   computed: {
-    serachBox () {
+    serachBox() {
       if (this.searchInfo) {
-        return this.arr.filter((data) => {
-          return Object.keys(data).some((key) => {
-            return (
-              String(data[key]).toLowerCase().indexOf(this.searchInfo) > -1
-            );
-          });
-        });
+        return this.arr.filter(data => {
+          return Object.keys(data).some(key => {
+            return String(data[key]).toLowerCase().indexOf(this.searchInfo) > -1
+          })
+        })
       }
-      return this.arr;
-    },
+      return this.arr
+    }
   },
-  created () {
+  created() {
     // this.getAirlines();
     // this.exceptionlist();
   },
   methods: {
     // 异常列表查询
-    async exceptionlist () {
+    async exceptionlist() {
       const params = {
-        id: "",
-      };
-      const result = await exceptiontype(params);
+        id: ''
+      }
+      const result = await exceptiontype(params)
       if (Number(result.code) === 0) {
-        this.arr = result.returnData;
+        this.arr = result.returnData
       }
     },
     // 搜索
-    getSearchData (val) {
-      const that = this;
+    getSearchData(val) {
+      const that = this
       that.exceptionlist().then(function (data) {
         if (val) {
-          that.arr = findarrays(that.arr, "typeName", val);
+          that.arr = findarrays(that.arr, 'typeName', val)
         } else {
-          that.exceptionlist();
+          that.exceptionlist()
         }
-      });
+      })
       //
     },
     // 删除信息
-    handleMove (item) {
-      this.listDate = item;
-      this.flag = true;
+    handleMove(item) {
+      this.listDate = item
+      this.flag = true
       this.rmObj = {
-        name: item.queryTemplateName,
-      };
+        name: item.queryTemplateName
+      }
     },
-    async EditSubmit () {
-      let arr = 0;
-      this.$refs["ruleFormall"].validate((valid) => {
+    async EditSubmit() {
+      let arr = 0
+      this.$refs['ruleFormall'].validate(valid => {
         if (valid) {
-          arr = 1;
+          arr = 1
         } else {
-          arr = 0;
-          return false;
+          arr = 0
+          return false
         }
-      });
+      })
       if (arr === 1) {
         const params = {
           id: this.modid.id,
           typeName: this.EditForm.name,
-          typeCode: this.EditForm.fullName,
-        };
-        const result = await exceptionadd(params);
+          typeCode: this.EditForm.fullName
+        }
+        const result = await exceptionadd(params)
         if (Number(result.code) === 0) {
-          this.$message.success("成功");
-          this.exceptionlist();
-          this.$refs.ruleFormall.resetFields();
+          this.$message.success('成功')
+          this.exceptionlist()
+          this.$refs.ruleFormall.resetFields()
         }
-        this.EditFlag = false;
+        this.EditFlag = false
       }
     },
-    closeForm () {
-      this.$refs.ruleForm.resetFields();
+    closeForm() {
+      this.$refs.ruleForm.resetFields()
     },
     // 获取模板列表
-    async getAirlines () {
+    async getAirlines() {
       try {
         const res = await Query({
           id: 77,
-          dataContent: [],
-        });
-        if (res.code === "0") {
-          this.arr = res.returnData;
+          dataContent: []
+        })
+        if (res.code === '0') {
+          this.arr = res.returnData
         } else {
-          this.$message.error(res.message ?? "失败");
+          this.$message.error(res.message ?? '失败')
         }
       } catch (error) {
-this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
 
     // 新增机场信息-弹框
-    handleAdd () {
-      this.$router.push("/systemSettings/queryTemplateadd");
+    handleAdd() {
+      this.$router.push('/systemSettings/queryTemplateadd')
     },
     // 新增机场信息-弹框
-    handleEdit (item) {
+    handleEdit(item) {
       // this.modid = item;
       // this.EditForm.name = item.typeName;
       // this.EditForm.fullName = item.typeCode;
       this.$router.push({
-        path: "/systemSettings/queryTemplateedit",
-        query: { queryTemplateID: item.queryTemplateID },
-      });
+        path: '/systemSettings/queryTemplateedit',
+        query: { queryTemplateID: item.queryTemplateID }
+      })
       // this.EditForm.code = item.code2;
       // this.EditFlag = true;
     },
     // 新增机场信息-弹框-取消
-    resetForm () {
-      this.addFlag = false;
-      this.EditFlag = false;
-      this.ruleForm.name = "";
-      this.ruleForm.fullName = "";
-      this.$refs.ruleForms.resetFields();
-      this.$refs.ruleFormall.resetFields();
+    resetForm() {
+      this.addFlag = false
+      this.EditFlag = false
+      this.ruleForm.name = ''
+      this.ruleForm.fullName = ''
+      this.$refs.ruleForms.resetFields()
+      this.$refs.ruleFormall.resetFields()
     },
     // 删除
-    async remove (data) {
-      this.listDate.operate = "3";
+    async remove(data) {
+      this.listDate.operate = '3'
       try {
         const res = await GeneralDataReception({
           serviceId: 5,
-          dataContent: JSON.stringify(this.listDate),
-        });
-        if (res.code === "0") {
-          this.$message.success(res.message ?? "成功");
-          this.flag = false;
-          this.listDate = {};
-          this.getAirlines();
+          dataContent: JSON.stringify(this.listDate)
+        })
+        if (res.code === '0') {
+          this.$message.success(res.message ?? '成功')
+          this.flag = false
+          this.listDate = {}
+          this.getAirlines()
         } else {
-          this.$message.error(res.message ?? "失败");
+          this.$message.error(res.message ?? '失败')
         }
       } catch (error) {
-this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
     // 查询模板预览
-    handlePreview ({ queryTemplateID, queryTemplateName }) {
+    handlePreview({ queryTemplateID, queryTemplateName, queryTemplate }) {
+      const reg = /(\《(.+?)\》)|\?/g
+      const basicParamsNumber = queryTemplate.match(reg)?.length
+      const query = {
+        queryTemplateID,
+        queryTemplateName
+      }
+      if (basicParamsNumber) {
+        Object.assign(query, { basicParamsNumber })
+      }
       this.$router.push({
         path: '/systemSettings/queryTemplatePreview',
-        query: {
-          queryTemplateID,
-          queryTemplateName
-        }
+        query
       })
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -302,7 +327,7 @@ this.$message.error("失败");
     background: #eb2f3b;
     border-radius: 50%;
     margin-right: 15px;
-    background: url("../../../../assets/index/ic_close_hint.png") no-repeat;
+    background: url('../../../../assets/index/ic_close_hint.png') no-repeat;
     background-size: 100% 100%;
   }
   .er {

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

@@ -3,10 +3,19 @@
     <div class="template-header">
       <div class="manageTitle">{{ queryTemplateName }}</div>
       <el-button
+        v-if="isBasic"
+        size="small"
+        type="primary"
+        @click="dialogShow(1)"
+        >参数设置</el-button
+      >
+      <el-button
+        v-else
         size="small"
         type="primary"
         @click="dialogShow"
-      >高级搜索</el-button>
+        >高级搜索</el-button
+      >
     </div>
     <div class="template-content">
       <SimpleTable
@@ -25,7 +34,7 @@
       <div
         id="dialogSearch"
         ref="dialog"
-        :tabindex="0"
+        tabindex="0"
         @keyup.self.esc="dialogHide"
       >
         <div class="title">
@@ -42,12 +51,14 @@
               size="small"
               plain
               @click="addParamsHandler"
-            >新增</el-button>
+              >新增</el-button
+            >
             <el-button
               type="primary"
               size="small"
               @click="advancedQueryHandler"
-            >查询</el-button>
+              >查询</el-button
+            >
           </div>
           <el-form
             ref="paramsForm"
@@ -85,7 +96,11 @@
                         v-model="scope.row[col.prop]"
                         placeholder="请选择"
                         :disabled="col.prop === 'paramValue' && paramsForm.disabled[scope.$index]"
-                        @change="value => { selectChangeHandler(value, scope.$index, index) }"
+                        @change="
+                          value => {
+                            selectChangeHandler(value, scope.$index, index)
+                          }
+                        "
                       >
                         <el-option
                           v-for="(option, index) in col.options[scope.$index]"
@@ -99,7 +114,11 @@
                       <el-select
                         v-model="scope.row[col.prop]"
                         placeholder="请选择"
-                        @change="value => { selectChangeHandler(value, scope.$index, index) }"
+                        @change="
+                          value => {
+                            selectChangeHandler(value, scope.$index, index)
+                          }
+                        "
                       >
                         <el-option
                           v-for="(option, index) in col.options"
@@ -162,7 +181,8 @@
                     <span
                       slot="reference"
                       class="clickable-delete"
-                    >删除</span>
+                      >删除</span
+                    >
                   </el-popconfirm>
                 </template>
               </el-table-column>
@@ -171,6 +191,51 @@
         </div>
       </div>
     </Dialog>
+    <Dialog :flag="dialogBasicFlag">
+      <div
+        id="dialogBasic"
+        ref="dialogBasic"
+        tabindex="0"
+        @keyup.self.esc="dialogHide(1)"
+      >
+        <div class="title">
+          <span>参数设置</span>
+          <i
+            class="el-icon-close"
+            @click="dialogHide(1)"
+          />
+        </div>
+        <div class="content">
+          <div class="btns">
+            <el-button
+              type="primary"
+              size="small"
+              @click="basicQueryHandler"
+              >查询</el-button
+            >
+          </div>
+          <el-form
+            ref="basicParamForm"
+            class="basic-params"
+            :model="basicParamForm"
+            label-position="right"
+            label-width="90px"
+          >
+            <el-form-item
+              v-for="param in basicParamList"
+              :key="param.prop"
+              :prop="param.prop"
+              :label="param.label"
+            >
+              <el-input
+                v-model="basicParamForm[param.prop]"
+                placeholder="请输入"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -326,10 +391,22 @@ export default {
           ]
         }
       ],
-      columnSet: {}
+      columnSet: {},
+      dialogBasicFlag: false,
+      basicParamList: [],
+      basicParamForm: {},
+      dataContent: [],
+      isBasic: false
     }
   },
   watch: {
+    dataContent: {
+      handler() {
+        this.resetTable()
+        this.queryTableData()
+      },
+      deep: true
+    },
     queryString: {
       handler() {
         this.resetTable()
@@ -344,7 +421,7 @@ export default {
     }
   },
   created() {
-    const { queryTemplateID, queryTemplateName } = this.$route.query
+    const { queryTemplateID, queryTemplateName, basicParamsNumber } = this.$route.query
     if ((queryTemplateID ?? '') !== '') {
       this.queryTemplateID = Number(queryTemplateID)
     } else {
@@ -353,19 +430,45 @@ export default {
     if ((queryTemplateName ?? '') !== '') {
       this.queryTemplateName = queryTemplateName
     }
+    if (basicParamsNumber ?? '' !== '') {
+      const length = Number(basicParamsNumber)
+      this.isBasic = true
+      this.basicParamList = Array.from({ length }).map((_, index) => {
+        this.$set(this.basicParamForm, `basicParam${index}`, '')
+        this.dataContent.push(null)
+        return {
+          prop: `basicParam${index}`,
+          label: `基础参数${index + 1}`
+        }
+      })
+    }
   },
   methods: {
-    dialogShow() {
-      this.dialogFlag = true
-      this.$nextTick(() => {
-        this.dialogFocus()
-      })
-    },
-    dialogFocus() {
-      this.$refs['dialog'].focus()
+    dialogShow(dialogIndex) {
+      switch (dialogIndex) {
+        case 1:
+          this.dialogBasicFlag = true
+          this.$nextTick(() => {
+            this.$refs['dialogBasic'].focus()
+          })
+          break
+        default:
+          this.dialogFlag = true
+          this.$nextTick(() => {
+            this.$refs['dialog'].focus()
+          })
+          break
+      }
     },
-    dialogHide() {
-      this.dialogFlag = false
+    dialogHide(dialogIndex) {
+      switch (dialogIndex) {
+        case 1:
+          this.dialogBasicFlag = false
+          break
+        default:
+          this.dialogFlag = false
+          break
+      }
     },
     addParamsHandler() {
       this.paramsTableCols[3].inputType.push('text')
@@ -464,6 +567,10 @@ export default {
         error.message && this.$message.error(error.message)
       }
     },
+    basicQueryHandler() {
+      this.dataContent = Object.values(this.basicParamForm).map(value => value || null)
+      this.dialogHide(1)
+    },
     deleteParam(index) {
       this.paramsTableCols[3].inputType.splice(index, 1)
       this.paramsForm.params.splice(index, 1)
@@ -537,7 +644,7 @@ export default {
         } = await Query({
           id: this.queryTemplateID,
           needPage: ++this.page,
-          dataContent: [],
+          dataContent: this.dataContent,
           queryConcat: this.queryString || '1 = 2'
         })
         if (Number(code) === 0) {
@@ -549,10 +656,10 @@ export default {
           this.tableData.push(...listValues)
         } else {
           this.page--
-          this.$message.error('获取表格数据失败')
+          throw new Error('获取表格数据失败')
         }
       } catch (error) {
-        this.$message.error('失败')
+        this.$message.error(error.message)
       }
       this.loading = false
     }
@@ -563,9 +670,11 @@ export default {
 <style lang="scss" scoped>
 .template-header {
   display: flex;
-  justify-content: space-between;
   line-height: 32px;
   margin-bottom: 20px;
+  .manageTitle {
+    flex: 1;
+  }
 }
 #dialogSearch {
   .title {
@@ -659,4 +768,36 @@ export default {
     }
   }
 }
+#dialogBasic {
+  .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 .basic-params {
+      margin-right: -24px;
+      max-height: calc(100vh - 400px);
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}
 </style>