spc/src/views/quality-planning/components/interpretationScheme-add.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-06-21 16:26:26
 * @Description:
-->
<template>
  <div class="baseDialog">
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
      <template #title>
        <slot name="title">
          <div class="titleStyle">{{ !dataForm.id ? $t('add') : $t('edit') }}</div>
        </slot>
      </template>
    <el-row :gutter="5">
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-col :span="12">
          <el-form-item label="编码" prop="code">
            <el-input
              v-model="dataForm.code"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="编码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-divider content-position="left">监控图形一</el-divider>
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              style="width:100%;font-size:20px;margin:8px 5px"
              v-for="item in ruleArr"
              :key="item.id"
              :label="item.id"
              >{{ item.ruleKey.split("x")[0] }}
              <el-input
                v-show="item.ruleKey.split('x').length >= 2"
                v-model="item.ruleValue1"
                @blur="changeRule(item)"
                style="width:60px"
              ></el-input>
              {{ item.ruleKey.split("x")[1] }}
              <el-input
                v-show="item.ruleKey.split('x').length >= 3"
                v-model="item.ruleValue2"
                @blur="changeRule(item)"
                style="width:60px"
              ></el-input>
              {{ item.ruleKey.split("x")[2] }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      urlOptions: {
        submitURL: "/qualityPlanning/myInterpretationScheme/",
        infoURL: "/qualityPlanning/myInterpretationScheme",
      },
      visible: false,
      dataForm: {
        id: "",
        code: "",
        name: "",
        interpretationSchemeIds: "",
      },
      ruleArr: [],
      checkList: [],
      dataRule: {
        code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        type: [{ required: true, message: "单位分类不能为空", trigger: "change" }],
      },
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || "";
      this.checkList = [];
      this.ruleArr = [];
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http
            .get(`${this.urlOptions.infoURL}/${this.dataForm.id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.dataForm = res.data;
            })
            .catch(() => {});
          this.$http
            .post(
              `/qualityPlanning/interpretationScheme/listByMyInterpretationSchemeId?myInterpretationSchemeId=${this.dataForm.id}`
            )
            .then(({ data: res }) => {
              this.ruleArr = res;
              res.forEach((item) => {
                if (item.flag === 1) {
                  this.checkList.push(item.id);
                }
              });
            })
            .catch(() => {});
        }
      });
    },
    changeRule(item) {
      this.$http
        .put("/qualityPlanning/interpretationScheme", item)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.ruleArr.forEach((item) => {
          if (this.checkList.findIndex((item1)=>item1===item.id) !== -1) {
            item.flag = 1;
          } else {
            item.flag = 0;
          }
        });
        this.$http
          .put("/qualityPlanning/interpretationScheme/batchUpdate", this.ruleArr)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
          })
          .catch(() => {});
        this.$http[!this.dataForm.id ? "post" : "put"](this.urlOptions.submitURL, this.dataForm)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.visible = false;
                this.$emit("successSubmit");
              },
            });
          })
          .catch(() => {});
      });
    },
  },
};
</script>

<style>
.baseDialog .el-dialog__header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  padding: 13px 24px;
  border-bottom: 1px solid #e9e9e9;
}
.baseDialog .el-dialog__header .titleStyle::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.baseDialog .el-dialog__body {
  padding-left: 24px;
  padding-right: 24px;
}
</style>