<template> <div class="card-container"> <a-tabs type="card" @change="tabChange"> <a-tab-pane key="1" tab="市州(含辖区所有医疗机构)"> <div class="from-table"> <a-row> <a-col style="text-align:center;"> <span style="font-size:20pt">{{year}}年度州市医疗行政单位配比</span> </a-col> </a-row> <a-row> <a-col :span="24/colCounts[colCountKey]/2" class="bg-light_blue"> 名额配比数量批量设置: </a-col> <a-col :span="24/colCounts[colCountKey]/2"> <a-input-number v-model="batchValueCount" :min="0" :max="1000" /> </a-col> <a-col :span="24/colCounts[colCountKey]/2"> <a-button type="primary" @click="setBatchUnitCount">批量设置</a-button> </a-col> <a-col :span="6"> 州市行政机构数:<span style="color:red">{{unitGovCount}}</span> </a-col> <a-col :span="9"> </a-col> </a-row> <a-row> <unit-count v-for="unit in unitGovInfo" :key="unit.id" :Unit="unit" :colCount="24/colCounts[colCountKey]" @valueChange="valueChange" /> </a-row> <a-row> <a-col style="text-align:center;"> <a-button type="primary" @click="saveUnitCount">保存</a-button> </a-col> </a-row> </div> </a-tab-pane> <a-tab-pane key="2" tab="省直属单位名额配比"> <div class="from-table"> <a-row> <a-col style="text-align:center;"> <span style="font-size:20pt">{{year}}年度省直医疗机构配比设置</span> </a-col> </a-row> <a-row> <a-col :span="24/colCounts[colCountKey]/2" class="bg-light_blue"> 名额配比数量批量设置: </a-col> <a-col :span="24/colCounts[colCountKey]/2"> <a-input-number v-model="batchValueCount" :min="0" :max="1000" /> </a-col> <a-col :span="24/colCounts[colCountKey]/2"> <a-button type="primary" @click="setBatchUnitCount">批量设置</a-button> </a-col> <a-col :span="6"> 省直医疗机构数:<span style="color:red">{{unitComCount}}</span> </a-col> <a-col :span="9"> </a-col> </a-row> <a-row> <unit-count v-for="unit in unitComInfo" :key="unit.id" :Unit="unit" :colCount="24/colCounts[colCountKey]" /> </a-row> <a-row> <a-col style="text-align:center;"> <a-button type="primary" @click="saveUnitCount">保存</a-button> </a-col> </a-row> </div> </a-tab-pane> </a-tabs> </div> <!-- <a-row> <a-col></a-col> </a-row> --> </template> <script> import { isEmptyParams } from "@/views/utils/common" import UnitCount from "@/views/unit/components/unitCount.vue" import moment from "moment" export default { name: "projAcountSet", components: { UnitCount, }, data () { const colCounts = {}; [2, 3, 4, 6, 8, 12].forEach((value, i) => { colCounts[i] = value; }); return { unitGovInfo: [], unitComInfo: [], colCounts, colCountKey: 1, queryType: 1, batchValueCount: 0, year: moment().format('YYYY'), unitGovCount: 0, unitComCount: 0, }; }, created () { this.unitCount() }, methods: { moment, tabChange (key) { this.queryType = key this.unitCount() }, unitCount () { let pars = { queryType: this.queryType } let par = { ...pars, } this.$api.systemManage.getUnitProjLimit(par).then(({ data = {} }) => { if (data) { if (this.queryType == 1) { this.unitGovInfo = data this.unitGovCount = data.length } else { this.unitComInfo = data this.unitComCount = data.length } } }) }, valueChange (unit) { if (this.queryType == 1) { let arr = this.unitGovInfo.filter(p => p.id === unit.id) arr[0].projLimit = unit.projLimit } else { let arr = this.unitComInfo.filter(p => p.id === unit.id) arr[0].projLimit = unit.projLimit } }, setBatchUnitCount () { if (this.queryType == 1) this.unitGovInfo.forEach(p => { p.projLimit = this.batchValueCount }) else this.unitComInfo.forEach(p => { p.projLimit = this.batchValueCount }) }, saveUnitCount () { if (this.queryType == 1) { let unitGovList = this.unitGovInfo.filter(p => p.projLimit !== null) let pars = unitGovList this.$api.systemManage.updateUnitProjLimit(pars).then(({ data = {} }) => { if (data) { this.unitGovInfo = [] this.$message.info(data) this.unitCount() } }) } else { let unitComList = this.unitComInfo.filter(p => p.projLimit !== null) let pars = unitComList this.$api.systemManage.updateUnitProjLimit(pars).then(({ data = {} }) => { if (data) { this.unitComInfo = [] this.$message.info(data) this.unitCount() } }) } } } }; </script> <style> .card-container { background: #f5f5f5; overflow: hidden; padding: 24px; } .card-container > .ant-tabs-card > .ant-tabs-content { height: 100vh; margin-top: -16px; } .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane { background: #fff; padding: 16px; } .card-container > .ant-tabs-card > .ant-tabs-bar { border-color: #fff; } .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { border-color: transparent; background: transparent; } .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { border-color: #fff; background: #fff; } </style>