<template>
  <div>
    <div class="title-header">
      <h2 class="name">流程配置</h2>
    </div>
    <!--search-->
    <div id="search-container">
      <div class="fl" v-if="!isEdit&&!isEditThree">
        <el-button type="primary" @click="add">新建流程</el-button>
      </div>
      <div class="fl" v-if="!isEditTwo" style="margin-right: 20px;">
        <el-button type="primary" @click="update">修改</el-button>
      </div>
      <div class="fl" v-if="isEdit&&isEditTwo" style="margin-right: 20px;">
        <el-button type="primary" @click="save">确定</el-button>
      </div>
      <div class="fl" v-if="isEdit">
        <el-button type="primary" @click="cancel">取消</el-button>
      </div>
      <div class="fr" v-if="!isEdit">
        <!-- <el-button type="primary" @click="backInfo">返回</el-button> -->
      </div>

      <div class="fr">
      <el-button type="text" @click="showSearch">
        高级搜索
        <i class="el-icon-arrow-down" v-if="this.isHide"></i>
        <i class="el-icon-arrow-up" v-if="!this.isHide"></i>
      </el-button>
      <!-- <el-button type="primary" @click="backInfo" style="float:right;margin-left:20px;">返回</el-button> -->
    </div>



    </div>




  <div id="advanced-search" :class="{hide: isHide}">
    <el-row>
      <el-col :span="3"><span class="search-label">流程名称:</span></el-col>
      <el-col :span="4">
        <el-input type="text" v-model="searchStr.name" placeholder="流程名称"></el-input>
      </el-col>

      <el-col :span="3"><span class="search-label">启用状态:</span></el-col>
      <el-col :span="4">
       <el-select v-model="searchStr.enabled" placeholder="请选择启用状态">
          <el-option
            v-for="item in enabledList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
      </el-col>
      <div class="fr">
        <el-button @click="search">搜索</el-button>
      </div>
    </el-row>
  </div>






  <div id="staff-detail" style="font-size: 0px;" v-if="!isEdit&&!isEditThree">
    <div id="app-container">
      <el-tree
        style="height: 400px;overflow: auto;"
        accordion
        :props="defaultProps"
        :load="loadNode"
        lazy
        :highlight-current="true"
        @current-change="handleAppChange"
      >
      </el-tree>
    </div>
    <div id="tpl-container" style="height: 400px; position:relative;">
      <el-table
      :max-height="400"
      :data="tableData"
      border
      style="width: 100%">
        <el-table-column
          v-for="column in tableColumn"
          :prop="column.prop"
          :label="column.title"
          v-if="column.display"
          :key="column.title">
          <template scope="scope"><span :title="scope.row[column.prop]">{{scope.row[column.prop]}}</span></template>
        </el-table-column>
        <el-table-column
          label="操作"
          >
          <template scope="scope">
             <el-tooltip class="item" effect="dark" content="设计(新的)" placement="top">
                <i class="el-icon-setting" type="primary" @click="design(scope.row)" v-show="tableData.length>0"></i>
             </el-tooltip>
             <el-tooltip class="item" effect="dark" content="设计(旧的)" placement="top">
                <i class="el-icon-setting" type="primary" @click="designOld(scope.row)" v-show="tableData.length>0"></i>
             </el-tooltip>
            <el-tooltip class="item" effect="dark" placement="top-start" content="启用/停用">
              <i class="el-icon-pt-tuichu" type="primary" @click="enabled(scope.row)" v-show="tableData.length>0"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" placement="top-start" content="发布">
              <i class="" type="primary" @click="issue(scope.row)" v-show="tableData.length>0"><img :src=issueImage alt="" style="width: 18px"></i>
            </el-tooltip>
             <el-tooltip class="item" effect="dark" placement="top-start" content="查看">
              <i  class="el-icon-search" type="primary" @click="editRow(scope.row)" v-show="tableData.length>0"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" placement="top-start" content="删除">
              <i class="el-icon-delete" type="primary" @click="deleteRow(scope.row)" v-show="tableData.length>0"></i>
            </el-tooltip>
           <el-tooltip class="item" effect="dark" placement="top-start" content="发布历史">
              <i class="el-icon-document" type="primary" @click="historyRow(scope.row)" v-show="tableData.length>0"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div id="edit-container" v-else-if="isEdit&&!isEditThree">
    <div id="form-container">
    <el-form
    :model="currentTpl"
    label-width="100px">
      <el-form-item label="业务类型">
        <!-- <el-input v-model="currentTpl.code"></el-input> -->
        <el-input v-model="currentTpl.code" v-if="isEditTwo"></el-input>
        <el-button v-model="currentTpl.code" type="text" v-else>{{currentTpl.code}}</el-button>
      </el-form-item>
      <el-form-item label="流程名称">
        <!-- <el-input v-model="currentTpl.processName"></el-input> -->
        <el-input v-model="currentTpl.processName" v-if="isEditTwo"></el-input>
        <el-button v-model="currentTpl.processName" type="text" v-else>{{currentTpl.processName}}</el-button>
      </el-form-item>
      <el-form-item label="业务模型视图">
        <el-ref :is-muti-select="false"
                :ref-code="'pubscence_ref'"
                :field="'scene'"
                :template-value="currentTpl"
                width="300px"
                @trigger="handleRefChange"
                :query-params="queryParams"
                :is-edit="true" v-if="isEditTwo">
        </el-ref>
        <el-button v-model="currentTpl.refname" type="text" v-else>{{currentTpl.refname}}</el-button>
      </el-form-item>
       <el-form-item label="是否启用" v-if="isEditTwo&&!isEditFour">
        <!--   <el-switch v-model="currentTpl.enabled">
          </el-switch> -->
           <el-switch v-model="currentTpl.enabled">
          </el-switch>
          <!-- <el-button v-model="currentTpl.enabledTwo" type="text" v-else>{{currentTpl.enabledTwo}}</el-button> -->
      </el-form-item>
      <el-form-item label="流程描述">
      <!--   <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="currentTpl.description">
        </el-input> -->
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="currentTpl.description" v-if="isEditTwo">
        </el-input>
        <el-button v-model="currentTpl.description" type="text" v-else>{{currentTpl.description}}</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
  <div v-else style="margin-top: 20px;">
    <el-table
      :data="tableDataHis"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="部署名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="deploymentTime"
        label="部署时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="流程定义ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="version"
        label="版本"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>
import issueImg from "../../../static/img/send.png";
export default {
  data(){
    return {
       queryParams: {
          busitypecode: ''
        },
      enabledList:[
        {
          value: true,
          label: '启用'
        },
        {
          value: false,
          label: '停用'
        }
      ],
      pubsceneFilters:'',
      searchStr: {
        name: '',
        enabled: ''
      },
      isHide:true,
      issueImage:'',
      isEditTwo:true,
      isEditThree:false,
      isEditFour:false,
      sceneName:'',
      sceneCode:'',
      treeData: [],
      tableData: [],
      tableDataHis:[],
      tplTree: [],
      boList: [],
      isEdit: false,
      currentTpl: {
        code: '',
        scene: '',
        processCode: '',
        processName: '',
        enabled: false,
        enabledTwo:'',
        description: '',
        pubscence_ref:'',
        refname:''
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      currentApp: '',
      tableColumn: [{
        title: '流程名称',
        prop: 'procDefName',
        display: true
      },{
        title: '运行版本',
        prop: 'version',
        display: true
      },
        {
        title: '启用状态',
        prop: 'enabled',
        display: true
      },
      {
        title: '模型视图',
        prop: 'refname',
        display: true
      },
      {
        title: '创建时间',
        prop: 'createTime',
        display: true
      },{
        title: '修改时间',
        prop: 'modifyTime',
        display: true
      },
       {
        title: 'code',
        prop: 'procModelId',
        display: false
      },
        {
        title: 'id',
        prop: 'id',
        display: false
      },{
        pk: 'pk',
        prop: 'pk',
        display: false
      }]
    };
  },
  methods:{
    getData() {
      var vm=this;
      var params={"pageNum":1,"pageSize":1000,"scenecode":'',"procDefName":encodeURIComponent(this.searchStr.name),"enabled":this.searchStr.enabled};
    // alert(JSON.stringify(params));
        this.$http({
          url: '/ifbp-bpm-service/bmp_proc/queryProcModels',//get process by bo
          method: 'post',
          data:'data=' + encodeURIComponent(JSON.stringify(params))
        }).then((res) => {
          // debugger;
          console.log("aa");
          console.log(res)
          var arr=[];
          var curContent=res.data.data.content;
          for(var i=0;i<curContent.length;i++){
            var obj={};
            obj.procDefName=curContent[i].procDefName;
            obj.version=curContent[i].version;
            if(curContent[i].enabled === true){
              obj.enabled="启用";
            }else{
              obj.enabled="停用";
            }
            obj.procKey=curContent[i].procKey;
            obj.description=curContent[i].description;
            obj.buzicode=curContent[i].buzicode;
            obj.procModelId=curContent[i].procModelId;
            obj.sceneCode=curContent[i].sceneCode;
            vm.pubsceneFilters.forEach(function(item,index){
              // console.log(item);
              if(item.refcode === curContent[i].sceneCode){
                obj.refname=item.refname;
                obj.pk=item.id;
              }
              // console.log(item);
            })
            obj.id=curContent[i].id;
            obj.createTime=new Date(curContent[i].createTime).toLocaleString();
            obj.modifyTime=new Date(curContent[i].lastUpdateTime).toLocaleString();
            arr.push(obj);
          }
          // alert(JSON.stringify(arr));
          this.tableData = arr;
        }).catch(() => {
          // this.$message.error('请求失败');
        });
    },
    search() {
      this.getData();
    },
    showSearch() {
      this.isHide = !this.isHide;
    },
    update(){
      this.isEditTwo=true;
    },
    // 左侧树
    loadNode(node, resolve){
      console.log('node',node);
      if(node.level === 0) {
        this.$http({
          url: '/ifbp-app-sm/buz/products'
        }).then((res) => {
          if(res.data.success === true) {
            resolve(res.data.data);
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      } else if(node.level === 1) {
        this.$http({
          url: '/ifbp-app-sm/buz/product/' + node.data.pid + '/models'
        }).then((res) => {
          if(res.data.success === true) {
            resolve(res.data.data);
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      } else if(node.level === 2) {
        this.$http({
          url: '/ifbp-app-sm/buz/product/' + node.data.pid + '/model/' + node.data.mid + '/buzitypes'
        }).then((res) => {
          if(res.data.success === true) {
            // res.data.data.forEach((type) => {
            //   type.leaf = true;
            // });
            for(var i=0;i<res.data.data.length;i++) {
              res.data.data[i].leaf = true;
            }
            resolve(res.data.data);
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      }
    },
    // 点击左侧树请求table
    handleAppChange(value) {
      // console.log(value);
      var params={"pageNum":1,"pageSize":100,"buzicode":value.code,"scenecode":''};
      if(value.leaf) {
        this.currentApp = value;
        this.currentTpl.code = value.code;
        this.$http({
          url: '/ifbp-bpm-service/bmp_proc/queryProcModels',//get process by bo
          method: 'post',
          data:'data=' + encodeURIComponent(JSON.stringify(params))
        }).then((res) => {
          console.log("aa");
          console.log(res)
          var arr=[];
          // debugger;
          var curContent=res.data.data.content;
          for(var i=0;i<curContent.length;i++){
            var obj={};
            obj.procDefName=curContent[i].procDefName;
            obj.version=curContent[i].version;
            if(curContent[i].enabled === true){
              obj.enabled="启用";
            }else{
              obj.enabled="停用";
            }
            obj.procKey=curContent[i].procKey;
            obj.description=curContent[i].description;
            obj.buzicode=curContent[i].buzicode;
            obj.procModelId=curContent[i].procModelId;
            obj.sceneCode=curContent[i].sceneCode;
            this.pubsceneFilters.forEach(function(item,index){
              // console.log(item);
              if(item.refcode === curContent[i].sceneCode){
                obj.refname=item.refname;
                obj.pk=item.id;
              }
              // console.log(item);
            })
            obj.id=curContent[i].id;
            obj.createTime=new Date(curContent[i].createTime).toLocaleString();
            obj.modifyTime=new Date(curContent[i].lastUpdateTime).toLocaleString();
            arr.push(obj);
          }
          // alert(JSON.stringify(arr));
          this.tableData = arr;
        }).catch(() => {
          this.$message.error('请求失败');
        });
      } else {
        this.currentApp = '';
      }
    },
    backInfo() {
      if(this.isEditThree){
        this.isEditThree=false;
      }else{
        window.history.go(-1);
      }
      // this.isEditFour=false;
    },
    // 新建流程保存
    save() {
      var storage = window.localStorage;
      storage.setItem('PRINTTPLPARAM', JSON.stringify({
        code: this.currentTpl.code, //业务类型
        templatecode: this.currentTpl.templatecode, // 模板编码
        templatename: this.currentTpl.templatename, //模板名称
        note: this.currentTpl.description, //备注
        bo_code: this.currentTpl.pk_bo, //业务对象的主键
        pk_printtemplatetype: '48a8206f-6759-431e-bf84-e973935e2fcc' //48a8206f-6759-431e-bf84-e973935e2fcc
      }));
      var params = {
        "buzicode":this.currentTpl.code,
        "sceneCode":this.currentTpl.sceneCode,
        "procDefName":this.currentTpl.processName,
        "enabled":this.currentTpl.enabled,
        "description":this.currentTpl.description
      }
      //判断是修改该是新增
      if(this.currentTpl.id){
        params.id=this.currentTpl.id;
      }
      // alert(JSON.stringify(params))
      this.$http({
        url: '/ifbp-bpm-service/bmp_proc/saveProcModel',
        method: 'post',
        data: params
      }).then((res) => {
        // alert(JSON.stringify(res));
        if(res.data.status===0){
          this.$message.error(res.data.msg);
        }else{
            var msg="";
            if(this.currentTpl.id){
                msg="修改成功";
            }else{
                msg="保存成功";
            }
            this.$message({
                type: 'success',
                message: msg
            });
            this.resetForm();
            this.tableData=[];
            this.isEdit = false;
            // this.isEditFour=false;
          // this.$message.error(res.data.msg);
        }

        // alert(JSON.stringify(res))
      }).catch(() => {
        this.$message.error('请求失败');
      });
      // window.location.href = '/print-demo/webapp/print-template.html';
    },
    add() {
      if(this.currentApp === '') {
        this.$message('请选择有效的业务类型');
      } else {
        this.queryParams.busitypecode = this.currentApp.code;
        this.isEdit = true;
        this.isEditTwo=true;
        this.isEditFour=false;
      }
    },
    // 没用到
    requestTplTree() {
      this.$http({
        url: '/uitemplate_web/uitemplate_ctr/uitemplate_design_ctr/queryUITemplateList',
        method: 'post',
        contentType: 'application/x-www-form-urlencoded',
        data: 'data=' + encodeURIComponent('{"tenant_id":"","type":"sys"}')
      }).then((res) => {
        this.tplTree = res.data.formCategories;
      }).catch(() => {
        this.$message.error('请求失败');
      });
    },
    // 设计
    design(row) {
      // console.log(JSON.stringify(row))
      var storage = window.localStorage;
      storage.setItem('pk_print_template', row.pk_print_template);
      var params = {
        "modelId":row.procModelId,
      }
      this.$http({
        url: '/ifbp-bpm-service/bpmsso/getFlowUrl',
        method: 'get',
        params: params
      }).then((res) => {
        var decodeurl = decodeURIComponent(res.data.data);
        var arr = decodeurl.split('/');
        arr[3]="bpm-designer";
        var editUrl = arr.join('/');
        window.open(editUrl);
      }).catch(() => {
        this.$message.error('请求失败');
      });
    },
// 设计旧的
    designOld(row) {
      // console.log(JSON.stringify(row))
      var storage = window.localStorage;
      storage.setItem('pk_print_template', row.pk_print_template);
      var params = {
        "modelId":row.procModelId,
      }
      this.$http({
        url: '/ifbp-bpm-service/bpmsso/getFlowUrl',
        method: 'get',
        params: params
      }).then((res) => {
        var decodeurl = decodeURIComponent(res.data.data);
        window.open(decodeurl);
      }).catch(() => {
        this.$message.error('请求失败');
      });
    },
    // 删除
    deleteRow(row) {
      console.log(row);
      this.$confirm('确定删除关联?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {
            "id":row.id
          }
          this.$http({
            url: '/ifbp-bpm-service/bmp_proc/deleteProcModel?id='+row.id,
            method: 'post',
            dataType: 'json'
          }).then((res) => {
            if(res.data.status === 1) {
              this.tableData.splice(this.tableData.indexOf(row), 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          });

        });
    },
    // 编辑
    editRow(row) {
      console.log(row);
      this.currentTpl.code=row.buzicode;
      this.currentTpl.processName=row.procDefName;
      this.currentTpl.sceneCode=row.sceneCode;
      this.currentTpl.enabled=(row.enabled==='启用'?true:false);
      this.currentTpl.enabledTwo=row.enabled;
      this.currentTpl.description=row.description;
      this.currentTpl.id=row.id;
      this.currentTpl.refname=row.refname;
      this.currentTpl.scene=row.pk;
      var beanMap = {
        "scene_ref": {}
      };
      beanMap.scene_ref[row.pk] = {
        name: row.refname,
        id: row.pk,
        code:row.sceneCode
      };
      this.$set(this.currentTpl,'beanMap',beanMap);
      this.isEdit = true;
      this.isEditTwo=false;
      this.isEditFour=true;
    },
    // 发布
    issue(row){
      console.log(row)
      var params = {
        "id":row.id,
      }
      this.$http({
        url: '/ifbp-bpm-service/bmp_proc/process/deployProcDefinition?id='+row.id,
        method: 'post'
      }).then((res) => {
        // alert(JSON.stringify(res));
        if(res.data.status===0){
          this.$message.error(res.data.msg);
        }else{
           this.$message({
                type: 'success',
                message: '发布成功!'
            });
            this.isEdit = false;
            this.resetForm();
        }
      }).catch(() => {
        this.$message.error('发布失败');
      });
    },
    // 启用
    enabled(row){
      var params = {
        "buzicode":row.buzicode,
        "sceneCode":row.sceneCode,
        "processKey":row.procKey,
        "enabled":row.enabled==="启用"?false:true
      }
      this.$http({
        url: '/ifbp-bpm-service/bmp_proc/status?buzicode=' + params.buzicode + '&sceneCode=' + params.sceneCode+ '&processKey=' + params.processKey+ '&enabled=' + params.enabled,
        method: 'post'
      }).then((res) => {
        if(res.data.status===0){
          this.$message.error(res.data.msg);
        }else{
           this.$message({
                type: 'success',
                message: '启用/停用成功!'
            });
           row.enabled=(row.enabled==="启用"?"停用":"启用");
        }
      }).catch(() => {
        this.$message.error('启用/停用失败!');
      });;
    },
    historyRow(row){
      var params = {
        "id":row.id,
        "pageSize":1000,
        "pageNum":1
      }
      this.$http({
        url: '/ifbp-bpm-service/bmp_proc/process/queryProcList',
        method: 'get',
        params: params
      }).then((res) => {
        var totalData=res.data.data.data;
        var arr = [];
        totalData.forEach(function(item,index){
          var obj={};
          obj.id=item.id;
          obj.name=item.name;
          obj.version=item.version;
          var curDate=item.deploymentResponse.deploymentTime;
          obj.deploymentTime=new Date(curDate).toLocaleString();
          arr.push(obj);
        })
        this.tableDataHis=arr;
        this.isEditThree=true;
      }).catch(() => {
        this.$message.error('请求失败');
      });
    },
    // 没用到
    closeDialog() {
      console.log('close dialog');
    },
    // 没用到
    confirm() {
      if (this.currentTpl.code === '') {
        this.$message('请选择有效的业务类型');
      } else {
        this.$http({
          url: '/wbalone/uitemplatenexusbase/create',
          method: 'post',
          data: {
            pkTemp: this.currentTpl.id,
            nexuskey: this.dialogForm.nexuskey,
            funnode: this.currentApp.code
          }
        }).then((res) => {
          console.log(res);
          if(res.data.status === 1) {
            console.log(res);
            this.dialogVisible = false;
            res.data.data.type = 'UI模板';
            this.tableData.push(res.data.data);
          } else {
            this.$message.error(res.data.message);
          }
        }).catch(() => {
          this.$message.error('请求失败');
        });
      }
    },
    cancel() {
      this.isEdit = false;
      this.isEditTwo = true;
      // this.isEditFour=true;
      this.resetForm();
    },
    resetForm() {
      Object.keys(this.currentTpl).forEach((key) => {
        this.currentTpl[key] = '';
      });
    },
    // 不知道干啥的
    request() {
      this.$http({
        url: '/ifbp-print/rest/bomanage/querybyapptetant'
      }).then((res) => {
        this.boList = res.data;
      }).catch(() => {
        this.$message.error('请求失败');
      });
    },
// 参照获取
    handleRefChange(type, data) {
      console.log(type, data);
      this.sceneCode=data.value[0].refcode;
      this.currentTpl.sceneCode=data.value[0].refcode;
      this.sceneName=data.value[0].name;
    },
     getPubscence(){
      var protocol = window.location.protocol;
      var host = window.location.host;
      const self = this;
        this.$http({
          url: '/uitemplate_web/iref_ctr/commonRefsearch',
          method:'post',
          // 本地测试使用，上线的话，需要使用第二个
          // data:'refModelUrl=http://dev-ap.iservice.imfbp.com/ifbp-app-sm-infoset-web/infoset/pubscence_ref/'
          data:'refModelUrl=' + protocol+'//' + host +'/ifbp-app-sm-infoset-web/infoset/pubscence_ref/'
        }).then((res) => {
          var curDate=res.data.data;
          if(curDate) {
            // alert(JSON.stringify(curDate));
            // console.log(curDate);
            var data = JSON.parse(JSON.stringify(curDate));
            data.forEach((value) => {
              self.$set(value,'text',value.refname);
              self.$set(value,'value',value.refname);
            });
            this.pubsceneFilters = data;
            // console.log(this.pubsceneFilters);
          } else {
            this.$message.error('获取模型视图失败');
          }
          // this.search();
        }).catch(() => {
          this.$message.error('请求出错');
        });
    },
  },
  created(){
    this.getPubscence();
    this.issueImage=issueImg;
    this.getData();
    // this.request();
  }
};
</script>

<style scoped>
#edit-container {
  margin-top: 20px;
  background: #ffffff;
  position: relative;
  padding: 0 20px;
  height: 400px;
}
#appTplAuth-container {
  padding: 15px;
  font-size: 0px;
}

#form-container {
  width: 40%;
  margin-left: 30%;
  padding-top: 50px;
}

#app-container {
  display: inline-block;
  width: calc(30% - 15px);
  font-size: 14px;
  vertical-align: top;
  margin-right: 15px;
}

#tpl-container {
  display: inline-block;
  width: 70%;
  font-size: 14px;
  height: 400px;
  background-color: white;
  vertical-align: top;
}

#authApp-tpl-tree {
  display: inline-block;
  width: calc(30% - 2px);
  font-size: 14px;
  vertical-align: top;
}

#authApp-dialog-form {
  display: inline-block;
  width: calc(70% - 2px);
  font-size: 14px;
  vertical-align: top;
}
</style>
<!-- <style>
.el-table .cell, .el-table th>div{
  padding-left: 0px;
}
</style> -->
