web-test/src/views/superAdminCenter/trainlive/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <span v-if="display == 'list'">
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="add">添加</el-button>
          </el-col>
          <el-col :span="24" class="list">
            <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
          </el-col>
        </span>
        <span v-else>
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="back">返回</el-button>
          </el-col>
          <el-col :span="24" class="detail">
            <data-form :data="form" :fields="formFields" @save="toSave" :rules="rules">
              <template #custom="{ item, form }">
                <template v-if="item.model == 'create_date'">
                  <el-date-picker
                    v-model="form.create_date"
                    type="datetime"
                    placeholder="请选择"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </template>
                <template v-else-if="item.model == 'province'">
                  <el-select v-model="form.province" placeholder="请选择" filterable clearable @change="changePro">
                    <el-option v-for="(i, index) in provinceList" :key="index" :label="i.name" :value="i.code"></el-option>
                  </el-select>
                </template>
                <template v-else-if="item.model == 'place'">
                  <el-select v-model="form.place" placeholder="请选择" filterable clearable>
                    <el-option v-for="(i, index) in placeList" :key="index" :label="i.name" :value="i.code"></el-option>
                  </el-select>
                </template>
              </template>
            </data-form>
          </el-col>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dataForm from '@/components/form.vue';
import dataTable from '@/components/data-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: place } = createNamespacedHelpers('place');
const { mapActions: trainlive } = createNamespacedHelpers('trainlive');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    dataTable,
    dataForm,
  },
  data: function() {
    return {
      display: 'list',
      opera: [
        {
          label: '编辑',
          method: 'edit',
        },
        {
          label: '删除',
          method: 'delete',
        },
      ],
      fields: [
        { label: '房间号', prop: 'room_id' },
        { label: '标题', prop: 'title' },
        { label: '开始时间', prop: 'create_date' },
        { label: '负责人', prop: 'user' },
        { label: '联系电话', prop: 'phone' },
      ],
      list: [],
      total: 0,
      // 添加
      formFields: [
        { label: '标题', model: 'title' },
        { label: '开始时间', model: 'create_date', custom: true },
        { label: '省份', model: 'province', custom: true },
        { label: '市区', model: 'place', custom: true },
        { label: '主办方', model: 'sponsor' },
        { label: '负责人', model: 'user' },
        { label: '联系电话', model: 'phone' },
        { label: '信息简介', model: 'brief', type: 'textarea' },
      ],
      form: {},
      rules: {},
      // 省份
      provinceList: [],
      // 市区
      placeList: [],
    };
  },
  async created() {
    await this.search();
    await this.searchType();
  },
  methods: {
    ...place({ palcequery: 'query', palcefetch: 'fetch' }),
    ...trainlive(['query', 'fetch', 'create', 'update', 'delete']),
    // 查询
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 添加
    add() {
      this.display = true;
    },
    // 提交
    async toSave({ data }) {
      if (data.id) {
        let res = await this.update(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '修改信息成功',
            type: 'success',
          });
          this.back();
        }
      } else {
        let res = await this.create(data);
        if (this.$checkRes(res)) {
          this.$checkRes(res, '创建成功', '创建失败');
          this.$alert(`房间号：${res.data.room_id}` + `密码：${res.data.password};`, '成功', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            type: 'success',
            center: true,
            callback: action => {
              this.back();
            },
          });
        }
      }
    },
    // 修改
    toEdit({ data }) {
      this.$set(this, `form`, data);
      this.display = 'detail';
    },
    // 删除
    async toDelete({ data }) {
      this.$confirm('您确定要删除此信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let res = await this.delete(data.id);
          if (this.$checkRes(res)) {
            this.$message({
              message: '删除信息成功',
              type: 'success',
            });
            this.search();
          }
        })
        .catch(() => {});
    },
    // 返回
    back() {
      this.form = {};
      this.display = 'list';
      this.search();
    },
    // 查询省市
    async searchType() {
      let res = await this.palcequery({ level: 1 });
      this.$set(this, `provinceList`, res.data);
    },
    // 选择市
    async changePro(value) {
      let parent = value;
      let res = await this.palcequery({ level: 2, parent });
      this.$set(this, `placeList`, res.data);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  padding: 0 16px 0 0;
  .top {
    text-align: right;
    padding: 0 0 10px 0;
  }
}
</style>