 <template>
  <div class="app-container">


        <div class="search">
          <el-row :gutter="0">
            <el-col :span="21">

            </el-col>
            <el-col :span="3">
                <el-button class="successBorder" @click="form_search">查询</el-button>
                <el-button class="successBorder" @click="form_clear">重置</el-button>
            </el-col>
          </el-row>
        </div>


    <div class="table">
      <el-table :key="table.tableKey" v-loading="table.listLoading" element-loading-text="给我一点时间" :data="table.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
        <!-- <el-table-column type="selection" align="center" width="50" /> -->
        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程编号" min-width="90px" align="center"  fixed="left">
          <template slot-scope="scope">
            <span  style = "color:#409EFF; cursor: pointer;" @click="form_see(scope.row)">{{ scope.row.processCode  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程状态" min-width="150px" align="center" fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.row.statusName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程名称" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.processName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createrName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createrDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明" min-width="120px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center"    :width="autoWidth"  v-if="autoWidth !== 0"     class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <!-- <el-button v-if="isRoleEdit" class="miniSuccess" @click="form_edit(row)">编辑</el-button>
            <el-button v-if="isRoleEdit" class="miniDanger" @click="form_delete(row)">删除</el-button> -->

            <el-button class="miniSuccess" v-if="isApprovalProcessAdd" @click="form_edit(row)">编辑</el-button>

            <el-button class="miniSuccess" v-if="row.enable == 0 && isApprovalProcessAdd " @click="form_enable(row)">启用</el-button>
            <el-button class="miniDanger" v-if="row.enable == 1 && isApprovalProcessAdd" @click="form_dis_enable(row)">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="table.total>=0" :total="table.total" :page.sync="table.getdataListParm.offset" :limit.sync="table.getdataListParm.pagecount" @pagination="get_table_data" />
    </div>

    <!-- 新增/编辑 -->
    <el-dialog :title="textMap[create.dialogStatus]" :visible.sync="create.dialogFormVisible" :close-on-click-modal="false" width="90%">
      <div class="app-add">
        <el-form ref="temp" :rules="create.rules" :model="create.temp" label-position="right" label-width="150px" style="width: 50%;margin:0 auto 50px">

          <el-form-item label="流程名称：" prop="processName">
            <el-input ref="processName" v-model="create.temp.processName" class="filter-item" style="width: 100%;" disabled  />
          </el-form-item>
          <!-- <el-form-item label="适用部门：" prop="empId">
            <el-select ref="empId" v-model="create.temp.empId" filterable class="filter-item" style="width: 100%;" :disabled="create.dialogStatus=='see'">
              <el-option v-for="(item,index) in empnameList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item> -->

          </el-form-item>


          <el-form-item label="是否立即启用：" prop="enable">
            <el-switch ref="enable" v-model="create.temp.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"  :disabled="create.dialogStatus=='see'"/>
          </el-form-item>

           <el-form-item label="说明：" prop="remark">
                    <el-input ref="remark" v-model="create.temp.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 8} "  :rows="8" placeholder="请输入备注，最多200个字" maxlength="200" class="filter-item" style="width: 100%;" :disabled="create.dialogStatus=='see'" />
           </el-form-item>
        </el-form>

        <h3>审批流程</h3>
        <el-row :gutter="30">
            <el-button v-if=" create.dialogStatus==='update'" class="success" style="float: left;margin-left:30px;z-index:999" @click="pro_add_new()">增加节点</el-button>
        </el-row>
        <el-form label-position="right" label-width="">
        <el-row :gutter="30">


            <el-col :span="6" v-for="(item,index) in processAllList" >
              <el-card class="box-card" >
                <div slot="header" class="clearfix">
                  <span>{{item.title}}</span>
                  <i class="el-icon-circle-close" @click="on_close_tap(item,index)" style="font-size:30px;float: right; padding: 3px 0" v-if="create.dialogStatus !=='see'"></i>
                </div>
                <div  class="text item">
                  <el-form-item>
                      <el-select ref="process" v-model="item.process" filterable class="filter-item" style="width: 100%;"   placeholder="审批角色" :disabled="create.dialogStatus=='see'">
                        <el-option v-for="(items,indexs) in processList" :key="indexs" :label="items.name" :value="items.id" />
                      </el-select>
                  </el-form-item>

                  <el-form-item v-show="item.process == '审批角色'" >
                      <el-select  v-model="item.procRoleIdArr" filterable class="filter-item" style="width: 100%;" @change="change_process_role(item,index)" placeholder="部门管理员" multiple :disabled="create.dialogStatus=='see'">
                        <el-option v-for="(items,indexs) in procRoleList" :key="indexs" :label="items.name" :value="items.id" />
                      </el-select>
                  </el-form-item>

                  <el-form-item v-show="item.process == '审批用户'" >


                      <el-select   v-model="item.procUserIdArr" filterable class="filter-item" style="width: 100%;"  @change="change_process_user(item,index)" placeholder="部门管理员" multiple :disabled="create.dialogStatus=='see'">
                        <el-option v-for="(items,indexs) in procUserList" :key="indexs" :label="items.name" :value="items.id" />
                      </el-select>
                  </el-form-item>
                </div>
              </el-card>

            </el-col>
        </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="create.dialogFormVisible = false;get_table_data()">关闭</el-button>
          <el-button v-if=" create.dialogStatus==='update'" class="success" @click="form_edit_save()">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
import { isIntegerZero } from '@/utils/validate'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'
import { constants } from 'zlib';
export default {
  name: 'ApprovalProcess',
  components: { Pagination },
  data() {
    return {

      isRoleEdit: [],isApprovalProcessAdd: [],
      enableList: [{ id: 1, name: '是' }, { id: 0, name: '否' }], // 是否启用
      departNameList: [],
      empnameList: [],
      roleNameList: [],

autoWidth: 130,
      processAllList:[
        // {
        //   title:"1审",sort:1,id:1,process:"审批角色",procRoleId:"部门管理员",procRoleIdArr:[],procRoleName:"部门管理员", procUserId:"",procUserIdArr:[],procUserpName:""
        // },
        // {
        //   title:"2审",sort:2,id:1,process:"审批角色",procRoleId:"部门管理员",procRoleIdArr:[],procRoleName:"部门管理员", procUserId:"",procUserIdArr:[],procUserpName:""
        // },
      ],


      processList:[
        {name:"审批角色",id:"审批角色"},
        {name:"审批用户",id:"审批用户"},
      ],
      procRoleList:[
        // {name:"部门管理员",id:"部门管理员"},
        // {name:"部门管理员2",id:"部门管理员2"},
      ],

      procUserList:[
        // {name:"用户A",id:"用户A"},
        // {name:"用户b",id:"用户b"},
      ],


      //表格请求参数~
      table: {
        getdataListParm: {
          name: 'getApprovalProcess',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {

          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },

      // 新增/编辑
      create: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: { processName: '',  remark: '',  enable: 1 ,id:""},
        rules: {
           processName: [{ required: true, message: '必填', trigger: 'blur' }],
          // empId: [{ required: true, message: '必填', trigger: 'blur' }],
          // roleId: [{ required: true, message: '必填', trigger: 'blur' }]

        },
        getProcessListParm: {
          name: 'getApprovalProcessUpdate',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: { id: "" }
        },
      },
      textMap: {
        create: '添加',
        see: '查看',
        update: '编辑'
      },

      requestParam: {},

      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },

  created() {
    this.get_table_data()

    this.get_select_list()

    this.get_auto_buttons()
  },

  methods: {
    //获取按钮权限
    get_auto_buttons() {
      const Edit = 'ApprovalProcess'
      const isRoleEdit = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), Edit)
      this.isRoleEdit = isRoleEdit


      const ApprovalProcessAdd = 'process:approval:enabled'
      const isApprovalProcessAdd= checkButtons(JSON.parse(sessionStorage.getItem('buttons')), ApprovalProcessAdd)
      this.isApprovalProcessAdd = isApprovalProcessAdd
    },

    //获取所有下拉框的内容
    get_select_list() {
      GetDataByName({ name: 'getDepartmentsSelect', offset: 0, pagecount: 0, parammaps: {} }, ).then(response => {
        this.departNameList = response.data.list
        console.log("部门下拉框", response)
      })
      GetDataByName({ name: 'getRoleAll', offset: 0, pagecount: 0, parammaps: {} }, ).then(response => {
        this.procRoleList = response.data.list
        console.log("角色下拉框", response)
      })
      GetDataByName({ name: 'getUsersSelect', offset: 0, pagecount: 0, parammaps: {} }, ).then(response => {
        this.procUserList = response.data.list
        console.log("用户下拉框", response)
      })

    },


    //加载表格
    get_table_data() {
      var me = this
      this.table.listLoading = true
      console.log("this.table.getdataListParm======>", this.table.getdataListParm)
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据======>', response.data.list)
        if (response.data.list !== null) {
          for (var i = 0; i < response.data.list.length; i++) {
            response.data.list[i].enable = parseInt(response.data.list[i].enable)
          }

          this.table.list = response.data.list
          this.table.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
          this.table.total = response.data.total

           //计算操作栏宽度
           var btnNum = 0

              if(me.isApprovalProcessAdd){
                  me.autoWidth = 2 * 90
               } else {
                me.autoWidth =  90
               }

              console.log("btnNum=============",btnNum)


        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    form_search() {
      console.log('点击了查询')

      this.table.getdataListParm.offset = 1
      this.get_table_data()
    },
    form_clear() {
      console.log('点击了重置')


      this.table.getdataListParm.parammaps.userName = ''
      this.table.getdataListParm.parammaps.empName = ''
      this.table.getdataListParm.parammaps.departmentId = ''
      this.table.getdataListParm.parammaps.enable = ''
      this.table.getdataListParm.offset = 1
      this.get_table_data()
    },

    // 添加
    form_reset() {
      this.create.temp = { processName: '',  remark: '',  enable: 1 ,id:"" }
    },


    //监听 - 角色
    change_process_role(item,index) {
      console.log("监听 - 角色 ",item,index)

      var procRoleIdArr = item.procRoleIdArr
      if(procRoleIdArr.length == 0){
        var procRoleId = ""
      } else {
        var procRoleId =  procRoleIdArr.join()
      }

      var procRoleList = this.procRoleList


      this.processAllList[index].procRoleId = procRoleId
      console.log("processAllList=============", this.processAllList)

    },


    change_process_user(item,index) {

      console.log("监听 - 用户 ",item,index)

      var procUserIdArr = item.procUserIdArr
      if(procUserIdArr.length == 0){
        var procUserId = ""
      } else {
        var procUserId =  procUserIdArr.join()
      }

      this.processAllList[index].procUserId = procUserId

      console.log("processAllList=============", this.processAllList)
    },


    // 流程
    getProcessList() {
      GetDataByName(this.create.getProcessListParm).then(response => {
        if (response.data.list !== null) {

           for (let i = 0; i < response.data.list.length; i++) {

            this.$set(response.data.list[i], 'id', this.create.temp.id)

            if(response.data.list[i].procRoleId.length == 0 || response.data.list[i].procRoleId == null || response.data.list[i].procRoleId == undefined){
              var procRoleIdArr = ""
              this.$set(response.data.list[i], 'procRoleIdArr', procRoleIdArr)
            } else {
              var procRoleIdArr = response.data.list[i].procRoleId.split(",")
              this.$set(response.data.list[i], 'procRoleIdArr', procRoleIdArr)
            }

            if(response.data.list[i].procUserId.length == 0 || response.data.list[i].procUserId == null || response.data.list[i].procUserId == undefined){
              var procUserIdArr = ""
              this.$set(response.data.list[i], 'procUserIdArr', procUserIdArr)
            } else {
              var procUserIdArr = response.data.list[i].procUserId.split(",")
              this.$set(response.data.list[i], 'procUserIdArr', procUserIdArr)
            }
          }
          this.processAllList = response.data.list

          console.log('processAllList=============', this.processAllList)
        } else {
          this.processAllList = []
        }

      })
    },

    //添加
    form_add() {
      console.log('点击了新增')
      this.form_reset()
      this.create.dialogStatus = 'create'
      this.create.dialogFormVisible = true
    },
    //添加保存
    add_dialog_save() {
      console.log('点击了新增保存')
      this.$refs['temp'].validate(valid => {
        if (valid) {

          //新增保存
          this.requestParam.name = 'createUser'
          this.requestParam.parammaps = this.create.temp
          PostDataByName(this.requestParam).then(response => {
            console.log('新增保存发送参数', this.requestParam)
            if (response.msg !== 'fail') {
              this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
              this.create.dialogFormVisible = false
              this.get_table_data()
            } else {
              this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
            }
          })


        }
      })
    },

    pro_add_new(){
      var index  = this.processAllList.length
      console.log(index)
      if(index > 4){
        this.$notify({ title: '增加失败', message: '最多只能增加4个流程', type: 'error', duration: 2000 })
        return false
      } else {
        if( index == 0){
          var newobj = {
            title:"一审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 1){
          var newobj = {
            title:"二审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 2){
          var newobj = {
            title:"三审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 3){
          var newobj = {
            title:"四审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 4){
          var newobj = {
            title:"五审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 5){
          var newobj = {
            title:"六审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 6){
          var newobj = {
            title:"七审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 7){
          var newobj = {
            title:"八审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 8){
          var newobj = {
            title:"九审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }
        if( index == 9){
          var newobj = {
            title:"十审",sort:index + 1,id:this.create.temp.id ,process:"审批角色",procRoleId:"",procRoleIdArr:[],procRoleName:"", procUserId:"", procUserIdArr:[], procUserpName:""
          }
        }


        this.processAllList.push(newobj)
      }
    },
    on_close_tap(item,index){
      console.log(item,index)

      var processAllList = this.processAllList


      MessageBox.confirm('是否删除此信息?', {
        confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'
      }).then(() => {

        processAllList.splice(index,1)


        processAllList.forEach(function(i,j){
          if(j >= index){
            console.log(processAllList)
            processAllList[j].sort = j+1

            if(j == 0){
              processAllList[j].title=   "一审"
            }

            if(j == 1){
              processAllList[j].title=   "二审"
            }

            if(j == 2){
              processAllList[j].title=   "三审"
            }

            if(j == 3){
              processAllList[j].title=   "四审"
            }

            if(j == 4){
              processAllList[j].title=   "五审"
            }

            if(j == 5){
              processAllList[j].title=   "六审"
            }

            if(j == 6){
              processAllList[j].title=   "七审"
            }

            if(j == 7){
              processAllList[j].title=   "八审"
            }

            if(j == 8){
              processAllList[j].title=   "九审"
            }

            if(j == 9){
              processAllList[j].title=   "十审"
            }
          }
        })
        this.processAllList = processAllList

      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    // 编辑
    form_see(row) {
      console.log('点击了编辑', row)


      this.create.temp = Object.assign({}, row)
      this.create.temp.id = row.id
      this.create.dialogStatus = 'see'

      this.create.dialogFormVisible = true

      this.create.getProcessListParm.parammaps.id = row.id
      this.getProcessList()
    },
    // 编辑
    form_edit(row) {
      console.log('点击了编辑', row)


      this.create.temp = Object.assign({}, row)
      this.create.temp.id = row.id
      this.create.dialogStatus = 'update'
      this.create.dialogFormVisible = true

      this.create.getProcessListParm.parammaps.id = row.id
      this.getProcessList()
    },

    // 编辑保存
    form_edit_save() {
      console.log("processAllList",this.processAllList)


      this.$refs['temp'].validate(valid => {
        if (valid) {

          var send_data = {
            "common": {"returnmap": "0"},
            "data": [
              {
                "name": "updateApprovalProcess","type": "e",
                "parammaps": this.create.temp
              },
              {
                "name": "delApprovalProcessDetail","type": "e",
                "parammaps": {"id":this.create.temp.id}
              },
              {
                "name": "insertApprovalProcessDetail",
                "resultmaps": {
                      "list": this.processAllList
                },
                  "children": [{
                    "name": "insertApprovalProcessDetail",
                    "type": "e",
                    "parammaps": {
                      "id": "@insertApprovalProcessDetail.id",
                      "sort": "@insertApprovalProcessDetail.sort",
                      "title": "@insertApprovalProcessDetail.title",
                      "process": "@insertApprovalProcessDetail.process",
                        "procRoleId": "@insertApprovalProcessDetail.procRoleId",
                      "procRoleName": "@insertApprovalProcessDetail.procRoleName",
                        "procUserId": "@insertApprovalProcessDetail.procUserId",
                        "procUserName": "@insertApprovalProcessDetail.procUserName"
                    }
                  }]
              },
              {"name": "refreshApprovalProcessDetail","type": "e","parammaps": {"id":this.create.temp.id}}

            ]
           }


          var isEmpty = false

          this.processAllList.forEach(function(item){
            if(item.process == "审批角色"){
              if(item.procRoleId == ""){
                isEmpty = true
                return
              }
            } else {
              if(item.procUserId == ""){
                isEmpty = true
                return
              }
            }
          })
          console.log(isEmpty)
          if (isEmpty) {
            this.$message({ type: 'error', message: '审批角色/用户不可为空', duration: 2000 })
          } else {
            ExecDataByConfig(send_data).then(response => {
              console.log('编辑保存发送参数', send_data)
              if (response.msg !== 'fail') {
                this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
                this.create.dialogFormVisible = false
                this.get_table_data()
              } else {
                this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
              }
            })


          }


        }
      })
    },

    // 表格中的启用
    change_enable(index, row) {
      this.requestParam.name = 'updateUser'
      this.requestParam.parammaps = this.create.temp


      PostDataByName(this.requestParam).then(response => {
        console.log('表格中的启用发送参数', this.requestParam)
        if (response.msg !== 'fail') {
          this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
          this.create.dialogFormVisible = false
          this.get_table_data()
        } else {
          this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
        }
      })


    },


    form_enable(row) {
      MessageBox.confirm('是否启用此流程？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        var send_data =  {
              name: 'UpdateApprovalProcessEnable',
              parammaps: {
                id: row.id,
                enable:1
              }

          }
        PostDataByName(send_data).then(() => {
          this.get_table_data()

          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '启用成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },

    form_dis_enable(row) {
      MessageBox.confirm('是否停用此流程？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        var send_data =  {
              name: 'UpdateApprovalProcessEnable',
              parammaps: {
                id: row.id,
                enable:0
              }

          }
        PostDataByName(send_data).then(() => {
          this.get_table_data()

          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '停用成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },


    // 导出
    form_export(item) {
      if (item == 1) {
        console.log('点击了导出模板')
      } else {
        console.log('点击了导出数据')
      }
    },

    // 导入
    form_inport() {
      console.log('点击了导入')
    }

  }
}
</script>
<style lang="scss" scoped>
.search {
  padding-top: 10px;
  clear: both;
}
.table {
  margin-top: 10px;
}
.box-card{height:240px;margin-bottom: 40px;}

/deep/ .el-input.is-disabled .el-input__inner {color: #000000!important;}
/deep/ .el-textarea.is-disabled .el-textarea__inner {color: #000000!important;}
/deep/ .el-radio__input.is-disabled+span.el-radio__label {color: #000000!important;}
/deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label { color: #000000!important;}

</style>
