SZYGM1.0/src/views/systemSettings/queryTemplate/queryTemplateAdd.vue

<template>
  <div class="airportInfo scroll-y">
    <Minheader
      :is-statuser="true"
      :is-Preser="true"
      :is-Measure="true"
      @preserForm="preserForm"
    >
      <template #header>
        <div class="status flex-wrap">
          <div class="manageTitle">新增查询模板</div>
        </div>
      </template></Minheader
    >
    <div class="app-container">
      <el-form :model="ruleForm">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="查询模板名称" size="default">
              <el-input
                v-model="ruleForm.queryTemplateName"
                placeholder="请输入查询模板名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数据源" prop="dataSourceID" size="default">
              <el-select
                v-model="ruleForm.dataSourceID"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in dataSourceList"
                  :key="item.dataSourceID"
                  :label="item.dataSourceName"
                  :value="item.dataSourceID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="服务名称" prop="submitID" size="default">
              <el-select
                v-model="ruleForm.submitID"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in serviceList"
                  :key="item.submitID"
                  :label="item.serviceName"
                  :value="item.submitID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="每页显示" prop="pageRows" size="default">
              <el-input
                v-model="ruleForm.pageRows"
                size="medium"
                placeholder="请输入每页显示行数"
                type="number"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="查询模板描述" size="default">
              <el-input
                v-model="ruleForm.queryTemplateDescribe"
                placeholder="请输入查询模板描述"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="查询语句" size="default">
              <el-input
                :autosize="{ minRows: 24, maxRows: 24 }"
                type="textarea"
                v-model="ruleForm.serviceName"
                placeholder="请输入查询语句"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import Minheader from "@/components/minheader/index.vue";
import { Query, myQuery } from "@/api/webApi";
import { ElMessage } from "element-plus";
const router = useRouter();
const asShOW = ref<boolean>(false);
const dataSourceList = ref<Array>([]); //下拉
const serviceList = ref<Array>([]); //下拉
const ruleForm = reactive({
  queryTemplateName: "",
  queryTemplateDescribe: "",
  submitID: null,
  queryTemplate: "",
  pageRows: null,
}); //内容
//保存
const preserForm = async () => {
  const params = {
    ...ruleForm,
    submitID: ruleForm.serviceID,
  };
  delete params.serviceID;
  try {
    const res = await Query({
      serviceId: SERVICE_ID.sysQueryTabId,
      dataContent: JSON.stringify(params),
    });
    if (Number(res.code) === 0) {
      ElMessage.success(`成功`);
      router.push({ path: "/systemSettings/queryTemplate" });
      // this.$message.success(res.message ?? "成功");
      // this.$router.push("/systemSettings/queryTemplate");
    } else {
      ElMessage.error(`失败`);
      // this.$message.error(res.message ?? "失败");
    }
  } catch (error) {
    ElMessage.error(`失败`);
  }
  // router.push({ path: "/systemSettings/queryTemplate" });
};
const getDataSourceList = async () => {
  const dataSourceLists = await getSelectOption(13);
  dataSourceList.value = dataSourceLists.map((item) => {
    item[item.setlabel] = item.k;
    item[item.setvalue] = item.v;
    return item;
  });
};
const getSelectOption = async (ID) => {
  try {
    const listValues = await myQuery(ID);
    return listValues;
  } catch (error) {
    // this.$message.error(error)
    return [];
  }
};
const queryServiceList = async (ID) => {
  const serviceLists = await getSelectOption(DATACONTENT_ID.sysServiceTabId);
  serviceList.value = serviceLists.map((item) => {
    item[item.setlabel] = item.k;
    item[item.setvalue] = item.v;
    return item;
  });
};
getDataSourceList();
queryServiceList();
</script>

<style lang="scss" scoped>
.airportInfo {
  padding: 24px;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
}
::v-deep .el-form-item__label {
  width: 110px;
}
</style>