platformFront/src/components/recordInput/AddRecordItem.vue

<template>
    <div class="addRecordItemWrapper">
        <crumbs :title="title" :param="$route.params"  minWidth="1120px" linkTo="RecordItemList"></crumbs>
        <div class="contents">
            <div class="content">
                <el-form :rules="rules" ref="form" :label-position="labelPosition" label-width="125px" class="add-record-form" :model="form">
                    <el-form-item label="条目名称：" prop="itemName">
                      <el-input v-model.trim="form.itemName" maxlength="200" placeholder="请输入条目名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所属模块：" prop="brbaxx">
                        <el-select v-model="form.casesId"
                                   placeholder="请选择模块"
                                   @change="changeModule"
                                   >
                            <el-option
                                    v-for="item in caseLIst"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="条目编码：" prop="brbarh">
                         <el-input v-model="form.itemCode" placeholder="请输入条目编码"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="层级定义：" prop="remark">
                         <el-input v-model="form.levelNo" placeholder="请输入层级定义"></el-input>
                    </el-form-item> -->
                    <el-form-item label="医院数据模块：" prop="remark">
                        <el-select v-model="form.hospitalModuleId"
                                   placeholder="请选择医院数据模块"
                                   >
                            <el-option
                                    v-for="item in hospitalModuleList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="条目类型：" prop="ruleType">
                        <el-select v-model="form.ruleType"
                                   placeholder="请选择条目类型"
                        >
                            <el-option
                                    v-for="item in ruleTypeList"
                                    :key="item.val"
                                    :label="item.name"
                                    :value="Number(item.val)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开发状态：" prop="ruleType">
                        <el-select v-model="form.devType"
                                   placeholder="请选择开发状态"
                        >
                            <el-option
                                    v-for="item in devTypeList"
                                    :key="item.val"
                                    :label="item.name"
                                    :value="Number(item.val)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="准确率：" prop="ruleType">
                        <el-select v-model="form.accuracyType"
                                   placeholder="请选择准确率"
                        >
                            <el-option
                                    v-for="item in accuracyTypeList"
                                    :key="item.val"
                                    :label="item.name"
                                    :value="Number(item.val)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="备注：" prop="remark">
                         <el-input v-model="form.remark" maxlength="200" placeholder="请输入备注"></el-input>
                    </el-form-item> -->
                    <el-form-item label="备注：" prop="remark">
                         <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入备注"></el-input>
                    </el-form-item>
                     <el-form-item label="前置条件：" prop="remark" class="procent">
                         <el-input v-model="form.precond" maxlength="200" placeholder="请输入前置条件"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="医院列表：" prop="hospitalList">
                      <div>
                          <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="light"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                              type="selection"
                              width="120">
                            </el-table-column>
                            <el-table-column
                              label="医院名称"
                              prop="hospitalName"
                              width="240">
                             
                            </el-table-column>
                            <el-table-column
                              prop="name"
                              label="扣分值"
                              width="120">
                                 <template slot-scope="scope">
                                  <el-input  class="scoreInp" v-model.trim="scope.row.value"  oninput="if(value.length>5)value=value.slice(0,5)" type="number"   placeholder=""></el-input>
                                 </template>
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="提示信息"
                              width="240"
                              show-overflow-tooltip>
                               <template slot-scope="scope">
                                  <el-input class="tipsMsg" v-model.trim="scope.row.tipMsg" maxlength="200" placeholder="请输入提示信息"></el-input>
                                 </template>
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="是否启用"
                              width="120"
                              show-overflow-tooltip>
                               <template slot-scope="scope">
                                   <el-checkbox v-model="scope.row.isUsed" :checked="scope.row.isUsed=='1'" :disabled="getIsUsed(scope.row)" true-label="1" false-label="0"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="单项否决"
                              width="120"
                              show-overflow-tooltip>
                               <template slot-scope="scope">
                                   <el-checkbox v-model="scope.row.isReject" :checked="scope.row.isReject=='1'" :disabled="getIsUsed(scope.row)" true-label="1" false-label="0"></el-checkbox>
                                </template>
                            </el-table-column>
                          </el-table>
                      </div>
                         
                    </el-form-item>
                    <p class="oper">
                        <el-button style="margin-right: 30px" size="small" type="primary" :style="{'opacity':canSave?1:0.5}" @click="comfirn('form')">确定</el-button>
                        <el-button size="small" @click="cancel">取消</el-button>
                    </p>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
  import api from '@api/records.js';
  export default {
    name:'AddRecordItem',
    data(){
      return{
        // data:{},
        labelPosition:'left',
        canSave:true,
        /*zybljlList:[
          {name:'aaa',content:'333333'},
          {name:'vvv',content:'333sa'}
        ],*/
        modifier:'',
        hospitalList:[],
        ruleTypeList:[],
        devTypeList:[],
        accuracyTypeList:[],
        caseLIst:[],
        hospitalModuleList:[], //医院数据模块列表
        title:'质控条目-新增',
        form:{
          itemName:'',
          casesId:'',
          itemCode:'',
          ruleType:0,
          devType:0,
          accuracyType:3,
          remark:'',
          levelNo:'',
          precond:'',
          hospitalModuleId:''
        },
        tableData:[],
        selectHospital:[],
        multipleSelection: [],
        id:null,
        isEdit: false,
        rules: {
          itemName: [
            { required: true, message: ' ', trigger: 'change' }
          ],
          brbaxx: [
            { required: true, message: ' ', trigger: 'change' }
          ]
        },
      }
    },
    created(){
      let {isEdit, data,ruleTypeList,devTypeList,accuracyTypeList} = this.$route.params;
      const userLoginDTO = JSON.parse(localStorage.getItem('userLoginDTO'))
      this.modifier = userLoginDTO && userLoginDTO.linkman
      this.ruleTypeList=ruleTypeList;
      this.devTypeList=devTypeList;
      this.accuracyTypeList=accuracyTypeList;
      this.devTypeList.shift();
      this.accuracyTypeList.shift();
      if(isEdit){
        this.title = '质控条目-修改'
        this.isEdit = isEdit
        this.id = data.id
        this.form.itemName = data.name
        this.form.ruleType = data.ruleType
         this.form.devType = data.devType
          this.form.accuracyType = data.accuracyType
        this.form.itemCode = data.code
        this.form.casesId = data.casesId
        this.form.remark = data.remark
        // this.form.levelNo = data.levelNo
          this.form.hospitalModuleId = data.modeId
        this.form.precond = data.precond
        this.selectHospital = data.getUpdateInfoDetialDTOS || []
      }
       this.getRecordInpModule()
      this.getRecordHopitalList()
      this.gethospitalModuleList()
    },
    methods:{
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      toggleSelection(rows) {
        setTimeout(()=>{
          if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
        })
        
      },
      getIsUsed(row){
        if(this.multipleSelection.findIndex(it => it.hospitalId ==row.hospitalId) > -1){
          return false
        } else{
           return true
        }
        
      },
      changeModule(val){
        this.form.itemCode = this.caseLIst.find(item => item.id === val).prefix
      },
       getRecordHopitalList(){
        return api.getRecordHopitalList({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.hospitalList = result.data
            const tableData = []
            for(let i = 0; i < this.hospitalList.length; i++){
              tableData.push({
                hospitalId: this.hospitalList[i].id,
                hospitalName:  this.hospitalList[i].name,
                value: '',
                tipMsg:'',
                isUsed: '0',
                isReject:'0'
              })
            }
            for(let i = 0; i < this.selectHospital.length; i++){
              const selectItem = this.selectHospital[i]
              let item = tableData.find(item => item.hospitalName === selectItem.hospitalName)
              if(item) {
                  item.value = selectItem.score
                  item.tipMsg = selectItem.msg
                  item.isUsed = selectItem.isUsed
                  item.isReject = selectItem.isReject
                  this.multipleSelection.push(item)
              }
            
            }
            this.tableData = tableData
            this.toggleSelection(this.multipleSelection)
          }else{
            this.$message({
              message:result.msg,
              type:'warning',
              showClose: true
            });
          }
        })
      },
      gethospitalModuleList(){
        return api.gethospitalModuleList({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.hospitalModuleList = result.data
          }else{
            this.$message({
              message:result.msg,
              type:'warning',
              showClose: true
            });
          }
        })
      },
      getRecordInpModule(){
        return api.getRecordCases({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.caseLIst = result.data
          }else{
            this.$message({
              message:result.msg,
              type:'warning',
              showClose: true
            });
          }
        })
      },
      cancel(){
        this.$router.push({
          name: 'RecordItemList',
          params: Object.assign({}, this.$route.params)
        });
      },
      comfirn(form){
          if(!this.canSave){
            return
          }
          this.canSave = false
          const {itemName,casesId,itemCode,remark,levelNo,precond,hospitalModuleId,ruleType,devType,accuracyType} = this.form
          if(!itemName){
            this.$message({
              message:"请输入条目名称",
              type:'warning',
              showClose: true
            })
            this.canSave = true
            return
          }
          if(!itemCode){
            this.$message({
              message:"请选择所属模块",
              type:'warning',
              showClose: true
            })
            this.canSave = true
            return
          }
          let  casesEntryHospitals = []
          for(let i = 0; i < this.multipleSelection.length; i++){
            const item = this.multipleSelection[i]
            if(item.value ===''){
              this.$message({
                message:"请填写所选医院扣分值",
                type:'warning',
                showClose: true
              })
              this.canSave = true
              returnxiaoyudengy
            }
            var reg = new RegExp(/^\d+(\.\d)?$/);
            if(!reg.test(item.value) || item.value > 100){
               this.$message({
                message:'扣分值请输入≥0且≤100的数字，最多保留小数点后1位',
                type:'warning',
                showClose: true
              });
              this.canSave = true
              return
            }
            if(item.tipMsg ===''){
              this.$message({
                message:"请填写所选医院提示信息",
                type:'warning',
                showClose: true
              })
              this.canSave = true
              return
            }
            casesEntryHospitals.push({
              creator: '0',
              score: item.value,
              remark: '',
              modifier:this.modifier,
              hospitalId: item.hospitalId,
              msg: item.tipMsg,
              isUsed: item.isUsed,
              isReject: item.isReject,
            })
          }
           let params = {
            id:this.id,
            name:itemName,
            modeId: hospitalModuleId,
            ruleType:ruleType,
            devType:devType,
            accuracyType:accuracyType,
            remark: remark,
            code: itemCode,
            precond:precond,
            casesId: casesId,
            casesName:  this.caseLIst.find(item => item.id === casesId).name,
            modifier:this.modifier,
            creator: '0',
            casesEntryHospitals:casesEntryHospitals
          }
           api.addRecordItem(params).then((res)=>{
              this.canSave = true
              if(res.data.code==0){
                this.$message({
                  message:this.isEdit?"修改成功":"添加成功",
                  type:'success',
                  showClose: true
                })
                // this.$router.push({path: 'LT-GBBXXWH-BBXXWH'});
                this.$router.push({name: 'RecordItemList'});
              }else{
                this.$message({
                  message:res.data.msg,
                  type:'warning',
                  showClose: true
                });
              }
            }).catch(()=>{
              this.canSave = true
            })
          // return
          // if(this.basyid){//修改
          //   const param = Object.assign({},this.form,{basyid:this.basyid,brzyid:this.brzyid});
          //   api.saveRecord(param).then((res)=>{
          //     if(res.data.code==0){
          //       this.$message({
          //         message:"修改成功",
          //         type:'success'
          //       });
          //       //返回带搜索条件的首页
          //       this.$router.push({
          //         name: 'RecordManager',
          //         params: Object.assign({}, this.$route.params)
          //       });
          //     }else{
          //       this.$message({
          //         message:res.data.msg,
          //         type:'warning'
          //       });
          //     }
          //   })
          // }else{//添加
          //   // 复制时把list多余字段过滤掉，如id等
          //   const detail = this.list;
          //   let copyDetail=[];
          //   let item={};
          //   if(detail && detail.length>0){
          //     for(let i=0; i<detail.length; i++){
          //       item.title = detail[i].title;
          //       item.description = detail[i].description;
          //       copyDetail.push(item);
          //       item={};
          //     }
          //   }
          //   const params = Object.assign({},this.form);
          //   // api.addVersInfo(this.form).then((res)=>{
          //   api.saveRecord(params).then((res)=>{
          //     if(res.data.code==0){
          //       this.$message({
          //         message:"添加成功",
          //         type:'success'
          //       })
          //       // this.$router.push({path: 'LT-GBBXXWH-BBXXWH'});
          //       this.$router.push({name: 'RecordManager'});
          //     }else{
          //       this.$message({
          //         message:res.data.msg,
          //         type:'warning'
          //       });
          //     }
          //   })
          // }
          
      },
    }
  }
</script>
<style lang="less" scoped>
    @import "../../less/admin.less";
    .addRecordItemWrapper{
        .content{                                         
            background: #fff;
            padding: 20px 20px 50px;
            color: #545455;
            min-width: 1100px;
            position: relative;
            .short-inp{
                width: 200px;
            }
            .sub-title{
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 20px;
            }
            .oper{
                text-align: right;
            }
            /deep/.el-input{
              width: 200px;
              .el-input__inner{
                    border: 1px solid #333;
                    color: #000;
                    height: 30px;
                    line-height: 30px;
              }
            }
            .procent{
                /deep/.el-input{
                width: 800px;
              }
            }
            /deep/.el-textarea__inner{
              border: 1px solid #333;
              resize: none;
              width: 800px;
            }
            /deep/.el-form-item{
              margin: 20px 0 0 0;

            }
            // /deep/.el-checkbox__inner{
            //       border: 1px solid #333;
            // }
            /deep/.el-table{
              min-width: 0;
            }
            /deep/.el-input.tipsMsg{
                .el-input__inner{
                    width:200px;
                    height: 30px;
                    display: inline-block;
                }
            }
            /deep/.scoreInp.el-input{
              width:80px;
              .el-input__inner{
                    width:80px;
                    height: 30px;
                    display: inline-block;
                    box-sizing: border-box;
                }
            }
            /deep/.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
              padding: 0;
            }
            /deep/.el-input input::-webkit-outer-spin-button,
            /deep/.el-input input::-webkit-inner-spin-button {
              -webkit-appearance: none;
            }
            /deep/.el-input input[type="number"]{
              -moz-appearance: textfield;
              line-height: 20px;
            }

        
      }
  


    }
    
</style>