bonus-ui/src/views/EquipmentEntryApply/equipmentInput/index.vue

<template>
  <!-- 修复标题模板字符串语法错误，规范属性顺序 -->
  <!-- 弹窗内容区域 -->
  <div class="app-container" style="height: calc(100vh - 84px);">
    <div class="page-header">
      <div>
        <i class="el-icon-arrow-left goBack-btn" @click="goBack"
           style="border-color: transparent;color: #00a288;background: transparent;padding-left: 0;padding-right: 0;"
        >返回</i>
        <span class="page-title">装备录入</span>
      </div>
      <div class="dialog-footer" style="float: right">
        <el-button size="small" type="primary" @click="handleSubmit" v-if="!isAddVisible"
                   :disabled="tableData.length===0"
        >确认提交
        </el-button>
      </div>
    </div>
    <!-- 商品管理 -->
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      inline
      label-width="auto"
      size="small"
    >
      <el-form-item label="装备名称" prop="deviceName">
        <el-input
          v-model.trim="queryParams.deviceName"
          style="width: 100%"
          clearable
          placeholder="请输入装备名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryTableList">
          查询
        </el-button>
        <el-button
          type="primary"
          @click="resetTableList"
        >
          重置
        </el-button>
        <el-button
          type="primary"
          @click="equipmentDeployment"
          v-show="!isAddVisible"
        >
          新增装备
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: auto"
      show-overflow-tooltip
    >
      <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
      <el-table-column align="center" label="装备名称">
        <template scope="{ row }">
          {{ `${row.deviceName}` }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="code" label="装备编号"/>
      <el-table-column align="center" prop="typeName" label="装备类目">
        <template scope="{ row }">
          <span>
            {{ row.proType }} <span v-show="row.proType">/</span>
            {{ row.mainGx }}<span v-show="row.mainGx">/</span>
            {{ row.childGx }}<span v-show="row.childGx">/</span>
            {{ row.devCategory }}<span v-show="row.devCategory">/</span>
            {{ row.devSubcategory }}<span v-show="row.devSubcategory">/</span>
            {{ row.devName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="devModel" label="装备型号"/>
      <el-table-column align="center" prop="nextCheckDate" label="下次检验日期">
        <template scope="{ row }">
          <span>{{
              row.nextCheckDate
            }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="装备状态">
        <template scope="{ row }">
          <el-tag v-if="row.entryStatus == 0" size="small" type="info">待审批</el-tag>
          <el-tag v-if="row.entryStatus == 1" size="small" type="warning">已审批</el-tag>
          <el-tag v-if="row.entryStatus == 2" size="small" type="success">审批驳回</el-tag>
          <el-tag v-if="row.entryStatus == 3" size="small" type="danger">草稿</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作"
        min-width="160px"
        align="center"
        v-if="!isAddVisible"
      >
        <template scope="{ row }">
          <el-button
            size="mini"
            type="primary"
            @click="editRowInfo(row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="deleteRowInfo(row)"
          >删除
          </el-button>
        </template>
      </el-table-column>


      <el-table-column
        prop="name"
        label="操作"
        min-width="160px"
        align="center"
        v-if="isApprovalVisible"
      >
        <template scope="{ row }">
          <el-button
            size="small"
            type="primary"
            @click="approval(row,1)"
          >
            通过
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="approval(row,2)"
          >
            驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      @pagination="getList"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
    />
    <EquipmentEntryEditDialog
      :is-visible.sync="isEditVisible"
      :order-id="orderId"
      @getOrderId="getOrderId"
    />
  </div>


</template>

<script>
import EquipmentEntryEditDialog from '@/views/EquipmentEntryApply/equipmentInput/edit.vue'

// 使用defineComponent规范组件定义
import {
  equipmentDraftListApiNew,
  equipmentPassAndRejectApiNew,
  equipmentSubmitApiNew,
  removeDeviceApi
} from '@/api/EquipmentEntryApply'

export default {
  name: 'EquipmentEntryDialog',
  components: { EquipmentEntryEditDialog },
  emits: ['update:isVisible', 'submit'], // 声明事件
  created() {
    console.log(this.$route)
    this.orderId = this.$route.params && this.$route.params.orderId
    this.isAddVisible = this.$route.params && this.$route.params.isAddVisible
    this.isApprovalVisible = this.$route.params && this.$route.params.isApprovalVisible
    this.getList()
  },
  data() {
    return {
      isAddVisible: false,
      isApprovalVisible: false,
      isEditVisible: false,
      orderId: '',
      // 表格数据
      tableData: [],
      total: 0,
      queryParams: {
        orderId: '',
        deviceName: '',
        pageNum: 1,
        pageSize: 10
      },
      // 可添加表单数据
      formData: {
        // 示例字段，可根据实际需求修改
        equipmentName: '',
        model: '',
        quantity: 1
      }
    }
  },
  watch: {
    isVisible(val) {
      if (val) {
        this.getList()
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    async approval(row, status) {
      equipmentPassAndRejectApiNew({ devIds: row.maId, status: status, id: this.orderId }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getList()
        }
      })
    },
    // 获取列表数据
    async getList() {
      try {
        this.queryParams.orderId = this.orderId
        const res = await equipmentDraftListApiNew(this.queryParams)
        this.tableData = res.data.rows
        this.total = res.data.total
      } catch (error) {
        console.error('获取列表失败:', error)
      }
    },

    getOrderId(data) {
      this.orderId = data.orderId
      this.queryTableList()
    },

    // 查询表格数据
    queryTableList() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    equipmentDeployment() {
      this.$router.push({
        name: 'equipmentInputAdd',  // 完整路径
        params: {  // 因为使用path，所以用query传递参数
          orderId: this.orderId
        }
      })
    },

    // 删除按钮
    async deleteRowInfo(row) {
      this.$confirm('是否确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return removeDeviceApi([row.maId])
        })
        .then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getList()
          }
        })
        .catch(() => {
        })
    },
    // 重置表格查询
    resetTableList() {
      this.$refs.queryFormRef.resetFields()
      this.queryParams.pageNum = 1
      this.getList()
    },

    /**
     * 处理表单提交
     */
    handleSubmit() {
      equipmentSubmitApiNew({ id: this.orderId, status: 0 }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          this.goBack()
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  font-size: 18px;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 15px;
    color: #303133;
  }
}

.dialog-content {
  padding: 10px 0;
  min-height: 200px; // 确保有足够高度
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px; // 按钮间距
}
</style>