SZYGM1.0/src/views/systemSettings/queryTemplate/queryTemplateEdit.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" :rules="formRules" ref="queryTemplateEditForm">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item
              label="查询模板名称"
              size="default"
              prop="queryTemplateName"
              :rules="formRules.isNotNull"
            >
              <el-input
                v-model="ruleForm.queryTemplateName"
                placeholder="请输入查询模板名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="数据源"
              prop="dataSourceID"
              size="default"
              :rules="formRules.isNotNull"
            >
              <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="serviceID"
              size="default"
              :rules="formRules.isNotNull"
            >
              <el-select
                v-model="ruleForm.serviceID"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in serviceList"
                  :key="item.serviceID"
                  :label="item.serviceName"
                  :value="item.serviceID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="每页显示"
              prop="pageRows"
              size="default"
              :rules="formRules.isNotNull"
            >
              <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"
              prop="queryTemplate"
              :rules="formRules.isNotNull"
            >
              <el-input
                :autosize="{ minRows: 24, maxRows: 24 }"
                type="textarea"
                v-model="ruleForm.queryTemplate"
                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, GeneralDataReception } from "@/api/webApi";
import { ElMessage } from "element-plus";
const formRules = useElement().formRules;
const router = useRouter();
const route = useRoute();
const asShOW = ref<boolean>(false);
const dataSourceList = ref<Array>([]); //下拉
const serviceList = ref<Array>([]); //下拉
const queryTemplateID = ref<String>("");
const ruleForm = reactive({
  queryTemplateName: "",
  queryTemplateDescribe: "",
  serviceName: "",
  dataSourceID: "",
  submitID: null,
  queryTemplate: "",
  pageRows: null,
  serviceID: "",
  event: 2,
}); //内容
queryTemplateID.value = route.query.queryTemplateID;
//确认提交
const queryTemplateEditForm: any = ref(null);
const preserForm = () => {
  queryTemplateEditForm.value.validate((valid: any) => {
    if (valid) {
      preserFormer();
    } else {
      return false;
    }
  });
};
//保存
const preserFormer = async () => {
  const params = {
    ...ruleForm,
    submitID: ruleForm.serviceID,
  };
  delete params.serviceID;
  try {
    const res = await GeneralDataReception({
      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.sysServiceTable);
  serviceList.value = serviceLists.map((item) => {
    item[item.setlabel] = item.k;
    item[item.setvalue] = item.v;
    return item;
  });
};
const queryQueryTemplateByID = async (queryTemplateID) => {
  try {
    const templateInfo = await myQuery(
      DATACONTENT_ID.sysQueryEditId,
      queryTemplateID.value
    );
    Object.entries(templateInfo[0]).forEach(([key, value]) => {
      ruleForm[key] = value;
    });
  } catch (error) {
    // this.$message.error(error)
  }
};
getDataSourceList();
queryServiceList();
queryQueryTemplateByID(queryTemplateID);
</script>

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