Vue_New/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">
      <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="tableData" border style="width: 100%">
          <el-table-column prop="date" label="检验检查大项" width="180"></el-table-column>
          <el-table-column prop="name" label="检查小项" width="180"></el-table-column>
          <el-table-column prop="address" label="范围"></el-table-column>
           <el-table-column prop="address" label="单位"></el-table-column>
            <el-table-column prop="address" label="排序"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </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="large_range">
            <el-input style="width:200px" v-model="form.min_range"></el-input>&nbsp;
            -
            <el-input style="width:200px" v-model="form.large_range"></el-input>
          </el-form-item>
          <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="form">
          <el-form-item label="检查大项" :label-width="formLabelWidth">
            <el-select v-model="form.inspectionMajor" placeholder="请选择活动区域">
              <el-option
                  v-for="patient in InspectionMajor"
                  :key="patient.id"
                  :value="patient.id"
                  :label="patient.project_name"
                  >
               </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查小项" :label-width="formLabelWidth">
            <el-select v-model="form.inspectionMinor" placeholder="请选择活动区域">
               <el-option
                  v-for="item in InspectionMinor"
                  :key="item.project_id"
                  :value="item.project_id"
                  :label="item.item_name"
                  >
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指控范围" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="form.min_range"></el-input>&nbsp;
            -
            <el-input style="width:200px" v-model="form.large_range"></el-input>
          </el-form-item>
          <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="editDialog = false">取 消</el-button>
          <el-button type="primary" @click="editDialog = false">保存</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,saveInspection }from "@/api/common/common";
export default {
  name: "dialysisTotal",
  data() {
    return {
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "统计配置" },
        { path: false, name: "质控达标统计配置" }
      ],
      tabActiveName: "control",
      InspectionMajor:[],
      InspectionMinor:[],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      newDialog: false,
      editDialog: false,
      formLabelWidth: "120px",
      form: {
        inspectionMajor: "",
        inspectionMinor: "",
        min_range: "",
        large_range: "",
        sort:"",
      },
      rules: {
        inspectionMajor: [{ required: true, message: "检查大项不能为空" }],
        inspectionMinor: [{ required: true, message: "检查小项不能为空" }],
        large_range:[{required:true,message:"指控范围不能为空"}]
      }
    };
  },
  methods: {
    handleTabClick(tab, event) {
      if (this.tabActiveName == "query") {
        this.$router.push({ path: "/qcd/patientanalysis/checkStatistical" });
      }
    },
    handleEdit() {
      this.editDialog = true;
    },
    
    //获取大项数据来源
    getInspectionMajor(){
      getInspectionMajor().then(response=>{
        if(response.data.state == 1){
          var inspection =  response.data.data.inspection
          console.log("inspection",inspection)
          this.InspectionMajor = inspection

        }
      })
    },
    //获取小项
    changeInspection(id){
      console.log("id----",id)
      getInspectionMinor(id).then(response=>{
        if(response.data.state == 1){
         var inspection =  response.data.data.inspection
         console.log("inspection",inspection)
         this.InspectionMinor = inspection
        }
      })
    },
    // 获取指控范围
    changeInspectionMonior(id){
       getInspectionRange(id).then(response=>{
         if(response.data.state == 1){
           var inspectionRange =  response.data.data.inspectionRange
           console.log("inspectionRange",inspectionRange)
           this.form.min_range = inspectionRange.range_min
           this.form.large_range = inspectionRange.range_max
         }
      })
    },
    saveInspection(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          saveInspection(this.form).then(response=>{
            if(response.data.state == 1){
             var standard = response.data.data.standard
             this.$message.success("保存成功")
            }
          })
        }
      })
    }
  },
  components: {
    PieChart,
    BreadCrumb
  },
   created() {
     //获取检查大项数据来源
       this.getInspectionMajor()
   },
};
</script>
<style lang="scss">
#oictable ::-webkit-scrollbar {
  height: 15px;
}
.configTable {
  .el-table td,
  .el-table th {
    text-align: center;
  }
}
</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>