zhouwx
2026-06-17 facea208b2fc7c8c7a0d176df06305b866c6520f
src/views/hazardousChemicals/subscribeApplyManage/approval/index.vue
@@ -2,16 +2,16 @@
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
<!--        <el-form-item>-->
<!--          <el-button-->
<!--              type="primary"-->
<!--              plain-->
<!--              icon="Plus"-->
<!--              @click="openDialog('add',{})"-->
<!--          >新增</el-button>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="openDialog('add',{})"
          >新增</el-button>
        </el-form-item>
        <el-form-item label="审批状态:" >
          <el-select v-model="data.queryParams.state" placeholder="请选择" >
          <el-select v-model="data.queryParams.status" placeholder="请选择" >
            <el-option
                v-for="item in data.stateOptions"
                :key="item.id"
@@ -20,7 +20,7 @@
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审批人:" prop="userId" >
        <el-form-item label="申购人:" >
          <el-select
              clearable
              v-model="data.userName"
@@ -28,7 +28,7 @@
              remote
              @change="selectValue"
              reserve-keyword
              placeholder="请输入审批人名称"
              placeholder="请输入申购人名称"
              remote-show-suffix
              :remote-method="getPeopleList"
              style="width: 100%"
@@ -57,24 +57,62 @@
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="申购单号" prop="creditCode" align="center"  />
      <el-table-column label="危化品名称" prop="code" align="center" />
      <el-table-column label="申购数量" prop="name" align="center" />
      <el-table-column label="申购人" prop="major" align="center"  />
      <el-table-column label="审批人" prop="phone" align="center"/>
      <el-table-column label="申购文件" prop="phone" align="center">
      <el-table-column label="申购单号" prop="subscribeNum" align="center"  />
      <el-table-column label="危化品名称" align="center"  class-name="subscribe-quantity-cell" width="200">
        <template #default="scope">
          <el-link v-if="scope.row.fileName" style="" type="primary" @click="openFile(scope.row.filePath)">{{scope.row.fileName}}</el-link>
          <div style="width: 100%; height: 100%;display: flex; flex-direction: column;justify-content: center;align-items: center; ">
            <div
                v-for="(item, index) in scope.row.subscribeHazmats"
                :key="item.id"
                style="
              width: 100%;
              text-align: center;
              padding: 8px 0;
              border-bottom: 1px solid #ebeef5;"
                :style="{
                borderBottom: index === scope.row.subscribeHazmats.length - 1 ? 'none' : '1px solid #ebeef5'
                }"
            >
              <span>{{ item.hazmatName }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审批状态" prop="phone" align="center">
      <el-table-column label="申购数量" align="center" class-name="subscribe-quantity-cell">
        <template #default="scope">
          <span> {{scope.row.state == 0 ? '未审批' :scope.row.state == 1 ?'审批通过':scope.row.state == 2 ?'审批驳回':''}}</span><span></span>
          <div style="width: 100%; height: 100%;display: flex; flex-direction: column;justify-content: center;align-items: center; ">
            <div
                v-for="(item, index) in scope.row.subscribeHazmats"
                style="
            width: 100%;
            text-align: center;
            padding: 8px 0;
            border-bottom: 1px solid #ebeef5;"
                :style="{
              borderBottom: index === scope.row.subscribeHazmats.length - 1 ? 'none' : '1px solid #ebeef5'
            }"
            >
              {{ item.hazmatCount }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申购人" prop="subscribePersonName" align="center"  />
      <el-table-column label="审批人" prop="checkName" align="center"/>
      <el-table-column label="申购文件" prop="fileName" align="center">
        <template #default="scope">
          <el-link v-if="scope.row.fileName" style="" type="primary" @click="openFile(scope.row.filePath)">{{scope.row.fileName}}</el-link>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="审批状态" prop="status" align="center">
        <template #default="scope">
          <span> {{scope.row.status == 0 ? '未审批' :scope.row.status == 1 ?'审批通过':scope.row.status == 2 ?'审批驳回':''}}</span><span></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" >
        <template #default="scope">
          <el-button v-if="scope.row.state == 0" link type="primary" @click="openDialog('approval',scope.row)">审批</el-button>
          <el-button v-if="scope.row.status == 0" link type="danger" @click="openDialog('approval',scope.row)">审批</el-button>
          <el-button link type="primary" @click="openDialog('view',scope.row)">查看</el-button>
        </template>
      </el-table-column>
@@ -99,6 +137,8 @@
import editDialog from "./components/editDialog.vue";
import {getUser} from "@/api/hazardousChemicals/user";
import {renderAsync} from "docx-preview";
import {delSubscribe, getAuditList, getSubscribeList} from "@/api/hazardousChemicals/subscribeApply";
import Cookies from "js-cookie";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
@@ -106,8 +146,9 @@
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    state: null,
    userId:null
    status: null,
    subscribePersonId:null,
    checkId:null
  },
  total: 0,
  dataList: [],
@@ -132,8 +173,11 @@
const { queryParams, total, dataList } = toRefs(data);
const classHourRef = ref();
onMounted(()=>{
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  data.queryParams.checkId = userInfo.id
  getList()
  getPeopleList("")
})
onUnmounted(()=>{
@@ -142,13 +186,16 @@
const getList = async () => {
  loading.value = true
  // const res = await getCompany(data.queryParams)
  // if(res.code == 200){
  //   data.dataList = res.data.list
  //   data.total = res.data.total
  // }else{
  //   ElMessage.warning(res.message)
  // }
  const res = await getAuditList(data.queryParams).catch(error => {
    loading.value = false
    return
  })
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}
@@ -161,8 +208,9 @@
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    state: null,
    userId:null
    status: null,
    subscribePersonId:null,
    checkId:null
  }
  data.userName = ''
  getList()
@@ -178,7 +226,7 @@
        type: 'warning',
      })
      .then( async() => {
        const res = await delCompany(val.id)
        const res = await delSubscribe(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
@@ -190,11 +238,11 @@
const getPeopleList = async (val)=>{
  let queryParams = {}
  if(val != ""){
     queryParams = {
    queryParams = {
      name: val
    }
  }else {
     queryParams = {
    queryParams = {
      pageNum: 1,
      pageSize: 10
    }
@@ -208,11 +256,12 @@
}
const selectValue =  (val) => {
  if(!val){
    data.queryParams.userId = null
    data.queryParams.subscribePersonId = null
  }
  data.peopleList.forEach(item => {
    if(item.name === val){
      data.queryParams.userId = item.id
      data.queryParams.subscribePersonId = item.id
    }
  })
}
@@ -258,5 +307,10 @@
    }
  }
}
</script>
<style scoped>
/* 只对申购数量这一列生效 */
:deep(.subscribe-quantity-cell .cell) {
  padding: 0 !important; /* 关键:把默认的padding清零,优先级拉满 */
}
</style>