elizebeth/src/xt_pages/qcd/checkStatistical.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="checkList" border style="width: 100%">
          <el-table-column prop="date" label="检验检查项">
              <template slot-scope="scope">{{ scope.row.project_name }}</template>
          </el-table-column>
          <el-table-column prop="name" label="检查频次(天)">
              <template slot-scope="scope">{{ scope.row.inspection_frequency }}</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="请选择检查大项">
                <el-option
                  v-for="it in InspectionMajor"
                  :key="it.project_id"
                  :value="it.project_id"
                  :label="it.project_name"
                  >
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查频次(天)" :label-width="formLabelWidth" required prop="frequency">
            <el-input style="width:200px" v-model="form.frequency"></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="SaveCheckConfiguration('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="请选择检查大项">
                <el-option
                  v-for="it in InspectionMajor"
                  :key="it.project_id"
                  :value="it.project_id"
                  :label="it.project_name"
                  >
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查频次(天)" :label-width="formLabelWidth" required prop="frequency">
            <el-input style="width:200px" v-model="editform.frequency"></el-input>
          </el-form-item>
          <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="UpdateCheck('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 {getAllInspectionData,SaveCheckConfiguration,getAllCheckList,getCheckDetail,UpdateCheck,DeleteCheck} from "@/api/common/common"
export default {
  name: "dialysisTotal",
  data() {
    return {
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "统计配置" },
        { path: false, name: "检验检查统计配置" }
      ],
      tabActiveName: "query",
      newDialog: false,
      editDialog: false,
      formLabelWidth: "120px",
      form: {
        inspectionMajor:"",
        frequency:"",
        sort:"",
      },
      editform:{
        id:0,
        inspectionMajor:"",
        frequency:"",
        sort:"",
      },
     InspectionMajor:[],
     rules: {
        inspectionMajor: [{ required: true, message: "检查大项不能为空" }],
        frequency: [{ required: true, message: "检查频次不能为空" }],
      },
      limit:10,
      page:1,
      total:0,
      checkList:[],
    };
  },
  created() {
    //获取大项
    this.getAllInspectionData(),
    this.getAllCheckList()
  },
  methods: {
    handleTabClick(tab, event) {
      if (this.tabActiveName == "control") {
        this.$router.push({ path: "/qcd/patientanalysis/statisticalConfig" });
      }
    },
    handleEdit(id) {
      this.editDialog = true;
       getCheckDetail(id).then(response=>{
         if(response.data.state == 1){
           var checkdetail = response.data.data.checkdetail
           console.log("checkdetail",checkdetail)
           this.editform.id = checkdetail.id
           this.editform.inspectionMajor = checkdetail.inspection_major
           this.editform.frequency = checkdetail.inspection_frequency
           if(checkdetail.sort == 0){
             this.editform.sort = ""
             return 
           }
           this.editform.sort = checkdetail.sort
         }
       })
    },
    getAllInspectionData(){
      getAllInspectionData().then(response=>{
        if(response.data.state == 1){
          var inspection =  response.data.data.inspection
          //console.log("列表",inspection)
          this.InspectionMajor = inspection
        }
      })
    },
    //新增
    SaveCheckConfiguration(formName){
       this.$refs[formName].validate(valid=>{
         if(valid){
           SaveCheckConfiguration(this.form).then(response=>{
              if(response.data.state === 1){
                var configuration =  response.data.data.configuration
                this.$message.success("保存成功")
                this.newDialog = false
                this.form.inspectionMajor = ""
                this.form.frequency = ""
                this.form.sort = ""
              }else{
                this.$message.error("检验检查项已存在,不能重复添加")
              }
           })
         }
       })
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getAllCheckList()
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getAllCheckList()
    },
    getAllCheckList(){
      getAllCheckList(this.page,this.limit).then(response=>{
        if(response.data.state == 1){
          var checklist = response.data.data.checklist
          for(let i=0;i<checklist.length;i++){
            if(checklist[i].sort == 0){
              checklist[i].sort = ""
            }
          }
          console.log("列表",checklist)
          this.checkList = checklist
          this.total = response.data.data.total
          console.log("total",this.total)
        }
      })
    },
    UpdateCheck(formName){
       if(this.editform.sort == ""){
         this.editform.sort = 0
       }
       if(this.editform.sort !=""){
         var sort = this.editform.sort 
         var sorts = parseInt(sort)
         this.editform.sort = sorts
       }
     
      this.$refs[formName].validate(valid=>{
        if(valid){
          UpdateCheck(this.editform.id,this.editform).then(response=>{
           
            if(response.data.state == 1){
              var configuration =  response.data.data.configuration
               this.editDialog = false
               this.getAllCheckList()
               this.$message.success("保存成功")
            }else{
              this.$message.error("检验检查项已存在")
            }
          })
        }
      })
    },
    handleDelete(id,index){
        this.$confirm(
        "确认要删除所选记录吗? <br>删除后,该信息将无法恢复",
        "删除提示",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        DeleteCheck(id,index).then(response => {
          if (response.data.state === 1) {
           var msg =  response.data.data.msg
           console.log("msg",msg)
           this.checkList.splice(index,1)
          }
        });
      });
    }
  },
  components: {
    PieChart,
    BreadCrumb
  }
};
</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>