• 树结构数据在table中回显 treeselect disabled

    1.       <el-table-column label="产业认定" align="center" prop="industryIdentification">
    2.         <template slot-scope="scope">
    3.           <treeselect
    4.             v-if="scope.row.industryIdentification"
    5.             v-model="scope.row.industryIdentification"
    6.             :options="industrialDictOptions"
    7.             :normalizer="normalizer"
    8.             disabled
    9.           />
    10.         </template>
    11.       </el-table-column>

    样式:  -- 注意  class需要加在table上面  

    1. <style scoped lang="scss">
    2. .tableCell ::v-deep .vue-treeselect__control-arrow-container {
    3.   display: none !important;
    4. }
    5. .tableCell ::v-deep .vue-treeselect__single-value {
    6.   color: #606266 !important;
    7. }
    8. .tableCell ::v-deep .vue-treeselect--disabled .vue-treeselect__control {
    9.   background-color: transparent;
    10. }
    11.  
    12. .tableCell ::v-deep .vue-treeselect__control {
    13.   border: 0px;
    14. }
    15. style>

    完整代码:

    1. <template>
    2.   <div class="app-container">
    3.     <el-form
    4.       :model="queryParams"
    5.       ref="queryForm"
    6.       size="small"
    7.       :inline="true"
    8.       v-show="showSearch"
    9.       label-width="68px"
    10.     >
    11.       <el-form-item label="企业标签" prop="tags">
    12.         <el-input
    13.           v-model="queryParams.tags"
    14.           placeholder="请输入企业标签"
    15.           clearable
    16.           @keyup.enter.native="handleQuery"
    17.         />
    18.       </el-form-item>
    19.       <el-form-item label="产业认定" prop="industryIdentification">
    20.         <treeselect
    21.           style="width:215px"
    22.           v-model="queryParams.industryIdentification"
    23.           :options="industrialDictOptions"
    24.           :normalizer="normalizer"
    25.           placeholder="请选择产业认定"
    26.         />
    27.       </el-form-item>
    28.       <el-form-item label="注册地址" prop="regLocation">
    29.         <el-input
    30.           v-model="queryParams.regLocation"
    31.           placeholder="请输入注册地址"
    32.           clearable
    33.           @keyup.enter.native="handleQuery"
    34.         />
    35.       </el-form-item>
    36.       <el-form-item label="经营地址" prop="businessLocation">
    37.         <el-input
    38.           v-model="queryParams.businessLocation"
    39.           placeholder="请输入经营地址"
    40.           clearable
    41.           @keyup.enter.native="handleQuery"
    42.         />
    43.       </el-form-item>
    44.       <el-form-item label="楼宇" prop="buildingInformation">
    45.         <el-select v-model="queryParams.buildingInformation" placeholder="楼宇" clearable>
    46.           <el-option
    47.             v-for="dict in dict.type.building_information"
    48.             :key="dict.value"
    49.             :label="dict.label"
    50.             :value="dict.value"
    51.           />
    52.         </el-select>
    53.       </el-form-item>
    54.       <el-form-item label="企业名" prop="name">
    55.         <el-input
    56.           v-model="queryParams.name"
    57.           placeholder="请输入企业名"
    58.           clearable
    59.           @keyup.enter.native="handleQuery"
    60.         />
    61.       </el-form-item>
    62.       <el-form-item>
    63.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
    64.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    65.       </el-form-item>
    66.     </el-form>
    67.  
    68.     <el-row :gutter="10" class="mb8">
    69.       <el-col :span="1.5">
    70.         <el-button
    71.           type="primary"
    72.           plain
    73.           icon="el-icon-plus"
    74.           size="mini"
    75.           @click="handleAdd"
    76.           v-hasPermi="['system:company:add']"
    77.         >新增</el-button>
    78.       </el-col>
    79.       <el-col :span="1.5">
    80.         <el-button
    81.           type="success"
    82.           plain
    83.           icon="el-icon-edit"
    84.           size="mini"
    85.           :disabled="single"
    86.           @click="handleUpdate"
    87.           v-hasPermi="['system:company:edit']"
    88.         >修改</el-button>
    89.       </el-col>
    90.       <el-col :span="1.5">
    91.         <el-button
    92.           type="danger"
    93.           plain
    94.           icon="el-icon-delete"
    95.           size="mini"
    96.           :disabled="multiple"
    97.           @click="handleDelete"
    98.           v-hasPermi="['system:company:remove']"
    99.         >删除</el-button>
    100.       </el-col>
    101.       <el-col :span="1.5">
    102.         <el-button
    103.           type="warning"
    104.           plain
    105.           icon="el-icon-download"
    106.           size="mini"
    107.           @click="handleExport"
    108.           v-hasPermi="['system:company:export']"
    109.         >导出</el-button>
    110.       </el-col>
    111.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    112.     </el-row>
    113.  
    114.     <el-table
    115.       class="tableCell"
    116.       v-loading="loading"
    117.       :data="companyList"
    118.       @selection-change="handleSelectionChange"
    119.     >
    120.       <el-table-column type="selection" width="55" align="center" />
    121.       <el-table-column label="企业名" align="center" prop="name" />
    122.       <el-table-column label="法⼈" align="center" prop="legalPersonName" />
    123.       <el-table-column label="注册地址" align="center" prop="regLocation" />
    124.       <el-table-column label="经营地址" align="center" prop="businessLocation" />
    125.       <el-table-column label="企业状态" align="center" prop="regStatus" />
    126.       <el-table-column label="产业认定" align="center" prop="industryIdentification">
    127.         <template slot-scope="scope">
    128.           <treeselect
    129.             v-if="scope.row.industryIdentification"
    130.             v-model="scope.row.industryIdentification"
    131.             :options="industrialDictOptions"
    132.             :normalizer="normalizer"
    133.             disabled
    134.           />
    135.         </template>
    136.       </el-table-column>
    137.       <el-table-column label="楼宇信息" align="center" prop="buildingInformation">
    138.         <template slot-scope="scope">
    139.           <dict-tag
    140.             :options="dict.type.building_information"
    141.             :value="scope.row.buildingInformation"
    142.           />
    143.         </template>
    144.       </el-table-column>
    145.       <el-table-column label="企业标签" align="center" prop="tags" />
    146.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    147.         <template slot-scope="scope">
    148.           <el-button
    149.             size="mini"
    150.             type="text"
    151.             icon="el-icon-edit"
    152.             @click="handleUpdate(scope.row)"
    153.             v-hasPermi="['system:company:edit']"
    154.           >修改</el-button>
    155.           <el-button
    156.             size="mini"
    157.             type="text"
    158.             icon="el-icon-delete"
    159.             @click="handleDelete(scope.row)"
    160.             v-hasPermi="['system:company:remove']"
    161.           >删除</el-button>
    162.         </template>
    163.       </el-table-column>
    164.     </el-table>
    165.  
    166.     <pagination
    167.       v-show="total>0"
    168.       :total="total"
    169.       :page.sync="queryParams.pageNum"
    170.       :limit.sync="queryParams.pageSize"
    171.       @pagination="getList"
    172.     />
    173.  
    174.     <!-- 添加或修改企业基础信息对话框 -->
    175.     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
    176.       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    177.         <el-form-item label="企业名" prop="name">
    178.           <el-input v-model="form.name" placeholder="请输入企业名" />
    179.         </el-form-item>
    180.         <el-form-item label="法⼈" prop="legalPersonName">
    181.           <el-input v-model="form.legalPersonName" placeholder="请输入法⼈" />
    182.         </el-form-item>
    183.         <el-form-item label="统⼀社会信⽤代码" prop="creditCode">
    184.           <el-input v-model="form.creditCode" placeholder="请输入统⼀社会信⽤代码" />
    185.         </el-form-item>
    186.         <el-form-item label="企业状态" prop="regStatus">
    187.           <el-input v-model="form.regStatus" placeholder="请输入企业状态" />
    188.         </el-form-item>
    189.         <el-form-item label="⾏业" prop="industry">
    190.           <el-input v-model="form.industry" placeholder="请输入⾏业" />
    191.         </el-form-item>
    192.         <el-form-item label="企业类型" prop="companyOrgType">
    193.           <el-input v-model="form.companyOrgType" placeholder="请输入企业类型" />
    194.         </el-form-item>
    195.         <el-form-item label="成⽴⽇期" prop="estiblishTime">
    196.           <el-date-picker
    197.             clearable
    198.             v-model="form.estiblishTime"
    199.             type="date"
    200.             value-format="yyyy-MM-dd"
    201.             placeholder="请选择成⽴⽇期"
    202.           ></el-date-picker>
    203.         </el-form-item>
    204.         <el-form-item label="注册资本" prop="regCapital">
    205.           <el-input v-model="form.regCapital" placeholder="请输入注册资本" />
    206.         </el-form-item>
    207.         <el-form-item label="注册地址" prop="regLocation">
    208.           <el-input v-model="form.regLocation" placeholder="请输入注册地址" />
    209.         </el-form-item>
    210.         <el-form-item label="注销⽇期" prop="cancelDate">
    211.           <el-date-picker
    212.             clearable
    213.             v-model="form.cancelDate"
    214.             type="date"
    215.             value-format="yyyy-MM-dd"
    216.             placeholder="请选择注销⽇期"
    217.           ></el-date-picker>
    218.         </el-form-item>
    219.         <el-form-item label="市" prop="city">
    220.           <el-input v-model="form.city" placeholder="请输入市" />
    221.         </el-form-item>
    222.         <el-form-item label="⼈员规模" prop="staffNumRange">
    223.           <el-input v-model="form.staffNumRange" placeholder="请输入⼈员规模" />
    224.         </el-form-item>
    225.         <el-form-item label="⾏业" prop="industry">
    226.           <el-input v-model="form.industry" placeholder="请输入⾏业" />
    227.         </el-form-item>
    228.         <el-form-item label="企业曾用名" prop="historyNames">
    229.           <el-input v-model="form.historyNames" placeholder="请输入企业曾用名" />
    230.         </el-form-item>
    231.         <el-form-item label="曾⽤名" prop="historyNameList">
    232.           <el-input v-model="form.historyNameList" placeholder="请输入曾⽤名" />
    233.         </el-form-item>
    234.         <el-form-item label="股票号" prop="bondNum">
    235.           <el-input v-model="form.bondNum" placeholder="请输入股票号" />
    236.         </el-form-item>
    237.         <el-form-item label="法⼈类型" prop="type">
    238.           <el-select v-model="form.type" placeholder="请选择法⼈类型">
    239.             <el-option
    240.               v-for="dict in dict.type.legal_person_type"
    241.               :key="dict.value"
    242.               :label="dict.label"
    243.               :value="parseInt(dict.value)"
    244.             ></el-option>
    245.           </el-select>
    246.         </el-form-item>
    247.         <el-form-item label="股票名" prop="bondName">
    248.           <el-input v-model="form.bondName" placeholder="请输入股票名" />
    249.         </el-form-item>
    250.         <el-form-item label="更新时间" prop="updateTimes">
    251.           <el-date-picker
    252.             clearable
    253.             v-model="form.updateTimes"
    254.             type="date"
    255.             value-format="yyyy-MM-dd"
    256.             placeholder="请选择更新时间"
    257.           ></el-date-picker>
    258.         </el-form-item>
    259.         <el-form-item label="吊销⽇期" prop="revokeDate">
    260.           <el-date-picker
    261.             clearable
    262.             v-model="form.revokeDate"
    263.             type="date"
    264.             value-format="yyyy-MM-dd"
    265.             placeholder="请选择吊销⽇期"
    266.           ></el-date-picker>
    267.         </el-form-item>
    268.         <el-form-item label="吊销原因" prop="revokeReason">
    269.           <el-input v-model="form.revokeReason" placeholder="请输入吊销原因" />
    270.         </el-form-item>
    271.         <el-form-item label="注册号" prop="regNumber">
    272.           <el-input v-model="form.regNumber" placeholder="请输入注册号" />
    273.         </el-form-item>
    274.         <el-form-item label="英⽂名" prop="property3">
    275.           <el-input v-model="form.property3" placeholder="请输入英⽂名" />
    276.         </el-form-item>
    277.         <el-form-item label="股票曾⽤名" prop="usedBondName">
    278.           <el-input v-model="form.usedBondName" placeholder="请输入股票曾⽤名" />
    279.         </el-form-item>
    280.         <el-form-item label="经营开始时间" prop="fromTime">
    281.           <el-date-picker
    282.             clearable
    283.             v-model="form.fromTime"
    284.             type="date"
    285.             value-format="yyyy-MM-dd"
    286.             placeholder="请选择经营开始时间"
    287.           ></el-date-picker>
    288.         </el-form-item>
    289.         <el-form-item label="核准时间" prop="approvedTime">
    290.           <el-date-picker
    291.             clearable
    292.             v-model="form.approvedTime"
    293.             type="date"
    294.             value-format="yyyy-MM-dd"
    295.             placeholder="请选择核准时间"
    296.           ></el-date-picker>
    297.         </el-form-item>
    298.         <el-form-item label="参保⼈数" prop="socialStaffNum">
    299.           <el-input v-model="form.socialStaffNum" placeholder="请输入参保⼈数" />
    300.         </el-form-item>
    301.         <el-form-item label="简称" prop="alias">
    302.           <el-input v-model="form.alias" placeholder="请输入简称" />
    303.         </el-form-item>
    304.         <el-form-item label="实收注册资本币种" prop="actualCapitalCurrency">
    305.           <el-input v-model="form.actualCapitalCurrency" placeholder="请输入实收注册资本币种" />
    306.         </el-form-item>
    307.         <el-form-item label="组织机构代码" prop="orgNumber">
    308.           <el-input v-model="form.orgNumber" placeholder="请输入组织机构代码" />
    309.         </el-form-item>
    310.         <el-form-item label="注销原因" prop="cancelReason">
    311.           <el-input v-model="form.cancelReason" placeholder="请输入注销原因" />
    312.         </el-form-item>
    313.         <el-form-item label="经营结束时间" prop="toTime">
    314.           <el-date-picker
    315.             clearable
    316.             v-model="form.toTime"
    317.             type="date"
    318.             value-format="yyyy-MM-dd"
    319.             placeholder="请选择经营结束时间"
    320.           ></el-date-picker>
    321.         </el-form-item>
    322.         <el-form-item label="实收注册资⾦" prop="actualCapital">
    323.           <el-input v-model="form.actualCapital" placeholder="请输入实收注册资⾦" />
    324.         </el-form-item>
    325.         <el-form-item label="登记机关" prop="regInstitute">
    326.           <el-input v-model="form.regInstitute" placeholder="请输入登记机关" />
    327.         </el-form-item>
    328.         <el-form-item label="纳税⼈识别号" prop="taxNumber">
    329.           <el-input v-model="form.taxNumber" placeholder="请输入纳税⼈识别号" />
    330.         </el-form-item>
    331.         <el-form-item label="经营范围" prop="businessScope">
    332.           <el-input v-model="form.businessScope" placeholder="请输入经营范围" />
    333.         </el-form-item>
    334.  
    335.         <el-form-item label="注册资本币种" prop="regCapitalCurrency">
    336.           <el-input v-model="form.regCapitalCurrency" placeholder="请输入注册资本币种" />
    337.         </el-form-item>
    338.         <el-form-item label="企业标签" prop="tags">
    339.           <el-input v-model="form.tags" placeholder="请输入企业标签" />
    340.         </el-form-item>
    341.         <el-form-item label="区" prop="district">
    342.           <el-input v-model="form.district" placeholder="请输入区" />
    343.         </el-form-item>
    344.         <el-form-item label="股票类型" prop="bondType">
    345.           <el-input v-model="form.bondType" placeholder="请输入股票类型" />
    346.         </el-form-item>
    347.         <el-form-item label="企业评分" prop="percentileScore">
    348.           <el-input v-model="form.percentileScore" placeholder="请输入企业评分" />
    349.         </el-form-item>
    350.         <el-form-item label="国⺠经济⾏业分类中类" prop="categoryMiddle">
    351.           <el-input v-model="form.categoryMiddle" placeholder="请输入国⺠经济⾏业分类中类" />
    352.         </el-form-item>
    353.         <el-form-item label="国⺠经济⾏业分类⼤类" prop="categoryBig">
    354.           <el-input v-model="form.categoryBig" placeholder="请输入国⺠经济⾏业分类⼤类" />
    355.         </el-form-item>
    356.         <el-form-item label="国⺠经济⾏业分类⻔类" prop="category">
    357.           <el-input v-model="form.category" placeholder="请输入国⺠经济⾏业分类⻔类" />
    358.         </el-form-item>
    359.         <el-form-item label="国⺠经济⾏业分类⼩类" prop="categorySmall">
    360.           <el-input v-model="form.categorySmall" placeholder="请输入国⺠经济⾏业分类⼩类" />
    361.         </el-form-item>
    362.         <el-form-item label="是否是⼩微企业" prop="isMicroEnt">
    363.           <el-select v-model="form.isMicroEnt" placeholder="请选择是否是⼩微企业">
    364.             <el-option
    365.               v-for="dict in dict.type.project_is_land"
    366.               :key="dict.value"
    367.               :label="dict.label"
    368.               :value="parseInt(dict.value)"
    369.             ></el-option>
    370.           </el-select>
    371.         </el-form-item>
    372.         <el-form-item label="省份简称" prop="base">
    373.           <el-input v-model="form.base" placeholder="请输入省份简称" />
    374.         </el-form-item>
    375.         <el-form-item label="经营地址" prop="businessLocation">
    376.           <el-input v-model="form.businessLocation" placeholder="请输入经营地址" />
    377.         </el-form-item>
    378.         <el-form-item label="楼宇信息" prop="buildingInformation">
    379.           <el-select v-model="form.buildingInformation" placeholder="请选择楼宇信息">
    380.             <el-option
    381.               v-for="dict in dict.type.building_information"
    382.               :key="dict.value"
    383.               :label="dict.label"
    384.               :value="parseInt(dict.value)"
    385.             ></el-option>
    386.           </el-select>
    387.         </el-form-item>
    388.         <el-form-item label="产业认定" prop="industryIdentification">
    389.           <treeselect
    390.             v-model="form.industryIdentification"
    391.             :options="industrialDictOptions"
    392.             :normalizer="normalizer"
    393.             placeholder="请选择产业认定"
    394.           />
    395.         </el-form-item>
    396.       </el-form>
    397.       <div slot="footer" class="dialog-footer">
    398.         <el-button type="primary" @click="submitForm">确 定</el-button>
    399.         <el-button @click="cancel">取 消</el-button>
    400.       </div>
    401.     </el-dialog>
    402.   </div>
    403. </template>
    404.  
    405. <script>
    406. import {
    407.   listCompany,
    408.   getCompany,
    409.   delCompany,
    410.   addCompany,
    411.   updateCompany
    412. } from "@/api/system/company";
    413. import {
    414.   listIndustrialDict,
    415.   getIndustrialDict
    416. } from "@/api/system/industrialDict";
    417. import Treeselect from "@riophae/vue-treeselect";
    418. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    419.  
    420. export default {
    421.   name: "Company",
    422.   dicts: ["legal_person_type", "project_is_land", "building_information"],
    423.   components: {
    424.     Treeselect
    425.   },
    426.   data() {
    427.     return {
    428.       // 遮罩层
    429.       loading: true,
    430.       // 选中数组
    431.       ids: [],
    432.       // 非单个禁用
    433.       single: true,
    434.       // 非多个禁用
    435.       multiple: true,
    436.       // 显示搜索条件
    437.       showSearch: true,
    438.       // 总条数
    439.       total: 0,
    440.       // 企业基础信息表格数据
    441.       companyList: [],
    442.       // 产业领域字典树选项
    443.       industrialDictOptions: [],
    444.       // 弹出层标题
    445.       title: "",
    446.       // 是否显示弹出层
    447.       open: false,
    448.       // 查询参数
    449.       queryParams: {
    450.         pageNum: 1,
    451.         pageSize: 10,
    452.         historyNames: null,
    453.         regStatus: null,
    454.         cancelDate: null,
    455.         regCapital: null,
    456.         city: null,
    457.         staffNumRange: null,
    458.         industry: null,
    459.         historyNameList: null,
    460.         bondNum: null,
    461.         type: null,
    462.         bondName: null,
    463.         updateTimes: null,
    464.         revokeDate: null,
    465.         legalPersonName: null,
    466.         revokeReason: null,
    467.         regNumber: null,
    468.         property3: null,
    469.         creditCode: null,
    470.         usedBondName: null,
    471.         fromTime: null,
    472.         approvedTime: null,
    473.         socialStaffNum: null,
    474.         alias: null,
    475.         companyOrgType: null,
    476.         actualCapitalCurrency: null,
    477.         orgNumber: null,
    478.         cancelReason: null,
    479.         toTime: null,
    480.         actualCapital: null,
    481.         regInstitute: null,
    482.         taxNumber: null,
    483.         businessScope: null,
    484.         regLocation: null,
    485.         regCapitalCurrency: null,
    486.         tags: null,
    487.         district: "杨浦区",
    488.         name: null,
    489.         bondType: null,
    490.         percentileScore: null,
    491.         industryAll: null,
    492.         isMicroEnt: null,
    493.         base: null,
    494.         estiblishTime: null,
    495.         businessLocation: null,
    496.         buildingInformation: null,
    497.         industryIdentification: null
    498.       },
    499.       // 表单参数
    500.       form: {},
    501.       industryAllList: [],
    502.       // 表单校验
    503.       rules: {}
    504.     };
    505.   },
    506.   created() {
    507.     this.getTreeselect();
    508.   },
    509.   methods: {
    510.     /** 查询企业基础信息列表 */
    511.     getList() {
    512.       this.loading = true;
    513.       listCompany(this.queryParams).then(response => {
    514.         this.companyList = response.rows;
    515.         console.log(this.companyList, "this.companyList");
    516.         this.total = response.total;
    517.         this.loading = false;
    518.         let arr = response.rows;
    519.         // arr.forEach(item=>{
    520.         //   item.
    521.         // })
    522.       });
    523.     },
    524.  
    525.     normalizer(node) {
    526.       if (node.children && !node.children.length) {
    527.         delete node.children;
    528.       }
    529.       return {
    530.         id: node.labelValue,
    531.         label: node.labelName,
    532.         children: node.children
    533.       };
    534.     },
    535.     /** 查询产业领域字典下拉树结构 */
    536.     getTreeselect() {
    537.       listIndustrialDict().then(response => {
    538.         this.industrialDictList = this.handleTree(
    539.           response.data,
    540.           "labelValue",
    541.           "parentId"
    542.         );
    543.         this.industrialDictOptions = [];
    544.         const data = { labelValue: 0, labelName: "请选择", children: [] };
    545.         data.children = this.handleTree(
    546.           response.data,
    547.           "labelValue",
    548.           "parentId"
    549.         );
    550.         this.industrialDictOptions.push(data);
    551.         console.log(this.industrialDictOptions, "this.industrialDictOptions");
    552.         this.getList();
    553.       });
    554.     },
    555.  
    556.     // 递归获取名称
    557.     recursion(data) {
    558.       // console.log(data,"xx")
    559.       data.forEach(item => {
    560.         if (item.children.length > 0) {
    561.           this.recursion(item.children);
    562.         }
    563.       });
    564.     },
    565.  
    566.     // 取消按钮
    567.     cancel() {
    568.       this.open = false;
    569.       this.reset();
    570.     },
    571.     // 表单重置
    572.     reset() {
    573.       this.form = {
    574.         id: null,
    575.         historyNames: null,
    576.         regStatus: null,
    577.         cancelDate: null,
    578.         regCapital: null,
    579.         city: null,
    580.         staffNumRange: null,
    581.         industry: null,
    582.         historyNameList: null,
    583.         bondNum: null,
    584.         type: null,
    585.         bondName: null,
    586.         updateTimes: null,
    587.         revokeDate: null,
    588.         legalPersonName: null,
    589.         revokeReason: null,
    590.         regNumber: null,
    591.         property3: null,
    592.         creditCode: null,
    593.         usedBondName: null,
    594.         fromTime: null,
    595.         approvedTime: null,
    596.         socialStaffNum: null,
    597.         alias: null,
    598.         companyOrgType: null,
    599.         actualCapitalCurrency: null,
    600.         orgNumber: null,
    601.         cancelReason: null,
    602.         toTime: null,
    603.         actualCapital: null,
    604.         regInstitute: null,
    605.         taxNumber: null,
    606.         businessScope: null,
    607.         regLocation: null,
    608.         regCapitalCurrency: null,
    609.         tags: null,
    610.         district: null,
    611.         name: null,
    612.         bondType: null,
    613.         percentileScore: null,
    614.         industryAll: null,
    615.         isMicroEnt: null,
    616.         base: null,
    617.         estiblishTime: null,
    618.         categoryMiddle: null,
    619.         categoryBig: null,
    620.         category: null,
    621.         categorySmall: null
    622.       };
    623.       this.resetForm("form");
    624.     },
    625.     /** 搜索按钮操作 */
    626.     handleQuery() {
    627.       this.queryParams.pageNum = 1;
    628.       this.getList();
    629.     },
    630.     /** 重置按钮操作 */
    631.     resetQuery() {
    632.       this.resetForm("queryForm");
    633.       this.handleQuery();
    634.     },
    635.     // 多选框选中数据
    636.     handleSelectionChange(selection) {
    637.       this.ids = selection.map(item => item.id);
    638.       this.single = selection.length !== 1;
    639.       this.multiple = !selection.length;
    640.     },
    641.     /** 新增按钮操作 */
    642.     handleAdd() {
    643.       this.reset();
    644.       this.open = true;
    645.       this.title = "添加企业基础信息";
    646.     },
    647.     /** 修改按钮操作 */
    648.     handleUpdate(row) {
    649.       this.reset();
    650.       const id = row.id || this.ids;
    651.       getCompany(id).then(response => {
    652.         this.form = response.data;
    653.         if (response.data != null) {
    654.           this.$set(
    655.             this.form,
    656.             "categoryMiddle",
    657.             JSON.parse(response.data.industryAll).categoryMiddle
    658.           );
    659.           this.$set(
    660.             this.form,
    661.             "categoryBig",
    662.             JSON.parse(response.data.industryAll).categoryBig
    663.           );
    664.           this.$set(
    665.             this.form,
    666.             "category",
    667.             JSON.parse(response.data.industryAll).category
    668.           );
    669.           this.$set(
    670.             this.form,
    671.             "categorySmall",
    672.             JSON.parse(response.data.industryAll).categorySmall
    673.           );
    674.         }
    675.         this.open = true;
    676.         this.title = "修改企业基础信息";
    677.       });
    678.     },
    679.     /** 提交按钮 */
    680.     submitForm() {
    681.       this.$refs["form"].validate(valid => {
    682.         if (valid) {
    683.           let data = {
    684.             categoryMiddle: this.form.categoryMiddle,
    685.             categoryBig: this.form.categoryBig,
    686.             category: this.form.category,
    687.             categorySmall: this.form.categorySmall
    688.           };
    689.  
    690.           this.form.industryAll = JSON.stringify(data);
    691.           if (this.form.id != null) {
    692.             updateCompany(this.form).then(response => {
    693.               this.$modal.msgSuccess("修改成功");
    694.               this.open = false;
    695.               this.getList();
    696.             });
    697.           } else {
    698.             addCompany(this.form).then(response => {
    699.               this.$modal.msgSuccess("新增成功");
    700.               this.open = false;
    701.               this.getList();
    702.             });
    703.           }
    704.         }
    705.       });
    706.     },
    707.     /** 删除按钮操作 */
    708.     handleDelete(row) {
    709.       const ids = row.id || this.ids;
    710.       this.$modal
    711.         .confirm('是否确认删除企业基础信息编号为"' + ids + '"的数据项？')
    712.         .then(function() {
    713.           return delCompany(ids);
    714.         })
    715.         .then(() => {
    716.           this.getList();
    717.           this.$modal.msgSuccess("删除成功");
    718.         })
    719.         .catch(() => {});
    720.     },
    721.     /** 导出按钮操作 */
    722.     handleExport() {
    723.       this.download(
    724.         "system/company/export",
    725.         {
    726.           ...this.queryParams
    727.         },
    728.         `company_${new Date().getTime()}.xlsx`
    729.       );
    730.     }
    731.   }
    732. };
    733. </script>
    734. <style scoped lang="scss">
    735. .tableCell ::v-deep .vue-treeselect__control-arrow-container {
    736.   display: none !important;
    737. }
    738. .tableCell ::v-deep .vue-treeselect__single-value {
    739.   color: #606266 !important;
    740. }
    741. .tableCell ::v-deep .vue-treeselect--disabled .vue-treeselect__control {
    742.   background-color: transparent;
    743. }
    744.  
    745. .tableCell ::v-deep .vue-treeselect__control {
    746.   border: 0px;
    747. }
    748. </style>
    749.

  • 相关阅读:
    浏览器中的Event Loop
    Redis之与SSM集成Spring注解式缓存
    从 manual 中学习 seccomp 技术
    解锁新技能《SkyWalking Java Agent配置安装》
    【论文笔记】Population Based Training of Neural Networks（PBT）
    智能高效的转运机器人，为物流行业注入新动力
    不知道HTTPS的加密原理,相信我,看这一篇就够了!
    openCV初级实践项目：银行卡卡号识别
    CAPL学习之路-TLS函数
    区块链和IPFS安全测试工具；ECC+AES混合加密机制：秘钥管理
  • 原文地址：https://blog.csdn.net/weixin_50885665/article/details/133140909