bonus-ui/src/views/screen/wsScreen/components/left/AllEquip.vue

<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="65%"
      :modal="false"
      class="dlg-box"
    >
      <div>
        <!-- 自定义title -->
        <i class="close-btn" @click="dialogVisible = false" />
        <div class="dlg-title">全量装备</div>

        <!-- 表单 -->
        <el-form
          v-show="showSearch"
          :model="queryParams"
          ref="queryForm"
          size="small"
          inline
          label-width="100px"
          @submit.native.prevent
        >
          <el-form-item label="装备范围" prop="deptName">
            <el-select
              v-model="queryParams.deptName"
              placeholder="请选择"
              clearable
              style="width: 240px"
              @change="changeDept"
            >
              <el-option v-for="item in deptNameList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="产权单位" prop="companyName">
            <el-select v-model="queryParams.companyName" placeholder="请选择" clearable style="width: 240px">
              <el-option
                v-for="item in companyNameList"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工程专业" prop="proType">
            <el-select
              v-model="queryParams.proType"
              placeholder="请选择"
              clearable
              style="width: 240px"
              @change="changeProType"
            >
              <el-option v-for="item in proTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="装备类目" prop="deviceSeries">
            <el-cascader
              v-model="deviceSeries"
              :options="deviceSeriesList"
              clearable
              @change="changeDeviceSeries"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="装备名称" prop="deviceName">
            <el-input v-model="queryParams.deviceName" placeholder="请输入" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="规格型号" prop="devModel">
            <el-input v-model="queryParams.devModel" placeholder="请输入" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="装备编号" prop="code">
            <el-input v-model="queryParams.code" placeholder="请输入" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="装备原始编码" prop="identifyCode">
            <el-input v-model="queryParams.identifyCode" placeholder="请输入" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="装备状态" prop="changeStatus">
            <el-select v-model="queryParams.changeStatus" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="所在项目" prop="onProject">
            <el-select v-model="queryParams.onProject" placeholder="请选择" clearable style="width: 240px">
              <el-option
                v-for="item in onProjectList"
                :key="item.proCode"
                :label="item.proName"
                :value="item.proCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="装备厂家" prop="brand">
            <el-input v-model="queryParams.brand" placeholder="请输入" clearable style="width: 240px" />
            <!-- <el-select v-model="queryParams.brand" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="出厂日期" prop="productionDate">
            <el-date-picker
              v-model="queryParams.productionDate"
              type="date"
              placeholder="请选择"
              clearable
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="使用年限" prop="workingHours">
            <el-select v-model="queryParams.workingHours" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="资产原值" prop="buyPrice">
            <el-input v-model="queryParams.buyPrice" placeholder="请输入" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="下次检测日期" prop="nextCheckTime">
            <el-date-picker
              v-model="queryParams.nextCheckTime"
              type="date"
              placeholder="请选择"
              clearable
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="特征项" prop="featureItem">
            <el-input v-model="queryParams.featureItem" placeholder="请输入" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="特征值" prop="featureValue">
            <el-input v-model="queryParams.featureValue" placeholder="请输入" clearable style="width: 240px" />
            <!-- <el-select v-model="queryParams.featureValue" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in featureValueList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
          </el-form-item>

          <!-- 表单按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button class="btn" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
        </el-row>

        <el-table
          v-loading="isLoading"
          :data="tableList"
          stripe
          highlight-current-row
          style="width: 100%"
          :height="600"
          class="table-container"
        >
          <el-table-column
            type="index"
            width="55"
            label="序号"
            align="center"
            :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column
            v-for="(column, index) in tableColumns"
            show-overflow-tooltip
            :key="index"
            :label="column.label"
            :prop="column.prop"
            align="center"
          >
            <template v-slot="{ row }" v-if="column.prop === 'featureItem'">
              <span>{{ getFeatureItem(row.propertyVoList) }}</span>
            </template>
            <template v-slot="{ row }" v-else-if="column.prop === 'featureValue'">
              <span>{{ getFeatureValue(row.propertyVoList) }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" align="center" width="130">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="" style="color: #409eff">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="88"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceListAPI } from '@/api/EquipmentLedger'
import { getAddressApi, getDeptApi, getMaTypeApi, getFirstLevelApi, getProListApi } from '@/api/wsScreen'

export default {
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      showSearch: true,
      deviceSeries: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptName: '', // 装备范围
        companyName: '', // 地市公司
        deviceName: '', // 装备名称
        deviceSeries: '', // 装备系列
        code: '', // 装备编号
        changeStatus: '', // 装备状态
        onProject: '', // 所在项目
        purchaseDate: '', // 采购日期
        productionDate: '', // 出厂日期
        workingHours: '', // 使用年限
        companyName: '', // 产权单位
        brand: '', // 生产厂家
        buyPrice: '', // 资产原值
        nextCheckTime: '', // 下次检测日期
        featureItem: '', // 特征项
        featureValue: '', // 特征值
      },
      deptNameList: [],
      companyNameList: [],
      deviceSeriesList: [],
      changeStatusList: [
        { label: '在库', value: 1 },
        { label: '自用', value: 2 },
        { label: '共享', value: 3 },
        { label: '退役', value: 4 },
        { label: '维修', value: 5 },
      ],
      proTypeList: [],
      onProjectList: [],
      workingHoursList: [
        { label: '5年', value: 1 },
        { label: '5-10年', value: 2 },
        { label: '10年以上', value: 3 },
      ],
      companyNameList: [
        { label: '单位1', value: 1 },
        { label: '单位2', value: 2 },
      ],
      brandList: [
        { label: '单位1', value: 1 },
        { label: '单位2', value: 2 },
      ],
      buyPriceList: [
        { label: '原值1', value: 1 },
        { label: '原值2', value: 2 },
      ],
      featureValueList: [
        { label: '特征1', value: 1 },
        { label: '特征2', value: 2 },
      ],

      tableColumns: [
        { label: '公司名称', prop: 'companyName' },
        { label: '产权单位', prop: 'companyName' },
        { label: '工程专业', prop: 'proType' },
        { label: '主工序', prop: 'mainGx' },
        { label: '子工序', prop: 'childGx' },
        { label: '装备大类', prop: 'devCategory' },
        { label: '装备小类', prop: 'devSubcategory' },
        { label: '类型分支', prop: 'devName' },
        { label: '装备名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'devModel' },
        { label: '装备编号', prop: 'code' },
        { label: '计量单位', prop: 'unitName' },
        { label: '所在项目', prop: 'proName' },
        { label: '使用到期时间', prop: 'buyPrice' },
        { label: '装备原始编码', prop: 'identifyCode' },
        { label: '出厂日期', prop: 'productionDate' },
        { label: '生产厂家', prop: 'brand' },
        { label: '资产原值', prop: 'buyPrice' },
        { label: '下次维保日期', prop: 'nextCheckTime' },
        { label: '使用年限', prop: 'workingHours' },
        { label: '特征项', prop: 'featureItem' },
        { label: '特征值', prop: 'featureValue' },
      ],
      tableList: [],
      total: 0,
    }
  },
  created() {},
  methods: {
    openDialog() {
      this.dialogVisible = true
      this.getList()
      this.getDeptNameList()
      this.getProTypeList()
      this.getOnProjectList()
    },
    async getList() {
      try {
        const res = await getDeviceListAPI(this.queryParams)
        console.log('🚀 ~ getList ~ res:', res)
        this.tableList = res.data?.rows || []
        this.total = res.data?.total || 0
      } catch (error) {
        console.log('🚀 ~ getList ~ error:', error)
      }
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    // 拼接特征项
    getFeatureItem(item) {
      return item.map((item) => item.propertyName).join(',')
    },
    // 拼接特征值
    getFeatureValue(item) {
      return item.map((item) => item.propertyValue).join(',')
    },
    // 装备范围
    async getDeptNameList() {
      try {
        const res = await getAddressApi()
        console.log('🚀 ~ getDeptNameList ~ res:', res)
        this.deptNameList = res.data || []
      } catch (error) {
        console.log('🚀 ~ getDeptNameList ~ error:', error)
      }
    },
    // 转换为树结构
    convertToSubTree(list) {
      const map = {}
      const tree = []

      // 构建节点映射
      list.forEach((item) => {
        map[item.value] = {
          value: item.value.toString(),
          label: item.label,
        }
      })

      // 构建树形关系
      list.forEach((item) => {
        const current = map[item.value]
        const parent = map[item.parentId]

        if (parent) {
          if (!parent.children) {
            parent.children = []
          }
          parent.children.push(current)
        } else {
          tree.push(current)
        }
      })

      return tree
    },
    changeDept(val) {
      if (val) {
        this.getCompanyNameList(val)
      } else {
        this.companyNameList = []
        this.queryParams.companyName = ''
      }
    },
    // 地市公司
    async getCompanyNameList(code) {
      console.log('🚀 ~ getCompanyNameList ~ code:', code)
      try {
        const res = await getDeptApi({ code })
        console.log('🚀 ~ getCompanyNameList ~ res:', res)
        this.companyNameList = res.data || []
      } catch (error) {
        console.log('🚀 ~ getCompanyNameList ~ error:', error)
      }
    },
    // 装备类目
    async getDeviceSeriesList(firstLevelId) {
      try {
        const res = await getMaTypeApi({ firstLevelId })
        console.log('🚀 ~ getMaTypeApi ~ res:', res)
        this.deviceSeriesList = this.convertToSubTree(res.data) || []
      } catch (error) {
        console.log('🚀 ~ getMaTypeApi ~ error:', error)
      }
    },
    changeDeviceSeries(val) {
      console.log('🚀 ~ changeDeviceSeries ~ val:', val)
      if (!val) {
        this.queryParams.deviceSeries == ''
        return
      }
      this.queryParams.deviceSeries = val[val.length - 1]
    },
    // 工程专业
    async getProTypeList() {
      try {
        const res = await getFirstLevelApi()
        this.proTypeList = res.data || []
      } catch (error) {
        console.log('🚀 ~ getProTypeList ~ error:', error)
      }
    },
    changeProType(val) {
      console.log('🚀 ~ changeProType ~ val:', val)
      if (val) {
        this.getDeviceSeriesList(val)
      } else {
        this.deviceSeriesList = []
        this.queryParams.deviceSeries = ''
      }
    },
    // 所在项目
    async getOnProjectList() {
      try {
        const res = await getProListApi()
        this.onProjectList = res.data || []
      } catch (error) {
        console.log('🚀 ~ getOnProjectList ~ error:', error)
      }
    },
    // 导出数据
    handleExport() {
      // 提示
      this.$message({
        type: 'warning',
        message: '导出功能开发中，敬请期待！',
      })
      try {
        let fileName = `导出_${formatTime(new Date())}.xLsx`
        let url = '/material/backstage/costPush/exportPushCheck'
        const params = { ...this.queryParams }
        console.log('🚀 ~ 导出 ~ params:', params)
        // this.derive(url, params, fileName)
        // this.download(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: transparent !important;
}

::v-deep .el-dialog .el-dialog__body {
  background-image: url('../../img/all-dialog.png');
  background-size: 100% 100%;
  color: #fff;
}
::v-deep .el-dialog__header {
  display: none;
}
// 输入框
::v-deep .el-input__inner {
  background: rgba(3, 16, 44, 0.5) !important;
}
::v-deep .el-button--primary {
  background: #3165d6;
  border-color: #3165d6;
}
::v-deep .el-button--mini.is-circle {
  background-color: rgba(16, 37, 81, 0.5);
  color: #fff;
}
// 表格 - 单元格
::v-deep .el-table th.el-table__cell {
  color: #fff;
  background-color: transparent !important;
}
// 表格 - 每一行
::v-deep .el-table tr {
  background-color: transparent !important;
}
// 表头
::v-deep .el-table thead tr {
  background: url('../../img/all-table-tr.png');
  background-size: 100% 100%;
}
// 点击后背景色
::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background: #10264a;
}
// 鼠标移入
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(16, 37, 81, 0.9);
}
// stripe - 斑马线
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #0d214580;
}
// 分页背景
::v-deep .pagination-container {
  background-color: transparent;
}
// 分页-按钮-选中
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3165d6;
}
// 分页-按钮-未选中
::v-deep .el-pagination.is-background .el-pager li {
  background-color: rgba(16, 37, 81, 0.5);
}
// 分页-上一页
::v-deep .el-pagination.is-background .btn-prev {
  background-color: rgba(16, 37, 81, 0.5);
}
// 分页-下一页
::v-deep .el-pagination.is-background .btn-next {
  background-color: rgba(16, 37, 81, 0.5);
}

// --
.btn {
  background-color: rgba(16, 37, 81, 0.5);
  color: #fff;
  border: none;
  // 选中颜色
  &:hover {
    background-color: rgba(16, 37, 81, 0.5);
  }
  // 点击颜色
  &:active {
    background-color: rgba(16, 37, 81, 0.5);
  }
}
.table-container {
  color: #fff;
  background-color: #04112a80;
  //#071934
  /* background: url('../../img/tableTr.png') no-repeat center center;
  background-size: 100% 100%; */
}
.dlg-box {
  position: absolute;
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-image: url('../../img/close.png');
    background-size: 100% 100%;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }
}
</style>