Vue_New/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="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 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">
          <el-form-item label="检查大项" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查频次(天)" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="form.name"></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="newDialog = false">确 定</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.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查频次(天)" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input style="width:200px" v-model="form.name"></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";
export default {
  name: "dialysisTotal",
  data() {
    return {
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "统计配置" },
        { path: false, name: "检验检查统计配置" }
      ],
      tabActiveName: "query",
      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: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  created() {},
  methods: {
    handleTabClick(tab, event) {
      if (this.tabActiveName == "control") {
        this.$router.push({ path: "/qcd/patientanalysis/statisticalConfig" });
      }
    },
    handleEdit() {
      this.editDialog = true;
    }
  },
  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>