fj-dc-ui/.svn/pristine/a7/a7942952bc608e45f0d00692cb6cd633ce3c2800.svn-base

<template>
  <el-container class="monthReport">
    <el-card class="box-card" :style="{'height': cardHeight + 'px','overflow':'hidden'}">
       <h2 class="title_monthReport">水务行业安全大检查情况统计表</h2>
      <el-form :inline="true" size="mini" class="demo-form-inline" label-width="120px">
        <el-form-item label="行政区划" label-width="120px" v-if="!isCounty">
          <treeselect v-model="searchForm.adCode" :options="treeOptions" :normalizer="normalizer" :show-count="false" placeholder="请选择区划" style="width:200px;height:28px;"/>
        </el-form-item>
        <el-form-item label="行业(领域)" label-width="120px">
          <el-select v-model="searchForm.chkIndustry" clearable placeholder="行业(领域)">
            <el-option v-for="(item,index) in options" :label="item.industryType" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="填报日期" label-width="120px">
          <el-date-picker
            v-model="searchForm.chkSubmitDttm"
            clearable
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
            placeholder="填报日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否上报" label-width="120px" v-if="isCounty">
          <el-select
            v-model="searchForm.fillRepoStat"
            clearable
            style="width: 200px"
            placeholder="是否上报">
            <el-option label="否" value="1"></el-option>
            <el-option label="是" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="searchBtn" style="margin-left: 10px;">查询</el-button>
          <el-button type="success" size="mini" @click="addBtn" v-if="isCounty">添加</el-button>
          <el-button type="success" size="mini" @click="batchSubmit" v-if="isCounty">批量上报</el-button>
          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
          <el-button type="primary" size="mini" @click="downloadTemplate" v-if="isCounty">下载模板</el-button>
          <PblmMendUploadAutoSimple
            v-if="isCounty"
            ref="ImportPlan"
            :limit=1
            :url="`/pdcApi/chk/safe/stat/record/impExl`"
            @uploadOver="uploadOver"
            :accept="'.xls'"
            style="margin:auto;"
            comment=".xls格式,不超过50MB(自动上传)"
            fileDesc="批量导入"
          ></PblmMendUploadAutoSimple>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          border
          ref="table"
          :height="tableHeight"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column align="center" type="index" label="序号" width="80">
            <template slot-scope="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200"
            prop="adName"
            label="行政区划"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200"
            prop="chkIndustry"
            :formatter="formatChkIndustry"
            label="行业(领域)"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="检查执法情况"
            show-overflow-tooltip>
            <el-table-column
              header-align="center"
              align="center"
              label="组织检查组"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="个"
                prop="chkGroupNum"
                width="100"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="暗访检查组"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="个"
                prop="chkGroupNumUndercover"
                width="100"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="检查点位"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="个"
                prop="chkPointNum"
                width="100"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="一般隐患"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="排查"
                show-overflow-tooltip>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="项"
                  prop="inspGeneralChk"
                  show-overflow-tooltip>
                </el-table-column>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                label="已整治"
                show-overflow-tooltip>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="项"
                  prop="inspGeneralRepair"
                  show-overflow-tooltip>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="重大隐患"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="排查"
                show-overflow-tooltip>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="项"
                  prop="inspMajorChk"
                  show-overflow-tooltip>
                </el-table-column>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                label="已整治"
                show-overflow-tooltip>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="项"
                  prop="inspMajorRepair"
                  show-overflow-tooltip>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="共计投入落实隐患整改资金"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="万元"
                prop="dangerRectFund"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="打击非法违法行为"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="起"
                prop="crackDownIllegalAction"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="整治违规违章行为"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="家"
                prop="repairViolateRuleAction"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="实施处罚情况"
            show-overflow-tooltip>
            <el-table-column
              header-align="center"
              align="center"
              label="停产整顿"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="家"
                prop="stopProdRect"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="暂扣吊销证照"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="个"
                prop="suspendLicense"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="关闭取缔"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="家"
                prop="shutClampDown"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="处罚罚款"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="万元"
                prop="penaltyFine"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="问责曝光责任单位/个人"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="家、人"
                prop="actbExpsUnit"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="联合惩戒失信企业"
              show-overflow-tooltip>
              <el-table-column
                header-align="center"
                align="center"
                label="家"
                prop="joinPunishTrustBreakEntp"
                show-overflow-tooltip>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="填报单位"
            min-width="150"
            prop="chkSubmitDept"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="填报日期"
            min-width="150"
            prop="chkSubmitDttm"
            :formatter="formatDate"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            min-width="220"
            v-if="isCounty"
            label="操作"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="success" size="mini"  :disabled="scope.row.fillRepoStat=='2'" @click.stop="report(scope.row)">上报</el-button>
              <el-button type="primary" size="mini"  :disabled="scope.row.fillRepoStat=='2'" @click.stop="edit(scope.row)">编辑</el-button>
              <el-button type="danger"  size="mini"  :disabled="scope.row.fillRepoStat=='2'" @click.stop="deleteData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      class="outerDialog custom_dialog"
      :title="dialogT"
      width="45%"
      modal-append-to-body
      append-to-body
      @close="closeAddDialog"
      v-if="addDialogVisible"
      :visible.sync="addDialogVisible">
      <div style="width: 100%;height:100%;">
        <el-form ref="addForm" label-width="220px">
          <el-form-item label="行业(领域)" required>
            <el-select v-model="addForm.chkIndustry" placeholder="请选择行业(领域)">
              <el-option v-for="(item,index) in options" :label="item.industryType" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组织检查组(个)" required>
            <el-input-number v-model="addForm.chkGroupNum" placeholder="请输入组织检查组(个)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="暗访检查组(个)">
            <el-input-number v-model="addForm.chkGroupNumUndercover" placeholder="请输入暗访检查组(个)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="检查点位(个)" required>
            <el-input-number v-model="addForm.chkPointNum" placeholder="请输入检查点位(个)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="一般隐患排查数(项)" required>
            <el-input-number v-model="addForm.inspGeneralChk" placeholder="请输入一般隐患排查数(项)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="一般隐患已整治数(项)">
            <el-input-number v-model="addForm.inspGeneralRepair" placeholder="请输入一般隐患已整治数(项)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="重大隐患排查数(项)" required >
            <el-input-number v-model="addForm.inspMajorChk" placeholder="请输入重大隐患排查数(项)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="重大隐患已整治数(项)">
            <el-input-number v-model="addForm.inspMajorRepair" placeholder="请输入重大隐患已整治数(项)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="共投入落实隐患整改资金(万元)" required >
            <el-input-number v-model="addForm.dangerRectFund" placeholder="请输入共投入落实隐患整改资金(万元)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="打击非法违法行为(起)" required >
            <el-input-number v-model="addForm.crackDownIllegalAction" placeholder="请输入打击非法违法行为(起)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="整治违规违章行为(起)" required >
            <el-input-number v-model="addForm.repairViolateRuleAction" placeholder="请输入整治违规违章行为(起)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="停产整顿(家)" >
            <el-input-number v-model="addForm.stopProdRect" placeholder="请输入停产整顿(家)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="暂扣吊销证照(个)" >
            <el-input-number v-model="addForm.suspendLicense" placeholder="请输入暂扣吊销证照(个)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="关闭取缔(家)" >
            <el-input-number v-model="addForm.shutClampDown" placeholder="请输入关闭取缔(家)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="处罚罚款(万元)" >
            <el-input-number v-model="addForm.penaltyFine" placeholder="请输入处罚罚款(万元)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="问责曝光责任单位个人(家、人)" >
            <el-input-number v-model="addForm.actbExpsUnit" placeholder="请输入问责曝光责任单位个人(家、人)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="联合惩戒失信企业(家)" >
            <el-input-number v-model="addForm.joinPunishTrustBreakEntp" placeholder="请输入联合惩戒失信企业(家)" clearable style="width: 70%"></el-input-number>
          </el-form-item>
          <el-form-item label="填报单位" required >
            <el-input v-model="addForm.chkSubmitDept" placeholder="请输入填报单位" clearable style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" @click="addSubmit" style="margin-bottom: 30px;">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
    import {exportModel} from "@util/gw_exportModel";
    import request from '@util/gw_ajax_request'
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import PblmMendUploadAutoSimple from "../../widgets/pblm-mend-upload-auto-simple";
    import {getAddTree} from "../../api/duChaAPI.js";
    export default {
        name: "",
        props: [],
        data() {
            return {
                treeOptions: undefined,
                dialogT:"",
                multipleSelection:[],
                cardHeight: window.innerHeight - 110,
                addDialogVisible:false,
                tableHeight:window.innerHeight-300,
                tableData:[],
                loading:false,
                pageNum:1,
                pageSize:10,
                total:0,
                isCounty:false,
                options:[],
                searchForm:{
                    chkIndustry:"",
                    chkSubmitDttm:""
                },
                addForm:{
                  id:"",
                  chkIndustry:"",
                  adName:"",
                  adCode:"",
                  chkGroupNum:"",
                  chkGroupNumUndercover:"",
                  chkPointNum:"",
                  inspGeneralChk:"",
                  inspGeneralRepair:"",
                  inspMajorChk:"",
                  inspMajorRepair:"",
                  dangerRectFund:"",
                  crackDownIllegalAction:"",
                  repairViolateRuleAction:"",
                  stopProdRect:"",
                  suspendLicense:"",
                  shutClampDown:"",
                  penaltyFine:"",
                  actbExpsUnit:"",
                  joinPunishTrustBreakEntp:"",
                  chkSubmitDttm:"",
                  chkSubmitDept:""
                }
            }
        },
        filters:{

        },
        components: {
            Treeselect,
            PblmMendUploadAutoSimple
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            orgId() {
                return localStorage.getItem('currentOrgId') ? localStorage.getItem("currentOrgId") : "";
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
        },
        created(){
            this.getIsCounty();
            this.getAdTree();
            this.getOptions();
        },
        mounted() {
            this.$nextTick(()=>{
                this.initTableData();
            })
        },
        methods: {
            uploadOver(){
                this.initTableData();
            },
            async downloadTemplate() {
                let url = "/pdcApi/chk/safe/stat/record/dowmTemplate";
                let type = "get";
                let exportName = "水务行业安全大检查情况统计表.xls"
                let result = await exportModel(type, url, exportName, null);
            },
            async exportExcel() {
                let url = "/pdcApi/chk/safe/stat/record/export";
                let type = "POST";
                let exportName = "水务行业安全大检查情况统计表.xls"
                let result = await exportModel(type, url, exportName,JSON.stringify(this.searchForm));
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            normalizer(node) {
                if (node.adUpDtoList && !node.adUpDtoList.length) {
                    delete node.adUpDtoList;
                }
                return {
                    id: node.adCode,
                    label: node.adName,
                    children: node.adUpDtoList
                };
            },
            getAdTree(){
                var _self = this;
                request.get('/dc/ad/base/getTreeByUser').then(res=>{
                    if(res.success){
                        _self.treeOptions = res.data;
                    }
                })
            },
            getOptions(){
                request.post('/chk/safe/stat/industry/selectOptions',{}).then(res=>{
                    if(res.success){
                        this.options = res.data;
                    }
                })
            },
            getIsCounty(){
                var _self = this;
                request.get('/chk/safe/prod/ledger/getIsCounty').then(res=>{
                    if(res.success){
                        _self.isCounty = res.data.key;
                    }
                })
            },
            formatDate(row, column, cellValue, index){
                var dateF = row[column.property];
                if(dateF){
                    var date = new Date(dateF);
                    return date.getFullYear()+"-"+((date.getMonth()+1)>9?(date.getMonth()+1):'0'+(date.getMonth()+1))+"-"+(date.getDate()>9?date.getDate():"0"+date.getDate());
                }
                return "";
            },
            formatChkIndustry(row, column, cellValue, index){
                var val = row[column.property];
                var name = "";
                if(val){
                   this.options.forEach((item,index)=>{
                      if(item.id==val){
                          name = item.industryType
                      }
                   })
                }
                return name;
            },
            batchSubmit(){
                if(this.multipleSelection && this.multipleSelection.length>0){
                    var ids = [];
                    this.multipleSelection.forEach((item)=>{
                        ids.push(item.id);
                    })
                    this.$confirm('确定要批量上报吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.post(`/chk/safe/stat/record/report/batch?ids=${ids.join(",")}`).then(res=>{
                            if(res.success){
                                this.initTableData();
                            }else{
                                this.$message.warning(res.message);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消批量上报'
                        });
                    });
                }else{
                    this.$message.warning("请选择数据")
                }
            },
            report(row){
                var ids = [];
                ids.push(row.id);
                this.$confirm('确定要上报当前数据吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post(`/chk/safe/stat/record/report/batch?ids=${ids.join(",")}`).then(res=>{
                        if(res.success){
                            this.initTableData();
                        }else{
                            this.$message.warning(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消上报'
                    });
                });
            },
            deleteData(id){
                var _self = this;
                this.$confirm('确定删除该条数据吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/chk/safe/stat/record/delete/'+id).then(res=>{
                        if(res.success){
                            _self.initTableData();
                        }else{
                            _self.$message.warning(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            edit(row){
                var obj = JSON.stringify(row);
                this.addDialogVisible = true;
                this.addForm = JSON.parse(obj);
                this.dialogT = "编辑";
            },
            addSubmit(){
                if(!this.addForm.chkIndustry){
                    this.$message.warning("行业(领域)不能为空");
                    return;
                }
                if(!this.addForm.chkGroupNum){
                    this.$message.warning("组织检查组不能为空");
                    return;
                }
                if(!this.addForm.chkPointNum){
                    this.$message.warning("检查点位不能为空");
                    return;
                }
                if(!this.addForm.inspGeneralChk){
                    this.$message.warning("一般隐患排查数不能为空");
                    return;
                }
                if(!this.addForm.inspMajorChk){
                    this.$message.warning("重大隐患排查数不能为空");
                    return;
                }
                if(!this.addForm.dangerRectFund){
                    this.$message.warning("共投入落实隐患整改资金不能为空");
                    return;
                }
                if(!this.addForm.crackDownIllegalAction){
                    this.$message.warning("打击非法违法行为不能为空");
                    return;
                }
                if(!this.addForm.repairViolateRuleAction){
                    this.$message.warning("整治违规违章行为不能为空");
                    return;
                }
                if(!this.addForm.chkSubmitDept){
                    this.$message.warning("填报单位不能为空");
                    return;
                }
                var _self = this;
                request.post('/chk/safe/stat/record/',this.addForm).then(res=>{
                    if(res.success){
                        _self.$message.success("保存成功");
                        _self.addDialogVisible = false;
                        _self.addForm = {};
                        _self.initTableData();
                    }else{
                        _self.$message.warning(res.message);
                    }
                })
            },
            closeAddDialog(){
                this.addDialogVisible = false;
            },
            initTableData(){
                this.searchForm.pageNum = this.pageNum;
                this.searchForm.pageSize = this.pageSize;
                var _self = this;
                request.post(`/chk/safe/stat/record/page`,this.searchForm).then(res=>{
                    if(res.success){
                        _self.tableData = res.data.list;
                        _self.total = res.data.total;
                        _self.loading = false;
                        _self.$nextTick(()=>{
                            _self.$refs.table.doLayout();
                        })
                    }else{
                        _self.$message.warning(res.message)
                    }
                })
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.initTableData();
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.initTableData();
            },
            searchBtn(){
                this.initTableData();
            },
            addBtn(){
                this.addForm = {};
                this.addDialogVisible = true;
                this.dialogT = "添加"
            }
        }
    }
</script>

<style lang="scss" scoped>
  .vue-treeselect /deep/.vue-treeselect__control{
     height: 28px !important;
  }
  .vue-treeselect /deep/.vue-treeselect__placeholder{
     line-height: 28px !important;
  }
  .monthReport >>>.el-dialog{
     margin-top: 10vh !important;
  }
  .monthReport{
     width: 100%;
     height:90%;
     margin: 0;
     padding: 0;
  }
  .box-card{
     width: calc(100% - 20px);
     height:calc(100% - 20px);
     margin: 0 auto;
     margin-top: 10px;
  }
  .title_monthReport{
     text-align: center;
     padding: 10px;
  }
  .note_monthReport{
    width: 100%;
    background-color: rgba(255, 251, 230, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 229, 143, 1);
    color: rgba(0, 0, 0, 0.447058823529412);
    font-size: 14px;
    padding: 10px;
  }
  .note_monthReport p:first-child{
     font-size: 16px !important;
  }
  .monthReport{
    .demo-form-inline{
      .el-form-item{
         margin-bottom: 5px;
         margin-top: 8px;
      }
    }
  }
</style>