web-test/src/layout/enterprise/appointment.vue

<template>
  <div id="technical">
    <el-col :span="24" class="main">
      <el-col :span="24" class="left">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>展会预约</span> <span @click="add()">创建对接会</span></el-col>
        <!-- <el-col :span="24" class="downLeftTop">
          <el-image :src="downLeftTopImage"></el-image>
          <span class="topText">
            <span>展会预约</span>
            <span
              ><p>A</p>
              <p>ppointment</p></span
            >
            <span @click="add()">创建对接会</span>
          </span>
        </el-col> -->
        <el-col :span="24" class="infoLeft">
          <el-table :data="resultTable" stripe style="width: 96%" border>
            <el-table-column prop="title" label="对接会标题"> </el-table-column>
            <el-table-column prop="start_time" label="开始时间" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="join_end" label="报名截止时间" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="place" label="地址" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column label="审核状态" align="center">
              <template slot-scope="scoped">
                {{ scoped.row.is_allowed === '0' ? '未审核' : scoped.row.is_allowed === '1' ? '审核通过' : '审核拒绝' }}
              </template>
            </el-table-column>
            <el-table-column label="对接会状态" align="center">
              <template slot-scope="scoped">
                {{ scoped.row.status === '1' ? '开始' : scoped.row.status === '2' ? '结束' : '准备中' }}
              </template>
            </el-table-column>
            <el-table-column prop="desc" label="简介" :show-overflow-tooltip="true"> </el-table-column>

            <el-table-column label="操作" style="width:200px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click.prevent="handleEdit(scope.row.id)"
                  ><el-tooltip class="item" effect="dark" content="编辑" placement="top-start"> <i class="el-icon-edit"></i> </el-tooltip
                ></el-button>

                <el-button size="mini" type="text" @click.prevent="handleshenhe(scope.row.id)" v-if="scope.row.is_allowed == '0'">
                  <el-tooltip class="item" effect="dark" content="审核" placement="top-start"><i class="el-icon-refresh"></i></el-tooltip>
                </el-button>

                <el-button size="mini" type="text" @click.prevent="deleteRow(scope.row.id)">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start"><i class="el-icon-delete"></i></el-tooltip>
                </el-button>

                <el-button size="mini" type="text" v-if="scope.row.is_allowed == '1'" @click.prevent="status(scope.row.id)">
                  <el-tooltip class="item" effect="dark" content="审核对接会状态" placement="top-start"><i class="el-icon-bangzhu"></i></el-tooltip>
                </el-button>

                <el-button size="mini" type="text" v-if="scope.row.is_allowed == '1'" @click.prevent="look(scope.row)">
                  <el-tooltip class="item" effect="dark" content="查看申请状况" placement="top-start"><i class="el-icon-pie-chart"></i></el-tooltip>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <page :total="total" position="center" v-on="$listeners"></page>
          </el-col>
        </el-col>
      </el-col>
    </el-col>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: news } = createNamespacedHelpers('news');
import page from '@/components/pagination.vue';
export default {
  name: 'technical',
  props: {
    resultTable: null,
    total: null,
  },
  components: {
    page,
  },
  data: () => ({
    downLeftTopImage: require('@/assets/live/square_big.png'),
    jishuImage: require('@/assets/live/main3.png'),
  }),
  created() {
    this.searchInfo();
  },
  computed: {
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },

  methods: {
    ...news(['query']),
    async searchInfo() {},
    add() {
      this.$router.push({ path: '/enterprise/duijiedetail' });
    },
    handleEdit(id) {
      console.log(id);
      this.$router.push({ path: '/enterprise/duijiedetail', query: { id: id } });
    },
    handleshenhe(id) {
      this.$router.push({ path: '/enterprise/shenhe', query: { id: id } });
    },
    deleteRow(id) {
      this.$emit('deleteRow', id);
    },

    status(id) {
      console.log(id);
      this.$router.push({ path: '/enterprise/duijiestatus', query: { id: id } });
    },

    look(row) {
      console.log(row);
      this.$router.push({ path: '/enterprise/look', query: { data: row } });
    },
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.leftTop span:last-child {
  float: right;
  cursor: pointer;
}
.jishuImage {
  width: 100%;
  height: 100%;
}
.main {
  width: 100%;
  margin: 0 auto;
  float: none;
}
.left {
  float: left;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px 10px 20px 10px;
}
.leftTitle {
  text-align: center;
  position: relative;
}
.topText {
  width: 94%;
  border-bottom: 2.5px solid #044b79;
  display: inline-block;
  position: relative;
  top: -10px;
  margin: 0 0 0 5px;
}
.topText span:first-child {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  padding: 0 10px;
  top: 4px;
}

.topText span p:first-child {
  font-weight: 800;
  font-size: 34px;
  color: #92959a;
  top: 11px;
  display: inline-block;
}

.topText span p:last-child {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  color: #92959a;
}
.topText span:last-child {
  float: right;
  font-size: 16px;
  font-weight: 700;
  color: #044b79;
  position: relative;
  top: 20px;
  cursor: pointer;
}
.infoLeft {
  height: 480px;
  padding: 20px 20px;
  margin: 1px 0 0 0;
}
.leftListDown {
  position: relative;
}
.leftListDown span:first-child {
  display: inline-block;
  width: 80%;
  height: 3px;
  background: rgba(4, 75, 121, 0.37);
  margin: 0 10px 0 0;
  position: absolute;
  left: -10px;
  top: 10px;
}
.leftListDown span:last-child {
  font-size: 16px;
  float: right;
  padding: 0 15px 0 0;
  color: #044b79;
  font-weight: 700;
  cursor: pointer;
}
</style>