<template>
  <!-- 钢产品执行标准维护 -->
  <div class="executiveStandard">
    <div class="box">
      <div class="box-left" :style="leftTree.show ? null : {width: '22px'}">
        <div class="box-left-bt" style="overflow: hidden;">
          <span v-show="leftTree.show">钢产品类型</span>
          <div style="float: right;height: 100%;padding-right: 4px;">
            <span class="el-icon-d-arrow-right" style="cursor: pointer; transition: transform 0.3s ease-out, -webkit-trans;"
            :style="leftTree.show ? { transform: 'rotate(180deg)'} : { transform: 'rotate(0deg)'}"
            @click="leftTree.show = !leftTree.show;"></span>
          </div>
        </div>
        <div class="box-left-tree">
          <el-tree v-show="leftTree.show" :data="leftTree.data.arr" :props="leftTree.defaultProps" v-loading="leftTree.loading">
            <span class="custom-tree-node" :class="{'tree-row-on': filterForm.data.product === data.label}"
              style="width:100%; font-size:12px;" slot-scope="{ node, data }">
              <p style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
                :title="node.label" @click="queryByStandardId(data)" >{{ node.label }}</p>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="box-right" :style="leftTree.show ? null : { 'margin-left': '22px' }">
        <div class="box-top">
          <el-form style="overflow: hidden;" :style="filterForm.show ? null : { height: '0px' }"
            class="box-top-form" size="mini" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="钢产品类型">
                  <el-input clearable v-model="filterForm.data.product"
                    placeholder="钢产品类型" style="width: 100%;" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="钢种">
                  <el-input clearable v-model="filterForm.data.brand"
                    placeholder="钢种" style="width: 95%;" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="表面执行标准">
                  <el-input clearable v-model="filterForm.data.surfaceStandard"
                    placeholder="表面执行标准" style="width: 95%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出厂执行标准">
                  <el-input clearable v-model="filterForm.data.factoryStandard"
                    placeholder="出厂执行标准" style="width: 100%;" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="box-top-gjl">
            <el-button class="button" type="primary" size="mini" icon="el-icon-plus"
              v-privilege="activeMenu + 'ADD'" @click="but_add()" :loading="rightTable.loading" >新增</el-button>
            <el-button class="button" type="primary" size="mini" icon="el-icon-edit-outline"
              v-privilege="activeMenu + 'PUT'" @click="but_edit_plural()" :loading="rightTable.loading" >修改</el-button>
            <el-button class="button" type="danger" size="mini" icon="el-icon-delete"
              v-privilege="activeMenu + 'DELETE'" @click="but_del_plural()" :loading="rightTable.loading" >删除</el-button>
            <div style="float:right; text-align: right;">
                <el-button class="button" type="primary" size="mini" icon="el-icon-search"
                  v-privilege="activeMenu + 'QUERY'" :loading="rightTable.loading" @click="getNodeTreeData()" >查询</el-button>
                <el-button class="button" type="primary" size="mini" icon="el-icon-refresh"
                  v-privilege="activeMenu + 'QUERY'" :loading="rightTable.loading" @click="tableDataCancel();" >重置</el-button>
                <el-button size="mini" :icon="filterForm.show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                  :title="filterForm.show ? '收起搜索区' : '展开搜索区'" @click="filterForm.show = !filterForm.show;
                    $nextTick(() => { singleTableHeight = getRoleHeight($refs['singleTable'].$el) - 45; });"
                >{{ filterForm.show ? '收起' : '展开' }}</el-button>
            </div>
          </div>
        </div>
        <div class="box-bottom">
          <el-form size="mini" ref="dialog_form_arr" label-width="0px" :model="tableFormDataObj">
            <el-table stripe border highlight-current-row id="singleTable" ref="singleTable" style="width: 100%;" size="mini"
              :data="frontEndPageChange" v-loading="rightTable.loading" :height="singleTableHeight"
              @current-change="handleCurrentChange" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40" align="center" fixed="left" ></el-table-column>
                <el-table-column sortable prop="product" label="钢产品类型" min-width="80px" align="center"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-form-item v-if="scope.row.isSelection" :prop="scope.row.id + '.product'" :rules="dialog.rules.isreal">
                      <el-input clearable style="width: 100%;" v-model="tableFormDataObj[scope.row.id].product"></el-input>
                        <template slot="error" slot-scope="scope">
                          <p class="error" :title="scope.error" >{{ scope.error }}</p>
                        </template>
                    </el-form-item>
                    <span v-else>{{scope.row.product}}</span>
                  </template>
                  </el-table-column>
                <el-table-column sortable prop="brand" label="钢种" min-width="80px" align="center"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-form-item v-if="scope.row.isSelection" :prop="scope.row.id + '.brand'" :rules="dialog.rules.isreal">
                      <el-input clearable style="width: 100%;" v-model="tableFormDataObj[scope.row.id].brand"></el-input>
                        <template slot="error" slot-scope="scope">
                          <p class="error" :title="scope.error" >{{ scope.error }}</p>
                        </template>
                    </el-form-item>
                    <span v-else>{{scope.row.brand}}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="isPinZhong" label="是否品种钢" min-width="80px" align="center"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-form-item v-if="scope.row.isSelection" :prop="scope.row.id + '.isPinZhong'" :rules="dialog.rules.isreal">
                        <el-select
                            filterable clearable
                            style="width: 100%;"
                            v-model="tableFormDataObj[scope.row.id].isPinZhong"
                        >
                            <el-option
                                label="是"
                                value="1"
                            ></el-option>
                            <el-option
                                label="否"
                                value="0"
                            ></el-option>
                        </el-select>
                       <template slot="error" slot-scope="scope">
                          <p class="error" :title="scope.error" >{{ scope.error }}</p>
                        </template>
                    </el-form-item>
                    <span v-else>{{ scope.row.isPinZhong === '0' ? '否' :  '是' }}</span>
                  </template>
                </el-table-column>
  <el-table-column sortable prop="surfaceStandard" label="表面执行标准" min-width="100px" align="center"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-form-item v-if="scope.row.isSelection" :prop="scope.row.id + '.surfaceStandard'" >
                      <el-input clearable style="width: 100%;" v-model="tableFormDataObj[scope.row.id].surfaceStandard"></el-input>
                        <template slot="error" slot-scope="scope">
                          <p class="error" :title="scope.error" >{{ scope.error }}</p>
                        </template>
                    </el-form-item>
                    <span v-else>{{scope.row.surfaceStandard}}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="factoryStandard" label="出厂执行标准" min-width="100px" align="center"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-form-item v-if="scope.row.isSelection" :prop="scope.row.id + '.factoryStandard'" >
                      <el-input clearable style="width: 100%;" v-model="tableFormDataObj[scope.row.id].factoryStandard"></el-input>
                        <template slot="error" slot-scope="scope">
                          <p class="error" :title="scope.error" >{{ scope.error }}</p>
                        </template>
                    </el-form-item>
                    <span v-else>{{scope.row.factoryStandard}}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="memo" label="备注" min-width="130px" align="center"
                  :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-form-item v-if="scope.row.isSelection" :prop="scope.row.id + '.memo'" >
                      <el-input clearable style="width: 100%;" v-model="tableFormDataObj[scope.row.id].memo"></el-input>
                        <template slot="error" slot-scope="scope">
                          <p class="error" :title="scope.error" >{{ scope.error }}</p>
                        </template>
                    </el-form-item>
                    <span v-else>{{scope.row.memo}}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="createman" label="创建人" min-width="70px" align="center"
                  :show-overflow-tooltip="true"></el-table-column>
                <el-table-column sortable prop="createtime" label="创建时间" min-width="120px" align="center"
                  max-width="140px" :show-overflow-tooltip="true" ></el-table-column>
                <el-table-column sortable prop="updateman" label="修改人" min-width="70px" align="center"
                  :show-overflow-tooltip="true" ></el-table-column>
                <el-table-column sortable prop="updatetime" label="修改时间" min-width="120px" align="center"
                  max-width="140px" :show-overflow-tooltip="true" ></el-table-column>
            </el-table>
          </el-form>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" style="text-align: right;margin-top: 10px;"
            :page-sizes="[10, 20, 50, 100, 500, 1000]"
            :total="rightTable.total" :page-size="rightTable.pageSize" :current-page.sync="rightTable.pageNum"
            @size-change="tableSizeChange" @current-change="getTableData()" ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :title="'钢产品执行标准 - ' + (dialog.type === 'add' ? '新增' : '修改')" width="600px"
      :visible.sync="dialog.show" :close-on-click-modal="false" :show-close="!rightTable.loading">
      <div>
        <el-form ref="dialog_form" size="mini" label-width="120px"
          :model="dialog.form.data" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="钢产品类型" prop="product" :rules="dialog.rules.isreal">
                <el-input clearable style="width: 100%;" v-model="dialog.form.data.product"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钢种" prop="brand" :rules="dialog.rules.isreal">
                <el-input clearable style="width: 100%;" v-model="dialog.form.data.brand"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="表面执行标准" prop="surfaceStandard" >
                <el-input clearable style="width: 100%;" v-model="dialog.form.data.surfaceStandard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂执行标准" prop="factoryStandard" >
                <el-input clearable style="width: 100%;" v-model="dialog.form.data.factoryStandard"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注" prop="memo" >
                <el-input clearable style="width: 100%;" v-model="dialog.form.data.memo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否品种钢" prop="isPinZhong" >
                  <el-select
                      filterable clearable
                      style="width: 100%;"
                      v-model="dialog.form.data.isPinZhong"
                  >
                      <el-option
                          label="是"
                          value="1"
                      ></el-option>
                      <el-option
                          label="否"
                          value="0"
                      ></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false" :loading="rightTable.loading" >取 消</el-button>
        <el-button type="primary" @click="dataSave()" :loading="rightTable.loading">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { zCheckNumber1 } from '~/utils/validator.js';
import store from '@/store/index.js';
export default {
  name: 'executiveStandard',
  data () {
    return {
      activeMenu: '',
      singleTableHeight: 100,
      tableFormDataObj: {},
      multipleSelection: [],
      tableData: {
          arr: [],
          obj: {}
        },
      leftTree: {
        show: true,
        loading: false,
        data: {
          arr: [],
          obj: {}
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      },
      filterForm: {
        show: true,
        data: {
          brand: '',
          product: '',
          surfaceStandard: '',
          factoryStandard: ''
        }
      },
      rightTable: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        loading: false,
        tableLoading: false,
        tableData: {
          arr: [],
          obj: {}
        }
      },
      dialog: {
        show: false,
        type: '',
        addRow: null,
        form: {
          data: {
            id: null,
            memo: '',
            brand: '',
            product: '',
            surfaceStandard: '',
            factoryStandard: ''
          }
        },
        rules: {isreal: [{ required: true, message: '该项不能为空', trigger: 'change' }]}
      }
    }
  },
  created () {
      this.activeMenu = window.localStorage.getItem('activeMenu');
  },
  mounted () {
    let that = this;
    window.PEDataObj = {
      // 将数据绑定到window上，供main页面使用
      vm: that,
      // tableArr：用于导出成Excel的表格的信息
      tableArr: [{
        name: '',
        id: 'singleTable'
      }]
    };
    that.$nextTick(() => {
      // 立即获取的height有一定偏差，通过setTimeout延迟来解决
      setTimeout(() => {
        that.singleTableHeight = that.getRoleHeight(that.$refs['singleTable'].$el) - 45;
      }, 1);
    });
    // 这里写页面加载需要调用的代码
    that.getNodeTreeData();
  },
  computed: {
    frontEndPageChange () {
      let that = this;
      let Tdata = [];
      let start = (that.rightTable.pageNum - 1) * that.rightTable.pageSize;
      if (start >= that.rightTable.tableData.arr.length) start = 0;
      let end = that.rightTable.pageNum * that.rightTable.pageSize;
      if (end >= that.rightTable.tableData.arr.length) end = that.rightTable.tableData.arr.length;
      // that.rightTable.tableData.arr = that.rightTable.tableData.arr.slice(start, end);
      that.rightTable.total = that.rightTable.tableData.arr.length;
      Tdata = that.rightTable.tableData.arr;
      Tdata = Tdata.filter(data => !that.filterForm.data.product || data.product.toLowerCase()
        .includes(that.filterForm.data.product.toLowerCase()));
      Tdata = Tdata.filter(data => !that.filterForm.data.brand || data.brand.toLowerCase()
        .includes(that.filterForm.data.brand.toLowerCase()));
      Tdata = Tdata.filter(data => (!that.filterForm.data.surfaceStandard || !data.surfaceStandard) || data.surfaceStandard.toLowerCase()
        .includes(that.filterForm.data.surfaceStandard.toLowerCase()));
      Tdata = Tdata.filter(data => (!that.filterForm.data.factoryStandard || !data.factoryStandard) || data.factoryStandard.toLowerCase()
        .includes(that.filterForm.data.factoryStandard.toLowerCase()));
      that.rightTable.total = Tdata.length;
      return Tdata.slice(start, end);
    }
  },
  methods: {
    //  计算树区域高度
    getRoleHeight (dom) {
        return window.innerHeight - dom.offsetTop;
    },
    // 获取钢种类型节点树
    getNodeTreeData () {
        let that = this, parameters = {}, obj = {};
        parameters = {
        }
        let url = 'pass/ems/v1/emsproductsexecutivestandards/getTree/';
        that.leftTree.loading = true;
        that.axios.get(url, {params: parameters})
          .then(function (res) {
            if (res.code === '0') {
              let treeData = that.treeDataUtil1(res.data);
              that.leftTree.data.arr = [{
                id: '',
                label: '所有记录',
                children: treeData,
                data: res.data
              }];
              that.tableData.arr = res.data;
              that.rightTable.tableData.arr = res.data;
            } else {
              that.$message.error(res.message);
            }
            that.leftTree.loading = false;
          }).catch(function () {
            that.leftTree.loading = false;
          });
    },
    // 新增，弹出框显示
    but_add () {
      let that = this;
      if (that.dialog.addRow) {
        for (let key in that.dialog.form.data) {
          if (that.dialog.addRow[key] || that.dialog.addRow[key] === 0) {
            that.dialog.form.data[key] = that.dialog.addRow[key];
          } else {
            that.dialog.form.data[key] = '';
          }
        }
        this.$refs['singleTable'].setCurrentRow();
      } else {
        for (let key in that.dialog.form.data) {
            if (that.filterForm.data[key] || that.filterForm.data[key] === 0) {
                that.dialog.form.data[key] = that.filterForm.data[key];
            } else {
                that.dialog.form.data[key] = '';
            }
        }
      }
      that.dialog.type = 'add';
      that.dialog.show = true;
      setTimeout(() => {
        that.$refs['dialog_form'].clearValidate();
      }, 100);
    },
    // 保存数据
    dataSave () {
      let that = this;
      let SubmitData = {
        memo: that.dialog.form.data.memo,
        isPinZhong: that.dialog.form.data.isPinZhong,
        brand: that.dialog.form.data.brand,
        product: that.dialog.form.data.product,
        surfaceStandard: that.dialog.form.data.surfaceStandard,
        factoryStandard: that.dialog.form.data.factoryStandard
      };
      that.$refs['dialog_form'].validate((valid) => {
        if (valid) {
          if (that.dialog.type === 'add') {
            let foorData = new FormData();
            for (let key in SubmitData) {
              foorData.append(key, SubmitData[key]);
            }
            that.rightTable.loading = true;
            that.leftTree.loading = true;
            that.axios.post('pass/ems/v1/emsproductsexecutivestandards/', foorData, {
              headers: {'Content-Type': 'multipart/form-data'}
              }).then(function (res) {
                  if (res.code === '0') {
                    that.$message({
                      message: '新增成功',
                      type: 'success'
                    });
                    that.getNodeTreeData();
                    that.dialog.show = false;
                  } else {
                      that.$message.error(res.message);
                    }
                  that.leftTree.loading = false;
                  that.rightTable.loading = false;
                }).catch(function () {
                    that.leftTree.loading = false;
                    that.rightTable.loading = false;
                  });
          } else {
            that.rightTable.loading = true;
            that.leftTree.loading = true;
            that.axios.put('pass/ems/v1/emsproductsexecutivestandards/' + SubmitData.id, SubmitData)
              .then(function (res) {
                if (res.code === '0') {
                  that.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  that.getNodeTreeData();
                } else {
                    that.$message.error(res.message);
                }
                that.leftTree.loading = false;
                that.rightTable.loading = false;
              }).catch(function () {
                that.leftTree.loading = false;
                that.rightTable.loading = false;
              });
          }
        }
      });
    },
    // 批量修改
    but_edit_plural () {
      let that = this;
      if (that.multipleSelection.length > 0) {
        that.$refs['dialog_form_arr'].validate((valid) => {
          if (valid) {
            let SubmitData = [];
            for (let key in that.tableFormDataObj) {
              SubmitData.push({
                id: that.tableFormDataObj[key].id,
                memo: that.tableFormDataObj[key].memo,
                isPinZhong: that.tableFormDataObj[key].isPinZhong,
                brand: that.tableFormDataObj[key].brand,
                product: that.tableFormDataObj[key].product,
                createman: that.tableFormDataObj[key].createman,
                createtime: that.tableFormDataObj[key].createtime,
                surfaceStandard: that.tableFormDataObj[key].surfaceStandard,
                factoryStandard: that.tableFormDataObj[key].factoryStandard
              });
            }
            that.rightTable.loading = true;
            that.leftTree.loading = true;
            that.axios.put('pass/ems/v1/emsproductsexecutivestandards/batchupdate', SubmitData)
              .then(function (res) {
                if (res.code === '0') {
                  that.$message({
                      message: '修改成功',
                      type: 'success'
                  });
                  that.getNodeTreeData();
                } else {
                  that.$message.error(res.message);
                }
                that.rightTable.loading = false;
                that.leftTree.loading = false;
              }).catch(function () {
                that.rightTable.loading = false;
                that.leftTree.loading = false;
              });
          }
        });
      }
    },
    // 批量删除
    but_del_plural () {
      let that = this;
      if (that.multipleSelection.length > 0) {
        let ids = [];
        for (let item of that.multipleSelection) {
            ids.push(item.id);
        }
        that.$confirm('是否删除已选数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          state: 'warning'
        }).then(() => {
          that.axios.delete('pass/ems/v1/emsproductsexecutivestandards/' + ids.toString())
            .then(function (res) {
              if (res.code === '0') {
                that.$message({
                  message: '删除成功',
                  type: 'success'
                });
                that.getNodeTreeData();
              } else {
                that.$message.error(res.message);
              }
              that.rightTable.loading = false;
              that.leftTree.loading = false;
            }).catch(function () {
              that.rightTable.loading = false;
              that.leftTree.loading = false;
            });
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        that.$message.error('至少要选择一条数据');
      }
    },
    // 获取表格中的数据
    getTableData (pageNum) {
        let that = this, params = {}, obj = {};
    },
    // 根据树结构获取数据
    queryByStandardId (data) {
      let that = this;
      if (data.label !== '所有记录') {
        that.filterForm.data.product = data.label;
      } else {
        that.filterForm.data.product = '';
      }
      that.rightTable.tableData.arr = data.data;
    },
    // 改变表格显示条数
    tableSizeChange (val) {
        let that = this;
        that.rightTable.pageSize = val;
    },
    // 选择添加时的模板
    handleCurrentChange (row) {
        let that = this;
        that.dialog.addRow = row;
    },
    // 重置搜索
    tableDataCancel () {
      let that = this;
      that.filterForm.data.product = '';
      that.filterForm.data.brand = '';
      that.filterForm.data.surfaceStandard = '';
      that.filterForm.data.factoryStandard = '';
    },
    // 表格中多选按钮的相关方法
    handleSelectionChange (val) {
      let that = this;
      let tableFormDataObj = {};
      for (let item of that.rightTable.tableData.arr) {
        item.isSelection = false;
      }
      for (let item of val) {
        let obj = {};
        let xId = item.id;
        if (that.tableFormDataObj[xId]) {
          tableFormDataObj[xId] = that.tableFormDataObj[xId];
        } else {
          for (let key in item) {
            obj[key] = item[key];
          }
          tableFormDataObj[xId] = obj;
        }
        item.isSelection = true;
      }
      that.tableFormDataObj = JSON.parse(JSON.stringify(tableFormDataObj));
      that.multipleSelection = val;
    },
    // 树结构方法
    treeDataUtil1 (treeData) {
      let that = this, data = [], children = [], name = '', i = 0, g = 0;
      for (let item of treeData) {
        i++;
        if (name === '') {
          name = item.product;
        }
        if (item.product != null && item.product === name) {
          children.push(item);
        } else {
          g++;
          data.push({
            id: g,
            label: name,
            children: [],
            data: children
          });
          children = [];
          name = item.product;
          children.push(item);
          continue;
        }
        if (i < treeData.length) {
          continue;
        }
        g++;
        data.push({
          id: g,
          label: item.product,
          children: [],
          data: children
        });
      }
      return data;
    }
  }
}
</script>

<style lang="less">
.executiveStandard {
  min-width: 700px;
  height: 100%;
  .box {
    height: 100%;
    padding: 15px 15px 0 15px;
    .box-left {
      float: left;
      width: 200px;
      height: calc(100% - 3px);
      overflow: auto;
      .box-left-bt {
        line-height: 35px;
        font-size: 16px;
        border-bottom: 1px solid #ccc;
      }
      .box-left-tree {
        height: calc(100% - 50px);
        overflow: auto;
        padding: 7px 7px 0 0;
          .tree-row-on {
            color: #3279e8;
            font-weight: 600;
          }
      }
    }
    .box-right {
      border-left: 1px solid #ccc;
      margin-left: 200px;
      .box-top {
        .box-top-form {
          padding-left: 7px;
          .el-form-item {
            margin-bottom: 7px;
          }
        }
        .box-top-gjl {
          overflow: hidden;
          padding: 7px 0 7px 7px;
          border-top: 1px solid #ccc;
        }
      }
      .box-bottom {
        padding-left: 7px;
      }
    }
    .el-table .el-table__row {
      height: 35px;
    }
    .el-table__body .el-form-item--mini.el-form-item {
      margin: 0px;
      .error {
        overflow: hidden;
        color: #f56c6c;
        font-size: 12px;
        line-height: 1;
      }
    }
  }
  .color_no {
    color: #7a7a7a;
  }
  .color_yes {
    color: #1a9f17;
  }
}
</style>
