accout-ui/src/views/purchase/orderRecord/components/examView.vue

<template>
  <el-row>
    <el-col :span="24">
      <el-form
        ref="examForm"
        :model="examForm"
        :rules="examsThis"
        label-width="100px"
        class="demo-examForm"
      >
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form-item label="审核" prop="status">
              <el-select
                @change="statusChange"
                v-model="examForm.status"
                style="width: 100%"
                placeholder="请选择审核状态"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary" @click="submitForm"
              >提交审核结果</el-button
            >
          </el-col>
           <el-col :span="24">
            <el-form-item label="审核备注" prop="remark">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入审核备注"
                maxlength="250"
                show-word-limit
                v-model="examForm.remark" /></el-form-item
          ></el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import asyncRequest from "@/apis/service/purchase/orderRecord";
import resToken from "@/mixins/resToken";
export default {
  name: "orderRecord",
  props: ["id", "newTime", "payNo", "companyNo"],
  mixins: [resToken],
  data() {
    return {
      options: [
        {
          value: "3",
          label: "通过",
        },
        {
          value: "2",
          label: "驳回",
        },
      ],
      examForm: {
        id: this.id,
        status: "3",
        remark: "",
      },
      examsThis: this.exams,
      exams: {
        status: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        remark: [
          {
            required: false,
            message: "请输入审核备注",
            trigger: "bulr",
          },
        ],
      },
    };
  },

  watch: {
    newTime: function (old, val) {
      if (old !== val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      console.log(this.payNo);
      this.loading = true;
      this.examsThis = this.exams;
      await this.resetForm();
      this.statusChange;
      this.loading = false;
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.examForm) {
          this.$refs.examForm.resetFields();
          this.$refs.examForm.clearValidate();
          this.examForm = {
            id: this.id,
            status: "3",
          };
        }
      });
    },
    statusChange() {
      console.log(this.examForm.status);
      if (this.examForm && this.examForm.status == this.options[0].value) {
        this.examsThis.remark[0].required = false;
      } else {
        this.examsThis.remark[0].required = true;
      }
    },
    async submitForm() {
      await this.$refs.examForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.examForm));
          let model = {
            sid: obj.id,
            payNo: this.payNo,
            status: obj.status,
            remark: obj.remark,
          };
          let res = {};
          res = await asyncRequest.again(model);
          this.loading = false;
          if (res && res.code === 0) {
            const title = "业务审核成功！";
            this.$notify.success({
              title,
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refreshAll");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.activeOptions = [];
        this.parmValue.contector = query;
        const res = await asyncRequest.supplierlist(this.parmValue);
        if (res.code === 0 && res.data && res.data.list) {
          this.activeOptions = res.data.list;
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      } else {
        this.options = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>

   <style lang="scss" scoped>
.orderRecord {
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
  .scale {
    li {
      height: 40px;
      line-height: 40px;
      &.fuhao {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #97a8be;
          font-size: 20px;
        }

        &.dengyu {
          i {
            // font-size: 26px;
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg);
          }
        }
      }
      .Addend {
        i.fuhao-i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #97a8be;
          font-size: 20px;
        }
      }
    }
  }
}
</style>