完成会议审批模块

yz3456

2024-05-03 7678c30ff853730d22a0fa374367404af8aea946

 ruoyi-ui/src/views/meeting/approve.vue

@@ -1,10 +1,8 @@
<template>
  <div class="app-container">

    <el-backtop :bottom="150" :right="30">
      <el-button type="primary" circle class="el-icon-top"></el-button>
    </el-backtop>


    <h1 style="font-size:21px;padding-top:30px;display: flex;">
      <span>会议审批</span>
@@ -12,128 +10,286 @@
      <div style="display: flex; align-items: center;">
      </div>
    </h1>

    <hr>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">

    <el-form :model="queryParams1">
      <el-row>
        <el-form-item label="" prop="people">
          <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 200px;
      <el-form-item label="时间" prop="happenTime">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px;
                   height: 35px;
                   text-align: left;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
                   opacity: 0.5;"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        </el-form-item>
      </el-row>
      <el-form-item label="地点" prop="place" >
        <el-input
          v-model="queryParams.place"
          placeholder="请输入地点"
          clearable
          style="width: 200px;
                   height: 35px;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请部门或家庭" prop="applyApart" >
        <el-input
          v-model="queryParams.applyApart"
          placeholder="请输入申请部门或家庭"
          clearable
          style="width: 200px;
                   height: 35px;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button  size="mini" @click="handleQuery" style=" width: 65px; height: 32px;background: #FFDDE3;
          border-radius: 6px 6px 6px 6px;opacity:1;">搜索</el-button>
        <el-button  size="mini" @click="resetQuery" style=" width: 65px;height: 32px; background: #FFDDE3;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border :header-cell-style="{ background: 'pink', fontSize: '13px', color: 'black' }"
      :row-class-name="tableRowClassName" :row-key="getRowId">

    <el-table v-loading="loading"  :data="meetingList" :row-key="getRowId" ref="multipleTable"
      @selection-change="handleSelectionChange"  :row-class-name="tableRowClassName">
      <!-- <el-table-column type="selection"  :reserve-selection="true" width="55"  align="center" /> -->

      <el-table-column fixed label="序号" sortable type="index" :index="(queryParams.pageNum-1)*queryParams.pageSize+1" width="80px"/>
      <el-table-column label="标题" prop="title" sortable align="center">
        <template slot-scope="scope">{{ scope.row.title
      ? scope.row.title : '————' }}</template>
      </el-table-column>

      <el-table-column label="地点" prop="address" sortable align="center">
      <el-table-column label="地点" prop="place" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.address ? scope.row.address : '————' }}</template>
      scope.row.place ? scope.row.place : '————' }}</template>
      </el-table-column>

      <el-table-column label="可容纳人数" prop="capacity" sortable align="center">
      <el-table-column label="可容纳人数" prop="conPeople" sortable align="center" min-width="150">
        <template slot-scope="scope">{{
      scope.row.capacity ? scope.row.capacity : '————' }}</template>
      scope.row.conPeople ? scope.row.conPeople : '————' }}</template>
      </el-table-column>

      <el-table-column label="参与人数" prop="persons" sortable align="center">
      <el-table-column label="参与人数" prop="partPeople" sortable align="center" min-width="120">
        <template slot-scope="scope">{{
      scope.row.persons ? scope.row.persons : '————' }}</template>
      scope.row.partPeople ? scope.row.partPeople : '————' }}</template>
      </el-table-column>

      <el-table-column label="申请人" prop="applicant" sortable align="center">
      <el-table-column label="申请人" prop="applyPerson" sortable align="center" min-width="120">
        <template slot-scope="scope">{{
      scope.row.applicant ? scope.row.applicant : '————' }}</template>
      scope.row.applyPerson ? scope.row.applyPerson : '————' }}</template>
      </el-table-column>

      <el-table-column label="申请部门或家庭" prop="applyOrganization" sortable align="center">
      <el-table-column label="申请部门或家庭" prop="applyApart" sortable align="center" min-width="150">
        <template slot-scope="scope">{{
      scope.row.applyOrganization ? scope.row.applyOrganization : '————' }}</template>
      scope.row.applyApart ? scope.row.applyApart : '————' }}</template>
      </el-table-column>

      <el-table-column label="开始时间" prop="begin" sortable align="center">
        <template slot-scope="scope">{{ scope.row.begin
      ? scope.row.begin : '————' }}</template>
      <el-table-column label="开始时间" prop="startTime" sortable align="center"min-width="120">
        <template slot-scope="scope">{{ scope.row.startTime
      ? scope.row.startTime : '————' }}</template>
      </el-table-column>

      <el-table-column label="结束时间" prop="end" sortable align="center">
        <template slot-scope="scope">{{ scope.row.end ?
      scope.row.end : '————' }}</template>
      <el-table-column label="结束时间" prop="endTime" sortable align="center" min-width="120">
        <template slot-scope="scope">{{ scope.row.endTime ?
      scope.row.endTime : '————' }}</template>
      </el-table-column>

      <el-table-column label="是否摆放水牌" prop="card" sortable align="center">
        <template slot-scope="scope">{{ scope.row.card
      ? scope.row.card : '————' }}</template>
      <el-table-column label="是否摆放水牌" prop="isPlacebrand" sortable align="center" min-width="150">
        <template slot-scope="scope">{{scope.row.isPlacebrand===1? '是': '否'}}</template>
      </el-table-column>

      <el-table-column label="联系人" prop="name" sortable align="center">
        <template slot-scope="scope">{{ scope.row.name ?
      scope.row.name : '————' }}</template>
      <el-table-column label="联系人" prop="connPerson" sortable align="center" min-width="100">
        <template slot-scope="scope">{{ scope.row.connPerson ?
      scope.row.connPerson : '————' }}</template>
      </el-table-column>

      <el-table-column label="联系电话" prop="phone" sortable align="center">
        <template slot-scope="scope">{{ scope.row.phone
      ? scope.row.phone : '————' }}</template>
      <el-table-column label="联系电话" prop="connPhone" sortable align="center" min-width="100">
        <template slot-scope="scope">{{ scope.row.connPhone
      ? scope.row.connPhone : '————' }}</template>
      </el-table-column>

      <el-table-column label="审批状态" prop="status" sortable align="center">
        <template slot-scope="scope">{{ scope.row.status
      ? scope.row.status : '————' }}</template>
      <el-table-column label="状态" prop="statu" sortable align="center">
        <template slot-scope="scope">{{scope.row.statu===1? '同意': '拒绝'}}</template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <div class="button-container">
            <el-button v-show="agree" size="mini" type="text" @click="agree(scope.row)">同意</el-button>
            <el-button v-show="agree" size="mini" type="text" icon="el-icon-delete">拒绝</el-button>
            <el-button v-show="agree1" size="mini" type="text" icon="el-icon-delete">重新审批</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="agree(scope.row)">同意</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="refuse(scope.row)">拒绝</el-button>
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right" @click="handleCheck(scope.row)">查看详情</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      style="background: #FEF7FC;"
    />

  </div>
</template>
<script>
  import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
  import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";


  import { Notification, MessageBox, Message, Loading } from 'element-ui'
  //在system/note/index.js中导入接口函数  --接好了
  import {listMeeting2,updateStatu} from "@/api/meeting/index";
export default {
  created() {
        this.getList();
  },
  data() {
    return {
      tableData: [
        { title: '1', name: 'asasd', address: 'asdadsdasd', id: 9, age: '30' },
        { title: '2', name: 'qweqwqwe', address: 'qweqweqwe', id: 2, age: '30' },
        { title: '3', name: 'zxczxczxc', address: 'zxczxczcx', id: 3, age: '30' },
        { title: '4', name: 'fghfghfh', address: 'fghfghfgh', id: 4, age: '30' },
        { title: '5', name: 'rtyrtyrty', address: 'rtyrtyrty', id: 5, age: '30' },
        { title: '6', name: 'yuiyuiyui', address: 'yuiyuiyui', id: 6, age: '30' },
        { title: '7', name: 'hjkljkljk', address: 'jkljklhlkjl', id: 7, age: '30' },
      ],
      queryParams1: {
      formDat1:{
        id:undefined,
        statu:undefined
      },
        // 显示搜索条件
              loading: true,
        showSearch: true,
        open: false,
        title: "",
        // 总条数
        total: 0,
        meetingList: [],
        formDat:{
          id: undefined,
          title: undefined,
          place: undefined,
          conPeople: undefined,
          partPeople: undefined,
          applyPerson: undefined,
          applyApart: undefined,
          startTime: undefined,
          endTime: undefined,
          happenStartTime: undefined,
          happenEndTime: undefined,
          isPlacebrand: undefined,
          connPerson: undefined,
          connPhone: undefined,
          statu: undefined,
          createTime: undefined
        },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        happenTime: undefined,
        people: undefined,
        address: undefined,
        title: undefined,
        remark: undefined,
        status: undefined,
        agree1: false,
        agree: true,
        place:undefined,
        apply_Apart:undefined,
        start_Time:undefined,
        applyPerson:undefined
      },
      dateRange: [],
      // 表单校验
      rules: {},
        typeOptions: [
          {
          value: '1',
          label: '是',
          },
          {
            value: '0',
            label: '否',
      }
          ],
          typeOptions2: [
            {
            value: '1',
            label: '同意',
            },
            {
              value: '0',
              label: '拒绝',
            }
            ],
    }
  },
  methods: {
    agree(row){
      this.formDat1.id = row.id
      this.formDat1.statu = 1
      // this.$refs['elForm'].validate(valid => {
        // if (valid) {
          if (row.id != undefined) {
            updateStatu(this.formDat1).then(response => {
              this.$modal.msgSuccess("修改成功");
              // this.btn = false
            });
          } else {
            this.$modal.msgSuccess("修改失败");
          }
          this.getList();
          this.getList();
        // }
      // })
    },
    refuse(row){
      this.formDat1.id = row.id
      this.formDat1.statu = 0
      if (row.id != undefined) {
          updateStatu(this.formDat1).then(response => {
            this.$modal.msgSuccess("修改成功");
            // this.btn = false
          });
        } else {
          this.$modal.msgSuccess("修改失败");
        }
        this.getList();
        this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    //  alert(this.ids)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    getList() {
      this.loading = true;
        this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0]
        this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1]
      listMeeting2(this.queryParams).then(response => {
          this.meetingList = response.data.data;

          this.total = response.data.total;
          this.loading = false;
        }

      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },



    tableRowClassName({ row, rowIndex }) {

@@ -147,14 +303,7 @@
      return row.id
    },

    agree(row){
    this.agree1 = true
    this.agree = false
      row.status = '同意'


      alert(row.status)
    },
    // 查看详细信息
    handleCheck(row){
      const id = row.id;
@@ -168,6 +317,11 @@
      });
    },






  }
}
</script>