asset-analysis-platform/ruoyi-ui/src/views/asset/information/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" class="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
      <el-form-item label="资产名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入资产名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="资产条码" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入资产条码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="资产编号" prop="number">
        <el-input v-model="queryParams.number" placeholder="请输入资产编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="资产分类" prop="categoryNumber">
        <el-select v-model="queryParams.categoryNumber" clearable placeholder="请选择资产分类">
          <el-option v-for="item in categoryList" :key="item.number" :label="item.name" :value="item.number"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在位置" prop="locationNumber">
        <treeselect v-model="queryParams.locationNumber" :options="locationList" :normalizer="tenantIdnormalizer" placeholder="选择位置" />
      </el-form-item> 
      <el-form-item label="使用部门" prop="userDepartment">
        <div style="display: inline-block; width: 183px">
          <treeselect v-model="queryParams.userDepartment" :options="deptOptions" :normalizer="normalizer" placeholder="选择使用部门" />
        </div>
      </el-form-item>
      <el-form-item label="EPC" prop="epc" v-if="isExist('epc')">
        <el-input
          v-model="queryParams.epc"
          placeholder="请输入EPC"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开始使用日期" prop="startDate" v-if="isExist('开始使用日期')">
        <el-input
          v-model="queryParams.startDate"
          placeholder="请输入开始使用日期"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> 
      <el-form-item v-if="isExist('责任人')" label="责任人" prop="responsiblePerson">
        <el-input v-model="queryParams.responsiblePerson" placeholder="请输入责任人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('所属公司')"  label="所属公司" prop="corporation">
        <div style="display: inline-block; width: 183px">
          <treeselect v-model="queryParams.corporation" :options="deptOptions" :normalizer="normalizer" placeholder="选择所属公司" />
        </div>
      </el-form-item>
      <el-form-item v-if="isExist('管理部门')"  label="管理部门" prop="department">
        <div style="display: inline-block; width: 183px">
          <treeselect v-model="queryParams.department" :options="deptOptions" :normalizer="normalizer" placeholder="选择管理部门" />
        </div>
      </el-form-item>
      <el-form-item v-if="isExist('规格型号')" label="规格型号" prop="specificationsModel">
        <el-input v-model="queryParams.specificationsModel" placeholder="请输入规格型号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('ABC分类')" label="ABC分类" prop="abcCategory">
        <el-input v-model="queryParams.abcCategory" placeholder="请输入ABC分类" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('资产性质')" label="资产性质" prop="property">
        <el-select v-model="queryParams.property" placeholder="请选择资产性质" clearable>
          <el-option v-for="dict in dict.type.sys_asset_property" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isExist('管理状态')" label="管理状态" prop="manageStatus">
        <el-select v-model="queryParams.manageStatus" placeholder="请选择管理状态" clearable>
          <el-option v-for="dict in dict.type.sys_manger_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isExist('入账时间')" label="入账时间" prop="paymentReceivingTime">
        <el-date-picker clearable v-model="queryParams.paymentReceivingTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择入账时间"> </el-date-picker>
      </el-form-item>
      <el-form-item v-if="isExist('购置日期')" label="购置日期" prop="purchaseDate">
        <el-date-picker clearable v-model="queryParams.purchaseDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择购置日期"> </el-date-picker>
      </el-form-item>
      <el-form-item v-if="isExist('启用日期')" label="启用日期" prop="commissioningDate">
        <el-date-picker clearable v-model="queryParams.commissioningDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择启用日期"> </el-date-picker>
      </el-form-item>
      <el-form-item v-if="isExist('使用年限')" label="使用年限" prop="durableYears">
        <el-input v-model="queryParams.durableYears" placeholder="请输入使用年限" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('原值')" label="原值" prop="originalValue">
        <el-input v-model="queryParams.originalValue" placeholder="请输入原值" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('净值')" label="净值" prop="netValue">
        <el-input v-model="queryParams.netValue" placeholder="请输入净值" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('残值')" label="残值" prop="residualValue">
        <el-input v-model="queryParams.residualValue" placeholder="请输入残值" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('折旧方式')" label="折旧方式" prop="depreciationMethod">
        <el-input v-model="queryParams.depreciationMethod" placeholder="请输入折旧方式" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('累计折旧')" label="累计折旧" prop="accumulatedDepreciation">
        <el-input v-model="queryParams.accumulatedDepreciation" placeholder="请输入累计折旧" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('最近折旧日期')" label="最近折旧日期" prop="lastDepreciationDate">
        <el-date-picker clearable v-model="queryParams.lastDepreciationDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择最近折旧日期"> </el-date-picker>
      </el-form-item>
      <el-form-item v-if="isExist('合同编号')" label="合同编号" prop="contractNumber">
        <el-input v-model="queryParams.contractNumber" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('出厂编号')" label="出厂编号" prop="factoryNumber">
        <el-input v-model="queryParams.factoryNumber" placeholder="请输入出厂编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('制造商')" label="制造商" prop="manufacturer">
        <el-input v-model="queryParams.manufacturer" placeholder="请输入制造商" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('供应商')" label="供应商" prop="supplier">
        <el-input v-model="queryParams.supplier" placeholder="请输入供应商" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('维保到期日期')" label="维保到期日期" prop="maintenanceDate">
        <el-date-picker clearable v-model="queryParams.maintenanceDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择维保到期日期"> </el-date-picker>
      </el-form-item>
      <el-form-item v-if="isExist('维修电话')" label="维修电话" prop="maintenanceTel">
        <el-input v-model="queryParams.maintenanceTel" placeholder="请输入维修电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('维修人员')" label="维修人员" prop="maintenanceUser">
        <el-input v-model="queryParams.maintenanceUser" placeholder="请输入维修人员" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="isExist('记录状态')" label="记录状态" prop="recordStatus">
        <el-select v-model="queryParams.recordStatus" placeholder="请选择记录状态" clearable>
          <el-option v-for="dict in dict.type.asset_record_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isExist('是否白名单')" label="是否白名单" prop="isWhitelist">
        <el-select v-model="queryParams.isWhitelist" placeholder="请选择是否白名单" clearable>
          <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="数量" prop="quantity">
        <el-input
          v-model="queryParams.quantity"
          placeholder="请输入数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计量单位" prop="units">
        <el-input
          v-model="queryParams.units"
          placeholder="请输入计量单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="epc补充长度" prop="epcReplenishLength">
        <el-input
          v-model="queryParams.epcReplenishLength"
          placeholder="请输入EPC补充长度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="预计使用期限" prop="lifeExpectancy">
        <el-input
          v-model="queryParams.lifeExpectancy"
          placeholder="请输入预计使用期限"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预计使用期限单位" prop="lifeUnits">
        <el-input
          v-model="queryParams.lifeUnits"
          placeholder="请输入预计使用期限单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="预留字段j" prop="reservedColumnJ">
        <el-input
          v-model="queryParams.reservedColumnJ"
          placeholder="请输入预留字段j"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item style="padding-left: 30px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['asset:information:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['asset:information:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['asset:information:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['asset:information:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleAllExport" v-hasPermi="['asset:information:export']">全部导出</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['asset:information:import']">导入</el-button>
        <!-- v-hasPermi="['collegeManage:studentBase:import']" -->
      </el-col>
      <el-col :span="1.5">
        <el-dropdown @command="handleCommand" split-button type="warning" trigger="click" placement="bottom-start" size="mini" v-hasPermi="['asset:information:export']">
          <span class="el-dropdown-link" @click="handleExport">
            <i class="el-icon-download"></i>&nbsp;导出
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="batch"><span style="padding:8px;font-size: 13px;letter-spacing: 2px;">批量导出</span></el-dropdown-item>
            <el-dropdown-item command="all" divided><span style="padding:8px;font-size: 13px;letter-spacing: 2px;">全部导出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-printer" size="mini" :disabled="multiple" @click="handPrinter" v-hasPermi="['asset:information:query']">打印标签</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-menu" size="mini" @click="handleDIY" v-hasPermi="['asset:information:query']">自定义字段</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="informationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="编号" align="center" prop="id" /> -->
      <el-table-column label="资产编号" align="center" prop="number" />
      <el-table-column label="资产名称" align="center" prop="name" />
      <el-table-column label="EPC" align="center" prop="epc" v-if="isExist('epc')" width="180">
        <template slot-scope="scope">
          <div>{{scope.row.epc}}<br/>&lceil;补位:{{scope.row.epcReplenishLength}}&rfloor;</div>
        </template>
      </el-table-column>
      <el-table-column label="资产条码" v-if="isExist('资产条码')" align="center" prop="code" />
      <el-table-column label="照片" align="center" prop="imageUrl" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.imageUrl" :width="50" :height="50" v-show="scope.row.imageUrl === '' || scope.row.imageUrl == null ? false : true" />
        </template>
      </el-table-column>
      <el-table-column label="资产分类" align="center" prop="categoryName">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.categoryNumber != null ? categoryName(scope.row.categoryNumber) : '' }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="使用部门" align="center" prop="userDepartmentName">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.userDepartment != null ? companyName(scope.row.userDepartment) : '' }}</span>
        </template> -->
      </el-table-column>
      <el-table-column v-if="isExist('管理部门')" label="管理部门" align="center" prop="departmentName">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.department != null ? companyName(scope.row.department) : '' }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="所在位置" align="center" prop="locationName" width="120">
        <!-- <template slot-scope="scope">
          <span>{{ locationName(scope.row.locationNumber) }}</span>
        </template> -->
      </el-table-column>
      <el-table-column v-if="isExist('所属公司')" label="所属公司" align="center" prop="corporationName">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.corporation != null ? companyName(scope.row.corporation) : '' }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="数量" align="center" prop="quantity" />
      <el-table-column label="计量" align="center" prop="units" />
      <el-table-column v-if="isExist('入账时间')" label="入账时间" align="center" prop="paymentReceivingTime" />
      <el-table-column v-if="isExist('备注')" label="备注" align="center" prop="remark" />
      <el-table-column v-if="isExist('管理状态')" label="管理状态" align="center" prop="manageStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_manger_status" :value="scope.row.manageStatus" />
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('资产性质')" label="资产性质" align="center" prop="property">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_asset_property" :value="scope.row.property" />
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('规格型号')" label="规格型号" align="center" prop="specificationsModel" />
      <el-table-column v-if="isExist('ABC分类')" label="ABC分类" align="center" prop="abcCategory" />
      <el-table-column v-if="isExist('责任人')" label="责任人" align="center" prop="responsiblePerson" />
      <el-table-column v-if="isExist('购置日期')" label="购置日期" align="center" prop="purchaseDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.purchaseDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('启用日期')" label="启用日期" align="center" prop="commissioningDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.commissioningDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('原值')" label="原值" align="center" prop="originalValue" />
      <el-table-column v-if="isExist('使用年限')" label="使用年限" align="center" prop="durableYears" />
      <el-table-column v-if="isExist('净值')" label="净值" align="center" prop="netValue" />
      <el-table-column v-if="isExist('残值')" label="残值" align="center" prop="residualValue" />
      <el-table-column v-if="isExist('累计折旧')" label="累计折旧" align="center" prop="accumulatedDepreciation" />
      <el-table-column v-if="isExist('最近折旧日期')" label="最近折旧日期" align="center" prop="lastDepreciationDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastDepreciationDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('折旧方式')" label="折旧方式" align="center" prop="depreciationMethod" />
      <el-table-column v-if="isExist('合同编号')" label="合同编号" align="center" prop="contractNumber" />
      <el-table-column v-if="isExist('出厂编号')" label="出厂编号" align="center" prop="factoryNumber" />
      <el-table-column v-if="isExist('制造商')" label="制造商" align="center" prop="manufacturer" />
      <el-table-column v-if="isExist('供应商')" label="供应商" align="center" prop="supplier" />
      <el-table-column v-if="isExist('资产用途')" label="资产用途" align="center" prop="purpose" />
      <el-table-column v-if="isExist('维保到期日期')" label="维保到期日期" align="center" prop="maintenanceDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.maintenanceDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('维修电话')" label="维修电话" align="center" prop="maintenanceTel" />
      <el-table-column v-if="isExist('维修人员')" label="维修人员" align="center" prop="maintenanceUser" />
      <el-table-column v-if="isExist('记录状态')" label="记录状态" align="center" prop="recordStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.asset_record_status" :value="scope.row.recordStatus" />
        </template>
      </el-table-column>
      <el-table-column v-if="isExist('是否白名单')" label="是否白名单" align="center" prop="isWhitelist">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isWhitelist" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="epc补充长度" align="center" prop="epcReplenishLength"/> -->
      <el-table-column v-if="isExist('开始使用日期')" label="开始使用日期" align="center" prop="startDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预计使用期限" v-if="isExist('预计使用期限')" align="center" prop="lifeExpectancy" />
      <el-table-column label="预计使用期限单位" v-if="isExist('预计使用期限单位')" align="center" prop="lifeUnits" />
      <!-- <el-table-column label="预留字段j" align="center" prop="reservedColumnJ" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-printer" @click="handPrinter(scope.row)" v-hasPermi="['asset:information:query']">打印</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['asset:information:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['asset:information:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改资产信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="资产编号" prop="number">
              <el-input v-model="form.number" placeholder="请输入资产编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入资产名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产分类" prop="categoryNumber">
              <el-select v-model="form.categoryNumber" placeholder="请选择资产分类">
                <el-option v-for="item in categoryList" :key="item.number" :label="item.name" :value="item.number"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="所在位置" prop="locationNumber">
              <treeselect v-model="form.locationNumber" :options="locationList" :normalizer="tenantIdnormalizer" placeholder="选择位置" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量" prop="quantity">
              <el-input v-model="form.quantity" placeholder="请输入数量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量" prop="units">
              <el-input v-model="form.units" placeholder="请输入计量单位" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="使用部门" prop="userDepartment">
              <treeselect v-model="form.userDepartment" :options="deptOptions" :normalizer="normalizer" placeholder="选择使用部门" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="照片">
              <image-upload-temp v-model="form.imageUrl" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('原值')" label="原值" prop="originalValue">
              <el-input v-model="form.originalValue" placeholder="请输入原值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('净值')" label="净值" prop="netValue">
              <el-input v-model="form.netValue" placeholder="请输入净值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('残值')" label="残值" prop="residualValue">
              <el-input v-model="form.residualValue" placeholder="请输入残值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('规格型号')" label="规格型号" prop="specificationsModel">
              <el-input v-model="form.specificationsModel" placeholder="请输入规格型号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('资产用途')" label="资产用途" prop="purpose">
              <el-input v-model="form.purpose" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('资产性质')" label="资产性质" prop="property">
              <el-select v-model="form.property" placeholder="请选择资产性质" clearable>
                <el-option v-for="dict in dict.type.sys_asset_property" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('所属公司')" label="所属公司" prop="corporation">
              <treeselect v-model="form.corporation" :options="deptOptions" :normalizer="normalizer" placeholder="选择所属公司" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('管理部门')" label="管理部门" prop="department">
              <treeselect v-model="form.department" :options="deptOptions" :normalizer="normalizer" placeholder="选择管理部门" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('责任人')" label="责任人" prop="responsiblePerson">
              <el-input v-model="form.responsiblePerson" placeholder="请输入责任人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('开始使用日期')" label="开始使用日期" prop="startDate">
              <el-date-picker clearable v-model="form.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始使用日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('预计使用期限')" label="预计使用期限" prop="lifeExpectancy">
              <el-input v-model="form.lifeExpectancy" placeholder="请输入预计使用期限" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('预计使用期限')" label="预计使用期限单位" prop="lifeUnits">
              <el-input v-model="form.lifeUnits" placeholder="请输入预计使用期限单位" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('ABC分类')" label="ABC分类" prop="abcCategory">
              <el-input v-model="form.abcCategory" placeholder="请输入ABC分类" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('启用日期')" label="启用日期" prop="commissioningDate">
              <el-date-picker clearable v-model="form.commissioningDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择启用日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('入账时间')" label="入账时间" prop="paymentReceivingTime">
              <el-date-picker clearable v-model="form.paymentReceivingTime" type="date" value-format="yyyy-MM-dd" placeholder="请输入入账时间"> </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('折旧方式')" label="折旧方式" prop="depreciationMethod">
              <el-input v-model="form.depreciationMethod" placeholder="请输入折旧方式" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('累计折旧')" label="累计折旧" prop="accumulatedDepreciation">
              <el-input v-model="form.accumulatedDepreciation" placeholder="请输入累计折旧" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('最近折旧日期')" label="最近折旧日期" prop="lastDepreciationDate">
              <el-date-picker clearable v-model="form.lastDepreciationDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择最近折旧日期"> </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('使用年限')" label="使用年限" prop="durableYears">
              <el-input v-model="form.durableYears" placeholder="请输入使用年限" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('购置日期')" label="购置日期" prop="purchaseDate">
              <el-date-picker clearable v-model="form.purchaseDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择购置日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('记录状态')" label="记录状态" prop="recordStatus">
              <el-select v-model="form.recordStatus" placeholder="请选择记录状态">
                <el-option v-for="dict in dict.type.asset_record_status" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('维保到期日期')" label="维保到期日期" prop="maintenanceDate">
              <el-date-picker clearable v-model="form.maintenanceDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择维保到期日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('维修电话')" label="维修电话" prop="maintenanceTel">
              <el-input v-model="form.maintenanceTel" placeholder="请输入维修电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('维修人员')" label="维修人员" prop="maintenanceUser">
              <el-input v-model="form.maintenanceUser" placeholder="请输入维修人员" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item v-if="isExist('制造商')" label="制造商" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入制造商" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('供应商')" label="供应商" prop="supplier">
              <el-input v-model="form.supplier" placeholder="请输入供应商" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('出厂编号')" label="出厂编号" prop="factoryNumber">
              <el-input v-model="form.factoryNumber" placeholder="请输入出厂编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16">
            <el-form-item v-if="isExist('合同编号')" label="合同编号" prop="contractNumber">
              <el-input v-model="form.contractNumber" placeholder="请输入合同编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="isExist('是否白名单')" label="是否白名单" prop="isWhitelist">
              <el-select v-model="form.isWhitelist" placeholder="请输入是否白名单">
                <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item v-if="isExist('备注')" label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item  label="资产条码" prop="code">
          <el-input v-model="form.code" placeholder="请输入资产条码" />
        </el-form-item> -->
        <!-- <el-form-item label="epc" prop="epc">
          <el-input v-model="form.epc" placeholder="请输入EPC" />
        </el-form-item>
        <el-form-item label="epc补充长度" prop="epcReplenishLength">
          <el-input v-model="form.epcReplenishLength" placeholder="请输入EPC补充长度" />
        </el-form-item> -->
        <!-- <el-form-item label="预留字段j" prop="reservedColumnJ">
          <el-input v-model="form.reservedColumnJ" placeholder="请输入预留字段j" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="diyOpen" width="700px" append-to-body>
      <template>
        <div>
          <el-checkbox-group v-model="checkList" mini>
            <el-checkbox label="epc" border></el-checkbox>
            <el-checkbox label="资产条码" border></el-checkbox>
            <el-checkbox label="资产性质" border></el-checkbox>
            <el-checkbox label="规格型号" border></el-checkbox>
            <el-checkbox label="ABC分类" border></el-checkbox>
            <el-checkbox label="责任人" border></el-checkbox>
            <el-checkbox label="购置日期" border></el-checkbox>
            <el-checkbox label="启用日期" border></el-checkbox>
            <el-checkbox label="使用年限" border></el-checkbox>
            <el-checkbox label="原值" border></el-checkbox>
            <el-checkbox label="净值" border></el-checkbox>
            <el-checkbox label="残值" border></el-checkbox>
            <el-checkbox label="折旧方式" border></el-checkbox>
            <el-checkbox label="累计折旧" border></el-checkbox>
            <el-checkbox label="最近折旧日期" border></el-checkbox>
            <el-checkbox label="合同编号" border></el-checkbox>
            <el-checkbox label="出厂编号" border></el-checkbox>
            <el-checkbox label="制造商" border></el-checkbox>
            <el-checkbox label="供应商" border></el-checkbox>
            <el-checkbox label="维保到期日期" border></el-checkbox>
            <el-checkbox label="维修电话" border></el-checkbox>
            <el-checkbox label="维修人员" border></el-checkbox>
            <el-checkbox label="入账时间" border></el-checkbox>
            <el-checkbox label="开始使用日期" border></el-checkbox>
            <el-checkbox label="预计使用期限" border></el-checkbox>
            <el-checkbox label="预计使用期限单位" border></el-checkbox>
            <el-checkbox label="所属公司" border></el-checkbox>
            <el-checkbox label="管理部门" border></el-checkbox>
            <el-checkbox label="记录状态" border></el-checkbox>
            <el-checkbox label="是否白名单" border></el-checkbox>
            <el-checkbox label="管理状态" border></el-checkbox>
            <el-checkbox label="备注" border></el-checkbox>
          </el-checkbox-group>
        </div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDIY">确 定</el-button>
        <el-button @click="cancelDIY">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据</div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="标签打印" :visible.sync="isPrinter" width="400px" append-to-body>
      <el-form ref="printForm" :model="printForm" :rules="printRules" label-width="80px">
        <el-form-item label="资产编号" prop="ids">
          {{ printForm.ids }}
        </el-form-item>
        <el-form-item label="标签编码" prop="labelCode">
          <el-select v-model="printForm.labelCode" placeholder="请选择标签编码">
            <el-option v-for="item in labelCodes" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmitPrint">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInformation, getInformation, delInformation, addInformation, updateInformation, setDiy, getDiy, printLabel } from '@/api/asset/information'
import { listCategory } from '@/api/asset/category'
import { treeSelect } from '@/api/asset/location'
import ImageUploadTemp from '@/components/ImageUploadTemp'
import { listDept } from '@/api/system/dept'
import { select } from '@/api/label/labelModel'
import Treeselect from '@riophae/vue-treeselect'
import { getToken } from '@/utils/auth'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'Information',
  dicts: ['asset_record_status', 'sys_yes_no', 'sys_manger_status', 'sys_asset_property'],
  components: {
    ImageUploadTemp,
    Treeselect,
  },
  computed: {
    isExist() {
      return (label) => {
        if (!this.checkList.length) {
          return false
        }
        return this.checkList.some((item) => item === label)
      }
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      arr: [],
      // 所属位置表格数据
      locationList: [],
      // 资产分类表格数据
      categoryList: [],
      // 资产信息表格数据
      informationList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      //字段自定义弹出层
      diyOpen: false,
      //自定义字段列表
      checkList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        number: null,
        imageUrl: null,
        categoryNumber: null,
        specificationsModel: null,
        abcCategory: null,
        manageStatus: null,
        userDepartment: null,
        department: null,
        responsiblePerson: null,
        locationNumber: null,
        property: null,
        purchaseDate: null,
        commissioningDate: null,
        originalValue: null,
        durableYears: null,
        netValue: null,
        residualValue: null,
        accumulatedDepreciation: null,
        lastDepreciationDate: null,
        depreciationMethod: null,
        contractNumber: null,
        factoryNumber: null,
        manufacturer: null,
        supplier: null,
        purpose: null,
        maintenanceDate: null,
        maintenanceTel: null,
        maintenanceUser: null,
        corporation: null,
        recordStatus: null,
        isWhitelist: null,
        quantity: null,
        units: null,
        paymentReceivingTime: null,
        epc: null,
        epcReplenishLength: null,
        lifeExpectancy: null,
        lifeUnits: null,
        startDate: null,
        reservedColumnJ: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        number: [{ required: true, message: '资产编号不能为空', trigger: 'blur' }],
        specificationsModel: [{ required: true, message: '规格型号不能为空', trigger: 'blur' }],
        manageStatus: [{ required: true, message: '管理状态不能为空', trigger: 'change' }],
        recordStatus: [{ required: true, message: '记录状态不能为空', trigger: 'change' }],
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 1,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/asset/information/importData', // todo
      },
      labelCodes: [
        {
          label: '',
          value: '',
        },
      ],
      printForm: {
        ids: null,
        labelCode: null,
      },
      printRules: {
        ids: [{ required: true, message: '资产编码不能为空', trigger: 'blur' }],
        labelCode: [{ required: true, message: '标签编码不能为空', trigger: 'change' }],
      },
      isPrinter: false,
    }
  },
  created() {
    select().then((res) => {
      this.labelCodes = res.data
    })
    this.getList()
  },
  methods: {
    /** 查询资产信息列表 */
    getList() {
      this.loading = true
      getDiy().then((response) => {
        this.checkList = response.data
      })
      listDept().then((response) => {
        this.deptOptions = this.handleTree(response.data, 'deptId')
        this.arr = response.data
      })
      listCategory().then((response) => {
        this.categoryList = response.rows
      })
      treeSelect().then((response) => {
        this.locationList = response.data
      })
      listInformation(this.queryParams).then((response) => {
        this.informationList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      }
    },
    tenantIdnormalizer(node) {
      return {
        id: node.number,
        label: node.label,
        children: node.children,
      }
    },
    //获取公司名
    // companyName(val) {
    //   let num = parseInt(val)
    //   let arr2 = this.arr.filter((item) => item.deptId === num)
    //   return arr2[0].deptName
    // },
    //获取资产分类名
    // categoryName(val) {
    //   //let num = parseInt(val)
    //   let arr2 = this.categoryList.filter((item) => item.number === val)
    //   return arr2[0].name
    // },
    //获取所在位置名
    // locationName(number) {
    //   let name = '未知'
    //   for (let item of this.locationList) {
    //     if (item.number === number) {
    //       name = item.label
    //       break
    //     }
    //     if (item.children) {
    //       let label = this.findLocation(number, item.children)
    //       if (label != null) {
    //         name = label
    //         break
    //       }
    //     }
    //   }
    //   return name
    // },
    findLocation(number, children) {
      let name = null
      for (let item of children) {
        if (item.number === number) {
          name = item.label
          break
        }
        if (item.children) {
          let label = this.findLocation(number, item.children)
          if (label != null) {
            name = label
            break
          }
        }
      }
      return name
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.isPrinter = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        code: null,
        name: null,
        number: null,
        imageUrl: null,
        categoryNumber: null,
        specificationsModel: null,
        abcCategory: null,
        manageStatus: null,
        userDepartment: null,
        department: null,
        responsiblePerson: null,
        locationNumber: null,
        property: null,
        purchaseDate: null,
        commissioningDate: null,
        originalValue: null,
        durableYears: null,
        netValue: null,
        residualValue: null,
        accumulatedDepreciation: null,
        lastDepreciationDate: null,
        depreciationMethod: null,
        contractNumber: null,
        factoryNumber: null,
        manufacturer: null,
        supplier: null,
        purpose: null,
        maintenanceDate: null,
        maintenanceTel: null,
        maintenanceUser: null,
        corporation: null,
        recordStatus: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isWhitelist: null,
        quantity: null,
        units: null,
        paymentReceivingTime: null,
        epc: null,
        epcReplenishLength: null,
        lifeExpectancy: null,
        lifeUnits: null,
        startDate: null,
        reservedColumnJ: null,
      }
      this.printForm = {
        ids: null,
        labelCode: null,
      }
      this.resetForm('form')
      this.resetForm('printForm')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      if (row != undefined) {
        this.form.parentId = row.deptId
      }
      this.open = true
      this.title = '添加资产信息'
      listDept().then((response) => {
        this.deptOptions = this.handleTree(response.data, 'deptId')
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getInformation(id).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改资产信息'
      })
    },
    /** 标签打印操作 */
    handPrinter(row) {
      const ids = row.id || this.ids

      if (Object.prototype.toString.call(ids) === '[object Array]') {
        this.printForm.ids = ids
      } else {
        this.printForm.ids = [ids]
      }
      this.isPrinter = true
    },
    onSubmitPrint() {
      this.$refs.printForm.validate((valid) => {
        if (valid) {
          printLabel(this.printForm).then((res) => {
            this.$modal.msgSuccess('操作成功，等待打印...')
            this.cancel()
          })
        } else {
          return false
        }
      })

      printLabel(this.printForm)
    },
    /** 自定义字段按钮 */
    handleDIY() {
      this.diyOpen = true
      this.title = '自定义字段'
    },
    submitDIY() {
      setDiy(this.checkList).then((response) => {
        this.diyOpen = false
        this.$modal.msgSuccess('修改成功')
      })
    },
    cancelDIY() {
      this.diyOpen = false
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateInformation(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addInformation(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '资产信息导入' // todo
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/asset/information/importTemplate', {}, `stu_base_template_${new Date().getTime()}.xlsx`) // todo
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal
        .confirm('是否确认删除资产信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delInformation(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'asset/information/export',
        {
          ...this.queryParams,
        },
        `information_${new Date().getTime()}.xlsx`
      )
    },
    handleAllExport() {
      this.download(
        'asset/information/allExport',
        {
        },
        `information_${new Date().getTime()}.xlsx`
      )
    },
    handleCommand(command) {
      if (command === 'batch') {
        this.handleExport()
      }
      if (command === 'all') {
        this.handleAllExport()
      }
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .el-checkbox-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .el-checkbox {
    flex-basis: 25%;
    margin-bottom: 10px; /* 调整间距 */

    &:nth-child(1) {
      margin-left: 10px;
    }
  }
}
/deep/ .vue-treeselect {
  display: inline-block;
}
.queryForm {
  /deep/ .vue-treeselect {
    width: 205px;
    height: 32px;
  }
}
</style>