bonus-ui/src/views/business/warehouse/auditDetails.vue

<template>
  <!-- 基础页面 -->
  <div class="app-container">
    <el-card v-show="showSearch" style="margin-bottom: 20px">
      <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="100px">

        <el-form-item label="需求单位" prop="useUnit">
          <el-input v-model="queryParams.useUnit" style="width: 200px" placeholder="请输入需求单位" :disabled="queryParams.status=='0'"
                    clearable
          />
        </el-form-item>

        <el-form-item label="使用项目" prop="proName">
          <el-input style="width: 200px" disabled v-model="queryParams.proName"/>
        </el-form-item>

        <el-form-item label="项目类型" prop="proType">
          <el-input style="width: 200px" disabled v-model="queryParams.proType"/>
        </el-form-item>
        <el-form-item label="电压等级" prop="voltageLevel">
          <el-input style="width: 200px" disabled v-model="queryParams.voltageLevel"/>
        </el-form-item>
        <el-form-item label="项目所在省" prop="proProvince">
          <el-input style="width: 200px" disabled v-model="queryParams.proProvince"/>
        </el-form-item>
        <el-form-item label="项目所在市" prop="proCity">
          <el-input style="width: 200px" disabled v-model="queryParams.proCity"/>
        </el-form-item>
        <el-form-item label="项目所在区/县" prop="proCounty">
          <el-input style="width: 200px" disabled v-model="queryParams.proCounty"/>
        </el-form-item>


      </el-form>

    </el-card>

    <el-card>
      <el-row :gutter="10" class="mb8" justify="end">
        <el-col :span="4">
          <span style="font-size: 20px; font-weight: 800">申请审核列表</span>
        </el-col>
        <el-col v-if="!routerParams.isView" :span="20" style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="handlePass">通过</el-button>
          <el-button type="primary" @click="handleFail">驳回</el-button>
        </el-col>
      </el-row>

      <el-table
        v-loading="isLoading"
        :data="tableList"
        highlight-current-row
        border
        stripe
        :max-height="650"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
        />
        <el-table-column label="分类" align="center" prop="devType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.devType==1">{{ '装备' }}</span>
            <span v-if="scope.row.devType==2">{{ '工具' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类目" align="center" prop="category" :show-overflow-tooltip="true"/>
        <el-table-column label="名称" align="center" prop="typeName" :show-overflow-tooltip="true" width="120px"/>
        <el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true"/>
        <el-table-column label="管理模式" align="center" prop="manageType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.manageType==0">{{ '编码设备' }}</span>
            <span v-if="scope.row.manageType==1">{{ '数量设备' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备编码" align="center" prop="devCode" :show-overflow-tooltip="true" width="140px"/>
        <el-table-column label="当前自用" align="center" prop="useNum" :show-overflow-tooltip="true"/>
        <el-table-column label="退库数量" align="center" prop="num" :show-overflow-tooltip="true"/>
        <el-table-column label="使用到期日期" align="center" prop="useTime" width="160px"/>
        <el-table-column label="是否维修" align="center" prop="isRepair" width="160px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isRepair == '0'" type="warning">否</el-tag>
            <el-tag v-if="scope.row.isRepair == '1'" type="success">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="维修数量" align="center" prop="realNum" width="160px"/>
      </el-table>
    </el-card>

  </div>
</template>

<script>
import { getApplyDetailsApi, applyPassApi } from '@/api/business/warehouse'
import {
  getUseProjectListAPI,
  getVoltageListAPI
} from '@/api/EquipmentLedger/equ-out'
import { regionData } from 'element-china-area-data'

export default {
  name: 'AddEditApply',
  // components: { AddNum, AddCode },
  data() {
    return {
      routerParams: {},
      isLoading: false,
      showSearch: true,
      timeRange: [],
      queryParams: {
        type: 2, // 出库
        status: '0', // 变更状态
        proCode: '', // 使用项目id
        proName: '', // 使用项目名称
        proType: '', // 项目类型
        voltageLevel: '', // 电压等级
        proProvince: '', // 项目所在省
        proCity: '', // 项目所在市
        proCounty: '', // 项目所在区/县
        proLocation: '', // 详细地址
        useUnit: '', // 需求单位
        useTime: null,
        pageNum: 1, // 页码
        pageSize: 10 // 每页条数
      },
      useProjectList: [], // 使用项目下拉选
      voltageList: [], // 电压等级下拉选
      provinceList: [],
      cityList: [],
      countyList: [],

      typeList: [
        { label: '数量管理', value: '1' },
        { label: '编码管理', value: '0' }
      ],
      total: 0, // 总条数
      // 表格数据
      tableList: [],
      openAdd: false, // 添加申请
      addQuery: { // 添加申请查询
        typeName: '', // 名称
        typeModelName: '', // 规格型号
        devCode: '', // 设备编码
        pageNum: 1, // 页码
        pageSize: 10 // 每页条数
      },
      addTotal: 0, // 总条数
      addList: [], // 添加申请列表
      addTempList: [], // 添加申请临时列表
      ids: [], // 选中的id
      single: false, // 单选
      multiple: false // 多选
    }
  },
  created() {
    this.routerParams = this.$route.query
    let title = '审核'
    if (this.routerParams.isView) {
      title = '查看审核'
    } else if (this.routerParams.isEdit) {
      title = '审核详情'
    }
    this.queryParams.id = this.routerParams.id || ''
    this.getUseProjectList()
    this.queryParams.status == '0' ? this.queryParams.useUnit = sessionStorage.getItem('deptName') : ''
    this.provinceList = regionData
    const obj = Object.assign({}, this.$route, { title })
    this.$tab.updatePage(obj)
    this.getList()
  },
  methods: {
    // 获取使用项目的下拉选
    async getUseProjectList() {
      const res = await getUseProjectListAPI()
      const result = await getVoltageListAPI()
      this.useProjectList = res.data
      this.voltageList = result.data
    },

    // 选择使用项目
    onChangeProCode(value) {
      this.queryParams.proCode = value
      const item = this.useProjectList.find((item) => item.proCode === value)
      if (item) {
        this.queryParams.proName = item.proName
        const { proTypeName, voltage, city, county, province } = item
        this.queryParams.proType = proTypeName
        this.queryParams.voltageLevel = voltage + 'kV'
        this.queryParams.proProvince = province
        this.queryParams.proCity = city
        this.queryParams.proCounty = county
      }
    },

    // 选择省份
    onChangeProvince(value) {
      if (!value) {
        this.cityList = []
        return
      }
      this.cityList = this.provinceList.find((item) => item.label === value)?.children || []
    },

    // 选择城市
    onChangeCity(value) {
      if (!value) {
        this.countyList = []
        return
      }
      this.countyList = this.cityList.find((item) => item.label === value)?.children || []
    },

    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.queryParams.parentId = '0'
      this.queryParams.level = '1'
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    // 获取列表
    async getList(emit = {}) {
      console.log('🚀 ~ emit:', emit)
      if (emit.id) {
        this.queryParams.id = emit.id
        // 存到 route
        this.$route.query.id = this.queryParams.id
      }
      console.log('列表-查询', this.queryParams)
      this.isLoading = true
      try {
        const params = { ...this.queryParams }
        const res = await getApplyDetailsApi(params)
        this.tableList = res.data.devDetailsList || []
        if (this.queryParams.id) {
          this.queryParams = res.data.devInfo || {}
          this.queryParams.status = '0'
          this.queryParams.useUnit = sessionStorage.getItem('deptName')
        }
        this.total = res.data.total || 0
      } catch (error) {
        this.tableList = []
        this.total = 0
      } finally {
        this.isLoading = false
      }
    },

    //通过
    handlePass() {
      this.$confirm('是否确定通过?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        applyPassApi({ id: this.queryParams.id, taskStatus: '1' }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.$router.go(-1)
        })
      })
    },

    // 驳回
    handleFail() {
      this.$confirm('是否确定驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        applyPassApi({ id: this.queryParams.id, taskStatus: '2' }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.$router.go(-1)
        })
      })
    },

    handleBack() {
      this.$router.push({ path: '/business/warehouse/auditList' })
    }

  }
}
</script>

<style lang="scss" scoped>
</style>