Source/UBCS-WEB/src/views/code/addbasiccode.vue

@@ -1,226 +1,270 @@
<template>
  <div class="total">
    <span class="left">
      <el-form :model="form">

          <el-form-item label="码段编号:" :label-width="leftFormLabelWidth">
            <el-input v-model="form.id" ></el-input>
          </el-form-item>

          <el-form-item label="码段名称:" :label-width="leftFormLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="码段类型" :label-width="leftFormLabelWidth" prop="codefixedsec">
            <el-select v-model="form.sectype" placeholder="请选择" @change="changeSectypeFormItems">
              <el-option
                v-for="item in sectypeList"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="描述:" :label-width="leftFormLabelWidth">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>

          <el-form-item label="是否流水依赖:" :label-width="leftFormLabelWidth"  prop="serialDependFlag">
            <el-switch v-model="form.serialDependFlag"></el-switch>
            <el-input-number v-show="form.serialDependFlag" v-model="form.serialDependOrder" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="是否为空:" :label-width="leftFormLabelWidth">
            <el-switch v-model="form.nullableFlag"></el-switch>
          </el-form-item>

      </el-form>
    </span>
    <el-divider direction="vertical"></el-divider>
    <span class="right">

      <!-- 固定码段 -->
      <el-form v-show="form.sectype==='codefixedsec' ? true:false">
        <el-form-item label="码段长度类型:" :label-width="rightFormLabelWidth">
            <el-select v-model="form.codeSecLengthType" placeholder="请选择">
              <el-option
              v-for="item in codeSecLengthType"
              :key="item.dictValue"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth">
            <el-input v-model="form.codeSecLength"></el-input>
          </el-form-item>
      </el-form>

      <!-- 属性码段 -->
      <el-form v-show="form.sectype==='codeattrsec' ? true:false">
        <el-form-item label="属性:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.referAttributeName"></el-input>
  <div class="total" style="overflow-y: auto; height: 70vh">
    <el-form :model="form" :rules="formRules" ref="form" >
      <span class="left">
        <el-form-item label="码段编号:" :label-width="leftFormLabelWidth" required prop="id">
          <el-input v-model="form.id" ></el-input>
        </el-form-item>
        <el-form-item label="属性所在分类:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.referCodeClassifyOidName"></el-input>
        </el-form-item>
        <el-form-item label="取值规则:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.getValueClass"></el-input>
        </el-form-item>
      </el-form>

      <!-- 流水码段 -->
      <el-form v-show="form.sectype==='codeserialsec' ? true:false">
        <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeSecLength"></el-input>
        <el-form-item label="码段名称:" :label-width="leftFormLabelWidth" required prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="流水号的起始值:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.serialStart"></el-input>
        </el-form-item>
        <el-form-item label="流水的步长:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.serialStep"></el-input>
        </el-form-item>
        <el-form-item label="编码补位方式:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeFillType" placeholder="请选择">
            <el-option label="左补位" value="codeattrsec"
                v-for="item in codeFillType"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补位时的字符:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeFillSeparatorSelect" filterable placeholder="请选择">

        <el-form-item label="码段类型" :label-width="leftFormLabelWidth" required prop="sectype">
          <el-select v-model="form.sectype" placeholder="请选择" @change="changeSectypeFormItems">
            <el-option
                v-for="item in codeFillSeparator"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="填充长度:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeFillLength"></el-input>
        </el-form-item>
        <el-form-item label="流水上限:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeFillLimit"></el-input>
        </el-form-item>
        <el-form-item label="流水是否补码:" :label-width="rightFormLabelWidth">
          <el-switch v-model="form.codeFillFlag"></el-switch>
        </el-form-item>
        <el-form-item label="自定义的流水算法:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.customCodeSerialClass"></el-input>
        </el-form-item>
      </el-form>

      <!-- 层级码段 -->
      <el-form v-show="form.sectype==='codelevelsec' ? true:false">
        <el-form-item label="层级类型:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeLevelType" placeholder="请选择">
            <el-option
                v-for="item in codeLevelType"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="层级的值:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeLevelValue"></el-input>
        </el-form-item>
        <el-form-item label="字符截取类型:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.valueCutType" placeholder="请选择">
            <el-option
              v-for="item in codeCutType"
              v-for="item in sectypeList"
              :key="item.dictValue"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="取值类型:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeGetValueType" placeholder="请选择">
            <el-option
              v-for="item in codeGetValueType"
              :key="item.dictValue"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 引用码段 -->
      <el-form v-show="form.sectype==='coderefersec' ? true:false">
        <el-form-item label="参照引用的业务类型:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.referBtmId"></el-input>
        <el-form-item label="描述:" :label-width="leftFormLabelWidth">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="参照配置:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.referConfig"></el-input>
        </el-form-item>
      </el-form>

      <!-- 日期码段 -->
      <el-form v-show="form.sectype==='codedatesec' ? true:false">
        <el-form-item label="日期格式:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeDateFormatStr"></el-input>
        <el-form-item label="是否流水依赖:" :label-width="leftFormLabelWidth">
          <el-switch v-model="form.serialDependFlag"></el-switch>
          <el-input-number v-show="form.serialDependFlag" v-model="form.serialDependOrder" controls-position="right"></el-input-number>
        </el-form-item>
      </el-form>

      <!-- 分类码段 -->
      <el-form v-show="form.sectype==='codeclassifysec' ? true:false">
        <el-form-item label="码段长度类型:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeSecLengthType" placeholder="请选择">
            <el-option
        <el-form-item label="是否为空:" :label-width="leftFormLabelWidth">
          <el-switch v-model="form.nullableFlag"></el-switch>
        </el-form-item>
      </span>

      <el-divider direction="vertical"></el-divider>
      
      <span class="right">

        <!-- 固定码段 -->
        <div v-show="form.sectype==='codefixedsec' ? true:false">
          <el-form-item label="码段长度类型:" :label-width="rightFormLabelWidth" required prop="codeSecLengthType">
              <el-select v-model="form.codeSecLengthType" placeholder="请选择">
                <el-option
                v-for="item in codeSecLengthType"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeSecLength"></el-input>
        </el-form-item>
        <el-form-item label="是否自动分配分类值:" :label-width="rightFormLabelWidth">
          <el-switch v-model="form.matchClassifyValueFlag"></el-switch>
        </el-form-item>
        <el-form-item label="父分类码段:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.parentClassifySecOid"></el-input>
        </el-form-item>
      </el-form>
              </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth" required prop="codeSecLength">
              <el-input v-model="form.codeSecLength"></el-input>
            </el-form-item>
        </div>

      <!-- 可变码段 -->
      <el-form v-show="form.sectype==='codevariablesec' ? true:false">
        <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth">
          <el-input v-model="form.codeSecLength"></el-input>
        </el-form-item>
        <el-form-item label="编码补位方式:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeFillType" placeholder="请选择">
            <el-option
                v-for="item in codeFillType"
        <!-- 属性码段 -->
        <div v-show="form.sectype==='codeattrsec' ? true:false">

          <el-form-item label="属性:" :label-width="rightFormLabelWidth" required prop="referAttributeName">
            <el-input
              placeholder="请选择"
              prefix-icon="el-icon-search"
              readonly="true"
              v-model="form.referAttributeName"
              @focus="openAttrSelectOrGetValue('attr')">
              <i slot="suffix" class="el-icon-circle-close" @click="clearAttrDataByIcon('attr')" style="cursor: pointer;"></i>
            </el-input>
          </el-form-item>

          <el-form-item label="属性所在分类:" :label-width="rightFormLabelWidth">
            <el-input 
              v-model="form.referCodeClassifyOidName"
              disabled>
          </el-input>
          </el-form-item>

          <el-form-item label="取值规则:" :label-width="rightFormLabelWidth">
            <el-input
              placeholder="请选择"
              prefix-icon="el-icon-search"
              readonly="true"
              v-model="form.getValueClass"
              @focus="openAttrSelectOrGetValue('value')">
              <i slot="suffix" class="el-icon-circle-close" @click="clearAttrDataByIcon('value')" style="margin-right: 5px;cursor: pointer;"></i>
            </el-input>
          </el-form-item>

        </div>

        <!-- 流水码段 -->
        <div v-show="form.sectype==='codeserialsec' ? true:false">
          <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth" required prop="codeSecLength">
            <el-input v-model="form.codeSecLength"></el-input>
          </el-form-item>
          <el-form-item label="流水号的起始值:" :label-width="rightFormLabelWidth" prop="serialStart">
            <el-input v-model="form.serialStart"></el-input>
          </el-form-item>
          <el-form-item label="流水的步长:" :label-width="rightFormLabelWidth" prop="serialStep">
            <el-input v-model="form.serialStep"></el-input>
          </el-form-item>
          <el-form-item label="编码补位方式:" :label-width="rightFormLabelWidth" required prop="codeFillType">
            <el-select v-model="form.codeFillType" placeholder="请选择">
              <el-option label="左补位" value="codeattrsec"
                  v-for="item in codeFillType"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="补位时的字符:" :label-width="rightFormLabelWidth" prop="codeFillSeparatorSelect">
            <el-select v-model="form.codeFillSeparatorSelect" filterable placeholder="请选择">
              <el-option
                  v-for="item in codeFillSeparator"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="填充长度:" :label-width="rightFormLabelWidth" required prop="codeFillLength">
            <el-input v-model="form.codeFillLength"></el-input>
          </el-form-item>
          <el-form-item label="流水上限:" :label-width="rightFormLabelWidth" required prop="codeFillLimit">
            <el-input v-model="form.codeFillLimit"></el-input>
          </el-form-item>
          <el-form-item label="流水是否补码:" :label-width="rightFormLabelWidth" required>
            <el-switch v-model="form.codeFillFlag"></el-switch>
          </el-form-item>
          <el-form-item label="自定义的流水算法:" :label-width="rightFormLabelWidth">
            <el-input v-model="form.customCodeSerialClass"></el-input>
          </el-form-item>
        </div>

        <!-- 层级码段 -->
        <div v-show="form.sectype==='codelevelsec' ? true:false">
          <el-form-item label="层级类型:" :label-width="rightFormLabelWidth" required prop="codeLevelType">
            <el-select v-model="form.codeLevelType" placeholder="请选择">
              <el-option
                  v-for="item in codeLevelType"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictKey">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="层级的值:" :label-width="rightFormLabelWidth" prop="codeLevelValue">
            <el-input v-model="form.codeLevelValue"></el-input>
          </el-form-item>
          <el-form-item label="字符截取类型:" :label-width="rightFormLabelWidth" required prop="valueCutType">
            <el-select v-model="form.valueCutType" placeholder="请选择">
              <el-option
                v-for="item in codeCutType"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补位时的字符:" :label-width="rightFormLabelWidth">
          <el-select v-model="form.codeFillSeparatorSelect" placeholder="请选择">
            <el-option
                v-for="item in codeFillSeparator"
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="取值类型:" :label-width="rightFormLabelWidth">
            <el-select v-model="form.codeGetValueType" placeholder="请选择">
              <el-option
                v-for="item in codeGetValueType"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
              </el-option>
            </el-select>
          </el-form-item>
        </div>

    </span>
        <!-- 引用码段 -->
        <div v-show="form.sectype==='coderefersec' ? true:false">
          <el-form-item label="参照引用的业务类型:" label-width="152px" required prop="referBtmId">
            <el-input
              placeholder="请选择"
              prefix-icon="el-icon-search"
              readonly="true"
              v-model="form.referBtmId"
              @focus="openAttrSelectOrGetValue('referBtmId')">
              <i slot="suffix" class="el-icon-circle-close" @click="clearAttrDataByIcon('referBtmId')" style="margin-right: 5px;cursor: pointer;"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="参照配置:" label-width="152px" required prop="referConfig">
            <el-input
              placeholder="请选择"
              prefix-icon="el-icon-search"
              readonly="true"
              v-model="form.referConfig"
              @focus="openAttrSelectOrGetValue('referConfig')">
              <i slot="suffix" class="el-icon-circle-close" @click="clearAttrDataByIcon('referConfig')" style="margin-right: 5px;cursor: pointer;"></i>
            </el-input>
          </el-form-item>
        </div>

        <!-- 日期码段 -->
        <div v-show="form.sectype==='codedatesec' ? true:false">
          <el-form-item label="日期格式:" :label-width="rightFormLabelWidth" required prop="codeDateFormatStr">
            <el-input v-model="form.codeDateFormatStr"></el-input>
          </el-form-item>
        </div>

        <!-- 分类码段 -->
        <div v-show="form.sectype==='codeclassifysec' ? true:false">
          <el-form-item label="码段长度类型:" :label-width="rightFormLabelWidth" required prop="codeSecLengthType">
            <el-select v-model="form.codeSecLengthType" placeholder="请选择">
              <el-option
                  v-for="item in codeSecLengthType"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth" required prop="codeSecLength">
            <el-input v-model="form.codeSecLength "></el-input>
          </el-form-item>
          <el-form-item label="是否自动分配分类值:" :label-width="rightFormLabelWidth">
            <el-switch v-model="form.matchClassifyValueFlag"></el-switch>
          </el-form-item>
          <el-form-item label="父分类码段:" :label-width="rightFormLabelWidth">
            <el-input
              placeholder="请选择"
              prefix-icon="el-icon-search"
              readonly="true"
              v-model="form.parentClassifySecOid"
              @focus="openAttrSelectOrGetValue('parentClassifySecOid')">
              <i slot="suffix" class="el-icon-circle-close" @click="clearAttrDataByIcon('parentClassifySecOid')" style="margin-right: 5px;cursor: pointer;"></i>
            </el-input>
          </el-form-item>
        </div>

        <!-- 可变码段 -->
        <div v-show="form.sectype==='codevariablesec' ? true:false">
          <el-form-item label="码段的长度:" :label-width="rightFormLabelWidth" required prop="codeSecLength">
            <el-input v-model="form.codeSecLength"></el-input>
          </el-form-item>
          <el-form-item label="编码补位方式:" :label-width="rightFormLabelWidth" required prop="codeFillType">
            <el-select v-model="form.codeFillType" placeholder="请选择">
              <el-option
                  v-for="item in codeFillType"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="补位时的字符:" :label-width="rightFormLabelWidth">
            <el-select v-model="form.codeFillSeparatorSelect" placeholder="请选择">
              <el-option
                  v-for="item in codeFillSeparator"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

      </span>
    </el-form>
  </div>

</template>

<script>
@@ -241,8 +285,70 @@
        displayFlag: false, //
        componentCodeFlag: false, //是否参与编码
        pkCodeRule: '', //所属编码规则
        //valueCutType: "code_cut_none", //字符截取类型
      },
      formRules: {
        id: [
          { required: true, message: '请输入码段编号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入码段名称', trigger: 'blur' },
        ],
        sectype: [
          { required: true, message: '请输入码段名称', trigger: 'blur' },
        ],
        codeSecLengthType: [
          { required: true, message: '请选择码段长度类型', trigger: 'change' },
        ],
        codeSecLength: [
          { required: true, message: '请输入码段的长度', trigger: 'blur' },
          { type: 'number', message: '码段的长度必须为数字值'}
        ],
        referAttributeName: [
          { required: true, message: '请选择属性', trigger: 'blur' },
        ],
        serialStart: [
          { type: 'number', message: '码段的长度必须为数字值'}
        ],
        serialStep: [
          { type: 'number', message: '码段的长度必须为数字值'}
        ],
        codeFillType: [
          { required: true, message: '请选择编码补位方式', trigger: 'blur' },
        ],
        // 设置补位时的字符，需要自定义方法来做判断
        codeFillSeparatorSelect: [
          { required: true, message: '请输入补位时的字符', trigger: 'blur' },
        ],
        codeFillLength: [
          { required: true, message: '请输入填充长度', trigger: 'blur' },
          { type: 'number', message: '填充长度必须为数字值'}
        ],
        codeFillLimit: [
          { required: true, message: '请输入流水上限', trigger: 'blur' },
          { type: 'number', message: '流水上限必须为数字值'}
        ],
        codeLevelType: [
          { required: true, message: '请选择层级类型', trigger: 'change' },
        ],
        codeLevelValue: [
          { type: 'number', message: '层级的值必须为数字值'}
        ],
        valueCutType: [
          { required: true, message: '请选择字符截取类型', trigger: 'change' },
        ],
        referBtmId: [
          { required: true, message: '请选参照应用的业务类型', trigger: 'change' },
        ],
        referConfig: [
          { required: true, message: '请选择参照配置', trigger: 'change' },
        ],
        codeDateFormatStr: [
          { required: true, message: '请输入日期格式', trigger: 'blur' },
        ],

      },

      //枚举和可输可选查询
      sectypeList:[],    //码段类型
      codeSecLengthType:[],  //码段长度类型
      codeFillType:[],   //编码补位方式
@@ -262,6 +368,75 @@

  },
  methods: {

    //编辑和查看数据回显
    showFormData(row){
      //this.form.sectype = row.sectype;
      console.log(row);
      //this.changeSectypeFormItems();
      //this.form = Object.assign({},this.form,row);
      this.$emit("showFormData")
    },

    // 为父分类码段取值，内容回显
    selectedParentClassify(data){
      //console.log(data);
      this.form.parentClassifySecOid = data.parentClassifySecOid;
      this.form.parentClassifySecText = data.parentClassifySecText;
    },

    //公式内容回调到子组件进行回显
    saveFormulaContent(data){
      //console.log(data);
      this.form.getValueClass = data;
    },

    // 为属性选取值之后的回显
    selectedListClassifyLinkAttr(data){
      //console.log(data);
      this.form = Object.assign({}, this.form, {
        referAttributeId:data.referAttributeId,
        referAttributeName:data.referAttributeName,
        referCodeClassifyOid: data.referCodeClassifyOid,
        referCodeClassifyOidName: data.referCodeClassifyOidName,
      })
    },

    // 打开为属性选取值或者取值规则等窗口
    openAttrSelectOrGetValue(condition){
      if(condition === 'attr'){
        //调用父组件的方法
        this.$emit('openAttrSelectOrGetValue')
      }else if(condition === 'value'){
        //console.log('value');
        this.$emit('openformulaEdit')
      }else if(condition === 'parentClassifySecOid'){
        this.$emit('openSelectParentClassify')
      }else if(condition === 'referBtmId'){
        this.$emit('openSelectReferBtm')
      }else if(condition === 'referConfig'){
        this.$emit('openSelectreferConfig')
      }
    },

    // 点击输入框的×号，清空输入框中的内容
    clearAttrDataByIcon(condition){
      if(condition === 'attr'){
        this.form.referAttributeName = '';
        this.form.referAttributeId = '';
        this.form.referCodeClassifyOid = '';
        this.form.referCodeClassifyOidName = '';
      }else if(condition === 'value'){
        this.form.getValueClass = '';
      }else if(condition === 'parentClassifySecOid'){
        this.form.parentClassifySecOid = '';
      }else if(condition === 'referBtmId'){
        this.form.referBtmId = '';
      }else if(condition === 'referConfig'){
        this.form.referBtmId = '';
      }
    },

    addSave(pkCodeRule) {
      this.form.pkCodeRule = pkCodeRule;
      console.log(this.form);
@@ -316,7 +491,7 @@
    loadCodeGetValueType(){
      getDictionary({code: "codeGetValueType"}).then(res=>{
        this.codeGetValueType = res.data.data;
        console.log(this.codeGetValueType);
        //console.log(this.codeGetValueType);
      })
    },

@@ -402,46 +577,39 @@
      //console.log(this.form);
    }





  }
};
</script>

<style>
  .total{
    height: 420px;
    height: 500px;
    width: 100%;

  }

  .total .el-input__inner,.el-textarea__inner {
  .total .el-input__inner,.total .el-textarea__inner {
    width: 220px;
  }

  .el-divider--vertical {
      width: 2px;
      height: 31.5em;
      margin: 0 5px;
    width: 2px;
    height: 72vh;
    margin: 0 5px;
    position: fixed;
  }

 .left {
    float: left;
    width: 49%;
    /* border-right: 2px rgb(0, 0, 0); */
 }
 .right {
    float: right;
    width: 49%;
    /* border-left: 2px rgb(0, 0, 0); */
    margin-right: 2.5vw;
    /* width: 40%; */
 }
 .right > .el-form > .el-form-item{
    margin-bottom: 8px;
 }

 .el-input-number > .el-input > .el-input__inner{
    width: 180px;
 }
</style>

</style>