Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue

@@ -1,27 +1,160 @@
<template>
  <div style="padding: 10px 0">
    <el-tabs tab-position="left" :style="'height: '+height+';'">
      <el-tab-pane label="主体">
        <fieldset>
          <legend>&nbsp;主题&nbsp;</legend>
          <div>
            <div v-if="!readOnly">
              <el-button plain size="mini" type="primary" @click="userHandler">选中用户</el-button>
              <el-button plain size="mini" type="primary" @click="roleHandler">选择角色</el-button>
              <el-button plain size="mini" type="primary" @click="deptHandler">选择用户组</el-button>
  <div>
    <el-tabs tab-position="left" :style="'height: '+height+'px;'">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-s-custom"></i> 主体</span>
        <div v-if="!readOnly" style="margin-bottom: 10px;">
          <el-button plain size="mini" type="primary" @click="userHandler">选择用户</el-button>
          <el-button plain size="mini" type="primary" @click="roleHandler">选择角色</el-button>
          <el-button plain size="mini" type="primary" @click="deptHandler">选择用户组</el-button>
        </div>
        <div v-if="!readOnly" style="display: flex;justify-content: space-between;align-items: center;">
          <fieldset style="width: 48%">
            <legend>&nbsp;主体 </legend>
            <div>
              <avue-crud  ref="mainCrud" :data="mainData" :option="mainOption"
                          @current-row-change="mainCurrentRowHandler"
              >
                <template #type="{ row }">
                  <el-tag v-if="row.type=='用户'" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
                  <el-tag v-else-if="row.type=='角色'" type="info" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
                  <el-tag v-else="row.type=='用户组'" type="warning" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
                </template>
              </avue-crud>
            </div>
          </fieldset>
          <div style="text-align: center;">
            <el-button icon="el-icon-arrow-right" type="primary" size="small" @click="rightHandler" style="margin-bottom: 50px;"></el-button><br/>
            <el-button icon="el-icon-arrow-left" type="primary" size="small" @click="leftHandler"></el-button>
          </div>
          <fieldset style="width: 42%">
            <legend>&nbsp;授权主体 </legend>
            <div>
              <avue-crud  ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading"
                @current-row-change="authCurrentRowHandler">
              </avue-crud>
            </div>
          </fieldset>
        </div>
        <div v-else>
          <fieldset style="width: 99.5%">
            <legend>&nbsp;授权主体 </legend>
            <div>
              <avue-crud  ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading">
              </avue-crud>
            </div>
          </fieldset>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-eleme"></i> 客体</span>
        <div>
          <basic-form key="queryForm" style="margin-bottom: 0"
                      ref="form"
                      :span="8"
                      :formItems="formItems"
                      :formData="form"
                      @getFormData="getFormData">
          </basic-form>
          <el-container v-if="!readOnly && (form.ruleType=='1' || form.ruleType=='3')">
            <el-aside style="width:350px">
              <fieldset>
                <legend>&nbsp;候选条件&nbsp;</legend>
                <div>
                  <avue-radio v-model="radioForm"  :dic="radioDic" style="margin: 0 10px 5px"></avue-radio>
                  <div v-show="radioForm==1">
                    查询模板定义
                    <avue-select @change="linkQueryDefineChange" class="el-input--small" v-model="linkQueryDefineForm" placeholder="请选择内容" type="tree" :dic="linkQueryDefineDic" style="width:245px"></avue-select>
                    <avue-tree :style="'width:335px;height: '+(height-155)+'px;'" :data="linkTreeData" :option="treeOption"  @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
                    </avue-tree>
                  </div>
                  <div v-show="radioForm==0">
                    查询模板定义
                    <avue-select @change="businessQueryDefineChange" class="el-input--small" v-model="businessQueryDefineForm" placeholder="请选择内容" type="tree" :dic="businessQueryDefineDic" style="width: 245px;"></avue-select>
                    <avue-tree :style="'width:335px;height: '+(height-155)+'px;'" :data="businessTreeData" :option="treeOption"  @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
                    </avue-tree>
                  </div>
                </div>
              </fieldset>
            </el-aside>
            <el-main>
              <fieldset style="margin: 0 10px">
                <legend>&nbsp;查询条件&nbsp;</legend>
                <form-query-dialog ref="formQuery"
                                   :style="'height: '+(height-100)+'px;'"
                                   :queryCondition="queryCondition"
                                   :queryTree="queryTree"
                                   :levelFlag.sync="form.levelFlag"
                                   @queryHandler="queryHandler"
                ></form-query-dialog>
              </fieldset>
            </el-main>
          </el-container>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-s-tools"></i> 操作</span>
        <fieldset :style="'width:99.5%;height: '+(height-10)+'px;margin-bottom:10px;'">
          <legend>&nbsp;一般操作 </legend>
          <div>
            <avue-checkbox :disabled="readOnly" key="actionCheck" :all="!readOnly" v-model="actionForm" placeholder="请选择内容" :dic="actionDic"></avue-checkbox>
          </div>
        </fieldset>
        <fieldset v-if="0" :style="'width:99.5%;height: '+(height/2-30)+'px;'">
          <legend>&nbsp;关系和跃迁 </legend>
          <div>
            <avue-checkbox :disabled="readOnly" key="linkActionCheck" :all="!readOnly" v-model="linkactionForm" placeholder="请选择内容" :dic="linkactionDic"></avue-checkbox>
          </div>
        </fieldset>
      </el-tab-pane>
      <el-tab-pane label="客体">客体</el-tab-pane>
      <el-tab-pane label="操作">操作</el-tab-pane>
    </el-tabs>
    <!-- 选择用户穿梭框   -->
    <transfer ref="usertransfer" :left-role-data="leftUserData" :right-role-data="rightUserData"
              :transferTitle="['未选择用户','已选择用户']" title="主体添加用户"
              @transferSend="userSendHandler">
    </transfer>
    <!-- 选择用户穿梭框   -->
    <transfer ref="roletransfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
              :transferTitle="['现有角色','拥有角色']" title="分配角色"
              @transferSend="roleSendHandler">
    </transfer>
    <!-- 选择部门对话框    -->
    <el-dialog
      v-dialogDrag
      v-loading="departLoading"
      :visible.sync="departVisible"
      append-to-body="true"
      class="avue-dialog"
      title="选择部门"
      width="50%"
    >
      <avue-crud
        ref="departCrud"
        :data="departData"
        :option="departOption"
        @selection-change="selectDepartChange"
        @row-click="rowClickDeptHandler"
      >
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="saveDepartHandler">确 定</el-button>
        <el-button size="small" @click="departVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import basicOption from "@/util/basic-option";
import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue";
import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine";
import {getCriteria} from "@/api/queryTemplate/linkTypeQuery";
import {listUserByUserType, gridRoles, departmentQueryController} from "@/api/system/user/api";
import func from "@/util/func";

export default {
  name: "dataView",
  components:{formQueryDialog},
  props: {
    //选中的业务类型节点
    btmNode: {
@@ -29,7 +162,7 @@
      default: {}
    },
    //选中行数据
    data: {
    selectRow: {
      type: Object,
      default: {}
    },
@@ -38,26 +171,613 @@
      default: false
    },
    height: {
      type: String,
      default: '400px'
      type: Number,
      default: 400
    },
    actionMap:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      leftUserData: [],  // 选择成员穿梭框左侧初始数据
      rightUserData: [], // 选择成员穿梭框右侧初始数据
      leftRoleData: [],  // 选择角色穿梭框左侧初始数据
      rightRoleData: [], // 选择角色穿梭框右侧初始数据
      departCurrenRows: [],
      departOption: {
        ...basicOption,
        addBtn: false,
        rowKey: 'oid',
        rowParentKey: 'parentId',
        selection: true,
        highlightCurrentRow: true,
        stripe: false,
        menu: false,
        refreshBtn: false,
        gridBtn: false,
        header: false,
        column: [
          {
            label: '名称',
            prop: 'name',
            align: 'left'
          },
          {
            label: '编号',
            prop: 'id',
          },
          {
            label: '描述',
            prop: 'description',
          },
        ]
      },
      departData: [],//选择部门数据
      departLoading: false,
      departVisible: false,
      mainData:[],
      mainCurrentRow:{},
      tableLoading: false,
      mainOption: {
        ...basicOption,
        header:false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: false,
        index:false,
        menu:false,
        height: this.height-80,
        tip:false,
        size:'mini',
        highlightCurrentRow:true,
        column: [{
          label: ' 分类',
          prop: 'type',
          sortable: true,
          width:90
        },{
          label: '编码',
          prop: 'id'
        },{
            label: '名称',
            prop: 'name'
          }]
      },
      authData:[],
      authCurrentRow:{},
      authOption:{
        ...basicOption,
        header:false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: false,
        index:false,
        menu:false,
        height: this.readOnly?this.height-50:this.height-80,
        tip:false,
        showHeader:false,
        size:'mini',
        highlightCurrentRow:true,
        align:'left',
        column: [{
          label: '名称',
          prop: 'name'
        }]
      },
      formItems:[{
        label: '规则名称',
        prop: 'ruleName',
        type: 'input',
        span:8,
        labelWidth: 100,
        disabled:this.readOnly,
        rules: [{
          required: true,
          message: "请输入规则名称",
          trigger: "blur"
        }]
      }, {
        label: '规则类型',
        prop: 'ruleType',
        type: 'select',
        span:6,
        labelWidth:110,
        disabled:this.readOnly,
        dicData: [{
          label: '全部允许',
          value: '0'
        }, {
          label: '允许权限',
          value: '1',
          disabled:true
        }, {
          label: '全部拒绝',
          value: '2'
        }, {
          label: '拒绝权限',
          value: '3',
          disabled:true
        }],
        value: '0',
        change:function (column,value){
          if(value=='1' || value=='3'){
            this.form.btmName=this.btmNode.attributes.name;
            this.form.levelFlag=0;
            this.form.queryTemplate={};
          }
        }
      }],
      form:{
        btmName:'',
        qtName: '',
        levelFlag:0,//0:普通查询模板; 1:高级查询模板"
        queryTemplate:{},//客体中查询条件
        "ID": "",//数据的ID
        "roles": "",//显示到授权主体界面，角色名称，多个使用逗号分隔
        "userGroups": "",//显示到授权主体界面，部门名称，多个使用逗号分隔
        "users": "",//显示到授权主体界面，用户名称，多个使用逗号分隔
        "expToSQL": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "identifier": "",//业务类型（terminology）+下划线（_）+操作区的一般操作的按钮英文名称（query）,多个按钮的话是多条数据不是使用逗号分隔
        "isGrand": 49, //此处为操作区的一般操作的按钮是否为选择情况，未选中值为48，选中为49，这里是将0和1转为了byte值，所以为48，49
        "lexpToSQL": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "lruleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "lseniorRuleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "ruleName": "",//规则名称
        "ruleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "ruleType": "",//0全部允许，1允许权限，2全部拒绝，3拒绝权限，由于暂时只做全部允许与全部拒绝，所以暂时可以不用管
        "seniorRuleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
      },
      radioForm:0,
      radioDic:[{
        label:'业务类型 ',
        value:0
      },{
        label:'链接类型',
        value:1
      }],
      treeOption: {
        defaultExpandAll: true,
        menu: false,
        addBtn: false,
        filter: false,
        draggable: true,
        allowDrop: () => {
          return false;
        },
        allowDrag: (dropNode) => {
          if (dropNode.data.attrs && dropNode.data.attrs.length > 0) {
            return false;
          } else {
            return true;
          }
        },
        props: {
          label: 'name',
          value: 'name',
          children: 'attrs'
        }
      },
      linkQueryDefineForm:'',//链接类型查询模板定义选中值
      linkQueryDefineDic:[],//链接类型查询模板定义下拉数据
      //链接类型查询模板定义选中项属性
      linkTreeData: [],
      businessQueryDefineForm:'',//业务类型查询模板定义选中值
      businessQueryDefineDic:[],//业务类型查询模板定义下拉数据
      //业务类型查询模板定义选中项属性
      businessTreeData: [],
      //高级查询条件
      queryTree:{},
      //普通查询条件
      queryCondition:[],
      actionForm:[],//一般操作选中值
      actionDic:[],//一般操作选中项
      linkactionForm:[],//关系和跃迁选中值
      linkactionDic:[]//关系和跃迁选中项
    }
  },
  created() {
    listUserByUserType().then(res => {
      // 组装好穿梭框可用数据
      this.leftUserData = res.data.data.map(item => {
        return {
          ...item,
          name: item.name + `(${item.id})`,
          oid: item.oid
        }
      })
      this.rightUserData = [];
    })
    gridRoles(1,-1).then(res => {
      // 组装好穿梭框可用数据
      this.leftRoleData = res.data.data.map(item => {
        return {
          ...item,
          name: item.name ,
          oid: item.oid
        }
      })
      this.rightRoleData = [];
    })
    departmentQueryController({queryAllLevel: true}).then(res => {
      const data = res.data.treeData;
      this.departData = this.departDtaFormAtter(data);
    })
  },
  watch: {
    actionMap:{
      handler(val) {
        this.actionDic=[];
        if(val){
          for(var i in val){
            this.actionDic.push({
              label:i,
              value:val[i]
            })
          }
        };
      },
      immediate: true,
      deep: true
    },
    selectRow:{
      handler(val,oldval) {
        this.authData=[];
        if(val && val.rules &&val.rules.length>0) {
          this.form = JSON.parse(JSON.stringify(val.rules[0]));
          //this.getTemp(true);
          //this.getTemp(false)
          //构建授权主体数据
          if (val.rules[0].users) {
            val.rules[0].users.split(',').forEach((item, i) => {
              if (item) {
                this.authData.push({
                  name: '{' + item + ', ' + item + ', user}'
                })
              }
            })
          }
          if (val.rules[0].roles) {
            val.rules[0].roles.split(',').forEach((item, i) => {
              if (item) {
                this.authData.push({
                  name: '{' + item + ', ' + item + ', role}'
                })
              }
            })
          }
          if (val.rules[0].userGroups) {
            val.rules[0].userGroups.split(',').forEach((item, i) => {
              if (item) {
                this.authData.push({
                  name: '{' + item + ', ' + item + ', userGroup}'
                })
              }
            })
          }
          //解析操作按钮选中值
          if (this.actionDic.length > 0) {
            let actionDicStr = JSON.stringify(this.actionDic);
            val.rules.forEach(item => {
              if (item.isGrand == 49) {
                let identifier = item.identifier.replace(this.btmNode.attributes.name + '_', '')
                if (actionDicStr.indexOf('"value":"'+identifier+'"}') != -1) {
                  this.actionForm.push(identifier)
                } else {
                  this.linkactionForm.push(identifier);
                }
              }
            })
          }
        }else {
          this.form={
            ruleName:'',
            ruleType:'0'
          };
          this.actionForm=[];
          this.linkactionForm=[];
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    //选中用户
    userHandler(){
      this.$refs.usertransfer.visible = true;
    },

    // 选中用户穿梭框回填
    userSendHandler(row) {
      this.mainData=this.mainData.filter(item=>{
        return item.type!='用户'
      })
      row.forEach((item,index)=>{
        var addItem=this.leftUserData.find(leftitem=>leftitem.oid==item);
        this.mainData.push({
          type:'用户',
          id:addItem.id,
          name:addItem.name.split('(')[0],
          oid:addItem.oid
        })
      })
      this.rightUserData=row;
      this.$refs.usertransfer.visible = false;
    },
    //选择角色
    roleHandler(){
      this.$refs.roletransfer.visible = true;
    },
    // 选择角色穿梭框回填
    roleSendHandler(row) {
      this.mainData=this.mainData.filter(item=>{
        return item.type!='角色'
      })
      row.forEach((item,index)=>{
        var addItem=this.leftRoleData.find(leftitem=>leftitem.oid==item);
        this.mainData.push({
          type:'角色',
          id:addItem.name,
          name:addItem.name,
          oid:addItem.oid
        })
      })
      this.rightRoleData=row;
      this.$refs.roletransfer.visible = false;
    },
    //选择用户组
    deptHandler(){
      this.departVisible=true;
    },
    // 选择部门数据转换
    departDtaFormAtter(items) {
      return items.map(item => {
        // 转换当前节点的属性
        const formList = {
          oid: item.oid,
          id: item.attributes.id,
          name: item.attributes.name,
          description: item.attributes.description,
          parentId: item.parentId,
          parentName: item.parentName,
          parentBtmName: item.parentBtmName,
          // 如果children存在且不为空，则递归转换children
          children: item.children && item.children.length > 0 ? this.departDtaFormAtter(item.children) : undefined
        };
        return formList;
      });
    },
    // 选择部门
    selectDepartChange(row) {
      this.departCurrenRows = row;
    },
    // 选择部门 行单选
    rowClickDeptHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.departCrud,
        this.lastIndex,
        (newIndex) => { this.lastIndex = newIndex; },
        () => { this.departCurrenRows = [row]; }
      );
    },
    // 选择部门 确定
    saveDepartHandler() {
      if (this.departCurrenRows.length==0) {
        this.$message.warning('请选择部门节点！')
        return;
      }
      this.mainData=this.mainData.filter(item=>{
        return item.type!='用户组'
      })
      this.departCurrenRows.forEach((addItem,index)=>{
        this.mainData.push({
          type:'用户组',
          id:addItem.id,
          name:addItem.name,
          oid:addItem.oid
        })
      })
      this.departVisible = false;
    },
    //主体列表行点击
    mainCurrentRowHandler(row){
      this.mainCurrentRow=row;
    },
    //授权主体列表行点击
    authCurrentRowHandler(row){
      this.authCurrentRow=row;
    },
    rightHandler() {
      if(func.isEmptyObject(this.mainCurrentRow)){
        this.$message.warning('请选择用户、用户组、角色信息！')
        return;
      }
      let name='{' + this.mainCurrentRow.id + ', ' + this.mainCurrentRow.name + ', ';
      if (this.mainCurrentRow.type == '用户') {
        name+='user}';
      } else if (this.mainCurrentRow.type == '角色') {
        name+='role}';
      } else if (this.mainCurrentRow.type == '用户组') {
        name+='userGroup}';
      }
      let canAdd = !this.authData.some(item => {
        return item.name == name
      })
      if(canAdd) {
        this.authData.push({
          name: name
        })
        this.$refs.mainCrud.setCurrentRow();
        this.mainCurrentRow={}
      }else {
        this.$message.warning('授权主体信息选择重复！')
      }
    },
    leftHandler() {
      this.authData = this.authData.filter(item => {
        return item.name != this.authCurrentRow.name
      })
    },
    initFormData() {
      let formData = {
        btmName: this.form.btmName,
        qtName: this.form.qtName,
        levelFlag: this.form.levelFlag,
        queryTemplate: {
          btmType: this.form.btmType,
          clauseList: ['*'],
          direction: this.form.direction,
          id: this.form.qtName,
          level: this.form.level,
          linkType: this.form.btmName,
          orderInfoList: this.orderInfoList,
          queryISLeaf: this.form.queryISLeaf,
          recReturnMode: 1,//递归返回数据模式:1：RECRETURNMODE_FLAT, 2：RECRETURNMODE_FILTER
          rightFlag: true,
          secretFlag: true,
          type: 'link',
          version: this.form.version
        }
      }
      if (formData.levelFlag == 1) {
        //高级
        let that = this;
        function initValue(nodeChild) {
          let children = [];
          if (nodeChild) {
            nodeChild.forEach((item, index) => {
              if (item.label != '并且' && item.label != '或者') {
                children.push(item.label);
              } else {
                children.push({
                  connector: item.label,
                  child: initValue(item.children)
                })
              }
            })
          }
          return children;
        }

        let treeData = {
          connector: this.$refs.formQuery.treeData[0].label
        };
        if (this.$refs.formQuery.treeData[0].children) {
          treeData.child = initValue(this.$refs.formQuery.treeData[0].children);
        }
        formData.tree = treeData
      }

      formData.condition = this.$refs.formQuery.conditionList;

      return formData;
    },
    getFormData(form) {
      this.form = form;
    },
    //获取查询模板定义下拉
    getTemp(linkFlag) {
      if (this.btmNode.attributes) {
        queryTemplateListByAttr({btmName: this.btmNode.attributes.name, linkFlag: linkFlag,direction:linkFlag?null:this.form.direction}).then(res => {
          const data = res.data.data.map(item => {
            item.label = item.name + '-' + (item.linkTypeName || item.btmName);
            item.value = item.name;
            return item;
          });
          if(linkFlag){
            this.linkQueryDefineDic=data
            data.length>0 && (this.linkQueryDefineForm=data[0].value);
          }else {
            this.businessQueryDefineDic=data;
            data.length>0 && (this.businessQueryDefineForm= data[0].value);
          }
        })
      }
    },
    //链接类型查询模板切换
    linkQueryDefineChange(data) {
      if (data.value) {
        this.linkTreeData = [{
          name: data.value,
          attrs: data.item.attrs
        }]
      }
    },
    //业务类型查询模板切换
    businessQueryDefineChange(data) {
      if (data.value) {
        this.businessTreeData = [{
          name: data.value,
          attrs: data.item.attrs
        }]
      }
    },
    // 开始拖拽树节点事件
    handleDragStart(node, ev) {
      // 使用 setData 方法设置数据
      ev.dataTransfer.setData('item', JSON.stringify(node.data));
      if(this.form.levelFlag==1){
        this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-start', ev,{node:this.$refs.formQuery.initItem(node)});
      }
    },
    handleDragEnd(draggingNode,endNode,position,ev){
      if(this.form.levelFlag==1) {
        this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-end', ev);
      }
    },
    //查询
    queryHandler(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.formQuery.queryResultDialog.loading=true;
          const formData=this.initFormData();
          getCriteria(formData).then(res => {
            if (res.data.success) {
              const data = res.data.data;
              const result = data.map(item => {
                const filteredAttrs = item.hisAttrValList.filter(attr =>
                  attr.attrName === "OID" || attr.attrName === "CREATOR" || attr.attrName === "CREATETIME"
                );

                const newObj = filteredAttrs.reduce((acc, attr) => {
                  acc[attr.attrName] = attr.attrVal;
                  return acc;
                }, {});

                return newObj;
              });

              this.$refs.formQuery.resultData = result;
              this.$refs.formQuery.queryResultDialog.showDialog = true;
              this.$refs.formQuery.queryResultDialog.loading = false;
            }
          });
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
<style lang="scss" scoped>
::v-deep {
  .el-radio ,.el-checkbox{
    margin-right: 30px;
  }
}
div{
  font-size: 14px;
}
fieldset {
  padding: 10px 6px;
  margin: 10px 0 0 0;
  margin: 0;
  border: 1px solid #EBEEF5;
}
</style>