cas_tt_cloud_admin/src/views/website/activity/apply/index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
    >
      <el-form-item label="活动名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入活动名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属站点" prop="tenant_id" v-if="is_super">
        <el-cascader
          size="small"
          style="width: 240px"
          v-model="queryParams.tenant_id"
          clearable
          separator="-"
          placeholder="请选择，支持搜索"
          :options="tenantOptions"
          filterable
          :props="{ emitPath: false, value: 'id', label: 'name' }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="申请人" prop="contact">
        <el-input
          v-model="queryParams.contact"
          placeholder="请输入申请人"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="contact_mobile">
        <el-input
          v-model="queryParams.contact_mobile"
          placeholder="请输入手机号码"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="数据编号" prop="id" width="90" align="center" />
      <el-table-column
        label="活动标题"
        prop="title"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column label="联系人" prop="contact" align="center" />
      <el-table-column label="手机号" prop="contact_mobile" align="center" />
      <el-table-column label="用户分类" prop="notify_crowd" align="center">
        <template slot-scope="scope">
          <div>{{ handleIdentity(scope.row.identity) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" prop="begin_at" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.begin_at) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="站点" prop="area" align="center" />
      <el-table-column label="备注" prop="handle_remark" align="center" />
      <el-table-column label="备注处理人" prop="handler" align="center" />
      <el-table-column
        label="申请时间"
        prop="created_at"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created_at) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleSee(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.status == 0"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page_num"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />
    <!-- 添加或修改对话框 -->
    <el-dialog title="查看" :visible.sync="open" width="35%">
      <el-form ref="form" :model="form" disabled label-width="120px">
        <el-form-item label="活动名称:" prop="title">
          <el-input v-model="form.title" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="联系人:" prop="contact">
          <el-input v-model="form.contact" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="手机号码:" prop="contact_mobile">
          <el-input
            v-model="form.contact_mobile"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </el-form-item>
        <el-form-item label="开始时间:" prop="begin_at">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.begin_at"
            type="datetime"
            placeholder="选择开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="finish_at">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.finish_at"
            type="datetime"
            placeholder="选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动地点:" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="报名人数上限:" prop="max_number">
          <el-input
            v-model.number="form.max_number"
            placeholder="请输入报名人数"
          />
        </el-form-item>
        <el-form-item label="邀请对象:" prop="notify_crowd">
          <el-select v-model="form.notify_crowd" multiple placeholder="请选择">
            <el-option
              v-for="(key, value) in identityList"
              :key="value"
              :label="key"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动介绍:" prop="content">
          <Editor v-model="form.content" :readOnly="true" :minHeight="150" />
        </el-form-item>
        <el-form-item label="宣传图:" prop="image">
          <ImageUpload v-model="form.image" :isShowTip="false" :limit="1" />
        </el-form-item>
        <el-form-item label="报名费用:" prop="amount">
          <el-input v-model.number="form.amount">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  applyList,
  activityAdd,
  applyDetail,
  activityEdit,
  applyDelete,
  applyHandle,
} from "@/api/website/activity";
import { tenantSelect } from "@/api/subPlatform/tenant";
import { areaList, industry, identity } from "@/api/config";
export default {
  data() {
    return {
      is_super: this.$store.getters.is_super,
      loading: true,
      showSearch: true,
      tenantOptions: [],
      queryParams: {
        title: undefined,
        tenant_id: undefined,
        contact: undefined,
        contact_mobile: undefined,
        page_num: 1,
        page_size: 10,
      },
      total: 0,
      dataList: [],
      // 是否显示弹出层
      open: false,
      // 人群类型
      identityList: [],
      // 表单参数
      form: {},
    };
  },
  methods: {
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.page_num = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      applyList(this.queryParams).then((res) => {
        this.dataList = res.data.data;
        this.total = res.data.count;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.memberOpen = false;
      this.reset();
    },
    handleIdentity(identity) {
      let arr = [];
      for (const key in this.identityList) {
        if (Object.hasOwnProperty.call(this.identityList, key)) {
          if (((key - 0) & identity) > 0) {
            arr.push(this.identityList[key]);
          }
        }
      }
      return arr.join(",");
    },
    handleSee(row) {
      applyDetail({ id: row.id }).then((res) => {
        const formData = res.data;
        let arr = [];
        for (const key in this.identityList) {
          if (Object.hasOwnProperty.call(this.identityList, key)) {
            if (((key - 0) & formData.notify_crowd) > 0) {
              arr.push(key);
            }
          }
        }
        formData.notify_crowd = arr;
        this.form = formData;
        this.open = true;
        this.title = "修改";
      });
    },
    handleUpdate(row) {
      this.$prompt('请输入数据编号为"' + row.id + '"的处理结果', "处理", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputType: "textarea",
        // inputPattern: /^.{5,20}$/,
        // inputErrorMessage: "长度必须介于 5 和 20 之间",
      })
        .then(({ value }) => {
          applyHandle({ id: row.id, remark: value }).then((response) => {
            this.getList();
            this.$modal.msgSuccess("处理成功");
          });
        })
        .catch(() => {});
    },
  },
  created() {
    this.getList();
    tenantSelect().then((res) => {
      for (const key in res.data) {
        if (Object.hasOwnProperty.call(res.data, key)) {
          const item = res.data[key];
          this.tenantOptions.push(item);
        }
      }
    });
    identity().then((res) => {
      this.identityList = res.data;
    });
  },
};
</script>