elizebeth/src/xt_pages/qcd/statisticalConfiguration.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container statisticalConfig">
      <el-tabs v-model="tabActiveName" @tab-click="handleTabClick" style="margin-bottom:10px">
        <el-tab-pane label="质控达标统计配置" name="control"></el-tab-pane>
        <el-tab-pane label="检验检查统计配置" name="query"></el-tab-pane>
      </el-tabs>
      <el-row :gutter="20">
        <el-col :span="2" :offset="22">
          <el-button type="primary" class="newadd" @click="newDialog = true">新增</el-button>
        </el-col>
      </el-row>
      <div class="configTable">
        <el-table :data="configuraData" border style="width: 100%" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
          <el-table-column prop="date" label="检验检查大项" width="180">
              <template slot-scope="scope">{{ scope.row.project_name }}</template>
          </el-table-column>
          <el-table-column prop="name" label="检查小项" width="300">
             <template slot-scope="scope">{{ scope.row.item_name }}</template>
          </el-table-column>
          <el-table-column prop="address" label="范围">
             <template slot-scope="scope">
               <span v-if="scope.row.range_type == 1">
                 {{ scope.row.min_range }} - {{scope.row.large_range}}
                </span>
                <span v-if="scope.row.range_type == 2">
                   {{scope.row.range_value}}
                </span>
             </template>
          </el-table-column>
           <el-table-column prop="address" label="单位">
              <template slot-scope="scope">{{ scope.row.unit }}</template>
            </el-table-column>
            <el-table-column prop="address" label="排序">
                <template slot-scope="scope">{{ scope.row.sort }}</template>
            </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 100]"
              :page-size="10"
              background
              style="margin-top:20px;float: right"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
      </div>

      <el-dialog title="新增" :visible.sync="newDialog">
        <el-form :model="form" ref="form" :rules="rules">
          <el-form-item label="检查大项" :label-width="formLabelWidth" required prop="inspectionMajor">
            <el-select v-model="form.inspectionMajor" placeholder="请选择检查大项" @change="changeInspection">
               <el-option
                  v-for="item in InspectionMajor"
                  :key="item.project_id"
                  :value="item.project_id"
                  :label="item.project_name"
                  >
               </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查小项" :label-width="formLabelWidth" required prop="inspectionMinor">
            <el-select v-model="form.inspectionMinor" placeholder="请选择检查小项" @change="changeInspectionMonior">
                <el-option
                  v-for="it in InspectionMinor"
                  :key="it.id"
                  :value="it.id"
                  :label="it.item_name"
                  >
                </el-option>
            </el-select>
          </el-form-item>
       
            <el-form-item label="检查结果类型" :label-width="formLabelWidth" required prop="check_type">
                    <el-radio
                      @change="chageType"
                      v-model="form.check_type"
                      v-for="item in radioType"
                      :key="item.label"
                      :label="item.value"
                      :value="item.label"
                      >{{ item.label }}</el-radio>
            </el-form-item>  
          <div style="display:flex;" v-show="showOne">
            <el-form-item label="质控范围" :label-width="formLabelWidth" required prop="min_range">
                <el-input style="width:200px" v-model="form.min_range"></el-input>
            </el-form-item>
            <span style="margin-top:10px">-</span>
            <el-form-item class='newFormItem' :label-width="formLabelWidth" required prop="large_range">
                <el-input style="width:200px" v-model="form.large_range"></el-input>
            </el-form-item>
          </div>
          <div v-show="showTwo">
            <el-form-item label="质控范围" :label-width="formLabelWidth" required prop="range_value">
                <el-input style="width:200px" v-model="form.range_value"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="form.sort"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="newDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveInspection('form')">保 存</el-button>
        </div>
      </el-dialog>



      <el-dialog title="编辑" :visible.sync="editDialog">
        <el-form :model="editform" ref="editform" :rules="rules">
          <el-form-item label="检查大项" :label-width="formLabelWidth" required prop="inspectionMajor">
            <el-select v-model="editform.inspectionMajor" placeholder="请选择检查大项" @change="changeInspectionTwo">
              <el-option
                  v-for="patient in InspectionMajor"
                  :key="patient.project_id"
                  :value="patient.project_id"
                  :label="patient.project_name"
                  >
               </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查小项" :label-width="formLabelWidth" required prop="inspectionMinor">
            <el-select v-model="editform.inspectionMinor" placeholder="请选择检查小项"  @change="changeInspectionMonior">
               <el-option
                  v-for="item in InspectionMinorTwo"
                  :key="item.id"
                  :value="item.id"
                  :label="item.item_name"
                  >
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查结果类型" :label-width="formLabelWidth" required prop="check_type">
                <el-radio
                   @change = "chageType"
                   v-model="editform.check_type"
                   v-for="item in radioType"
                   :key="item.label"
                   :label="item.value"
                   :value="item.label"
                  >{{ item.label }}
                </el-radio>
            </el-form-item> 
           <div style="display:flex;" v-show="showOne">
            <el-form-item label="质控范围" :label-width="formLabelWidth" required prop="min_range">
                <el-input style="width:200px" v-model="editform.min_range"></el-input>
            </el-form-item>
            <span style="margin-top:10px">-</span>
            <el-form-item class='newFormItem' :label-width="formLabelWidth" required prop="large_range">
                <el-input style="width:200px" v-model="editform.large_range"></el-input>
            </el-form-item>
          </div>
            <div v-show="showTwo">
            <el-form-item label="质控范围" :label-width="formLabelWidth" required prop="range_value">
                <el-input style="width:200px" v-model="editform.range_value"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="editform.sort"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialog = false">取 消</el-button>
          <el-button type="primary" @click="EditConfiguration('editform')">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>



<script>
import { GetOICData } from "@/api/qcd";
import PieChart from "../qcd/components/BarChart";
import { uParseTime } from "@/utils/tools";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import { getInspectionMajor,getInspectionMinor,getInspectionRange,saveConfiguration,getConfigurationList,getConfigurationDetail,getAllInspectionMinor,UpdateConfiguration,DeleteConfiguration,getLastSort }from "@/api/common/common";
export default {
  name: "dialysisTotal",
  data() {
    return {
      crumbs: [
        { path: false, name: "质控管理" },
        { path: false, name: "统计配置" },
        { path: false, name: "质控达标统计配置" }
      ],
     radioType: [
        { value: 1, label: "数值类型" },
        { value: 2, label: "非数值类型" }
      ],
      tabActiveName: "control",
      InspectionMajor:[],
      InspectionMinor:[],
      InspectionMinorTwo:[],
      configuraData: [],
      newDialog: false,
      editDialog: false,
      formLabelWidth: "120px",
      form: {
        inspectionMajor: "",
        inspectionMinor: "",
        min_range: "",
        large_range: "",
        sort:"",
        check_type:"",
        range_value:"",
      },
      editform:{
         id:0,
         inspectionMajor: "",
         inspectionMinor: "",
         min_range: "",
         large_range: "",
         sort:"",
         check_type:"",
         range_value:"",
      },
      rules: {
        inspectionMajor: [{ required: true, message: "检查大项不能为空" }],
        inspectionMinor: [{ required: true, message: "检查小项不能为空" }],
        large_range:[{required:true,message:"质控范围不能为空"}],
        min_range:[{required:true,message:"质控范围不能为空"}],
        check_type:[{required:true,message:"检验类型不能为空"}],
        range_value:[{required:true,message:"参考值不能为空"}]
      },
      page:1,
      limit:10,
      total:0,
      showOne:true,
      showTwo:false,
    };
  },
  methods: {
    handleTabClick(tab, event) {
      if (this.tabActiveName == "query") {
        this.$router.push({ path: "/qcd/patientanalysis/checkStatistical" });
      }
    },

    //编辑
    handleEdit(id) {
      this.editDialog = true;
      getConfigurationDetail(id).then(response=>{
         if(response.data.state == 1){
           var configurationdetail = response.data.data.configurationdetail
          //  console.log("详情",configurationdetail)
           this.editform.id = configurationdetail.id
           this.editform.inspectionMajor = configurationdetail.inspection_major
           this.editform.inspectionMinor = configurationdetail.inspection_minor
           this.editform.check_type = configurationdetail.range_type
           this.editform.range_value = configurationdetail.range_value
         if(configurationdetail.range_type == 1){
              this.showOne = true
              this.showTwo = false
           }
         if(configurationdetail.range_type == 2){
             this.showOne = false
             this.showTwo = true
           }
         if (configurationdetail.range_value == ""){
             this.editform.range_value = "0"
           }
           this.editform.large_range = configurationdetail.large_range
           this.editform.min_range = configurationdetail.min_range
           
         if(configurationdetail.sort == 0){
            this.editform.sort = ""
            return
           }
           this.editform.sort = configurationdetail.sort
         }
      })
    },
    
    //获取大项数据来源
    getInspectionMajor(){
      getInspectionMajor().then(response=>{
        if(response.data.state == 1){
          var inspection =  response.data.data.inspection
          // console.log("大项是什么",inspection)
          this.InspectionMajor = inspection
         
        }
      })
    },
    //获取小项
    changeInspection(id){
       this.form.inspectionMinor = ""
      getInspectionMinor(id).then(response=>{
        if(response.data.state == 1){
         var inspection =  response.data.data.inspection
        //  console.log("小项",inspection)
         this.InspectionMinor = inspection
        }
      })
    },
    changeInspectionTwo(id){
      this.InspectionMinorTwo = []
      this.editform.inspectionMinor = ""
       getInspectionMinor(id).then(response=>{
        if(response.data.state == 1){
         var inspection =  response.data.data.inspection
        // console.log("小项",inspection)
         this.InspectionMinorTwo = inspection
        }
      })
    },
    // 获取质控范围
    changeInspectionMonior(id){
       getInspectionRange(id).then(response=>{
         if(response.data.state == 1){
           var inspectionRange =  response.data.data.inspectionRange
          //  console.log("inspectionRange",inspectionRange)
           if(inspectionRange.range_type == 1){
             this.showOne = true
             this.showTwo = false
             this.form.check_type =  1
             this.editform.check_type = 1
             this.form.min_range = inspectionRange.range_min
             this.form.large_range = inspectionRange.range_max
             this.form.range_value  = "0"
           }
           if(inspectionRange.range_type == 2){
             this.showOne = false
             this.showTwo = true
             this.form.check_type = 2
             this.editform.check_type = 2
             this.form.min_range = inspectionRange.range_min
             this.form.large_range = inspectionRange.range_max
             this.form.range_value = inspectionRange.range_value
             this.editform.range_value = inspectionRange.range_value
           }
          
         }
      })
    },
    saveInspection(formName){
      
      this.$refs[formName].validate(valid=>{
        if(valid){
          saveConfiguration(this.form).then(response=>{
            if(response.data.state == 1){
             var standard = response.data.data.standard
             this.$message.success("保存成功")
             this.newDialog = false
             this.form.inspectionMajor = ""
             this.form.inspectionMinor = ""
             this.form.large_range = ""
             this.form.min_range = ""
             this.form.sort = ""
             this.getConfigurationList()
             this.getLastSort()
            }else{
             this.$message.error("检查小项已存在")
            }
          })
        }
      })
    },
   handleSizeChange(limit) {
      this.limit = limit;
      this.getConfigurationList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getConfigurationList();
    },
    getConfigurationList(){
      getConfigurationList(this.limit,this.page).then(response=>{
        if(response.data.state === 1){
          var configurationlist = response.data.data.configurationlist
          for(let i=0;i<configurationlist.length;i++){
            if(configurationlist[i].sort === 0){
              configurationlist[i].sort = ""
            }
          }
          // console.log("列表",configurationlist)
          this.configuraData = configurationlist
          var total = response.data.data.total
         // console.log("total",total)
          this.total = total
        }
      })
    },
    //获取小项
    getAllInspectionMinor(){
      getAllInspectionMinor().then(response=>{
        if(response.data.state == 1){
          var minor =  response.data.data.minor
          this.InspectionMinorTwo = minor
          //console.log("minor",minor)
        }
      })
    },
    EditConfiguration(formName){
       if(this.editform.sort == ""){
         this.editform.sort = 0
       }
       if(this.editform.sort!=""){
        var sorts =  this.editform.sort
        var sort = parseInt(sorts)
        this.editform.sort = sort
       }
      this.$refs[formName].validate(valid=>{
        if(valid){
         UpdateConfiguration(this.editform.id,this.editform).then(response=>{
            if(response.data.state == 1){
            var standard =  response.data.data.standard
            // console.log("standard",standard)
            this.$message.success("保存成功")
            this.editDialog = false
            this.getConfigurationList()
            this.getAllInspectionMinor()
            }else{
            this.$message.error("检查小项已存在")
            }
          })
        }
      })
    },
   handleDelete(id,index) {
      this.$confirm(
        "确认要删除所选记录吗? <br>删除后,该信息将无法恢复",
        "删除提示",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        DeleteConfiguration(id,index).then(response => {
          if (response.data.state === 1) {
           var msg =  response.data.data.msg
          // console.log("msg",msg)
           this.configuraData.splice(index,1)
          }
        });
      });
    },
    getLastSort(){
      getLastSort().then(response=>{
        if(response.data.state === 1){
          var standard = response.data.data.standard
         // console.log("standard",standard)
          this.form.sort = standard.sort + 1+''
        }
      })
    },
    chageType(val){
      if(val == 1){
         this.showOne = true
         this.showTwo = false
         this.form.range_value = ""
         this.editform.range_value = ""
      }
      if(val == 2){
         this.showOne = false
         this.showTwo = true
         this.form.range_value = ""
         this.editform.range_value = ""
      }
    }
  },
  components: {
    PieChart,
    BreadCrumb
  },
   created() {
     //获取检查大项数据来源
       this.getInspectionMajor()
    //获取表格里面的数据
    this.getConfigurationList()
    //获取所有小项的数据
    this.getAllInspectionMinor()
    //获取排序值
    this.getLastSort()
   },

};
</script>
<style lang="scss">
#oictable ::-webkit-scrollbar {
  height: 15px;
}
.configTable {
  .el-table td,
  .el-table th {
    text-align: center;
  }
}
.newFormItem{
  .el-form-item__content{
    margin-left:0 !important;
  }
}
.statisticalConfig{
  .el-tabs{
    margin-bottom: 0 !important;
  }
}
</style>

 <style rel="stylesheet/scss" lang="scss" scoped>
.newadd {
  margin-bottom: 10px;
}
// .app-container {
//   //   margin: 20px;
//   font-size: 15px;
//   .filter-container {
//     padding-bottom: 5px;
//   }
//   .cqd-dataTitle {
//     color: #303133;
//     font-size: 14px;
//     border-bottom: 2px #e4e7ed solid;
//     height: 36px;
//     line-height: 36px;
//     margin: 0 0 25px 0;
//     position: relative;
//   }
//   .cqd-dataTitle::before {
//     position: absolute;
//     left: 0;
//     bottom: -2px;
//     content: "";
//     width: 42px;
//     height: 2px;
//     background: #409eff;
//   }
//   .search-component {
//     width: 500px;
//     .searchBox {
//       width: 300px;
//       height: 36px;
//       line-height: 36px;
//       padding-left: 15px;
//       border: 1px #dcdfe6 solid;
//       border-right: none;
//       outline: none;
//       float: left;
//       border-radius: 6px 0 0 6px;
//       font-size: 14px;
//       color: #333;
//       background: #fff;
//       box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
//     }
//     .searchBtn {
//       background-color: #409eff;
//       color: #fff;
//       font-size: 15px;
//       text-align: center;
//       height: 36px;
//       line-height: 36px;
//       float: left;
//       outline: none;
//       width: 70px;
//       border: none;
//       border-radius: 0 6px 6px 0;
//       font-family: "Microsoft Yahei";
//       cursor: pointer;
//     }
//   }
//   .amount {
//     font-weight: normal;
//     padding: 10px 0 0 0;
//     color: #606266;
//     font-size: 14px;
//     span {
//       color: #ef2525;
//       font-family: "Arial";
//       padding: 0 2px;
//     }
//   }
// }
//
</style>