cbjsxt-front-master/src/views/EntDeclaration/auditTaskProcessing/index.vue

<template>
  <div class="audit-project-manage">
    <!-- 页面标题 -->
    <h2>成本监审任务</h2>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="年度：">
          <el-date-picker
            v-model="searchForm.projectYear"
            type="year"
            placeholder="选择年"
            format="yyyy"
            value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="监审项目名称：">
          <el-input
            v-model="searchForm.projectName"
            placeholder="请输入监审项目名称"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="立项来源：">
          <el-select v-model="searchForm.projectSource" placeholder="请选择立项来源">
            <el-option label="年度计划内" value="1"></el-option>
            <el-option label="年度计划外" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="监审形式：">
          <el-select
            v-model="searchForm.auditType"
            placeholder="请选择监审形式"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in dictData['auditType']"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select> -->
        <!-- <el-input v-model="searchForm.auditType" placeholder="请输入监审形式" clearable /> -->
        <!-- </el-form-item> -->
        <!-- <el-form-item label="立项地区：">
          <el-input v-model="searchForm.areaName" placeholder="请输入立项地区" clearable />
        </el-form-item> -->
        <!-- <el-form-item label="监审主体：">
          <el-input v-model="searchForm.auditBody" placeholder="请输入监审主体" clearable />
        </el-form-item> -->
        <!-- <el-form-item label="状态：">
          <el-select v-model="searchForm.currentNode" placeholder="请选择状态">
            <el-option label="提交材料" value="tjcl"></el-option>
            <el-option label="材料初审" value="ccls"></el-option>
            <el-option label="实地审核" value="sdsh"></el-option>
            <el-option label="意见告知" value="yigz"></el-option>
            <el-option label="意见反馈" value="yjfk"></el-option>
            <el-option label="集体审议" value="jtsy"></el-option>
            <el-option label="出具报告" value="cjbg"></el-option>
            <el-option label="归档" value="gd"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="projectList"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="serialNumber"
        label="序号"
        width="60"
        align="center"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="projectYear"
        label="立项年度"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.projectYear }}年</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="areaName"
        label="立项地区"
        width="100"
        align="center"
      />
      <el-table-column
        prop="projectName"
        label="成本监审项目名称"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <a
            href="#"
            class="link-text"
            @click.prevent="handleMessage(scope.row)"
          >
            {{ scope.row.projectName }}
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditPeriod"
        label="监审期间"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sourceType"
        label="立项来源"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ getDictName('projectProposal', scope.row.sourceType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="auditType"
        label="监审形式"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ getDictName('auditType', scope.row.auditType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="监审主体"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="currentNodeName"
        label="状态"
        align="center"
        show-overflow-tooltip
      >
        <!-- <template slot-scope="scope">
          <div v-if="scope.row.currentNode === null && scope.row.currentNode === undefined && scope.row.currentNode === ''">
            <div v-if="scope.row.currentNode === 'tjcl'">提交材料</div>
            <div v-if="scope.row.currentNode === 'ccls'">材料初审</div>
            <div v-if="scope.row.currentNode === 'sdsh'">实地审核</div>
            <div v-if="scope.row.currentNode === 'yigz'">意见告知</div>
            <div v-if="scope.row.currentNode === 'yjfk'">意见反馈</div>
            <div v-if="scope.row.currentNode === 'jtsy'">集体审议</div>
            <div v-if="scope.row.currentNode === 'cjbg'">出具报告</div>
            <div v-if="scope.row.currentNode === 'gd'">归档</div>
          </div>
          <div v-else>
            <div>{{scope.row.currentNodeName}}</div>
          </div>
        </template> -->
      </el-table-column>

      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <!-- 文字按钮样式 -->
          <el-button
            v-if="
              (scope.row.currentNode === 'clcs' ||
                scope.row.currentNode === 'tjcl') &&
              (scope.row.status === '100' || scope.row.status === '500')
            "
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
          >
            填报任务
          </el-button>
          <el-button
            v-if="
              scope.row.currentNode === 'yjfk' && scope.row.status === '250'
            "
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
          >
            意见反馈
          </el-button>
          <el-button size="mini" type="text" @click="handleMessage(scope.row)">
            查看
          </el-button>
          <!-- <el-button
            size="mini"
            type="text"
            @click="handleEstablish(scope.row)"
          >
            立项
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <taskInfo ref="taskInfo" />

    <!-- 填报任务侧边弹窗 -->
    <task-fill-in
      ref="taskFillIn"
      :visible.sync="taskFillInVisible"
      :task-info="currentTaskInfo"
      :view-mode="taskViewMode"
      @close="handleTaskFillInClose"
      @refresh="handleTaskFillInRefresh"
    />
  </div>
</template>

<script>
  import { Message, MessageBox } from 'element-ui'
  import { getTaskHandlingList } from '@/api/auditTaskProcessing'
  import { dictMixin } from '@/mixins/useDict'
  import taskInfo from '@/components/task/taskInfo.vue'
  import TaskFillIn from '@/views/EntDeclaration/auditTaskManagement/taskFillIn.vue'
  export default {
    name: 'AuditTaskProcessingView',
    components: {
      taskInfo,
      TaskFillIn,
    },
    mixins: [dictMixin],
    data() {
      return {
        dictData: {
          auditType: [], //监审形式
          projectProposal: [], //立项来源
        },
        loading: false,
        // 搜索表单
        searchForm: {
          pageNum: 1,
          pageSize: 10,
          projectYear: '',
          projectName: '',
          projectSource: '',
          auditForm: '',
          auditType: '',
          areaName: '',
          auditBody: '',
          currentNode: '',
        },
        // 项目列表
        projectList: [],
        // 分页信息
        currentPage: 1,
        pageSize: 10,
        total: 3,
        // 填报任务弹窗相关
        taskFillInVisible: false,
        currentTaskInfo: {},
        taskViewMode: false,
      }
    },
    mounted() {
      this.handleSearch()
    },
    methods: {
      // 处理搜索
      handleSearch() {
        this.currentPage = 1
        this.searchForm.pageNum = 1
        this.getTaskHandlingPage()
      },

      // 处理查看
      handleView(row) {
        // this.dialogTitle = '查看项目'
        // this.isView = true
        // this.currentProject = { ...row }
        // this.dialogVisible = true
        this.$router.push({
          path: '/dataManagement/EntDeclaration/auditTaskManagementProjectInfo',
        })
      },

      handleEstablishDialogClose() {},
      // 处理分页大小变化
      handleSizeChange(val) {
        this.pageSize = val
        this.searchForm.pageSize = val
        this.searchForm.pageNum = 1
        this.currentPage = 1
        this.getTaskHandlingPage()
      },
      // 处理当前页变化
      handleCurrentChange(val) {
        this.currentPage = val
        this.searchForm.pageNum = val
        this.getTaskHandlingPage()
      },
      // 填报任务
      handleEdit(row) {
        console.log('填报任务', row)
        this.currentTaskInfo = row || {}
        this.taskViewMode = false
        // 使用ref调用组件的open方法
        this.$nextTick(() => {
          if (this.$refs.taskFillIn) {
            this.$refs.taskFillIn.open(row, false)
          }
        })
      },
      // 填报任务弹窗关闭
      handleTaskFillInClose() {
        this.taskFillInVisible = false
        this.currentTaskInfo = {}
      },
      // 填报任务提交成功后刷新列表
      handleTaskFillInRefresh() {
        // 刷新列表数据
        this.getTaskHandlingPage()
      },
      // 查看
      handleMessage(row) {
        this.$refs.taskInfo.open(row)
        // console.log(row)
        // this.$router.push({
        //   path: '/dataManagement/EntDeclaration/auditTaskManagementProjectInfo',
        //   query: {
        //     info: row,
        //     viewMode: true, // 标识为查看模式
        //   },
        // })
      },
      // 任务办理列表
      getTaskHandlingPage() {
        this.loading = true
        getTaskHandlingList(this.searchForm)
          .then((res) => {
            console.log('任务办理列表', res)
            this.projectList = res.value.records
            this.total = res.value.total
            this.loading = false
          })
          .catch((err) => {
            console.log(err)
            this.loading = false
          })
      },
    },
  }
</script>

<style scoped>
  .audit-project-manage {
    padding: 20px;
  }

  h2 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #303133;
  }

  .search-container {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }

  .demo-form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .link-text {
    color: #409eff;
    cursor: pointer;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  /* 对话框样式 */
  .dialog-content h3 {
    margin-bottom: 20px;
    font-size: 16px;
    color: #303133;
  }
</style>