edit 规则维护 :基本布局

src/components/knowledgeExtra/AddNewRule.vue

@@ -1,496 +1,350 @@
+<style lang="less" scoped>
+@import "../../less/admin.less";
+.AddRuleContent {
+  width: 100%;
+  min-width: 1000px;
+  padding: 20px;
+  padding-top: 50px;
+  box-sizing: border-box;
+  .table_form {
+    width: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    .table_flex_item {
+      min-width: 25%;
+      // flex: 1;
+      padding-right: 20px;
+      box-sizing: border-box;
+    }
+  }
+  /deep/ .el-input--mini .el-input__inner,
+  .el-select {
+    width: 100%;
+  }
+}
+</style>
 <template>
-    <div>
-        <crumbs :title="title" :param="$route.params" linkTo="ZskRuleManager"></crumbs>
-        <div class="contents">
-            <div class="content">
-                <el-form ref="form" :label-position="labelPosition" class="add-new-form" label-width="130px" :model="form" :rules="rules">
-                    <el-form-item label="规则名称：" prop="parDescription">
-                        <el-input v-model.trim = "form.parDescription"></el-input>
-                    </el-form-item>
-                    <el-form-item label="规则类型：" prop="parRuleType">
-                        <el-select v-model="form.parRuleType"
-                                   placeholder="请选择"
-                                   size="small"
-                                   @change="ruleTypeChange"
-                                   >
-                            <el-option
-                                    v-for="item in ruleTypeList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id">
-                            </el-option>
-                        </el-select>
-                        <span class="tip-text">注：更改规则类型，将会清空已填写的规则内容~</span>
-                    </el-form-item>
-                    <el-form-item label="规则术语类型：" prop="parLenCode">
-                        <el-select v-model="form.parLenCode"
-                                   placeholder="请选择"
-                                   size="small" @change="ruleTermChange">
-                            <el-option
-                                    v-for="item in ruleTermTypeList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.code">
-                            </el-option>
-                        </el-select>
-                        <span class="tip-text">注：更改规则术语类型，将会清空已填写的规则内容~</span>
-                    </el-form-item>
-                    <el-form-item  class="addDepartFormItem" label="医学标准术语：" prop="parConceptId">
-                        <el-select clearable filterable remote :remote-method="searchConcept" v-model.trim="form.parConceptId">
-                            <el-option
-                                    v-for="item in conceptList"
-                                    :key="item.conceptId"
-                                    :label="item.conceptName"
-                                    :value="item.conceptId">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item v-if="showHasSub" label="有无子条件：" prop="parHasSub">
-                        <el-select v-model="form.parHasSub"
-                                   placeholder="请选择"
-                                   size="small" @change="hasSubChange">
-                            <el-option
-                                    v-for="item in hasSub"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item v-if="showMsg" label="附加信息：" prop="parMsg" class="parMsg">
-                        <el-input type="textarea" :rows="3" placeholder="请输入附加信息" v-model.trim="form.parMsg"></el-input>
-                    </el-form-item>
-                    <el-form-item v-if="form.parHasSub===1" label="规则内容：" prop="remind" class="discDesc">
-                        <SubRulesGroup v-for="(group,i) in subGroups"
-                                       ref="groups"
-                                       :key="i"
-                                       :data="group"
-                                       :baseTypes="baseTypeList"
-                                       :inx="i"
-                                       :maxNum="subRuleMaxNum"
-                                       :firstPlace="firstPlace"
-                                       :isLast="subGroups.length===1"
-                                       @addGroup="addGroup"
-                                       @delGroup="delGroup"></SubRulesGroup>
-                    </el-form-item>
-                    <el-button class="disclButn" size="small" type="primary" @click="confirm">保存</el-button>
-                </el-form>
-            </div>
+  <div>
+    <crumbs
+      :title="title"
+      :param="$route.params"
+      linkTo="ZskRuleManager"
+    ></crumbs>
+    <div class="AddRuleContent">
+      <el-form ref="form" size="mini" :model="form" :rules="rules">
+        <div class="table_form">
+          <!-- 规则名称 -->
+          <el-form-item
+            class="table_flex_item"
+            label-width="130px"
+            label="规则名称："
+            prop="parDescription"
+          >
+            <el-input style="width: 100%" v-model.trim="form.parDescription" />
+          </el-form-item>
+          <!-- 规则类型 -->
+          <el-form-item
+            class="table_flex_item"
+            label-width="130px"
+            label="规则类型："
+            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>
+            <!-- <div class="tip-text">
+              注：更改规则类型，将会清空已填写的规则内容~
+            </div> -->
+          </el-form-item>
+          <!-- 规则术语类型： -->
+          <el-form-item
+            class="table_flex_item"
+            label-width="130px"
+            label="规则术语类型："
+            prop="parLenCode"
+          >
+            <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>
+          <!-- 医学标准术语 -->
+          <el-form-item
+            class="table_flex_item"
+            label-width="130px"
+            label="医学标准术语："
+            prop="parConceptId"
+          >
+            <el-select
+              clearable
+              filterable
+              remote
+              :remote-method="searchConcept"
+              v-model.trim="form.parConceptId"
+            >
+              <el-option
+                v-for="item in conceptList"
+                :key="item.conceptId"
+                :label="item.conceptName"
+                :value="item.conceptId"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            class="table_flex_item"
+            label-width="130px"
+            v-if="showHasSub"
+            label="有无子条件："
+            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>
+          <el-form-item
+            class="table_flex_item"
+            style="flex: 1; minwidth: 500px"
+            label-width="130px"
+            v-if="showMsg"
+            label="附加信息："
+            prop="parMsg"
+          >
+            <el-input
+              type="textarea"
+              :rows="3"
+              placeholder="请输入附加信息"
+              v-model.trim="form.parMsg"
+            ></el-input>
+          </el-form-item>
         </div>
+        <!-- 表格 -->
+        <AddNewRuleTable
+          v-if="form.klRuleInfoSaveSub.length != 0"
+          :klRuleInfoSaveSub="form.klRuleInfoSaveSub"
+          :baseTypes="baseTypeList"
+          :baseTermTypeList="baseTermTypeList"
+          @subTypeChange="subTypeChange"
+          @searchConcept="searchConcept"
+        />
+      </el-form>
     </div>
+  </div>
 </template>
 <script type="text/javascript">
-    import api from '@api/knowledgeLib.js';
-    import SubRulesGroup from './SubRulesGroup'
-    export default {
-        name:'AddRule',
-        data(){
-            return{
-                labelPosition:'left',
-                isFirst:true,
-                isCopy:false,
-                dict:'',        //规则内容固定的类型
-                msgDict:'',     //显示附加信息的类型
-                title:'规则维护-添加规则',
-                ruleTermTypeList:[],
-                ruleTypeList:[],
-                conceptList:[],
-                baseTypeList:[],
-                conceptName:'',
-                subRuleMaxNum:null,     //规则内容中规则的限制个数
-                firstPlace:null,
-                subGroups:[[{
-                    subDescription:'',
-                    parRuleType:'',
-                    subConceptId:'',
-                    subType:'',
-                    subMaxOperator:'',
-                    subMaxUnit:'',
-                    subMaxValue:'',
-                    subMinOperator:'',
-                    subMinUnit:'',
-                    subMinValue:'',
-                    subEqValue:'',
-                    subLenCode:'',
-                    dataType:'',
-                }]],
-                form:{
-                    parDescription:'',
-                    parRuleType:'',
-                    parConceptId:'',
-                    parlibName:'',
-                    parLenName:'',
-                    parHasSub:undefined,
-                    parLenCode:'',
-                    parMsg:'',
-                    klRuleInfoSaveSub:[],
-                },
-                parId:null,
-                rules:{
-                    parDescription:[{ required: true, message: '请输入规则名称',trigger: ['blur'] },{
-                        validator: (rule,value,callback)=>{
-                            if(value.length>100){
-                                callback(new Error('规则名称不能超过100字'));
-                            }else{
-                                callback();
-                            }}, trigger: 'change'
-                    }],
-                    parRuleType:[{ required: true, message: '请选择规则类型',trigger: ['change'] }],
-                    parLenCode:[{ required: true, message: '请选择规则术语类型',trigger: ['change'] }],
-                    parConceptId:[{ required: true, message: '请输入医学标准术语',trigger: ['blur'] }],
-                    parHasSub:[{ required: true, message: '请选择有无子条件',trigger: ['change'] }],
-                    parMsg:[{ required: true, message: '请输入附加信息',trigger: ['change'] },{
-                        validator: (rule,value,callback)=>{
-                            if(value.length>100){
-                                callback(new Error('附加信息不能超过100字'));
-                            }else{
-                                callback();
-                            }}, trigger: 'change'
-                    }]
-                },
-                hasSub:[{name:'有',id:1},{name:'无',id:0},
-                ]
-            }
-        },
-        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=Object.assign({},this.form,info);
-                this.conceptList=[{conceptName:this.form.parlibName,conceptId:this.form.parConceptId}];
-                this.subGroups=this.formatGroupDatas(info.klRuleByIdSub);
-
-            }
-        },
-        watch:{
-            'form.parRuleType':function(val){
-                const obj = this.ruleTypeList.find((it)=>it.id===val);
-                this.ruleTermTypeList = obj.subMenuList;
-            },
-            'form.parLenCode':function(val){
-                if(!val){
-                    this.baseTypeList = [];
-                    return ;
-                }
-                const obj = this.ruleTermTypeList.find((it)=>it.code===val);
-                this.baseTypeList = obj.subMenuList;
-                this.subRuleMaxNum=obj.number;
-            },
-            'form.parConceptId':function(val){
-                if(val&&this.checkFirstPlace&&this.conceptList) {
-                    this.firstPlace = this.conceptList.find((it) => it.conceptId === val);
-                    this.firstPlace['checkedType']=this.ruleTermCodeStr;
-                }else if(!val){
-                    this.setInitGroupData();
-                    this.firstPlace =null;
-                }else{
-                    this.firstPlace =null;
-                }
-            }
-        },
-        components:{
-            SubRulesGroup
-        },
-        computed:{
-            ruleTermCodeStr:function(){
-                return this.form.parRuleType+"-"+this.form.parLenCode
-            },
-            checkFirstPlace:function(){
-                return this.dict.indexOf(this.ruleTermCodeStr)>-1;
-            },
-            showMsg:function(){
-                return this.ruleTermCodeStr.length>1&&this.msgDict.indexOf(this.ruleTermCodeStr)>-1;
-            },
-            showHasSub:function(){
-                return this.subDict.indexOf(this.ruleTermCodeStr)>-1;
-            }
-        },
-        methods:{
-            hasSubChange(val){
-                if(val){
-                    this.subGroups = [[{
-                        subDescription:'',
-                        parRuleType:'',
-                        subConceptId:'',
-                        subType:'',
-                        subMaxOperator:'',
-                        subMaxUnit:'',
-                        subMaxValue:'',
-                        subMinOperator:'',
-                        subMinUnit:'',
-                        subMinValue:'',
-                        subEqValue:'',
-                        subLenCode:'',
-                        dataType:'',
-                    }]];
-                }
-            },
-            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(() => {});
-            },
-            formatGroupDatas(data){
-                let arr=[];
-                data.map((it)=>{
-                    if(!arr[it.groupType]){arr[it.groupType]=[];}
-                    if(it.subMaxOperator||it.subMinOperator){
-                        it.dataType='1';
-                    }else if(it.subEqValue){
-                        it.dataType='2';
-                    }
-                    arr[it.groupType].push(it);
-                });
-                arr = arr.filter((it)=>{if(it)return it});
-                return arr;
-            },
-            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);
-                });
-            },
-            ruleTypeChange(val){       //规则类型选中
-                this.form.parRuleType=val;
-                this.form.parLenCode='';
-                this.form.parMsg="";
-                const obj = this.ruleTypeList.find((it)=>it.id===val);//console.log(val)
-                this.ruleTermTypeList = obj.subMenuList;
-                this.setInitGroupData();
-            },
-            ruleTermChange(val){        //规则术语类型选中
-                this.form.parLenCode=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.setInitGroupData();
-                this.form.parHasSub=obj.subMenuList.length?1:0;
-            },
-            getTypeList(){
-              const typeListData = JSON.parse(localStorage.getItem("zskTypesList"));
-              this.ruleTypeList = typeListData;
-            },
-            setInitGroupData(){
-              this.subGroups = [[{
-                  subDescription:'',
-                  parRuleType:'',
-                  subConceptId:'',
-                  subType:'',
-                  subMaxOperator:'',
-                  subMaxUnit:'',
-                  subMaxValue:'',
-                  subMinOperator:'',
-                  subMinUnit:'',
-                  subMinValue:'',
-                  subEqValue:'',
-                  subLenCode:'',
-                  dataType:'',
-              }]];
-              this.form.parConceptId='';//医学标准术语清空
-              this.conceptList=[];  //下拉列表清空
-            },
-            addGroup(){
-                let temp = {
-                    subDescription:'',
-                    subConceptId:'',
-                    subType:'',
-                    subLenCode:'',
-                    dataType:'',
-                    subMaxOperator:'',
-                    subMaxUnit:'',
-                    subMaxValue:'',
-                    subMinOperator:'',
-                    subMinUnit:'',
-                    subMinValue:'',
-                    subEqValue:'',
-                };
-                if(this.checkFirstPlace){
-                    const obj=this.subGroups[0][0];
-                    temp = {
-                        subDescription:obj.subConceptName,
-                        subConceptId:obj.subConceptId,
-                        subConceptName:obj.subConceptName,
-                        subLenCode:this.form.parLenCode,
-                        subLenName: this.form.parLenName,
-                        subLibName: this.form.parlibName,
-                        subType:obj.subType,
-                        dataType:'',
-                        subMaxOperator:'',
-                        subMaxUnit:'',
-                        subMaxValue:'',
-                        subMinOperator:'',
-                        subMinUnit:'',
-                        subMinValue:'',
-                        subEqValue:'',
-                    };
-                }
-                this.subGroups.push([temp]);
-            },
-            delGroup(i){
-                //this.subGroups.splice(i,1);
-                this.$set(this.subGroups,i,null);
-            },
-            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'
-                        });
-                    }
-                })
-            },
-            formatGroups(){
-                let obj = [];
-                this.subGroups.map((item,i)=>{
-                    item&&item.map((it)=>{
-                       obj.push({...it,groupType:i+1});
-                   })
-                });
-                return obj
-            },
-            validateForms(callBack){
-                this.$refs['form'].validate((valid) => {
-                    if (valid) {
-                        const groupsRef = this.$refs['groups'];
-                        if(!groupsRef||groupsRef.length===0){
-                            callBack();
-                            return;
-                        }
-                        let groupRef=null,goOn=true;
-                        for(let i=0;i<groupsRef.length;i++){
-                            groupRef=groupsRef[i].$refs['group'];
-                            for(let j=0;j<groupRef.length;j++){
-                                groupRef[j].$refs['groupData'].validate((valid)=>{
-                                    if(!valid){
-                                        goOn=false;
-                                    }
-                                })
-                            }
-                        }
-                        if(goOn){
-                            callBack();
-                        }
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            confirm(){
-                const _this=this;
-                this.validateForms(function(){
-                    delete _this.form.klRuleByIdSub;
-                    _this.form.klRuleInfoSaveSub = _this.form.parHasSub?_this.formatGroups():undefined;
-                    let params = _this.form;
-                    if(_this.parId){//修改/复制
-                        params = Object.assign({},_this.form,{parId:_this.isCopy?undefined:_this.parId,parStatus:_this.isCopy?1:_this.form.parStatus})
-                    }
-                    console.log(params)
-                    _this.saveRule(params);
-                });
-            },
-        }
+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: "", //显示附加信息的类型
+      form: {
+        parDescription: "",
+        parRuleType: "",
+        parConceptId: "",
+        parlibName: "",
+        parLenName: "",
+        parHasSub: undefined,
+        parLenCode: "",
+        parMsg: "",
+        klRuleInfoSaveSub: []
+      },
+      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 ? "复制" : "修改") + "规则";
     }
-</script>
-<style lang="less">
-    @import "../../less/admin.less";
-    .content{
-        background: #fff;
-        // padding: 20px 20px 30px;
-        padding: 20px 20px 50px;
-        color: #545455;
-        min-width: 980px;
-        position: relative;
-        .tip-text{
-            color:#F56C6C;
-            margin-left: 10px;
-        }
-        .conceptItem{
-            padding: 0 10px;
-            cursor: pointer;
-            height: 32px;
-            line-height: 32px;
-            &:hover{
-                background: #ebedf1;
-            }
-        }
-        .discDesc{
-            margin-bottom: 20px;
-        }
-        .disclButn{
-            position: absolute;
-            right: 80px;
-            bottom: 10px;
+  },
+  computed: {},
+  methods: {
+    // table_form 规则类型选中
+    ruleTypeChange(val) {
+      this.form.parLenCode = "";
+      this.form.parMsg = "";
+      const obj = this.ruleTypeList.find((it) => it.id === val); //console.log('???',val,obj)
+      this.ruleTermTypeList = obj.subMenuList;
+    },
+    // 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.setInitGroupData();
+      this.form.parHasSub = obj.subMenuList.length ? 1 : 0;
+    },
+    // 有无子条件切换
+    hasSubChange(val) {
+      if (val) {
+        console.log(val);
+        this.form.klRuleInfoSaveSub = [
+          {
+            subDescription: "",
+            parRuleType: "",
+            subConceptId: "",
+            subType: "",
+            subMaxOperator: "",
+            subMaxUnit: "",
+            subMaxValue: "",
+            subMinOperator: "",
+            subMinUnit: "",
+            subMinValue: "",
+            subEqValue: "",
+            subLenCode: "",
+            dataType: ""
+          }
+        ];
+      } else {
+        this.form.klRuleInfoSaveSub = [];
+      }
+    },
+    // 基础规则类型切换
+    subTypeChange(val, index) {
+      // index
+      const obj = this.baseTypeList.find((it) => it.type === val);
+      console.log("??", val, this.baseTypeList, obj);
+      this.baseTermTypeList = obj.subMenuList;
+
+      this.form.klRuleInfoSaveSub[index].subLenCode = "";
+      this.form.klRuleInfoSaveSub[index].dataType = "";
+      this.clearConcept(index);
+      this.clearNumText(index);
+    },
+    clearConcept(index) {
+      this.form.klRuleInfoSaveSub[index].subConceptId = "";
+      this.conceptList = [];
+    },
+    clearNumText(index) {
+      this.form.klRuleInfoSaveSub[index].subMaxOperator = "";
+      this.form.klRuleInfoSaveSub[index].subMaxValue = "";
+      this.form.klRuleInfoSaveSub[index].subMaxUnit = "";
+      this.form.klRuleInfoSaveSub[index].subMinOperator = "";
+      this.form.klRuleInfoSaveSub[index].subMinValue = "";
+      this.form.klRuleInfoSaveSub[index].subMinUnit = "";
+      this.form.klRuleInfoSaveSub[index].subEqValue = "";
+      this.form.klRuleInfoSaveSub[index].subEqOperator = "";
+    },
+    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"));
+      console.log("ruleTypeList", this.ruleTypeList);
+    },
+    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"
+          });
         }
+      });
     }
-    .add-new-form{
-        .el-form-item__label{
-            text-align: right;
-        }
-        .addDepartFormItem {
-            position: relative;
-        }
-        .itemList {
-            position: absolute;
-            // display: none;
-            background: #fff;
-            width: 188px;
-            max-height: 160px;
-            border: 1px solid #DCDFE6;
-            left: 0;
-            top: 37px;
-            z-index: 2;
-            overflow-y: auto;
-        }
-        .indexList {
-            left: 42px;
-            top: 78px;
-        }
-        .el-input__prefix, .el-input__suffix{
-            /*top:-2px;*/
-            right: 3px;
-        }
-        .el-input--suffix .el-input__inner{
-            padding-right: 22px;
-        }
-        .el-input,.el-input__inner{
-            width: 190px;
-            line-height: 32px;
-            height: 32px;
-        }
-        .el-input__icon{
-            line-height: 32px;
-        }
+  },
+  computed: {
+    ruleTermCodeStr: function () {
+      return this.form.parRuleType + "-" + this.form.parLenCode;
+    },
+    showMsg: function () {
+      return (
+        this.ruleTermCodeStr.length > 1 &&
+        this.msgDict.indexOf(this.ruleTermCodeStr) > -1
+      );
+    },
+    showHasSub: function () {
+      return this.subDict.indexOf(this.ruleTermCodeStr) > -1;
     }
-
-</style>
+  },
+  components: { AddNewRuleTable }
+};
+</script>

src/components/knowledgeExtra/AddNewRuleTable.vue

@@ -0,0 +1,520 @@
+<style lang="less" scoped>
+.AddNewRuleTable {
+  width: 100%;
+  background: #fff;
+  margin-top: 20px;
+  padding: 20px;
+  box-sizing: border-box;
+  /deep/ .el-input--mini .el-input__inner,
+  .el-select {
+    width: 100%;
+  }
+  .btn_box {
+    width: 100px;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    img {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+  }
+  .inp_box {
+    width: 100px;
+    height: 100%;
+    margin: 0 auto;
+  }
+  .type_content {
+    /deep/ .el-form-item--mini.el-form-item,
+    .el-form-item--small.el-form-item {
+      margin: 0;
+    }
+  }
+}
+</style>
+
+<template>
+  <!-- :prop="`klRuleInfoSaveSub[${scope.$index}].subDescription`" -->
+  <div class="AddNewRuleTable">
+    <el-table border :data="klRuleInfoSaveSub" style="width: 100%" size="mini">
+      <el-table-column width="100px" label="组" prop="groupType">
+        <template slot-scope="scope">
+          <div class="btn_box">
+            <img src="../../images/add-new-rule-sub.png" alt="" />
+            <img src="../../images/add-new-rule-del.png" alt="" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column width="100px" label="基础规则" prop="groupType">
+        <template slot-scope="scope">
+          <div class="btn_box">
+            <img src="../../images/add-new-rule-sub.png" alt="" />
+            <img src="../../images/add-new-rule-del.png" alt="" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column width="170px" label="基础规则名称" prop="subDescription">
+        <template slot-scope="scope">
+          <el-form-item
+            class="inp_box"
+            :prop="`klRuleInfoSaveSub[${scope.$index}].subDescription`"
+            :rules="rules.subDescription"
+          >
+            <el-input
+              type="text"
+              v-model="scope.row.subDescription"
+              clearable
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column width="170px" label="基础规则类型" prop="subType">
+        <template slot-scope="scope">
+          <el-form-item
+            class="inp_box"
+            :prop="`klRuleInfoSaveSub[${scope.$index}].subType`"
+            :rules="rules.subType"
+          >
+            <el-select
+              v-model="scope.row.subType"
+              placeholder="请选择"
+              @change="subTypeChange($event, scope.$index)"
+            >
+              <el-option
+                v-for="item in baseTypes"
+                :key="item.id"
+                :label="item.name"
+                :value="item.type"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column width="170px" label="基础规则术语类型" prop="subLenCode">
+        <template slot-scope="scope">
+          <el-form-item
+            class="inp_box"
+            :prop="`klRuleInfoSaveSub[${scope.$index}].subLenCode`"
+            :rules="rules.subLenCode"
+          >
+            <el-select v-model="scope.row.subLenCode" placeholder="请选择">
+              <el-option
+                v-for="item in baseTermTypeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column width="170px" label="医学标准术语" prop="subConceptId">
+        <template slot-scope="scope">
+          <el-form-item
+            class="inp_box"
+            :prop="`klRuleInfoSaveSub[${scope.$index}].subConceptId`"
+            :rules="rules.subConceptId"
+          >
+            <el-select
+              clearable
+              remote
+              filterable
+              @focus="subConceptIdfocus(scope.$index)"
+              :remote-method="searchConcept"
+              v-model.trim="scope.row.subConceptId"
+            >
+              <el-option
+                v-for="item in conceptList"
+                :key="item.conceptId"
+                :label="item.conceptName"
+                :value="item.conceptId"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column min-width="500px" label="规则具体内容" prop="">
+        <template slot-scope="scope">
+          <div class="type_content">
+            <el-form-item
+              label="选择类型："
+              label-width="100px"
+              :prop="`klRuleInfoSaveSub[${scope.$index}].dataType`"
+              :rules="rules.dataType"
+            >
+              <el-select v-model="scope.row.dataType" placeholder="请选择">
+                <el-option label="数值类型" value="1"> </el-option>
+                <el-option label="文本类型" value="2"> </el-option>
+              </el-select>
+            </el-form-item>
+            <!-- v-if="klRuleInfoSaveSub[scope.$index].dataType === '1'" -->
+            <el-form-item label="最大值：">
+              <div>
+                <el-col :span="3">
+                  <el-form-item
+                    :prop="`klRuleInfoSaveSub[${scope.$index}].subMaxOperator`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          const {
+                            subMaxValue,
+                            subMinOperator,
+                            subMinValue
+                          } = scope.row;
+                          const val =
+                            value + subMinOperator + subMinValue + subMaxValue;
+                          if (!val || (!value && subMaxValue !== '')) {
+                            callback(
+                              new Error(
+                                '最大值和最小值至少完整填写一个，单位不必填'
+                              )
+                            );
+                          } else {
+                            callback();
+                          }
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-select
+                      v-model="scope.row.subMaxOperator"
+                      placeholder="请选择"
+                      clearable
+                    >
+                      <el-option
+                        v-for="item in operMaxList"
+                        :key="item.key"
+                        :label="item.name"
+                        :value="item.key"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="3">
+                  <el-form-item
+                    :prop="`klRuleInfoSaveSub[${scope.$index}].subMaxValue`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          const {
+                            subMaxOperator,
+                            subMinOperator,
+                            subMinValue
+                          } = scope.row;
+                          const val =
+                            value +
+                            subMaxOperator +
+                            subMinValue +
+                            subMinOperator;
+                          const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
+                          if (!val || (value == '' && subMaxOperator)) {
+                            callback(
+                              new Error(
+                                '最大值和最小值至少完整填写一个，单位不必填'
+                              )
+                            );
+                          } else if (value !== '' && !isNum) {
+                            callback(new Error('只能输入数字'));
+                          } else {
+                            callback();
+                          }
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-input
+                      type="text"
+                      v-model="scope.row.subMaxValue"
+                      placeholder="填写数值"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="3">
+                  <el-form-item
+                    :prop="`klRuleInfoSaveSub[${scope.$index}].subMaxUnit`"
+                    :rules="rules.subMaxUnit"
+                  >
+                    <el-input
+                      type="text"
+                      v-model.trim="scope.row.subMaxUnit"
+                      placeholder="填写单位"
+                    />
+                  </el-form-item>
+                </el-col>
+              </div>
+            </el-form-item>
+            <el-form-item label="最小值：">
+              <div class="select-item clearfix">
+                <el-col :span="3">
+                  <el-form-item
+                    :prop="`klRuleInfoSaveSub[${scope.$index}].subMinOperator`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          const {
+                            subMaxValue,
+                            subMaxOperator,
+                            subMinValue
+                          } = scope.row;
+                          const val =
+                            value + subMaxOperator + subMinValue + subMaxValue;
+                          if (
+                            !val ||
+                            (!value &&
+                              subMinValue !==
+                                '最大值和最小值至少完整填写一个，单位不必填')
+                          ) {
+                            callback(
+                              new Error(
+                                '最大值和最小值至少完整填写一个，单位不必填'
+                              )
+                            );
+                          } else {
+                            callback();
+                          }
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-select
+                      v-model="scope.row.subMinOperator"
+                      placeholder="请选择"
+                      clearable
+                    >
+                      <el-option
+                        v-for="item in operMinList"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.name"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="3">
+                  <el-form-item
+                    :prop="`klRuleInfoSaveSub[${scope.$index}].subMinValue`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          const {
+                            subMaxValue,
+                            subMinOperator,
+                            subMaxOperator
+                          } = scope.row;
+                          const val =
+                            value +
+                            subMaxOperator +
+                            subMaxValue +
+                            subMinOperator;
+                          const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
+                          if (!val || (value == '' && subMinOperator)) {
+                            callback(
+                              new Error(
+                                '最大值和最小值至少完整填写一个，单位不必填'
+                              )
+                            );
+                          } else if (value !== '' && !isNum) {
+                            callback(new Error('只能输入数字'));
+                          } else {
+                            callback();
+                          }
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-input
+                      type="text"
+                      v-model="scope.row.subMinValue"
+                      placeholder="填写数值"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="3">
+                  <el-form-item
+                    :prop="`klRuleInfoSaveSub[${scope.$index}].subMinUnit`"
+                    :rules="rules.subMinUnit"
+                  >
+                    <el-input
+                      type="text"
+                      v-model.trim="scope.row.subMinUnit"
+                      placeholder="填写单位"
+                    />
+                  </el-form-item>
+                </el-col>
+              </div>
+            </el-form-item>
+            <!-- v-if="klRuleInfoSaveSub[scope.$index].subType !== 6 && klRuleInfoSaveSub[scope.$index].dataType === '2'" -->
+            <el-form-item
+              label="医学内容："
+              :prop="`klRuleInfoSaveSub[${scope.$index}].subEqValue`"
+              :rules="[
+                {
+                  validator: (rule, value, callback) => {
+                    if (value === '') {
+                      callback(new Error('请输入' + textName(scope.$index)));
+                    } else if (value.length > 200) {
+                      callback(
+                        new Error(textName(scope.$index) + '不能超过200字')
+                      );
+                    } else {
+                      callback();
+                    }
+                  },
+                  trigger: 'blur'
+                }
+              ]"
+            >
+              <el-input
+                type="textarea"
+                rows="3"
+                placeholder="请输入医学内容"
+                v-model.trim="scope.row.subEqValue"
+              ></el-input>
+            </el-form-item>
+            <!-- v-if="groupData.subType === 6" -->
+            <el-form-item
+              label="正则表达式："
+              :prop="`klRuleInfoSaveSub[${scope.$index}].subEqValue`"
+              :rules="[
+                {
+                  validator: (rule, value, callback) => {
+                    if (value === '') {
+                      callback(new Error('请输入' + this.textName));
+                    } else if (value.length > 200) {
+                      callback(new Error(this.textName + '不能超过200字'));
+                    } else {
+                      callback();
+                    }
+                  },
+                  trigger: 'blur'
+                }
+              ]"
+            >
+              <el-input
+                type="textarea"
+                rows="3"
+                placeholder="请输入正则表达式"
+                v-model.trim="scope.row.subEqValue"
+              ></el-input>
+            </el-form-item>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import api from "@api/knowledgeLib.js";
+import { tableRules } from "./rules";
+export default {
+  name: "AddNewRuleTable",
+  data() {
+    return {
+      conceptList: [],
+      subConceptIdIndex: "",
+      operMaxList: [
+        { name: "<=", key: "<=" },
+        { name: "<", key: "<" }
+      ],
+      operMinList: [
+        { name: ">", key: ">" },
+        { name: ">=", key: ">=" }
+      ],
+      rules: tableRules
+    };
+  },
+  methods: {
+    // 基础规则类型选择
+    subTypeChange(e, index) {
+      console.log(e, index);
+      this.$emit("subTypeChange", e, index);
+    },
+    //医学标准术语change
+    subConceptIdfocus(index) {
+      console.log(index);
+      this.subConceptIdIndex = "";
+      this.subConceptIdIndex = index;
+    },
+    // 医学标准术语
+    searchConcept(val) {
+      console.log(val);
+      console.log("subConceptIdIndex", this.subConceptIdIndex);
+      const param = {
+        excludedConceptIds: [
+          this.klRuleInfoSaveSub[this.subConceptIdIndex].subType
+        ],
+        libType: this.klRuleInfoSaveSub[this.subConceptIdIndex].subLenCode,
+        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);
+        });
+    }
+  },
+  components: {
+    showDataType(index) {
+      return (
+        (this.numTypes + ",").indexOf(
+          this.klRuleInfoSaveSub[index].subLenCode + ","
+        ) === -1
+      );
+    },
+    textName(index) {
+      return this.klRuleInfoSaveSub[index].subType !== 6 &&
+        this.klRuleInfoSaveSub[index].dataType === "2"
+        ? "医学内容"
+        : "正则表达式";
+    }
+  },
+  props: {
+    klRuleInfoSaveSub: {
+      type: Array,
+      required: true
+      // subDescription: "",
+      // parRuleType: "",
+      // subConceptId: "",
+      // subType: "",
+      // subMaxOperator: "",
+      // subMaxUnit: "",
+      // subMaxValue: "",
+      // subMinOperator: "",
+      // subMinUnit: "",
+      // subMinValue: "",
+      // subEqValue: "",
+      // subLenCode: "",
+      // dataType: ""
+    },
+    baseTypes: {
+      type: Array,
+      default: []
+    },
+    baseTermTypeList: {
+      type: Array,
+      default: []
+    }
+  }
+};
+</script>
+

src/components/knowledgeExtra/SubRulesGroup.vue

@@ -1,117 +1,129 @@
 <template>
-    <div class="sub-groups" v-if="data">
-        <SubConditions v-for="(rules,i) in data"
-                       ref="group"
-                       :groupData="rules"
-                       :isLast="data.length===1"
-                       :ind="i"
-                       :showAdd="data.length<maxNum"
-                       :baseTypes="baseTypes"
-                       :firstPlace="firstPlace"
-                       :disabled="i===0&&disable"
-                       @changeVal="handleInput"
-                       @addRule="addRule"
-                       @delRule="delRule"></SubConditions>
-        <div class="group-oper">
-            <el-button size="small" @click="addGroup">+新增分组</el-button>
-            <el-button :disabled="isLast" size="small" type="danger" plain @click="delGroup">-删除分组</el-button>
-        </div>
+  <div class="sub-groups" v-if="data">
+    <SubConditions
+      v-for="(rules, i) in data"
+      :key="i"
+      ref="group"
+      :groupData="rules"
+      :isLast="data.length === 1"
+      :ind="i"
+      :showAdd="data.length < maxNum"
+      :baseTypes="baseTypes"
+      :firstPlace="firstPlace"
+      :disabled="i === 0 && disable"
+      @changeVal="handleInput"
+      @addRule="addRule"
+      @delRule="delRule"
+    ></SubConditions>
+    <div class="group-oper">
+      <el-button size="small" @click="addGroup">+新增分组</el-button>
+      <el-button
+        :disabled="isLast"
+        size="small"
+        type="danger"
+        plain
+        @click="delGroup"
+        >-删除分组</el-button
+      >
     </div>
+  </div>
 </template>
 <script>
-    import SubConditions from './SubConditions.vue';
-    export default {
-        name:'SubRulesGroup',
-        props:['data','inx','isLast','baseTypes','maxNum','firstPlace'],
-        data(){
-            return {
-            }
-        },
-        computed:{
-          'disable':function(){
-              return Object.keys(this.firstPlace||{}).length>0;
-          }
-        },
-        methods:{
-            handleInput(val,i){
-                this.data[i]=val;
-            },
-            addRule(){
-                let temp={
-                    subDescription:'',
-                    subConceptId:'',
-                    subType:'',
-                    subLenName:'',
-                    subLenCode:'',
-                    subLibName:'',
-                    subMaxOperator:'',
-                    subMaxUnit:'',
-                    subMaxValue:'',
-                    subMinOperator:'',
-                    subMinUnit:'',
-                    subMinValue:'',
-                    subEqValue:'',
-                    dataType:'',
-                };
-                this.data.push(temp);
-            },
-            delRule(i){
-                if(i===0&&this.data.length===1){
-                    this.$emit("delGroup",this.inx);
-                    return;
-                }
-                this.data.splice(i,1);
-            },
-            addGroup(){
-                this.$emit("addGroup");
-            },
-            delGroup(){
-               this.$emit("delGroup",this.inx);
-            },
-            warning(msg,type){
-                this.$message({
-                    showClose: true,
-                    message:msg,
-                    type:type||'warning'
-                })
-            },
-            showConfirmDialog(msg,resolve){
-                this.$alert(msg, '提示', {
-                    confirmButtonText: '确定',
-                    type: 'warning'
-                }).then(() => {
-                    resolve();
-                }).catch(() => {
-                    this.warning("删除失败，请重试！")
-                });
-            },
-        },
-        components:{
-            SubConditions
-        }
+import SubConditions from "./SubConditions.vue";
+export default {
+  name: "SubRulesGroup",
+  props: ["data", "inx", "isLast", "baseTypes", "maxNum", "firstPlace"],
+  data() {
+    return {};
+  },
+  computed: {
+    disable: function () {
+      return Object.keys(this.firstPlace || {}).length > 0;
     }
+  },
+  methods: {
+    handleInput(val, i) {
+      this.data[i] = val;
+    },
+    addRule() {
+      let temp = {
+        subDescription: "",
+        subConceptId: "",
+        subType: "",
+        subLenName: "",
+        subLenCode: "",
+        subLibName: "",
+        subMaxOperator: "",
+        subMaxUnit: "",
+        subMaxValue: "",
+        subMinOperator: "",
+        subMinUnit: "",
+        subMinValue: "",
+        subEqValue: "",
+        dataType: ""
+      };
+      this.data.push(temp);
+    },
+    delRule(i) {
+      if (i === 0 && this.data.length === 1) {
+        this.$emit("delGroup", this.inx);
+        return;
+      }
+      this.data.splice(i, 1);
+    },
+    addGroup() {
+      this.$emit("addGroup");
+    },
+    delGroup() {
+      this.$emit("delGroup", this.inx);
+    },
+    warning(msg, type) {
+      this.$message({
+        showClose: true,
+        message: msg,
+        type: type || "warning"
+      });
+    },
+    showConfirmDialog(msg, resolve) {
+      this.$alert(msg, "提示", {
+        confirmButtonText: "确定",
+        type: "warning"
+      })
+        .then(() => {
+          resolve();
+        })
+        .catch(() => {
+          this.warning("删除失败，请重试！");
+        });
+    }
+  },
+  components: {
+    SubConditions
+  }
+};
 </script>
 <style lang="less" scoped>
-    .sub-groups{
-        background: #F5F5F5;
-        padding: 20px;
-    }
-    .group-oper{
-        text-align: center;
-        padding: 11px 0;
-        border-top: 4px solid #F5F5F5;
-        background: #fff;
-    }
-    .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
-        color: #fbc4c4;
-        border-color:#fbc4c4;
-    }
-    .el-button--danger.is-plain{
-        background: none;
-        &.is-disabled{
-            color: #f9a7a7;
-            background-color: #fef0f0;
-            border-color: #fde2e2;
-        }
-    }
+.sub-groups {
+  background: #f5f5f5;
+  padding: 20px;
+}
+.group-oper {
+  text-align: center;
+  padding: 11px 0;
+  border-top: 4px solid #f5f5f5;
+  background: #fff;
+}
+.el-button--danger.is-plain:focus,
+.el-button--danger.is-plain:hover {
+  color: #fbc4c4;
+  border-color: #fbc4c4;
+}
+.el-button--danger.is-plain {
+  background: none;
+  &.is-disabled {
+    color: #f9a7a7;
+    background-color: #fef0f0;
+    border-color: #fde2e2;
+  }
+}
 </style>

src/components/knowledgeExtra/_AddNewRule.vue

@@ -0,0 +1,636 @@
+<template>
+  <div>
+    <crumbs
+      :title="title"
+      :param="$route.params"
+      linkTo="ZskRuleManager"
+    ></crumbs>
+    <div class="contents">
+      <div class="content2">
+        <el-form
+          ref="form"
+          :label-position="labelPosition"
+          class="add-new-form"
+          label-width="130px"
+          :model="form"
+          :rules="rules"
+        >
+          <div class="table_header">
+            <el-form-item label="规则名称：" prop="parDescription">
+              <el-input v-model.trim="form.parDescription"></el-input>
+            </el-form-item>
+            <el-form-item label="规则类型：" prop="parRuleType">
+              <el-select
+                v-model="form.parRuleType"
+                placeholder="请选择"
+                size="small"
+                @change="ruleTypeChange"
+              >
+                <el-option
+                  v-for="item in ruleTypeList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <div class="tip-text">
+                注：更改规则类型，将会清空已填写的规则内容~
+              </div>
+            </el-form-item>
+            <el-form-item label="规则术语类型：" prop="parLenCode">
+              <el-select
+                v-model="form.parLenCode"
+                placeholder="请选择"
+                size="small"
+                @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>
+            <el-form-item
+              class="addDepartFormItem"
+              label="医学标准术语："
+              prop="parConceptId"
+            >
+              <el-select
+                clearable
+                filterable
+                remote
+                :remote-method="searchConcept"
+                v-model.trim="form.parConceptId"
+              >
+                <el-option
+                  v-for="item in conceptList"
+                  :key="item.conceptId"
+                  :label="item.conceptName"
+                  :value="item.conceptId"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="showHasSub"
+              label="有无子条件："
+              prop="parHasSub"
+            >
+              <el-select
+                v-model="form.parHasSub"
+                placeholder="请选择"
+                size="small"
+                @change="hasSubChange"
+              >
+                <el-option
+                  v-for="item in hasSub"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="showMsg"
+              label="附加信息："
+              prop="parMsg"
+              class="parMsg"
+              style="flex: 1"
+            >
+              <el-input
+                type="textarea"
+                :rows="3"
+                placeholder="请输入附加信息"
+                v-model.trim="form.parMsg"
+              ></el-input>
+            </el-form-item>
+          </div>
+
+          <el-form-item
+            v-if="form.parHasSub === 1"
+            prop="remind"
+            label-width="0"
+            class="discDesc"
+          >
+            <h4>规则内容</h4>
+            <SubRulesGroup
+              v-for="(group, i) in subGroups"
+              ref="groups"
+              :key="i"
+              :data="group"
+              :baseTypes="baseTypeList"
+              :inx="i"
+              :maxNum="subRuleMaxNum"
+              :firstPlace="firstPlace"
+              :isLast="subGroups.length === 1"
+              @addGroup="addGroup"
+              @delGroup="delGroup"
+            ></SubRulesGroup>
+            <ComTable :list="subGroups" />
+          </el-form-item>
+          <el-button
+            class="disclButn"
+            size="small"
+            type="primary"
+            @click="confirm"
+            >保存</el-button
+          >
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+import api from "@api/knowledgeLib.js";
+import SubRulesGroup from "./SubRulesGroup";
+import ComTable from "./table";
+export default {
+  name: "AddRule",
+  data() {
+    return {
+      labelPosition: "left",
+      isFirst: true,
+      isCopy: false,
+      dict: "", //规则内容固定的类型
+      msgDict: "", //显示附加信息的类型
+      title: "规则维护-添加规则",
+      ruleTermTypeList: [],
+      ruleTypeList: [],
+      conceptList: [],
+      baseTypeList: [],
+      conceptName: "",
+      subRuleMaxNum: null, //规则内容中规则的限制个数
+      firstPlace: null,
+      subGroups: [
+        [
+          {
+            subDescription: "",
+            parRuleType: "",
+            subConceptId: "",
+            subType: "",
+            subMaxOperator: "",
+            subMaxUnit: "",
+            subMaxValue: "",
+            subMinOperator: "",
+            subMinUnit: "",
+            subMinValue: "",
+            subEqValue: "",
+            subLenCode: "",
+            dataType: ""
+          }
+        ]
+      ],
+      form: {
+        parDescription: "",
+        parRuleType: "",
+        parConceptId: "",
+        parlibName: "",
+        parLenName: "",
+        parHasSub: undefined,
+        parLenCode: "",
+        parMsg: "",
+        klRuleInfoSaveSub: []
+      },
+      parId: null,
+      rules: {
+        parDescription: [
+          { required: true, message: "请输入规则名称", trigger: ["blur"] },
+          {
+            validator: (rule, value, callback) => {
+              if (value.length > 100) {
+                callback(new Error("规则名称不能超过100字"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        parRuleType: [
+          { required: true, message: "请选择规则类型", trigger: ["change"] }
+        ],
+        parLenCode: [
+          { required: true, message: "请选择规则术语类型", trigger: ["change"] }
+        ],
+        parConceptId: [
+          { required: true, message: "请输入医学标准术语", trigger: ["blur"] }
+        ],
+        parHasSub: [
+          { required: true, message: "请选择有无子条件", trigger: ["change"] }
+        ],
+        parMsg: [
+          { required: true, message: "请输入附加信息", trigger: ["change"] },
+          {
+            validator: (rule, value, callback) => {
+              if (value.length > 100) {
+                callback(new Error("附加信息不能超过100字"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ]
+      },
+      hasSub: [
+        { name: "有", id: 1 },
+        { name: "无", id: 0 }
+      ]
+    };
+  },
+  updated() {
+    console.log(JSON.stringify(this.subGroups));
+  },
+  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 = Object.assign({}, this.form, info);
+      this.conceptList = [
+        { conceptName: this.form.parlibName, conceptId: this.form.parConceptId }
+      ];
+      this.subGroups = this.formatGroupDatas(info.klRuleByIdSub);
+    }
+  },
+  watch: {
+    "form.parRuleType": function (val) {
+      const obj = this.ruleTypeList.find((it) => it.id === val);
+      this.ruleTermTypeList = obj.subMenuList;
+    },
+    "form.parLenCode": function (val) {
+      if (!val) {
+        this.baseTypeList = [];
+        return;
+      }
+      const obj = this.ruleTermTypeList.find((it) => it.code === val);
+      this.baseTypeList = obj.subMenuList;
+      this.subRuleMaxNum = obj.number;
+    },
+    "form.parConceptId": function (val) {
+      if (val && this.checkFirstPlace && this.conceptList) {
+        this.firstPlace = this.conceptList.find((it) => it.conceptId === val);
+        this.firstPlace["checkedType"] = this.ruleTermCodeStr;
+      } else if (!val) {
+        this.setInitGroupData();
+        this.firstPlace = null;
+      } else {
+        this.firstPlace = null;
+      }
+    }
+  },
+  components: {
+    SubRulesGroup,
+    ComTable
+  },
+  computed: {
+    ruleTermCodeStr: function () {
+      return this.form.parRuleType + "-" + this.form.parLenCode;
+    },
+    checkFirstPlace: function () {
+      return this.dict.indexOf(this.ruleTermCodeStr) > -1;
+    },
+    showMsg: function () {
+      return (
+        this.ruleTermCodeStr.length > 1 &&
+        this.msgDict.indexOf(this.ruleTermCodeStr) > -1
+      );
+    },
+    showHasSub: function () {
+      return this.subDict.indexOf(this.ruleTermCodeStr) > -1;
+    }
+  },
+  methods: {
+    hasSubChange(val) {
+      if (val) {
+        this.subGroups = [
+          [
+            {
+              subDescription: "",
+              parRuleType: "",
+              subConceptId: "",
+              subType: "",
+              subMaxOperator: "",
+              subMaxUnit: "",
+              subMaxValue: "",
+              subMinOperator: "",
+              subMinUnit: "",
+              subMinValue: "",
+              subEqValue: "",
+              subLenCode: "",
+              dataType: ""
+            }
+          ]
+        ];
+      }
+    },
+    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(() => {});
+    },
+    formatGroupDatas(data) {
+      let arr = [];
+      data.map((it) => {
+        if (!arr[it.groupType]) {
+          arr[it.groupType] = [];
+        }
+        if (it.subMaxOperator || it.subMinOperator) {
+          it.dataType = "1";
+        } else if (it.subEqValue) {
+          it.dataType = "2";
+        }
+        arr[it.groupType].push(it);
+      });
+      arr = arr.filter((it) => {
+        if (it) return it;
+      });
+      return arr;
+    },
+    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);
+        });
+    },
+    ruleTypeChange(val) {
+      //规则类型选中
+      this.form.parRuleType = val;
+      this.form.parLenCode = "";
+      this.form.parMsg = "";
+      const obj = this.ruleTypeList.find((it) => it.id === val); //console.log(val)
+      this.ruleTermTypeList = obj.subMenuList;
+      this.setInitGroupData();
+    },
+    ruleTermChange(val) {
+      //规则术语类型选中
+      this.form.parLenCode = 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.setInitGroupData();
+      this.form.parHasSub = obj.subMenuList.length ? 1 : 0;
+    },
+    getTypeList() {
+      const typeListData = JSON.parse(localStorage.getItem("zskTypesList"));
+      this.ruleTypeList = typeListData;
+    },
+    setInitGroupData() {
+      this.subGroups = [
+        [
+          {
+            subDescription: "",
+            parRuleType: "",
+            subConceptId: "",
+            subType: "",
+            subMaxOperator: "",
+            subMaxUnit: "",
+            subMaxValue: "",
+            subMinOperator: "",
+            subMinUnit: "",
+            subMinValue: "",
+            subEqValue: "",
+            subLenCode: "",
+            dataType: ""
+          }
+        ]
+      ];
+      this.form.parConceptId = ""; //医学标准术语清空
+      this.conceptList = []; //下拉列表清空
+    },
+    addGroup() {
+      let temp = {
+        subDescription: "",
+        subConceptId: "",
+        subType: "",
+        subLenCode: "",
+        dataType: "",
+        subMaxOperator: "",
+        subMaxUnit: "",
+        subMaxValue: "",
+        subMinOperator: "",
+        subMinUnit: "",
+        subMinValue: "",
+        subEqValue: ""
+      };
+      if (this.checkFirstPlace) {
+        const obj = this.subGroups[0][0];
+        temp = {
+          subDescription: obj.subConceptName,
+          subConceptId: obj.subConceptId,
+          subConceptName: obj.subConceptName,
+          subLenCode: this.form.parLenCode,
+          subLenName: this.form.parLenName,
+          subLibName: this.form.parlibName,
+          subType: obj.subType,
+          dataType: "",
+          subMaxOperator: "",
+          subMaxUnit: "",
+          subMaxValue: "",
+          subMinOperator: "",
+          subMinUnit: "",
+          subMinValue: "",
+          subEqValue: ""
+        };
+      }
+      this.subGroups.push([temp]);
+    },
+    delGroup(i) {
+      //this.subGroups.splice(i,1);
+      this.$set(this.subGroups, i, null);
+    },
+    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"
+          });
+        }
+      });
+    },
+    formatGroups() {
+      let obj = [];
+      this.subGroups.map((item, i) => {
+        item &&
+          item.map((it) => {
+            obj.push({ ...it, groupType: i + 1 });
+          });
+      });
+      return obj;
+    },
+    validateForms(callBack) {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          const groupsRef = this.$refs["groups"];
+          if (!groupsRef || groupsRef.length === 0) {
+            callBack();
+            return;
+          }
+          let groupRef = null,
+            goOn = true;
+          for (let i = 0; i < groupsRef.length; i++) {
+            groupRef = groupsRef[i].$refs["group"];
+            for (let j = 0; j < groupRef.length; j++) {
+              groupRef[j].$refs["groupData"].validate((valid) => {
+                if (!valid) {
+                  goOn = false;
+                }
+              });
+            }
+          }
+          if (goOn) {
+            callBack();
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    confirm() {
+      const _this = this;
+      this.validateForms(function () {
+        delete _this.form.klRuleByIdSub;
+        _this.form.klRuleInfoSaveSub = _this.form.parHasSub
+          ? _this.formatGroups()
+          : undefined;
+        let params = _this.form;
+        if (_this.parId) {
+          //修改/复制
+          params = Object.assign({}, _this.form, {
+            parId: _this.isCopy ? undefined : _this.parId,
+            parStatus: _this.isCopy ? 1 : _this.form.parStatus
+          });
+        }
+        console.log(params);
+        _this.saveRule(params);
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../less/admin.less";
+.content2 {
+  background-color: #dee2ea;
+  // padding: 20px 20px 30px;
+  //   padding: 20px 20px 50px;
+  color: #545455;
+  min-width: 980px;
+  position: relative;
+  .tip-text {
+    color: #f56c6c;
+    font-size: 12px;
+    margin-left: -80px;
+  }
+  .conceptItem {
+    padding: 0 10px;
+    cursor: pointer;
+    height: 32px;
+    line-height: 32px;
+    &:hover {
+      background: #ebedf1;
+    }
+  }
+  .discDesc {
+    margin-bottom: 20px;
+  }
+  .disclButn {
+    position: absolute;
+    right: 80px;
+    bottom: 10px;
+  }
+}
+.add-new-form {
+  .el-form-item__label {
+    text-align: right;
+  }
+  .addDepartFormItem {
+    position: relative;
+  }
+  .itemList {
+    position: absolute;
+    // display: none;
+    background: #fff;
+    width: 188px;
+    max-height: 160px;
+    border: 1px solid #dcdfe6;
+    left: 0;
+    top: 37px;
+    z-index: 2;
+    overflow-y: auto;
+  }
+  .indexList {
+    left: 42px;
+    top: 78px;
+  }
+  .el-input__prefix,
+  .el-input__suffix {
+    /*top:-2px;*/
+    right: 3px;
+  }
+  .el-input--suffix .el-input__inner {
+    padding-right: 22px;
+  }
+  .el-input,
+  .el-input__inner {
+    width: 190px;
+    line-height: 32px;
+    height: 32px;
+  }
+  .el-input__icon {
+    line-height: 32px;
+  }
+}
+.table_header {
+  background: #fff;
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

src/components/knowledgeExtra/rules.js

@@ -0,0 +1,89 @@
+export const formRules =  {
+  parDescription: [
+    { required: true, message: "请输入规则名称", trigger: ["blur"] },
+    {
+      validator: (rule, value, callback) => {
+        if (value.length > 100) {
+          callback(new Error("规则名称不能超过100字"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change"
+    }
+  ],
+  parRuleType: [
+    { required: true, message: "请选择规则类型", trigger: ["change"] }
+  ],
+  parLenCode: [
+    { required: true, message: "请选择规则术语类型", trigger: ["change"] }
+  ],
+  parConceptId: [
+    { required: true, message: "请输入医学标准术语", trigger: ["blur"] }
+  ],
+  parHasSub: [
+    { required: true, message: "请选择有无子条件", trigger: ["change"] }
+  ],
+  parMsg: [
+    { required: true, message: "请输入附加信息", trigger: ["change"] },
+    {
+      validator: (rule, value, callback) => {
+        if (value.length > 100) {
+          callback(new Error("附加信息不能超过100字"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change"
+    }
+  ],
+
+}
+
+export const tableRules = {
+  subDescription: [
+    { required: true, message: "请输入基础规则名称", trigger: ["blur"] },
+    {
+      validator: (rule, value, callback) => {
+        if (value && value.length > 100) {
+          callback(new Error("规则名称不能超过100字"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change"
+    }
+  ],
+  subType: [
+    { required: true, message: "请选择基础规则类型", trigger: ["change"] }
+  ],
+  subLenCode: [
+    {
+      required: true,
+      message: "请选择基础规则术语类型",
+      trigger: ["change"]
+    }
+  ],
+  subConceptId: [
+    { required: true, message: "请输入医学标准术语", trigger: ["blur"] }
+  ],
+  dataType: [
+    { required: true, message: "请选择类型", trigger: ["change"] }
+  ],
+  
+  
+  subEqValue: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入" + this.textName));
+        } else if (value.length > 200) {
+          callback(new Error(this.textName + "不能超过200字"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+}

src/components/knowledgeExtra/table.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- <el-form
+    ref="groupData"
+    label-width="150px"
+    class="sub-condition-form"
+    :model="groupData"
+    :rules="rules"
+  >
+    <el-table :data="formatList" style="width: 100%">
+      <el-table-column prop="TableId" label="TableId" width="180">
+      </el-table-column>
+      <el-table-column prop="TableRowId" label="TableRowId" width="180">
+      </el-table-column>
+    </el-table>
+  </el-form> -->
+  <div>
+    <table border="1">
+      <thead>
+        <tr>
+          <th>头</th>
+          <th>头</th>
+          <th>头</th>
+          <th>头</th>
+          <th>头</th>
+        </tr>
+      </thead>
+      <tbody>
+        <form action=""> 
+          <tr>
+            <td>com</td>
+            <td>com1</td>
+            <td>com2</td>
+            <td>com3</td>
+            <td>com4</td>
+          </tr>
+        </form>
+        <form action="">
+          <tr>
+            <td>com</td>
+            <td>com1</td>
+            <td>com2</td>
+            <td>com3</td>
+            <td>com4</td>
+          </tr>
+        </form>
+      </tbody>
+    </table>
+    <div class="c_table">
+      <div class="c_row">
+        <form action="">
+          <div class="c_cell">张三</div>
+          <div class="c_cell">李四</div>
+          <div class="c_cell">王五</div>
+          <div class="c_cell">王五</div>
+        </form>
+      </div>
+      <form action="">
+        <div>
+          <div>
+            <ul>
+              <li>
+                <div class="c_row">
+                  <div class="c_cell">
+                    <div>
+                      <input type="text" name="" id="" />
+                    </div>
+                  </div>
+                  <div class="c_cell">张三</div>
+                  <div class="c_cell">李四</div>
+                  <div class="c_cell">王五</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["list"],
+  data() {
+    return {};
+  },
+  computed: {
+    formatList() {
+      let list = JSON.parse(JSON.stringify(this.list));
+      let newList = [];
+      list.forEach((item, index) => {
+        item.forEach((ite, i) => {
+          ite.TableId = index + 1;
+          ite.TableRowId = i + 1;
+        });
+        newList.push(...item);
+      });
+      console.log("newList", newList);
+      return newList;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.c_table {
+  display: table;
+  border: 1px solid #cccccc;
+  margin: 5px;
+  /*display: table时padding会失效*/
+}
+
+.c_row {
+  display: table-row;
+  border: 1px solid #cccccc;
+  /*display: table-row时margin、padding同时失效*/
+}
+
+.c_cell {
+  display: table-cell;
+  border: 1px solid #cccccc;
+  padding: 5px;
+  /*display: table-cell时margin会失效*/
+}
+</style>