完整代码如下：

<template>

  <!-- 资源列表页 -->

  <div>

    <div>

      <i

        @click="$router.go(-1)"

        style="

          color: #409eff;

          cursor: pointer;

          margin-right: 5px;

          font-size: 18px;

        "

        class="el-icon-back"

      ></i

      >{{ getCurrentPageTitle }}

    </div>

    <br />

    <el-row class="contentTop">

      <el-col :span="12">

        <el-button type="primary" size="mini" @click="doAdd">新建</el-button>

        <el-button

          size="mini"

          @click="

            drawerImportant = true;

            active = 0;

            currentFile = null;

          "

          >导入</el-button

        >

        <!-- <el-button size="mini">批量更新</el-button>

        <el-button size="mini">删除</el-button> -->

        <el-button size="mini" @click="doExport">导出</el-button>

        <el-button size="mini" @click="doExportTemplate">导出模板</el-button>

      </el-col>

      <el-col :span="10">

        <el-input

          placeholder="请输入内容"

          v-model="inputValue"

          class="input-with-select"

          size="mini"

          clearable

        >

          <el-select

            v-model="selectValue"

            slot="prepend"

            style="width: 120px"

            placeholder="请选择"

            clearable

            @change="changeSelect"

          >

            <el-option

              :label="item.label"

              :value="item.value"

              v-for="item in searchList"

              :key="item.value"

            ></el-option>

          </el-select>

          <el-button

            slot="append"

            icon="el-icon-search"

            @click="doSearch"

          ></el-button>

        </el-input>

      </el-col>

      <el-col :span="0.5">

        <el-button

          icon="el-icon-setting"

          size="mini"

          @click="doSetting"

        ></el-button>

      </el-col>

    </el-row>

    <br />

    <el-row>

      <!-- @cell-click="doClickCell" -->

      <el-table

        :data="tableInfo.list"

        size="mini"

        @selection-change="handleSelectionChange"

        fit

        :stripe="true"

        :row-key="rowKey"

        ref="multipleTable"

        max-height="500"

        border

        id="tableId"

        @sort-change="sortChange"

      >

        <!-- <el-table-column

          type="selection"

          :reserve-selection="true"

          width="55"

        ></el-table-column> -->

        <el-table-column

          v-for="(item, index) in tableInfo.columns"

          v-if="!item.hide"

          :prop="item.name"

          :label="item.label"

          :key="index"

          :show-overflow-tooltip="true"

          sortable="custom"

        >

          <!-- <template slot-scope="scope">

            <el-button

              v-if="item.name == 'example'"

              type="text"

              @click="doClickCell(scope.row)"

              >{{ scope.row[item.name] }}</el-button

            >

            <span v-else>{{ scope.row[item.name] }}</span>

          </template> -->

        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180">

          <template slot-scope="scope">

            <el-button @click="doClickCell(scope.row)" type="text" size="small"

              >详情</el-button

            >

            <el-button

              @click.stop="deleteRow(scope.row.id)"

              type="text"

              size="small"

              >删除</el-button

            >

          </template>

        </el-table-column>

      </el-table>

      <div style="text-align: center">

        <el-pagination

          @size-change="handleSizeChange"

          @current-change="handleCurrentChange"

          :current-page="paramsPage.pageNum"

          :page-sizes="[10, 20, 30, 50, 100]"

          :page-size="paramsPage.pageSize"

          layout="total, sizes, prev, pager, next, jumper"

          :total="tableInfo.total"

        ></el-pagination>

      </div>

    </el-row>

    <el-drawer

      title="列表显示属性配置"

      :visible.sync="drawer"

      direction="rtl"

      size="45%"

    >

      <el-transfer

        style="text-align: left; display: inline-block"

        v-model="transferValue"

        filterable

        :left-default-checked="[]"

        :right-default-checked="[]"

        :render-content="renderFunc"

        :titles="['未选属性', '已选属性']"

        :format="{

          noChecked: '${total}',

          hasChecked: '${checked}/${total}',

        }"

        :props="{

          key: 'name',

          label: 'label',

        }"

        @change="handleChange"

        :data="dataList"

      >

      </el-transfer>

      <br />

      <br />

      <div style="padding: 0 20px">

        <el-button type="primary" size="small" @click="doSettingConfirm"

          >应用</el-button

        >

        <el-button size="small" @click="drawer = false">取消</el-button>

        <el-button style="float: right" size="small" @click="doRest"

          >还原默认</el-button

        >

      </div>

    </el-drawer>

    <el-drawer

      title="创建"

      :visible.sync="drawerAdd"

      direction="rtl"

      size="30%"

    >

      <div style="padding-left: 20px">

        <el-form

          label-position="top"

          label-width="80px"

          :model="formLabelAlign"

        >

          <el-collapse

            v-model="activeNames"

            v-for="(item, index) in modelList"

            :key="index"

          >

            <el-collapse-item :title="item.name" :name="index">

              <el-row :gutter="40" v-for="(v, i) in item.infoList" :key="i">

                <el-col :span="20">

                  <el-form-item :label="v.label">

                    <el-input

                      v-if="v.typeValue == 'input'"

                      v-model="formLabelAlign[v.name]"

                      placeholder="请输入"

                      style="width: 570px"

                    ></el-input>

                    <el-input

                      v-else-if="v.typeValue == 'number'"

                      type="number"

                      v-model="formLabelAlign[v.name]"

                      placeholder="请输入"

                      style="width: 570px"

                    ></el-input>

                    <el-date-picker

                      v-else-if="v.typeValue == 'date'"

                      value-format="yyyy-MM-dd"

                      type="date"

                      v-model="formLabelAlign[v.name]"

                      placeholder="请输入"

                      style="width: 570px"

                    ></el-date-picker>

                    <el-date-picker

                      v-else-if="v.typeValue == 'time'"

                      value-format="yyyy-MM-dd HH:mm:ss"

                      type="datetime"

                      v-model="formLabelAlign[v.name]"

                      placeholder="请输入"

                      style="width: 570px"

                    ></el-date-picker>

                    <el-select

                      v-else-if="

                        v.typeValue == 'select' &&

                        v[`valueAttribute${i}`] &&

                        v[`valueAttribute${i}`].length > 0

                      "

                      v-model="formLabelAlign[v.name]"

                      clearable

                      style="width: 570px"

                    >

                      <el-option

                        v-for="w in v[`valueAttribute${i}`]"

                        :key="w.key"

                        :label="w.value"

                        :value="w.key"

                      >

                      </el-option>

                    </el-select>

                    <el-cascader

                      v-else-if="

                        v.typeValue == 'isCascade' &&

                        v[`valueAttribute${i}`] &&

                        v[`valueAttribute${i}`].length > 0

                      "

                      v-model="formLabelAlign[v.name]"

                      :options="v[`valueAttribute${i}`]"

                      :props="propsCascader"

                      @change="handleChangeCas"

                    ></el-cascader>

                  </el-form-item>

                </el-col>

              </el-row>

            </el-collapse-item>

          </el-collapse>

          <div class="bottomButton">

            <el-button type="primary" @click="doConfirm">提交</el-button>

            <el-button @click="drawerAdd = false">取消</el-button>

          </div>

        </el-form>

      </div>

    </el-drawer>

    <el-drawer

      title="批量导入"

      :visible.sync="drawerImportant"

      direction="rtl"

      size="45%"

    >

      <div style="padding-left: 20px">

        <el-steps :active="active" finish-status="success" align-center>

          <el-step title="上传文件"></el-step>

          <el-step title="选择关联模型"></el-step>

        </el-steps>

        <div style="padding-left: 20px">

          <div v-if="active == 0">

            <div

              style="

                margin: 20px 0;

                background: rgb(255, 244, 226);

                border: 1px solid rgb(255, 223, 172);

              "

            >

              <i style="color: rgb(255, 156, 1)" class="el-icon-info"></i>

              说明：导入编辑需要先导出需要修改的实例，并完成编辑修改后才能进行导入编辑操作

            </div>

            <el-upload

              class="upload-demo"

              drag

              action

              multiple

              :http-request="uploadFiles"

            >

              <i class="el-icon-upload"></i>

              <div class="el-upload__text">

                将文件拖到此处，或<em>点击上传</em>

              </div>

              <div class="el-upload__tip" slot="tip">

                只能上传jpg/png文件，且不超过500kb

                <el-button

                  type="primary"

                  icon="el-icon-download"

                  size="mini"

                  @click="downloadTemplate"

                  >下载模板</el-button

                >

              </div>

            </el-upload>

          </div>

          <div style="margin: 20px 0" v-if="active == 1">

            <el-checkbox v-model="checked">是否导入关联的模型实例</el-checkbox>

          </div>

          <div style="margin-top: 20px">

            <el-button

              v-if="active == 0"

              type="primary"

              :disabled="!currentFile"

              @click="active = 1"

              >下一步</el-button

            >

            <el-button v-if="active == 1" @click="active = 0">上一步</el-button>

            <el-button v-if="active == 1" type="primary" @click="doImportant"

              >开始导入</el-button

            >

            <el-button @click="drawerImportant = false">取消</el-button>

          </div>

        </div>

      </div>

    </el-drawer>

  </div>

</template>

<script>

import { mapGetters, mapMutations } from "vuex";

import tableCell from "./tableCell";

import { unique } from "@/utils/index";

import {

  resourceList,

  deleteResource,

  queryResource,

  findAllModel,

  getAddress,

  exportTemplate,

  uploadResource,

  exportResource,

  exportResourceTemplate,

  addResource,

  batchUpdateField,

  findAll,

  querySelect,

} from "@/api/cmdb/model";

export default {

  data() {

    return {

      inputValue: "",

      select: "",

      valueCade: [],

      selectValue: "",

      drawer: false,

      drawerAdd: false,

      drawerImportant: false,

      checked: false,

      active: 0,

      activeNames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

      multipleSelection: [],

      searchList: [],

      modelList: [],

      currentArgs: [],

      formInline: {},

      formLabelAlign: {},

      currentFile: null,

      tableInfo: {

        columns: [],

        list: [],

        total: 0,

      },

      paramsPage: {

        pageNum: 1,

        pageSize: 10,

      },

      dataList: [], // 所有字段数据

      selectFieldList: [],

      transferValue: [], // 右侧数据

      renderFunc(h, option) {

        return (

          <span>

            {/* {option.key} - {option.label} */}

            {option.label}

          </span>

        );

      },

      propsCascader: {

        value: "key",

        label: "value",

        children: "child",

      },

    };

  },

  computed: {

    ...mapGetters(["getCurrentPageTitle", "getActiveModel"]),

  },

  // watch: {

  //   $route: {

  //     handler(to, from) {

  //       this.$set(this.tableInfo, "columns", tableCell[to.params.id]);

  //       this.paramsPage.pageSize = 10;

  //       this.paramsPage.pageNum = 1; //重置页面

  //     },

  //     immediate: true,

  //   },

  // },

  mounted() {

    this.getList();

    this.getSearchList();

    this.getFields();

  },

  methods: {

    ...mapMutations(["setDetailTitle", "setResourceId"]),

    // 当前模型详情查询(新建字段)

    getFields() {

      let params = {

        args: this.getActiveModel.uniqueId,

      };

      findAllModel(params)

        .then((res) => {

          if (res.code == 0) {

            this.modelList = res.data; // 当前模型下包含的分组

            this.modelList.forEach(v1 => {

              v1.infoList.forEach((v2,i2)=> {

                if(v2.typeValue == 'isCascade' || v2.typeValue == 'select') {

                  getAddress(v2.dateTypeValue,{}).then(res2 => {

                    v2[`valueAttribute${i2}`] = res2

                  })

                }

              })

            })

            // 列表字段显示隐藏

            let arr = [];

            res.data.forEach((v) => {

              arr.push(v.infoList);

            });

            this.dataList = arr.flat(); // 二维数组转一维

            // 右侧数据

            this.transferValue = this.dataList.map((v) => {

              if (v.show) {

                return v.name;

              }

            });

          } else {

            res.desc && this.$message.error(res.desc);

          }

        })

        .catch((err) => {

          err.desc && this.$message.error(err.desc);

        });

    },

    getList(id = "id", order = "", args) {

      let params = {

        currPage: this.paramsPage.pageNum,

        pageSize: this.paramsPage.pageSize,

        uniqueId: this.getActiveModel.uniqueId,

        args: args || [],

        sortName: id,

        sortValue: order == "descending" ? false : true, // true = ASC，false = DESC

      };

      resourceList(params)

        .then((res) => {

          if (res.code == 0) {

            this.tableInfo.columns = res.data.headers;

            this.tableInfo.list = res.data.bodyData.list;

            this.tableInfo.total = res.data.bodyData.total;

          } else {

            res.desc && this.$message.error(res.desc);

          }

        })

        .catch((err) => {

          err.desc && this.$message.error(err.desc);

        });

    },

    // 排序

    sortChange({ column, prop, order }) {

      // console.log(column, prop, order );

      this.getList(prop, order, []);

    },

    changeSelect(key) {

      this.currentKey = key;

    },

    // 按条件搜索

    doSearch() {

      // if (!this.currentKey) {

      //   return this.$message.warning("请选择需要查询的字段名称");

      // }

      let args = [

        {

          key: this.currentKey,

          value: this.inputValue,

          select: false, // true为下拉搜索，一般默认都是输入框

        },

      ];

      this.currentArgs = args;

      this.getList("id", "", this.inputValue ? args : []);

    },

    // 查询下拉

    getSearchList() {

      let params = {

        args: this.getActiveModel.uniqueId,

      };

      queryResource(params).then((res) => {

        if (res.code == 0) {

          this.searchList = res.data;

        }

      });

    },

    rowKey(row) {

      return row.id;

    },

    handleSizeChange(val) {

      this.paramsPage.pageSize = val;

      this.getList();

    },

    handleCurrentChange(val) {

      this.paramsPage.pageNum = val;

      this.getList();

    },

    //多选

    handleSelectionChange(val) {

      // console.log(val);

      this.multipleSelection = val;

    },

    doSetting() {

      this.drawer = true;

    },

    // 还原默认

    doRest() {

      this.dataList.forEach((v) => {

        v.createTime && delete v.createTime;

        v.updateTime && delete v.updateTime;

        // 第一次保存的设置true,其他都隐藏false

        if (v.showDefault) {

          v.show = true;

        } else {

          v.show = false;

        }

      });

      batchUpdateField(this.dataList)

        .then((res) => {

          if (res.code == 0) {

            this.drawer = false;

            this.getList();

            this.getFields();

            this.$message.success(res.desc);

          } else {

            this.drawer = false;

            res.desc && this.$message.error(res.desc);

          }

        })

        .catch((err) => {

          this.drawer = false;

          err.desc && this.$message.error(err.desc);

        });

    },

    // 字段显示配置--应用

    doSettingConfirm() {

      let arr = [];

      arr = this.selectFieldList.map((v) => {

        return v.showDefault;

      });

      // 如果包含true,说明保存过一次，如果不包含true,说明第一次保存，为还原默认设置数据

      if (arr.includes(true)) {

        // console.log('保存过一次');

      } else {

        // console.log('第一次保存');

        // 第一次保存-应用，右侧showDefault设为true

        this.selectFieldList.forEach((v1) => {

          this.transferValue.forEach((v2) => {

            if (v2 == v1.name) {

              v1.showDefault = true;

            }

          });

        });

      }

      batchUpdateField(this.selectFieldList)

        .then((res) => {

          if (res.code == 0) {

            this.drawer = false;

            this.getList();

            this.getFields();

            this.$message.success(res.desc);

          } else {

            this.drawer = false;

            res.desc && this.$message.error(res.desc);

          }

        })

        .catch((err) => {

          this.drawer = false;

          err.desc && this.$message.error(err.desc);

        });

    },

    handleChangeCas(val) {},

    handleChange(value, direction, movedKeys) {

      // console.log(value, direction, movedKeys);

      let arr = [];

      // value为右侧数据；左侧dataList为所有数据

      // 默认全部show设为false,右侧是选中的需要show设为true,否则就为false

      this.dataList.forEach((v1) => {

        v1.show = false;

        v1.createTime && delete v1.createTime;

        v1.updateTime && delete v1.updateTime;

      });

      this.dataList.forEach((v1) => {

        value.forEach((v2) => {

          if (v2 == v1.name) {

            v1.show = true;

            arr.push(v1);

          } else {

            arr.push(v1);

          }

        });

      });

      this.selectFieldList = unique(arr, "id"); // 根据id去重

    },

    doClickCell(row) {

      this.setDetailTitle(row.example);

      this.setResourceId(row.id);

      this.$router.push({ path: `/resource/detail` });

    },

    next() {

      this.active = 2;

    },

    deleteRow(id) {

      let that = this;

      let params = {

        uniqueId: this.getActiveModel.uniqueId,

        id: id,

      };

      that

        .$confirm("确认要删除这条数据?", "提示", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning",

        })

        .then(() => {

          deleteResource(params)

            .then((res) => {

              if (res.code == 0) {

                that.$message.success(res.desc);

                that.getList();

              } else {

                if (res.desc) {

                  that.$message.error(res.desc);

                }

              }

            })

            .catch((err) => {

              err.desc && that.$message.error(err.desc);

            });

        })

        .catch(() => {

          that.$message({

            type: "info",

            message: "已取消删除",

          });

        });

    },

    doAdd() {

      this.drawerAdd = true;

      this.formLabelAlign = {};

    },

    // 新建--提交

    doConfirm() {

      if (

        this.formLabelAlign.example_department &&

        this.formLabelAlign.example_department.length > 0

      ) {

        this.formLabelAlign.example_department =

          this.formLabelAlign.example_department.join();

      }

      let params = {

        uniqueId: this.getActiveModel.uniqueId,

        args: this.formLabelAlign,

      };

      addResource(params)

        .then((res) => {

          if (res.code == 0) {

            this.getList();

            this.drawerAdd = false;

            this.$message.success(res.desc);

          } else {

            res.desc && this.$message.error(res.desc);

          }

        })

        .catch((err) => {

          err.desc && this.$message.error(err.desc);

        });

    },

    getDownload(res) {

      const blob = new Blob([res]);

      // const fileName = res.headers["content-disposition"].split("=")[1];

      const fileName = this.getActiveModel.uniqueId;

      const elink = document.createElement("a");

      elink.download = window.decodeURIComponent(fileName);

      elink.style.display = "none";

      elink.href = URL.createObjectURL(blob);

      elink.setAttribute("download", `${fileName}.xlsx`); // 下载文件的名称及文件类型后缀

      document.body.appendChild(elink);

      elink.click();

      URL.revokeObjectURL(elink.href); // 释放URL 对象

      document.body.removeChild(elink);

    },

    // 下载模板

    downloadTemplate() {

      let params = {

        uniqueId: this.getActiveModel.uniqueId,

      };

      exportTemplate(params).then((res) => {

        this.getDownload(res);

      });

    },

    // 导出

    doExport() {

      let params = {

        uniqueId: this.getActiveModel.uniqueId,

        currPage: this.paramsPage.pageNum,

        pageSize: this.paramsPage.pageSize,

        args: this.currentArgs,

        titleList: this.multipleSelection.map((v) => v.id),

      };

      exportResource(params).then((res) => {

        this.getDownload(res);

      });

    },

    // 导出模板

    doExportTemplate() {

      let params = {

        uniqueId: this.getActiveModel.uniqueId,

      };

      exportResourceTemplate(params).then((res) => {

        this.getDownload(res);

      });

    },

    // 导入--上传

    uploadFiles(files) {

      const _file = files.file;

      this.currentFile = _file;

      // var formData = new FormData();

      // formData.append("file", _file);

      // formData.append("uniqueId", this.getActiveModel.uniqueId);

      // uploadResource(formData)

      //   .then((res) => {

      //     if (res.code == 0) {

      //       this.getList();

      //       this.drawerImportant = false;

      //       this.$message.success(res.desc);

      //     } else {

      //       res.desc && this.$message.error(res.desc);

      //     }

      //   })

      //   .catch((err) => {

      //     err.desc && this.$message.error(err.desc);

      //   });

    },

    // 开始导入

    doImportant() {

      var formData = new FormData();

      formData.append("file", this.currentFile);

      formData.append("uniqueId", this.getActiveModel.uniqueId);

      uploadResource(formData)

        .then((res) => {

          if (res.type == "application/json") {

            this.$message.success("导入成功");

            this.drawerImportant = false;

            this.getList();

          } else {

            this.drawerImportant = false;

            this.$message.error("导入失败");

          }

        })

        .catch((err) => {

          this.drawerImportant = false;

          this.$message.error("导入失败");

        });

    },

  },

};

</script>

<style scoped lang="scss">

.contentTop {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

::v-deep .el-drawer__open .el-drawer.rtl {

  -webkit-animation: rtl-drawer-in 0.3s 1ms;

  animation: rtl-drawer-in 0.3s 1ms;

  width: 38% !important;

}

::v-deep .el-transfer-panel {

  height: 660px !important;

}

::v-deep .el-transfer-panel__list.is-filterable {

  height: 660px !important;

}

::v-deep .el-upload-dragger {

  width: 530px !important;

}

.bottomButton {

  position: sticky;

  bottom: 0;

  left: 0;

  margin-top: 10px;

}

</style>