Web_QiCaiYao/pages/inspect.vue

<!-- 质检报告 -->
<template>
  <div class="wrapper_1200 inspect">
    <el-form
      :model="where"
      label-width="100px"
      class="tab_form"
      style="margin-bottom: 25px"
      :rules="ruler"
      ref="where"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="品  名：" prop="name">
            <el-input v-model="where.name" placeholder="请输入品名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="产品批号：" prop="code">
            <el-input
              v-model="where.code"
              placeholder="请输入产品批号"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="生产厂家：" prop="business">
            <el-input
              v-model="where.business"
              placeholder="请输入生产厂家"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="3" style="display: flex; justify-content: flex-end">
          <el-button size="small" type="primary" @click="getData('where')"
            >查询</el-button
          >
          <el-button size="small" type="primary" @click="resetForm('where')"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div class="isCont" v-if="!qaCheckData">
      <div>“品名、产品批号、生产厂家在哪里看？”</div>
      <img src="@/assets/images/quality_test.png" alt="" />
    </div>
    <div class="isCont">
      <p v-html="qaCheckData"></p>
    </div>
  </div>
</template>

<script>
import Setting from "~/setting";
export default {
  name: "inspect",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      imgUrl: Setting.uplodBaseURL,
      where: {
        name: "",
        code: "",
        business: "",
      },
      ruler: {
        name: [{ required: true, message: "请输入品名", trigger: "blur" }],
        code: [{ required: true, message: "请输入产品批号", trigger: "blur" }],
        business: [{ required: true, message: "请输入生产厂家", trigger: "blur" }],
      },
      qaCheckData: undefined,
      imgUrlList: [],
    };
  },
  head() {
    return {
      title: "质检报告-" + this.$store.state.titleCon,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //方法集合
  methods: {
    getData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { name, code, business } = { ...this.where };
          let obj = {
            name,
            code,
            business,
          };
          this.$axios.post(`/config/qaCheck`, obj).then((res) => {
            console.log(res.data.content);
            this.qaCheckData = res.data.content;
            let qaCheckData = this.qaCheckData;
            qaCheckData = qaCheckData.replace(
              /\<img/gi,
              '<img style=" width: 50%;height:auto;margin:10px auto"'
            );
            this.qaCheckData = qaCheckData;
            // this.imgUrlList = JSON.parse(res.data.content);
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 32px;
    text-align-last: justify;
  }
  .el-button--primary {
    background-color: var(--themeColor);
    border-color: var(--themeColor);
  }
}
.inspect {
  background: #ffffff;
  border-radius: 4px;
  margin: 30px auto;
  padding: 30px;

  .isCont {
    text-align: center;
    img {
      width: 300px;
      margin: 20px auto;
    }
  }
}
</style>