zky-admin/src/views/conference/Manage.vue

<style lang="scss">
.preview {
  .el-form-item {
    margin-bottom: 15px;
  }
  label,
  p {
    line-height: 25px !important;
  }
}
.hotel {
  .el-dialog {
    margin-top: 30px !important;
  }
}
.desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}
</style>
<template>
  <section>
    <p><span>会议系统></span>会议管理</p>
    <div class="content">
      <div class="filter">
        <el-form
          size="small"
          label-width="70px"
          :inline="true"
          label-position="left"
        >
          <el-form-item label="">
            <el-input
              clearable
              placeholder="请输入标题"
              v-model="form.name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.contype" placeholder="请选择会议类型" clearable @clear="getData" @change="getData">
              <el-option key="offline" label="线下会议" value="offline">
              </el-option>
              <el-option key="online" label="线上会议" value="online">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData" type="primary">搜索</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button @click="addConference" type="primary"
              >新增会议</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="table"
        :data="list"
        height="59vh"
        border
        v-loading="loading"
        default-expand-all
        row-key="id"
        style="width: 100%"
      >
        <el-table-column prop="name" width="200" label="会议名称">
        </el-table-column>
        <el-table-column prop="username" label="会议海报" width="130">
          <template slot-scope="scope"
            ><img width="100" :src="scope.row.img" alt=""
          /></template>
        </el-table-column>
        <el-table-column prop="type" label="会议类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.contype == 'offline'">线下会议</el-tag>
            <el-tag v-else type="info">线上会议</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="organizer_name" label="主办方">
        </el-table-column>
        <el-table-column prop="speaker_name" label="主讲人"> </el-table-column>
        <el-table-column prop="" width="120" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_signup">可报名</el-tag>
            <el-tag v-else type="info">不可报名</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="220" label="会议时间">
          <template slot-scope="scope">
            开始：{{ scope.row.begin_time }} <br />
            结束：{{ scope.row.end_time }}
          </template>
        </el-table-column>
        <el-table-column prop="desc" width="300" label="会议简介">
          <template slot-scope="scope">
            <div class="desc">{{ scope.row.desc }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="hotel_name" label="酒店信息"> </el-table-column>

        <el-table-column prop="zip" width="220" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.contype == 'offline'"
              @click="
                (dialogVisible1 = true),
                  (cur_id = scope.row.id),
                  (name = scope.row.name),
                  getHotel(scope.row.id)
              "
              type="text"
              >管理酒店</el-button
            >
            <el-button
              v-if="scope.row.contype == 'online'"
              @click="
                (dialogVisible2 = true),
                  (cur_id = scope.row.id),
                  (online_address = scope.row.online_address)
              "
              type="text"
              >会议地址</el-button
            >
            <!-- <el-button  @click="dialogVisible=true,status='bind',cur_id=scope.row.id,name=scope.row.name"  type="text" >添加酒店</el-button> -->
            <el-button
              @click="
                $router.push({
                  path: '/conference/conference/add',
                  query: { id: scope.row.id },
                })
              "
              class="edit"
              type="text"
              >编辑会议</el-button
            >
            <el-button @click="del(scope.row.id)" type="text" class="del"
              >删除会议</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Page
        ref="pageButton"
        :current="form.page"
        :page_size="form.page_size"
        :total="total"
        @pageChange="gopage"
      />
    </div>

    <el-dialog
      width="80%"
      class="hotel"
      title="酒店列表"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible1"
    >
      会议名称：{{ name }}
      <el-button
        size="small"
        @click="(dialogVisible = true), (status = 'bind')"
        type="primary"
        >添加酒店</el-button
      >
      <el-table
        class="table"
        :data="hotel_list"
        height="400"
        default-expand-all
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="name" label="酒店名称"> </el-table-column>
        <el-table-column prop="telephone" label="电话"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="ctime" label="创建时间"> </el-table-column>
        <el-table-column prop="zip" width="220" label="操作">
          <template slot-scope="scope">
            <el-button @click="editHotel(scope.row.id)" type="text"
              >编辑</el-button
            >
            <el-button @click="delHotel(scope.row.id)" type="text" class="del"
              >删除</el-button
            >
            <el-button
              @click="updown(scope.row.id, 'up')"
              type="text"
              class="edit"
              >上移</el-button
            >
            <el-button
              @click="updown(scope.row.id, 'down')"
              type="text"
              class="edit"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      width="80%"
      class="hotel"
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <Hotel
        :status="status"
        :huiyi_name="name"
        :huiyi_id="cur_id"
        :cur_id="h_id"
        @addSuccess="add"
      />
    </el-dialog>
    <!-- 线上会议地址 -->
    <el-dialog title="线上会议地址" :visible.sync="dialogVisible2" width="50%">
      <div>
        <el-input
          v-model="online_address"
          placeholder="请输入在线会议地址"
          type="textarea"
        ></el-input>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible2 = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="updateConference" size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </section>
</template>
<script>
import Page from "../../components/Page";
import Hotel from "../../components/hotel";
export default {
  components: {
    Page,
    Hotel,
  },
  data() {
    return {
      edit: 0,
      cur_id: "",
      h_id: "",
      name: "",
      status: "",
      form: { name: "", page: 1, page_size: 20 },
      form1: {},
      total: 1,
      list: [{ name: "2333" }],
      loading: false,
      input: "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogTitle: "添加酒店",
      defaultProps: {},
      data: [],
      hotel_list: [],
      dialogVisible2: false,
      online_address: "",
    };
  },
  methods: {
    addConference() {
      this.$router.push({ path: "/conference/conference/add" });
    },
    //添加酒店
    add() {
      this.dialogVisible = false;
      this.getHotel(this.cur_id);
    },
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    getPermissions() {
      this.$api.getUserPermissions().then((res) => {
        this.data = res.data.data;
      });
    },
    getHotel(id) {
      this.$api.getConferenceHotel({ conference_id: id }).then((res) => {
        this.hotel_list = res.data.data;
      });
    },
    updown(id, type) {
      this.$api
        .updown({ rank: type, hotel_id: id, conference_id: this.cur_id })
        .then((res) => {
          if (res.data.code == 0) {
            this.getHotel(this.cur_id);
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        });
    },
    getData() {
      var parm = this.form;
      this.loading = true;
      this.$api.getConferenceList(parm).then((res) => {
        this.list = res.data.data.list;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    del(id) {
      this.$confirm("确定删除吗?关联数据都会被删除!", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteConference({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
      });
    },
    delHotel(id) {
      this.$confirm("确定删除吗", "提示", {
        type: "warning",
      }).then(() => {
        this.$api
          .deleteConferenceHotel({ hotel_id: id, conference_id: this.cur_id })
          .then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getHotel(this.cur_id);
          });
      });
    },
    editHotel(id) {
      this.getHotel(this.cur_id);
      this.dialogVisible = true;
      this.dialogTitle = "编辑酒店";
      this.status = "edit";
      this.h_id = id;
    },
    updateConference() {
      this.$api
        .updateConference({
          id: this.cur_id,
          online_address: this.online_address,
        })
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.dialogVisible2 = false;
        });
    },
  },
  created() {
    //   this.getPermissions()
    this.getData();
  },
};
</script>