Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue

@@ -3,87 +3,105 @@
    <div v-if="this.crudArrayFlag" class="app" style="display: flex;flex-wrap: wrap; display: inline-block">
      <el-button-group>
        <!--新增-->
        <el-button
          v-if="attrEditVisible == false && attrFlagChiledren==false && editOpenFlag &&  (!checkStatus || crudLCStatus=='Editing' )"
          icon="el-icon-plus" plain size="small" type="primary" @click="busineHandle">添加 {{ msg }}
        <span v-if="permissionList.busineStatus">
           <el-button
             v-if="attrEditVisible == false && attrFlagChiledren==false && editOpenFlag &&  (!checkStatus || crudLCStatus=='Editing' )"
             icon="el-icon-plus" plain size="small" type="primary" @click="busineHandle" >添加 {{ msg }}
        </el-button>
        </span>
        <!--        全屏编辑-->
        <el-button
          v-if=" attrEditVisible == false && attrFlagChiledren==false && editOpenFlag&&(!checkStatus || crudLCStatus=='Editing')"
          icon="el-icon-full-screen" size="small" @click="fullscreenHandle">全屏编辑
        <span  v-if="permissionList.fullscreenStatus">
            <el-button
              v-if=" attrEditVisible == false && attrFlagChiledren==false && editOpenFlag&&(!checkStatus || crudLCStatus=='Editing')"
              icon="el-icon-full-screen" size="small" @click="fullscreenHandle">全屏编辑
        </el-button>
        <!--        验证规则-->
        </span>
        <span v-if="permissionList.ruleStatus">
           <!--        验证规则-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing' )&& editOpenFlag" icon="el-icon-info" size="small"
                   @click="ruleAddHandler">验证规则
                   @click="ruleAddHandler" >验证规则
        </el-button>
        <!--        属性分组-->
        </span>
       <span  v-if="permissionList.attrStatus">
          <!--        属性分组-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-menu" size="small"
                   @click="attrVisibleHandle">属性分组
        </el-button>
       </span>
      </el-button-group>
      <el-button-group>
        <!--    保存-->
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-check" plain size="small"
                   type="success" @click.prevent="addsHandler">保存
        <span v-if="permissionList.saveStatus">
           <!--    保存-->
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-check" plain
                   size="small"
                   type="success" @click.prevent="addsHandler" >保存
        </el-button>
        <!--    预览排序-->
        <el-button icon="el-icon-arrow-down" size="small" @click="orderHandle">预览排序</el-button>
        <!--    删除-->
        </span>
                <!--    预览排序-->
        <el-button icon="el-icon-arrow-down" size="small" @click="orderHandle" v-if="permissionList.orderStatus">预览排序</el-button>
        <span v-if="permissionList.removeStatus">
           <!--    删除-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-delete" size="small"
                   @click="CrudRemove">删除
                   @click="CrudRemove" >删除
        </el-button>
        </span>
        <!--    重置-->
        <el-button icon="el-icon-refresh-right" size="small" @click="reset">重置</el-button>
        <el-button icon="el-icon-refresh-right" size="small" @click="resetHandler" v-if="permissionList.resetStatus">重置</el-button>
      </el-button-group>
      <el-button-group>
        <!--新增-->
        <!--        分类注入-->
       <span v-if="permissionList.injectStatus"><!--        分类注入-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-magic-stick"
                   size="small" @click="injectBtn">分类注入
        </el-button>
        <!--    组合规则-->
                   size="small" @click="injectBtn" >分类注入
        </el-button></span>
        <span  v-if="permissionList.isShowStatus"> <!--    组合规则-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-film" size="small"
                   @click="isShowHandler">组合规则
        </el-button>
        <!--        枚举注入-->
        </el-button></span>
        <span v-if="permissionList.enumStatus"> <!--        枚举注入-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-c-scale-to-original"
                   size="small" @click="enmuVisHandle">枚举注入
        </el-button>
        <!--    级联属性-->
                   size="small" @click="enumVisHandle" >枚举注入
        </el-button></span>

        <span  v-if="permissionList.cascadStatus">
               <!--    级联属性-->
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-coin" size="small"
                   @click="CascadeHandle">级联属性
        </el-button>
        </span>
      </el-button-group>

      <el-button-group>
        <!--    同步到其他模板-->
        <el-button icon="el-icon-share" size="small" @click="syncHandle">同步到其他模板</el-button>
        <el-button icon="el-icon-share" size="small" @click="syncHandle" v-if="permissionList.syncStatus">同步到其他模板</el-button>
      </el-button-group>

      <el-button-group>
        <!--    编码申请预览-->
        <el-button icon="el-icon-view" size="small" style="" @click="applicationHandle">编码申请预览</el-button>
        <el-button icon="el-icon-view" size="small" style="" @click="applicationHandle" v-if="permissionList.applicationStatus">编码申请预览</el-button>

      </el-button-group>
      <!-- 是否开启编辑     -->
      <el-button-group>
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && !editOpenFlag && attrEditVisible == false && attrFlagChiledren==false" icon="el-icon-view" plain
                   size="small"
                   @click="editOpen">开启编辑
        <el-button
          v-if="(!checkStatus|| crudLCStatus=='Editing') && !editOpenFlag && attrEditVisible == false && attrFlagChiledren==false"
          icon="el-icon-view" plain
          size="small"
          @click="editOpen">开启编辑
        </el-button>
        <el-select v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" v-model="selectvalue"
                   placeholder="请选择"
                   size="small">
          <el-option
            v-for="item in selectoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-switch v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" v-model="switchvalue"
                   active-value="true" style="margin:6px 0 0 10px" @change="batchSetFlag">
        </el-switch>
      </el-button-group>
      <el-select v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" v-model="selectvalue" placeholder="请选择"
                 size="small">
        <el-option
          v-for="item in selectoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-switch v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" v-model="switchvalue"
                 active-value="true" style="margin:6px 0 0 10px" @change="batchSetFlag">
      </el-switch>
    </div>
    <!--    弹窗-->
    <div>
@@ -288,7 +306,6 @@
          <el-button size="small" type="primary" @click="addVisible=false">取消</el-button>
        </div>
      </el-dialog>

      <!--      参照配置-->
      <refer-config-dialog
        :display="referConfigVisble"
@@ -300,8 +317,9 @@
    <el-table v-if="this.crudArrayFlag"
              ref="referAttrCrud"
              v-loading="loading"
              border
              :data="ProData"
              :height="this.editStyleFlag? 800 : 343"
              :height="this.tableHeight"
              style="width: 100%"
              @select="selectHandle"
              @cell-click="handleCellClicks"
@@ -309,13 +327,13 @@
              @row-click="rowClick"
    >
      <el-table-column
        fixed
        :fixed="!editStyleFlag ? 'left' : undefined"
        type="selection" width="55">
      </el-table-column>
      <!--<el-table-column fixed label="序号" type="index" width="55"></el-table-column>-->
      <el-table-column v-for="(item,index) in this.option.column" v-if="item.edit !='referName'"
                       :key="item.id"
                       :fixed="item.fixed"
                       :fixed="!editStyleFlag ? item.fixed : undefined"
                       :formatter="formAttr"
                       :label="item.label"
                       :prop="item.prop"
@@ -325,18 +343,20 @@
                       align="center"
      >
        <template slot-scope="{ row }">
          <el-input v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )"
                    ref="inputRef"
                    :id="'inputRef' + row.oid"
                    v-show="!AddCellFlag"
                    v-model="row[item.prop]"
                    @blur="saveRows"
                    autofocus></el-input>
          <el-input-number v-if="editingRows === row && editShows== item.prop && item.edit == 'number'" v-model="row[item.prop]"
          <el-input
            v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )"
            v-show="!AddCellFlag"
            :ref="'input' + row.oid"
            v-model="row[item.prop]"
            @blur="saveRows(row)"
          ></el-input>
          <el-input-number v-if="editingRows === row && editShows== item.prop && item.edit == 'number'"
                           v-model="row[item.prop]"
                           :style="{width:(item.width-10)+'px'}"
                           controls-position="right"
                           size="small" @blur="saveRows"></el-input-number>
          <el-select v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " slot="prepend" v-model="row[item.prop]" allow-create default-first-option
          <el-select v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " slot="prepend"
                     v-model="row[item.prop]" allow-create default-first-option
                     filterable
                     @blur="selectChangeHandler(item.editConfig,index)">
            <el-option
@@ -375,7 +395,7 @@
import {getList} from "@/api/refer/table";
import func from "@/util/func";
import {getCurrentInstance} from "vue";

import {mapGetters} from "vuex";
export default {
  name: "attrCrud .vue",
  props: {
@@ -432,7 +452,7 @@
    },
    crudArrayFlag: {
      handler(newval, oldval) {
        console.log('crudArrayFlag', newval)
        // console.log('crudArrayFlag', newval)
      }
    },
    crudArray: {
@@ -456,16 +476,6 @@
        }
      }
    },
    // editingRows:{
    //   handler(newval,oldval){
    //     if(newval){
    //       const inputElement = document.querySelector(`#inputRef${newval.oid}`);
    //       if (inputElement) {
    //         inputElement.focus();
    //       };
    //     }
    //   }
    // },
    ProData: {
      handler(newval, oldval) {
        if (newval) {
@@ -486,7 +496,7 @@
    },
    editOpenFlag: {
      handler(newval, oldval) {
        console.log('editOpenFlag', newval)
        // console.log('editOpenFlag', newval)
      },
      deep: true,
      immediate: true
@@ -495,8 +505,10 @@
  },
  data() {
    return {
      //表格高度
      dynamicHeight: '',
      // 保存单元格状态
      AddCellFlag:false,
      AddCellFlag: false,
      //全屏编辑高度状态
      editStyleFlag: false,
      loading: false,
@@ -643,6 +655,7 @@
        addBtn: false,
        header: false,
        align: 'center',
        columnBtn:false,
        menuAlign: 'center',
        column: [{
          label: '',
@@ -857,6 +870,7 @@
          {
            label: "参照配置",
            prop: "referConfig",
            width: 105
          },
          {
            label: "级联查询属性",
@@ -901,7 +915,7 @@
          {
            label: "取值范围",
            prop: "valueArea",
          },
          }
        ]
      },
      // 存储表格数据
@@ -1092,12 +1106,12 @@
          {
            label: "属性英文名称",
            prop: "id",
            width:100,
            width: 100,
          },
          {
            label: "属性中文名称",
            prop: "name",
            width:100,
            width: 100,
          },
          {
            label: "长度",
@@ -1178,6 +1192,7 @@
      List: [],
      option: {
        index: false,
        columnBtn:false,
        border: true,
        editBtn: false,
        selection: true,
@@ -1528,6 +1543,25 @@
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList(){
      return{
        busineStatus:this.vaildData(this.permission.classifyTree.attr_add,false),
        fullscreenStatus:this.vaildData(this.permission.classifyTree.attr_view_edit,false),
        ruleStatus:this.vaildData(this.permission.classifyTree.attr_rule,false),
        attrStatus:this.vaildData(this.permission.classifyTree.attr_group,false),
        saveStatus:this.vaildData(this.permission.classifyTree.attr_save,false),
        resetStatus:this.vaildData(this.permission.classifyTree.attr_reset,false),
        injectStatus:this.vaildData(this.permission.classifyTree.attr_inject,false),
        isShowStatus:this.vaildData(this.permission.classifyTree.attr_formrule,false),
        enumStatus:this.vaildData(this.permission.classifyTree.attr_enum,false),
        cascadStatus:this.vaildData(this.permission.classifyTree.attr_parentcode,false),
        syncStatus:this.vaildData(this.permission.classifyTree.attr_sync,false),
        applicationStatus:this.vaildData(this.permission.classifyTree.attr_application,false),
        orderStatus:this.vaildData(this.permission.classifyTree.attr_sort,false),
        removeStatus:this.vaildData(this.permission.classifyTree.attr_delete,false),
      }
    },
    attrOids() {
      let oids = [];
      this.attrSelectList.forEach(ele => {
@@ -1542,6 +1576,13 @@
      });
      return oids.join(",");
    },
    tableHeight() {
      if (this.editStyleFlag) {
        return '800px'
      } else {
        return 'calc(100vh - 595px)'
      }
    }
  },
  mounted() {
  },
@@ -1755,11 +1796,9 @@
    addsHandler(event) {
      this.$refs.referAttrCrud.sort("orderNum");
      var ischeck = true;
      console.log('ProData',this.ProData)
      this.ProData.forEach((item, index) => {
        if ((item.requireFlag && item.requireFlag.toString() == 'true') && (item.readOnlyFlag && item.readOnlyFlag.toString() == 'true')) {
          this.$message.warning(item.name + "(" + item.id + ")必输的属性不能是只读");
          console.log(item)
          ischeck = false;
          return;
        }
@@ -1767,29 +1806,23 @@
        if (item.componentRule) {
          //组合规则
          num++
          console.log('componentRule', num)
        }
        if (item.enumString || item.enumId) {
          //枚举
          num++
          console.log('enumString', num)
        }
        if (item.referConfig || item.referBtmId) {
          //参照
          num++
          console.log('referConfig', num)
        }
        if (item.codeDateFormat) {
          //时间格式
          num++
          console.log('codeDateFormat', num)
        }
        //如果空后台返回none
        if (item.classifyInvokeLevel && item.classifyInvokeLevel != 'none') {
          //分类注入
          num++
          console.log('classifyInvokeLevel', num)
          console.log(item.classifyInvokeLevel)
        }
        if (num > 1 && ischeck) {
          this.$message({
@@ -1811,7 +1844,7 @@
          this.editOpenFlag = false;
          // 调用父组件修改按钮状态
          this.$emit('editCloseChildren')
          this.AddCellFlag=true;
          this.AddCellFlag = true;
        }).catch(() => {
          this.$message.warning('保存失败，请查看控制台输出！')
        });
@@ -1826,62 +1859,72 @@
        this.editShows = column.property;
        this.rowOid = row.oid;
        this.CurrentCell = row;
          // const inputElement = document.querySelector(`#inputRef${row.oid}`);
          // if (inputElement) {
          //   inputElement.focus();
          // };
        if (column.property == 'referConfig') {
          this.referConfigVisble = true;
          this.referConfigOption = {
            referConfig: this.CurrentCell.referConfig || '',
        this.$nextTick(() => {
          const inputs = this.$refs['input' + row.oid];
          const input = inputs && inputs.length > 0 ? inputs[0].$el : null;
          if (input) {
            input.focus();
          }
          if (this.CurrentCell.referConfig == '') {
        });
        const columnActions = {
          referConfig: () => {
            this.referConfigVisble = true;
            this.referConfigOption = {
              referConfig: '',
              referConfig: this.CurrentCell.referConfig || '',
            }
            if (this.CurrentCell.referConfig == '') {
              this.referConfigOption = {
                referConfig: '',
              }
            }
          },
          classifyInvokeText: () => {
            this.injectVisible = true;
            if (this.CurrentCell.classifyInvokeAttr != '') {
              this.injectOption = {
                classifyInvokeAttr: this.CurrentCell.classifyInvokeAttr,
                classifyInvokeAttrName: this.CurrentCell.classifyInvokeAttrName,
                classifyInvokeEditFlag: this.CurrentCell.classifyInvokeEditFlag,
                classifyInvokeLevel: this.CurrentCell.classifyInvokeLevel == 'min' ? 'min' : 'max',
                classifyNumber: this.CurrentCell.classifyInvokeLevel == 'min' ? '' : this.CurrentCell.classifyInvokeLevel
              };
            }
          },
          componentRule: () => {
            this.isShowformulaEdit = true;
          },
          enumString: () => {
            this.enumVisible = true;
            this.tableData = [];
            if (this.CurrentCell.enumString != "") {
              this.tableData = JSON.parse(this.CurrentCell.enumString)
              return;
            }
          },
          parentCode: () => {
            gridCodeClassifyTemplateAttr({
              'conditionMap[classifyTemplateOid]': this.Formlist[0].oid,
              'conditionMap[oid_notequal]': this.CurrentCell.oid,
              limit: -1
            }).then(res => {
              this.CascadeData = res.data.data;
            })
            this.CascadeVisible = true;
          },
          verifyRule: () => {
            this.RulesForm.expressionTextt = this.CurrentCell.verifyRule;
            this.rulesVisible = true;
          },
          attributeGroup: () => {
            this.attrVisible = true;
            if (this.CurrentCell.attributeGroup !== '') {
              this.attrModel = this.CurrentCell.attributeGroup
            }
          }
          // this.$refs.referConfigFormDialog.onloadAttrData();
        } else if (column.property == 'classifyInvokeText') {
          this.injectVisible = true;
          if (this.CurrentCell.classifyInvokeAttr != '') {
            this.injectOption = {
              classifyInvokeAttr: this.CurrentCell.classifyInvokeAttr,
              classifyInvokeAttrName: this.CurrentCell.classifyInvokeAttrName,
              classifyInvokeEditFlag: this.CurrentCell.classifyInvokeEditFlag,
              classifyInvokeLevel: this.CurrentCell.classifyInvokeLevel == 'min' ? 'min' : 'max',
              classifyNumber: this.CurrentCell.classifyInvokeLevel == 'min' ? '' : this.CurrentCell.classifyInvokeLevel
            };
          } else {
            // this.injectHandleReset();
          }
        } else if (column.property == 'componentRule') {
          if (this.CurrentCell) {
            // this.CurrentCell.componentRule = this.componentRuleText;
          }
          this.isShowformulaEdit = true;
        } else if (column.property == 'enumString') {
          this.enumVisible = true;
          if (this.attrSelectList[0].enumString != "") {
            this.tableData = JSON.parse(this.attrSelectList[0].enumString)
            return
          }
        } else if (column.property == 'parentCode') {
          gridCodeClassifyTemplateAttr({
            'conditionMap[classifyTemplateOid]': this.Formlist[0].oid,
            'conditionMap[oid_notequal]': this.CurrentCell.oid,
            limit: -1
          }).then(res => {
            this.CascadeData = res.data.data;
          })
          this.CascadeVisible = true;
        } else if (column.property == 'verifyRule') {
          this.RulesForm.expressionTextt = this.CurrentCell.verifyRule;
          this.rulesVisible = true;
        } else if (column.property == 'attributeGroup') {
          this.attrVisible = true;
          if (this.CurrentCell.attributeGroup !== '') {
            this.attrModel = this.CurrentCell.attributeGroup
          }
        };

        if (column.property in columnActions) {
          columnActions[column.property]();
        }
      }
    },
@@ -1910,7 +1953,7 @@
      this.tableData.splice(row.$index, 1)
    },
    //枚举注入按钮
    enmuVisHandle() {
    enumVisHandle() {
      if (this.attrSelectList.length > 1) {
        this.$message.warning('只能选择一条模板属性')
      } else if (this.attrSelectList < 1) {
@@ -2023,32 +2066,35 @@
    },
    //分类注入保存
    injectAddHandle() {
      // 定义展示类型
      let data = {
        "注入类型": this.injectOption.classifyInvokeAttr,
        "注入类型名称": this.injectOption.classifyInvokeAttrName,
        "层级设置": this.injectOption.classifyInvokeLevel == 'max' ? this.injectOption.classifyNumber : 'min',
        "是否可修改": this.injectOption.classifyInvokeEditFlag
      }
      //勾选操作
      const {
        classifyInvokeAttr,
        classifyInvokeAttrName,
        classifyInvokeLevel,
        classifyInvokeEditFlag,
        classifyNumber
      } = this.injectOption;

      const data = {
        "注入类型": classifyInvokeAttr,
        "注入类型名称": classifyInvokeAttrName,
        "层级设置": classifyInvokeLevel === 'max' ? classifyNumber : 'min',
        "是否可修改": classifyInvokeEditFlag
      };
      for (const key in this.injectOption) {
        this.attrSelectList[0][key] = this.injectOption[key];
        //如果是指定层赋值为数字
        if (this.injectOption.classifyInvokeLevel !== 'min') {
          this.attrSelectList[0].classifyInvokeLevel = this.injectOption.classifyNumber
        if (classifyInvokeLevel !== 'min') {
          this.attrSelectList[0].classifyInvokeLevel = classifyNumber;
        } else {
          this.attrSelectList[0].classifyInvokeLevel = 'min'
          this.attrSelectList[0].classifyInvokeLevel = 'min';
        }
        this.$set(this.attrSelectList[0], 'classifyInvokeText', data)
        this.$set(this.attrSelectList[0], 'classifyInvokeText', data);
      }
      // this.injectHandleReset()
      if (this.injectOption.classifyInvokeLevel !== 'min') {
        this.injectOption.classifyInvokeLevel = this.injectOption.classifyNumber;
      if (classifyInvokeLevel !== 'min') {
        this.injectOption.classifyInvokeLevel = classifyNumber;
      } else {
        this.injectOption.classifyNumber = 0;
      }
      this.injectVisible = false;

    },
    //分类注入清空
    injectHandleReset() {
@@ -2077,7 +2123,7 @@
      })
    },
    //表格重置
    reset() {
    resetHandler() {
      this.CrudRend()
    },
    //同步到其他模板
@@ -2114,7 +2160,7 @@
        this.editStyleFlag = true;
        this.attrEditVisible = true;
        this.attrFlag = true;
        this.AddCellFlag=true;
        this.AddCellFlag = true;
      }

    },
@@ -2128,7 +2174,7 @@
    updataFormlaContent(val) {
      if (this.CurrentCell) {
        this.$set(this.CurrentCell, 'componentRule', val.replace(/"/g, ''))
        this.componentRuleText= this.CurrentCell.componentRule
        this.componentRuleText = this.CurrentCell.componentRule
      } else {
        this.$set(this.attrRow, 'componentRule', val.replace(/"/g, ''))
      }
@@ -2145,12 +2191,12 @@
    },
    // 排序 this.AddCellFlag=false;
    sortChange(val) {
      console.log(val)
      // console.log(val)
    },
    //开启编辑
    editOpen() {
      this.editOpenFlag = true;
      this.AddCellFlag=false;
      this.AddCellFlag = false;
    },
    //定义一个关闭编辑的方法供子组件使用
    editClose() {
@@ -2167,6 +2213,29 @@
</script>

<style lang="scss" scoped>
//固定列高度
/deep/ .el-table__fixed {
  height: calc(100vh - 612px)!important;
}
///deep/ .el-table__fixed[v-if='editStyleFlag'] {
//  height: calc(100vh - 152px)!important; // 编辑状态下的高度
//}
// 滚动条样式修改
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 15px; // 纵向滚动条 必写
  background: white;
  border: white;
  width: 10px;

}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 20px;
  border: #ececec;
}

.app {
  /deep/ .el-button {
    //margin: 0 10px 10px 0;