platformFront/src/components/knowledgeExtra/AddNewRule.vue

<style lang="less" scoped>
// @import "../../less/admin.less";
#AddRuleContent {
  width: 100%;
  min-width: 1000px;
  padding: 20px;
  padding-top: 50px;
  padding-bottom: 0;
  box-sizing: border-box;
  .table_form {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    .table_cell {
      flex: 1;
      min-width: 25%;
    }
  }
  /deep/ .el-input--mini .el-input__inner,
  .el-select {
    width: 100%;
    font-size: 14px;
  }
  .tip_text {
    // margin-top: -8px;
    font-size: 12px;
    color: red;
    line-height: 16px;
    // transform: scale(.8, .8);
  }
  .form_btn {
    width: 100%;
    background: #fff;
    padding-bottom: 20px;
    text-align: center;
  }
  /deep/ .el-form-item.is-success .el-input__inner,
  .el-form-item.is-success .el-textarea__inner {
    border-color: #c9c9c9 !important;
  }
  /deep/ .el-form-item.is-success .el-textarea__inner {
    border-color: #c9c9c9 !important;
  }
  /deep/ .el-form-item.is-success .el-textarea__inner {
    border-color: #c9c9c9 !important;
  }
  .my_error {
    position: absolute;
    top: 0;
    left: -16px;
    img {
      width: 12px;
      height: 12px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="less">

.popper_class {
  // background: #fff !important;
  border: 1px solid #FFA0A0 !important;
  color: #999999 !important;
  padding: 3px 50px 3px 10px !important;
  margin-left: -10px;
}
.popper__arrow{
  border-top-color: #FFA0A0!important;
}
</style>
<template>
  <div>
    <crumbs
      :title="title"
      :param="$route.params"
      linkTo="ZskRuleManager"
    ></crumbs>
    <div id="AddRuleContent">
      <el-form size="mini" :model="form" ref="ruleForm">
        <div class="table_form">
          <div class="table_cell">
            <!-- 规则名称 -->
            <el-form-item
              label-width="130px"
              label="规则名称："
              :rules="rules.parDescription"
              prop="parDescription"
            >
              <el-input
                style="width: 100%"
                v-model.trim="form.parDescription"
              />
            </el-form-item>
          </div>

          <div class="table_cell">
            <!-- 规则类型 -->
            <el-form-item
              label-width="130px"
              label="规则类型："
              :rules="rules.parRuleType"
              prop="parRuleType"
            >
              <el-select
                v-model="form.parRuleType"
                placeholder="请选择"
                @change="ruleTypeChange"
              >
                <el-option
                  v-for="item in ruleTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div class="my_error">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="scope.error"
                    placement="top-start"
                    popper-class="popper_class"
                  >
                    <img src="../../images/exclamationpoint.png" alt="" />
                  </el-tooltip>
                </div>
              </template>
              <div class="tip_text">
                注：更改规则类型，将会清空已填写的规则内容~
              </div>
            </el-form-item>
          </div>
          <div class="table_cell">
            <!-- 规则术语类型： -->
            <el-form-item
              label-width="130px"
              label="规则术语类型："
              :rules="rules.parLenCode"
              prop="parLenCode"
            >
              <template slot="error" slot-scope="scope">
                <div class="my_error">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="scope.error"
                    placement="top-start"
                    popper-class="popper_class"
                  >
                    <img src="../../images/exclamationpoint.png" alt="" />
                  </el-tooltip>
                </div>
              </template>
              <el-select
                v-model="form.parLenCode"
                placeholder="请选择"
                @change="ruleTermChange"
              >
                <el-option
                  v-for="item in ruleTermTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <div class="tip_text">
                注：更改规则术语类型，将会清空已填写的规则内容~
              </div>
            </el-form-item>
          </div>
          <div class="table_cell">
            <el-form-item
              label-width="130px"
              label="医学标准术语："
              :style="{ height: '100%' }"
              :rules="rules.parConceptId"
              prop="parConceptId"
            >
              <el-select
                clearable
                filterable
                remote
                :remote-method="searchConcept"
                v-model.trim="form.parConceptId"
                @change="parConceptIdChange"
              >
                <el-option
                  v-for="item in conceptList"
                  :key="item.conceptId"
                  :label="item.conceptName"
                  :value="item.conceptId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="table_cell" v-if="showHasSub" style="max-width: 25%">
            <el-form-item
              label-width="130px"
              label="有无子条件："
              :rules="rules.parHasSub"
              prop="parHasSub"
            >
              <el-select
                v-model="form.parHasSub"
                placeholder="请选择"
                @change="hasSubChange"
              >
                <el-option label="有" :value="1"></el-option>
                <el-option label="无" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div
            class="table_cell"
            style="flex: 3; max-width: 50%"
            v-if="showMsg"
          >
            <el-form-item
              label-width="130px"
              label="附加信息："
              :rules="rules.parMsg"
              prop="parMsg"
            >
              <el-input
                type="textarea"
                :rows="1"
                placeholder="请输入附加信息"
                v-model.trim="form.parMsg"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <!-- 表格 -->
        <AddNewRuleTable
          ref="tableView"
          v-if="form.parHasSub && tableShow"
          :klRuleByIdSub="form.klRuleByIdSub"
          :maxNum="subRuleMaxNum"
          @subTypeChange="subTypeChange"
          @searchConcept="searchConcept"
          @addGroup="addGroup"
          @delGroup="delGroup"
          @delGroupChild="delGroupChild"
          @setFormData="setFormData"
          @editKlRuleByIdSub="editKlRuleByIdSub"
          @clearValidate="clearValidate"
        />
        <el-form-item>
          <div class="form_btn">
            <el-button
              type="primary"
              size="medium "
              @click="submitForm('ruleForm')"
              >确定</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script type="text/javascript">
import api from "@api/knowledgeLib.js";
import { formRules } from "./rules";
import AddNewRuleTable from "./AddNewRuleTable";
export default {
  name: "AddRule",
  data() {
    return {
      title: "规则维护-添加规则",
      ruleTypeList: [], //规则类型列表  1
      ruleTermTypeList: [], //规则术语类型列表  2
      conceptList: [], //医学标准术语列表 3
      baseTypeList: [], //基础规则类型列表  4
      baseTermTypeList: [], //基础规则术语类型 5
      subRuleMaxNum: null, //规则内容中规则的限制个数
      isCopy: false,
      parId: null,
      msgDict: "", //显示附加信息的类型
      firstPlace: null,
      tableShow: true,
      form: {
        parDescription: "",
        parRuleType: "",
        parConceptId: "",
        parlibName: "",
        parLenName: "",
        parHasSub: undefined,
        parLenCode: "",
        parMsg: "",
        klRuleByIdSub: []
      },
      rules: formRules
    };
  },
  created() {
    this.getTypeList();
    this.setDict();
    const param = this.$route.params;
    let info = param.data;
    if (info) {
      this.parId = info.parId;
      this.isCopy = param.copy;
      this.title = "规则维护-" + (this.isCopy ? "复制" : "修改") + "规则";
      this.form = JSON.parse(JSON.stringify(info));
      // 编辑初始化选择框
      this.initEdidData();
    }
  },
  methods: {
    clearValidate(data) {
      this.$refs.ruleForm.clearValidate(data);
    },
    // 编辑初始化
    async initEdidData() {
      // 规则术语类型初始化
      const newruleTermTypeList = await this.ruleTypeList.find(
        (it) => it.id == this.form.parRuleType
      );
      this.ruleTermTypeList = await newruleTermTypeList.subMenuList;
      // 基础规则类型初始化
      const obj = await this.ruleTermTypeList.find(
        (it1) => it1.code == this.form.parLenCode
      );
      this.baseTypeList = obj.subMenuList;
      this.subRuleMaxNum = obj.number;

      this.conceptList = [
        { conceptName: this.form.parlibName, conceptId: this.form.parConceptId }
      ];
      if (this.form.parConceptId && this.checkFirstPlace && this.conceptList) {
        this.firstPlace = this.conceptList.find(
          (it) => it.conceptId === this.form.parConceptId
        );
        if (this.firstPlace) {
          this.firstPlace["checkedType"] = this.ruleTermCodeStr;
        }
      } else if (!this.form.parConceptId) {
        this.setInitGroupData();
        this.firstPlace = null;
      } else {
        this.firstPlace = null;
      }
      await this.form.klRuleByIdSub.forEach((item, i, arr) => {
        item.groupId = "groupId" + item.groupType;
        item.groupChildId = "child" + item.subId;
        //TODO => 赋值时一定要注意set更新页面
        this.$set(item, "baseTypes", [...this.baseTypeList]);
        this.$set(
          item,
          "baseTermTypeList",
          item.baseTypes.find((it2) => it2.type === item.subType).subMenuList
        );
        this.$set(item, "conceptList", [
          {
            conceptName: item.subLibName || item.subConceptName,
            conceptId: item.subConceptId
          }
        ]);
        if (item.subMaxOperator || item.subMinOperator) {
          item.dataType = "1";
        } else if (item.subEqValue) {
          item.dataType = "2";
        }

        // disable
        if (this.form.parHasSub && this.firstPlace) {
          if (arr[i - 1] && arr[i - 1].groupId == item.groupId) {
            this.$set(item, "disabled", false);
          } else {
            this.$set(item, "disabled", true);
          }
        }
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form));
          params.klRuleInfoSaveSub = params.klRuleByIdSub;
          delete params.klRuleByIdSub;
          params.klRuleInfoSaveSub.forEach((item, i, arr) => {
            if (i === 0) {
              item.groupType = 1;
            } else {
              if (item.groupId == arr[i - 1].groupId) {
                item.groupType = arr[i - 1].groupType;
              } else {
                item.groupType = arr[i - 1].groupType + 1;
              }
            }
          });
          params.klRuleInfoSaveSub.forEach((ite) => {
            delete ite.groupId;
            delete ite.groupChildId;
            delete ite.rowIndex;
            delete ite.baseTypes;
            delete ite.baseTermTypeList;
            delete ite.conceptList;
          });
          if (this.parId) {
            params.parId = this.isCopy ? undefined : this.parId;
            params.parStatus = this.isCopy ? 1 : this.form.parStatus;
          }
          this.saveRule(params);
        } else {
          return false;
        }
      });
    },
    // 子集修改父级的数组
    setFormData(index, data) {
      this.form.klRuleByIdSub[index].conceptList = data;
    },
    // table_form 规则类型选中
    ruleTypeChange(val) {
      this.form.parLenCode = "";
      this.form.parMsg = "";
      const obj = this.ruleTypeList.find((it) => it.id === val);
      this.ruleTermTypeList = obj.subMenuList;
      this.subRuleMaxNum = undefined;
      this.setInitGroupData();
    },
    // table_form 规则术语类型选中
    ruleTermChange(val) {
      this.form.parMsg = "";
      const obj = this.ruleTermTypeList.find((it) => it.code === val);
      this.form.parLenName = obj.name;
      this.baseTypeList = obj.subMenuList;
      this.subRuleMaxNum = obj.number;
      this.form.parHasSub = obj.subMenuList.length ? 1 : 0;
      this.setInitGroupData();
    },
    // 医学标准术语
    parConceptIdChange(val) {
      this.$nextTick(() => {
        if (val && this.checkFirstPlace && this.conceptList) {
          this.firstPlace = this.conceptList.find((it) => it.conceptId === val);
          if (this.firstPlace) {
            this.firstPlace["checkedType"] = this.ruleTermCodeStr;
          }
        } else if (!val) {
          this.setInitGroupData();
          this.firstPlace = null;
        } else {
          this.firstPlace = null;
        }
        if (this.form.parHasSub && this.firstPlace) {
          const dict =
            localStorage
              .getItem("zskDicts")
              .match(new RegExp(this.firstPlace.checkedType + "-\\d+", "g")) ||
            [];
          const types = dict[0].split("-");
          let obj = this.form.klRuleByIdSub;
          obj.forEach((item, i, arr) => {
            if (arr[i - 1] && arr[i - 1].groupId == item.groupId) {
              this.$set(item, "disabled", false);
            } else {
              this.$set(item, "disabled", true);
              this.$set(item, "subType", parseInt(types[2]));
              const subobj = this.baseTypeList.find(
                (it) => it.type == types[2]
              );
              this.$set(item, "baseTermTypeList", subobj.subMenuList);
              this.$set(item, "subLenCode", types[1]);
              this.$set(item, "subDescription", this.firstPlace.conceptName);
              this.$set(item, "subConceptId", this.firstPlace.conceptId);
              this.$set(item, "subConceptName", this.firstPlace.conceptName);
              this.$set(item, "conceptList", [this.firstPlace]);
            }
          });
          this.$set(this.form, "klRuleByIdSub", obj);
        }
      });
    },
    // 初始化表格
    setInitGroupData(init) {
      this.tableShow = false;
      const date = new Date().valueOf();
      this.$nextTick(() => {
        if (this.form.parHasSub && this.form.parHasSub != 0) {
          this.$set(this.form, "klRuleByIdSub", [
            {
              groupId: date,
              groupChildId: "child" + new Date().valueOf(),
              baseTypes: this.baseTypeList,
              baseTermTypeList: [],
              conceptList: [],
              subDescription: "",
              parRuleType: "",
              subConceptId: "",
              subType: "",
              subMaxOperator: "",
              subMaxUnit: "",
              subMaxValue: "",
              subMinOperator: "",
              subMinUnit: "",
              subMinValue: "",
              subEqValue: "",
              subLenCode: "",
              dataType: ""
            }
          ]);
        } else {
          this.$set(this.form, "klRuleByIdSub", []);
        }

        if (!init) {
          this.form.parConceptId = ""; //医学标准术语清空
          this.conceptList = []; //下拉列表清空
          this.firstPlace = null;
        }
        this.tableShow = true;
      });
    },
    // 有无子条件切换
    hasSubChange(val) {
      if (val) {
        this.setInitGroupData(true);
      } else {
        this.form.klRuleByIdSub = [];
      }
    },
    // 基础规则类型切换
    subTypeChange(val, index) {
      // index
      const obj = this.baseTypeList.find((it) => it.type === val);
      this.form.klRuleByIdSub[index].baseTermTypeList = obj.subMenuList;
      this.form.klRuleByIdSub[index].subLenCode = "";
      this.form.klRuleByIdSub[index].dataType = "";
      this.clearConcept(index);
      this.clearNumText(index);
    },
    clearConcept(index) {
      this.form.klRuleByIdSub[index].subConceptId = "";
      this.conceptList = [];
    },
    clearNumText(index) {
      this.form.klRuleByIdSub[index].subMaxOperator = "";
      this.form.klRuleByIdSub[index].subMaxValue = "";
      this.form.klRuleByIdSub[index].subMaxUnit = "";
      this.form.klRuleByIdSub[index].subMinOperator = "";
      this.form.klRuleByIdSub[index].subMinValue = "";
      this.form.klRuleByIdSub[index].subMinUnit = "";
      this.form.klRuleByIdSub[index].subEqValue = "";
      this.form.klRuleByIdSub[index].subEqOperator = "";
    },
    editKlRuleByIdSub(data) {
      this.form.klRuleByIdSub = data;
    },
    // 添加分组 || 规则
    addGroup(date, arg = { index: null, groupId: null }) {
      /**
       * @params
       *    date:存在则添加规则 不存在则添加分组
       *    arg:{index:添加规则用索引，groupId:添加分组用确切id}
       */
      !date && (date = new Date().valueOf());
      const obj = {
        groupId: date,
        groupChildId: "child" + new Date().valueOf(),
        baseTypes: this.baseTypeList,
        baseTermTypeList: [],
        conceptList: [],
        subDescription: "",
        parRuleType: "",
        subConceptId: "",
        subType: "",
        subMaxOperator: "",
        subMaxUnit: "",
        subMaxValue: "",
        subMinOperator: "",
        subMinUnit: "",
        subMinValue: "",
        subEqValue: "",
        subLenCode: "",
        dataType: ""
      };
      if (typeof arg.index == "number") {
        // 添加规则 直接在当前位置之后添加
        this.form.klRuleByIdSub.splice(arg.index + 1, 0, obj);
      } else {
        // 添加分组 在列表中相同groupId之后添加

        // 添加分组时判断是否需要加disabled和添加默认值
        if (this.form.parHasSub && this.firstPlace) {
          obj.disabled = true;
          const dict =
            localStorage
              .getItem("zskDicts")
              .match(new RegExp(this.firstPlace.checkedType + "-\\d+", "g")) ||
            [];
          const types = dict[0].split("-");
          this.$set(obj, "disabled", true);
          this.$set(obj, "subType", parseInt(types[2]));
          const subobj = this.baseTypeList.find((it) => it.type == types[2]);
          this.$set(obj, "baseTermTypeList", subobj.subMenuList);
          this.$set(obj, "subLenCode", types[1]);
          this.$set(obj, "subDescription", this.firstPlace.conceptName);
          this.$set(obj, "subConceptId", this.firstPlace.conceptId);
          this.$set(obj, "subConceptName", this.firstPlace.conceptName);
          this.$set(obj, "conceptList", [this.firstPlace]);
        }
        var i = -1;
        this.form.klRuleByIdSub.forEach((item, inx) => {
          if (item.groupId === arg.groupId) {
            i = inx;
          }
        });
        this.form.klRuleByIdSub.splice(i + 1, 0, obj);
      }
      this.$nextTick(() => {
        this.$refs.tableView.scrollFun();
      });
    },
    // 删除分组
    delGroup(groupId) {
      const list = this.form.klRuleByIdSub.filter(
        (item) => item.groupId != groupId
      );
      this.form.klRuleByIdSub = list;
    },
    // 删除规则
    delGroupChild(groupChildId) {
      const newGroupList = this.form.klRuleByIdSub.filter(
        (item) => item.groupChildId != groupChildId
      );
      this.form.klRuleByIdSub = newGroupList;
    },
    setDict() {
      this.dict = localStorage.getItem("zskDicts");
      this.msgDict = localStorage.getItem("zskMsgDict");
      this.subDict = localStorage.getItem("zskSubDict");
    },
    showConfirmDialog(msg, resolve) {
      this.$alert(msg, "提示", {
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          resolve();
        })
        .catch(() => {});
    },
    searchConcept(val) {
      const param = {
        excludedConceptIds: [this.form.parRuleType],
        libType: this.form.parLenCode,
        name: val
      };
      api
        .searchConcept(param)
        .then((res) => {
          if (res.data.code == "0") {
            const data = res.data.data;
            this.conceptList = data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getTypeList() {
      this.ruleTypeList = JSON.parse(localStorage.getItem("zskTypesList"));
    },
    saveRule(params) {
      api.saveRule(params).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.$router.push({
            name: "ZskRuleManager",
            params: Object.assign({}, this.$route.params, { currentPage: 1 })
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    }
  },
  watch: {
    "form.klRuleByIdSub": {
      handler(val) {
        this.form.klRuleByIdSub.forEach((item, i, arr) => {
          if (i == 0) {
            item.rowIndex = 1;
          } else if (item.groupId == arr[i - 1].groupId) {
            item.rowIndex = arr[i - 1].rowIndex;
          } else {
            item.rowIndex = arr[i - 1].rowIndex + 1;
          }
        });
      },
      deep: true
    }
    // "form.parHasSub"(val) {
    //   console.log(val);
    //   console.log(this.form);
    //   // if (!val || val == 0) {
    //   //   // this.form.klRuleByIdSub = [];
    //   //   this.$set(this.form, "klRuleByIdSub", []);

    //   //   console.log(this.form);
    //   // }
    // }
  },
  computed: {
    disable: function () {
      return Object.keys(this.firstPlace || {}).length > 0;
    },
    ruleTermCodeStr: function () {
      const str = this.form.parRuleType + "-" + this.form.parLenCode;
      if (str.length <= 1) {
        return "";
      }
      return str;
    },
    showMsg: function () {
      return (
        this.ruleTermCodeStr.length > 2 &&
        this.msgDict.indexOf(this.ruleTermCodeStr) > -1
      );
    },
    showHasSub() {
      if (this.ruleTermCodeStr.length > 2) {
        return this.subDict.indexOf(this.ruleTermCodeStr) != -1;
      }
      return false;
    },
    checkFirstPlace: function () {
      return this.dict.indexOf(this.ruleTermCodeStr) > -1;
    }
  },
  components: { AddNewRuleTable }
};
</script>