adm-frontend/src/components/dialogs/changeRea.vue

<!--
    changeRea 厂商
-->
<template>
  <el-dialog title="关联资产" :visible.sync="dialog.changeRea" width="800px">
    <div>
      <div id="changeRea">
        <div class="title-search" style="margin-bottom: 10px;">
          <floor-cascader @change="changeFloor"></floor-cascader>
          <el-input placeholder="输入本地名称或本地编码查询" v-model="search" size="small" style="width:250px;marginLeft:30px;"
                    clearable></el-input>
          <el-button @click="getPropertyData" size="small">查找</el-button>
        </div>
        <!-- <div>
          <floor-cascader @change="changeFloor"></floor-cascader>
        </div> -->
        <el-radio-group v-model="radio" style="width:100%;">
          <el-table :data="tableData" style="width: 100%" height="300px">
            <el-table-column label="资产名称" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-radio :label="scope.row.id" :ref="scope.row.id" :value="scope.row.localName || scope.row.name">
                  {{ scope.row.localName }}
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="本地编码">
              <template slot-scope="scope">{{ scope.row.localId }}</template>
            </el-table-column>
            <el-table-column prop="name" label="所在楼层">
              <template slot-scope="scope">
                {{
                  scope.row.building ? scope.row.building.localName ? scope.row.building.localName : '' : ''
                }}-{{ scope.row.floor ? scope.row.floor.localName ? scope.row.floor.localName : '' : '' }}
              </template>
            </el-table-column>
            <el-table-column label="设备族">
              <template slot-scope="scope">
                {{ scope.row.equipFamilyList[0].familyName }}
              </template>
            </el-table-column>
            <el-table-column label="安装位置">
              <template slot-scope="scope">
                {{ scope.row.infos ? scope.row.infos.installLocation ? scope.row.infos.installLocation : "--" : "--" }}
              </template>
            </el-table-column>
          </el-table>
        </el-radio-group>
        <my-pagination :page="page" @change="changed" style="margin-top:10px;"></my-pagination>
        <div class="footer">
          <el-button type="primary" @click="clickTrue" style="display:block;margin: 10px auto 0;">确 定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/ledger/components/lib/myPagination";
// import { queryProperty } from "@/api/scan/request"
import ScanController from "@/controller/ScanController";
import floorCascader from "@/components/ledger/components/lib/floorCascader";
import { mapGetters, mapActions } from "vuex"

export default {
  components: {
    myPagination,
    floorCascader
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          changeRea: true
        };
      }
    },
    category: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      search: "", //搜索文案
      radio: "",
      tableData: [],
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      },
      mess: {},
      codeListCode: [],
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"])
  },
  mounted() {
  },
  methods: {
    //确认选择
    clickTrue() {
      if (this.radio) {
        this.$emit('changeProperty', { propertyId: this.radio, linkEquipLocalName: this.$refs[this.radio].value });
        this.dialog.changeRea = false;
      } else {
        this.$message("请先选择资产")
      }
    },
    //所在建筑楼层修改
    changeFloor(val) {
      this.mess = {
        buildId: val[0] || "",
        floorId: val[1] || ""
      }
      this.getPropertyData()
    },
    //分页修改
    changed() {
      this.getPropertyData()
    },
    //弹窗显示时
    changePage() {
      this.page = {
        size: 50,
        sizes: [10, 30, 50, 100],
        total: 0,
        currentPage: 1
      }
      this.getPropertyData()
    },
    //查询表数据
    getPropertyData() {
      let param = {
        cascade: [
          {
            name: "equipFamilyList",
            projection: ["family", "familyName"]
          },
          {
            name: "building",
            projection: ["localName", "name", "id"]
          },
          {
            name: "floor",
            projection: ["localName", "name", "id"]
          }
        ],
        filters: `equipId isNull;family="${this.category.assetType}"`,
        pageNumber: this.page.currentPage,
        pageSize: this.page.size
      }
      //建筑id
      if (this.mess.buildId == "noKnow") {
        param.filters += `;buildingId isNull`
      } else if (this.mess.buildId && this.mess.buildId != "all") {
        param.filters += `;buildingId='${this.mess.buildId}'`
      }
      //楼层id
      if (this.mess.floorId == "noKnow") {
        param.filters += `;floorId isNull`
      } else if (this.mess.floorId && this.mess.floorId != "all") {
        param.filters += `;floorId='${this.mess.floorId}'`
      }
      //名称和编码
      if (this.search) {
        param.filters += `;name contain '${this.search}' || localName contain '${this.search}' || localId contain '${this.search}'`
      }
      ScanController.queryProperty(param, res => {
        this.tableData = res.content
        this.page.total = res.total
      })
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.changeRea) {
          this.changePage()
          this.radio = ""
        }
      }
    }
  }
};
</script>

<style lang="less">
#changeRea {
  .el-table thead {
    tr {
      th {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>