web-cms/src/views/user/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="back">
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </el-col>
        <el-col :span="24" class="info">
          <span v-if="type == '4'">
            <perDetail :form="form" @toSave="perSave"></perDetail>
          </span>
          <span v-else-if="type == '5'">
            <orgDetail :form="form" @toSave="orgSave"></orgDetail>
          </span>
          <span v-else-if="type == '6'">
            <expDetail :form="form" @toSave="expSave"></expDetail>
          </span>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import perDetail from './parts/perDetail.vue';
import orgDetail from './parts/orgDetail.vue';
import expDetail from './parts/expDetail.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personal } = createNamespacedHelpers('personal');
const { mapActions: organization } = createNamespacedHelpers('organization');
const { mapActions: expert } = createNamespacedHelpers('expert');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'detail',
  props: {},
  components: {
    perDetail,
    orgDetail,
    expDetail,
  },
  data: function() {
    return {
      form: {},
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...personal({ personalFetch: 'fetch', personalUpdate: 'update' }),
    ...organization({ organizationFetch: 'fetch', organizationUpdate: 'update' }),
    ...expert({ expertFetch: 'fetch', expertUpdate: 'update' }),
    async search() {
      let type = this.type;
      if (type == '4') {
        let res = await this.personalFetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      } else if (type == '5') {
        let res = await this.organizationFetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      } else if (type == '6') {
        let res = await this.expertFetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      }
    },
    // 提交审核-个人用户
    async perSave(data) {
      let res = await this.personalUpdate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息审核成功',
          type: 'success',
        });
        this.back();
      }
    },
    // 提交审核-机构用户
    async orgSave(data) {
      let res = await this.organizationUpdate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息审核成功',
          type: 'success',
        });
        this.back();
      }
    },
    // 提交审核-专家用户
    async expSave(data) {
      let res = await this.expertUpdate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息审核成功',
          type: 'success',
        });
        this.back();
      }
    },
    // 返回列表
    back() {
      this.$router.push({ path: '/user' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    type() {
      return this.$route.query.type;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .back {
    text-align: right;
    margin: 0 0 15px 0s;
  }
}
</style>